@font-face {
    font-family: 'CenturyGothic';
    src: url('../fonts/CenturyGothic.eot?#iefix') format('embedded-opentype'),  url('../fonts/CenturyGothic.woff') format('woff'), url('../fonts/CenturyGothic.ttf')  format('truetype'), url('../fonts/CenturyGothic.svg#CenturyGothic') format('svg');
    font-weight: normal;
    font-style: normal;
  }
  @media(min-width:1200px){
      .container{width: 1200px;}
  }
   .banner-container h2{position: absolute; text-align: center; font-size:20px; color:#ffffff; text-shadow: 1px 1px 2px #000000; width: 640px; font-family: 'CenturyGothic'; bottom:25px; left:0px; width:90%; padding: 0px 5%;}
  .banner-container.sub-banner h2{bottom: 0px;}
  .banner-text-area h1, .sub-left-area h2, .banner-text-area h2, .welcome-area h2, .machine-area h2, .news-publication-area h2, .news-area h2, .top-heading p{ padding: 0px; margin: 0px;}
  .right-nav ul{list-style-type: none; margin: 0px; padding: 0px;}
  body{padding: 0px; margin: 0px; font-family: 'verdana'; font-size: 14px; color: #2e2e2e; background: url('../images/body-bg.jpg') repeat-x;}
  .right-nav li{ display: inline-block;}
  header{ width: 100%; left: 0px; background: rgba(255,255,255, 0.85);  padding-top: 14px; font-family: 'CenturyGothic'; color:#000e43; font-size: 15px; z-index: 50;}
  .navbar-brand{height:auto; float:left; padding:0px;}
  .right-area{ float: right; text-align: right; width: 676px;}
  .social-media{ display: none; text-align: right;}
  .social-media a{display: inline-block; margin-left:3px;}
  .navbar-default{background: none; border:0px;}
  .navbar{ margin-bottom: 0px; border-radius: 0px;}
  .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>li>a:hover{color:#ffffff;}
  .phone-number{ padding-top:0px; color:#353535; font-size:24px; float: right;}
  header .navbar-default .navbar-nav>.active>a, header .navbar-default .navbar-nav>.active>a:focus{ background: #212f3d;}
  header .navbar-nav>li>a{ padding:0px;  }

  .navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover{ background: #cc0400;}
  .navbar-default .navbar-toggle{background: #cc0400;}
  .navbar-default .navbar-toggle .icon-bar{ background: #ffffff;}
   header .navbar-collapse{ padding: 0px;}
  .banner-text-area{ background: #0f182f; color:#ffffff; font-size: 14px;}
  .banner-text-area h1{ font-size:20px; padding-bottom: 10px; color: #ffffff; font-family: 'CenturyGothic';}
  .banner-text-area h2{ font-size: 14px; padding-bottom: 10px;}
  .banner .item{ position: relative; width: 100%;}
  .carousel-control{ width: 4%;}

  .carousel{ margin-top: 1px; border-bottom: 15px solid #cc0400; padding-bottom: 1px;}
  .box-container{ padding:35px 38px 35px 38px;}

  .box-container .box-content{
      border: 1px solid #31363f;
      border-radius:5px;
      height: 275px;
      background:#FFFFFF url('../images/request-quote.png') no-repeat center center;
      transition: background 1s linear;
  }
  .box-container .box-content:hover{
       background: #a60000 url('../images/request-quote-hover.png') no-repeat center center;
  }
  .box-container .box-content.paving-service{
    background:#FFFFFF url('../images/paving-service.png') no-repeat center center;   
  }
  .box-container .box-content.paving-service:hover{
    background:#a60000 url('../images/paving-service-hover.png') no-repeat center center;   
  }
  .box-container .box-content.our-guarantee{
    background:#FFFFFF url('../images/our-guarantee.png') no-repeat center center;   
  }
  .box-container .box-content.our-guarantee:hover{
    background:#a60000 url('../images/our-guarantee-hover.png') no-repeat center center;   
  }
  .box-container .box-content a{ display: block; height: 100%; font-size: 0px;}


  .box-container .box:first-child{margin-left:0px;}
  .box-container .box h2{color:#a60000; text-align: center; font-size: 28px; font-family: 'CenturyGothic'; margin: 0px; padding-top: 5px;}
  .box-container p, .top-heading p{font-size: 21px; color: #404042; font-style: italic; padding-top: 60px;}
  .content p{ margin-bottom: 18px;}
  .top-heading p{ padding-top:30px; padding-bottom: 30px;}
  .clear{clear:both;}
  .footer-logo{margin-top:35px; background: #cccccc; padding: 25px 0px; text-align: center;}
  .footer-logo a{ display: inline-block; margin-left: 20px;}
  footer{background:#192531; padding: 22px 0px; color: #ffffff;}
  footer p{ margin-bottom: 0px;}
  footer p a{ color: #ffffff;}
  footer p a:hover{color: #f9f7f9;}
  footer h3{font-size: 30px; font-weight: bold;  font-family: 'CenturyGothic'; margin: 0px;}
  footer .superior{font-size:12px;}
  .footer-bottom{ padding-top:30px;}
  .copy-right{ padding-top: 20px; font-size: 12px;}
  .right-nav a{color:#414141;}
  .right-content{ padding-top: 30px;}
  .contact-area{ border: 1px solid #000000; padding: 10px;}
  .contact-area label{ display: block; font-weight: normal; color:#000;}
  .contact-area .form-control{ border-radius: 0px; border: 1px solid #a9a9a9; height: 28px; color: #000;}
  .contact-area select.form-control{ padding: 0px;}
  .contact-area textarea.form-control{ height:40px;}
  .contact-area .form-group{ margin-bottom: 5px;}
  .captcha-area{ margin-top:16px; border: 1px solid #d8d8d8; border-radius:1px; padding: 10px; padding-bottom: 0px;}
  .captcha-area .robot{ float: left;}
  .checkbox {
  	display: inline-block;
  	cursor: pointer;
  	font-size: 12px; margin-right:10px; line-height:18px;
  }
  .captcha-area .captcha-right{ float: right; width: 70px; text-align: center;}
  .captcha-right p{ color: #9b9b9b; font-size: 10px;}
  .captcha-right p a{ font-size:8px; color: #9b9b9b;}
  input[type=checkbox] {
   display:none;	
  }
  .checkbox:before {
  	content: "";
  	display: inline-block;
  	width: 25px;
  	height: 25px;
  	vertical-align:middle;
  	
  	color: #00164b;
  	text-align: center;
  	border: 1px solid #a9a9a9;	
  	border-radius: 1px;
  }
  input[type=checkbox]:checked + .checkbox:before {
  	content: "\2713";
  	border: 1px solid #a9a9a9;
  	font-size: 19px;
      line-height: 24px;
      font-weight: bold;
  }
  .contact-area input[type="image"]{ margin-top: 17px;}
  .news-area{ background: #e9e9e9; padding: 12px; border: 1px solid #999999; padding-bottom: 50px;}
  .news-area h2{ font-size: 28px; font-family: 'CenturyGothic'; padding-top: 2px; padding-bottom: 8px;}
  .news-area p{ padding-top: 20px; margin: 0px;}
  .news-area strong{ display: block;}

  @media(min-width:768px){

       .banner-container h2{font-size: 44px; width:650px; padding: 0px; left: auto; right: 30px; text-align:left; bottom: 50px;}
      .header-title{ font-size: 25px;}
      .nav>li{font-size: 15px;}
  	.welcome-area p{ font-size:18px;}
      .navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand{ margin-left:0px;}
     
      header{ font-size:23px; position: fixed; top:0px; left:0px; width: 100%; background: #ffffff;}  
     .banner .carousel-caption{ left: 0px; right: 0px;}
  	.welcome-area, .sub-left-area{ padding-top:34px; padding-bottom: 34px;}
      .carousel-inner .item img{ width: 100%;}
      nav .container{ position: relative;}
      .navbar-default .navbar-toggle{ margin: 0px; right: 0px;}
      .sub-left-area{ text-align: left; min-height: 350px;}
      .box-container{ padding:35px 0px 35px 0px;}
      .box-container .box{
              margin-left:16px; width: 229px; text-align: center; float:left;
      }
      .content{padding-left:0px; padding-right:0px;}
      #myCarousel{ padding-top: 169px;}
  }
  @media(min-width:992px){
    
        .navbar{background: #192531; min-height: auto;}
      .navbar-nav>li{
      float:none; display: inline-block; vertical-align: top; 
      }
  	.navbar-nav{font-size:0px;}
      header .navbar-default .navbar-nav>li>a{padding:12px 8px;
      -moz-transition: background-color .25s ease, margin .25s ease;
  	-webkit-transition: background-color .25s ease, margin .25s ease;
  	-o-transition: background-color .25s ease, margin .25s ease;
  	-ms-transition: background-color .25s ease, margin .25s ease;
  	transition: background-color .25s ease, margin .25s ease; display: inline-block; vertical-align: top; color:#ffffff; font-size: 14px; display: inline-block;}
      header .navbar-default .navbar-nav>li>a:hover, header .navbar-default .navbar-nav>li.active>a:hover, .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>li>a:focus{background:#212f3d; color:#ffffff;}
      .right-nav{float: left;}
      .right-nav ul{ padding-top:58px;}
      .right-nav li{ display: inline-block;}
      .navbar-default .navbar-collapse, .navbar-default .navbar-form{}
       .banner-container{position:absolute; top: 0px; width: 100%; height: 100%; z-index: 1;}
      
      .sub-banner{ position: absolute;}
      .header-title{font-size:36px; color:#ffffff; text-shadow:
      2px 2px 1px #000,
      /* Simulated effect for Firefox and Opera
         and nice enhancement for WebKit */
     -2px -2px 1px #0c1c42,  
      2px -2px 1px #0c1c42,
     -2px 2px 1px #0c1c42,
      2px  2px 1px #0c1c42; letter-spacing: 1px; text-align: center; position: absolute; bottom: 0px; right: 5%;}
      .navbar{ margin-top: 10px;}
      .box-container{ padding:35px 38px 35px 38px;}
      .box-container .box{
       margin-left:57px; width: 250px;
      }
      .content.about-content{padding:23px 37px 0px 37px; }
      .content{padding-left: 0px; padding-right: 0px;}
  	
  }
  @media(min-width:1200px){
   .box-container .box{
          margin-left:130px; width:275px;
      }
  }
  @media(min-width:1280px){
      .banner-text-area{ padding:30px;}
      .header-title{ bottom: 20px;} 
  }
  @media(min-width:1500px){
      .header-title{ bottom: 30px;}      
   .banner-text-area{ padding:45px 55px 40px 55px;}     
  }
  @media(max-width:991px){
      .navbar-header {float: none;}
      .navbar-nav>li>.dropdown-menu{width:100%; margin-top: 8px; padding-left:0px; float: none;}
      .navbar-nav>li>.dropdown-menu li{ padding-left: 10px; border-bottom: 1px solid #777777;}
      .navbar-toggle {display: block;}
      .navbar-nav>li {float: none;}
      .nav>li.dropdown.open{ background: #192531;}
      .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover{background: #192531; color:#ffffff;}
      .navbar-default .navbar-nav .open .dropdown-menu>li>a, .navbar-default .navbar-nav .open .dropdown-menu>li>a:hover{color:#ffffff;}
      .nav{ box-shadow: 0px 1px 3px #dfdfdf; margin: 0px;}
      .navbar-nav .open .dropdown-menu>li>a{color:#ffffff;}
     .nav>li{ padding: 5px; padding-left: 15px; border-bottom: 1px solid #dfdfdf; padding-bottom: 7px;}
       .navbar-collapse.collapse.in {display: block!important;}
       .navbar-collapse.collapse {display: none!important;}
      .navbar-collapse{background: #ffffff; }
      .navbar-nav{float:none;}
      
      .banner-container .container{ width: 100%;}
      .banner-text-area{ padding: 20px;}
      .navbar-collapse{position: relative; z-index: 10;}
      .navbar-default .navbar-nav>li>a:hover{color:#777777;}
      .navbar-nav .open .dropdown-menu>li>a{padding-left: 0px; box-shadow: none; width: auto;}
       .dropdown-menu{ position: relative;box-shadow:none; border:none; background: none;}
      header .nav>li.active{background:#192531;}
      .banner-container.sub-banner h2{font-size: 27px; width: 450px;}
       .top-heading p{ padding-bottom: 30px;}
       .right-area{width:584px;}
  }

  @media(max-width:767px){
      .navbar-brand{ width:120px;}
      .right-nav{ float: right; font-size: 13px; padding-top: 10px;}
      .navbar-brand img{ max-width:100%;}
      header.sub-header{ position: static;}
      .navbar-default .navbar-brand{ width: 50%;}
      .navbar-default .navbar-brand img{ max-width:100%;}
        .phone-number{top:10px; right: 10px; font-size: 16px; position: absolute;}
      .navbar-collapse{ background: #ffffff; margin-top: 21px;}
      .navbar-toggle{ margin-top:0px; margin-bottom: 0px; float: left; margin-left: 15px;}
      .banner-text-area h1{ font-size:17px;}
      .banner-text-area p{ font-size: 12px;}
      .carousel-control .glyphicon-chevron-right{ margin-right: -5px;}
      .carousel-control .glyphicon-chevron-left, .carousel-control .icon-prev{ margin-left: -6px;}
      .navbar-header{ padding-bottom: 0px; display: inline-block; vertical-align: middle;}
      .right-area{ padding-top:15px;}
       .nav-right span{display:block; width:10px; height:2px; background: #ffffff;}
      .box-container{ padding-left:10px; padding-right: 10px; }
      .box-container .box, .box-container .box:first-child{ margin: 0px auto; float: none;}
      .box-container .box{ margin-top: 25px;}
      .box-container .box:first-child{ margin-top: 0px;}
      .box-container .box h2{ font-size: 22px;}
      .box-container p{ padding-top: 20px;}
      header .navbar-default .navbar-nav>.active>a, header .navbar-default .navbar-nav>.active>a:focus{ background:#192531;}
      .banner-container.sub-banner h2{ font-size: 18px; width: auto; position: static; color: #242b35; text-shadow: none; margin-top:6px;}
     
  }
  @media(max-width:430px){
    .navbar-default .navbar-brand img{ max-width:100%; }
    
      .navbar-collapse{margin-top:7px;}
  }