@import url('https://fonts.googleapis.com/css?family=Poppins');
body, html{
  margin: 0;
  background: #FFFFFF;
   font-family: 'museo-sans-condensed', 'sans-serif';
}
h1{
  text-align: center;
  
}


.container-all{
  width: fit-content;
  margin: 20px auto;
  height: auto;
}
.container1{
  width: calc(25% - 6px);
  overflow:hidden;
  height: fit-content;
  margin:3px;
  padding: 0;
  display:block;
  position:relative;
  float:left;
  text-align: center;
border-radius: 10px
}
.container2{
  width: calc(25% - 6px);
  overflow:hidden;
  height: fit-content;
  margin:3px;
  padding: 0;
  display:block;
  position:relative;
  float:left;
  text-align: center;
border-radius: 10px
}
.container3{
  width: calc(25% - 6px);
  overflow:hidden;
  height: fit-content;
  margin:3px;
  padding: 0;
  display:block;
  position:relative;
  float:left;
  text-align: center;
border-radius: 10px
}
.container4{
  width: calc(25% - 6px);
  overflow:hidden;
  height: fit-content;
  margin:3px;
  padding: 0;
  display:block;
  position:relative;
  float:left;
  text-align: center;
border-radius: 10px
}
.imgli{
  width: 100%;
  transition-duration: .3s;
  max-width: 100%;
border-radius: 10px;
  
  overflow:hidden;
  cursor:pointer;
}
.title{
  position:absolute;
  display:block;
  cursor:pointer;
  top: 40%;
  display: none;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  font-size: 1.6em;
 text-shadow: 1px 5px 10px rgba(0,0,0,0.2);
  transition-duration: .3s;
padding:10px 14px;
font-family: 'museo-sans-condensed', 'sans-serif';
  font-weight: 500 !important; 
 text-align:center;

}
.text{
  position:
  absolute;
  bottom: 12%;
  cursor:
  pointer;
  max-width: 80%;
  text-align:
  center;
  left: 50%;
  text-shadow: 1px 5px 10px rgba(0,0,0,0.2);
  font-size: 1em;
  display:
  none;
  margin-right: -50%;
  transition-duration: .3s;
  transform: translate(-50%, -50%);
}

.container1:hover img{
  /*transform: scale(1.2);*/
  transition-duration: .3s;
  
 } 

.container1:hover .texto-encima1{
  opacity: .85;
    height: 100%;
  
 } 

.container1:hover .texto-encima1 span{
	background-color: #00377D;
opacity: 1;
height: 40px;
margin: 0;
position: absolute;
    left: 0;
    width: 100%;
    top: 0;
    padding: 6px 10px;
}


.container2:hover img{
  /*transform: scale(1.2);*/
  transition-duration: .3s;
  
  }

.container2:hover .texto-encima2{
  opacity: .85;
    height: 100%;
  
 } 

.container2:hover .texto-encima2 span{
	background-color: #D29300;
opacity: 1;
height: 40px;
margin: 0;
position: absolute;
    left: 0;
    width: 100%;
    top: 0;
    padding: 6px 10px;
}

.container3:hover img{
  /*transform: scale(1.2);*/
  transition-duration: .3s;
  /*filter: hue-rotate(5deg);*/
  /*opacity: .7;*/
 } 

 .container3:hover .texto-encima3{
  opacity: .85;
    height: 88%;
  
 } 

.container3:hover .texto-encima3 span{
	background-color: #8C1310;
opacity: 1;
height: 40px;
margin: 0;
position: absolute;
    left: 0;
    width: 100%;
    top: 0;
    padding: 6px 10px;
}


.container4:hover img{
  /*transform: scale(1.2);*/
  transition-duration: .3s;
  /*filter: hue-rotate(90deg);*/
  /*opacity: .7;*/
 } 
  
 .container4:hover .texto-encima4{
  opacity: .85;
    height: 92%;
  
 } 

.container4:hover .texto-encima4 span{
	background-color: #0C9E21;
opacity: 1;
height: 40px;
margin: 0;
position: absolute;
    left: 0;
    width: 100%;
    top: 0;
    padding: 6px 10px;
}

.container1:hover span{
  color:white;
  display: block;
  /*transition-duration: .1s;*/
 }
.container2:hover span{
  color:white;
  display: block;
  /*transition-duration: .3s;*/

}
.container3:hover span{
  color:white;
  display: block;
 /* transition-duration: .3s;*/

 } 
