/*===================== 
	CSS reset/normalize 
=======================*/

/**Correct `block` display not defined in IE 8/9.**/
article,aside,details,figcaption,figure,footer,header,hgroup,
main,nav,section,summary {display: block;}
pre {white-space: pre-wrap;}
small { font-size: 80%;}


/*===================== 
	base styles 
=======================*/

html {
    -ms-text-size-adjust: 100%; 
    -webkit-text-size-adjust: 100%; 
    overflow-x: hidden;
	}

body {
	font-family: 'Rubik', sans-serif; 
    margin: 0;
	padding:0;
	}

svg:not(:root) {overflow: hidden;}
	
.clear {clear: both;}

	
/*===================== 
	typography 
=======================*/

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
	}
	h1 {}
	h2 {}
	h3 {font-size:30px}
	h4 {font-size:19px}
	h5 {font-size:18px}
	h6 {font-size:15px}

p {margin: 0;}

a{text-decoration:none}

/*===================== 
	header styles 
=======================*/

.main-header{
    background-image:url("../siteart/concrete_wall_2.png");
    box-shadow:0 0 15px #B5B5B5;
    overflow:hidden !important;
}

.top-info {
    width:100%;
    text-align:right;
    height:60px;
}

.address{
    margin-bottom:5px
}

.number {
    color:#353535;
    font-weight:600;
    text-decoration:none;
    transition:.2s ease;
    line-height:45px
}

.number:hover {
    color:#707070;
    
}

.left-part{float:left}

.right-part{float:right}

.address{
    line-height:45px;
    padding-left:10px;
    color:#353535;
    font-weight:600;
    transition:.4s ease;
    text-decoration:none
}

.address:hover{
    color:#707070;
}


.phonenum{
    line-height:45px;
    padding-left:10px;
    font-weight:600;
     color:#353535;
}

.header-information{
    width:100%;
    height:60px;
    padding-top:20px;
}

.header-text{
    margin-right:60px;
    width:640px;
    float:right;
    display:inline
}

.logo-wrap{
    position:absolute;
    z-index:1;
    margin-top:-30px;
    margin-left:70px;
}

.logo-wrap img{
    width:400px;
}

.location-icon{height:40px;float:left}

.phone-icon{height:40px;float:left}

.line-div{display:none}

/*===================== 
	nav styles 
=======================*/

#menu-button{display: none;}

nav.mobile {display:none;}

.navigation {
    background-image:url("../siteart/concrete_wall_2-nav.png");
    box-shadow:0 0 15px #9E9E9E inset;
    float:right;
    padding-left:140px;
    padding-right:50px;
    margin-right:-50px;
    transform-origin: bottom;
    -ms-transform: skew(40deg, 0deg);
    -webkit-transform: skew(40deg, 0deg);
    transform: skew(40deg, 0deg);
}

.navigation-two {
    background-image:url("../siteart/concrete_wall_2-nav.png");
    box-shadow:0 0 15px #9E9E9E inset;
    float:right;
    padding:15px 90px;
    margin-right:-50px;
    transform-origin: bottom;
    -ms-transform: skew(40deg, 0deg);
    -webkit-transform: skew(40deg, 0deg);
    transform: skew(40deg, 0deg);
}

nav.primary {
	padding:0;
	width:100%;
	background:transparent;
    -ms-transform: skew(-40deg) !important;
    -webkit-transform: skew(-40deg) !important;
    transform: skew(-40deg) !important; 
}

nav.primary ul {
  padding: 0 !important; 
  text-align: center !important;
    float:right
}

nav.primary ul li {
    display:inline-block;
    position: relative !important; 
}
			
nav.primary ul li a {
    color:#353535;
    font-weight:600;
    font-size:17px;
    line-height:25px !important;
    text-decoration:none;
    margin-left:10px;
    margin-right:10px;
    padding:0 10px !important;
    display:block;
    position: relative;
    font-family:'Rubik', sans-serif;
    text-align:center;
    transition:.3s ease;

}	

nav.primary ul li a:hover{
    -ms-transform: skew(-15deg);
    -webkit-transform: skew(-15deg);
    transform: skew(-15deg);
    color:#707070
}	

	
/*===================== 
	content styles 
=======================*/

/* default */

.default-img {
    background-image: url("../siteart/bkg.jpg");
    background-size:cover;
   display:block;
    overflow:auto;
    box-shadow:0 0 15px #000 inset;
    padding:50px 0px 8% 40px;
    overflow:hidden;
    position:relative;
}

