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

a {
    color: #de3c43;
    -webkit-transition: color .2s;
    transition:color .2s;
}

a:hover {
    color:#FF8186;
    -webkit-transition: color .2s;
    transition:color .2s;
}

html {
        background-color: #f7f7f7;
}

body { 
    font-family: 'Asap', sans-serif;
    padding-bottom: 0px;
    background-color: #f7f7f7;
    font-size:16px;
}

.body-bg {
    background-image: url("../image/body-background.jpg");
    background-size: contain;
    background-repeat: no-repeat;
    background-color: #f7f7f7;
}


h1, h2, h3, h4, h5, h6 {
    font-family: 'PT Serif', serif;
}
h1{font-size:30px;}
h2{font-size:24px; font-style:none}
h3{font-size:20px;}

/* NAV STYLES */

ul.nav li.dropdown:hover ul.dropdown-menu {
    display: block;
    margin-bottom: 10px;
}

.navbar {
    background-color: #de3c43;
    width: 100%;
    color: white;
    margin-bottom:0px;
}

.navbar a {
    color: white;
    font-family: 'PT Serif', serif;

}

.nav>li>a:hover {
    background-color: transparent;
}

.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover {
    color: #fff;
    background-color: transparent;
}

.navbar-inverse .navbar-nav>li>a {
    color: #FFFFFF;
      -webkit-transition: border .2s;
    transition:border .3s;
    border-bottom: 4px solid #de3c43;
    padding-bottom: 11px;
}

.navbar-static-top {
    border-width: 0px;
}

.navbar-inverse .navbar-nav>li>a:hover {
    border-bottom: 4px solid white;
    padding-bottom: 11px;
         -webkit-transition: border .2s;
    transition:border .2s;
}

.navbar-inverse .navbar-toggle {
    border-color: #FFF;
}

.navbar-inverse .navbar-toggle:hover {
    background-color: transparent;
}

.navbar-inverse .navbar-toggle:focus {
    background-color: transparent;
}

.navbar-collapse {

    border-top: 0px solid transparent;
    -webkit-box-shadow: inset 0 0px 0 rgba(255,255,255,.1);
    box-shadow: inset 0 0px 0 rgba(255,255,255,.1);
}

.nav>li>a {
    padding-left: 20px;
    padding-right: 20px;
}

@media only screen and (min-width: 768px) {
.navbar-wrapper .navbar {
    box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.17);
}
}



.navbar-nav {
    margin: 0px -15px;
    float: right;
}


.login-social {
    max-width: 230px;
    float: right;
}

.social {
    float: right;
}

.social a {
    margin-left: 1px;
}

.social img {
        height: 34px;
    width: auto;
}

.top-button {
    padding: 8px 15px;
    background-color: #de3c43;
    float: right;
    color: white;
    border-radius: 2px;
    margin-left: 8px;
    margin-bottom: 20px;
    font-size: 12px;
         -webkit-transition: background-color .1s;
    transition:background-color .1s;
}

.top-button:hover {
    color: white;
    background-color: #C7353C;
    text-decoration: none;
     -webkit-transition: background-color .1s;
    transition:background-color .1s;
}
    


.logo img {
    width: 130px;
    height: auto;
    margin-bottom: 12px;
    margin-top: 12px

}
.navbar-wrapper{background-color:rgba(255,255,255,.8);}
.navbar-wrapper > .container {
    padding-right:15px;
    padding-left: 15px; 
}

.navbar-wrapper .navbar {
    border-radius: 0px;
}

@media only screen and (max-width: 401px) {
    .login-social {
        max-width: 200px;
    }
    .top-button {
        padding: 8px 11px;
        margin-left: 4px;
    }
    .social img {
        height: 29px;
    }
}

/* Carousel */

.carousel-caption {
    position: absolute;
    top:200px;
    right: 20%;
    left: 20%;
    padding-bottom: 30px;
    padding-top: 20px;
    color: #fff;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0,0,0,.6);
}

.carousel {
    height: 550px;
    margin-bottom: 0px;
}

.carousel .item {
    height: 550px;
}

.slide-1 {
    height: 550px;
    background-image:url("../image/home-banner-1.jpg");
    background-size: cover;
}


.sub-features {
    min-height: 140px;
}
.sub-features:after {content:"";display: table;clear:both;}
/* Overlay Nav item */


#overlay-nav-bar {
    height: 120px;
    background-color: #555;
        background-image: url("../image/chalkboard.jpg");

    position: relative;
}

