@charset "utf-8";
/* CSS Document */


#main{
    display: block;
    min-height: 576px;
    height:auto;
    margin-bottom: 3%;
    position: relative;
    width: 1024px;
}

#escenario1_antes{
    background-image:url(../images/retirada_fijaciones_metalicas_estructuras/antes/inmueble.png);
    background-color:#FFF;
    background-repeat:no-repeat;
    display: block;
    height: 576px;
    margin-top:30px;
    position: relative;
    width: 1024px;
}



#antes1, #antes2, #antes3, #antes4, #antes5, #antes6,
#antes1:hover, #antes2:hover, #antes3:hover, #antes4:hover, #antes5:hover, #antes6:hover{
    background-color:transparent;
    display: block;
    position: absolute;
    background-repeat:no-repeat;
}

#antes1:hover, #antes2:hover, #antes3:hover, #antes4:hover, #antes5:hover, #antes6:hover{
    cursor:pointer;
}

#antes1{
    background-image:url(../images/retirada_fijaciones_metalicas_estructuras/antes/character_permit_off.png);
    width:255px;
    height:246px;
    left: 472px;
    top: 326px;
    z-index:20;
}


#antes1:hover{
    background-image:url(../images/retirada_fijaciones_metalicas_estructuras/antes/character_permit_on.png);
    width:254px;
    height:245px;
}


#antes2{
    background-image:url(../images/retirada_fijaciones_metalicas_estructuras/antes/character_guarding_off.png);
    width:108px;
    height:189px;
    left: 745px;
    top: 157px;
}

#antes2:hover{
    background-image:url(../images/retirada_fijaciones_metalicas_estructuras/antes/character_guarding_on.png);
    width:107px;
    height:188px;
}

#antes3{
    background-image:url(../images/retirada_fijaciones_metalicas_estructuras/antes/character_openings_off.png);
    width:128px;
    height:197px;
    left: 840px;
    top: 256px;
}

#antes3:hover{
    background-image:url(../images/retirada_fijaciones_metalicas_estructuras/antes/character_openings_on.png);
    width:126px;
    height:196px;
}

#antes4{
    background-image:url(../images/retirada_fijaciones_metalicas_estructuras/antes/character_environmental_protection_off.png);
    width:124px;
    height:232px;
    top:143px;
    left:516px;
   /* z-index:10;*/
}

#antes4:hover{
    background-image:url(../images/retirada_fijaciones_metalicas_estructuras/antes/character_environmental_protection_on.png);
    width:122px;
    height:230px;
}

#antes5{
    background-image:url(../images/retirada_fijaciones_metalicas_estructuras/antes/character_emergency_off.png);
    width:289px;
    height:240px;
    top:240px;
    left:72px;
}

#antes5:hover{
    background-image:url(../images/retirada_fijaciones_metalicas_estructuras/antes/character_emergency_on.png);
    width:287px;
    height:239px;
}


#antes6{
    background-image:url(../images/retirada_fijaciones_metalicas_estructuras/antes/character_notification_off.png);
    width:94px;
    height:196px;
    top:174px;
    left:377px;
}

#antes6:hover{
    background-image:url(../images/retirada_fijaciones_metalicas_estructuras/antes/character_notification_on.png);
    width:93px;
    height:195px;
}

#antes1 #txt1, #antes2 #txt2, #antes3 #txt3, #antes4 #txt4, #antes5 #txt5, #antes6 #txt6{
    display:none;
}

#antes1:hover #txt1, #antes2:hover #txt2, #antes3:hover #txt3, #antes4:hover #txt4, #antes5:hover #txt5, #antes6:hover #txt6{
    display:block;
    background:rgba(255,255,255,0.92);
    background-repeat:no-repeat;
	background-size: 100% 100%;
    height: auto;
    display: block;
    width: 309px;
    position: absolute;
    padding:10px 35px;
	border: 1px solid #000;
	-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
	box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
}

#antes1:hover #txt1{
    left: -450px;
    top: -300px;
}


#antes2:hover #txt2{
    left: -723px;
    top: -131px;
    z-index:10;
}


#antes3:hover #txt3{
    left: -818px;
    top: -230px;
    z-index:10;
}



#antes4:hover #txt4{
   	left: 121px;
    top: -117px;
    z-index:30;
}

#antes5:hover #txt5{
    left: 565px;
    top: -214px;
    z-index:20;
}


#antes6:hover #txt6{
    left: 260px;
    top: -148px;
    z-index:20;
}



h1{
    color:#fe0000;
    font-size:14px;
    font-family: 'Dosis', sans-serif;
    letter-spacing:0.5px;
    padding-top: 60px;
}


h2{
    color:#fe0000;
    font-size:14px;
    font-family: 'Dosis', sans-serif;
    letter-spacing:0.5px;
    padding-top: 50px;
	background-image:url(../images/logo_cepreven.png);
	background-repeat: no-repeat;
    background-size: 35%;
    background-position: left top;
}

p{
    color: #343434;
    font-size:14px;
    font-family: 'Dosis', sans-serif;
    text-align:justify;
}



