/*
	Theme Name: HTML5 Blank
	Theme URI: http://html5blank.com
	Description: HTML5 Blank WordPress Theme
	Version: 1.4.3
	Author: Todd Motto (@toddmotto)
	Author URI: http://toddmotto.com
	Tags: Blank, HTML5, CSS3

	License: MIT
	License URI: http://opensource.org/licenses/mit-license.php
*/

body, h1, h2, h3, h4, h5, h6, p {font-family: 'Open Sans', sans-serif;}
h1{font-weight:bolder;font-size: 50px;margin-bottom:20px;margin-top: 0px;}
p {font-size: 16px;line-height: 23px;}
.img-responsive{width:100%;}
ul.thumbnails { margin-bottom: 0px;padding: 0;}

.fixed{position: fixed;
    z-index: 99;
    width: 100%;}

.wpcf7 input, .wpcf7 textarea{width:100%;border: #ebebeb solid 1px;padding: 10px;margin-bottom: 20px;margin-top: 5px;}

.wpcf7 .wpcf7-submit{color: white;background: #0b0e5c;border: none;padding: 15px;}

.label-name{float:left;width:48%;padding-right:2%;}
.label-email{float:right;width:48%;}
.label-phone{float:left;width:48%;padding-right:2%;}
.label-company{float:right;width:48%;}
.label-area{width:100%;}

.contact-form{border-top: solid 1px grey;}

.home-content li{list-style-type:circle!important;margin-left:20px;font-size: 16px;line-height:23px;}

ul {padding-left:0px!important;}

.top-bar{background: white;color: white;padding: 10px 0px 10px 0px;}
.top-left{float:left;}
.top-right{float: right;}
.fa-facebook{margin-right:15px;}

.background-image{background:#0b0e5c;padding:40px;background-size: cover;}
.background-image h2 {color:white!important;}

.banner{background-color: black;
    color: white;
    padding: 20px;
    opacity: 0.6;
    margin-top: -60px;}

.vert-align{position: relative;top: 40%;transform: translateY(-40%);}
.logo-img{max-width: 500px;width:100%;}

.single .content img{width:100%;height:100%;}

.home-h1{font-weight:bolder!important;font-size: 80px!important;}
.home-h2{font-weight:600;font-size: 30px;margin-bottom:20px;color:#333;}
.h2-home-a{color:#333!important;} 

.starter-template {text-align: center;color:white!important;margin-top:70px;margin-top: 20px;}

.block{padding-top:60px;padding-bottom:60px;}
.margin-top{margin-top: 20px;}
.padding-top{padding-top: 20px;}
.margin-bot{margin-bottom:20px;}
.minus{margin-top: -35px!important;margin-bottom:40px;background: white;}
.date{margin-bottom:10px;color:#999;}
.home .stock{display: none!important;}

/*Buttons*/
.button{font-size: 16px;padding: 12px 23px;border-radius: 5px;background-color: #d30a0a!important;color:white!important;float: left;text-decoration: none;margin-top:10px;border:none;}
.button:hover{text-decoration: none;}
.banner-button{margin-left:10px;width: 218px;white-space: normal;font-weight: 600;background-color: #d30a0a;outline: none;text-align: center;line-height: 17px;border-width: 0px;padding: 12px 15px;font-size: 17px;color: rgb(255, 255, 255);}
.banner-button2{width: 218px;font-weight: 400;color: white;border-color: white;text-align: center;line-height: 17px;border-width: 2px;padding: 12px 15px;font-size: 17px;border-style: solid;background-color: rgba(0, 0, 0, 0);margin-right:10px;}

/*Nav*/
.buy{border-radius: 3px;padding:10px 15px 10px 15px!important;margin-top:5px;margin-left:10px;border: white solid 1px;}
#navbar{float:left;}
.navbar-brand {padding: 7px 15px;}
.navbar{padding-top:10px;margin-bottom: 0px;}
.navbar-fixed-top {position: static;}
.navbar-inverse{background: #0b0e5c;border: none;padding-bottom: 15px;}
.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover {color: #fff;background: none;}
.logo{width:170px;}
.background{background-image: url("/slipstop/background/slip.jpg"); height:400px;background-size: cover;}
.menu-icons{float:right; display: inline;}
.menu-icons li{display: inline-block;}
.nav{float:right;}
.nav li a{color:white!important;font-weight: 600;text-transform: capitalize;font-size: 16px;}
.icon-space{margin-left:40px;}
.torch-contain{text-align: center;}
.black-nav{background:#111;}

.header-icons-contain{position: relative;}
.header-icons{position: absolute;right: 0;list-style: none;margin-top:14px;font-size: 16px;}
.header-icons li{display: inline-block;position: relative;}
.header-icons li a{color:white;padding:15px 15px 15px 15px}

.fa-facebook, .fa-twitter{color:#0b0e5c;margin-top:20px;}
.fa-facebook::before, .fa-twitter::before{font-size: 20px;}
.call{color:#0b0e5c;margin-top:20px;font-weight: 600;font-size: 16px;}
.email{color:#0b0e5c;margin-top:20px;font-weight: 600;font-size: 16px;}

.pad-bot{padding-bottom:40px;}

.home-section{height: auto;background: white;z-index: 1;position: relative;padding-bottom: 60px;padding-top:200px;}

.background-grey{background:#eee;}
.white-text{color:black;}

.footer-icons{padding-left:0px;font-size: 35px;}
.footer-icons li{display: inline-block;}
.footer-icons a{color:white;}

.contact-icons{padding-left:0px;font-size: 35px;}
.contact-icons li{display: inline-block;}
.contact-icons a{color:black;}

/*faq*/

        .panel {
            border-width: 0 0 1px 0;
            border-style: solid;
            border-color: #fff;
            background: none;
            box-shadow: none;
        }
        .panel-title a:hover{text-decoration: none;}
        
        .panel:last-child {
            border-bottom: none;
        }
        
        .panel-group > .panel:first-child .panel-heading {
            border-radius: 4px 4px 0 0;
        }
        
        .panel-group .panel {
            border-radius: 0;
        }
        
        .panel-group .panel + .panel {
            margin-top: 0;
        }
        
        .panel-heading {
            background-color: #d30a0a!important;
            border-radius: 0;
            border: none;
            color: #fff;
            padding: 0;
        }
        
        .panel-title a {
            display: block;
            color: #fff;
            padding: 15px 70px 15px 15px!important;
            position: relative;
            font-size: 22px;
            font-weight: 400;
        }
        
        .panel-body {
            background: #fff;
        }
        
        .panel:last-child .panel-body {
            border-radius: 0 0 4px 4px;
        }
        
        .panel:last-child .panel-heading {
            border-radius: 0 0 4px 4px;
            transition: border-radius 0.3s linear 0.2s;
        }
        
        .panel:last-child .panel-heading.active {
            border-radius: 0;
            transition: border-radius linear 0s;
        }
        /* #bs-collapse icon scale option */
        
        .panel-heading a:before {
            content: '+';
            position: absolute;
            right: 35px;
            top: 10px;
            font-size: 24px;
            transition: all 0.5s;
            transform: scale(1);
        }
        
        .panel-heading.active a:before {
            content: '-';
            transition: all 0.5s;
            transform: scale(0);
        }
        
        #bs-collapse .panel-heading a:after {
            content: '-';
            font-size: 24px;
            position: absolute;
            font-family: 'Material Icons';
            right: 35px;
            top: 10px;
            transform: scale(0);
            transition: all 0.5s;
        }
        
        #bs-collapse .panel-heading.active a:after {
            content: '-';
            transform: scale(1);
            transition: all 0.5s;
        }
        /* #accordion rotate icon option */
        
        #accordion .panel-heading a:before {
            content: '-';
            font-size: 24px;
            position: absolute;
            font-family: 'Material Icons';
            right: 35px;
            top: 10px;
            transform: rotate(180deg);
            transition: all 0.5s;
        }
        
        #accordion .panel-heading.active a:before {
            transform: rotate(0deg);
            transition: all 0.5s;
        }

/*slider*/
.thumbnail{margin-bottom: 0px!important;margin-top: 20px!important;}

.thumbnails li> .fff .caption { background:#2b2e35;padding:10px;}

ul.thumbnails { margin-bottom: 0px!important;padding-left:0px;}

/* Thumbnail Box */
.caption h4 {color: #fff;}

.caption p {  color: #fff;}

/* Carousel Control */
.control-box {text-align: left;width: 100%;}
.carousel-control{background: #666;border: 0px;border-radius: 0px;display: inline-block;font-size: 34px;font-weight: 200;line-height: 18px;opacity: 0.5;padding: 4px 10px 0px;position: static;height: 30px;width: 15px;}

.button-blue{font-size: 16px;padding: 12px 23px;border-radius: 5px;color:white!important;float: left;text-decoration: none;margin-top:10px;border:none;border: solid white 2px;}
.footer-banner{background: #0b0e5c;background-size: cover;padding:50px 0px;}
.footer-banner .button-blue{margin-top: 0px!important;float:none!important;margin-left: 40px;}
.mobile-button{display:none;}
.footer-banner-text{color:white;font-size:35px;text-align: center;}
footer{color:white;background:#0b0e5c;}
.border-bot{border-bottom: 2px solid white;padding-bottom: 10px;line-height: 26px;margin-top: 0;font-weight: bold;}
.border-top{border-top: 2px solid white;padding-top: 10px;margin-top: 0;}
.badges{background:white;text-align: center;padding:10px 0px;}
.badges img{margin-left:30px;}
.copyright{text-align: center;background: #0b0e5c;padding:20px;color:white;}
.copyright a{color:white!important;}

/*hamburger menu*/
/* The Overlay (background) */
.overlay {
    /* Height & width depends on how you want to reveal the overlay (see JS below) */   
    height: 100%;
    width: 0;
    position: fixed; /* Stay in place */
    z-index: 2; /* Sit on top */
    left: 0;
    top: 0;
    background-color: rgb(0,0,0); /* Black fallback color */
    background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
    overflow-x: hidden; /* Disable horizontal scroll */
    transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

/* Position the content inside the overlay */
.overlay-content {
    position: relative;
    top: 10%; /* 25% from the top */
    width: 100%; /* 100% width */
    text-align: center; /* Centered text/links */
    margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}

/* The navigation links inside the overlay */
.overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #fff;
    display: block; /* Display block instead of inline */
    transition: 0.3s; /* Transition effects on hover (color) */
}

/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus {
    color: #f1f1f1;
}

/* Position the close button (top right corner) */
.overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
}

/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
    .overlay a {font-size: 20px}
    .overlay .closebtn {
        font-size: 40px;
        top: 15px;
        right: 35px;
    }
}

/* Mobile Only */
@media (max-width: 991px) {
    .logo {width:130px!important;} 
    .nav-slope:before{top:-25px;}
    .nav li a{font-size: 14px;}
    .nav {margin-right: 90px;}
    .home-section{padding-top: 250px;}
}

/* Mobile Only */
@media (max-width: 767px) {
    .page-header, .control-box {text-align: center;} 
    .mobile-top{margin-top: 30px;float: left;}
}

@media only screen and (max-width: 767px) {
	
.header-icons{margin-right:55px;}
.background{background-attachment:scroll;}
.top-slope-white{height:50px!important;}
.top-slope-grey2{height:70px!important;}
.top-slope-grey:before {height:30%;}
.home-section{padding-top: 320px;margin-bottom: 30px;}
.padding-top{padding-top: 0px;}
.footer-banner-text{color:white;font-size:20px;text-align: center;}
.footer-banner{background-attachment: scroll!important;}

} 

@media only screen and (max-width: 515px) {
	
	.home-h1{font-weight:bolder;font-size: 40px!important;}
	.home-h2{font-weight:bolder;font-size: 30px;}
	.banner-button{margin-left: 0px!important;}
	.banner-button2{margin-right: 0px!important;margin-bottom: 15px;}
	.logo{width:120px!important;}
	.nav-slope:before{top:-35px;}
	.footer-banner .button-blue{margin-top: 20px!important;margin-left: 0px;display:none;}
	.mobile-button{display:block!important;width:100%;text-align: center;}
	.blue-ban{font-size: 20px!important;}
	.fixed {position: static;}
	.home-section {padding-top: 40px;}

} 


/* carousel */
#quote-carousel 
{
  padding: 0 10px 30px 10px;
  margin-top: 30px;
}

/* Control buttons  */
#quote-carousel .carousel-control
{
  background: none;
  color: #222;
  font-size: 2.3em;
  text-shadow: none;
  margin-top: 30px;
}
/* Previous button  */
#quote-carousel .carousel-control.left 
{
  left: -12px;
}
/* Next button  */
#quote-carousel .carousel-control.right 
{
  right: -12px !important;
}
/* Changes the position of the indicators */
#quote-carousel .carousel-indicators 
{
  right: 50%;
  top: auto;
  bottom: 0px;
  margin-right: -19px;
}
/* Changes the color of the indicators */
#quote-carousel .carousel-indicators li 
{
  background: #c0c0c0;
}
#quote-carousel .carousel-indicators .active 
{
  background: #333333;
}
#quote-carousel img
{
  width: 250px;
  height: 100px
}
/* End carousel */

.item blockquote {
    border-left: none; 
    margin: 0;
}

.item blockquote img {
    margin-bottom: 10px;
}

.item blockquote p:before {
    content: "\f10d";
    font-family: 'Fontawesome';
    float: left;
    margin-right: 10px;
}



/**
  MEDIA QUERIES
*/

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) { 
    #quote-carousel 
    {
      margin-bottom: 0;
      padding: 0 40px 30px 40px;
    }
    
}

/* Small devices (tablets, up to 768px) */
@media (max-width: 768px) { 
    
    /* Make the indicators larger for easier clicking with fingers/thumb on mobile */
    
    #quote-carousel .carousel-indicators {
        bottom: -20px !important;  
    }
    #quote-carousel .carousel-indicators li {
        display: inline-block;
        margin: 0px 5px;
        width: 15px;
        height: 15px;
    }
    #quote-carousel .carousel-indicators li.active {
        margin: 0px 5px;
        width: 20px;
        height: 20px;
    }
}