.overlay-nav-item {
    width: 12.5%;
    float: left;
    height: 100%;
    margin-top: 0px;
    
}

.overlay-nav-item p {
    text-align: center;
    margin-top: 0px;
    color: white;
    letter-spacing: 1px;
         -webkit-transition: color .2s;
    transition:color .2s;
}

.overlay-nav-item p:hover {
      color:#FF8186;
             -webkit-transition: color .2s;
    transition:color .2s;
}

.overlay-nav-item img {
    margin-left: auto;
    margin-right: auto;
    display: block;
    margin-top: 6px;
    width: auto;
    max-height: 80px;
    text-align: center;
    padding: 10px;
   -webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    -o-transition-duration: 0.2s;
    transition-duration: 0.2s;

    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;

    overflow:hidden;

}

.overlay-nav-item img:hover {
    -webkit-transform:rotate(10deg);
    -moz-transform:rotate(10deg); 
    -o-transform:rotate(10deg);
}

.overlay-nav-item a {
    text-decoration: none;
    color: black;
}
#overlay-nav-bar {
    height: auto;
}/* NOT SURE WHY BUT THIS IS NEEDED OUTSIDE OF THE SCREEN REQUIREMENT, TILES BROKE WITHOUT THIS BETWEEN 1020px - 12xx px
@media only screen and (max-width: 1020px) {
    #overlay-nav-bar {
    height: auto;
    }
}*/

@media only screen and (max-width: 800px) {
.overlay-nav-item {
    width: 25%;
}
#overlay-nav-bar {
    height: auto;
}
}

.sidebar-rs {
    width: 27%;
    border-radius: 2px;
    float: left;
    padding: 20px;
}

.body-rs {
    position: relative;
    margin-right: 3%;
    float: left;
}

.sidebar-ls {
    float: left;
    margin-right: 3%;
}

.body-ls {
    float: right;
}

.body-full {
    width: 100%;
   padding:15px 50px;
    border-radius: 2px;
}

.body {
    width: 70%;
    padding:15px 50px;
    border-radius: 2px;
}

.sidebar { 
    width: 27%;
    padding: 20px;
    border-radius: 2px;


}
.content-bg {
    min-height: 550px;
    background-image: url(../image/content-bg.png);
    background-repeat: repeat-x;
        border-radius: 2px;

}

.body-bg p {
    font-size: 20px;
    line-height: 32px;
font-family: 'PT Serif', serif;
    color: #616161;
    margin-bottom: 25px;
}

.container.content {
position: relative;
z-index: 3;
    top: -120px;
}

.content-header {
    max-height: 600px;
}

.content-heading p {
    font-size: 16px;
}

.content-heading h1 {
    font-size: 30px;
    margin-top: 60px;
}

.content h2, h3, h4, h5, h6 {
    color: #343434;
}

.content hr {
    border: 3px solid rgba(172, 172, 172, .45);
    width: 77px;
    margin-top: 30px;
    margin-bottom: 25px;
}

.content h2 {
    font-size: 24px;
    text-transform: uppercase;
    text-align: center;
}

.content h3 {
    font-size: 20px;
}

/* Features */ 
.feature { 
    background-color: #444;
    width: 25%;
    float: left;
}

.feature img {
    width: 100%;
    	-webkit-filter: grayscale(0);
	filter: grayscale(0);
	-webkit-transition: .2s ease-in-out;
	transition: .2s ease-in-out;
}

.feature img:hover {
    -webkit-filter: grayscale(100%);
	filter: grayscale(100%);
}


.final-feature {
    margin-bottom: 70px;
}

/* footer */

footer {
background-image: -webkit-gradient(linear, right top, left top, color-stop(0.33, rgb(66,66,67)), color-stop(0.67, rgb(222,60,67)));
background-image: -moz-linear-gradient(center bottom, rgb(14,173,173) 33%, rgb(0,255,255) 67% );
background: linear-gradient(right, rgb(14,173,173), rgb(0,255,255));
background: -o-linear-gradient(right, rgb(14,173,173), rgb(0,255,255));
padding-top: 5px;
color: white;
font-size: 17px;
}

.outline {
    margin-top: 50px;
    text-align: right;
    width: 95%;
}

.bg-color {
    min-height: 300px;
    background-color: #333;
    background-image: url("../image/chalkboard.jpg");
    padding: 40px 0px;
}


