@font-face {
  font-family: "OpenSans-ExtraBold";
  src: url("fonts/OpenSans-ExtraBold.ttf") format("truetype");
}
body {
    font-family: 'open sans';
}
header {
    background: #000;
    text-align: center;
    padding: 30px 0;
}
.uper-section {
    height: calc(100vh - 0px);
  position:relative;
  overflow: hidden;

}
.menu {
  bottom: 0;
  position: absolute;
  width: 100%;
  z-index: 99999;
}
#header .header-contact {
      padding: 0;
      margin-top: 5%;
      text-align: left;
}
.mapsection .header-contact {
  margin-bottom: 20px;
  padding: 0;
  text-align: left;
}
#header .header-operation {
   padding: 0;
     margin-top: 5%;
     text-align: right;
}
.mapsection .header-operation {
   padding: 0;
     margin-bottom: 5%;
     text-align: right;
}
.header-contact > h1, .header-operation h1 {
  color: #ef4036;
  font-family: OpenSans-ExtraBold;
  margin-bottom: 0;
  text-transform: uppercase;
}
.header-contact > a, .header-operation span {
  color: #ffffff;
  font-size: 2em;
  text-decoration: none;
  font-family: OpenSans-ExtraBold;
}
.logo {
    display: inline-block;
}

.logo img {
  height: auto;
  width: 100%;
}

.redbar {
    /*background: #ef4036; */
    padding: 10px 0;
    text-align: center;
    text-transform: uppercase;
    vertical-align: middle;
    height: 50px;
    box-sizing: border-box;
    position: absolute;
    width: 100%;
    bottom: 75px;
    left: 0;
    right: 0;
}
.redbar.phone {
   bottom: 100px;
}
.redbar.address {
    height:auto;
}
.redbar a {
    text-decoration:none;
}
.redbar.phone a {
    cursor: text;
}
.redbar .black {
    font-size: 28px;
    color: #000;
    font-weight: bold;
    line-height: 28px;
    vertical-align: middle;
}
.redbar .small {
    font-size: 16px;
    color: #fff;
    font-weight: bold;
    line-height: 28px;
    vertical-align: middle;
}
.redbar .white {
    font-size: 24px;
    color: #fff;
    font-weight: bold;
    line-height: 24px;
    vertical-align: middle;
}

.call-us-mob, .directions-mob { display: none; }   /* hide it elsewhere */

.call-us-mob{
    font-size: 28px;
    color: #000;
    font-weight: bold;
    line-height: 28px;
    text-align: center;
    width:100%;
    vertical-align: middle;
    background: none;
    margin-top: 53vh;
}
.call-us-mob button { border: none; border-radius: 25px;  background-color: #fb432c; padding:12px;  }
.call-us-mob .red {color: #f33d2f; text-transform: uppercase; }
.call-us-mob .white{  color: #ffffff; text-transform: uppercase; font-size: 40px; padding: 15px 15px 15px 15px; }
#mobile-call-now::before{ background-image:url(/img/call_icon.png); content:''; width: 40px; height: 40px; display: inline-block; background-repeat: no-repeat; padding-left: 13px;}

.mainnav {
    background: #404040;
    width: 100%;
}
.mainnav ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: center;
}
.mainnav li {
    display: inline-block
}
.mainnav li a {
    text-decoration: none;
    color: #fff;
    text-transform: uppercase;
    font-size: 20px;
    font-weight: 800;
    padding: 0px 25px;
    display: block;
    height: 50px;
    box-sizing: border-box;
    line-height: 50px;
}

.mainnav li a#logo{
    display:inline;
}

.mainnav li a:hover {
    color: #ef4036;
}
.mainnav li img {
  height: auto;
  width: 250px;
  margin: 10px 0;
}


.menu.fixed {
  float: left;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  max-height: 152px;
}
.hide-logo {
  display: none!important;
}
.hide-logo.Showlogo {
  display: inline-block!important;
}

.slider {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
#slider .flex-control-nav {
  bottom: 50px;
}
#slider .flexslider {
  border: medium none;
  margin-bottom: 0;
  position: static;
}
.slider img {
    width:100%;
}
.toparea {
    padding: 25px 0 0;
    text-align: center;
}
h2 {
    font-size: 34px;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 60px;
    text-transform: uppercase;
    margin-top: 20px;
}
.toparea p {
    font-size: 23px;
    line-height: 1.3;
    margin-bottom: 30px;
}
.container {
    max-width: 1200px;
    margin: 0 auto;
}
.blackarea {
    background: #000;
    color: #fff;
    padding: 60px 0;
    text-align: center;
    z-index: 1;
}
.toparea p {
    max-width: 1000px;
    margin: 0 auto 30px;
}
.toparea p.padding-about {
  margin-bottom: 60px;
}
.blackarea .sides {
    max-width: 750px;
    margin: 0 auto;
}
.sides {
    overflow: hidden;
}
.blackarea ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.blackarea ul li {
    font-size: 21px;
    text-align: left;
    padding-left: 20px;
    position: relative;
    margin-bottom: 10px;
    letter-spacing: -0.5px
}
.blackarea ul li:before {
    content: "";
    width: 9px;
    height: 9px;
    background: #EF4036;
    position: absolute;
    top: 10px;
    left: 0
}
.maparea {
    text-align: center;
    margin-top: -300px;
    color: #fff;
    padding-bottom: 80px;
    padding-top: 60px;
    z-index: 2;
}
.mapcontainer {
    height: 440px;
    /* background-image: url('../img/mapdesk.jpg'); */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}