@keyframes default-img {25%{opacity:1;} 40%{opacity:0;}}
.default-img img:nth-child(4){animation-delay:0s;}
.default-img img:nth-child(3){animation-delay:5s;}
.default-img img:nth-child(2){animation-delay:10s;}
.default-img img:nth-child(1){animation-delay:15s;}


.default-image img{
    border-radius:3px;
    box-shadow:0 0 15px #000;
    width:45%;
    max-width:850px;
    float:left;
    animation:default-img 20s infinite; opacity:0;
    position:absolute;
    margin-bottom:50px;
}


.default-section{
    width:45%; 
    float:right;
    background:rgba(255,255,255,0.10);
    border-radius:3px;
    text-align:right;
    padding:50px 40px;
    margin-top:50px;
    border-right: 13px solid #012E41;
}

.default-section h2{
    color:#B4B4B4;
    font-size:25px;
    text-align:right
}

.default-section h1{
    color:#F0F0F0;
    font-size:50px;
    text-align:right
}

.default-section p{
    color:#F0F0F0;
    line-height:25px;
    padding-top:30px;
}

.default-image-mobile{
    display:none;
    width:100%;
    height:50%;
}

.default-section-mobile{
    background-image: url("../siteart/bkg.jpg");
    background-size:cover;
    display:block;
    overflow:auto;
    box-shadow:0 0 15px #000 inset;
    display:none;
    padding:50px 40px;
}

.default-section-mobile h2{
    color:#B4B4B4;
    font-size:25px;
}

.default-section-mobile h1{
    color:#F0F0F0;
    font-size:50px;
}

.default-section-mobile p{
    color:#F0F0F0;
    line-height:25px;
    padding-top:30px;
}


.parts {
    width: 50%;
    overflow: hidden;
    float:left;
    position: relative;
    transition:.5s ease;
}

.parts-btn{
    width: 100%;
    height: 100%;
    background: rgb(241,241,241);
    background: linear-gradient(90deg, rgba(241,241,241,1) 0%, rgba(233,233,233,1) 100%);
    cursor: pointer;
    padding:0px 0px 40px 0px;
    display:block;
    position:relative;
}

.service {
    width: 50%;
    overflow: hidden;
    float:right;
    position: relative;
    transition:.5s ease;
}

.service:hover {
     box-shadow: -10px 0 10px -2px #D5D5D5;
        z-index:9;
}

.parts:hover {
     box-shadow: 10px 0 10px -2px #D5D5D5;
        z-index:9;
}

.service-btn{
    width: 100%;
    height: 100%;
    background: rgb(241,241,241);
    background: linear-gradient(90deg, rgba(241,241,241,1) 0%, rgba(233,233,233,1) 100%);
    cursor: pointer;
    padding:0px 0px 40px 0px;
    display:block;
    position:relative;
    text-decoration:none
}

.parts-btn{
    color:#878787;
    width:100%;
    height:100%;
    text-decoration:none;
    font-size:40px;
    font-weight:800;
    text-decoration:none
}

.service-btn{
    color:#878787;
    text-decoration:none;
    font-size:40px;
    font-weight:800; 
}

.btn-text{  
    color:#878787;
    font-size:40px;
    font-weight:800;
    margin-top:-20px;
    text-decoration:none
}

.row:after {
    content: "";
    display: table;
    clear: both;
}


/* scrolling inventory */

.scrolling-wrap {
    width:100%;
    height:90px;
    margin:0 auto;
    overflow:hidden;
}
 
.scrolling{
    width:100%;
    height:92px;
}

/* contact */

.contact-links{
    transition:.3s ease;
    text-decoration:none;
    color:#01425D
}

