/* SCROLL BAR */

/* Works on Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.6) rgba(255,255,255,.1);
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 8px;
}

*::-webkit-scrollbar-track {
  background: rgba(255,255,255,.1);
}

*::-webkit-scrollbar-thumb {
  background-color: rgba(255,255,255,.1);
  border-radius: 150px;
  border: 3px solid rgba(255,255,255,.6);
}

@font-face {
    font-family: 'mia';
    src: url('FFF_Tusj-webfont.eot');
    src: url('FFF_Tusj-webfont.eot?#iefix') format('embedded-opentype'),
         url('FFF_Tusj-webfont.woff') format('woff'),
         url('FFF_Tusj-webfont.ttf') format('truetype'),
         url('FFF_Tusj-webfont.svg#fff_tusjbold') format('svg');
    font-weight: normal;
    font-style: normal;
}
.montserrat {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
a{
	text-decoration: none;
}
body {
	font-family: "PT Sans", Helvetica;
	text-align: center;
	height: 100vh;
	background-image: url(portada web_fondo2024cyan.svg);
	background-repeat: no-repeat;
	background-size: cover;
	overflow: hidden;
}
.fondosup, .fondoinf{
	width: 100vw;
	height: 100vh;
	position: fixed;
	left: 0;
	background-repeat: no-repeat;
	background-size: 100vw;
	overflow: hidden;
}
.fondosup{
	top: 0;
	background-image: url(portada web_fondo2024sup.svg);
	background-position: left top;
}
.fondoinf{
	bottom: 0;
	background-image: url(portada web_fondo2024inf.svg);
	background-position: left bottom;
}
video {
	width: auto;
	height: auto;
	background-size: cover;
	margin: 0%;
	min-height: 100%;
	min-width: 100%;
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: -1000;
	opacity: 0.8;
	filter: invert(45) contrast(73);
}

/* Encabezado  */

header {
	font-family: "Oswald";
	width: 180px;
	height: 10px;
	padding: 0 5% 0 0;
	color: rgb(30,30,30);
	text-align: left;
	float: left;
	display: inline-block;
	position: relative;
	z-index: 104;
}
#logo {
	width: 220px;
	cursor:pointer;
	cursor: hand;
	float: right;
	position: fixed;
	top: 40px;
	left: 5%;
}
#logo2 {
	width: 220px;
	font-size: 69px;
	font-weight: 700;
	text-shadow: rgba(200,200,200,1) 2px 2px 2px;
	display: ;
	margin: 0;
	float: right;
	position: fixed;
}
#nombre{
	width: 220px;
	font-size: 222%;
	font-weight: 300;
	margin:  0px 0px;
	float: left;
	position: fixed;
	top: 215px;
	left: 5%;
}
#profesion{
	width: 220px;
	font-size: 115%;
	font-weight: 300;
	margin: 0px 0px;
	float: left;
	position: fixed;
	top: 255px;
	left: 5%;
}
/* Formulario de Contacto  */

