body,h1, h2, h3, h4, h5, h6, p{font-family:"Khula",Helvetica Neue,Helvetica,Roboto,Arial,sans-serif;}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6{font-weight: 700}
button:focus, select:focus, input:focus {outline:none;}
ul,li{list-style:none;padding:0;margin:0}

/*general*/
.red{background-color:#cb1517;color:#ffffff}
.red-col{color:#cb1517}
.black{background-color:#313130}
h2{margin-bottom:20px;letter-spacing:1px}
h2 span{color:#cb1517; display:inline-block;}
h2 span:after {height:4px; display:inline-block; width:40px; margin-left:10px; background:#cb1517; content: '';}
.container{padding-top:30px; padding-bottom:30px}

/*animated*/
.animated{animation-duration: 1s;animation-fill-mode: both;}
.animated.infinite{animation-iteration-count: infinite;}
@keyframes fadeInLeft{ from{opacity:0;transform:translate3d(-100%,0,0);} to{opacity:1;transform:none;} }
.fadeInLeft {animation-name:fadeInLeft;}
@keyframes fadeInUp{ from {opacity:0; transform:translate3d(0,100%,0);} to{opacity:1; transform:none;} }
.fadeInUp{animation-name:fadeInUp;}

/*navbar*/
.anim,a,a:after,a:visited:after{-webkit-transition:all .4s linear;-moz-transition:all .4s linear;-o-transition:all .4s linear;-ms-transition:all .4s linear;transition:all .4s linear}
.bg-light {background-color: #f8f9fa!important;}
.navbar-light .navbar-nav .nav-link {font-family:"Khula",Helvetica Neue,Helvetica,Roboto,Arial,sans-serif; text-transform: uppercase; padding-right: .7rem; padding-left: .7rem; color:#313130; text-align:center; font-size:12px }
.navbar-light .navbar-nav .nav-link.active{color:#cb1517;}
.navbar-light .navbar-nav .nav-link:hover{color:#cb1517;}
nav .active{color:#cb1517; font-weight:700;}
.carousel-indicators .active{background-color:#cb1517;}
.navbar-light .navbar-toggler {color:#cb1517; border:none;}
.navbar-light .navbar-toggler:hover {color:#313130; cursor:pointer;}
.navbar-nav a, .navbar-nav a:visited { text-decoration: none; position: relative; color: #cb1517; }
.navbar-nav a:after, .navbar-nav a:visited:after, .navbar-nav .active:after { content: ''; height:3px; position:absolute; bottom:0; left:0; width:0%; background:#cb1517;}
.navbar-nav a:hover:after, .navbar-nav a:visited:hover:after, .navbar-nav .active:after{width: 100%;}

/*carousel*/
.carousel-inner, .carousel-item {max-height:1650px}
.carousel-caption { top: 50%; transform: translateY(-50%); bottom: initial; max-width: 320px; margin: 0 auto; text-align: left; text-transform: uppercase;}
.carousel-caption h1{background:rgba(255,255,255,0.25); padding: 20px 20px; text-align: left; font-size:26px; letter-spacing:2px; line-height:26px }
.carousel-control-next, .carousel-control-prev {width:5%}

/*home*/
#home {padding-top:58px;}

/*about*/
#about .red{padding:40px 25px}
.about-img{background-image:url(../img/about.jpg); background-position:center; background-size:cover; min-height:200px}

/*services*/
#services {background-color:#f3f3f3;}
.sv-img{background:#e7e8e8; width:140px; height:140px; border-radius:100%; display:block; margin: 0 auto; margin-bottom: 20px}

/*locate*/
#map{height:100%; min-height: 400px;}
.map-area{padding:0}

#direction{position:absolute; display:block; top:10px; left:50%; margin-left:-134px; z-index:5; padding:6px 8px; text-align:center; background-color:#fff; box-shadow:rgba(0,0,0,.3) 0 1px 4px -1px; border-radius:2px; font-size:12px; line-height:12px}
input[type=text] {
    /* Remove First */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    /* Then Style */
    border-radius: 5px;
    border: 1px solid #BBB;
    padding: 2px 5px;
    line-height: 20px;
    background: transparent;
    outline: none;
}
input[type='text']::-webkit-input-placeholder {color:#dadada;}

#locate-info{padding:60px 30px;}
#locate-info h2 span:after {background: #313130;}
#sep{ display:block; margin-bottom:1rem;}
.notice{color:#313130}

/*contact*/
.c-info{font-size:16px; background-color:#313130; color:#ffffff; text-decoration:none;}
.c-info h5{color:#ffffff}
.c-info b{color:#5a5a59}
.c-info p{color:#a2a2a2}
.c-info a{color:#a2a2a2}
.c-info .c-info-links a:hover{color:#cb1517;margin-left:5px; text-decoration:none}
.c-info h5 span{font-size:16px;color:#5a5a59; margin-right:10px }
.c-info-links {margin-bottom:25px}
.c-info-links-app li{margin-bottom:10px }
#app-icon{width:18px;height:18px}
.c-info hr{border-top: 2px solid #353534}


/*footer*/
footer {font-size:12px;line-height:12px; padding:8px}
.credit, .credit a{color:#d2d2d2; font-size:10px; line-height:10px}
.credit a:hover{color:#cb1517; text-decoration:none;}

/*Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {
  .container {max-width:560px;}
  .c-info {font-size:14px }
 }

/*Medium devices (tablets, 768px and up)*/
@media (min-width:768px) {
  .container{max-width:720px; padding-top:60px; padding-bottom:60px}
  /*#about .red {padding: 30px 15px;}*/
  .carousel-inner, .carousel-item {max-height:650px}
  .carousel-caption h1{font-size:52px; letter-spacing:2px; line-height:50px }
  .carousel-caption {max-width: 580px;}
  .c-info-links {margin-bottom:0}
  .c-info h5{font-size:90%}
}

/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
  .container {max-width: 960px;}
  .c-info h5{font-size:20px}
   /*#about .red {padding: 25px 15px; }*/
}

/*Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
  .container {max-width: 1140px;}
  .about-img{min-height:400px}
  #about .lead{font-size:140%}
  #about p{font-size:120%}
  /*#about .red {padding: 60px 15px;}*/
}