@import url(fontello.css);
/*fuentes
font-family: 'Montserrat', sans-serif;
font-family: 'Poiret One', cursive;
*/
@import url('https://fonts.googleapis.com/css?family=Montserrat|Poiret+One');
/*https://colorlib.com/polygon/adminator/*/
*{
	margin:0;
	padding:0;
	box-sizing: border-box;
	font-family: 'Montserrat', sans-serif;
}
.cch{
	color:white !important;
	text-decoration: none !important;
}
a{
	text-decoration: none !important;
	font-size: 14px;
}
p{
	margin:0px !important;
}
input{
	border:thin solid rgba(255,255,255,0)!important;
	font-size: 10px !important;
	padding:5px;
	outline:0px !important;
}
input:focus{
	background-color:#fffaf3;
	border:5px ridge white!important;
	box-shadow: 4px 6px 8px -6px rgba(0,0,0,0.75);
}
textarea{
	border:thin solid rgba(255,255,255,0)!important;
	font-size: 10px !important;
	padding:5px;
	outline:0px !important;
}
textarea:focus{
	background-color:#fffaf3;
	border:5px ridge white!important;
	box-shadow: 4px 6px 8px -6px rgba(0,0,0,0.75);
}
button{
	border:thin solid rgba(255,255,255,0)!important;
	font-size: 10px !important;
	background-color: rgba(255,255,255,0)!important;
}
h2{
	margin:0px !important;
}
label{
	margin-bottom:0px !important;
}
[class^="icon-"]:before, [class*=" icon-"]:before {
	 margin-right: 0px !important;
	 margin-left: 0px !important;
    }
/*generales-----------------------------------------------*/
.colorh1{
	margin-bottom: 6vh;
	width:100%;
	font-size: 9vw !important;
	text-align:center;
 	color:#47a7b4;
}
.texto_d{
	text-align:right;
}
.texto_i{
	text-align:left;
}
.blackh2{
	width:80%;
	margin:auto;
	text-align:center;
	font-size:7vw !important;
}
.column_center{
	/*flex*/
	display:flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items:center;
}
.row_center{
	/*flex*/
	display:flex;
	justify-content: center;
	align-items:center;
}
nav p{
	font-family: 'Poiret One', cursive;
	font-size:18px;
	color:#47a7b4;
}
.icon_a{
	display:inline-block;
	width:32px;
	height:32px;
	padding:1px;
	background-color:#47a7b4;
	color:white !important;
	font-size:20px !important;
	border-radius: 50%;
}
p i{
	opacity:0;
}
/*----------------------------------------------fin:generales*/
/**/
/*--------------------- pantalla inicio Misistikis*/
/*Fondo*/
.header_p1{
	width:100vw;
	height:100vh;
}
.contenedor_p1{
	position:relative;
	width:100vw;
	height: 100vh;
	background-color: #fffaf3;
	overflow: hidden;
}
/* letras que aparecen y desaparecen -------------- java*/
#invisible2{
	display:none;
	width:100vw;
	height:15vh;
	position:absolute;
	padding:0 7vw;
	top:80vh;
	left:0px;
	color:#47a7b4;
	}
