html, body {
    max-width: 100%;
    overflow-x: hidden;
}
/*.gallery-section{
  width: 100%;
  padding: 90px 0;
}*/

.inner-width{
  width: 100%;
  max-width: 100%;
  
 /* padding: 0 20px; */
}

.gallery-section h1{
  text-align: center;
  color: goldenrod; 
padding-top: 70px; 

}
.textbox{
   color: black; 
}

.box{
    background-color: #706f6e;
}

.border{
  width: 300px;
  height: 0px;
  background: #333;
  margin: 10px auto;
}

.gallery-section .gallery{
  display: flex;
  flex-wrap: wrap-reverse;
  justify-content: space-between;
}

.gallery-section .image{
  flex: 50%;

}

.gallery-section .image img{
    width: 100%;
  padding: 14%;
  height: 100%;
}

.example{
position:relative;
    overflow: hidden;
width:100%;
display:block;
cursor:pointer;
}
.content {
display: flex;
overflow: hidden;
margin: 13%;
opacity:0;
font-size: 40px;
position:absolute;
top:0;
left:0;
color:black;
background-color:rgba(250,250,210,.8);
width:73.9%;
height:65.5%;
-webkit-transition: all 400ms ease-out;
-moz-transition: all 400ms ease-out;
-o-transition: all 400ms ease-out;
-ms-transition: all 400ms ease-out;
transition: all 400ms ease-out;
}

.example .content:hover { opacity:1; }      
.example .content .text {
height:0;
opacity:0;
transition-delay: .15s;
transition-duration: .1s;
}
.example .content:hover .text {
opacity:1;
  
}

.text{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
 
}

/*.gallery-section .image:hover img{
  transform: scale(1.4) rotate(2deg);
} */


/* Media Queries */

/*IPhone 5/SE*/

@media (max-device-width:320px) and (max-device-height:569px)   {
    .text{
font-size: 20px;        
  }
}

/*galaxy S5*/

@media screen and (min-width:350px) and (max-width:370px) and (max-height:640px)  {
   .text{
font-size: 20px;        
  }
}


/*IPhone 6/7/8*/

@media only screen and (min-width:375px) and (max-height:667px) {
   .text{
font-size: 20px;        
  }
}
/*Pixel2*/

@media only screen and (min-width:411px)  and (max-height:731px) {
   .text{
font-size: 20px;        
  }
}
/*Pixel2 XL*/

@media only screen and (max-width:411px) and (min-height:823px)  {
   .text{
font-size: 20px;        
  }
}
/*IPhone 6/7/8 Plus*/

@media only screen and (min-width:414px) and (max-width:667px) {
    .text{
font-size: 20px;        
  }
}

/*IPhone X*/
@media only screen and (min-width:375px) and (max-width:812px) {
   .text{
font-size: 20px;        
  }
}


/*Ipad*/

 @media only screen and (min-width:768px) and (max-width:950px)  {
   .text{
font-size: 20px;        
  }
}