footer {
  background: #ffffff none repeat scroll 0 0;
  color: #000000;
  float: left;
  font-size: 18px;
  font-weight: bold;
  padding: 40px 0 40px;
  width: 100%;
}
#footer .container.sides {
  max-width: 850px;
}
#footer .left {
  float: left;
}
#footer .right {
  float: right;
}
.details {
    margin-bottom: 15px;
}
footer span {
    color: #EF4036;
}
footer .right {
    text-align: right;
}
footer .right img {
    display: inline-block;
    margin-left: 30px;
}
.smalld {
  font-size: 12px;
  text-transform: uppercase;
}
.overlay {
    background: transparent;
    position: absolute;
    width: 100%;
    height: 440px;
    /* your iframe height */
    top: 440px;
    /* your iframe height */
    margin-top: -440px;
    /* your iframe height */
}
/*............................client-area......................................*/
#client-logo {
  clear: both;
  max-width: 750px;
}
.client-section {
    padding: 15px 0;
  float: left;
  width: 100%;
  text-align: center;
}
#client-logo img {
    display: inline-block;
}
/*............................contact-area......................................*/

#contact {
  float: left;
  width: 100%;
}
.google-map-section {
  padding: 0;
  background: url(../img/gungahlin-auto-map.jpg);
  background-size: cover;
  height: 450px;
  background-position: top center;
}
.google-map-section a{
      left: 50%;
    position: absolute;
    top: 60%;
    color: white;
    background: #f04136;
    padding: 1rem 3rem;
    font-weight: 700;
    transform: translate(-50%,-50%);
    font-size: 18px;
    text-align: center;
}
.google-map-section a:hover{
  text-decoration: none;
  color:#f04136;
  background:#fff;
}
.mapsection {
  background: #000000 none repeat scroll 0 0;
  float: left;
  width: 100%;
}
#googleMap {
    height: 300px;
}
.address-section .header-contact, .address-section .header-operation {
  float: left;
  text-align: center;
  width: 100%;
}
/*............................parallex-area......................................*/

.parallax-window {
  padding-bottom: 40%;
  background: transparent;
}
.parallax-window1 {
  padding-bottom: 40%;
  background: transparent;
}
/*.....................................footer-slider-section..........................*/

#slider_footer {
  float: left;
  position: relative;
  width: 100%;
}
#slider_footer .flexslider-1 {
  position: relative;
}
#slider_footer .flex-control-nav {
  bottom: -5px;

}