/*fin*/
.extension_h1{
 	/*flex*/
	display:flex!important;
	flex-flow:row nowrap;
	justify-content: space-between;
	align-items:center;
}
.extension_h1 h1{
	font-size:3.5vw !important;
	margin:0px !important;
	padding:0px !important;
}
/*video---------------------*/
.video_p1{
	position:absolute;
	top:0;
	left:0;
	z-index: 0;
	opacity:0.2;
}
.video_p2{
	display:none;
	position:absolute;
	top:0;
	left:0;
	z-index: 0;
	opacity:0.2;
}
/*--------- Fin video/fondo ---------*/
/*-----------------------Animación iconos--------------------fadein ss*/
.fadein_p {
	animation-duration: 1.5s;
  	animation-name: botonera;
}
@keyframes botonera {
  0% {
    opacity:0;
  }
  100% {
   opacity:1;
  }
}
.fadein_u {
	animation-duration: 2.9s;
  	animation-name: botonerau;
}
@keyframes botonerau {
  0% {
    opacity:0;
  }
25%{ opacity:0;}
  100% {
   opacity:1;
  }
}
.fadein_y {
	animation-duration: 3s;
  	animation-name: botoneray;
}
@keyframes botoneray {
  0% {
    opacity:0;
  }
50%{ opacity:0;}
  100% {
   opacity:1;
  }
}
/*fin*/
/* Estructura página*/
.p1_principal{
	width:100vw;
	height:100vh;
	position:relative;
	z-index: 1000;
	/*flex*/
	display:flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
}
.p1_parte_a{
	width:318px;
	height:50vh;
	padding-top:5vh;
	/*flex*/
	display:flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
}
.p1_parte_b{
	width:318px;
	height:50vh;
	/*flex*/
	display:flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
}
.dimension1{
	padding-top:10px;
	width:106px;
	height: 106px;
}
.avatar{
	width:106px;
	height: 106px;
	background:url(../Media/avatarpara_after.gif);
	background-size: cover;
}
.portfolio{
	text-align:center;
}
.contacto{
	text-align:center;
}
.yo{
	text-align:center;
}
/*- botón para que salga el formulario ------------------ checkbox*/
#contact{
	display:none;
}
#contact:checked ~ .formulario{
	transform: translateY(0%);
	transition: all 0.5s;
}
/**/
.formulario{
	width:100vw;
	height:100vh;
	background:#47a7b4;
	position:absolute;
	top:0vh;
	left:0px;
	transform: translateY(-100%);
	color: white !important;
	overflow:hidden;
}
.formu_contenedor{
	margin-top:4vh;
	width:100%;
	height:90vh;
	/*margin-top:6px;*/
}
.formu_row{
	width:100%;
	padding:0.5vh 2vh;
	background:#47a7b4;
	/*flex*/
	display:flex;
	/*flex-wrap:nowrap;*/
	justify-content: space-between;
	align-items:center;
}
.alttext{
	height:12vh;
}
.formu_p{
	color: white !important;
	font-size:5vw !important;
	text-align: justify;
}
.form_a{
	font-family: 'Poiret One', cursive;
	font-size:20px !important;
	padding:0px 5px;
	color:white !important;
	border:2px solid white;
	border-radius:5px;
	/*padding-ottom: 2vh;*/
}
.form_a_img{
	width:30px !important;
	height:30px !important;
}
/*formulario en si*/
.formu_col{
	width:100%;
	height:80vh;
	padding:0.5vh 2vh;
	/*flex*/
	display:flex;
	flex-flow:column nowrap;
	justify-content: space-around;
	align-items:center;
}
.formu_inputs{
	width:100%;
	/*padding:1em;*/
	/*flex*/
	display:flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items:center;
}
.formulario .formu_col input{
	width:100%;
	margin-bottom:0.5em;
	height:8vh;
	/*padding:0.5em;*/
	font-size:18px !important;
	color:black;
	border-radius:5px;
}
.formulario .formu_col textarea{
	width:100%;
	height:45vh;
	font-size:18px !important;
	color:black;
	border-radius:5px;
	margin-bottom:0.3em;
}
.formulario .formu_col button{
	width:32vw;
	align-self:flex-end;
}
.formulario .formu_col button img{
	width:100%;
	border:2px solid white!important;
	border-radius: 5px;
	padding: 5px 0px;
}
/* fin formulario inputs*/
.altotelf{
	height:26vh!important;
	width:100%;
	/*flex*/
	display:flex;
	justify-content: space-between;
}
.form_t{
	width:50%;
	height:100%;
	/*flex*/
	display:flex;
	flex-direction:column;
	justify-content: space-start;
	align-items: flex-start;
}
.form_t a{
	display:block;
	align-self: flex-start !important;
}
.img_tel{
	width:50px;
	height:50px;
}
.form_t b{
	font-size:3vw !important;
	text-align:left;
	color:white;
	line-height: 0px;
}
.form_c{
	width:50%;
	height:100%;
	/*flex*/
	display:flex;
	flex-direction:column;
	justify-content: space-between;
	align-items: flex-end;
}
.icon-cancel-circled-outline{
	padding:0px;
	margin:0px;
	font-size: 8vw !important;
	}
