@font-face {
    font-family: 'Inter';
    src: url('Inter-VariableFont.ttf') format('truetype');
    font-weight: 100 900;    /* Variable range: covers thin to black */
    font-style: normal;
    font-display: swap;      /* Improves loading performance */
}

html{
	font-size: 15.5px;
}


body {
	margin: 0;
	font-family: 'Inter', sans-serif;
	padding: 0;
	line-height: 1.5rem;
	overflow-x: hidden;
	letter-spacing: -0.4px;
}

h1 {
	font-size: clamp(0.8rem , 0.2rem + 3.4vw, 2.7rem);
	color: #335384;
	font-weight: 600;
	line-height: 1.5em;
	white-space: pre;
	margin-block-start: 16px;
}

hr{
	background-color: #335384;
	width: 20%;
	height: 2px;
	margin-left: 0;
	margin-bottom: 1rem;
	animation: slide 1.7s 1 forwards;
}

@keyframes slide {
  from {
    transform: translateX(420%);
	opacity: 0.05;
  }
  to {
    transform: translateX(0%);
	opacity: 1;
  }
}

strong{
	font-size: 1.2rem;
}

h2, h3 {	
	white-space: nowrap;
	font-weight: 550;
}

h2 {
	letter-spacing: 0.2rem;
	font-size: clamp(0.6rem , 0.1rem + 3vw, 1.25rem);
	line-height: 3em;
	margin-block: 0px;
}

h3 {
	letter-spacing: 0.2rem;
	font-size: 1.1rem;
}

.accent {
	color: #5BA7D1;
}

p span {
	color: #5c6773;
}

.col-bg {
	background-color: #335384;
	color: #EFF0F2;
} 

.col1 {
	width: 25%;
	padding: 2rem 3rem 0px 3rem;
}

.col2 {
	width: 63%;
	padding: 2em 3.2em;
}

.col2.row1 p {
	margin-block-start: 5px;
}

/* Layout */

.container{
	margin: 0 auto;
	width: 100%;
	max-width: 990px;
}

.colgroup{
	display: flex;
	justify-content: space-between;
}

img{
	width: 95%;
	height: auto;
	border-radius: 50%;
	display: block;
    margin: 0px auto;
	aspect-ratio: 1 / 1;
    object-fit: cover;
	object-position: top center;
}

ul{
	padding: 0.5rem 0rem 0.5rem 1rem;
	line-height: 1.8em;
}

#ul2 li svg , #ul3 li svg{
	padding-bottom: 0px;
	margin-top: 3px;
}


.col2 ul{
	padding: 0 0 0 1.5em;
}

.col1 ul{
	font-size: 0.9rem;
	list-style-type: none;
	padding-left: 0.6rem;
}

.col1 ul li{
	margin: 1.2em 0;
}

.col2 ul > li::marker {
  font-weight: 900;
}

svg {
	padding: 0.2em 0.8em 0.3em 0.2em;
	display: inline-block;
	vertical-align: middle;
	float: left; 
}

.row1{
	padding-top: 2.5rem;
}

.row1.col1{
	padding-top: 3rem;
}

.contact {
	margin-bottom: -15em;
	margin-top: -3rem;
}

.exp {
	margin-top: -3rem;
}

.exp p, .training p{
	margin-block-end: 0px;
}

.exp ul, .training ul{
	margin-block-start: 5px;
}

.skills{
	margin-top: -25rem;
}

.certs {
	margin-top: -25.4rem;
}

.training {
	margin-top: -3.5rem;
}



