/*
	Theme Name: JBS02
	Description: This is your custom style sheet.
	Author: JCA
	Version: 1.0
	Template: JBS02
	Template Version: 1.0

*/


/*
Add Your Custom CSS Below This Line
---------------------------------------------------------------- */
/* Sitewide Styling */
body {

  color: #3B3738;
  font-size: 16px;
  font-family: 'Roboto', 'Open Sans', sans-serif;
  overflow-x: hidden;
}

a {color: #990000; text-decoration: none}
a:hover {color: blue; text-decoration: none}

.img-responsive {max-width: 100%; height: auto}

h3 { color: #990000; font-size: 24px; margin-top: 25px; padding-bottom: 5px}
h4 {border-bottom: 1px #990000 dashed; color: #990000; font-size: 18px; margin-top: 25px; padding-bottom: 5px}
h5 {color: #996600; font-size: 18px; margin-top: 25px; margin-right: 25px}
div.spacer {height: 35px}
div.mainContent {background-color: #FFFFFF}

ul.sidebarList {margin: 25px 25px 0 0}
ul.sidebarList li {list-style: none; padding-bottom: 20px; color: #996600}
ul.sidebarList a {color: #990000; text-decoration: none}
ul.sidebarList a:hover {color: #996600}

div.verticalDots {border-right: 1px dashed #990000}

img.profile {margin: 0 15px 5px 0; max-width: 175px}

/* Header Styling */
h1.logo {margin: 25px auto}

#monitorNav {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

li.largeNav {
    display: inline;
    font-family: 'Merriweather', serif;
    color: #990000;
    padding: 5px;
}

li.largeNav a {color: #990000; text-decoration: none}
li.largeNav a:hover {color: #996600}


/* Mobile Menu Style  8/
/* Navigation Menu - Background */
.navigation {
  /* critical sizing and position styles */
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  
  /* non-critical appearance styles */
  list-style: none;
  background: #990000;
}

/* Navigation Menu - List items */
.nav-item {
  /* non-critical appearance styles */
  width: 200px;
  border-top: 1px solid #996600;
  border-bottom: 1px solid #996600;
}

.nav-item a {
  /* non-critical appearance styles */
  display: block;
  padding: 1em;
  background: #990000;
  color: #eeeeee;
  font-size: 1.2em;
  text-decoration: none;
  transition: color 0.2s, background 0.5s;
}

.nav-item a:hover {
  color: #c74438;
  background: linear-gradient(135deg, rgba(0,0,0,0) 0%,rgba(75,20,20,0.65) 100%);
}

/* Site Wrapper - Everything that isn't navigation */
.site-wrap {
  /* Critical position and size styles */
  min-height: 100%;
  min-width: 100%;
  background: url(../img/BG02.gif) repeat top center;
  position: relative;
  top: 0;
  bottom: 100%;
  left: 0;
  z-index: 1;
  
  /* non-critical apperance styles */
  padding: 2em;
}

/* Nav Trigger */
.nav-trigger {
  /* critical styles - hide the checkbox input */
  position: absolute;
  clip: rect(0, 0, 0, 0);
}

label[for="nav-trigger"] {
  /* critical positioning styles */
  position: fixed;
  left: 15px; top: 15px;
  z-index: 2;
  
  /* non-critical apperance styles */
  height: 36px;
  width: 36px;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' width='36px' height='36px' viewBox='0 0 36 36' enable-background='new 0 0 36 36' xml:space='preserve'><rect width='36' height='6'/><rect y='24' width='36' height='6'/><rect y='12' width='36' height='6'/></svg>");
  background-size: contain;
}

/* Make the Magic Happen */
.nav-trigger + label, .site-wrap {
  transition: left 0.2s;
}

.nav-trigger:checked + label {
  left: 215px;
}

.nav-trigger:checked ~ .site-wrap {
  left: 200px;
  box-shadow: 0 0 5px 5px rgba(0,0,0,0.25);
}

/* Micro reset */
*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;}
html, body { height: 100%; width: 100%; font-family: Helvetica, Arial, sans-serif; }

/* Home Banner Styling */
#homeBanner {
  background: url(../img/homeBanner.jpg) no-repeat top center;
  height: 430px;
  margin: 25px auto;
  }

  #HomeBanner01 {
  	float: left;
  	display: block;
      background: url(../img/HomeBanner01.jpg) no-repeat center center;
      background-size: cover;
      height: 315px;
  		width: 366px;
      margin-top: 25px;
      margin-right: 20px;
      -webkit-animation-duration: 4s;
      -moz-animation-duration: 4s;
      -o-animation-duration: 4s;
      -ms-animation-duration: 4s;
      -webkit-animation-delay: 1s;
      -moz-animation-delay: 1s;
      -o-animation-delay: 1s;
      -ms-animation-delay: 1s;
    }
  #HomeBanner02 {
  	float: left;
  	display: block;
    background: url(../img/HomeBanner02.jpg) no-repeat center center;
    background-size: cover;
    height: 315px;
  	width: 366px;
    margin-top: 25px;
    margin-right: 20px;
    -webkit-animation-duration: 4s;
    -moz-animation-duration: 4s;
    -o-animation-duration: 4s;
    -ms-animation-duration: 4s;
    -webkit-animation-delay: 3s;
    -moz-animation-delay: 3s;
    -o-animation-delay: 3s;
    -ms-animation-delay: 3s;
    }
  #HomeBanner03 {
  	float: left;
  	display: block;
    background: url(../img/HomeBanner03.jpg) no-repeat center center;
    background-size: cover;
    height: 315px;
  	width: 366px;
    margin-top: 25px;
    -webkit-animation-duration: 4s;
    -moz-animation-duration: 4s;
    -o-animation-duration: 4s;
    -ms-animation-duration: 4s;
    -webkit-animation-delay: 5s;
    -moz-animation-delay: 5s;
    -o-animation-delay: 5s;
    -ms-animation-delay: 5s;
    }
  	
  	#HomeBanner04 {
  		float: left;
  		display: block;
      background: url(../img/HomeBanner04.jpg) no-repeat center center;
      background-size: cover;
      height: 315px;
    	width: 366px;
  	  margin-right: 20px;
  	  -webkit-animation-duration: 4s;
  	  -moz-animation-duration: 4s;
  	  -o-animation-duration: 4s;
  	  -ms-animation-duration: 4s;
  	  -webkit-animation-delay: 8s;
  	  -moz-animation-delay: 8s;
  	  -o-animation-delay: 8s;
  	  -ms-animation-delay: 8s;
  	  }
  	#HomeBanner05 {
      background: url(../img/HomeBanner05.jpg) no-repeat center center;
      background-size: cover;
      height: 315px;
    	width: 366px;
  	  margin-right: 20px;
  	  -webkit-animation-duration: 4s;
  	  -moz-animation-duration: 4s;
  	  -o-animation-duration: 4s;
  	  -ms-animation-duration: 4s;
  	  -webkit-animation-delay: 10s;
  	  -moz-animation-delay: 10s;
  	  -o-animation-delay: 10s;
  	  -ms-animation-delay: 10s;
  	  }
  	#HomeBanner06 {
      background: url(../img/HomeBanner06.jpg) no-repeat center center;
      background-size: cover;
      height: 315px;
    	width: 366px;
  	  -webkit-animation-duration: 4s;
  	  -moz-animation-duration: 4s;
  	  -o-animation-duration: 4s;
  	  -ms-animation-duration: 4s;
  	  -webkit-animation-delay: 12s;
  	  -moz-animation-delay: 12s;
  	  -o-animation-delay: 12s;
  	  -ms-animation-delay: 12s;
  	  }

  	#HomeBanner07 {
      height: 315px;
    	width: 366px;
  		-webkit-animation-duration: 4s;
  		-moz-animation-duration: 4s;
  		-o-animation-duration: 4s;
  		-ms-animation-duration: 4s;
  		-webkit-animation-delay: 16s;
  		-moz-animation-delay: 16s;
  		-o-animation-delay: 16s;
  		-ms-animation-delay: 16s;
  		}

  	#HomeBanner08 {
      height: 315px;
    	width: 366px;
  	  -webkit-animation-duration: 4s;
  	  -moz-animation-duration: 4s;
  	  -o-animation-duration: 4s;
  	  -ms-animation-duration: 4s;
  	  -webkit-animation-delay: 18s;
  	  -moz-animation-delay: 18s;
  	  -o-animation-delay: 18s;
  	  -ms-animation-delay: 18s;
  	  }
  		
  		#HomeBanner09 {
        height: 315px;
      	width: 366px;
  			-webkit-animation-duration: 4s;
  			-moz-animation-duration: 4s;
  			-o-animation-duration: 4s;
  			-ms-animation-duration: 4s;
  			-webkit-animation-delay: 20s;
  			-moz-animation-delay: 20s;
  			-o-animation-delay: 20s;
  			-ms-animation-delay: 20s;
  			}

