@charset "utf-8";
/* CSS Document */

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, main {
	display: block;
}

body {
	font-family: 'Noto Sans', sans-serif;
	font-size: 16px;
    color: #222831;
}

h1 {
	font-family: 'Noto Sans', sans-serif;
	font-size:2rem;
    font-weight: 700;
}

h2 {
	font-family: 'Noto Sans', sans-serif;
	font-size:1.5rem;
    font-weight: 700;
}

h3 {
	font-family: 'Noto Sans', sans-serif;
	font-size:1.25rem;
    font-weight: 700;
}

h4 {
	font-family: 'Noto Sans', sans-serif;
	font-size:1rem;
    font-weight: 700;
    line-height: normal;
}

h5 {
	font-family: 'Noto Sans', sans-serif;
	font-size:15px;
    font-weight: 700;

}

.blueline {
    border: 1px double #3A4F90;
}


/* HEADER */

.header {
    background-color: #393e46;
    color: #fff;
}



/* NAVIGATION */

.navbar, .navi{
    background-color: #eeeeee;
}

.navbar-light .navbar-brand{
    font-family: 'Noto Sans', sans-serif !important;
}

.navbar-light .navbar-nav .nav-link {
    font-family: 'Noto Sans', sans-serif !important;
}

.navbar-light .navbar-nav .nav-link {
    text-transform: uppercase;
    color: #222831;
    font-weight: 700; 
}

.nav-link:hover {
    color: #3A4F90;
}

.navbar-brand {
    color:#222831;
    text-transform: uppercase;
    font-weight: 700; 
}

.navbar-brand:hover {
    color: #3A4F90;
}



/* HERO */

.hero {
    background-image: url(/../siteart/cat-d9-2.jpg);
    background-position: right top;
    background-repeat: no-repeat;
    background-size: cover;
    max-height: 500px;
}

.hero2 {
    background-image: url(/../siteart/cat-d9-thin.jpg);
    background-position: right top;
    background-repeat: no-repeat;
    background-size: cover;
    max-height: 300px;
}

.search {
    background-color: rgba(58,79,144,0.85);
    min-height: 500px;
}

.search2 {
    background-color: rgba(58,79,144,0.85);
    min-height: 300px;
    color:#fff;
    padding-top:8rem;
    text-transform: uppercase;
}

.cat-top img{
    background-color: rgba(58,79,144,0.85);
    max-height: 300px;
    color:#fff;
    
}