.footer-col ul li {
    list-style-type: none;
    margin-bottom: 20px;
}
.footer-col {
    margin-bottom: 40px;
}

.footer-col a {
    color: white;
    text-decoration: underline;
}

.footer-col h3 {
    margin-bottom: 14px;
    border-bottom: 2px solid white;
    padding-bottom: 10px;
    font-size: 20px;
    color: white;
    
}

/* home cards */
.card-block-1 {
    width: 760px;
    float: left;
    margin-right: 25px;
}

.cards img {
    width: 100%;
    height: auto;
}

.card-block-2 {
    float: left;
    width: 355px;
    margin-bottom: 25px;
}

.card-block-3 {
    width: 1140px;
}

.card-block-3 div {
    float: left;
}

.block-5 {
    margin-right: 25px;
    width: 366px;
}

.block-6 {
    width: 749px;
}

.card-block-1 div {
    float: left;
}

.card-block-1 div img {
    width: 100%;
    height: auto;
}

.block-1 {
    margin-bottom: 25px;
}

.block-2 {
    margin-right: 25px;
}

@media only screen and (max-width: 1200px) {
    .card-block-1 {
        width: 100%;
    }
    .block-1 {
        width: 940px;
    }
    .block-6 {
        width: 940px;
    }
    .block-3 {
        width: 457px;
        margin-bottom: 25px;
    }
    .block-4 {
        width: 457px;
    }
    .block-2 {
        width: 457px;
    }
    .card-block-2 {
        width: 457px;
        margin-right: 25px;
        margin-bottom: 25px;
    }
    .block-5 {
        width:457px;
        margin-right:0px;
    }
}

@media only screen and (max-width:993px) {
    .block-1 {
        width: 720px;
    }
    .card-block-1 {
        width: 720px;
        margin-right: 0px;
    }
    .block-2 {
        width: 345.5px;
    }
    .block-3 {
        width: 345.5px;
    }
    .card-block-2 {
        width: 345.5px;
    }
    .block-4 {
        width: 345.5px;
    }
    .block-5 {
        width: 345.5px;
    }
    .block-6 {
        width: 720px;
    }
    .card-block-3 {
        width: 720px;
    }
    .feature {
        width: 50%;
    }
}

