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



	#popup {
		visibility: hidden;
		opacity: 0;
		margin-top: -200px;
		
	}
	#popup:target {
		visibility:visible;
		opacity: 1;
		background-color: rgba(0,0,0,0.8);
		position: fixed;
		top:0;
		left:0;
		right:0;
		bottom:0;
		margin:0;
		z-index: 999;
		-webkit-transition:all 1s;
		-moz-transition:all 1s;
		transition:all 1s;
	}
	.popup-contenedor {
		position: fixed;
		margin:9% auto;
		margin-left: 380px;
		padding:30px 50px;
		background-color: #fafafa;
		color:#333;
		border-radius: 3px;
		border:solid 6px #222222;
		width:50%;
	}
	a.popup-cerrar {
		position: absolute;
		top:3px;
		right:3px;
		background-color: #333;
		padding:7px 10px;
		font-size: 20px;
		text-decoration: none;
		line-height: 1;
		color:#fff;
	}
 
    /* estilos para el enlace */
    
	a.popup-link {
	    text-align: center;
	    display: block;
	    margin: 30px 0;
	}




.button2{text-decoration:none; text-align:center; 
 padding:11px 32px; 
 border:solid 2px #3a7808; 
 -webkit-border-radius:6px;
 -moz-border-radius:6px; 
 border-radius: 6px; 
 font:18px Arial, Helvetica, sans-serif; 
 font-weight:bold; 
 color:#ffffff; 
 background:#5cb811; 
 -webkit-box-shadow:0px 0px 20px #bababa, inset 0px 0px 1px #ffffff; 
 -moz-box-shadow: 0px 0px 20px #bababa,  inset 0px 0px 1px #ffffff;  
 box-shadow:0px 0px 20px #bababa, inset 0px 0px 1px #ffffff;  
  
  }.button2:hover{
 padding:11px 32px; 
 border:solid 2px #3a7808; 
 -webkit-border-radius:6px;
 -moz-border-radius:6px; 
 border-radius: 6px; 
 font:18px Arial, Helvetica, sans-serif; 
 font-weight:bold; 
 color:#ffffff; 
 background-color:#3a7808; 
 background-image: -moz-linear-gradient(top, #3a7808 0%, #5cb811 100%); 
 background-image: -webkit-linear-gradient(top, #3a7808 0%, #5cb811 100%); 
 background-image: -o-linear-gradient(top, #3a7808 0%, #5cb811 100%); 
 background-image: -ms-linear-gradient(top, #3a7808 0% ,#5cb811 100%); 
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5cb811', endColorstr='#5cb811',GradientType=0 ); 
 background-image: linear-gradient(top, #3a7808 0% ,#5cb811 100%);   
 -webkit-box-shadow:0px 0px 20px #bababa, inset 0px 0px 1px #ffffff; 
 -moz-box-shadow: 0px 0px 20px #bababa,  inset 0px 0px 1px #ffffff;  
 box-shadow:0px 0px 20px #bababa, inset 0px 0px 1px #ffffff;  
  
 }.button2:active{
 padding:11px 32px; 
 border:solid 2px #3a7808; 
 -webkit-border-radius:6px;
 -moz-border-radius:6px; 
 border-radius: 6px; 
 font:18px Arial, Helvetica, sans-serif; 
 font-weight:bold; 
 color:#ffffff; 
 background-color:#5cb811; 
 background-image: -moz-linear-gradient(top, #5cb811 0%, #2bff00 100%); 
 background-image: -webkit-linear-gradient(top, #5cb811 0%, #2bff00 100%); 
 background-image: -o-linear-gradient(top, #5cb811 0%, #2bff00 100%); 
 background-image: -ms-linear-gradient(top, #5cb811 0% ,#2bff00 100%); 
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2bff00', endColorstr='#2bff00',GradientType=0 ); 
 background-image: linear-gradient(top, #5cb811 0% ,#2bff00 100%);   
 -webkit-box-shadow:0px 0px 20px #bababa, inset 0px 0px 1px #ffffff; 
 -moz-box-shadow: 0px 0px 20px #bababa,  inset 0px 0px 1px #ffffff;  
 box-shadow:0px 0px 20px #bababa, inset 0px 0px 1px #ffffff;  
  
 }


.notificiacion{
  width: 700px;
  height: 50px;
  background-color: #ffffff;
  border-radius: 10px;
}

.notificiacion{
  line-height: 3em;
}

.notificiacion img{
  float: left;
  margin-top: 3%;
  margin-left: 3%;
  margin-right: 4%;
}

.notificiacion p{
  
}

.simplescrollup__button {
                position: fixed;
                bottom: 2rem;
                right: 2rem;
                transition: 1s all;
                z-index: 10000;
            }
            .simplescrollup__button--show {
                transform: translateX(0);
            }
            .simplescrollup__button--hide {
                transform: translateX(100px);
            }

/* estilos para cajas de texto */


 
/*Estilos Base*/
.contenedor-img {
    width: 180px;
    height: 180px;
    float: left;
    overflow: hidden;
    position: relative;
    text-align: center;
    cursor: default;
    background: #fff;
}
    .contenedor-img .mascara,.contenedor-img .contenido {
        width: 60px;
        height: 50px;
        position: absolute;
        overflow: hidden;
        top: 0;
        left: 0;
        border-radius: 1em;
		box-shadow: 5px 10px 14px grey;
		border-color: orangered;
		border-style: solid;
        border-color: darkgrey;
    }
    .contenedor-img img {
        display: block;
        position: relative;
       
    }
    .contenedor-img h2 {
        text-transform: uppercase;
        color: #fff;
        text-align: center;
        position: relative;
        font-size: 17px;
        padding: 10px;
        background: rgba(0, 0, 0, 0.9);
        margin: 20px 0 0 0
    }
    .contenedor-img p {    
        font-size: 12px;
        position: relative;
        color: #fff;
        padding: 10px 20px 10px;
        text-align: center
    }
    .contenedor-img a.link {
        display: inline-block;
        text-decoration: none;
        padding: 7px 14px;
        background: #222;
        color: #fff;
        text-transform: uppercase;
        box-shadow: 0 0 2px #000
    }
        .contenedor-img a.link:hover {
            box-shadow: 0 0 5px #000
        }
        
     
/*Ejemplo 1*/
.ejemplo-1 img { 
    transition: all 0.2s linear;
}
.ejemplo-1 .mascara {
    opacity: 0;
    background-color: rgba(38, 38, 46, 0.5); 
    transition: all 0.3s ease-in-out;
}
    .ejemplo-1 h2 {
        transform: translateX(-200px);
        opacity: 0;
        transition: all 0.7s ease-in-out;
    }
    .ejemplo-1 p { 
        transform: translateX(200px);
        opacity: 0;
    	transition: all 0.4s linear;
    }
    .ejemplo-1 a.link{
        opacity: 0;
    	transition: all 0.4s ease-in-out;
        transform: translateY(100px)
    }
    .ejemplo-1:hover img { 
    	transform: scale(1.1);
    } 
    .ejemplo-1:hover .mascara { 
    	opacity: 1;
		
    }
    .ejemplo-1:hover h2,
    .ejemplo-1:hover p,
    .ejemplo-1:hover a.link {
        opacity: 1;
        transform: translateX(0px);
    }
    .ejemplo-1:hover p {
        transition-delay: 0.1s;
    }
    .ejemplo-1:hover a.link {
        transition-delay: 0.2s;
        transform: translateY(0px);
    }

 

/* Definimos el color inicial */
.cambioColor {color:dimgrey;}
/* Definimos el color al pasar el mouse por encima */
.cambioColor:hover {color:darkorange;}

	
	
/* Definimos el color inicial */
.cambioColorubic {color:white;}
/* Definimos el color al pasar el mouse por encima */
.cambioColorubic:hover {color:yellow;}



	@media screen and (max-width: 800px) { /* Con esto lo ocultamos en la pc y se deja visible solo en mobile */
	.mostrarenmobile{
		display: none;
	}
}
	
	
	
	@media screen and (min-width: 800px) { /* Con esto lo ocultamos en la pc y se deja visible solo en mobile */
	.mostrarenmobile2{
		display: none;
	}
}


/* Definimos el color y forma del div */
#contenido{
  float:left;
  clear:both;
  border:2px solid #e6e6e6;
  margin-top:2px;
  padding:5px;
  width:390px;
  overflow:auto;
  font-family:helvetica;
  font-size:14px;
  text-align: justify;
}	
	



.caja { 
box-shadow: 0px 10px 10px -6px black;
color: #222222; 
font-size: 14px; 
font-weight: 400; 
text-align: justify; 
background: #FAFAFA; 
margin: 0 0 25px; 
overflow: hidden; 
padding: 20px; 
border-radius: 10px 10px 10px 10px; 
-moz-border-radius: 10px 10px 10px 10px; 
-webkit-border-radius: 10px 10px 10px 10px; 
border: 1px solid #555555;}


.caja2 { 
box-shadow: 0px 10px 10px -6px black;
color: #222222; 
width: 350px;
font-size: 14px; 
font-weight: 200; 
text-align: left; 
background: #D8D8D8; 
margin: 0 0 2px; 
overflow: hidden; 
padding: 5px; 
border-radius: 5px 5px 5px 5px; 
-moz-border-radius: 5px 5px 5px 5px; 
-webkit-border-radius: 5px 5px 5px 5px; 
border: 1px solid #555555;}


img.alineadoTextoImagenArriba{
  vertical-align: text-top;  
}
img.alineadoTextoImagenCentro{
  vertical-align: middle;
  /* Ojo vertical-align: text-middle no existe*/
}
img.alineadoTextoImagenAbajo{
  vertical-align: text-bottom;  
}


/* CSS PARA POPUP PAGINA PRINCPAL */

#modal {
  background: rgba(0, 0, 0, 0.9);
  color: #fff;
  position: fixed;
  top: -100vh;
  left: 0;
  height: 100vh;
  width: 100vw;
  transition: all .5s;
}
#modal p {
  width: 60%;
  height: 40%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  font-size: 1.5em;
  text-align: center;
}

#mostrar-modal {
  display: none;
}
#mostrar-modal + label {
  background: #A30306;
  display: table;
  margin: auto;
  color: #fff;
  line-height: 3;
  padding: 0 1em;
  text-transform: uppercase;
  cursor: pointer;
}
#mostrar-modal + label:hover {
  background: #ff0000;
}
#mostrar-modal:checked ~ #modal {
  top: 0;
}
#mostrar-modal:checked ~ #cerrar-modal + label {
  display: block;
}

#cerrar-modal {
  display: none;
}
#cerrar-modal + label {
  position: absolute;
  top: 1em;
  right: 1em;
  z-index: 100;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  background: tomato;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  border-radius: 50%;
  display: none;
  transition: all .5s;
}
#cerrar-modal:checked ~ #modal {
  top: -100vh;
}
#cerrar-modal:checked + label {
  display: none;
}


.wrapper29{
    width: 500px;
    height: 500px;
    position: relative;
}

img2{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.wrapper29::before{
    transition: all .5s ease-in;
    background-color: rgba(0, 0, 0, 0.8);
    position: absolute;
    content: "";
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
    cursor: pointer;
}
.wrapper29:hover::before{
    opacity: .6 ;
}	



.text {
  font-size:20px;
  font-family:helvetica;
  font-weight:bold;
  color:#FF0000;
  text-transform:uppercase;
}
.parpadea {
  
  animation-name: parpadeo;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;

  -webkit-animation-name:parpadeo;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
}

@-moz-keyframes parpadeo{  
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}

@-webkit-keyframes parpadeo {  
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
   100% { opacity: 1.0; }
}

@keyframes parpadeo {  
  0% { opacity: 1.0; }
   50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}