@import url('https://fonts.googleapis.com/css?family=Oswald:200,300,400,500,600,700');
@import url('https://fonts.googleapis.com/css?family=Raleway:200,300,400,500,600,700,800');
@import url('https://fonts.googleapis.com/css?family=Electrolize');
@import url('https://fonts.googleapis.com/css?family=Coda:400,800|Michroma|PT+Sans:400,400i,700,700i|Squada+One');
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700');
* {
   margin: 0;
   /*font-family: 'Raleway', sans-serif;
    font-family: 'Electrolize', sans-serif;
    font-family: 'PT Sans', sans-serif;*/
    font-family: 'Roboto', sans-serif;
}
p {
   line-height: 1.5;
   font-weight: 400;
}
/* Header Style */
.main_menu ul li:nth-child(1) a{
   padding-bottom: 15px;
   border-bottom: 2px solid #005386;
}
.banner{
   background: url(../images/innerpage/works-banner.jpg);
}
/* Works Style */
.works_div{
   width: 90%;
   margin: auto;
   padding: 50px 0;
}
.heading {
   text-align: center;
   margin-bottom: 20px;
   font-family: 'Oswald', sans-serif;
   color: #005386;
   font-weight: 400;
   font-size: 2.5em;
}
.work_sec{
   width: 90%;
   margin: auto;
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
}
.works{
   width: 45%;
   position: relative;
   margin-top: 50px;
}
.works img{
   width: 100%;
   height: 100%;
}
.wrk_details{
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   width: 98%;
   height: 97%;
   margin: auto;
   background-color: rgba(0,83,134,.7);
   border: 6px solid #3669ba;
   color: #fff;
   text-align: center;
   opacity: 1;
   transition: all 0.3s ease-in-out 0s;
}
.works:hover .wrk_details{
  opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transition: transform 1s ease, opacity 1.3s ease;
    transition: transform 1s ease, opacity 1.3s ease;
}
.wrk_details p:nth-child(1){
   margin: auto;
   display: block;
   margin-top: 27%;
   font-weight: 500;
   font-size: 1.5em;
   text-transform: uppercase;
}
/* Media Query */
@media only screen and (max-width: 960px){
   
}
@media only screen and (max-width: 768px){
   .work_sec{
      display: block;
   }
   .works{
      width: 100%;
      margin: auto;
      display: block;
      margin-top: 30px;
   }
}
@media only screen and (max-width: 500px){
   
}