/*
Theme Name: Daniel Sanchez
Theme URI: https://github.com/netandout
Description: .
Version: 1.0
Author: NETANDOUT
Tags:
Text Domain:
*/
@font-face {
	font-family: 'Helveltica';
	src: url('./fonts/Helvetica/HelveticaLTStd-BoldCond.otf');
	font-weight: bold;
	font-style: normal;
}


@font-face {
	font-family: 'Helveltica';
	src: url('./fonts/Helvetica/HelveticaLTStd-LightCond.otf');
	font-weight: normal;
	font-style: normal;
	font-display: swap
}

@font-face {
	font-family: 'Roboto';
	src: url('./fonts/Roboto/RobotoCondensed-Light.ttf');
	font-weight: normal;
	font-style: normal;
	font-display: swap
}

@font-face {
	font-family: 'Roboto';
	src: url('./fonts/Roboto/RobotoCondensed-Italic.ttf');
	font-weight: normal;
	font-style: italic;
	font-display: swap
}

:root{
	--color1: #1c1c1a;
	--color2: #034a60;
	--color3: #eaeaf4;
	--color4: #230071;
	--color5: #00a585;
}

body {
	line-height: 1;
	margin: 0;
	overflow-x: hidden;
	background: linear-gradient(to right,var(--color1), #191919,var(--color1));
}

#main {
	display: flex;
	flex-direction: column;
	align-items: center;
	align-content: space-between;
	justify-content: space-between;

}


html {
	box-sizing: border-box;
	color: var(--color3);
	background-color: var(--color1);
}

*, *:before, *:after {
	box-sizing: inherit;
}
#header {
	padding: max(2vw,18px) 3vw;
	display: flex;
	position: fixed;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	z-index: 10;
	transition: background-color 1s;
	height: max(7.5vw, 50px);
}

.transparent{
	background-color: transparent;
}

.solidBar{
	background-color: var(--color1);
}

#nameContainer{
	display: flex;
	align-items: center;
	width: 33%;
	max-height: max(4px, 6vw) ;
}


#nameContainer img{
	width: max(12vw, 80px);
}

#logoContainer {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 33%;
}

#logoContainer img {
	width: max(4vw, 25px);
}

#socialBar{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
	width: 34%;
}

#socialBar img {
	height: max(2.5vw, 18px);
	margin-right: max(3vw, 10px);
}

section {
	width: 100vw;
}

#intro .container {
	display: flex;
	align-items: center;
	height: 50vw;
}

#intro .backgroundImage{
	position: absolute;
	z-index: 0;
	width: 66vw;
	height: 50vw;
	right: 0;
}

#intro .textContainer {
	font-family: Helveltica, serif;
	margin-top: max(10vw, 50px);
	margin-left: max(7vw,20px);
	z-index: 1;
}

#intro .line1{
	position: absolute;
	margin-left: -0.8vw;
	margin-top: -2vw;
	width: 44.8vw;
	height: 27vw;
}

#intro .mainPhrase {
	font-weight: bold;
	font-size: 4.1vw;
	line-height: 6.2vw;
	letter-spacing: 1vw;
	margin-bottom: 3vw;
	width: max(50vw, 250px)
}

#intro .subPhrase {
	font-size: 2vw;
	line-height: 4vw;
	letter-spacing: 0.5vw;
	width: 40vw;
}


#experience{
	margin-top: 8vw;
	width: 86vw;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#experience .textContainer{
	width: 100%;
	font-family: Helveltica, serif;
	background-color: var(--color2);
	padding: 6vw 4vw 4vw;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#experience .mainPhrase{
	font-weight: bold;
	font-size: 6.2vw;
	letter-spacing: 1.4vw;
}

#experience .subPhrase {
	font-size: 2.1vw;
	line-height: 4.15vw;
	letter-spacing: 0.52vw;
}

#experience .line2{
	margin-top: 4vw;
	width: 88vw;
}

#abilities {
	margin-top: 6vw;
	display: flex;
	flex-flow: row;
	justify-items: center;
	justify-content: space-evenly;
}