form { margin: 0; width: 220px; z-index: 150; position: fixed; top: 297px; left: 5%; float: left; }
fieldset { margin: 0 0 0 0; width: auto; border-color: rgba(0,0,0,0.2); z-index: 98; background-color: rgba(255,255,255,0.7);}
legend { font-size: 180%; }
label { display: inline-block; font-weight: bold; color: #444; font-size: 90%; margin: 8% 3% 0 2%; }
input, textarea { display: inline-block; font-size: 90%; }
input[type="text"], textarea { width: 100%; margin: 4% 3% 0 2%; background: #fff; border: 1px solid #ccc; color: #777; display: inline-block; max-width: 88%; outline: none; padding: 3% 3.5%; }
input[type="submit"] { margin: 8% 0; background: #0088B2; color: #fff; padding: 4% 6%; font-weight: bold; display: inline-block; border: none; cursor: pointer; }
input[type="submit"]:hover { display: inline-block;background: #444; }
#flechita, #contacto {color: rgba(0,0,0,0.5); cursor:pointer; cursor: hand; }
#flechita { float: right; margin: -20px 0; font-family: "PT Sans"; font-weight: 800; font-size: 15px; }

iframe { display: none; width: 95%; height: 60px; border-style: none; margin: 10px 0 0 0; font-family: "PT Sans"; font-weight: 400; font-size: 14px; background-color: red; color: white; font-style: italic;}
#formgracias { font-family: "PT Sans"; font-weight: 400; font-size: 14px; padding: 10% 0; background-color: blue; color: white; font-style: italic; }

/* Menú  */

nav {
	display: none;
	float: left;
	width: auto;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	transform: skewX(-28.5deg);
	position: relative;
	z-index: 103;
}
#menu {
	width: 100%;
    height: 100vh;
    float: left;
    margin: 0;
    padding: 0;
}
#menu li {
	color: rgba(255,255,255,1);
	margin: 0 -1px;
	padding: 0;
	width: 10em;
    height: 100%;
	display: block;  
    transition: all 1s;
    float: left;
    cursor:pointer;
	cursor: hand;
	overflow: hidden;
	position: relative;
	background-position: center -25px;
	background-size: cover;
}
.ac {
	width: 15em!important;
}
.noac {
	width: 2em!important;
}
#menu li a {
	font-family: "Oswald";
	font-size: 130%;
    display: inline-block;
    text-decoration: none;
    color: #fff;
    width: 110px;
    height: auto;
	transform: skewX(28.5deg);
	text-align: center;
	position: relative;
	left: 0;
	top: 26%;
	padding: 0 0 0 0;
	text-shadow: 1px 1px 3px black;
	transition: all 1s;
}
#menu:hover li {
	width: 7em;
	transition: all 1s;
}
#menu:hover li a {
	width: 110px;
	transition: all 1s;
}
#menu li:hover, #menu li.ac{
    background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	width: 13em;
}
#menu #quien{
	background-color:rgba(0,159,227,1);
}
#menu #quien:hover, #menu #quien.ac{
	background-image: url(curriculum2.png);
}
#menu #que{
	background-color:rgba(230,0,126,1);
}
#menu #que:hover, #menu #que.ac{
	background-image: url(que.png);
}
#menu #donde{
	background-color:rgba(255,237,0,1);
}
#menu #donde:hover, #menu #donde.ac{
	background-image: url(donde.png);
}
#menu #como{
	background-color:rgba(0,0,0,1);
}
#menu #como:hover, #menu #como.ac {
	background-image: url(como.png); 
}
#donde-peque, #menu #donde a {
	color: rgba(0,0,0,1);
	text-shadow: 1px 1px 1px white;
}
#menu #donde:hover #donde-peque, #menu #donde:hover a, #menu #donde.ac a {
	color: #fff;
	text-shadow: 1px 1px 1px black;
	transition: unset;
}
.peque{
	font-size: 119%;
	font-family: "Oswald";
	opacity: 0.9;
	display: none;
	transform: rotate(-90deg) skewX(-22deg);
	position: relative;
	width: 190px;
	left: -79px;
	top: 26%;
	transition: all 1s;
	text-shadow: 1px 1px 1px black;
}

/* Seccción de Contenidos  */

article {
	color: ;
	text-shadow: ;
	font-size: 90%;
	font-weight: 400;
	text-align: right;
	width: 40vw;
    display: none;
	transition: opacity .3s ease-out;
	opacity: 0;
	margin: 0;
	padding: 0;
	float: right;
	position: relative;
	z-index: 102;
	padding: 60px 40px 0;
	overflow: auto;
	height: calc(100vh - 60px);
}
.visible{
	opacity: 1;
	transition: opacity .3s ease-out;
}
article:not(#presentacion):not(#portfolio):not(#experiencia)  {
	
}
.subti{
    font-family: "PT Sans";
    font-weight: 700;
    text-transform: uppercase;
    font-size: 150%;
    font-size: clamp(30px, 4vw, 45px);
    margin: 0;
    text-align: left;
}
.subtiita{
    font-family: "PT Sans";
    font-weight: 700;
    font-style: italic;
    font-size: 120%;
}
	