/* clase creada para interactividad texto que al final no se usó:*/
/*.hide{
	display: none;
}*/
/**/
/* ---------------------------------------------------- MediaQuery*/
/**/
@media (min-height:1366px) and (orientation: portrait){
	.formulario{
		width:100vw !important;
	}
}
@media (min-width:568px){
	#invisible2{
		display:block !important;
	}
	/*pantalla de inicio*/
	nav p {
    	font-size: 20px;
	}
	.colorh1 {
    	display:none;
    }
    .icon_a{
		width:4vw;
		height:4vw;
		font-size:2.5vw !important;
	}
	.blackh2 {
     font-size: 3vw !important;
	}
	.avatar {
    	width: 14vw;
   		height: 14vw;
	}
	.dimension1{
    	width: 14vw;
    	height: 14vw;
	}
	.p1_principal{
		height: 75vh;
		width:100vw;
		padding:1vw 2vw;
	    /*flex*/
	    display: flex;
	    flex-flow: row nowrap !important;
	    justify-content: center;
	    align-items: center;
	}
	.p1_parte_a{
    	width: 50vw !important;
    	height: 80vh;
   		padding: 0px;
     }
    .p1_parte_b{
	 	margin-top: 20vh;
	   	width: 50vw !important;
	  	height: 80vh;
	  	padding: 0px;
    }
	/*fin pantalla de inicio*/
	/*formulario*/
	.formulario{
		padding:2vh 5vw;
	}
	.formu_inputs{
		/*flex*/
		display:flex;
		flex-direction:row !important;
		justify-content: space-between;
		align-items:center;
	}
	.formu_col {
    	padding: 0px;
	}
	.formulario .formu_col input{
		width:44vw;
	}
	.formu_row {
    	padding: 0px;
    }
    .formu_p {
    	font-size: 2.5vw !important
    }
    .formulario .formu_col button {
		margin-top:0.2vh;
    	width: 16vw;
  	}
    .form_t b {
    	font-size: 2.4vw !important;
    	color: white;
	}
	.img_tel {
   		width: 50px;
    	height: 50px;
	}
	.form_a {
	    font-size: 20px !important;
	    padding: 0px 5px;
	 	}
	.form_a_img {
    	width: 30px !important;
    	height: 30px !important;
	}
	.icon-cancel-circled-outline {
    	font-size: 4vw !important;
    	/*flex*/
    	display:flex;
    	justify-content:flex-end;
	}
		/*fin formulario*/
}
/**/
/**/
@media (min-width:768px) and (orientation: portrait){
	.video_p1{
		display:none;
	}
	.video_p2{
		display:block;
	}
	.colorh1{
	display:block;
	font-size: 6vw !important;
	}
	#invisible2{
	display:none !important;
	}
	.blackh2{
	/*width:430px;*/
	font-size: 5vw !important;
	}
	nav p{
		font-size:25px !important;
	}
	.avatar {
    	width: 28vw !important;
    	height: 28vw !important;
	}
	.dimension1{
    	width: 28vw !important;
    	height: 28vw !important;
	}
	.icon_a {
		width: 8vw;
		height: 8vw;
	    padding: 2px;
	    font-size: 4.9vw !important;
 	}
	.p1_principal{
		width:100vw;
		height:100vh;
		/*flex*/
		display:flex;
		flex-flow: column nowrap !important;
		justify-content: center;
		align-items: center;
	}
	.p1_parte_a{
		width:730px !important;
		height:50vh;
		margin:auto !important;
		margin-top:5vh !important;
	}
	.p1_parte_b{
		height:50vh;
		width:730px !important;
		margin:auto !important;
	}
