@font-face {
    font-family: 'pier_sansbold_italic';
    src: url('pier-bold-italic-webfont.eot');
    src: url('pier-bold-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('pier-bold-italic-webfont.woff2') format('woff2'),
         url('pier-bold-italic-webfont.woff') format('woff'),
         url('pier-bold-italic-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'pier_sansbold';
    src: url('pier-bold-webfont.eot');
    src: url('pier-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('pier-bold-webfont.woff2') format('woff2'),
         url('pier-bold-webfont.woff') format('woff'),
         url('pier-bold-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'pier_sansitalic';
    src: url('pier-italic-webfont.eot');
    src: url('pier-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('pier-italic-webfont.woff2') format('woff2'),
         url('pier-italic-webfont.woff') format('woff'),
         url('pier-italic-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'pier_sansregular';
    src: url('pier-regular-webfont.eot');
    src: url('pier-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('pier-regular-webfont.woff2') format('woff2'),
         url('pier-regular-webfont.woff') format('woff'),
         url('pier-regular-webfont.ttf') format('truetype');
    font-weight: lighter;
    font-style: normal;

}


@font-face {
    font-family: 'bebas_neueregular';
    src: url('bebas/bebasneue-webfont.eot');
    src: url('bebas/bebasneue-webfont.eot?#iefix') format('embedded-opentype'),
         url('bebas/bebasneue-webfont.woff2') format('woff2'),
         url('bebas/bebasneue-webfont.woff') format('woff'),
         url('bebas/bebasneue-webfont.ttf') format('truetype'),
         url('bebas/bebasneue-webfont.svg#bebas_neueregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

body{background-color: #848484;
	overflow: hidden!important;
	z-index: 1;
   font-family: 'pier_sansregular';
   font-weight: lighter!important;
   margin: 0!important;
   }

#contLibro{width: 100%;
    height:100%; max-width: 1224px; max-height: 792px; min-height: 792px; max-width: 1224px; position: absolute;

			left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);}

#flipbook{width: 1224px;
		height:100%; max-width: 1224px; max-height: 792px; min-height: 792px; max-width: 1224px;}

#imgIntro{width: 90%;  margin: 0 auto; margin-top: 93px;}
#imgIntro img{width: 100%; }
#refIntro{margin-top: 0px;}
.hard{ color: #fff; }
#portada{background-image: url("../img/portada.png"); width: 100%; height: 100%;}
#por1{width: 100%;height: 100%;}
#contintroduccion{ font-size: 14px; text-align: justify; margin-top: 30px;}
#blanca1, #blanca2, #blanca3, #blanca4{color: #fff!important}

#contraportada{ width: 100%;height: 100%; background-color: #000;}
#cp1{width: 100%;height: 100%;}

.volumenPlecaPor{color: #000; width: 200px; position: absolute; top: 5px; background-color: none; left: 19px; text-align: center; font-size: 12px; }
.temaPlecaPor{color: #000; width: 200px; position: absolute; top: 26px; background-color: none; left: 19px; text-align: center; font-size: 10px }

.volumenPlecaIz{color: #000; width: 200px; position: absolute; top: 1px; background-color: none; left: 19px; text-align: center; font-size: 12px; }
.temaPlecaIz{color: #000; width: 200px; position: absolute; top: 21px; background-color: none; left: 19px; text-align: center; font-size: 10px }

.volumenPlecaDer{color: #000; width: 200px; position: absolute; top: 1px; background-color: none; right: 19px; text-align: center; font-size: 12px; }
.temaPlecaDer{color: #000; width: 200px; position: absolute; top: 21px; background-color: none; right: 19px; text-align: center; font-size: 10px }


#repP5{margin-top: -30px;}
#p1{background-color: #fff}
#inside{background-color: #fff}
#p2{background-color: #fff}
#p3{background-color: #fff}
#p4, #p5{background-color: #fff}
#insideBack{background-color: #E6E6E6; border-left: 1px solid #000;}

#p1, #p3, #p5, #p7, #p9, #p11, #p13, #p15, #p17, #p19{  }
#p2, #p4, #p6, #p8, #p10, #p12, #p14, #p16, #p18, #p20{}

.pagina{background-color: #fff; line-height: 22px;}

.contenido{color:#000;
			font-size: 14px;
			font-family: 'pier_sansregular';
			width: 75%;
			/*height: 80%;*/
			margin: 0 auto;
			text-align: center;

			margin-top: 28%; 
         line-height: 16px;
         font-weight: normal;}


.contenido2{color:#000;
         font-size: 14px;
         font-family: 'pier_sansregular';
         width: 85%;
         height: 80%;
         margin: 0 auto;
         text-align: center;

         margin-top: 5%; 
         line-height: 30px;
         font-weight: normal;}

.contenido3{color:#000;
         font-size: 14px;
         font-family: 'pier_sansregular';
         width: 75%;
         height: 80%;
         margin: 0 auto;
         text-align: center;
         line-height: 16px;
         font-weight: normal;}

#contVulcanismo{margin-top: 10px;}
#txtVulcanismo{margin: 37px 0 0 0;}
#contVulcanismo2{margin-top: -10px;}
#tituloVulcanismo2{visibility: hidden;}
#contVideo{margin-top: -100px;}
#indice2{margin-top: 20%;}

.contenido2 ol li{font-size: 21px; }
.contenido2 ol li a{text-decoration: none; color: #000;}
.contenido2 ol li a:hover{color: #0000FF; cursor: pointer;}
.contenido2 ul li{font-size: 14px;}

#ul1, #refba, #refco{margin-top: -12px;font-size: 21px!important;}

.imagen{text-align: center; padding: 10px;}

.titulo{font-size: 14px; font-weight: 900!important; padding-bottom: 17px; text-align: left;  font-family: 'pier_sansbold';}

.texto b{font-family: 'pier_sansbold';}
/*Estilos del los títulos*/
.plecaTitulo{left: 0; 
              color: #000; 
              font-size: 26px; 
              font-family:'bebas_neueregular'; 
              height: 36px;
              }

.dorado{width: 250px;
        height: 6px;
        background-color: #A37E45; 
        bottom: 0;}
#doradop4 {width: 320px;}
#doradop7, #doradop31{width: 280px;}
#doradop35, #doradop36, #doradop37, #doradop70{width: 390px;}
#doradop40, #doradop60{width: 310px;}
 #doradop55{width: 290px;}
 #doradop58{width: 370px;}

.txtTitulo{margin-left: 20px; height: 30px;
           line-height: normal;}
#txtTitulop70{height: 55px;}
/*Estilos del los títulos de Tipos de volcanes*/
.plecaTitulo2{left: 0; 
              color: #000; 
              font-size: 26px; 
              font-family:'bebas_neueregular'; 
              height: 70px;
              }

.dorado2{width: 220px;
        height: 6px;
        background-color: #A37E45; bottom: 0;}

.txtTitulo2{margin-left: 20px; 
            height: 60px;
           line-height: normal;}



#tituloIntro,#tituloObje{margin-top: 100px;}
#tituloJusti{margin-top: 50px;}
#contJusti{margin-top: 20px; height: auto!important;}
#contObj{margin-top: 20px; height: auto!important;}
#tituloIndice{margin-top: 9%;}
#tituloVulcanismo{margin-top: 15px;}

.subtitulo{font-size: 18px; font-weight: 900; padding-bottom: 17px; text-align: left;}


.texto{text-align: justify;}
#colu1 {width: 300px;}
#colu2{vertical-align: text-top;}

.texto li{padding-bottom: 6px;}
 .indicacion{color:#009EE0;}
.indicacion img{margin:-1px 3px -1px 0px;}
.indicacion p{text-align: left;}
.referencia{font-style:italic; 
  font-size: 10px; 
  line-height: 13px; 
  text-align: right;
   width: 95%; 
   margin-top: -43px; 
   top: 0px; 
   margin-right: 20px;
   float: right;
 }

 .referenciaCompleta{
  font-style:italic; 
  font-size: 10px; 
  line-height: 13px; 
   width: 100%;
   position: absolute;
   bottom: 0px;
   right: 0;
   background-color: #3a3a3b; 
   text-align: left;
   color: #fff;
   padding:10px;
   text-align: right;
   opacity: 0.8;
 }

 #referenciap7{
  font-style:italic; 
  font-size: 10px; 
  line-height: 13px; 
  text-align: left;
   width: 40%; 
   margin-top:0px; 
   margin-left: 10px;
   float: left;
 }

 #referenciap9,#referenciap27, #referenciap42, #referenciap43, #referenciap44, #referenciap55{font-style:italic; 
  text-align: right;
   width: 95%; 
   margin-top: 0; 
   top: 0px; 
   margin-right: 20px;
   float: right;
 }

 #referenciap56{font-style:italic; 
  text-align: right;
   width: 95%; 
   margin-top: 40px; 
   top: 0px; 
   margin-right: 20px;
   float: right;}
#referenciap45{margin-right: 243px;
width: 310px;}
  #referenciap10, #referenciap12, #referenciap16, #referenciap18, #referenciap20, #referenciap22, #referenciap24{margin-top: 0;
  position: relative;
  margin-left: 5px;
  width: 219px;
  float: left;
  text-align: left;
 }

 #referenciap14{margin-top: 0;
  position: relative;
  margin-left: 5px;
  width: 180px;
  float: left;
  text-align: left;
 }



#pic12{text-align: left;
		float: left;
		width: 260px;}

#referencia12{float: right;
				margin-top: -80px;
				text-align: left;
				width: 190px}

#imagenp1{background-image: url("../img/portada.jpg");}
#imgn1{width: 100%;height: 100%;}

#imagen2{z-index: 500}

.main demo-1{ z-index: 900}

#fold1{margin-left: -40px; margin-bottom: 100px;}

#uc-container{margin-top: 400px; margin-left: 200px}

#p6{background-image: url("../img/volcano.png");}
#p11{background-image: url("../img/estratovolcan2.png");}
#p13{background-image: url("../img/volcan-escudo2.png");}
#p15{background-image: url("../img/caldera-volcanica-2.png");}
#p17{background-image: url("../img/somma-2.png");}
#p19{background-image: url("../img/tuya2.png");}
#p21{background-image: url("../img/Cono-de-escoria-2.png");}
#p23{background-image: url("../img/domo-de-lava-2.png");}
#p25{background-image: url("../img/maar-o-crater-de-explosion2.png");}
#p41{background-image: url("../img/bloque3/img3-1.png");}
#p45{background-image: url("../img/bloque3/imgbomba.png");}
#p47{background-image: url("../img/bloque3/img3-7.png");}
#p49{background-image: url("../img/bloque3/img3-8.png");}
#p51{background-image: url("../img/bloque3/img3-9.png");}
#p53{background-image: url("../img/bloque3/img3-10.png");}
/*#pagQuiz{background-image: url("../img/paraquiz.jpeg") no-repeat; width: 100%; height: 100%;}*/
#pagQuiz img{width: 100%; height: 100%;}

#pica{width: 100%;}

#plecaTvolcan{margin-top: 50%;}
#plecaTvolcanes{margin-top: 40px;}
#contp7{margin-top: 12%;}
#contp8{margin-top: 5%;}
#contp9{margin-top: 70px;}

#imgnp10, #imgnp12, #imgnp14, #imgnp16, #imgnp18, #imgnp20, #imgnp22, #imgnp24{right: 0; float: right; position: absolute;}
#plecap10, #plecap12, #plecap14, #plecap16, #plecap18, #plecap20, #plecap22, #plecap24{left: 0; float: left; height: 50px;}
#titulop10, #titulop12, #titulop14, #titulop16, #titulop18, #titulop20, #titulop22, #titulop24{margin-top: 50%; position: relative; width: 219px;}
#titulop28{margin-top: 10px;}

#textop28{margin-top: 16px;}
#contp11, #contp13, #contp15, #contp17, #contp19, #contp21, #contp23, #contp25{  width: 45%;
  right: 0;
  margin-right: 5%;
  background-color: #e5e9f0;
  position: absolute;
  padding: 20px; opacity: 0.9}

  .botonModal{font-size: 12px; 
    width: 173px; 

    color:#000; 
   position:relative;
   font-weight:normal;
   top: 30%;
   line-height: 15px;
    float: right;}

.botonModal img{float: right; width: 30px;}

#textoboton{float: left; width: 138px; text-align: justify;}

.pleca{top: 0;
      left: 0;
      width: 100%;
      position: absolute;}

#enlace1{cursor: pointer;}
li #enlace1:hover{color:#585858!important;}

#p26, #p27, #p57, #p72{background-color: #3a3a3b;}
.blanco{background-color: #fff;margin-top: 208px; }

.lineaAzul{width: 100%; height: 3px; background-color: #6eb7e2; position: absolute; top: 60px;}
.lineaVerde{width: 100%; height: 3px; background-color: #96ae48; position: absolute; bottom: 20px;}
.plecaQuiz{background-color: #fff; height: 43px;}
.subQuiz{padding-top: 5px;}
/*-------------------------1.2 Tipos de erupciones-------------------------*/

.img-margen{ margin-top:41px;}
.imagen_prin{ position:relative; width: 120%; height:500px; margin-left: -30px;}
.imagen_prin img{width: 95%; height: 88%;}

.comtenidoMapas{ margin-top:2% !important; }
.tool-mapa{ position:absolute;}
.tool-mapaDisplay{  background:#000; color:#fff; padding:10px; display:none; }
.tool-circulo{ border:1px solid #000; width:30px; height:30px}
.plecaTituloerupcion, .plecaPeligros{ margin-top:93px;}

.mapaNum{position: absolute;
            cursor: pointer;
            width: 30px;
            height: 30px; 
           /* border: 1px solid #000;*/
            border-radius: 50%}

.mapaCont{display:none;
    padding:5px;
    position:relative;
    width:200px;
    text-align: left;
          }

.mapaNum:hover .mapaCont{  display:block;}

/*Erupción Hawaiana*/
#mapa11{margin: 67px 0px 0px 223px;}
#mapa12{margin: 194px 0px 0px 91px;}
#mapa13{margin: 149px 0px 0px 195px;}
#mapa14{margin: 149px 0px 0px 311px;}
#mapa15{margin: 180px 0px 0px 324px;}
#mapa16{margin: 198px 0px 0px 405px;}
#mapa17{margin: 390px 0px 0px 426px;}
#mapa18{margin: 390px 0px 0px 40px;}
#mapa19{margin: 403px 0px 0px 93px;}
#mapa110{margin: 402px 0px 0px 196px;}
#mapa111{margin: 402px 0px 0px 262px;}
#mapa112{margin: 402px 0px 0px 347px;}

#cont11, #cont12, #cont13, #cont14, #cont15, #cont16{ margin: 3px 0 0 26px;}
#cont17{ margin: 22px 0px 0 -58px;}
#cont18{ margin: 22px 0px 0 -18px;}
#cont19{ margin: 22px 0px 0 -6px;}
#cont110{ margin: 22px 0px 0 -25px;}
#cont111{ margin: 22px 0px 0 -53px;}
#cont112{ margin: 22px 0px 0 -11px;}

/*Erupción Estromboliana*/
#imgEstrom{height: 60%; width: 81%;}

#mapa21{margin: 25px 0px 0px 230px;}
#mapa22{margin: 131px 0px 0px 140px;}
#mapa23{margin: 87px 0px 0px 348px;}
#mapa24{margin: 102px 0px 0px 305px;}
#mapa25{margin: 164px 0px 0px 94px;}
#mapa26{margin: 134px 0px 0px 385px;}
#mapa27{margin: 260px 0px 0px 412px;}
#mapa28{margin: 274px 0px 0px 73px;}
#mapa29{margin: 272px 0px 0px 140px;}
#mapa210{margin: 272px 0px 0px 213px;}
#mapa211{margin: 272px 0px 0px 264px;}

#cont21, #cont23,#cont24, #cont26{ margin: 3px 0 0 26px;}
#cont22{margin:3px 0 0 -49px;}
#cont25{margin: -10px 0 0 -65px; text-align: center; width: 30px;}
#cont27{ margin: 22px 0px 0 -58px;}
#cont28{ margin: 22px 0px 0 -21px;}
#cont29{ margin: 22px 0px 0 -11px;}
#cont210{ margin: 22px 0px 0 -25px;}
#cont211{ margin: 22px 0px 0 -53px;}

/* Erupción Vulcaniana */
#imgVulcan {height: 65%; 
            width: 85%;}
#imgVulcan {
  height: 53%;
  width: 76%;
}

#mapa31{margin: 39px 0px 0px 217px;}
#mapa32{margin: 116px 0px 0px 147px;}
#mapa33{margin: 82px 0px 0px 302px;}
#mapa34{margin: 77px 0px 0px 342px;}
#mapa35{margin: 145px 0px 0px 103px;}
#mapa36{margin: 119px 0px 0px 376px;}
#mapa37{margin: 228px 0px 0px 401px;}
#mapa38{margin: 236px 0px 0px 82px;}
#mapa39{margin: 241px 0px 0px 141px;}
#mapa310{margin: 240px 0px 0px 214px;}
#mapa311{margin: 241px 0px 0px 262px;}

#cont31,#cont33,#cont34, #cont36{ margin: 3px 0 0 26px;}
#cont32{margin:3px 0 0 -49px;}
#cont35{margin: -11px 0 0 -66px; text-align: center; width: 30px;}
#cont37{ margin: 22px 0px 0 -58px;}
#cont38{ margin: 22px 0px 0 -21px;}
#cont39{ margin: 22px 0px 0 -11px;}
#cont310{ margin: 22px 0px 0 -25px;}
#cont311{ margin: 22px 0px 0 -53px;}

/* Erupción Peleana */
#mapaPeleana{margin: 20px 0 0 0;}
#imgPeleana {width: 86%;
  height: 66%;
  margin: 20px 0 0 0;}
#mapa41{margin: 51px 0px 0px 194px;}
#mapa42{margin: 120px 0px 0px 353px;}
#mapa43{margin: 114px 0px 0px 145px;}
#mapa44{margin: 167px 0px 0px 132px;}
#mapa45{margin: 176px 0px 0px 386px;}
#mapa46{margin: 309px 0px 0px 419px;}
#mapa47{margin: 316px 0px 0px 76px;}
#mapa48{margin: 318px 0px 0px 186px;}
#mapa49{margin: 317px 0px 0px 259px;}
#mapa410{margin: 318px 0px 0px 345px;}

#cont41{ margin: 3px 0 0 26px;}
#cont42{margin: -4px 0 0 24px; width: 120px;}
#cont43{margin: 3px 0 0 -97px;}
#cont44{margin: 3px 0 0 -118px;}
#cont45{margin: -5px 0 0 26px; width: 30px;}
#cont46{margin: 22px 0 0 -61px;}
#cont47{ margin: 22px 0px 0 -17px;}
#cont48{ margin: 22px 0px 0 -21px;}
#cont49{ margin: 22px 0px 0 -49px;}
#cont410{ margin: 22px 0px 0 -9px;}

/* Erupción Pliniana */
#imgPliniana {height: 65%; 
            width: 85%;}
#mapa51{margin: 50px 0px 0px 335px;}
#mapa52{margin: 166px 0px 0px 139px;}
#mapa53{margin: 121px 0px 0px 306px;}
#mapa54{margin: 283px 0px 0px 417px;}
#mapa55{margin: 286px 0px 0px 73px;}
#mapa56{margin: 287px 0px 0px 251px;}

#cont51,#cont53,#cont54, #cont56{ margin: 3px 0 0 26px;}
#cont56{width: 129px;}
#cont52{margin:3px 0 0 -72px;}
#cont55{margin: 3px 0 0 -64px;}

/* Erupción Freatomagmática */
#imgSurtseyana {  height: 75%;
  width: 78%;}
#mapa61{margin: 2px 0px 0px 238px;}
#mapa62{margin: 76px 0px 0px 213px;}
#mapa63{margin: 151px 0px 0px 132px;}
#mapa64{margin: 107px 0px 0px 423px;}
#mapa65{margin: 330px 0px 0px 404px;}
#mapa66{margin: 337px 0px 0px 91px;}
#mapa67{margin: 345px 0px 0px 188px;}
#mapa68{margin: 346px 0px 0px 254px;}
#mapa69{margin: 340px 0px 0px 333px;}

#cont61, #cont64{margin: 3px 0 0 26px;}
#cont62{margin: 3px 0 0 -136px;}
#cont63{margin: 3px 0 0 -49px;}
#cont65{margin: -8px 0 0 26px; width: 100px;}
#cont66{margin: 22px 0 0 -16px;}
#cont67{margin: 22px 0 0 -22px;}
#cont68{margin: 22px 0 0 -48px;}
#cont69{margin: 22px 0 0 -8px;}

/* Erupción Submarina */
#imgSubmarina {height: 85%; 
            width: 100%;}
#mapa71{margin: 15px 0px 0px 329px;}
#mapa72{margin: 85px 0px 0px 435px;}
#mapa73{margin: 379px 0px 0px 23px;}
#mapa74{margin: 388px 0px 0px 76px;}
#mapa75{margin: 388px 0px 0px 161px;}
#mapa76{margin: 389px 0px 0px 253px;}
#mapa77{margin: 388px 0px 0px 353px;}
#mapa78{margin: 377px 0px 0px 443px;}


#cont71{ margin: 3px 0 0 26px;}
#cont72{margin: 3px 0 0 23px;}
#cont73{margin:22px 0 0 -22px;}
#cont74{margin: 22px 0 0 -32px;}
#cont75{margin: 22px 0 0 -24px;}
#cont76{margin: 22px 0 0 -54px;}
#cont77{margin: 22px 0 0 -8px;}
#cont78{margin: 22px 0 0 -52px;}

/* Erupción Subglacial */
#imgSubglacial {  height: 78%;
  width: 87%}
#mapa81{margin: 6px 0px 0px 309px;}
#mapa82{margin: 48px 0px 0px 345px;}
#mapa83{margin: 66px 0px 0px 413px;}
#mapa84{margin: 334px 0px 0px 420px;}
#mapa85{margin: 343px 0px 0px 58px;}
#mapa86{margin: 364px 0px 0px 133px;}
#mapa87{margin: 361px 0px 0px 196px;}
#mapa88{margin: 352px 0px 0px 254px;}
#mapa89{margin: 346px 0px 0px 342px;}

#cont81, #cont82{margin: 3px 0 0 26px;}
#cont83{margin: 3px 0 0 18px;}
#cont84{margin: 22px 0 0 -64px;}
#cont85{margin: 22px 0 0 -20px;}
#cont86{margin: 22px 0 0 -54px;}
#cont87{margin: 22px 0 0 -24px;}
#cont88{margin: 22px 0 0 -56px;}
#cont89{margin: 22px 0 0 -9px;}

/* Erupción Freática */
#imgFreatica {height: 77%;
width: 89%;
margin-top: -30px;}
#mapa91{margin: 59px 0px 0px 334px;}
#mapa92{margin: 169px 0px 0px 135px;}
#mapa93{margin: 308px 0px 0px 426px;}
#mapa94{margin: 308px 0px 0px 66px;}
#mapa95{margin: 322px 0px 0px 201px;}
#mapa96{margin: 322px 0px 0px 260px;}
#mapa97{margin: 321px 0px 0px 307px;}

#cont91{ margin: 3px 0 0 26px;}
#cont92{margin:3px 0 0 -73px;}
#cont93{margin:22px 0 0 -67px;}
#cont94{margin: 22px 0 0 -22px;}
#cont95{margin: 22px 0 0 -35px;}
#cont96{margin: 22px 0 0 -23px;}
#cont97{margin: 22px 0 0 -52px;}

/* A C T I V I D A D*/

#subp38{margin-top: -80px;}
#imagn39 {width: 450px;}
#contActividad{width: 400px; border: 2px solid #D9D9D9; margin: -5px 0 0 29px; text-align: center;}
#contActividad input{margin: 1px 0 0 0; border: 0px; border-bottom: 1px solid #000; padding: 0 5px 0 0;}
#contActividad label{margin: 0 0 0 10px;}
#contActividad button{width: 100px;   
                      color: #fff;
                      font-size: 14px; 
                      margin: 10px 0 0 26px;
                      line-height: 10px;
                      height: 30px;
                      background: #0A3E63;
                      border: 1px solid #D9D9D9;
                      -moz-border-radius: 50px;
                      -webkit-border-radius: 50px;
                      border-radius: 50px;
                      cursor: pointer;
                      float: left;}
#contPreguntas{text-align: left;padding: 10px 10px 0px 10px; width: 220px; margin: 0 auto;}
#resultado{color: #fff; width: 120px; margin: 10px 0 0 0px!important; float: right; height: 30px; line-height: 30px;font-size: 14px;
                      -moz-border-radius: 50px;
                      -webkit-border-radius: 50px;
                      border-radius: 50px;
                     }
#reintentar{color: #fff; width: 120px; margin: 7px 0px 0px 5px!important; float: left; height: 30px; line-height: 30px;font-size: 14px;
                      -moz-border-radius: 50px;
                      -webkit-border-radius: 50px;
                      border-radius: 50px;
                     cursor: pointer;}
.oculto{visibility: hidden;}
#contResultado{height: 45px;
  background-color: #005692;}
#contInstruccion{color: #fff; background-color: #2a3439; text-align: left;padding: 5px;}
/*-------------------------1.3 Productos del Vulcanismo-------------------------*/

#titulo3-2, #titulo3-3, #titulo3-4, #titulo3-5, #titulo3-6, #titulo3-7, 
#titulo3-8, #titulo3-9, #titulo3-10i, #titulo3-10ii, #titulo3-10iii, 
#titulo3-10iiii, #titulo3-11i, #titulo3-11ii, #titulo3-11iii{ float:left; width:100%; text-align:left; margin-bottom:30px; }
#titulo3-1{margin-top: 200px;}
#titulo3-2, #titulo3-3, #titulo3-7, #titulo3-11i{margin-top: 150px;}
#titulo3-4{margin-top: 80px;}
#titulo3-5{margin-top: 10px; margin-left: -80px;}
#titulo3-11ii {margin-top: 100px;}
#titulo3-8, #titulo3-9{margin-top: 280px;}

#titulo3-10i{margin-top: 192px;}
#titulo3-10iii{margin-top: 80px;}

#titulo3-10ii{margin-top: 20px;}
 #titulo3-10iiii{margin-top: 160px;}
#titulo3-1 img, #titulo3-7 img{ margin:0 0 0 -77px; }
#titulo3-8 img{ margin:74px 0 0 -77px; }
#titulo3-9 img{ margin:84px 0 0 -77px; }
#titulo3-10i img{ margin:-59px 0 0 -77px; }
#titulo3-10ii img{ margin:-58px 0 0 -77px; }
#titulo3-10iii img{ margin:-17px 0 0 -77px; }
#titulo3-10iiii img{ margin:-17px 0 0 -77px; }
#titulo3-11i img{ margin:-59px 0 0 -77px; }

#titulo3-11ii img{ margin:-59px 0 0 -77px; }
#titulo3-11iii img{ margin:-6px 0 0 -77px; }
#titulo3-2 img, #titulo3-3 img, #titulo3-4 img, #titulo3-5 img{ margin:-50px 0 0 -77px; }
#titulo3-6{ margin:32px 0 0 -77px;}
#titulo3-10ii, #titulo3-11iii{ margin:43px 0 0 -77px;}
#titulo3-7 img{ margin:-59px 0 0 -77px; }
.img3-1, .img3-7, .img3-8, .img3-9, .img3-10, .imgp45{ margin:-171px 0 0 -77px; padding:0px; }
#txt2p44{width: 60%; float: left;}
#txt1p44{margin-top: -20px; width: 100%; float: left;}
#img1p44{width: 40%; float: right; margin: -31px 0 0 0;}
/*.texto3-4{ margin-top: -26px; }*/
.tizq3-5{ float: left;
margin: 30px 0px 0px 0px;
width: 100%; }
.tder3-5{ float:right; width:50%; }
.tizq3-7i, .tizq3-7ii{ float: right; width: 31%; padding: 13px;}
.tder3-7i, .tder3-7ii{ float:left; width:60%; margin-top: 20px; }
.tizq3-7ii{margin-top: 18px;}
.tizq3-7i{margin-top: 20px;}
#c3-7ii{ margin-top:53px; }
#c3-10i{ margin-top:170px; }
.tizq3-10i{ float:left; width:55%; margin:-20px 0 0 -50px;  }
.tizq3-10ii{float:left; width:80%; margin:8px 0 0 -50px;}
.tder3-10i, .tder3-10ii{ float:right; width:20%; margin-top: 22px; }
.texto100{ float:left; margin:-23px 0 0 -51px; width: 80%; }
#contVideo3-11{ 27px 0 0 -30px }

#referenciap48, #referenciap52{margin-top: 0;
  margin-left: -65px;
  float: left;
  text-align: left;
 }

 #referenciap40{margin: 2px 0 0 5px;
                float: left;
                text-align: left;}

#referenciap46, #referenciap48, #referenciap50, #referenciap52{margin: -28px 0 0 5px;
                float: left;
                text-align: left;}
#textop40{margin: -105px 0 0 0;}
 #referenciap48, #referenciap50{padding-bottom: 25px;}
 #referenciap52{padding-bottom: 30px;}
#imgp44{margin: 21px auto;
width: 350px;}
#imgp44 img{width: 100%;}