/*........................bottom-slider.............................*/
#slider_footer .flex-direction-nav .flex-prev {
  left: 15px;
  opacity: 1;
}
#slider_footer .flex-direction-nav .flex-next {
  right: 15px;
  opacity: 1;
}
#slider_footer .flex-next {
  background: rgba(0, 0, 0, 0) url("../img/slider-right-arrow.png") no-repeat scroll 0 0 / contain ;
  height: 54px;
  width: 54px;
  padding-left: 53px;
}
#slider_footer .flex-prev {
  background: rgba(0, 0, 0, 0) url("../img/slider-left-arrow.png") no-repeat scroll 0 0 / contain ;
  height: 54px;
  width: 54px;
  padding-left: 53px;
}



.flex-control-paging li a.flex-active {
  background: #ffffff!important;
}
.flex-control-paging li a {
  border: 2px solid #ffffff;
}
    #slider_footer .slider-main > img {
        min-width: 100%;
    }
    .slides .slider-main {
        overflow:hidden;
    }
    .flexslider .slides img {
        position:relative;
        left:50%;
        transform:translateX(-50%)
    }
@media screen and (min-width: 768px) {

    .flexslider .slides img {
        display: block;
        height: 100vh;
        margin-top: -200px;
        padding-top: 200px;
        width: auto;
        position:relative;
        left:50%;
        transform:translateX(-50%)
    }

    .flexslider-1 .slides img{
        position:relative;
        left:50%;
        transform:translateX(-50%)
    }
}
/************************************responsive query*************************************************/
/*
@media screen and (min-device-width: 768px) and (max-device-width: 1824px) and (orientation : landscape){
  .flexslider .slides img {
  display: block;
  width: 127%;
}
  }
  @media screen and (min-device-width: 768px) and (max-device-width: 1824px) and (orientation : portrait){
 .flexslider .slides img {
  display: block;
  width: 320%;
}
 }*/
@media screen  and (min-width: 992px) {
.right > img {
  height: 105px!important;
}
}
@media screen  and (min-width: 1400px)  {
.blackarea ul li {
  font-size: 19px;
}
.blackarea .sides {
  max-width: 800px;
}
.mapsection .address-section {
  margin-top: 90px;
}
}
@media screen  and (min-width: 992px)  and (max-width: 1400px) {
.right > img {
  height: 105px !important;
}
.blackarea ul li {
  font-size: 17px;
}
.blackarea .sides {
  max-width: 800px;
}
}
@media screen  and (min-width: 768px) {
.header-contact.mobile-show {
   display: none;
}
.slider-mobile-title {
    display: none;
}
#mobile-icon {
  display: none;
}
}
@media screen  and (min-width: 992px) and (max-width: 1400px) {
.mapsection .address-section {
  margin-top: 90px;
}
}


@media screen  and (max-width: 991px) {
    #googleMap {
  height: 300px !important;
}
.sides ul li {
    padding: 0;
    text-align: center;
}
.blackarea ul li::before {
    background: none;
}

    }
