@charset "utf-8";
/* CSS Document */
@import url(common.css);
.contenedor_int{ position: absolute; height: 570px; width: 1270px; left:40px; top: 60px; border-radius: 3ex; overflow: hidden; }
.contenedor_int_1{ position: absolute; height: 576px; width: 1341px; left: 17px; top: 42px; border-radius: 3ex; overflow: hidden; padding: 10px; }
.contenedor_int_2{ position: absolute; height: 485px; width: 1270px; left: 45px; top: 135px; border-radius: 3ex; overflow: hidden; }
.contenedor_int_3{ position: absolute; height: 480px; width: 1220px; left: 10px; top: 60px; border-radius: 3ex; overflow: hidden; }
.contenedor_int_4 { position: absolute; height: 485px; width: 1260px; left: 0px; top: 60px; border-radius: 3ex; overflow: hidden; }

.vspacer {
    margin-top: 40px; /* define margin as you see fit */
}

.fondoImagen1 { background-image: url("../img/fondo1.png"); background-repeat: none; background-size: 100%;}

#imgTitulo1 {position:absolute; left: 410px; top: 70px; }
#imgLineas1 {position:absolute; left: 290px; top: 100px; opacity: 0;}
#box1 {position: absolute; left: 10px; top: 95px; width: 580px; height: 350px; background-color: #E3AD42; padding: 40px 10px; opacity: 0; }
#box2 {position: absolute; right: 10px; top: 95px; width: 580px; height: 350px; background-color: #E3AD42; padding: 10px; opacity: 0; }

.round {
  /* Safari 3-4, iOS 1-3.2, Android 1.6- */
  -webkit-border-radius: 12px; 

  /* Firefox 1-3.6 */
  -moz-border-radius: 12px; 
  
  /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
  border-radius: 12px; 
}


#txtMsg2{ position:absolute; z-index: 1100;}
#imgCirculo1{ position: absolute; left: 70px; top: -30px; z-index: 1;
}
#imgCirculo2{ position: absolute; right: 50px; top: -30px; }

.rotFw{
  transform: rotateY(720deg);
}

