/*
Template Name: Tirex - ECommerce - Auto Tires Template
Description: HTML5 Bootstrap Angular ECommerce Template for Auto Tires Sale
Version: 1.0
Author: Tirex
Author URL: http://www.tirex.ca

    **************MENU**************

    1. Bootstrap Overwrite (html, body, etc)
    2. Core CSS (html, body, etc)
    3. Typography (headings, paragraphs, blockquotes, etc)
    4. Helper Classes (special classes for ease of use)
    5. General CSS (various elements)
    6. Mobile CSS (responsive css for mobile devices)

*/


/*.hide-bullets {
    list-style: none;
    margin-left: -100px;
    margin-top: 20px;
}

.thumbnail {
    padding: 0;
}

.carousel-inner .item img, .carousel-inner .item a img {
    width: 100%;
}
#slider-thumbs {
    overflow-x: auto;
    white-space: nowrap;
}*/


/***************************************/
/******** 1. Bootstrap Overwrite *******/
/**************************************/

/* Primary button */
.btn-primary {
    color: #fff;
    background-color: #1a1a1a;
    border-color: #1a1a1a;
}

.btn-primary:hover {
    color: #fff;
    background-color: #000000;
    border-color: #000000;
}

.btn-primary:focus, .btn-primary.focus {
    -webkit-box-shadow: 0 0 0 2px rgba(2, 117, 216, 0.5);
    box-shadow: 0 0 0 2px rgba(2, 117, 216, 0.5);
}

.btn-primary.disabled, .btn-primary:disabled {
    background-color: #565656;
    border-color: #565656;
}

.btn-primary:active, .btn-primary.active,
.show > .btn-primary.dropdown-toggle {
    color: #fff;
    background-color: #000000;
    background-image: none;
    border-color: #000000;
}


/* Navbar */
.header .navbarbox {
    background-color: #1a1a1a;
    color: #fff;
}

.navbar-light .navbar-nav .nav-link {
    color: #fff;
}

.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
    color: #fff;
    background-color: #000000;
}

.navbar-light .navbar-nav .open > .nav-link,
.navbar-light .navbar-nav .active > .nav-link,
.navbar-light .navbar-nav .nav-link.open,
.navbar-light .navbar-nav .nav-link.active {
    color: #fff;
    background-color: #000000;
}

.navbar-toggler-icon {
    background-color: #ffffff;
}

/* Dropdown Menu */
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 10rem;
    padding: 0.5rem 0;
    margin: 0.125rem 0 0;
    font-size: 1rem;
    color: #fff;
    text-align: left;
    list-style: none;
    background-color: #c09f80;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0.25rem;
}

.dropdown-divider {
    height: 1px;
    margin: 0.5rem 0;
    overflow: hidden;
    background-color: #fff;
}

.dropdown-item {
    display: block;
    width: 100%;
    padding: 3px 1.5rem;
    clear: both;
    font-weight: normal;
    color: #fff;
    text-align: inherit;
    white-space: nowrap;
    background: none;
    border: 0;
}

.dropdown-item:focus, .dropdown-item:hover {
    color: #fff;
    text-decoration: none;
    background-color: #271D18;
}

.dropdown-item.active, .dropdown-item:active {
    color: #fff;
    text-decoration: none;
    background-color: #565656;
}

.dropdown-item.disabled, .dropdown-item:disabled {
    color: #636c72;
    cursor: not-allowed;
    background-color: transparent;
}


.img-list-thumbnail {
    padding: 0;
    border: none;
    max-width: 100px;
    height: auto;
}

.img-thumbnail {
    padding: 0;
    border: none;
    width: 100%;
    height: auto;
}

.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
    display: block;
}



/************************/
/******** 2. Core *******/
/************************/

html,body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

body {
    color: #1a1a1a;
    font-size: 14px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    letter-spacing: 0.01em;
}

a {
    color: #101112;
}

a:hover, a:focus, a:active:hover {
    text-decoration: none;
    outline: none;
    color: #101112;
}

hr {
    border: 0;
    border-bottom: 1px solid #1a1a1a;
    position: relative;
}

/***************************/
/****** 3. Typography ******/
/***************************/

h1, h2, h3, h4, h5, h6 {
    font-family: serif;
    color: #1a1a1a;
    text-transform: capitalize;
    margin-top: 0em;
    margin-bottom: 0.8em;
    line-height: 1.2;
}