@media only screen and (max-width: 768px) {
    .card-block-1, .card-block-2, .card-block-3, .block-1, .block-6 {
        width: 100%;
    }
    .block-2, .block-3, .block-5 {
        width: 48%;
    }
    .block-2 {
        margin-right: 4%;
    }
    .card-block-2 {
        width: 48%;
        margin-right: 4%;
    }
    .block-4 {
        width: 100%;
    }
    .card-block-1 {
        margin-right: 0px;
    }
    .final-feature {
        margin-bottom: 40px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .carousel-caption {
    bottom: 80px;
}   
}

@media only screen and (max-width: 450px) {
    .block-1, .block-3, .card-block-2 {
        margin-bottom: 15px;
    }
}

@media only screen and (min-width: 768px) {
.navbar-wrapper {
    margin-top: 0px;
}
}
.on-desktop {display:block!important;}
b.caret.on-desktop {display:inline-block!important;}
.on-mobile {display:none!important;}

@media only screen and (max-width: 767px) {

.on-desktop {display:none!important;}
b.caret.on-desktop {display:none!important;}
.on-mobile {display:block!important;}
 
ul.nav { width:95%; }
 
ul.nav li.dropdown .dropdown-toggle.on-mobile {
    width:10px; display:inline-block;position: absolute;
    top: 0px;
    right: 30px;
}
 
ul.nav li.dropdown.open > a {background-color: transparent;}
ul.nav li.dropdown.open > ul > li > a {color: #fff!important;padding:6px 34px;line-height: 28px;}
 
.nav>li>a {
    width: 50%;
    position: relative;
}
 
.nav>li .caret {
    border-top: 10px dashed;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
}
.max-height {
    height: 100vh;
}
    
.dropdown-menu>li>a:hover {
    color: #FFFFFF;
    text-decoration: none;
    background-color: transparent;
}    
    
.navbar-inverse .navbar-nav>li>a:hover {
    border-bottom: 0px solid white;
    padding-bottom: 10px;
}
    
.dropdown-menu {
    padding: 0px 0;
    margin: 0px 0 0;
    background-color: transparent;
    border: 0px solid #ccc;
    border: 0px solid rgba(0,0,0,0);
    border-radius: 4px;
    -webkit-box-shadow: 0px rgba(0,0,0,0);
    width: 100%;
    box-shadow: 0px 0px 0px rgba(0,0,0,0);
    position: inherit;
}    
    
    .dropdown-menu>li>a {
    padding: 6px 34px;
    line-height: 28px;
    color: #FFF;
}
    
nav {
    padding: 5px 0px 5px 0px;
}
    
.navbar-nav {
    float: left;
}    
}

@media only screen and (min-width: 768px) and (max-width: 1199px) {
    .product-info > .left + .right { float:left; margin-left: 0px; }
}

.show-on-mini { display:none; }
.content input[type="radio"] {position: relative;margin-left:0px;}
@media only screen and (max-width: 767px) {
    .max-height {
        height: auto;
    }
    .navbar-inverse .navbar-nav>li>a:hover {
        border-bottom: transparent;
        padding-bottom: 11px;
    }
    .navbar-inverse .navbar-nav>li>a {
        border-bottom: 0px solid #de3c43;
    }

    .col-md-4 {
        clear: both;
    }
    .body {
        width: 100%;
        margin-bottom: 30px;
        padding: 20px 15px;
        font-size: 1em;
    }
    .sidebar {
        width: 100%;
    }
    .body-bg p {
        font-size: 1.1em;
        line-height: 1.6em;
    }
    .body .product-info {  }
    .body .product-info .left {  }
    .body .product-info .right {  }
    .body .product-info > .left + .right { margin-left: 0px;float:left; }
    .body-full { padding:15px 15px; }
}

#tabs.htabs > a { display:inline-block; }
@media only screen and (max-width: 400px) {
    .container.content { padding-left:5px; padding-right:5px; }
    .body { padding:20px 0px; }
    .body-full { padding:15px 10px; }
    .body-full > form > .cart-info table thead > tr { display:none; }
    .body-full > form > .cart-info table tbody > tr { display:inline; }
    .body-full > form > .cart-info table tbody > tr > td { display:block; }
    #payment-new table.form tbody > tr > td { display:block; }
    #payment-new table.form tbody > tr > td input,
    #payment-new table.form tbody > tr > td select { width:80%; }
    #shipping-new table.form tbody > tr > td { display:block; }
    .checkout-content table tbody > tr > td { display:block; }
    #payment-method .checkout-content input[type="radio"] { position: absolute; }
    #shipping-new table.form tbody > tr > td input,
    #shipping-new table.form tbody > tr > td select { width:80%; }
    #tabs.htabs > a { display:block;width:100%; }
    #payment-method .buttons .right {float:left; width:100%;}
    
    #confirm .checkout-product table thead > tr { display:none; }
    #confirm .checkout-product table tbody > tr { display:inline; }
    #confirm .checkout-product table tbody > tr > td { display:block; }
    #confirm .checkout-product table tfoot > tr > td:first-child { display:none; }
    #confirm .checkout-product table tr > td { text-align: left; }
    
    textarea { width:100%; }
    .show-on-mini { display:inline-block; }
    .cart-info tbody .quantity, .cart-info tbody .price, .cart-info tbody .total { text-align: left; }
}

.product-list .name a, .box-product .name a {
    color: #de3c43;
    -webkit-transition: color .2s;
    transition:color .2s;
}
.product-list .name a:hover, .box-product .name a:hover {
    color:#FF8186;
    -webkit-transition: color .2s;
    transition:color .2s;
}

@media only screen and (min-width: 1201px) {
    #myCarousel.home-slider .carousel-inner .item .slide-1 > img {display:none;}
}
@media only screen and (max-width: 1200px) {
    /*.navbar-wrapper{background-color:rgba(255,255,255,.8);}*/
    #myCarousel.home-slider {height:auto;}
    #myCarousel.home-slider .carousel-inner {height:auto;}
    #myCarousel.home-slider .carousel-inner .item {height:auto;}
    #myCarousel.home-slider .carousel-inner .item .slide-1 {height:auto;margin-top:180px;background-image:none!important;}
    #myCarousel.home-slider .carousel-inner .container { height: 0px; }
}
@media only screen and (max-width: 767px) {
    #myCarousel.home-slider .carousel-inner .item .slide-1 {margin-top:150px; }
    #myCarousel.home-slider .carousel-inner .container .carousel-caption { top:15%; }
}
@media only screen and (max-width: 376px) {
    #myCarousel.home-slider .carousel-inner .item .slide-1 {margin-top:250px;}
}