.gallery-section {

  text-align: center;

  padding: 4em 0 0;

}

.gallery-section h3{

  font-size: 2.5em;

  text-transform: capitalize;

  margin-bottom: 1.5em;

  color: #000;

  font-weight: 600;

}

.gallery-grid {

  padding: 0;

}

.gallery1 {

position:relative;

}

.gallery1 .textbox {

width:100%;

height:100%;

position:absolute;

top:0;

left:0;

-webkit-transform: scale(0);

transform: scale(0);

border-radius:0px;

background-color: rgba(158, 51, 51, 0.45);

-webkit-box-shadow: 0px 0px 15px 2px rgba(255,255,255,.75);

box-shadow: 0px 0px 15px 2px rgba(255,255,255,.75);

}

.gallery1:hover .textbox {

-webkit-transform: scale(1);

transform: scale(1);

}

.textbox img {

  padding-top: 8em;

  color: #fff;

  margin: 0 auto;

}

.textbox {

-webkit-transition: all 0.7s ease;

transition: all 0.7s ease;

}






 /*-- responsive-mediaquries --*/



@media(max-width:1440px){



.gallery1 .textbox {

  width: 352px;

  height: 264px;

 }

}

@media(max-width:1366px){



.gallery1 .textbox {

  width: 100%;

  height: 100%;

}

.textbox img {

  padding-top: 7em;

}

}

@media (max-width: 1280px){



.gallery1 .textbox {

  width:100%;

  height: 100%;

}

}

@media (max-width: 1024px){



 .gallery-section h3 {

  font-size: 2em;

 }

 .gallery1 .textbox {

  width: 100%;

  height: 100%;

}

.textbox img {

  padding-top: 5em;

}



}

@media (max-width: 768px){



 .gallery-section {

  text-align: center;

  padding: 3em 0 0;

}

.gallery-section h3 {

  font-size: 1.6em;

}

.gallery-grid {

  float: left;

  width: 25%;

}

.gallery1 .textbox {

  width: 100%;

  height: 100%;

}

.textbox img {

  padding-top: 3em;

}



}

@media (max-width: 640px){



.gallery-section h3 {

  font-size: 1.4em;

  margin-bottom: 1em;

}

.gallery-section {

  text-align: center;

  padding: 2em 0 0;

}

.gallery1 .textbox {

  width: 100%;

  height: 100%;

}

.textbox img {

  padding-top: 2.7em;

  width: 26%;

}



}

@media (max-width: 480px){



.gallery-section h3 {

  font-size: 1.2em;

 }

 .gallery-grid {

  float: left;

  width: 50%;

}

.gallery1 .textbox {

  width: 100%;

  height: 100%;

}

.textbox img {

  padding-top: 5em;

  width: 20%;

}

 

}

@media (max-width: 320px){



.textbox img {

  padding-top: 3em;

  width: 20%;

}

.gallery-section h3 {

  font-size: 1.1em;

}



}


.top_bar {
    position: absolute;
    z-index: 999;
    left: 0;
    right: 0;
    top: 10px;
}