@media (max-width: 946px){	
	html, body {
		width: 100%;
		height: 100%;
		margin: 0px;
		padding: 0px;
	}
	
	.colgroup{
		flex-direction: column;
		width: 100%;
	}
	
	.contact, .exp, .skills, .training, .certs, .row1{
		margin: 0;
		width: 100%;
		padding: 2em 0;
		max-width: 946px;
	}	
	
	img{
		width: 30%;
		padding: 0;
	}
	
	hr{
		opacity: 0.05;
		margin-left: 40%;
		animation: rota 1.6s 1 forwards;
	}
	
	body {
		text-align: center;
	}
	
	.container{
		max-width: 946px;
	}
	
	.col2.training ul {
		list-style-type: none;
	}

	.col2.training ul li {
		list-style-type: none;
	}
	
	.col2 ul{
		padding: 0 0 2em 1.5em;
	}

	
	svg , ul > li::marker {
		float: none; 	
	}
	
	#ul2 li svg{
		padding-bottom: 3px;
		margin-top: 0px;
	}
	
	svg {
		padding: 0.1em 0.5em 0.15em 0em;
	}
	
	.empty{
		display: none;
	}
	
	h1 {
		font-size: clamp(1.55rem , 0.5rem + 4.4vw, 2.55rem);
		line-height: 1em;
	}
	
	h2 {
		letter-spacing: 0.6rem;
		font-size: 1.1rem;
		white-space: normal;
		line-height: 1.5rem;
		font-weight: 550;
	}
	
	
	
	@keyframes rota {
	  from {
		transform: rotate(0deg);
		opacity: 0.05;
	  }
	  to {
		transform: rotate(360deg);
		opacity: 1;
	  }
	}
	
	p {
		width:88%;
		margin: auto;
	}
	ul {
		width:75%;
		margin: auto;
	}
	
	#ul1 {
		line-height: 1.5em;
		padding: 0.2em 1em;
		opacity: 0;
		transform: translateX(120%);
	}
	
	.ul1 {
		animation: slide 1.2s ease forwards;
	}
	@keyframes slide {
		from {
			transform: translateX(120%);
			opacity: 0.3;
		}
		to {
			transform: translateX(0%);
			opacity: 1;
		}
	}
	
	#ul2 {
		opacity: 0;
		transform: translateX(-120%);
	}
	
	.ul2 {
		animation: slide2 1.2s ease forwards;
	}
	@keyframes slide2 {
		from {
			transform: translateX(-120%);
			opacity: 0.3;
		}
		to {
			transform: translateX(0%);
			opacity: 1;
		}
	}
	
	#ul3 {
		opacity: 0;
		transform: translateY(120%);
	}
	
	.ul3 {
		animation: slide3 1.2s ease forwards;
	}
	@keyframes slide3 {
		from {
			transform: translateY(120%);
			opacity: 0.3;
		}
		to {
			transform: translateY(0%);
			opacity: 1;
		}
	}

	
}

@media print {
	html{
		width: 100%!important;
		zoom: 90%;
	}
	
	#ul1 {
		transform: translateX(0%);
		opacity: 1;
	  }
	  #ul2 {
		transform: translateX(0%);
		opacity: 1;
	  }
	  #ul3 {
		transform: translateY(0%);
		opacity: 1;
	  }
	  hr {
		transform: translateX(0%);
		opacity: 1;
	  }
	
  hr {
    transform: none;
    opacity: 1;
    animation: none;
  }
  
  .contact{
	  padding-top: 1rem;
  }
  
  
  .exp {
	margin-top: 0rem;
}
  
  img{
	width: 80%!important;
	height: auto;
	border-radius: 50%;
	display: block;
    margin: 0px auto;
	aspect-ratio: 1 / 1;
	padding-bottom:5px;
}
  
	.skills{
		margin-top: -22rem!important;
	}
	.skills svg{
		display:none;
	}

	.certs {
		margin-top: -23rem!important;
		padding-bottom: 3rem;
		box-shadow: 0px 100px 0px #335384;
}		
  
  .training {
	margin-top: 0rem;
}


.col2.training ul {
		list-style-type: unset;
	}

	.col2.training ul li {
		list-style-type: unset;
	}

  .col1 ul{
	font-size: 0.9rem;
	list-style-type: none;
	padding-left: 0px!important;
	transform: none;
    opacity: 1;
    animation: none;
}
	
  .colgroup {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .col1 {
    width: 28%;
    padding: 0.3rem 1rem 0 2rem;
	background-color: #335384;
	color: #EFF0F2;
	overflow-x: hidden;
  }
  

  
  .col2 {
    width: 63%;
    padding: 1rem 0 0 2rem!important;
  }
	
  .col2 ul{
	padding: 0 0 0 1em;
}
  
  img {
    width: 95%;
  }
  body {
    text-align: left;
  }
  svg {
    float: left;
  }
  
  h2, h3 {	
		white-space: nowrap;
		font-weight: 550;
	}

	h2 {
		letter-spacing: 0.2rem;
		font-size: clamp(0.6rem , 0.1rem + 3vw, 1.25rem);
		line-height: 3em;
	}

	h3 {
		letter-spacing: 0.2rem;
		font-size: 1.1rem;
	}
}