h1 {font-size: 38px;
    color: #1a1a1a;}
h2 {font-size: 32px;}
h3 {font-size: 26px;}
h4 {font-size: 20px;}
h5 {font-size: 16px;}
h6 {font-size: 14px;}

.h1 .small, .h1 small,
.h2 .small, .h2 small,
.h3 .small, .h3 small,
.h4 .small, .h4 small,
.h5 .small, .h5 small,
.h6 .small, .h6 small,
h1 .small, h1 small,
h2 .small, h2 small,
h3 .small, h3 small,
h4 .small, h4 small,
h5 .small, h5 small,
h6 .small, h6 small
{
    color: #1a1a1a;
}

.heading {
    font-weight: 400;
}

/*******************************/
/****** 4. Helper Classes ******/
/*******************************/

/* Font weight can be chosen */
.thin {font-weight:300;}
.normal {font-weight:400;}
.bold {font-weight:700;}

/* Font Size */
.font12 {font-size: 11px;}
.font16 {font-size: 16px;}
.font18 {font-size: 18px;}
.font20 {font-size: 20px;}
.font22 {font-size: 22px;}
.font24 {font-size: 24px;}
.font26 {font-size: 26px;}
.font28 {font-size: 28px;}
.font30 {font-size: 30px;}
.font32 {font-size: 32px;}
.font34 {font-size: 34px;}
.font36 {font-size: 36px;}

/* Color */
.color1 {color: #000000;}
.color2 {color: #1a1a1a;}
.color3 {color: #101112;}
.color4 {color: #565656;}
.color5 {color: #585858;}
.inverse {color: #fff;}

/* Background Color */
.bgcolor1 {background-color: #000000;}
.bgcolor2 {background-color: #1a1a1a;}
.bgcolor3 {background-color: #b2b2b2;}
.bgcolor4 {background-color: #cccccc;}
.bgcolor5 {background-color: #fdf7f7;}
.bginverse {background-color: #fff}

/* Margin */
.nomargin {margin:0;}
.margintop-10 {margin-top:10px;}
.margintop-20 {margin-top:20px;}
.margintop-40 {margin-top:40px;}
.margintop-60 {margin-top:60px;}
.margintop-80 {margin-top:80px;}
.margintop-100 {margin-top:100px;}
.marginbottom-20 {margin-bottom:20px;}
.marginbottom-40 {margin-bottom:40px;}
.marginbottom-60 {margin-bottom:60px;}
.marginbottom-80 {margin-bottom:80px;}
.marginbottom-100 {margin-bottom:100px;}

/* Padding */
.nopadding {padding: 0}
.padding-5 {padding: 5px;}
.padding-10 {padding: 10px;}
.paddingtop-10 {padding-top:10px;}
.paddingtop-20 {padding-top:20px;}
.paddingtop-40 {padding-top:40px;}
.paddingtop-60 {padding-top:60px;}
.paddingtop-80 {padding-top:80px;}
.paddingtop-100 {padding-top:100px;}
.paddingbottom-20 {padding-bottom:20px;}
.paddingbottom-40 {padding-bottom:40px;}
.paddingbottom-60 {padding-bottom:60px;}
.paddingbottom-80 {padding-bottom:80px;}
.paddingbottom-100 {padding-bottom:100px;}
.paddingleft-20 {padding-left: 20px;}

.text-muted {color: rgba(255, 255, 255, 0.8);}
.text-primary {color: #c09f80;}
.text-success {color: #41c741;}
.text-info {color: #00c4ff;}
.text-warning {color: #ffc800;}
.text-danger {color: #e62c22;}

.bg-primary {background-color: #c09f80; color: #fff; padding:0px 5px;}
.bg-success {background-color: #41c741; color: #fff; padding:0px 5px;}
.bg-info {background-color: #00c4ff; color: #fff; padding:0px 5px;}
.bg-warning {background-color: #ffc800; color: #fff; padding:0px 5px;}
.bg-danger {background-color: #e62c22; color: #fff; padding:0px 5px;}

.xs-center, .sm-center, .md-center, .lg-center{     /* Center Text Based On Device Width */
    display: block;
    text-align: center;
}

.justify{text-align:justify;}

.w-90 {
    width: 90%;
}

/*******************************/
/********* 5. General CSS *********/
/*******************************/

/* Back To Top */
#back {
    display: none;
    position: fixed;
    right: 25px;
    bottom: 20px;
    height: 40px;
    width: 40px;
    background-color: #c09f80;
    color: #fff;
    line-height: 38px;
    text-align: center;
    cursor: pointer;
    border-radius: 4px;
    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
    font-size: 20px;
    z-index: 99;
}

/* Subscription */
.subscription-link {text-decoration: underline;}

/**********************/
/***** 6. Mobile CSS *****/
/**********************/

/* Small Devices, Tablets */
@media only screen and (min-width: 768px){
    
    .p20 {padding:20px;}
    .p40 {padding:40px;}
    .p60 {padding:60px;}
    .p80{ padding:80px;}
    .p100 {padding:100px;}
    
    .header .topbar .contact {
        width: inherit;
        float: right;
        text-align: right;
    }
    
    .header .topbar .socialmedia {
        width: inherit;
        float: left;
        text-align: left;
    }
    
    .header .emergency{
        padding: 18px 0px 18px 18px;
    }

    .flex{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
    
    .not-found .nf-icon{
        text-align: right;
    }
    
    .not-found .nf-icon,
    .not-found .nf-text{
        display: table-cell;
        vertical-align: middle;
    }

    .navbar-right {
        float: right!important;
        margin-right: -15px;
    }
}