@charset "utf-8";
/* CSS Document */
@import url(common.css);

.contenedor_int{ position: absolute; height: 550px; width: 100%; left: 0px; top: 40px; border-radius: 3ex; overflow: hidden; padding-top: 10px;}
.fondoImg1{ background-image: url("../img/IL_S_G09_U03_L01_03_03_01.png"); background-repeat: none; background-size: 100%; }
.vspacer { margin-top: 20px; /* define margin as you see fit */ }

/*tabs jorge*/
.tab-container{
    position:relative; 

    -webkit-transition: background-color 1000ms linear;
    -moz-transition: background-color 1000ms linear;
    -o-transition: background-color 1000ms linear;
    -ms-transition: background-color 1000ms linear;
    transition: background-color 1000ms linear;
    
    /*-webkit-font-smoothing: antialiased;
    -webkit-backface-visibility: hidden;*/
    }
.tab-container .tab-radio{ display:none;}
.tab-container .tab {
    display:block;
    width:auto;
    height:60px;
    float: right;
    position:relative;
    line-height:60px;
    top:0px;
    /*font-size:1.5em;*/
    padding:2px 10px !important;
    -webkit-border-radius:1ex 1ex 0ex 0ex;
    -moz-border-radius:1ex 1ex 0ex 0ex;
    -o-border-radius:1ex 1ex 0ex 0ex;
    -ms-border-radius:1ex 1ex 0ex 0ex;
    border-radius:1ex 1ex 0ex 0ex;
    margin: 0ex 0.8ex 0ex 0ex;
    /*padding:0.5ex;*/
    width:194px;
    text-decoration:none;
    text-align:center;
    cursor:pointer;
    background:#C8D1DB;
    color:#4D4E4C;
    font-weight:normal;
    font-size:2.2em;
    }
.tab:hover{height:70px;top: -10px;}
.tab-container .tab-radio:checked ~ .tab,
.tab-container .tab-radio:active ~ .tab{
    background-color:#BCCB45;
    color:#FFF;
    }
.tab-container .tab-radio:checked ~ .tab-page{ background-color:#BCCB45;} 
.tab-container .tab-radio:checked ~ .tab{}
.tab-container .tab-page{
    visibility:hidden;
    z-index=50;
    background-color:#BCCB45;
    color:#4D4E4C;
    display:block;
    position:absolute;
    top:57px;
    left:0px;
    height:30.5em;
    width:99%;
    float:left;
    padding:0.5em;
    margin:0ex;	
    
    -webkit-border-radius:0ex 1ex 1ex 1ex;
    -moz-border-radius:0ex 1ex 1ex 1ex;
    -ms-border-radius:0ex 1ex 1ex 1ex;
    -o-border-radius:0ex 1ex 1ex 1ex;
    border-radius:0ex 1ex 1ex 1ex;
    
    -moz-transition: visibility 0s ease-out 0.3s;
    -ms-transition: visibility 0s ease-out 0.3s;
    -o-transition: visibility 0s ease-out 0.3s;
    -webkit-transition: visibility 0s ease-out 0.3s;
    transition: visibility 0s ease-out 0.3s;
    }
.tab-container .tab-radio:checked ~ .tab-page{visibility: visible;}
.tab-container .tab-page > *
{
    -moz-opacity: 0;
    -ms-opacity: 0;
    -o-opacity: 0;
    -webkit-opacity: 0;
    opacity: 0;
    -moz-transition: opacity 0.3s ease-out 0s;
    -ms-transition: opacity 0.3s ease-out 0s;
    -o-transition: opacity 0.3s ease-out 0s;
    -webkit-transition: opacity 0.3s ease-out 0s;
    transition: opacity 0.3s ease-out 0s;
}
.tab-container .tab-radio:checked ~ .tab-page > *
{
    -moz-opacity: 1;
    -ms-opacity: 1;
    -o-opacity: 1;
    -webkit-opacity: 1;
    opacity: 1;
    -moz-transition: opacity 0.3s ease-in 0.15s;
    -ms-transition: opacity 0.3s ease-in 0.15s;
    -o-transition: opacity 0.3s ease-in 0.15s;
    -webkit-transition: opacity 0.3s ease-in 0.15s;
    transition: opacity 0.3s ease-in 0.15s;
}
/*fin tabs jorge*/


textarea{ margin-top: 0px; width: 662px; height: 145px; overflow: auto; width: 100%; border: none; outline: none; font-size: 2em; resize: none; color: #333;}
.txtRespuesta{ margin-top: 0px; width: 662px; height: 145px; overflow: auto; width: 100%; border: none; outline: none; font-size: 2.2em; resize: none; color: #333; padding: 5px;}

#dia{ position: absolute; left: 180px; top: 100px; }
#corrientesconveccion{ position: absolute; left: 110px; top:-10px; }
#marco1{position: absolute; left: 240px; top: 5px;}
#marco2{position: absolute; right: 150px; bottom: 35px;}
#noche{
    position: absolute;
    right: 520px;
    top:100;
}
#conveccionliquidos{
    position: absolute;
    top: -10px;
    right: 140px;
}
#conveccion {
right: 300px;
top: -10px;
position: absolute;
}

#movil1{position: absolute;
top: -46px;
left: 600px;
z-index: 10;}

#movil2{position: absolute;
top: -10px;
left: 450px;
z-index: 10;
}

#movil3{position: absolute;
top: -10px;
left: 700px;
z-index: 10;
}

#lineas1movil1{position: absolute;
top: -10px;
left: 480px;}


#lineas3movil1{position: absolute;
top: -10px;
left: 644px;
}
/* Parte inferior Movil*/
#lineas4movil1{position: absolute;
top: 100px;
left: 335px;
}

#lineas5movil1{ position: absolute; top: 300px;  left: 495px; }

#movil4{position: absolute;
top: 100px;
left: 330px;
z-index: 10;
height: 200px;
}

#movil5{position: absolute;
top: 100px;
left: 500px;
z-index: 10;
height: 200px;
}

#pop1 { width: 710px; height: 640px; padding: 5px; }
#recipiente {padding-left: 30px;}


#pop2 {width: 1180px; height: 480px; padding: 5px; left: 100px; top: 50px;}
#imgConveccion {padding-left: 30px;}

#pop3 {width: 1180px; height: 480px; padding: 5px; left: 100px; top: 50px;}
#imgConveccion2 {padding-left: 30px;}

#respuesta1{height: 200px;}
#btValidar1 { left: 230px; bottom: 20px; }
#btValidar2 {left: 610px; bottom: 70px;}

#pop4{width: 900px; height: 400px; top: 100px; left: 230px;}
#pop5{width: 900px; height: 270px; top: 100px; left: 230px;}
#imgPregunta2{ height: 420px;}

#respuesta2{height: 200px;}
#respuesta3{height: 300px;}
#btValidar3 {right: 50px; top: 70px; }
#pop6{width: 900px; height: 270px; top: 100px; left: 230px;}

#imagenesPopUp { position: absolute; bottom: 20px;  right: 40px; }
#imagenesPopUp img{ float: left; width: 80px;}

.hazClick {font-size: 1.2em; position: absolute; bottom: 10px; left: 90px;} 
.hazClick3 {font-size: 1.2em; position: absolute; bottom: 10px; left: 130px;} 