/*formulario--------------------*/
	.formu_contenedor {
    	height: 85vh;
 	}
	.formu_inputs{
	/*flex*/
	display:flex;
	flex-direction:column !important;
	justify-content: center;
	align-items:center;
	}
	.formulario .formu_col input{
	width:100%;
	font-size: 3vw !important;
	}
	.formulario .formu_col textarea{
	    font-size: 3vw !important;
	}
	.formulario .formu_col button {
    width: 20vw;
	}
	.form_a {
    font-size: 5vw !important;
	}
	.form_a_img {
    width: 7.5vw !important;
    height: 7.5vw !important;
	}
	.formu_p {
    font-size: 2.8vw !important;
	}
	.form_c .icon-cancel-circled-outline {
    	font-size: 5vw !important;
	}
	.img_tel {
    	width: 60px;
    	height: 60px;
	}	
	/*fin formulario*/
}
/**/
/**/
/**/
@media (min-width: 1024px){
	/*pagina principal*/
	#invisible2{
		padding:0 28vw;
	}
	.extension_h1 h1{
		font-size:1.5vw !important;
	}
	.dimension1{
    	width: 14vw !important;
    	height: 14vw !important;
	}
	.icon_a {
	    width: 4vw;
		height: 4vw;
		padding: 2px;
		font-size: 2.5vw !important;
	}
	.p1_parte_a .icon_a:hover{
	cursor: pointer;
	}
	.avatar {
    	width: 14vw !important;
    	height: 14vw !important;
	}
	.avatar:hover{
		width: 14vw;
    	height: 14vw;
		background:url(../Media/Logo_t_a.png);
		background-size: cover;
		transition-property:all;
		transition-duration: 0.8s;
	}
	.blackh2 {
    	font-size: 3vw !important;
    }
	.p1_principal{
		justify-content: space-between;
	}
/*formulario*/
	.formulario {
   		width: 50vw;
 		height:100vh;
 		padding: 2vh;
	}
	.formu_p {
   		 font-size: 24px !important
	}
	.form_a {
    	font-size: 2.4vw !important;
   	}
   	.form_a_img {
   		width: 3.5vw !important;
   		height: 3.5vw !important;
	}
	.formulario .formu_contenedor a:hover{
		cursor: pointer;
		opacity:0.5;
	}
	.formulario .formu_contenedor button:hover{
		cursor: pointer;
		opacity:0.5;
	}
	.formulario .formu_col input{
		width:100%;
		margin-bottom:0.5em;
		height:8vh;
		font-size:24px !important;
	}
	.formulario .formu_col textarea {
	    font-size: 24px !important;
   	}
	.formulario .formu_col button {
  		width: 9vw;
	}
	.form_t b {
   		font-size: 1.1vw !important;
	    color: white;
	}
	.icon-cancel-circled-outline {
    	font-size: 3.3vw !important;
	}
	.icon-cancel-circled-outline:hover{
		opacity:0.5;
	}
	.formu_inputs{
		width:100%;
		/*flex*/
		display:flex;
		flex-flow: column nowrap !important;
		justify-content: center;
		align-items:center;
	}
}
/**/
/**/
/**/
@media (min-width: 1440px){
	.blackh2 {
    	font-size: 2.9vw !important;
	}
	nav p {
    	font-size: 22.5px;
    }
}
/**/
/**/
@media all and (min-width: 1900px) {
  	.video_p1{
		display:none;
	}
	.video_p2{
		display:block;
	}
	nav p {
    	font-size: 33.5px;
    }
}