#txtp52{margin: 23px 0px 0px -51px; width: 55%;}
#imgpomez{margin: -39px 115px 0px 0px;}
#txtFuenTer{margin: 100px 0 0 0;}
#txtp50{width: 60%; margin: 0 0 0 -30px; float: left;}
#imgp50{width: 40%; float: right; margin: -35px 5px 0 0;}

/*-------------------------1.4 Peligros del Vulcanismo-------------------------*/

#plecaPeligros{ margin-top:100px; }
#imagenp59 img{margin-top: 100px; width: 612px; border: 1px solid #000;}

#textop59{ 
          height: 00px;}
#txtp59{margin-top: 250px;}
.zoom{
        /* Aumentamos la anchura y altura durante 2 segundos */
        transition: width 2s, height 2s, transform 2s;
        -moz-transition: width 2s, height 2s, -moz-transform 2s;
        -webkit-transition: width 2s, height 2s, -webkit-transform 2s;
        -o-transition: width 2s, height 2s,-o-transform 2s;
    }
.zoom:hover{
        /* tranformamos el elemento al pasar el mouse por encima al doble de su tamaño con scale(2). */
        transform : scale(2);
        -moz-transform : scale(2);      /* Firefox */
        -webkit-transform : scale(2);   /* Chrome - Safari */
        -o-transform : scale(2);        /* Opera */
    }
 #pleca145{margin-top:140px;}
 #pleca142,  #pleca143{margin-top: 172px;}
