#header{padding-bottom: 15px;}
#contact-banner{background: url(../images/clients.jpg) center top no-repeat; height: 420px; position: relative; background-size: cover;}

@keyframes move {
  25% {
    opacity: 1;

  }
  33% {
    opacity: 1;
    transform: translateY(30px);
  }
  67% {
    opacity: 1;
    transform: translateY(40px);
  }
  100% {
    opacity: 0;
    transform: translateY(55px) scale3d(0.5, 0.5, 0.5);
  }
}



@keyframes pulse {
  to {
    opacity: 1;
  }
}



#contact-banner .container-fluid{width: 80%;}
#contact-banner h2{color: white!important; margin-top: 180px; font-weight: 400; font-size: 2.5em; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 2px solid #00a94f; display: inline-block;}
#contact-banner p{color: #fff !important;width: 60%;line-height: 30px; font-size: 14px;border-bottom: 2px solid #00a94f;line-height: 1.4!important; padding-bottom: 10px;}
#contact-banner p:after { content: ""; position: absolute; top: 223px; left: 59%; width: 20px; height: 20px; background: #fff; right: 0px; border-radius: 50px;}
#content{padding-top: 60px; padding-bottom: 60px;}
#content .text{padding-bottom: 40px; text-align: center;}
#content .text h2{margin-top: 0px; color: #00a94f; font-size: 35px;}
#content .text span{font-weight: 300;}
#content .container-fluid{width: 80%;}
#content .flip-box .margin-bot {margin-bottom: 10px;}

/****** Flip effects *******/
#content .flip-box .flip-container {-webkit-perspective: 1000; -moz-perspective: 1000; -ms-perspective: 1000; perspective: 1000; -ms-transform: perspective(1000px); -moz-transform: perspective(1000px); -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d;}
#content .flip-box .flip-container, .front, .back {width: 100%;}
#content .flip-box .flip-container:hover .back{filter: grayscale(100%);}
#content .flip-box .flip-box {height: 150px; border-radius: 5px 5px 5px 5px; overflow: hidden; box-shadow: 0px 7px 15px -6px rgb(0 0 0 / 19%); transition: transform 0.6s ease-in-out;    -webkit-transition: transform .6s ease-in-out; -o-transition: transform .6s ease-in-out; -webkit-transition: -webkit-transform .6s ease-in-out; transition: -webkit-transform .6s ease-in-out; transition: transform .6s ease-in-out; transition: transform .6s ease-in-out,-webkit-transform .6s ease-in-out; -webkit-transform-style: preserve-3d; transform-style: preserve-3d;}
#content .flip-box .flip-box-big {height: 180px;}
#content .flip-box .flip-box-mid {height: 140px;}
#content .flip-box .front, #content .flip-box .back { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: 0.6s; -webkit-transform-style: preserve-3d; -webkit-transform: rotateY(0deg); -moz-transition: 0.6s; -moz-transform-style: preserve-3d; -moz-transform: rotateY(0deg); -o-transition: 0.6s; -o-transform-style: preserve-3d;  -o-transform: rotateY(0deg);-ms-transition: 0.6s; -ms-transform-style: preserve-3d; -ms-transform: rotateY(0deg); transition: 0.6s; transform-style: preserve-3d; transform: rotateY(0deg); position: absolute; top: 0; left: 0;}
#content .flip-box .front {-webkit-transform: rotateY(0deg);-ms-transform: rotateY(0deg);z-index: 2;}
#content .flip-box .back {background: #fafafa; -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); -o-transform: rotateY(-180deg); -ms-transform: rotateY(-180deg); transform: rotateY(-180deg); }
#content .flip-box .back p {left: 0; right: 0; text-align: center; line-height: 150px !important; font-size: 21px; color: #252525; margin: 0 auto;}

/* Vertical flip effect */
#content .flip-box .vertical.flip-container {position: relative;}
#content .flip-box .vertical .back {-webkit-transform: rotateX(180deg); -moz-transform: rotateX(180deg); -ms-transform: rotateX(180deg); transform: rotateX(180deg); height: 150px;}
#content .flip-box .vertical.flip-container .flipper {-webkit-transform-origin: 100% 213.5px; -moz-transform-origin: 100% 213.5px; -ms-transform-origin: 100% 213.5px; transform-origin: 100% 213.5px;}
#content .flip-box .vertical.flip-container:hover .back, .vertical.flip-container.hover .back { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -o-transform: rotateX(0deg); -ms-transform: rotateX(0deg); transform: rotateX(0deg);}
#content .flip-box .vertical.flip-container:hover .front, .vertical.flip-container.hover .front {-webkit-transform: rotateX(180deg); -moz-transform: rotateX(180deg);-o-transform: rotateX(180deg); transform: rotateX(180deg);}

#content .man {top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); position: absolute; margin-top: 0px;}

.bl {background: #04529d;}
#content a {font-size: 18px; color: #fff;}










@media only screen and (min-width : 1920px) and (max-width : 2560px){
#content .flip-box .flip-box { height: 160px;}

}
@media only screen and (min-width : 1600px) and (max-width : 1919px){

#content .flip-box .flip-box {height: 160px;}


}
@media only screen and (min-width : 1440px) and (max-width : 1599px){
#contact-banner h2{font-size: 2em; margin-bottom: 10px;}
#content .flip-box .flip-box {height: 160px;}


}   
@media only screen and (min-width : 1366px) and (max-width : 1439px){
#contact-banner h2{font-size: 2em; margin-bottom: 10px;}
#content .flip-box .flip-box {height: 140px;}


}
@media only screen and (min-width : 1280px) and (max-width : 1365px){
#contact-banner h2{font-size: 1.8em; margin-bottom: 10px;}
#content .flip-box .flip-box {height: 130px;}


}
@media only screen and (min-width : 1200px) and (max-width : 1279px){
#contact-banner h2{font-size: 1.8em; margin-bottom: 10px;}
#content .flip-box .flip-box {height: 130px;}

   
}
@media only screen and (min-width : 1024px) and (max-width : 1199px){
#contact-banner h2{font-size: 1.8em; margin-bottom: 10px;}
#content .flip-box .flip-box { height: 110px;}


}
@media only screen and (min-width : 768px) and (max-width :1023px){
#contact-banner h2{font-size: 1.8em; margin-bottom: 10px;}
#content .flip-box .flip-box {height: 110px;}
#content a {font-size: 16px;}

}
@media only screen and (min-width : 150px) and (max-width : 767px){
#content .flip-box .flip-box {height: 90px;}
#header {padding-bottom: 0px;}
#contact-banner .container-fluid {width: 80%;}
#contact-banner h2 {margin-top: 160px; margin-bottom: 10px; font-size: 1.8em;}
#contact-banner {background: url(../images/mb-banner/clients.jpg) center top no-repeat; height: 350px;}
#contact-banner h2 {border: none;}
#content .man {font-size: 12px;}
#content h5 {line-height: 25px; margin-top: 20px;}
.burger {right: 20px;}
.burger__patty {width: 12px; height: 30px;}


}
@media only screen and (max-width : 375px){



}  
@media only screen and (max-width : 320px){ 

}