.container4:hover span{
  color:white;
  display: block;
 /* transition-duration: .3s;*/

}

.texto-encima1{
    position: absolute;
    top: 0px;
    left: 0px;
	text-align: left;
	width: calc(100%);
	background: #0D468F 0% 0% no-repeat padding-box;
margin: 0 0 50px; 
overflow: hidden; 
padding: 10px;
    height: auto;
    font-weight: 700;	
font-family: 'museo-sans-condensed', 'sans-serif';
letter-spacing: 0px;
color: #FFFFFF;
opacity: 1;
}

.texto-encima2{
    position: absolute;
    top: 0px;
    left: 0px;
	text-align: left;
	width: calc(100%);
	background: #FFAB1E 0% 0% no-repeat padding-box;
margin: 0 0 50px; 
overflow: hidden; 
    height: auto;
    font-weight: 700;	
font-family: 'museo-sans-condensed', 'sans-serif';
letter-spacing: 0px;
color: #FFFFFF;
opacity: 1;
}

.texto-encima3{
    position: absolute;
    top: 0px;
    left: 0px;
	text-align: left;
	width: calc(100%);
	background: #DE1A2F 0% 0% no-repeat padding-box;
margin: 0 0 50px; 
overflow: hidden;
padding: 10px; 
    height: auto;
    font-weight: 700;	
font-family: 'museo-sans-condensed', 'sans-serif';
letter-spacing: 0px;
color: #FFFFFF;
opacity: 1;
}

.texto-encima4{
    position: absolute;
    top: 0px;
    left: 0px;
	text-align: left;
	width: calc(100%);
	background: #25B83A 0% 0% no-repeat padding-box;
margin: 0 0 50px; 
overflow: hidden; 
padding: 10px;
    height: auto;
    font-weight: 700;	
font-family: 'museo-sans-condensed', 'sans-serif';
letter-spacing: 0px;
color: #FFFFFF;
opacity: 1;
}

h9{
font-weight: 500 !important;
font-size:1rem;
}
 
.texto-encima1,.texto-encima2, .texto-encima3, .texto-encima4{
padding: 6px 10px;
line-height: 1;
}

.boton_home {border: 2px solid #FFFFFF;border-radius: 25px;text-align: left;font-family: 'museo-sans-condensed', 'sans-serif';letter-spacing: 0px;color: #FFFFFF;background-color: rgba(53,73,153, 0.2);opacity: 1;padding: 10px 30px;}

.boton_home:hover {
border: 2px solid #FFFFFF;border-radius: 25px; text-align: left;
font-family: 'museo-sans-condensed', 'sans-serif';
letter-spacing: 0px;
color: #0D468F;
background-color: #FFFFFF;
opacity: 1; padding: 10px 30px;
}




.container0 {
}
@media only screen and (max-width: 1024px){
	.container3 .title {
		font-size: 1.6em;
	}
@media only screen and (max-width: 900px) {
    .container1, .container2, .container3, .container4 {
        width: calc(50% - 6px);
    }
	.container0 {
        display: none;
    }
	.container1 .title, .container2 .title, .container3 .title, .container4 .title {
		font-size: 2.2em;
	}

}
@media only screen and (max-width: 768px){
	.container1 .title, .container2 .title, .container3 .title, .container4 .title {
		font-size: 2.5em;
	}
	.container1, .container2, .container3, .container4 {
        width: calc(100% - 6px);
    }
		.container1 .text a, .container2 .text a, .container3 .text a, .container4 .text a{
		font-size: 2em;
	}
	    
	.texto-encima1, .texto-encima2, .texto-encima3, .texto-encima4{
			font-size: 1.7em;			
	}
	.texto-encima2, .texto-encima3, .texto-encima4{
			height:60px;		
	}
	.container2:hover .texto-encima2 span, .container3:hover .texto-encima3 span, .container4:hover .texto-encima4 span{
		height:60px;
	}
	
	.texto-encima1 h9, .texto-encima2 h9, .texto-encima3 h9, .texto-encima4 h9{
			font-size: 1em;			
	}

}
@media only screen and (max-width: 400px) {
    .container1, .container2, .container3, .container4 {
        width: 100%;
    }
.container0 {
        display: none;
    }

}

@media only screen and (max-width: 990px){
.texto-encima1,.texto-encima2,.texto-encima3,.texto-encima4{

left: 75px;
}
}