/* 
    01. Google Fonts
    02. Global Properties
    03. Lines
    04. Header
    05. Slider
	06. Services
    07. About
    08. Projects + Gallery
    09. Testimonials
    10. Team
	11. Clients
    12. Blog
    13. Post
    14. Contact
    15. Buttons
	16. Footer
    17. Overlay Effect Bg image
	18. Media Query
*/

/* =======  Google Fonts  ======= */

@import url('https://fonts.googleapis.com/css2?family=Didact+Gothic&family=Oswald:wght@200;300;400;500;600;700&display=swap');
/* =======  Global Properties  ======= */

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    outline: none;
    list-style: none;
    word-wrap: break-word;
}

body {
    font-family: 'Didact Gothic', sans-serif;
    font-size: 16px;
    line-height: 1.9em;
    font-weight: 300;
    color: #777;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: #fff;
}

/* ======gallery ======*/

.gallery .column {
 
       
    float: left;
  
    width: 45%;
    height:65%; 

    padding:35px;
    
  }
  
  /* Style the images inside the grid */
  
    .gallery .column img {
    border-radius: 5px;
   
    opacity: 0.8; 
    width:100% ;
    height: 150px;
    cursor: pointer; 
    transition: .5s;
  }
  
  .gallery .column img:hover {
    opacity: 5;
    width:110% ;
    height: 170px;
    
border-radius: 0px;
    transition: .5s;
 
}
  
  
  /* Clear floats after the columns */
  .gallery .row:after {
    content: "";
    display: table;
    clear: both;
  }
   /* The expanding image container */
  
  .gallery .containers {
    position: relative;
    padding-top: 10px;

    display: none;
  }
  
  .gallery .containers #expandedImg{
  
 
border-radius:5px;
 
    width:50% ;
    height: 200px;
    transition: .5s;

}
.gallery .containers #expandedImg:hover{
   width:70% ; 

height: 350px;
margin-right: 60px;
      border-radius:0px;
      transition: .5s;
    
    }
  /* Expanding image text */
   .gallery #imgtext {
    position: absolute;
    bottom: 10px;
    left: 250px;
    font-weight: bolder;
    font-weight: bold;
    font-size: 20px;
    color:white;
  }
  
  /* Closable button inside the expanded image */
  .gallery .closebtn {
    position: absolute;
    top: 10px;
    right: 190px;
font-weight: bolder;
    font-size: 35px;
    cursor: pointer;
    color: white;
  }

  @media only screen and (max-width:699px){
    .gallery .column{
float: right;
   justify-content: center;
    width: 75%;
    height:45%; 
  padding:10px;
    margin-left:50px;
  }
       

.gallery .colum img{
    border-radius: 5px;

    opacity: 0.8; 
    width:90% ;
    height: 150px;
    cursor: pointer; 
    transition: 1s;

}
    .gallery .column img:hover {
        opacity: 5;
        width:100% ;
        height: 170px;
       
        transition: 1s;
     
    }
     /* Expanding image text */
     .gallery .containers{
        position:absolute;
        top:-100px;
        left:-200px;
        display: inline-block;
     }
   .gallery #imgtext {
    position: absolute;
    bottom: 10px;
    left: 100px;
   
    font-weight: bold;
    font-size: 10px;
  }
  
  /* Closable button inside the expanded image */
  .gallery .closebtn {
    position: absolute;
    top: 14px;
    right: 100px;
  
    font-size: 25px;
    font-weight: bolder;
    cursor: pointer;
  }
}