.clear{
    clear:both;
}


/*Durante*/

#escenario1_durante{
    background-image:url(../images/retirada_fijaciones_metalicas_estructuras/durante/inmueble.png);
    background-color:#FFF;
    background-repeat:no-repeat;
    display: block;
    height: 576px;
    margin-top:30px;
    position: relative;
    width: 1024px;
}



#durante1, #durante2, #durante3,
#durante1:hover, #durante2:hover, #durante3:hover{
    background-color:transparent;
    display: block;
    position: absolute;
    background-repeat:no-repeat;
}

#durante1:hover, #durante2:hover, #durante3:hover{
    cursor:pointer;
}

#durante1{
    background-image:url(../images/retirada_fijaciones_metalicas_estructuras/durante/character_observing_off.png);
    width:108px;
    height:247px;
    left: 680px;
    top: 309px;
    z-index:20;
}


#durante1:hover{
    background-image:url(../images/retirada_fijaciones_metalicas_estructuras/durante/character_observing_on.png);
    width:107px;
    height:246px;
}


#durante2{
    background-image:url(../images/retirada_fijaciones_metalicas_estructuras/durante/character_guarding_off.png);
    width:120px;
    height:210px;
    left: 394px;
    top: 138px;
}

#durante2:hover{
    background-image:url(../images/retirada_fijaciones_metalicas_estructuras/durante/character_guarding_on.png);
    width:119px;
    height:210px;
}

#durante3{
    background-image:url(../images/retirada_fijaciones_metalicas_estructuras/durante/character_reacting_off.png);
    width:185px;
    height:225px;
    left: 160px;
    top: 127px;
}

#durante3:hover{
    background-image:url(../images/retirada_fijaciones_metalicas_estructuras/durante/character_reacting_on.png);
    width:184px;
    height:224px;
}



#durante1 #txt1, #durante2 #txt2, #durante3 #txt3{
    display:none;
}

#durante1:hover #txt1, #durante2:hover #txt2, #durante3:hover #txt3{
    display:block;
     background:rgba(255,255,255,0.92);
    background-repeat:no-repeat;
	background-size: 100% 100%;
    height: auto;
    display: block;
    width: 309px;
    position: absolute;
    padding:10px 35px;
	border: 1px solid #000;
	-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
	box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
}

#durante1:hover #txt1{
    left: -670px;
    top: -50px;
}


#durante2:hover #txt2{
   	left: 250px;
    top: -135px;
}


#durante3:hover #txt3{
    left: 484px;
    top: -124px;
}

/*DESPUÉS*/

#escenario1_despues{
    background-image:url(../images/retirada_fijaciones_metalicas_estructuras/despues/inmueble.png);
    background-color:#FFF;
    background-repeat:no-repeat;
    display: block;
    height: 576px;
    margin-top:30px;
    position: relative;
    width: 1024px;
}



#despues1, #despues2, #despues3,
#despues1:hover, #despues2:hover, #despues3:hover{
    background-color:transparent;
    display: block;
    position: absolute;
    background-repeat:no-repeat;
}

#despues1:hover, #despues2:hover, #despues3:hover{
    cursor:pointer;
}

#despues1{
    background-image:url(../images/retirada_fijaciones_metalicas_estructuras/despues/character_postinspection_off.png);
    width:106px;
    height:186px;
    left: 820px;
    top: 200px;
}


#despues1:hover{
    background-image:url(../images/retirada_fijaciones_metalicas_estructuras/despues/character_postinspection_on.png);
    width:105px;
    height:186px;
}


#despues2{
    background-image:url(../images/retirada_fijaciones_metalicas_estructuras/despues/character_notification_off.png);
    width:130px;
    height:254px;
    left: 180px;
    top: 292px;
}

#despues2:hover{
    background-image:url(../images/retirada_fijaciones_metalicas_estructuras/despues/character_notification_on.png);
    width:130px;
    height:253px;
}

#despues3{
    background-image:url(../images/retirada_fijaciones_metalicas_estructuras/despues/character_guarding_off.png);
    width:108px;
    height:189px;
    left: 547px;
    top: 142px;
}

#despues3:hover{
    background-image:url(../images/retirada_fijaciones_metalicas_estructuras/despues/character_guarding_on.png);
    width:107px;
    height:188px;
}



#despues1 #txt1, #despues2 #txt2, #despues3 #txt3{
    display:none;
}

#despues1:hover #txt1, #despues2:hover #txt2, #despues3:hover #txt3{
    display:block;
    background:rgba(255,255,255,0.92);
    background-repeat:no-repeat;
	background-size: 100% 100%;
    height: auto;
    display: block;
    width: 309px;
    position: absolute;
    padding:10px 35px;
	z-index: 20;
	border: 1px solid #000;
	-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
	box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
}

#despues1:hover #txt1{
    /*left: -800px;
    top: -180px;*/
	left: -800px;
    top: -180px;
}


#despues2:hover #txt2{
    left: -160px;
    top: -272px;
}


#despues3:hover #txt3{
    left: -527px;
    top: -122px;
}