.search h2{
    color:#fff;
}
#main_mobile {display:none;}
#main {width:100%;}
#main img {width:100%;}
#searchwrap {position:absolute; left:50px; width:75%; padding:40px 0 0; color:#fff;}
.searchfield {width:100%; margin:1% 0; color:#000;}
#searchwrap input {background:#fff; color:#000; padding:8px 10px;width:100%; margin:5px auto;}
#searchwrap select {background:#fff; color:#000; padding:8px 10px;width:100%; margin:5px auto;}

.submit {width:100%; margin:1% 0;}
#searchwrap input.button, #searchwrap input.button:focus {
	background: #393e46; 
	width:100%; margin:10px auto; padding:10px 0; font-size:18px;font-weight:700; color:#fff;text-transform:uppercase;}
#searchwrap input.button:hover {background: #464c56;  color:#fff;}



/* WELCOME */

.welcome {
    background-color: #eeeeee;
    line-height: 1.8rem;
    font-size: .95rem;
}

.welcome p {
    font-size: 1.2rem;
    line-height: 2.5rem;
}

.logos{
    width:150px;
}

/* QUICK LINKS */

.quicklinks {
    background-color: #3A4F90;
}

.quicklinks a {
    color:#fff;
    text-transform: uppercase;
    font-size: 1.8rem;
    font-weight: 700;
    text-decoration: none;
    
}

.partsbox {
    background-image: url(/../siteart/partsbox.png);
    width: 450px;
    height:250px;
    line-height: 230px;
}
.partsbox:hover {
    background-image: url(/../siteart/partshover.png);
}

.servicebox {
    background-image: url(/../siteart/servicebox.png);
    width: 450px;
    height:250px;
    line-height: 230px;
}
.servicebox:hover {
    background-image: url(/../siteart/servicehover.png);
}

.contactbox {
    background-image: url(/../siteart/contactbox.png);
    width: 450px;
    height:250px;
    line-height: 230px;
}
.contactbox:hover {
    background-image: url(/../siteart/contacthover.png);
}


/* FOOTER */

.pre-footer{
    background-color: #393e46;
    color: #fff;
    font-size:10px;
}

.pre-footer a{
    color:#fff;
}

.pre-footer a:hover{
    color: #3A4F90;
}

.pre-footer h2 {
    text-transform: uppercase;
}

a.footerlink:link, a.footerlink:visited, a.footerlink:active{
	text-decoration:underline; 
	font-size:12px;
	color:#fff;
}

a.footerlink:hover {
	text-decoration:none; 
	font-size:12px;
}

.pre-footer ul {
    list-style: none !important;
    padding-inline-start: 0;
    font-size: 16px;
}

/* LISTINGS */

.row {
    margin:0px;
}

.parts-list .listings-button {
    background:#3A4F90;
}

.parts-list .listings-button:hover{
    background:#3A4F90;
}

footer p {
    font-size: 16px;
}

/* FORM */

.form a {
    color:#3A4F90;
}
.formfield {display:inline-block; width:48%; margin-right:1%;}
.column_7 {display:inline-block; width:12%; text-align:center;}
#formpage {vertical-align:top;}
#formpage div {vertical-align:top; padding:5px 5px;}

#formpage input {padding:6px 5px; border:1px solid #8e8d8d; color:#8e8d8d; font-size:12px;}
#formpage textarea {padding:6px 5px; border:1px solid #8e8d8d; color:#8e8d8d; font-size:12px;}

 
/* selects have similar styles to input & textarea fields, but with no padding. Text in a dropdown select is positioned differently */
#formpage select {border:1px solid #8e8d8d; color:#8e8d8d; vertical-align:middle; font-size:12px; line-height:normal; padding:5px; width:100%;}
#formpage input  {width:100%;}
#formpage input.larger  {width:100%;}
#formpage textarea {width:100%; height:85px;}

#formpage input.checkbox {padding:0; border:0; margin:0 5px 0 0; width:16px !important; height:16px; display:inline;  background-color:#fff;}
#formpage input.radio {padding:0;  border:0; margin:0 5px 0 0; width:15px; height:15px; display:inline;}

/* focus states of various types of fields */
#formpage input:focus,#formpage textarea:focus,#formpage select:focus {background:#FFF;  color:#000; border:1px solid #3A4F90; outline-style:none;}
#formpage input.radio:focus,#formpage input.checkbox:focus {background:none;  border:0; outline-style:none;}
 
#formpage input.button,#formpage input.button:focus {width:340px; margin:0; padding:10px 0; background:#3A4F90; border:2px #3A4F90 solid; font-size:14px; line-height:14px; font-weight:bold; color:#fff;}
#formpage input.button:hover {
	background: -webkit-linear-gradient(#545454, #484848); 
    background: -o-linear-gradient(#545454, #484848);
    background: -moz-linear-gradient(#545454, #484848); 
    background: linear-gradient(#545454, #484848);   
	color:#fff text-shadow:none; border:2px #545454 solid;}

/* for plain text next to an input field, if not using a table structure */
#formpage label.basic { color:#212121; font-size:16px; text-align:left;}
#formpage label.checkbox {/*  color:#212121;*/ font-size:16px; text-align:left; display:inline; padding:0;}

/*control the Captcha */
.captcha {width:330px; margin:0;}
.CaptchaPanel {margin:0 0 0 0 !important; padding:0 0 0 0 !important; text-align: left !important; 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;}
.CaptchaAnswerPanel {margin:0 0 0 0; padding:2px 0px 2px 0px !important;}
.CaptchaWhatsThisPanel {line-height:0; margin:0 0 0 0; padding:8px 0 8px 0 !important;}
.CaptchaWhatsThisPanel a {color:#000; font-size:12px;}
.CaptchaWhatsThisPanel a:hover {text-decoration:none;}

.p-3 {font-size:16px!important;}
.p-0 {font-size:16px!important;}

/* MEDIA QUERIES */

/*Extra small devices (portrait phones, less than 576px)*/
@media (max-width: 575px) { 

    .navbar-brand {
        font-size: 1.1rem;
    }
    
    #main_mobile {display:block;}
    #main_mobile img {width:100%;}
    #searchwrap {position:relative; width:100%; top:-5px; left:0; padding:20px 0;}
    #searchwrap input {background:#fff; color:#000; padding:10px;width:100%; margin:5px auto;}
    #searchwrap input.button, #searchwrap input.button:focus {width:100%; font-size:14px; padding:5px 0;}
    #main {display:none;}
    .hovereffect a.info {font-size:15px; line-height:40px;}

    .inv-imgs figure {width:23%;}
    .column_7 {width:30%;}
    .form {font-size: .8rem; line-height: normal;}
    #formpage input.button,#formpage input.button:focus {width:100%;}
    #pagewrap {padding-top:2%;}
     .captcha {width:95%;}
    
    .contactbox, .servicebox, .partsbox {width:300px;}

}

/*Small devices (landscape phones, less than 768px)*/
@media (min-width: 576px) and (max-width: 767px) {
    
    #main_mobile {display:block;}
    #main_mobile img {width:100%;}
    #searchwrap {position:relative; width:100%; top:-5px; left:0; padding:20px 0;}
    #searchwrap input {background:#fff; color:#000; padding:10px;width:100%; margin:5px auto;}
    #searchwrap input.button, #searchwrap input.button:focus {width:100%; font-size:14px; padding:5px 0;}
    #main {display:none;}
    .hovereffect a.info {font-size:15px; line-height:40px;}

    .inv-imgs figure {width:23%;}
    .column_7 {width:30%;}
    .form {font-size: .8rem; line-height: normal;}
    #formpage input.button,#formpage input.button:focus {width:100%;}
    .captcha {width:95%;}
    
    .contactbox, .servicebox, .partsbox {width:350px;}
    

}

/*Medium devices (tablets, less than 992px)*/
@media (min-width: 768px) and (max-width: 991px) {
    
    .navbar-brand {
        font-size: 1.5rem;
    }
    
    #main_mobile {display:block;}
    #main_mobile img {width:100%;}
    #searchwrap {position:relative; width:100%; top:-5px; left:0; padding:20px 0;}
    #searchwrap input {background:#fff; color:#000; padding:10px;width:100%; margin:5px auto;}
    #searchwrap input.button, #searchwrap input.button:focus {width:100%; font-size:14px; padding:5px 0;}
    #main {display:none;}
    .hovereffect a.info {font-size:15px; line-height:40px;}

    .inv-imgs figure {width:23%;}
    .column_7 {width:30%;}
    
    .form {font-size: .8rem; line-height: normal;}


}

/*Large devices (desktops, less than 1200px)*/
@media (min-width: 992px) and (max-width: 1199px) {
    
    .navbar-brand {
        font-size: 1.5rem;
    }
    .nav-item{
        font-size: .9rem;
        margin-left: .2rem;
        margin-right: .2rem;
    }
    
    .contactbox, .servicebox, .partsbox {width:310px;}


}


/*Extra large devices (large desktops)*/
@media (min-width: 1200px) {
    
    .navbar-brand {
        font-size: 2rem;
    }
    .nav-item{
        font-size: .9rem;
        margin-left: .8rem;
        margin-right: .8rem;
    }
    
    .contactbox, .servicebox, .partsbox {width:375px;}
       
} 

@media (min-width: 1400px) {
    
    .contactbox, .servicebox, .partsbox {width:450px;}
}

@media (min-width: 1450px) {
    .nav-item{
        font-size: 1rem;
        margin-left: 1.5rem;
        margin-right: 1.5rem;
    }
}


/*Extra EXTRA large devices (very large desktops)*/
@media (min-width: 1557px) {

       
}