@media screen  and (max-width: 767px) {
  .mean-container .mean-nav {
  background: #404040 none repeat scroll 0 0!important;
}
    .header-operation {
  margin-top: 15px;
}
   .header-contact.mobile-hide  {
        display: none;
    }
    .hide-logo {
        display: none;
    }
    header {
 clear: both;
}
#header .header-contact, #header .header-operation {
  text-align: center;
}
#slider .flex-control-nav {
  bottom: 0;
}
.sides ul li {
    padding: 0;
    text-align: center;
}
.blackarea ul li::before {
    background: none;
}
#footer .right {
  display: none;
}
#footer .left {
  display: inline-block;
  float: none;
}
#footer .container.sides {
  text-align: center;
}
.address-section {
  float: left;
  padding: 40px 0;
  width: 100%;
}
.mapsection .header-contact, .mapsection .header-operation {
    margin-top: 0;
}
.slider-mobile-title {
  clear: both;
  font-size: 26px;
  font-family: OpenSans-ExtraBold;
  padding: 10px 0;
  text-align: center;
  text-transform: uppercase;
  color: #000;
}
header {
  padding: 30px 0 60px;
}
.uper-section {
  height: auto;
  overflow: visible;
  position: static!important;
}
.flexslider .slides img {
  height: 300px !important;
  margin-top: 0;
  padding-top: 0;
  width: auto;
}
#slider .flexslider {
  position: relative;
}
#mobile-icon {
  height: 50px;
  padding: 10px;
  position: absolute;
  right: 5px;
  top: 6px;
  width: 53px;
  z-index: 99999999;
}
#mobile-icon img {
  width: 32px;
}
.meanmenu-reveal {
  left: 0!important;
  right: auto !important;
}
.mean-container a.meanmenu-reveal {
  width: 34px!important;
  height: 34px!important;
}
.mean-container a.meanmenu-reveal span {
  height: 6px!important;
  margin-top: 5px!important;
}
.mean-container .mean-bar {
  background: #000000 none repeat scroll 0 0!important;
}
.mean-container .mean-bar {
  min-height: 53px!important;
}
.mean-container .mean-nav {
  margin-top: 53px!important;
}
.mapsection .header-contact {
  margin-bottom: 0;
}
.flexslider-1 ol {
  display: none !important;
}


}
@media screen and (min-width: 992px) and (max-width: 1199px) {
.header-contact > a, .header-operation span {
  font-size: 26px;
}
.header-contact > h1, .header-operation h1 {
  font-size: 26px;
}


}
@media screen and (min-width: 768px) and (max-width: 991px) {

.header-contact > a, .header-operation span {
  font-size: 20px;
}
.header-contact > h1, .header-operation h1 {
  font-size: 20px;
}
.mainnav li a {
  font-size: 18px;
}
.mainnav li img {
  width: 150px;
}
#footer .right > img {
  height: 90px;
  margin-left: 22px !important;
}
.header-contact {
      margin-top: 57px;
}

}


@media screen  and (max-width: 600px) {

.header-contact > a, .header-operation span {
  font-size: 20px;
}
.header-contact > h1, .header-operation h1 {
  font-size: 20px;
}
#slider_footer .slider-main > img {
  /* width: 200%;*/
}
.flexslider .slides img {
  height: 280px !important;
}

}
@media screen  and (max-width: 500px) {
.flexslider .slides img {
  height: 260px !important;
}

}

@media screen  and (max-width: 400px) {
.flexslider .slides img {
  height: 230px !important;
}

}
@media screen  and (max-width: 340px) {
.flexslider .slides img {
  height: 200px !important;
}

}

@media screen  and (max-height: 480px) {
#slider_footer .slider-main > img {

 max-height: 310px !important;
}
.flexslider .slides img {

}
}

@media screen and (min-height: 481px) and (max-height: 720px) {
#slider_footer .slider-main > img {

max-height: 310px !important;
}
.flexslider .slides img {
max-height: 710px !important;
}
}

@media screen and (min-height: 721px) and (max-height: 768px) {
#slider_footer .slider-main > img {

max-height: 550px !important;
}

}

@media screen and (min-height: 769px) and (max-height: 800px) {
#slider_footer .slider-main > img {
max-height: 600px !important;
}

}
@media screen and (min-height: 801px) and (max-height: 960px) {
#slider_footer .slider-main > img {

max-height: 600px !important;
}
.flexslider .slides img {
}
}


@media screen and (min-height: 961px) and (max-height: 1200px) {
#slider_footer .slider-main > img {

max-height: 700px !important;
}
.flexslider .slides img {
}
}
@media screen and (min-height: 1201px) and (max-height: 1280px) {
#slider_footer .slider-main > img {

max-height: 1200px !important;
}
.flexslider .slides img {
}
}
@media screen and (min-height: 1281px) and (max-height: 1920px) {
#slider_footer .slider-main > img {

max-height: 1200px !important;
}
.flexslider .slides img {
}
}
@media screen and (max-width: 767px){

.flexslider .slides img{
    max-height:40vw !important;
}
}
#slider_footer .slider-main > img{
    max-height:40vw !important;
}