#mobileBanner {margin-bottom: 50px}
#mobileContact {height: 250px; background: url(../img/mobileContact.jpg) center center; background-size: auto;}
#mobileKnowUs {height: 250px; background: url(../img/mobileKnowUs.jpg) center top; background-size: auto;}
#mobileServices {height: 250px; background: url(../img/mobileServices.jpg) center top; background-size: auto;}
#mobileFinancing {height: 250px; background: url(../img/mobileFinancing.jpg) center center; background-size: auto;}
#mobileFAQ {height: 250px; background: url(../img/mobileFAQ.jpg) center center; background-size: auto;}
#mobilePhotos {height: 250px; background: url(../img/mobilePhotos.jpg) center center; background-size: auto;}

/* Home Images Beneath Banner Styling */
.imageLeft {background: url(../img/imageLeftBG.png) no-repeat top right}
.imageRight {background: url(../img/imageRightBG.png) no-repeat top left}
.first {width: 226px; border: 1px solid  blue}
.second {width: 226px; border: 1px solid red; margin: 0 30px 0 30px}
.third {width: 226px; border: 1px solid yellow}

/* Services Banner Styling */
#servicesBanner {
  background: url(../img/servicesBanner.jpg) no-repeat top center;
  height: 376px;
  margin: 25px auto 0px;
  }
  
  /* Contact Banner Styling */
  #contactBanner {
    background: url(../img/contactBanner.jpg) no-repeat top center;
    height: 376px;
    margin: 25px auto 0px;
    }

