/*----------------------------------------------------

	STYLE-2ILP-V4.CSS

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

	DESCRIPTION: Styles of layout, dimension, and alignments.

	-- Updates --
	1. Update to Bootstrap 4.0.0
	2. Update to FontAwesome 5
	3. Myriad other changes

----------------------------------------------------*/

html {
    overflow-y: scroll;
}

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

   Layout
   - Header

   Content
   - Reboot
   - Typography

   Components
   - Breadcrumb
   - Buttons
   - Navbar

   Utilities
   - Spacing

   Extend
   - Icons
   - Product Lead

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


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

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

.header-outer {
    position: fixed !important;
    z-index: 10 !important;
}
.header {
    position: relative !important;
    z-index: 5 !important;
}
.header-inner {
    background-color: rgb(255, 255, 255) !important;
    border-bottom: 1px solid  #dee2e6;
    box-shadow: none !important;
    height: 40px !important;
    position: fixed !important;
    width: 100% !important;
}
.header-spacer {
    height: 40px;
    position: relative !important;
    z-index: -1 !important;
}
@media only screen and (min-width: 992px) {
    .header-outer,
    .header-inner {
        position: relative !important;
    }
}

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

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

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

/* LOI & Patent - Product Name Styles */
#loi h3 span,
#p h3 span {
    display: block;
}
@media only screen and (min-width: 992px) {
    #loi h3 span,
    #p h3 span {
        display: inline-block;
    }
    #loi h3 span:before,
    #p h3 span:before {
        content: "-";
        padding: 0 .5em;
    }
}

/*  Links
\*---------------------*/
a {
    transition: all .5s ease;
}
a:hover, a:focus {
    outline: none !important;
}

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

/*  Lists - Inline
\*---------------------*/
footer .list-inline-item {
    margin: 0 !important;
}
footer .list-inline-item:first-of-type {
    display: block;
}
@media only screen and (min-width: 992px) {
    footer .list-inline-item:not(:last-of-type) span {
        border-right: 1px solid orangered;
        margin-right: 8px !important;
        padding-right: 8px !important;
    }
    footer .list-inline-item:first-of-type {
        display: inline-block;
    }
}

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

/*---------------------*\
    Breadcrumbs
\*---------------------*/
.breadcrumb-wrapper div:first-of-type {
    text-align: center;
}

.breadcrumb {
    background-color: transparent !important;
    border-radius: 0 !important;
    -webkit-box-pack: center!important;
    -ms-flex-pack: center!important;
    justify-content: center!important;
    margin: 0 auto !important;
    padding: 0;
}

@media only screen and (min-width: 768px) {
    .breadcrumb-wrapper div:first-of-type {
        text-align: left;
    }
}
@media only screen and (min-width: 992px) {
    .breadcrumb-wrapper div[class^="col-"] {
        text-align: left;
    }
}


/*---------------------*\
    Buttons
\*---------------------*/
button:focus, .btn:focus {
    box-shadow: none !important;
    outline: none !important;
}


/*---------------------*\
    Navbar
\*---------------------*/
.navbar {
    margin-left: auto;
    margin-right: auto;
    max-width: 1110px;
    padding: 0;
    position: fixed;
}
.navbar-brand {
    margin: 0;
    padding: 0;
}
.nav-flydown {
    background: #fff;
    height: 100vh;
    left: 0;
    padding: 88px 24px 24px !important;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}

/*  Toggler
\*---------------------*/
.navbar-toggler-outer {
    padding: 10px 20px;
}
.navbar-toggler {
    border: none;
    display: block;
    outline: none !important;
    padding: 10px 24px 10px 0;
    position: relative;
}
#nav-toggle {
    left: 0;
    top: 0;
    position: absolute;
    cursor: pointer;
    padding: 10px 24px 10px 0;
}
#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after {
    cursor: pointer;
    border-radius: 1px;
    height: 2px;
    width: 24px;
    background: #dee2e6;
    content: '';
    display: block;
    position: absolute;

    transition: all 150ms ease-in-out;
}
#nav-toggle span:before {
    top: -8px;
}
#nav-toggle span:after {
    bottom: -8px;
}
#nav-toggle.active span {
    background-color: transparent;
}
#nav-toggle.active span:before,
#nav-toggle.active span:after {
    top: 0;
}
#nav-toggle.active span:before {
    transform: rotate(45deg);
}
#nav-toggle.active span:after {
    transform: rotate(-45deg);
}

/*  Navbar-Nav
\*---------------------*/
.navbar-nav {}
.navbar-nav li {}
.navbar-nav li + li {}
.navbar-nav li a {
    color: rgb(72, 72, 72) !important;
    display: block !important;
    font-size: 16px !important;
    font-weight: normal !important;
    letter-spacing: normal !important;
    line-height: 22px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    position: relative !important;
    text-decoration: none !important;
}
.navbar-nav li a#current,
.navbar-nav li a:hover {}

@media only screen and (min-width: 768px) {
    .navbar {
        position: relative;
    }
}

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

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

.section {
    margin: 0;
    padding: 0;
}
.section-xs {
    padding-top: 8px;
    padding-bottom: 8px;
}
.section-sm {
    padding-top: 16px;
    padding-bottom: 16px;
}
.section-md {
    padding-top: 32px;
    padding-bottom: 32px;
}
.section-lg {
    padding-top: 48px;
    padding-bottom: 48px;
}
.section-xl {
    padding-top: 64px;
    padding-bottom: 64px;
}

@media only screen and (min-width: 576px) {}
@media only screen and (min-width: 768px) {
    .section-sm {
        padding-top: 32px;
        padding-bottom: 32px;
    }
    .section-md {
        padding-top: 48px;
        padding-bottom: 48px;
    }
    .section-lg {
        padding-top: 64px;
        padding-bottom: 64px;
    }
    .section-xl {
        padding-top: 80px;
        padding-bottom: 80px;
    }
}
@media only screen and (min-width: 992px) {
    .section-md {
        padding-top: 64px;
        padding-bottom: 64px;
    }
    .section-lg {
        padding-top: 80px;
        padding-bottom: 80px;
    }
    .section-xl {
        padding-top: 96px;
        padding-bottom: 96px;
    }
}

div[class^="section-"] + div[class^="section-"] {
    padding-top: 0 !important;
}

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

/*---------------------*\
    Product Lead
\*---------------------*/
.product-lead {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    display: none;
    margin: 0 auto;
    padding: 10% 0 8%;
    position: relative;
}

#i .product-lead {
    display: block;
}

.product-lead h1 {
    color: #fff;
}
.product-lead h5 {
    color: #fff;
}

.embed-outer {
    border: 1px solid #fff;
    height: 100%;
    margin-top: 24px;
    padding: 5px;
}

.embed-container {
    height: auto;
    max-width: 100%;
    overflow: hidden;
    padding-bottom: 56.25%;
    padding-top: 0;
    position: relative;
}

.embed-container iframe, .embed-container object, .embed-container embed {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

@media screen and (min-width: 768px) {
    .embed-outer {
        margin-top: 0;
    }
}