.boton {
	position: absolute;
	height: auto;
	right: 2%;
	top: 2%;
	z-index: 100000;
	padding:12px;
	background-color: rgba(255,0,0,.85);
	border-radius: 25px;

}
.boton:hover {
	background-color: rgba(0,0,255,.7);
}
.boton a{
	text-decoration: none;
	color:white;
}
#presentacion{
	display: unset;
	width: 100%;
	padding: unset;
	height: unset;
	opacity: 1;
	z-index: 110;
}
#presentacion h3{
	position: absolute;
	font-size: 29px;
	font-family: "Montserrat", Helvetica, sans-serif;
}
#presentacion .tipeo, #presentacion img {
    position: fixed;
    height: 80%;
    right: 0;
    bottom: 0;
    /*max-height: 601px;*/
    height: auto;
    width: 40%;
    min-width: 300px;
    z-index: 9;
}
#presentacion .tipeo{
	top: calc(100vh - 15vw);
	width: 15%;
	min-width: unset;
	padding: 0 17.5% 0 7.5%;
	text-align: left;
	font-size: clamp(0.5rem, 0.2143rem + 1.8286vw, 2.5rem);
	font-weight: 700;
	letter-spacing: .7px;
	font-family: "Coming Soon", sans-serif;
	z-index: 10;
}
#presentacion img[src="portada_web_cartelb.png"]{
	width: 22vw;
	bottom: unset;
	top:-2vw;
	right: 3vw;
}
.typed-cursor{
	margin-left:-5px;
	font-weight: 500;
}
#soy{
	padding-top: 220px;
	line-height: 1.7;
	font-size: 16px;
	padding-right: 0px;
	width: 50vw;
	text-align: left;
	height: calc(100vh - 220px);
}
#soy .subti{
	padding-right: 40px;
	text-align: left;
}
.caja-flex{
	display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    height: calc(100vh - 20px);
}
.quien-soy{
	padding-right: 15vw;
}
#soy img{
	position: relative;
	right: 0;
	bottom: 0;
	height: clamp(300px, 40vw, 400px);
	max-width: 100%;
}
#portfolio {
	display: none;
	padding: 60px 40px 0 45vw;
	width: 55vw;
	position: absolute;
	right: 0;
}
#portfolio .subti {
	padding: 0 0 0 10%;
	text-align: center;
}
.pp_pic_holder.pp_default > div.ppt{

}
#portf div {
	font-size: 0px;
	line-height: 0;
	float: left;
	overflow: hidden;
	width: auto;
	height: 80px;
	margin: 7px;
	padding: 0px;
	border-radius: 50%;
}
.linkweb{
	display: inline-block;
    position: absolute;
}
.linkweb .grid__item{
	display: none;
}
.linkweb2{
    position: absolute;
    top:-330px;
    left:-440px;

    top: -220px;
    left: -190px;
    font-size: 23px;
    font-weight: 600;
    color: lightcyan;
    transition:all .25s ease-in-out;
}
.linkweb2:hover{
	scale: 1.1;
	color: #0000EE;
    transition:all .25s ease-in-out;
}
.link-popup{
	position:fixed;
	z-index:10000;
	width:90vw;
	text-align:right;
}
#experiencia{
	height: calc(100vh - 220px);
	width: 45vw;
	text-align: center;
    padding-top: 220px;
}
#experiencia .subti{
	text-align: left;
	padding-left: 50px;
}
#experiencia .lineatiempo{
	text-align: left;
	margin:0 auto;
}
#experiencia .lineatiempo img{
	width: clamp(250px, 50vw, 400px);
	margin:50px 50px 0 0;
}
#conocimientos{
	height: calc(100vh - 220px);
	width: 50vw;
	text-align: left;
    padding-top: 220px;
}
#conocimientos .habilidades{
	text-align: left;
	margin:0 auto 40px;
}
#conocimientos .subti{
	margin: 0 0 30px 0;
}
#conocimientos .habilidades img{
	max-width: 300px;
	vertical-align: top;
	margin: 0 20px 10px 0;
}
/* --------------------------------------------------------------
RESPONSIVE STYLES
-------------------------------------------------------------- */
@media screen and (max-width: 1320px){
	.ac {width: 10em!important;}
	#soy{ width:38vw; }
	.quien-soy{ padding-right: 30px; }
	#portfolio .subti{ text-align:right; }
	.grid-wrap{ text-align:right; }
	#experiencia .lineatiempo img{width: clamp(250px, 100%, 400px);}
	#conocimientos{ width: 45vw; text-align:center; }
	#conocimientos .habilidades{ text-align: center; }
	#conocimientos .subti{ text-align: center; }
}
@media screen and (max-width: 1098px){

	header { width: 100px;  left:3%; }
	#logo { width: 160px; top: 26px; left:3%; }
	#nombre{ width: 160px; font-size: 162%; top: 154px; left:3%; }
	#profesion{ width: 160px; font-size: 85%; top: 186px; left:3%; }
	form { width: 160px; top: 206px; left:3%; }
    #menu li { width: 7em; }
    #menu li a { font-size: 105%; left: 10px; top: 26%; text-align: left; padding: 0 9% 0; }
    #menu:hover li { width: 18%; }
    #menu li:hover{ width: 28%; }
    .peque{ font-size: 105%; }
    /*#presentacion img { height: 70%; }*/
}
@media screen and (max-width: 931px){
	.ac {width: 7em!important;}
    .noac
}
@media screen and (max-width: 945px){
	@media screen and (max-height: 794px){
		#presentacion img[src="portada_web_cartelb.png"] { min-width: 200px;}
	}
}
@media screen and (max-width: 788px){
	body{ overflow-y:auto }
	header { width: 100%; height: 222px; padding: 0; left:0%; background-color: rgba(230,230,230,0.5); }
	#logo { position: absolute; }
	#nombre{ position: absolute; }
	#profesion{ position: absolute; }
	nav { width: 55%; position: absolute; right: 10%; top: 0; z-index: 110; float: right; }
	#menu {	width: 100%; height: 222px; float: right; }
	#menu li { width: 25%; text-align: left; margin: unset; }
    #menu li a { font-size: 90%; left: 13px; text-align: left; }
    #menu:hover li { width: 21%; }
    #menu li:hover{ width: 27%; }
    .peque{ font-size: 105%; top: 36%; }
    form { position: absolute; width: 160px; top: 225px; left:3%;}
    article { overflow: hidden; width: 100%; padding: 60px 40px; height: auto; min-height: calc(100vh - 222px); }
    /*#presentacion .tipeo{ top: calc(100vh - 115px); width: 120px; padding: 0 118px 0 0; font-size: 14.8px;}*/
    #presentacion .tipeo{ top:unset; bottom:0; width: 115px; height: 110px; padding: 0 135px 0 0; font-size: 14.8px;}
    #presentacion img[src="portada_web_cartelb.png"] { position:absolute; width: 40vw;top: 0;right: 2vw;}
    #soy{ width: 90vw; padding-bottom:0; padding-top: 80px;}
    .caja-flex{ height: calc(100vh - 275px); }
    #conocimientos { width:90%; height: auto; padding-top: 80px; }
    #experiencia{ height: auto; padding-bottom: 0; width: calc(100vw - 30px); padding: 60px 15px 0;}
    #experiencia .subti{ text-align: center; padding-left: 0px;}
    #experiencia .lineatiempo{ text-align: center; margin:30px auto 0px; }
    #experiencia .lineatiempo img{ margin: 30px 0 0;}
    #portfolio, #pecont { position: relative; width: 90%; padding: 60px 8% 60px 3%; float: left!important; }
    #portfolio .subti{ text-align:right; padding:0; } 
    .grid-wrap{ text-align:center; }  
    #presentacion { height: calc(100vh - 222px); z-index:170; }
    .boton { top:270px; right:unset; left:3%; }
    /*#presentacion img { height: 60%; }*/

    @media screen and (max-height: 530px){
    	#presentacion img[src="portada_web_cartelb.png"] { display: none!important;}
    }
}
@media screen and (max-width: 671px){
	
	header { height: 150px; z-index: 180; }
	#logo { width: 130px; top: 30px; left:10px; }
	#nombre{ width: 240px; position: absolute; top: 52px; left: 160px; font-size: 242%; }
	#profesion{ width: 240px; position: absolute; top: 95px; left: 160px; font-size: 125%; }
	form { top: 220px; left: 3%; }
	.boton { top:220px;}
	fieldset { background-color: rgba(255,255,255,0.9);}
	nav { width: 94%; right: unset; left: 12px; top: 150px; background-color: rgba(0,0,0,1); }
	#menu {	width: 100%; height: 38px; float: right; }
	.ac { width: 28%!important; font-size: 100%!important; height: 45px!important;  }
	.noac { width: 24%!important; }
    #menu li a { font-size: 90%; left: 10px; text-align: left; }
    #menu:hover li { width: 21%; }
    #menu li:hover { width: 27%; }
    #menu #quien:hover, #menu #que:hover, #menu #como:hover, #menu #donde:hover { background-image: none; }
	.peque{ font-size: 90%; top: 16%; transform: rotate(0deg) skewX(28.5deg); width: 190px; left: 10px; top: 26%;  }
	#menu #donde:hover #donde-peque, #menu #donde:hover a { color: rgba(0,0,0,1); text-shadow: 1px 1px 1px white; transition: all 1s; }
	article, #conocimientos { width: 80%; padding: 0 40px 0; margin: 60px 0 0 0; height: calc(100% - 210px); min-height: calc(100vh - 210px); }
	#presentacion{margin-top: 38px;}
	#soy{ height: calc(100vh + 160px); margin-top:80px; }
	#presentacion img[src="portada_web_cartel.png"] { position:absolute; width: 20vw;top: 0px;right: 2vw;}
	.caja-flex{ height: calc(100vh - 275px); }
	#portfolio, #pecont { padding: 0 8% 0 3%; margin: 60px 0 0 0; }
	#conocimientos { height: 100%; padding-top: 100px; }
	#presentacion { height: calc(100vh - 210px);}
	/*#presentacion img { height: 50%; }*/

     @media screen and (max-height: 355px){
    	header { height: 100px; z-index: 103; }
	  	#logo { width: 100px; top: 10px; left:10px; }
	  	#nombre{ width: 200px; position: absolute; top: 22px; left: 120px; font-size: 200%; }
	  	#profesion{ width: 200px; position: absolute; top: 60px; left: 120px; font-size: 104%; }
	  	form { top: 150px; left: 10px; }
      	#presentacion { height: calc(100vh - 160px); z-index: 104;}
      	/*#presentacion img { height: 55%; }*/
      	nav { width: 72%; right: unset; left: 12px; top: 100px; background-color: rgba(0,0,0,1); }
      	#menu {	float: left; }
      	#menu li {	width: 25%; font-size: 85%; }
      	.ac { font-size: 100%!important; }
      	.noac { font-size: 82%!important; }
      	#menu li a { left: 0px;}
     }
}
@media screen and (max-width: 601px){
	form {  }
}
@media screen and (max-width: 412px){
	
	header { height: 90px; }
	#logo { width: 80px; top: 10px; left:10px; }
	#nombre{ width: 160px; font-size: 162%; position: absolute; top: 20px; left: 100px; }
	#profesion{ width: 160px; font-size: 85%; position: absolute; top: 50px; left: 100px; }
	form { top: 300px; left: unset; right:3%; }
	.boton { top:270px; left: unset; right: 3%;}
	nav { width: 90%; right: unset; left: 12px; top: 90px; background-color: unset; }
	#menu {	 }
	#menu li {	width: 110%; margin: 0 0 0 -40%; }
	.ac { width: 100%!important; height: 70px!important; }
	.noac { width: 100%!important; height: 36px!important; }
	#menu li a { left: unset; right: 0px; float: right; text-align: right; }
    #menu:hover li { width: 134%; margin: 0 0 0 -40%; height: 36px; }
    #menu li:hover{ width: 120%; margin: 0 0 0 -40%; height: 50px; }
    .peque { left: unset; right: -100px; float: right; }
    article, #conocimientos { margin: 280px 0 0 0; padding: 0 20px 0 0; height: calc(100% - 330px); min-height: calc(100vh - 330px); }
    #presentacion { height: calc(100% - 210px); min-height: calc(100vh - 210px); }
    #presentacion img[src="portada_web_cartelb.png"] { position:absolute; width: 60vw;top: 84px;right: unset;left: -40px; min-width: 140px;}
    #soy{ margin-top:220px; }
	#portfolio, #pecont { margin: 280px 0 0 0;  padding: unset; } 
	#presentacion { height: calc(100vh - 330px);}
	/*#presentacion img { height: 40%; }*/
}

/* 	nav { display: none;
	float: right;
	width: 80%;
	transform: skewX(-28.5deg);
	position: relative;
	z-index: 101; 
}
	#menu {
	width: 100%;
    height: 29vh;
    float: right;
    margin: 0;
    padding: 0;
}
#menu li {
	color: rgba(255,255,255,1);
	margin: 0 -1px;
	padding: 0;
	width: 20%;
    height: 100%;
	display: block;  
    transition: all 1s;
    float: right;
    cursor:pointer;
	cursor: hand;
	box-shadow: 0px 0px 10px rgba(0,0,0,.4); 
	overflow: hidden;
	position: relative;
}


#menu #quien{
	background-color:rgba(0,159,227,1);
}
#menu #quien:hover:before{
	content: '';
	position: absolute;
	transform: skew(28.5deg);
	background-image: url(curriculum.jpg);
	background-size: cover;
	width: 400%;
	height: 100%;
	margin: 0 0 0 -150%;
}
#
*/