#abilities .line3{
	position: absolute;
	width: 30vw;
	margin-top: 33vw;
}

#abilities .lineLeft{
	margin-left: -18.5vw;
}

#abilities .lineRight{
	margin-left: 18.5vw;
}



#abilities .container{
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	margin: 2vw;
}

#abilities .abilities1{
	width: 40vw;
}

#abilities .abilities0,#abilities .abilities2{
	width: 26vw;
}


#abilities .imgContainer{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	background-repeat: no-repeat;
}

#abilities .abilities1 .imgContainer{
	background-size: 40vw 25vw;
	width: 40vw;
	height: 25vw;
}


#abilities .abilities0 .imgContainer,#abilities .abilities2 .imgContainer{
	background-position: bottom right;
	background-size: 32vw 20vw;
	width: 26vw;
	margin-top: 10vw;
	height: 15vw;
}


#abilities .title{
	text-align: center;
	font-family: Helveltica, serif;
	font-weight: bold;
	font-size: max(2vw, 12px);
	letter-spacing: max(0.4vw, 2px);
	line-height: max(3vw, 18px);
	margin-bottom: 4vw;
	max-width: 80%;
}

#abilities .textContainer{
	background: linear-gradient(to bottom, #252525,  var(--color1));
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	height: 25vw;
	padding: 1vw;
	min-height: 150px;
}



#abilities .description{
	font-family: Roboto, serif;
	font-size: max(1.3vw, 7px);
	line-height: max(1.9vw, 9px);
	letter-spacing: 2pt;
	max-width: 80%;
}

#abilities .abilities0 .description{
	display: none;
}

#abilities .abilities2 .description,#abilities .abilities0 .description{
	display: none;
}


#abilities .icon {
	margin-top: 3vw;
	width: max(6vw, 40px);
	margin-bottom: 2vw;
}

@media screen and (max-width: 600px){
	#abilities .abilities0 .title{
		display: none;
	}
	#abilities .abilities2 .title{
		display: none;
	}
	#abilities .line3 {
		margin-top: calc(30vw + 20px);
		width: calc(26vw - 15px);
		height: 10px;
	}
}



#biography{
	width: 86%;
	margin-top: 5vw;
	background-color: var(--color2);
	display: flex;
	flex-direction: column;
	margin-bottom: 18vw;
	padding: 7vw 5vw;
}

#biography .line4{
	position: absolute;
	width: 55%;
	height: calc(75vw + 30px);
	margin-left: 3.5vw;
	margin-top: 18%;
}

#biography .line4M{
	display: none;
	position: absolute;
	align-self: center;
	margin-top: 25%;
	width: 80%;
}

#biography .headSideBiography{
	display: flex;
	flex-direction: row;
	margin-bottom: 5vw;
}

#biography .head{
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-left: 5vw;
}

#biography .title{
	font-family: Helveltica, serif;
	font-weight: bold;
	font-size: 4.2vw;
	line-height: 6.3vw;
	letter-spacing: 1.05vw;
	margin-bottom: 2vw;
}

#biography .subTittle1{
	font-family: Roboto, sans-serif;
	font-style: italic;
	font-size: max(1.8vw, 10px);
	line-height: max(3.1vw, 15px);
	letter-spacing: 0.1vw;
}

#biography .contentSideBiography {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
}

#biography .content{
	display: flex;
	flex-direction: column;
}

#biography .image2{
	margin-left: 5vw;
	width: 36vw;
	box-shadow: 5px 5px 10px var(--color1);
}

#biography .image1{
	width: 35vw;
	box-shadow: 5px 5px 10px var(--color1);
}

#biography .subTittle2{
	font-family: Helveltica, serif;
	font-weight: bold;
	font-size: max(2.3vw, 15px);
	line-height: max(3.3vw, 20px);
	letter-spacing: max(0.38vw, 2px);
	width: 85%;
	margin-bottom: 1vw;
}

#biography .description{
	font-family: Roboto, serif;
	font-size: max(1.25vw, 8px);
	line-height: max(2.1vw, 11px);
	letter-spacing: max(0.2vw, 1px);
}

#biography .description p{
	margin-bottom: 1vw;
}