/* Photos Banner Styling */
  #photosBanner {
    background: url(../img/photosBanner.jpg) no-repeat top center;
    height: 376px;
    margin: 25px auto 0px;
    }
/* Get to Know Us Banner Styling */
  #knowUsBanner {
    background: url(../img/knowUsBanner.jpg) no-repeat top center;
    height: 376px;
    margin: 25px auto 0px;
        }

/* Financing Banner Styling */
  #financingBanner {
    background: url(../img/knowUsBanner.jpg) no-repeat top center;
    height: 376px;
    margin: 25px auto 0px;
                }
                
/* FAQ Banner Styling */
#faqBanner {
background: url(../img/faqBanner.jpg) no-repeat top center;
height: 376px;
margin: 25px auto 0px;
                }
              
/* Contact Banner Styling */
#contactBanner {
background: url(../img/contactBanner.jpg) no-repeat top center;
height: 376px;
margin: 25px auto 0px;
            }

/* Form Styling  */
form {
	display:block;
	color:#ffffff;
	font-size:1.0rem;
	padding:25px;
	background:#bb292b;
	overflow:hidden;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
}

form p {
	padding:0 0 5px 0;
}

form textarea {
	width:100%;
	border:1px #bb292b solid;
	padding:0 5px;
	background:#f1f1f1;
}

form input {
	width:100%;
	border:1px #bb292b solid;
	padding:0 5px;
	background:#f1f1f1;
}

form textarea {
	height:125px;
}

form button{
	width:100%;
  color:#f1f1f1;
  font-size: 1.25rem;
  background-color: #996600;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
	border:none;
}
form button:hover{
	cursor:pointer;
  background-color: blue;
}

/* Footer Styling */
#contentBottom {  background: url(../img/bg_footer-link.png) no-repeat top center; height: 110px}
p.contactInfo {margin-top: 50px; font-family: 'Merriweather', serif; font-size: 14px;}