.contact-links:hover{color:#016087}

.map-section{
    padding:100px 0px
}

.form{
    width:95%;
    margin-top:30px;
    padding-top:60px;
    padding-bottom:40px;
    margin:0 auto
}


input {
	padding: 8px;
	border: 1px solid #ddd;
	color: #000;
    background-color:#F0F0F0;
	font-size: 12px;
	box-sizing: border-box;
	border-radius: 2px;
	margin-bottom: 5px;
    font-family: 'Rubik', sans-serif; 
}

textarea {
	width: 100%;
	padding: 8px;
	color: #000;
    border: 1px solid #ddd;
    background-color:#F0F0F0;
	font-size: 12px;
	box-sizing: border-box;
	border-radius: 2px;
	height: 100px;
	margin-bottom: 5px;
    font-family: 'Rubik', sans-serif; 
}

textarea_comment {
	width: 100%;
	padding: 8px;
	border: 1px solid #ddd;
	color: #000;
	font-size: 12px;
	box-sizing: border-box;
	border-radius: 0px;
	height: 100px;
	margin-bottom: 5px;
    font-family: 'Rubik', sans-serif; 
}

select {
	width: 100%;
	padding: 8px;
	border: 0px solid #ddd;
	color: #000;
	font-size: 12px;
	box-sizing: border-box;
	border-radius: 0px;
	margin-bottom: 25px;
}

input:focus,
textarea:focus,
select:focus {
	width: 100%;
	padding: 8px;
	border: 1px solid #ddd;
	color: #000;
	font-size: 12px;
	box-sizing: border-box;
	border-radius: 0px;
	outline-style: none;
}

input.button,
input.button:focus {
    background:#012E41 !important;
    border-color:#012E41!important;
    padding:10px 30px;
    color:white;
    text-shadow: 2px 2px 8px #8B1012;
    text-decoration:none;
    font-size:15px;
    transition:.2s ease;
    border-radius:2px;
    width:200px;
    border:0px;
     border-radius:2px;
    cursor: pointer;
    margin-top:25px;
    margin-bottom:30px;
    box-shadow: 0px 0px 4px 0px #012E41;
}

input.button:hover {
    box-shadow: 0px 0px 8px 0px#012E41;
    border-color:#012E41 !important;
    background:#012E41 !important;
}

/* captcha */


.CaptchaPanel {
	margin:0 0 0 0 !important;
	padding:0 0 0 0 !important;
	text-align: center;
	line-height:normal !important;
}

.CaptchaImagePanel {
	margin:0 0 0 0;
	padding:0 0 0 0;
}

.CaptchaMessagePanel {
	padding:0 0 0 0 !important;
	margin:0 0 0 0 !important;
	font-weight:normal !important;
	font-size:12px;
	line-height:14px;
	font-family: 'Rubik', sans-serif;
}

.CaptchaAnswerPanel {
	margin:10px auto;
    width:100%!important;
	padding:2px 0px 2px 0px !important;
}


.CaptchaWhatsThisPanel {
	line-height:0;
	margin:0 0 5px 0;
	padding:8px 0 8px 0 !important;
	font-family: 'Rubik', sans-serif;
}
.CaptchaWhatsThisPanel a {color:#fff;}
.CaptchaWhatsThisPanel a:hover {text-decoration:none;}


/* about */

.about-section{margin:50px;display:block;}

.about-text{margin-top:90px;margin-bottom:200px;text-align:left}

.about-img{margin-top:50px;float:left;width:50%}

.about-img img{ border-radius:3px;box-shadow:0 0 15px #B5B5B5;width:98%}

.about-img-two{margin-top:50px;float:right;width:50%}

.about-img-two img{ border-radius:3px;box-shadow:0 0 15px #B5B5B5;width:98%}


/*===================== 
	footer styles 
=======================*/

.footer-wrap{
    padding:30px;
    color:#353535; 
    font-weight:600;
    background-image:url("../siteart/concrete_wall_2.png");
    font-family: 'Rubik', sans-serif !important; 
    box-shadow:0 0 15px #BCBCBC inset;
}

.truck-paper{
    color:#353535;
    text-decoration:none;
    transition:.4s ease
}

a.truck-paper:hover{
    color:#707070;
}


/*========================== 
	  Responsive styles 
============================*/

@media screen and (max-width: 1800px)  {
.default-section{
    margin-top:30px;
}
}

@media screen and (max-width: 1700px)  {
.default-section{
    margin-top:20px;
}
			
}

@media screen and (max-width: 1600px)  {
    
.default-section{
    margin-top:10px;
}    

 .navigation {
    padding-left:60px;
}
    
 .navigation-two {
    padding-left:60px;
    margin-right:-90px;
    padding-top:0px;
    padding-bottom:0px;
}  
    
/* mobile nav */	
    
nav.primary ul{display:none;}
    
#menu-button{ 
    display: block;
    font-size: 30px;
    position: relative;
    line-height:25px; 
    z-index: 400;
    float:left;
    margin:15px -20px 15px 0px;
}
    
#menu-button a{
    color:#353535;
    text-decoration: none;
    font-weight:normal;
    transition:.3s ease;
}
    
nav.mobile {
    display:block;
    position: fixed;
    top: 0;
    left: -350px;
    width:300px;
    height: 100%;
    background-color:#FCFCFC;
    z-index: 500;
    overflow:auto;
}

nav.mobile .social-media {
    position: relative;
    text-decoration: none;
    display: inline-block;
    font-size:16px;
    word-spacing:13px;
    padding:0 0 0 5px;
    color: #ccc !important;
}

nav.mobile .mobile_top {
    position: relative;
    display:block;
    padding: 0;
    margin:15px 0 10px 0;
    color: #999;
    font-size: 18px;
    font-weight: 400;
}

/* menu 'x' button */
    
nav.mobile .menu-toggle {
    position: absolute;
    padding: 3px 8px 3px;
    font-family: Arial, sans-serif;
    font-size:35px;
    font-weight: thin;
    line-height: 1;
    color: #999;
    text-decoration: none;
    top:0;
    right:10px;
	}
    

/* menu list */
    
nav.mobile ul {
    list-style: none;
    font-weight: 300;
    margin-top:40px;
    padding-left:0px !important;
}
    
nav.mobile ul li {
    position:relative;
    border-bottom:1px solid #E5E5E5
}

nav.mobile ul li a {
    position: relative;
    display: block;
    font-size:15px;
    color: #353535;
    text-decoration: none;
    font-family:'Rubik', sans-serif;
    font-weight:600;
     padding: 13px 10px 13px 20px!important;
}

nav.mobile ul li a:after {
  background: none repeat scroll 0 0 transparent;
  bottom: 0;
  content: "";
  display: block;
  height: 2px;
  right: 100%;
  position: absolute;
  background:#012E41;
  transition: width 0.4s ease 0s, right 0.4s ease 0s;
  width: 0;
}
			
nav.mobile ul li a:hover:after {
   width: 100%; 
    right: 0; 
}
nav.mobile ul li .fa-chevron-down {
    color:#000;
    font-size:12px;
    margin-top:-3px
}
}

@media screen and (max-width: 1500px)  {
.default-img{display:none}

.default-image-mobile{display:block}
.default-section-mobile{display:block}
} 

 @media screen and (max-width: 1250px)  {
.service {
    width: 100%;
    float:none;
}
    
.parts {
    width: 100%;
    float:none;
}
     
.parts-btn{
    background: linear-gradient(0deg, rgba(241,241,241,1) 0%, rgba(233,233,233,1) 100%);
}

.service:hover {
     box-shadow: 0 -5px 15px 0px #D5D5D5;
}

.parts:hover {
     box-shadow: 0 5px 15px 0px #D5D5D5;
}

.service-btn{
    background: linear-gradient(0deg, rgba(241,241,241,1) 0%, rgba(233,233,233,1) 100%);
}
     
.parts img{width:250px}
     
.service img{width:300px}
     
     .btn-text{font-size:30px}    
     
}

 @media screen and (max-width: 1200px)  {
 .about-img{float:none;width:100%}

.about-img-two{display:none;}
    
.about-section{margin: 50px 30px}
     

     
.header-information{
    width:55%;
    min-width:670px;
    height:45px; 
    padding:15px 0px;
    margin:80px auto 0px auto;
}

.header-text{
    margin-right:60px;
    width:690px;
    float:none;
    display:inline;
}  
     
.line-div{
    display:block;
    border-top:2px solid #BBBBBB;
    width:95%;
    margin:0px auto -100px auto;
}
     
.logo-wrap{
    margin-left:30px;
    margin-bottom:20px;
    position:inherit;
    z-index:0;
}
     
.logo-wrap img{
    width:350px;
} 
     	     
}
 

 @media screen and (max-width: 1000px)  {
 
.about-img img{
    margin:0 auto;
    width:100%
}
     
.about-img{margin-top:30px}
    
.about-text{margin-top:40px;margin-bottom:150px}
}
 

 @media screen and (max-width: 700px)  {
 .default-section-mobile h1{
    font-size:35px;
}   
.left-part{
    float:none;
    padding-left:30px;
}

.right-part{
    float:none;
    padding-left:30px;
}
     
    
.form{
    width:90%;
}
     
.form h4{
    font-size:15px;
}
   
.footer-wrap{
   font-size:12px 
} 
     
.header-information{
    height:85px; 
}      
     
}  


 @media screen and (max-width: 600px)  {
.left-part{
    padding-left:5px;
}

.right-part{
    padding-left:5px;
} 

.header-text{font-size:15px}

} 



 @media screen and (max-width: 400px)  {
.logo-wrap{
    margin-left:15px;
}
     
.logo-wrap img{
    width:250px;
} 
     
.header-text{font-size:13px}   
     
 .default-section-mobile h1{
    font-size:27px;
}   
     
}