@media screen and (max-width: 650px){
	#biography{
		margin-bottom: 4vw;
	}

	#biography .contentSideBiography{
		margin-top: 2vw;
	}

	#biography .line4{
		display: none;
	}

	#biography .image2{
		display: none;
	}

	#biography .line4M{
		display: initial;
	}

}

#externalLinks{
	margin-top: 5vw;
	margin-bottom: 5vw;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
}

#externalLinks .title{
	font-family: Helveltica, serif;
	font-weight: bold;
	font-size: max(1.7vw, 12px);
	letter-spacing: max(0.33vw, 2px);
	line-height: max(2.2vw, 13px);
	margin-bottom: 3.5vw;
	text-align: center;
	width: 75%;
}


#externalLinks .container {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	justify-items: center;
	align-items: center;
	align-content: center;
	width: max(27vw, 120px);
	margin: 0 1.25vw;
}


#externalLinks .imgContainer{
	display: flex;
	flex-direction: column;
	align-items: center;
	align-content: center;
	justify-content: flex-end;
	background-repeat: no-repeat;
	height: 18.43vw;
	background-position: center;
	background-size: max(27vw, 120px) max(18.43vw, 82px);
	width: max(27vw, 120px);
}

#externalLinks .buttonContainer{
	background: linear-gradient(to bottom, #303030,  #1C1C1AD5);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 15vw;
	padding: 1vw;
	min-height: 50px;
	width: 100%;
}


#externalLinks .button{
	box-sizing: content-box;
	font-family: Roboto, serif;
	color: var(--color3);
	font-size: max(2vw, 13px);
	letter-spacing: max(0.3vw, 2px);
	text-align: center;
	text-decoration: none;
	padding: 1vw 2.5vw;
	border: 1px solid var(--color5);
}


#contact{
	width: 86%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	margin-bottom: 5vw;
	background: linear-gradient(to bottom, #252525,  var(--color1));
	border: #191919 1px solid;
}

#contact .imgContainer{
	width: 50%;
}

#contact img{
	width: 40vw;
	height: 45vw;
}

#contact .title{
	font-family: Helveltica, serif;
	font-weight: bold;
	line-height: max(4vw, 18px);
	font-size: max(3.5vw, 14px);
	letter-spacing: max(0.6vw, 4px);
	margin-bottom: 2vw;
	padding-right: 10%;
}

#contact p{
	margin: 0;
}



#contact .contactContainer{
	width: 100%;
	padding: 0;
}

#contact .fieldContainer{
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
}

#contact .formContainer{
	display: flex;
	flex-direction: column;
}
#contact .fields{
	display: flex;
	flex-direction: column;
}

.inputb{
	display: flex;
	flex-direction: column;
	margin: 0 !important;
	padding: 15px !important;
	color: #eaeaf4;
}

#contact textarea{
	resize: none;
	box-sizing: border-box;
	height: max(10vw, 40px);

}

#contact .fields input, textarea{
	width: 100%;
	color: var(--color3);
	font-family: RobotoCond, serif;
	border: none;
	background-color: #393939;
	padding: 15px;
	font-size: max(1.59vw,12px);
	letter-spacing: max(0.2vw, 3px);
	margin: 0;
}

#contact .button{
	border: none;
	font-family: RobotoCond, serif ;
	font-size: max(1.8vw, 10px);
	letter-spacing: 0.3vw;
	color: var(--color3);
	background-color: var(--color2);
	margin-top: 2vw;
	width: 50%;
	padding: 0.7vw 3vw;
}

#mc_embed_signup div.mce_inline_error{
	position: absolute;
	margin:  max(3vw, 25px) 0 0 0 !important;
	padding: 0 !important;
	font-size: max(1vw, 7px) !important;
	background-color: transparent !important;
	color: red !important;
}

.wpforms-confirmation-container-full {
	border: none !important; 
	background: none !important;
}

@media screen and (max-width: 500px){
	#contact .formContainer{
		padding-right: 0;
	}

	#contact .imgContainer{
		display: none;
	}

	#contact .contactContainer{
		width: 80%;
	}
}