#pleca144{margin-top:310px;}
#pleca145{margin-top: 268px;}
#pleca146{margin-top: 216px;}
#pleca147{margin-top: 282px;
          padding-bottom: 25px;}
#video61, #video63, #video65, #video67{ margin-top: 30px;}

 #referenciap61, #referenciap63, #referenciap65{margin-top: 10px;
  width:100%;
  margin-left: 10px;
 }

#referenciap67{margin-top: 10px;
  width:100%;
  margin-right: 55px;
 }

#picture-frame {
        border: 1px #000 solid;
        margin-top: 40px; 
        margin-left: 20px;
        width: 550px;
        height: 425px;
}
#txtp60, #txtp62, #txtp64, #txtp66, #txtp68, #txtp69{margin: 30px 0 0 0;}
#imgp71{ width: 500px; margin: 220px auto 0;}
#imgp71 img{width: 100%;}
/*__________MODAL__________________*/

.ventModal{
   position:absolute;
   top:0%;
   left:320px;
   z-index:6;
   float:left;
   width:30%;
   height: 400px;
   color:#fff;
   background:#CECECE;
   border:1px solid #fff;
   box-shadow:0px 2px 1px #999;
   display: none;
   min-width: 500px;
   opacity: 0.9;
}
.ventModal img{width: 100%;
                  height: 100%;}

.btnAceptar{  position:absolute;
   right: 2px;
   top:2px;
   width: 30px;
   height: 30px;
   text-align: center;
   width: 30px;
   height: 30px;
   -moz-border-radius: 50%;
     -webkit-border-radius: 50%;
     border-radius: 50%;
     background-color: #C20000;
     color: #fff;
     font-size: 20px;
     text-decoration: none;
     line-height: 30px;
     cursor: pointer;}


.modalContent > a{
   position:absolute;
   right: 2px;
   top:2px;
   width: 30px;
   height: 30px;
   text-align: center;
   width: 30px;
   height: 30px;
   -moz-border-radius: 50%;
     -webkit-border-radius: 50%;
     border-radius: 50%;
     background-color: #C20000;
     color: #fff;
     font-size: 20px;
     text-decoration: none;
     line-height: 30px;
}