/*
Theme Name: BJ's Truck Centre Theme
Description: Custom designed theme specially for BJ's Truck Centre
Version: 0.9
Author: Rob Williams, DevUp Inc <hello@devup.ca>
Tags: custom template
*/

/* Default Styles */

html, body {
    width:                  100%;
    height:                 100%;
    font-family:            'Roboto Condensed', 'Arial Narrow', sans-serif;
    line-height:            1.4em;
    background:             #f7f7f7;
}
body { overflow-x: hidden; }

p { padding: 0 0 1em 0; color: #003663; font-size: 1.25em; line-height: 1.4em; }
.bold { font-weight: bold; }
.italic { font-style: italic; }
.textleft { text-align: left; }
.textcenter { text-align: center; }
.textright { text-align: right; }
.clear { clear: both; }
.floatleft { float: left; }
.floatright { float: right; }

img.centered {
	display: block;
	margin: 0 auto;
}

img.alignright {
	padding: 4px;
	margin: 0 0 1em 1em;
	display: inline;
}

img.alignleft {
	display: inline;
}

img.aligncenter {
    display: block;
}

.alignright { float: right; }
.alignleft { float: left; }
.aligncenter { margin: 0 auto; }


.logo .bjblue { fill: #003663; }
.logo .bjwhite { fill: #ffffff; }
.logo .bjbanner { fill: #D1D3D4; }
.logo .bjoutercircle { fill: #8A9EAB; }
.logo .bjinnercircle { fill: #267acf; }
.logo .bjclippath { clip-path:url(#SVGID_2_); fill: #BCBEC0; }
.logo .bjorange { fill: #F15A29; }
.logo .bj40 { fill: #BCBEC0; }

a { text-decoration: none; color: #37a2d3; font-weight: 800; }
a:hover { color: blue; }

section h1 { position: relative; text-align: right; font-size: 4em; color: #f15a29; line-height: 1.4em; margin: 0.5em 0; font-family: 'Source Sans Pro', Arial, sans-serif; }
section h1:after { content:''; position: absolute; bottom: 5px; left: 0; border: 0; width: 100%; height: 5px; background: rgb(241,90,41); background: linear-gradient(90deg, rgba(241,90,41,0) 20%, rgba(241,90,41,1) 50%); }

section h2 { position: relative; font-size: 4em; color: #f15a29; line-height: 1.4em; margin: 0.5em 0; font-family: 'Source Sans Pro', Arial, sans-serif; }
section h2.underline:after { content:''; position: absolute; bottom: 5px; left: 0; border: 0; width: 100%; height: 5px; background: rgb(241,90,41); background: linear-gradient(90deg, rgba(241,90,41,0) 20%, rgba(241,90,41,1) 50%); }
.home h2 { margin-top: 0; }

section h3 { font-size: 2em; line-height: 1.2em; color: #f14a29; margin: 0.5em 0 1em; }
section h4 { font-size: 1.25em; line-height: 1.2em; color: #f14a29; margin: 0; }


body > header { position: relative; z-index: 5; width: 100%; height: 250px; background: rgb(255,255,255); background: linear-gradient(180deg, rgba(255,255,255,1) 30%, rgba(255,255,255,0) 100%); }
.home > header { border-bottom: 0; }
/*.logged-in > header { top: 31px; }*/
header header { width: 95%; max-width: 1280px; padding: 1em 0; margin: 0 auto; position: relative; }
header header .logo { height: 220px; width: auto; }

.slider_area, #slider_area { margin-top: -250px; /* This should be the same height as the header */ font-family: 'Source Sans Pro', Arial, sans-serif; }
.mobile_header { display: none; }

.metaslider .msHtmlOverlay .layer * { line-height: 1.1em !important; text-shadow: rgba(255,255,255,0.6) 5px 5px 9px; }

.social_menu { list-style: none outside; position: absolute; right: 0; top: 2em; }
.social_menu li { display: inline-block; margin-left: 1em; height: 36px; width: 36px; border: 1px #f14a29 solid; border-radius: 999px; text-align: center; background: transparent; transition: 0.5s all; }
.social_menu li a { font-size: 24px; position: relative; top: 6px; color: #f14a29; transition: 0.5s all; }
.social_menu li:hover { background: #f15a29; }
.social_menu li:hover a { color: white; }


.nav_menu { list-style: none outside; }
.nav_menu li { display: inline-block; margin-left: 2em; }
.nav_menu li:first-child { margin-left: 0; }
.nav_menu li a { font-family: 'Source Sans Pro', Arial, sans-serif; font-size: 1.2em; font-weight: normal; text-transform: uppercase; color: #003663; }
header .nav_menu { position: absolute; right: 0; top: 6em; }
section .nav_menu { margin: 1em auto; text-align: center; }

.padtopbottom { padding: 2em 0; }
.padtop { padding: 2em 0 0; }

.feature_list { width: 60%; margin: 0 auto; text-align: center; }
.feature_list li { display: inline-block; white-space: nowrap; padding: 0.5em 0.5em 0.5em 0; font-size: 1.35em; color: #003633; }
.feature_list > li:before { content:'\2022'; margin-right: 0.5em; }

section.contents { width: 95%; max-width: 1280px; margin: 0 auto; }

.contact_block { background-size: cover; background-position: center center; }
.contact_block p { font-size: 1.4em; color: #003663; }

footer {
    background: rgb(5,81,151);
    background: radial-gradient(circle, rgba(5,81,151,1) 0%, rgba(0,54,100,1) 100%);
    color: white;
    padding: 0.5em 0;
}

footer p { font-size: 1.4em; padding: 0.5em 0; text-align: center; color: white; }
footer p:last-child { font-size: 1.1em; }

.row { text-align: center; margin-bottom: 2em; }
.col_3 { width: 30%; display: inline-block; vertical-align: top; }
.col_3 h3 { margin: 0; }

.bj_button {
    display: inline-block;
    position: relative;
    border-radius: 999px;
    box-shadow: 0 1px 4px -2px #333;
    border: 5px #ddd solid;
    background: #00549c;
    background: -moz-linear-gradient(top,  #00549c 0%, #4a97d6 50%, #00549c 51%, #267acf 100%);
    background: -webkit-linear-gradient(top,  #00549c 0%,#4a97d6 50%,#00549c 51%,#267acf 100%);
    background: linear-gradient(to bottom,  #00549c 0%,#4a97d6 50%,#00549c 51%,#267acf 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00549c', endColorstr='#267acf',GradientType=0 );
    font-size: 1.5em;
    text-transform: uppercase;
    font-weight: bold;
    color: white;
    padding: 0.35em 2em;
    margin: 0 1em;
    transition: 0.5s all;
}
.bj_button:hover {
    background: #f0b7a1;
    background: -moz-linear-gradient(top,  #f0b7a1 0%, #8c3310 50%, #752201 51%, #bf6e4e 100%);
    background: -webkit-linear-gradient(top,  #f0b7a1 0%,#8c3310 50%,#752201 51%,#bf6e4e 100%);
    background: linear-gradient(to bottom,  #f0b7a1 0%,#8c3310 50%,#752201 51%,#bf6e4e 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0b7a1', endColorstr='#bf6e4e',GradientType=0 );
    color: white;
}
#mobile_menu_icon { display: none; }

.wppopups-whole h2 { font-size: 2em; margin: 0.75em 0 !important; }

@media screen and (max-width: 1000px) {
    header header { padding: 0.5em 0; }
    header header .logo { height: 120px; }
    header .nav_menu { top: 1em; }
    .nav_menu li { margin-left: 1em; }
    .nav_menu li a { font-size: 1em; }
    .social_menu { top: 3em; }
    .social_menu li { height: 24px; width: 24px; }
    .social_menu li a { font-size: 16px; top: 4px; }
    section h1 { font-size: 3em; }
    section h2 { font-size: 2.5em; }
    p { font-size: 0.9em; }
    #slider_area { margin-top: -150px; }
    footer p { font-size: 0.6em !important; }
    .row .col_3 { width: 40%; }
    .row .col_3:first-child { width: 100%; }
    .row .col_3:last-child { width: 50%; }
    .feature_list { width: 80%; }
    .feature_list li { white-space: inherit; }
}

@media screen and (max-width: 500px ) {
    header header .logo { height: 90px; }
    .social_menu { right: 1em; }
    .slider_area, #slider_area { display: none; }
    .mobile_header { width: 100%; display: block; margin-top: -150px; }
    .mobile_header img { width: 100%; }
    header .nav_menu {
        display: block; position: absolute; top: 3em; right: -110%;
        width: 50%; z-index: 500; transition: 0.5s all;
        background: #00549c;
        background: -moz-linear-gradient(top,  #00549c 0%, #267acf 100%);
        background: -webkit-linear-gradient(top,  #00549c 0%,#267acf 100%);
        background: linear-gradient(to bottom,  #00549c 0%,#267acf 100%);
    }
    header .nav_menu.visible { right: -0.5em; }
    header .nav_menu li { display: block; text-align: center; margin: 0.5em 0; }
    header .nav_menu li a { color: white; }
    #mobile_menu_icon { display: block; position: absolute; top: 1em; right: 1em; }
    section h1 { font-size: 2em; }
    section h1:after { bottom: 0; }
    section h2 { font-size: 1.5em; }
    section h3 { font-size: 1.25em; }
    .contact_block p img { max-width: 80%; height: auto; }
    .contact_block p strong, .contact_block p a { display: block; }
    .row .col_3 { width: 100% !important; }
}