/*----------------------------------------------------*\

	style.CSS

	CREATED BY: Steele Digital Media
	SITE: www.steeledigitalmedia.com
	CREATED: THU 06/13/18
	AUTHOR: Graham Steele

	DESCRIPTION:	Styles of appearance. Images, colour, font, shadows, etc.
					Also include any changes to layout styles included in "style-2ilp-v4.css"

					https://www.templatemonster.com/demo/61202.html

\*----------------------------------------------------*/

/*-------------------------------------------*\

   Layout

   Content
   - Reboot
   - Typography

   Components
   - Breadcrumb
   - Buttons
   - Navbar
   - Slogan

   Utilities

   Extend
   - Icons
   - Product Lead

\*-------------------------------------------*/


/*-------------------------------------------*\
   LAYOUT
\*-------------------------------------------*/

/*---------------------*\
    Header
\*---------------------*/

/* Change background and border of header area. */
.header-inner {
    background-color: rgb(255, 255, 255) !important;
    border-bottom: 1px solid  #eee;
    padding-top: 10px;
}
/* Change height of header area. */
.header-inner,
.header-spacer {
    height: 120px !important;
}

@media only screen and (min-width: 992px) {
    .header-inner {
        background-color: rgb(255, 255, 255) !important;
        border-bottom: 1px solid #dee2e6;
        box-shadow: none !important;
        padding: 0;
    }
    .header-inner,
    .header-spacer {
        height: 154px !important;
    }
}

/*---------------------*\
    Footer
\*---------------------*/

footer.section {
    background-color: #e03550;
    color: #fff;
    padding-top: 140px !important;
    padding-bottom: 158px !important;
}
footer h3 {
    color: #fff;
    margin-top: 0 !important;
}
footer a {
    color: #fff;
}
footer a:hover {
    color: #303030;
}

@media only screen and (min-width: 992px) {}

/*-------------------------------------------*\
    CONTENT
\*-------------------------------------------*/

/*---------------------*\
    Reboot
\*---------------------*/

body {
    color: #888 !important;
    font-family: Poppins, sans-serif !important;
    font-size: 17px !important;
    font-weight: 300 !important;
    line-height: 27px !important;
}

/*  Headings
\*---------------------*/
h1, h2, h3, h4, h5 {
    color: #303030;
    font-family: inherit;
    font-weight: 500;
}
h1 {
    font-size: 36px;
    line-height: 1.14;
    margin-bottom: 38px;
}
h3 {
    font-size: 21px;
    line-height: 1.28;
    margin: 15px 0 38px;
}
h5 {
    color: #fff;
    font-size: 30px;
    line-height: 1.35em;
    margin-bottom: 3vw;
}
@media only screen and (min-width: 768px) {
    h1 {
        font-size: 60px;
        margin-bottom: 3rem;
    } /* Index page */
    h2 {} /* Page Headings */
    h3 {
        font-size: 36px !important;
    } /* Home Page card headings */
    h4 {} /* Footer Links */
    .product-lead h5 {
        font-size: 36px;
    } /* Breadcrumb page */
}
@media only screen and (min-width: 992px) {
    h1 {
        font-size: 70px;
    } /* Index page */
    h1 + h1 {
        font-size: 80px;
    }
    h2 {} /* Page Headings */
    h3 {
        font-size: 42px !important;
    } /* Home Page card headings */
    h4 {} /* Footer Links */
    h5 {} /* Breadcrumb page */
}

h1 + p {
    font-size: 21px;
    line-height: 31px;
}

/*  Links
\*---------------------*/
a {
    color: #e03550;
    text-decoration: none !important;
}
a:hover, a:focus {
    color: #303030;
    text-decoration: none !important;
}


strong {
    font-weight: 500;
}

hr {
    border-color: #eee;
    margin-top: 84px !important;
    margin-bottom: 90px !important;
}
/*-------------------------------------------*\
   COMPONENTS
\*-------------------------------------------*/

/*---------------------*\
    Breadcrumbs
\*---------------------*/
.breadcrumb-wrapper {
    background-color: #262728;
    padding: 32px 0;
}
.breadcrumb-wrapper h2 {
    color: #fff;
    font-size: 22px;
    line-height: 36px;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
}
.breadcrumb li {
    color: #a6a6a6;
    line-height: 36px;
}
.breadcrumb a {
    color: #a6a6a6;
}
.breadcrumb a:hover {
    color: #fff;
}
@media only screen and (min-width: 768px) {
    .breadcrumb-wrapper h2 {}
}
@media only screen and (min-width: 992px) {
    .breadcrumb-wrapper h2 {}
}

/*---------------------*\
    Buttons
\*---------------------*/

.btn {
    background: transparent;
    border-radius: 0 !important;
    border-width: 2px;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: .8px;
    line-height: inherit!important;
    padding: 15px 30px !important;
    text-align: center;
    text-transform: uppercase;
    transition: all 0.3s ease-out;
}
.btn-primary {
    background-color: #e03550 !important;
    border-color: #e03550 !important;
    color: #fff !important;
}
.btn-primary:hover {
    background-color: transparent !important;
    border-color: #e03550 !important;
    color: #e03550 !important;
}
.btn-secondary {
    background-color: #e03550 !important;
    border-color: #e03550 !important;
    color: #fff !important;
}
.btn-secondary:hover {
    background-color: transparent !important;
    border-color: #e03550 !important;
    color: #e03550 !important;
}

.btn-outline-white {
    background-color: transparent !important;
    border-color: #fff !important;
    color: #fff !important;
}
.btn-outline-white:hover {
    background-color: #fff !important;
    border-color: #fff !important;
    color: #e03550 !important;
}


