/* Screen CSS */


/* Contenido general */

.section{
	display: flex;
}
.content{
	display: table;
	height: 95%;
	padding-top: 2%;
	padding-bottom: 2%;
	margin-left: 8%;
	margin-right: 8%;
	width: 84%;
}

/* Frame 0 */

.frame0-cnt0{
	clear: both;
	height: 10%;
	width: 100%;
}
.frame0-cnt1{
	clear: both;
	height: 70%;
	width: 100%;
	display: flex;
	align-items: center;
}
.frame0-cnt2{
	clear: both;
	height: 20%;
	width: 100%;
}

/* Imagenes*/

#imagen-logo{
	width: 25%;
}

#imagen-menu{
	width: 5%;
	float: right;
}

#imagen-main{
	width: 28%;
	margin-left: 36%;
}

#imagen-cierre{
	width: 40%;
	margin-left: 30%;
	margin-top: 2%;
}
/* Frame 1 */

.text-titles{
	font-weight:bold;
	font-size:5vw;
	color: white;
}
.text-custom{
	font-size:1.2vw;
	color: white;
}

.frame1-cnt0{
	clear: both;
	display: table; 
	height: 25%;
	width: 100%;
}
.frame1-cnt1{
	clear: both;
	display: table; 
	height: 25%;
	width: 100%;
}

.frame1-cnt2{
	clear: both;
	display: table; 
	height: 25%;
	width: 100%;
}

.frame1-cnt3{
	clear: both;
	display: table; 
	height: 25%;
	width: 100%;
}

#tranf{
	float: left;width: 53%;
	height: 100%; 
}

#tranp{
	float: right;width: 70%;
	height: 100% ;
}
#inc{
	float: left;width: 53%;
	height: 100%; 
	text-align: right;
}

#img-trnsf{
	width:100%; 
	vertical-align: top;
}
#img-video{
	width:10%; vertical-align: bottom;
}
#imag-trnsp{
	width:70%; 
	vertical-align: top;
}
#imagen-inc{
	width:100%; 
	vertical-align: top;
}


/* Animaciones */

#btnControl {
	display: none;
}
#btnControl2 {
	display: none;
}
#btnControl3 {
	display: none;
}

#btnControl:checked + label > img {
	display: inline-block;
	animation: rotate 0.5s linear;
	animation-fill-mode: forwards;
	
}
@keyframes rotate {
  to {
	transform: rotate(-180deg);
  }
}
#btnControl:checked + label > img {
	display: inline-block;
	animation: rotateback 0.5s linear;
	animation-fill-mode: forwards;
	
}
@keyframes rotateback {
  to {
	transform: rotate(180deg);
  }
}
#btnControl2:checked + label > img {
	display: inline-block;
	animation: rotate2 0.5s linear;
	animation-fill-mode: forwards;
	
}
@keyframes rotate2 {
  to {
	transform: rotate(-140deg);
  }
}
#btnControl3:checked + label > img {
	display: inline-block;
	animation: rotate3 0.5s linear;
	animation-fill-mode: forwards;
	
}
@keyframes rotate3 {
  to {
	transform: rotate(-230deg);
  }
}



/* Frame 2 */

.frame2-cnt0{
	width: 100%;
	height: 80%;
}
.frame2-cnt1{
	width: 100%;
	height: 20%;
}

/* Frame 3 */

.frame3-cnt0{
	float: left;
	width: 40%;
	height: 100%;
}
.frame3-cnt1{
	float: right;
	width: 60%;
	height: 100%;
}
#imagen-contacto-screen{
	width:55% ;
}
#imagen-contacto-mobile{
	display: none;
	max-width:70%;
}

/* Formulario */

.formulario{
	align-items: center;
	display: table;
	margin-top: 10%;
	font-size:1.2vw;
	font-weight:lighter;
}

.input-format{
	border-radius: 5px;
	background-color: #000021;
	border-color: white;
	color:white;
	border-style: solid;
	border-width: 1px;
	padding-top: 4%;
	margin-bottom: 4%;
	width: 260%;
}  

#button{
	border-radius: 5px;
	color: white;
	background-color: #477385;
	border-style: none;
	font-weight:bold;
	width: 110%;
	padding-top: 5%;
	padding-bottom: 5%;
	margin-left:80%;
}

/* General imagenes */

.img-responsive {
    display: block;
    max-width: 100%;
	width: 100%;
}