/*Pag 3*/
#boxAzul1 { position: absolute; left: 40px; top: 45px; height: 106px; width: 1136px; padding: 10px; }
#imgLineas2 {position: absolute; right: 60px; top: 98px; }
#imgVaso  { position: absolute; right: 150px; top: 185px; opacity: 0; }
#imgProbeta  {position: absolute; right: 245px; top: 210px; opacity: 0; width: 610px;}
#imgFlecha {position: absolute; left: 10px; top: 144px; opacity: 0;}
.stack { height: 350px; width: 40%; position: absolute; display: block; overflow: hidden; right: 0px; top: 10px;}
.stack p{margin: 0;font-size: 1.2em;word-break: break-all;padding: 10px;background: rgba(0,0,0,0.7);color: rgba(255,255,255,0.8);text-shadow: 1px 1px #000;text-align:left;position:absolute;bottom:-100px; transition:all 0.5s ease;width: 90%;left: 9px}
.stack img { width: auto; margin: 0px;  }

/*Pag 4*/
#boxRosado { position: absolute; left: 40px; top: 45px; height: 106px; width: 1150px; padding: 10px; background-color: #B34B8D !important;}
#imgLineas3 {position: absolute; right: 126px; top: 149px; height: 254px;}
#imgVaso2  { position: absolute; right: 162px; top: 230px; opacity: 0; }
#imgProbeta2  { position: absolute; right: 305px; top: 230px; opacity: 0; }
#imgFlecha2 {position: absolute; left: 10px; top: 144px; opacity: 0;}

/*Pag 5*/
#boxVerde { position: absolute; left: 40px; top: 45px; height: 185px; width: 1200px; padding: 10px; background-color:#009408;}
#imgLineas4 {position: absolute; right: 80px; top: 218px; }
#imgPrado  { position: absolute; right: 133px; top: 270px; opacity: 0; }
#imgProbeta3  {position: absolute; right: 340px; top: 270px; opacity: 0; width: 470px}
#imgFlecha3 {position: absolute; left: 5px; top: 223px; opacity: 0;}

/*Pag6 Drag and Drop*/
#imgCirculo3 { position: absolute; top: 20px; left: 40px; }
.contenedorPreguntas { position:absolute; width: 700px; height: auto; top: 60px; right: 50px; }
.itemPreg { margin-bottom: 10px; height: 40px; font-size: 2.2em;}
.itemPreg .boxAzul { width: 280px; float: left; background-color: #0094D6; padding-left:20px; border-radius: 15px 0px 5px 14px; -moz-border-radius: 15px 0px 5px 14px; -webkit-border-radius: 15px 0px 5px 14px; 
}
.itemPreg .boxGris { width: 380px; float: left; background-color: #fff; padding-left:20px; border-radius: 5px 15px 15px 5px; -moz-border-radius: 5px 15px 15px 5px; -webkit-border-radius: 5px 15px 15px 5px; }

#popImg1{width: 810px; height: 657px; top: -40px; left: 265px;}
#imgPop1{ height: 620px; width: auto;}
.hazClick {font-size: 1.2em; position: absolute; bottom: 10px; left: 90px;} 

#accionesDrag{ position: absolute; bottom: 20px; right: 330px;}
#dragGanancia { background-color: #F5F5FC; width: 200px; height: 40px; float: left; margin-right: 10px; font-size: 1.8em; text-align: center; cursor: move;}
#dragPerdida { background-color: #F5F5FC; width: 200px; height: 40px; float: left; margin-right: 10px; font-size: 1.8em; text-align: center; cursor: move;}
#btSolucion { position: absolute; bottom: 20px; right: 100px;}

/* Pag7 */
#imgPocillo{ position: absolute; right : 30px; top:0px; width: 400px;}
#txt2{ position: absolute; left: 40px; top: 30px; width: 650px; height: 200px; font-size: 2.5em;}
#pop1{ position: absolute; width: 520px; height: 520px; top: 20px; left: 450px;}

/* Pag 8 */
#imgBillar{ position: absolute; right: 10px; top: 10px; height: 420px;}
#pop2{width: 630px; height: 608px; top: 0px; left: 370px;}
#imgBillar2{width: 560px;}
#txt3{position: absolute; left: 40px; top: 20px; width: 710px; height: 200px; font-size: 2.2em;}

/* Pag 9 */
#imgParticulas{height: 422px;}
#pop3{width: 580px; height: 480px; top: 90px; left: 400px;}
.stackGrid { position:relative; height: 435px; width: 500px;}
.stackGrid img{ height: 420px; position: relative;}
.stackGrid p{ width: 100%px; }

/*Pag 12*/

/*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:#E7E7E5;
    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:#E6AF40;
    color:#FFF;
    }
.tab-container .tab-radio:checked ~ .tab-page{ background-color:#E6AF40;} 
.tab-container .tab-radio:checked ~ .tab{}
.tab-container .tab-page{
    visibility:hidden;
    z-index=50;
    background-color:#E7E7E5;
    color:#4D4E4C;
    display:block;
    position:absolute;
    top:57px;
    left:0px;
    height:25em;
    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*/

/*Pag 12*/
#txtPregunta1{ margin-top: 20px; width: 662px; height: 225px; overflow: auto; width: 100%; border: none; outline: none; font-size: 2em; resize: none; color: #333;}
#imgPregunta1{position: relative; top: 0px; height: 260px;}
#pop6 { position: absolute; height: 480px; width: 770px; z-index: 100; background: #fff; left: 320px; top: 35px; box-shadow: 3px 3px 30px #000; border-radius: 15px; }

/*Pag 13*/
#txtPregunta2{ margin-top: 20px; width: 662px; height: 225px; overflow: auto; width: 100%; border: none; outline: none; font-size: 2em; resize: none; color: #333;}
#imgPregunta2{position: relative; top: 0px; height: 260px;}
#pop7 {position: absolute; height: 485px; width: 765px; z-index: 100; background: #fff; left: 290px; top: 35px; box-shadow: 3px 3px 30px #000; border-radius: 15px; }

/*Pag 14*/
#txtPregunta3{ margin-top: 20px; width: 662px; height: 265px; overflow: auto; width: 100%; border: none; outline: none; font-size: 2em; resize: none; color: #333;}
#imgPregunta3{position: relative; top: 0px; height: 290px;}
#pop8 {position: absolute; height: 440px; width: 766px; z-index: 100; background: #fff; left: 287px; top: 100px; box-shadow: 3px 3px 30px #000; border-radius: 15px;}