/*---------------------*\
    Navbar
\*---------------------*/

.navbar-brand {
    margin: 0;
    padding: 0;
}

@media only screen and (min-width: 992px) {
    .navbar {
        padding: 26px 0;
    }
}

/*  Navbar-Nav
\*---------------------*/
@media only screen and (min-width: 992px) {
    .navbar-nav {
        z-index: 10;
    }
    .navbar-nav li {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-align-items: flex-start;
        -ms-flex-align: start;
        align-items: flex-start;
        font-weight: 500;
        font-size: 16px;
        letter-spacing: .8px;
        text-transform: uppercase;
    }
    .navbar-nav li + li {}
    .navbar-nav li a {


        border-bottom: none;

        color: #303030 !important;
        font-size: 16px !important;
        font-weight: normal !important;
        letter-spacing: normal !important;
        line-height: 22px !important;
        margin: 0 !important;
        padding: 27px 23px 22px !important;
        text-decoration: none !important;
        transition: all 0.3s ease-out;
    }
    .navbar-nav li a#current,
    .navbar-nav li a:hover {
        color: #fff !important;
    }
    .navbar-nav li a:after {
        height: calc(100% + 84px);
        margin: -42px 0 0;
    }
    .navbar-nav li a:after {
        background-color: #e03550;
        content: '';
        display: block;
        height: calc(100% + 84px);
        left: 0;
        margin: -42px 0 0;
        opacity: 0;
        position: absolute;
        right: 0;
        top: 0;
        transition: all 0.3s ease-out;
        z-index: -1;
    }
    .navbar-nav li a#current:after,
    .navbar-nav li a:hover:after {
        opacity: 1;
    }
    .navbar-nav li.shop a:after {
        content: none !important;
    }
}

.navbar-nav li a.btn-shop {
    background-color: #fff !important;
    border: 2px solid #e03550 !important;
    color: #e03550 !important;
    padding: 25px 23px 20px !important;
}
.navbar-nav li a.btn-shop:hover {
    background-color: #e03550 !important;
    border-color: #e03550 !important;
    color: #fff !important;
}


@media only screen and (min-width: 992px) {
    .navbar-nav li.shop {
        padding-left: 8px !important;
    }
}

/*---------------------*\
    Slogan
\*---------------------*/
.slogan-outer {
    background-color: #262728;
    padding: 64px 0;
}
.slogan {}
.slogan-inner {}
.slogan h2 {
    color: #fff;

    margin: 0;
    padding: 0;
}

@media only screen and (min-width: 768px) {
    .slogan-outer {}
    .slogan {}
    .slogan-inner {}
    .slogan h2 {}
}
@media only screen and (min-width: 992px) {
    .slogan-outer {}
    .slogan {}
    .slogan-inner {}
    .slogan h2 {}
}

/*-------------------------------------------*\
   UTILITIES
\*-------------------------------------------*/

/*-------------------------------------------*\
   EXTEND
\*-------------------------------------------*/

/*---------------------*\
    Embed
\*---------------------*/
.embed-portrait {
    margin-top: 8px;
}
@media only screen and (min-width: 768px) {
    .embed-portrait {
        margin-top: 0;
        height: 250px;
        width: 140px;
    }
    .embed-portrait iframe {
        height: 100%;
        width: 100%;
    }
}


/*---------------------*\
    Feature
\*---------------------*/
.feature {
    background-color: #fff;
    border: 4px solid rgba(0,0,0,.1);
    display: block;
    height: 100% !important;
    top: 75px;
    padding: 74px 24px 24px;
    position: relative;

}
.feature-icon {
    background-color: #e03550;
    border: 4px solid #e03550;
    color: #fff;
    display: block;
    font-size: 60px;
    height: 100px;
    left: 24px;
    right: 24px;
    padding: 20px 24px;
    position: absolute;
    text-align: center;
    top: -50px;
    transition: all 300ms ease;
}
.feature:hover {
    border-color: rgba(0,0,0,.3);
}
.feature:hover .feature-icon {
    background-color: #303030;
    border-color: #303030;
}
.feature h4 {
    font-size: 22px;
    margin-bottom: 9px;
    padding-bottom: 12px;
}
.feature:hover h4 {
    color: #e03550;
}
.feature p {}

/*---------------------*\
    Icons
\*---------------------*/


/*---------------------*\
    Product Lead
\*---------------------*/
.product-lead {
    background-color: #000;
    padding: 8% 0;
    position: relative;
}
.product-lead .container-fluid {
    position: relative !important;
    z-index: 7 !important;
}
.product-lead:after {
    background: rgba(0,0,0,.7);
    content: '';
    bottom: 0;
    left: 0;
    top: 0;
    width: 100%;
    position: absolute;
    z-index: 5;
}
@media only screen and (min-width: 768px) {
    .product-lead {
        padding-left: 80px;
        padding-right: 80px;
    }
}
@media only screen and (min-width: 992px) {
    .product-lead {
        padding-left: 80px;
        padding-right: 80px;
    }
}

.bg-2 {
    background-color: #f5f5f5;
}

.watch-now {
    background-color: #e03550 !important;
    color: #ffffff !important;
    bottom: 0;
    right: 50%;
    font-size: 30px;
    position: absolute;
    text-align: right;
}
.watch-now h5 {
    margin: 0;
    padding: 10px;
}


.img-ba {
    border: 4px solid #ccc;
    transition: all ease-in-out 100ms;
}
.img-ba:hover {
    border-color: #888;
}