@import url('https://fonts.googleapis.com/css?family=Poppins');
body, html{
  margin: 0;
  background: #2b2927;
  font-family: 'Poppins', sans-serif;
}
h1{
  text-align: center;
  color:white;
}
.container-all{
  width: fit-content;
  margin: 20px auto;
  height: auto;
}
.img-container{
  
  overflow:hidden;
  height: fit-content;
 
  padding: 0;
  display:block;
  position:relative;
  float:left;
}
.img-container1{
  
  overflow:hidden;
  height: fit-content;
 
  padding: 0;
  display:block;
  position:relative;
  float:left;
}
.img-container2{
  
  overflow:hidden;
  height: fit-content;
 
  padding: 0;
  display:block;
  position:relative;
  float:left;
}
.img-container3{
  
  overflow:hidden;
  height: fit-content;
 
  padding: 0;
  display:block;
  position:relative;
  float:left;
}
.images{
  width: 100%;
  transition-duration: .3s;
  max-width: 100%;
  display:block;
  overflow:hidden;
  cursor:pointer;
}
.images-long{
  width: 183%;
  transition-duration: .3s;
  max-width: 183%;
  display:block;
  overflow:hidden;
  cursor:pointer;
}
.button-styled{
	color:black;
	border:1px black solid;
	background:white;
	    transition-duration: 400ms;
}
.button-styled:hover{
	color:white;
	border:1px #5e5e5e solid;
	background:#5e5e5e;
	    transition-duration: 400ms;
}
.button-styled2{
	
		color:white;
	border:1px #5e5e5e solid;
	background:#5e5e5e;
	    transition-duration: 400ms;
}
.button-styled2:hover{
	color:black;
	border:1px black solid;
	background:white;
	    transition-duration: 400ms;
}
.title{
  position:absolute;
  display:block;
  cursor:pointer;
  top: 35%;
  display: none;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  font-weight: bold;
  font-size: 1.6em;
  text-shadow: 1px 5px 10px black;
  transition-duration: .3s;
}
.title2{
  position:absolute;
  display:block;
  cursor:pointer;
  top: 50%;
  display: none;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  font-weight: bold;
  font-size: 2em;
  text-shadow: 1px 5px 10px black;
  transition-duration: .3s;
}
.text{
  position:absolute;
  top: 60%;
  cursor:pointer;
  max-width: 80%;
  text-align:center;
  left: 50%;
  text-shadow: 1px 5px 10px black;
  font-size: 12px;
  display:none;
  margin-right: -50%;
  transition-duration: .3s;
  transform: translate(-50%, -50%) 
}
.img-container > *{
	
}
.img-container:hover > *{
	
	
}
.img-container:hover img{
  transform: scale(1.2);
  transition-duration: .3s;
  filter: grayscale(20%);
  
}
.img-container:hover span{
  color:white;
  display: block;
  
  transition-duration: .3s;
}
.img-container:hover button{
  
  display: block;
  transition-duration: .4s;
}
.img-container1:hover img{
  transform: scale(1.2);
  transition-duration: 3s;
  filter: grayscale(20%);
  
}
.img-container1:hover span{
  color:white;
  display: block;
  
  transition-duration: .3s;
}
.img-container1:hover button{
  
  display: block;
  transition-duration: .3s;
}
.img-container2:hover img{
  
  transition-duration: .3s;
  filter: grayscale(20%);
  
}
.img-container2:hover span{
  color:white;
  
  transition-duration: .3s;
}
.img-container2:hover button{
  
  transition-duration: .3s;
}
.img-container3:hover img{
  
  transition-duration: .3s;
  filter: grayscale(20%);
  
}
.img-container3:hover span{
  color:white;
  
  transition-duration: .3s;
}
.img-container3:hover button{
  
  transition-duration: .3s;
}
@media only screen and (max-width: 900px) {
    .img-container {
        width: 100%;
    }
	.img-container1 {
        width: 100%;
    }
	.img-container2 {
        width: 100%;
    }.img-container3 {
        width: 100%;
    }
	.centered-button{
		    
	}
}
@media only screen and (max-width: 400px) {
    .img-container {
        width: 100%;
    }
	.img-container1 {
        width: 100%;
    }
	.img-container2 {
        width: 100%;
    }
	.img-container3 {
        width: 100%;
    }
	.centered-button{
		    
	}
}
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -100%);
  color:white;
      font-size: 24px;
    font-family: 'Raleway';
    font-weight: 500;
	
}
.centered2 {
  position: absolute;
  top: 59.4%;
  left: 50%;
  transform: translate(-50%, 50%);
  color:#ffffff;
      font-size: 34px;
    font-family: 'Poppins', 'Helvetica Neue', sans-serif;
    font-weight: 300;
	
	
}
.centered-button {
  position: absolute;
  top: 50%;
  left: 50%;
  color:white;
    font-size: 13px;
    font-family: 'Raleway';
    font-weight: bold;
	border:1px white solid;
	background:#00000047;
	display:none;
	transition-duration: .3s;
  transform: translate(-50%, 50%) ;
  width: 162px;
  
}
.centered-button a{
	color:white;
    font-size: 13px;
    font-family: 'Raleway';
    font-weight: 400;
}
.centered-button:hover a{
	background:white;
	color:#666666;
}
.centered-button:hover{
	background:white;
	color:#666666;
	
	shadow:none;

	
}
.centered-button-en {
  position: absolute;
  top: 50%;
  left: 50%;
  color:white;
    font-size: 13px;
    font-family: 'Raleway';
    font-weight: bold;
	border:1px white solid;
	background:#00000047;
	display:none;
	transition-duration: .3s;
  transform: translate(-50%, 50%) ;
  width: 162px;
  height: 63px;
}
.centered-button-en a{
	color:white;
    font-size: 13px;
    font-family: 'Raleway';
    font-weight: 400;
}
.centered-button-en:hover a{
	background:white;
	color:#666666;
}
.centered-button-en:hover{
	background:white;
	color:#666666;
	
	shadow:none;

	
}
.overlay{ height:100%; width:100%; position:absolute;  top: 0;  left: 0%;}
.overlay:hover{
	background-color:black; opacity:0.3;
}
.full-width{
	max-width: 100% !important; 
     margin-right: 0px !important; 
     margin-left: 0px !important;
}