/*! HTML5 Boilerplate v5.3.0 | MIT License | https://html5boilerplate.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

   /*
    *   Fonts
    */

    @font-face {
        font-family: 'gotham-mediumgotham-medium';
        src: url('../fonts/gothmmed-webfont.woff2') format('woff2'),
             url('../fonts/gothmmed-webfont.woff') format('woff');
        font-weight: normal;
        font-style: normal;

    }

    @font-face {
        font-family: 'gotham-boldgotham-bold';
        src: url('../fonts/gothmbol-webfont.woff2') format('woff2'),
             url('../fonts/gothmbol-webfont.woff') format('woff');
        font-weight: normal;
        font-style: normal;

    }

    @font-face {
        font-family: 'gotham-bookgotham-book';
        src: url('../fonts/gothmbok-webfont.woff2') format('woff2'),
             url('../fonts/gothmbok-webfont.woff') format('woff');
        font-weight: normal;
        font-style: normal;

    }

    body{
        color:#ffffff !important;
        background-color:#007481 !important;
    }
            canvas{
                z-index:8;
            }
            .loader{
                height:100%;
                width:100%;
                position:absolute;
                top:0px;
                left:0px;
                background-color: rgba(0,0,0,0.7);
                background-size:cover;
                z-index:9;
                background-repeat:no-repeat;
            }
            div#loader-overlay {
                height: 100%;
                width: 100%;
                background-color: rgba(255,255,255,0.6);
                position: absolute;
                top: 0px;
                left: 0px;
                color: black;
            }

            i.material-icons {
                top: 50%;
                left: 43%;
                position: relative;
                font-size: 65px;
                color: white;
                text-shadow: 0px 0px 10px rgba(0,0,0,0.4);
            }

            @-webkit-keyframes rotating {
              from {
                -webkit-transform: rotate(360deg);
                -o-transform: rotate(360deg);
                transform: rotate(360deg);
              }
              to {
                -webkit-transform: rotate(0deg);
                -o-transform: rotate(0deg);
                transform: rotate(0deg);
              }
            }
            @keyframes rotating {
              from {
                -ms-transform: rotate(360deg);
                -moz-transform: rotate(360deg);
                -webkit-transform: rotate(360deg);
                -o-transform: rotate(360deg);
                transform: rotate(360deg);
              }
              to {
                -ms-transform: rotate(0deg);
                -moz-transform: rotate(0deg);
                -webkit-transform: rotate(0deg);
                -o-transform: rotate(0deg);
                transform: rotate(0deg);
              }
            }
            .rotating {
              -webkit-animation: rotating 2s linear infinite;
              -moz-animation: rotating 2s linear infinite;
              -ms-animation: rotating 2s linear infinite;
              -o-animation: rotating 2s linear infinite;
              animation: rotating 2s linear infinite;
            }

            #extra {
                position: fixed;
                width: 100%;
                color: #ffffff;
                padding: 5px;
                font-family: Monospace;
                font-size: 13px;
                font-weight: bold;
                text-align: center;
                z-index: 1;
                bottom: 3px;
                display:none;
            }

            #extra a {
                display: inline-block;
                padding: 2px 5px;
                margin: 2px 5px;
            }

            #controller {
                background-color: #fff;
                color: #000;
                border: 1px solid #000;
                z-index: 2;
            }

            #controllertype {
                background-color: #ccc;
                color: #000;
                border: 1px solid #999;
            }

            #calibrate-compass-popup .figure8 {
                font-family: Verdana;
                font-size: 120px;
                margin: -50px 0 -30px 0;
                padding:    0;
                text-align: center;
            }

            .navbar{
                font-family:'Avenir','Avenir W02',Arial,Helvetica,sans-serif;
            }

            .navbar-brand {
              padding: 0px !important;
            }
            .navbar-brand>img {
                height: 51px;
                /* padding: 15px; */
                width: 100px;
            }
            .navbar-fixed-top{
                transition:all 1s;
            }
            .navbar-fixed-top.open{
                top:0px;
            }
            .navbar-fixed-top.closed{
                top:-51px !important;
            }



            /* Simple popup style */

            .popup {
                position: absolute;
                width: 340px;
                height: 180px;
                left: 50%;
                top: 50%;
                margin: -130px 0 0 -190px;
                visibility: hidden;
                /*opacity: 0;*/
                z-index: 3;
                padding: 20px;

                background: white;
                box-shadow: 0px 0px 20px rgba( 0, 0, 0, 0.6 );
                border-radius: 3px;
            }

            .popup button {
                border: 0px;
                padding: 8px 10px;
                margin: 5px 0px;
                border-radius: 1px;

                cursor: pointer;
                color: #fff;
                background: #333;
                font-size: 15px;
            }

button.btn.btn-primary.dropdown-toggle {
    width: 100%;
    background-color: #232323 !important;
    border: 0px;
    text-align: left;
    padding: 10px 15px;
    line-height: 210%;
}

.introImage {
    width: 50%;
}
.introText{
    width:50%;
    display:flex;
    background-image:url('/showroom/img/pixelbg.jpg');
    background-position:0px 0px;
    background-repeat:no-repeat;
}

.startpage.simple-header h1 {
    margin-bottom: 114px;
    margin-top: 30px;
}

/* ==========================================================================
   MODAL Styles
   ========================================================================== */


                #modal{
                    will-change: transform;
                    height: 100%;
                    width: 100%;
                    backface-visibility: hidden;
                    background-color: transparent;
                    z-index: 100000000;
                    position: fixed;
                    top: 0;
                    left:0;
                    /* padding-top: 1%; */
                    -webkit-transition: all 0.75s ease;
                    transition: all 0.75s ease;
                    display:none;
                    opacity:0;
                    transform: scale(0.1,0.1);
                    transform-origin: 50% 50%;
                    transition: transform 400ms ease, opacity 400ms linear 200ms, background-color:200ms linear 200ms;
                    padding-left: 0px;
                    padding-right: 0px;
                }
                #modal.is-open{
                    transform: scale(1);
                    opacity:1;
                }
                #modalInfo{
                    margin:0 auto;
                    position:realtive;
                    background-color: rgba(0,0,0,.8);
                    height: 100%;
                    width: 100%;
                    display: block;
                    overflow-y: scroll;
                    -webkit-overflow-scrolling: touch;
                    /* display: flex; */
                }
                #modalInfo.robbins{
                    border-top:10px solid #584446;
                }
                #modalInfo.hartco{
                    border-top:10px solid #00664F;
                }
                #modalInfo.bruce{
                    border-top:10px solid #C8102E;
                }
                h4#product-name {
                    margin-bottom: 20px;
                    text-transform: capitalize;
                }
                .slick-slide video {
                    width: 96%;
                    position: relative;
                }
                .slick-slide img {
                    width: 96%;
                    position: relative;
                }
                .slick-next {
                    right: 9px !important;
                }
                .slider-nav .slick-list {
                    padding-left: 0px !important;
                }
                .slider-nav .slick-list .slick-track{
                    margin-left: 0px !important;
                }
                .choosePath div {
                    width: 50%;
                    float: left;
                }
                .choosePath div ul{
                    margin-top:10px;
                    padding-left:20px
                }
                .choosePath div img {
                    margin-top: 23px;
                }

                div#productInfo .headingWrap img {
                    margin-bottom: 20px;
                }
                #productInfo.basic .headingWrap {
                    width: 100%;
                }
                .wdhard{
                    margin:0 auto;
                    margin-top:20px;
                }
                .imgwrp img{
                    margin-right:20px;
                    margin-top:20px;
                }
                #productInfo.basic #message p:not(.imgwrp) {
                    align-items: left;
                    justify-content: left;
                    display: flex;
                }
                #productInfo.basic span#message {
                    font-size: 34px;
                    line-height: 36px;
                }
                #productInfo.basic span#message p{
                    margin-bottom:28px;
                }
                #productInfo.basic {
                    background: url(/showroom/img/woodgrain.png);
                    background-size: 100% 100%;
                }
                div#sellsheets ul li a:before {
                    content: "";
                    display: inline-block;
                    background-image: url(/showroom/img/icons8-pdf-64.png);
                    background-size: 30px 30px;
                    height: 30px;
                    width: 30px;
                    margin-right:5px;
                }
                div#sellsheets p {
                    text-transform: capitalize;
                    font-weight: bold;
                    margin-top: 20px;
                }
                div#sellsheets ul{
                    padding-left:10px;
                }
                div#sellsheets ul li {
                    list-style-type: none;
                    text-transform: capitalize;
                    margin-bottom: 10px;
                }

                div#sellsheets ul li a {
                    color: #ffffff;
                }
                #startModal {
                    background-color: rgba(233, 131, 0,0.7);
                    position: relative;
                    top: 0px;
                    left: 0px;
                    height: 100%;
                    display: block;
                }
                #startModal h1 {
                    color: white;
                    font-weight: bold;
                    margin: 0 auto;
                    text-align: center;
                    font-size: 42px;
                    top: 100px;
                    position: relative;
                }
                div#wrapperModal {
                    width: 90%;
                    position: relative;
                    margin: 0 auto;
                }

                div#wrapperModal div {
                    width: 33%;
                    float: left;
                    top: 143px;
                    position: relative;
                }

                div#wrapperModal div h2 {
                    color: white;
                    font-weight: bold;
                    font-size: 60px;
                }

                div#wrapperModal div p {
                    color: white;
                    font-size: 23px;
                    width: 80%;
                }
                #desktopNotice{
                    display:none;
                    background-color: rgba(0, 0, 0, 0.7);
                    position: absolute;
                    top: 0px;
                    left: 0px;
                    height: 100%;
                    z-index: 9;
                    font-size: 40px;
                    width: 100%;
                    padding-top:30px;
                }
                #desktopNotice h1{
                    width: 300px;
                    text-align: center;
                    z-index: 9999999999;
                    position: absolute;
                    color:white;
                }
                #startModal h1 {
                    color: white;
                    font-weight: bold;
                    margin: 0 auto;
                    text-align: center;
                    font-size: 42px;
                    top: 100px;
                    position: relative;
                }
                div#wrapperModal {
                    width: 90%;
                    position: relative;
                    margin: 0 auto;
                }

                div#wrapperModal div {
                    width: 33%;
                    float: left;
                    top: 143px;
                    position: relative;
                }

                div#wrapperModal div h2 {
                    color: white;
                    font-weight: bold;
                    font-size: 60px;q
                }

                div#wrapperModal div p {
                    color: white;
                    font-size: 23px;
                    width: 80%;
                }
                #modalClose{
                    margin-right: 0;
                    font-size: 30px;
                    cursor: pointer;
                    font-family: sans-serif;
                    position: relative;
                    z-index: 9999;
                    width: 100% !important;
                    font-size: 24px;
                    color: white;
                    padding: 10px 15px;
                    border: 2px solid white;
                    top: 46px !important;
                }
                #modalClose2{
                    float: right;
                    margin-top: 6px;
                    margin-right: 0;
                    font-size: 30px;
                    cursor: pointer;
                    font-family: sans-serif;
                    position: absolute;
                    /* right: 40px; */
                    z-index: 9999;
                    display:block;
                    width: 100%;
                    text-align: right;
                    padding-right: 28px;
                    height: 51px;
                    margin-top: 0px;
                    transition:all 1s;
                    line-height: 55px;
                }
                #modalClose2.darkHeader{
                    background-color:#747678;
                }
                #modalClose2 .navbar-brand{
                    opacity:0;
                    transition:all 1s;
                }
                #modalClose2.darkHeader .navbar-brand{
                    opacity:1;
                }
                #modalClose2.basi {
                    background-color: white;
                    border-radius: 70px;
                    color: #007481;
                    top:25px;
                    right:25px;
                    padding-right:0px;
                    padding:20px;
                    line-height: 13px;
                    width: auto !important;
                }
                #productImage{
                    width: 25%;
                    background-color: #e98300;
                    height: 100%;
                    float: left;
                    -khtml-opacity: .50;
                    -moz-opacity: .50;
                    -ms-filter: "alpha(opacity=50)";
                    filter: alpha(opacity=50);
                    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
                    /* opacity: 0.5; */
                }
                #productInfo{
                    float: left;
                    /* margin-left: 40px; */
                    text-transform:uppercase;
                    width: 100%;
                    /* margin-top: 20px; */
                    display: flex;
                    height: 100%;
                }
                #productInfo span{
                    display:block;
                }
                #productInfo.basic .headingWrap {
                    padding-left: 0px !important;
                    padding-right: 0px !important;
                    display: flex;
                    align-items: center;
                }
                #productInfo.basic #product-name{
                    color:#007481;
                    text-transform:uppercase;
                    font-weight:bold;
                    font-size:42px;
                }
                #prodSubGroup{
                    font-weight:700;
                    margin-top: 10px;
                }
                .whtbnr{
                    vertical-align: middle;
                    display: flex;
                    flex-direction: column;
                    text-align: left !important;
                    padding-left: 50px;
                    padding-right: 50px;
                    background-color: rgba(255,255,255,0.9);
                    color: black;
                }

                #toggle-features{
                    cursor:pointer;
                    height: 75px;
                    width: 75px;
                    position: relative;
                    z-index: 10;
                    background-size: 100%;
                    background-repeat: no-repeat;
                    display: block;
                    background-color: rgba(0,0,0,0.4);
                    padding-bottom: 5px;
                    bottom: -10px;
                }
                #toggle-features svg{
                    margin: 0 auto;
                    width: 30px;
                    position: relative;
                    margin-left: 23px;
                    margin-top: 10px;
                }
                .toggle-copy{
                    font-weight:100;
                    font-size: 11px;
                    color:white;
                    text-align:center;
                    margin-top:5px;
                    margin-bottom:5px;
                    padding-bottom:5px;
                    letter-spacing: 1px;
                }
                .toggle-copy span{
                    display:block;
                    padding-bottom: 10px;
                }

                .item {
                    width: 50%;
                    float: left;
                    margin-top: 7px;
                }

                div#prods {
                    width: 100%;
                    overflow: hidden;
                    margin-top: 40px;
                }

                div.item h3 {
                    font-size: 13px;
                    font-weight: bold;
                }

                div.imgborder::before{
                    height: 5px;
                    width: 100%;
                    /* background-color: #0073ae; */
                    /* border-left: 36px solid #f28b00; */
                    position: relative;
                    display: block;
                    top: 0px;
                    content: "";
                    z-index: inherit;
                    width: 110px;
                }
                div.item img {
                    height: 85px;
                    width: 110px;
                }
                h3#headline {
                    margin-bottom: 7px;
                    font-weight: bold;
                    color: #ffffff;
                }

                span#message {
                    text-transform: none;
                }

                h3#prodheading {
                    margin-top: 10px;
                    font-weight: bold;
                    font-size: 18px;
                    float: left;
                    left: 0px !important;
                    position: relative;
                    top: 0px;
                }

                .headingWrap {
                    background-color: transparent;
                    color: white;
                    padding-left: 35px;
                    padding-top: 17px;
                    padding-bottom: 18px;
                    padding-right: 35px;
                    line-height: 22px;
                    width: 30%;
                    min-height: 100%;
                }

                .productList {
                    padding-left: 35px;
                    position: absolute;
                }

                #Layer_1{
                    margin: 0 auto;
                    position: relative;
                    width: 147px;
                    /* margin-left: 42px; */
                    float: left;
                    margin-right: 42px;
                    top: -18px;
                    margin-bottom: 51px;
                }
                div#logo {
                    position: fixed;
                    top: 0;
                    left: 5%;
                    background-color: #E98300;
                    /* padding: 22px 17px; */
                }
@media only screen and (max-width : 400px) {
    #Layer_1{
        margin-bottom:10px;
    }
    #product-name{
        float:left;
        margin-top: 0px;
    }
    #headline{
        float:left;
    }
    #message{
        float:left;
    }
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden {
    display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap; /* 1 */
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    -webkit-clip-path: none;
    clip-path: none;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
    white-space: inherit;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 1.25dppx),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   http://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after,
    p:first-letter,
    div:first-letter,
    blockquote:first-letter,
    li:first-letter,
    p:first-line,
    div:first-line,
    blockquote:first-line,
    li:first-line {
        background: transparent !important;
        color: #000 !important; /* Black prints faster:
                                   http://www.sanbeiji.com/archives/953 */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre {
        white-space: pre-wrap !important;
    }
    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
    color: #FFFFFF !important;
    background-color: #232323 !important;
}
.navbar-default{
    background-color:#2e2e2e !important;
    border-color:#5d5d5d !important;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: #fff !important;
  background-color: transparent;
}

.navbar-brand>img {
    margin-top: -1px; 
    padding-right:10px;   
}

/* intro landing */
#introScreen, #contactScreen {
    margin-top: 0px;
}


.simple-header.dealer, .simple-header.distributor{
    max-width:100%;
    text-align:right;
}

.simple-header.dealer h1, .simple-header.distributor h1{
    text-align:left;
}

.simple-header.dealer a, .simple-header.distributor a{
    text-align:right;
    font-family: 'gotham-boldgotham-bold';
    font-size:32px;
    color:#000000;
    text-transform:uppercase;
}

.simple-header.dealer a::after, .simple-header.distributor a::after{
    content:'';
    background-image:url('/showroom/img/blackarrow.png');
    height: 27px;
    width: 31px;
    position: relative;
    padding: 10px;
    margin-left: 10px;
    background-repeat: no-repeat;
    background-size: contain;
    top: 17px;
}


.simple-header h1 {
    height: 36px;
    font-family: 'gotham-boldgotham-bold';
    color: #FFFFFF;
    text-transform: uppercase;
    margin-bottom: 40px;
    font-size: 40px;
}

.simple-header h2 {
    font-family: 'gotham-mediumgotham-medium';
    color: #FFFFFF;
    text-transform: uppercase;
    margin-bottom: 40px;
}

#welcomeVideo{
    width:78%;
}

.choosePath a {
    background-color: #ffffff;
    padding: 10px 15px;
    text-align: center;
    border-radius: 15px;
    font-family: 'gotham-mediumgotham-medium';
    text-transform: uppercase;
    color:#007481;
    font-weight: bold;
    font-size: 20px;
    margin-right: 30px;
}

.choosePath {
    margin-top: 50px;
    margin-bottom: 20px;
}

.choosePath a::after{
    content:'';
    background-image:url('/showroom/img/arrowRight.png');
    height: 27px;
    width: 31px;
    position: relative;
    padding: 10px;
    margin-left: 10px;
    background-repeat: no-repeat;
    background-size: contain;
    top: 10px;
}

.introSteps {
    width: 100%;
    margin: 30px 0px;
    position: relative;
    border: 1px solid #ededee;
}

.introSteps.green {
    background: #d6e342;    
}

.introSteps.grey {
    background: #999;    
}

.introSteps.blue {
    background: #0066a1;    
}

.introSteps .container {
    padding: 0px;
}

.stepContent h2 {
    color: white;
    padding: 0px;
    font: 900 30px 'Avenir','Avenir W02',Arial,Helvetica,sans-serif;
    line-height: 1.23076923;
    text-transform: uppercase;
    margin-top: 0px;
}

.stepMedia {
    overflow: hidden;
    height: 280px;
    max-height: 280px;
    float: left;
    padding: 0px !important;
}

.stepMedia img {
    width: 100%;
    height: auto;
    min-width: auto;
}

.stepContent {
    width: 380px;
    float: left;
    overflow: hidden;    
}

.stepContent p {
    margin: 0px;
    font-size: 18px;
    color: white;
}

.introSteps.green .stepContent h2,
.introSteps.green .stepContent p {
    color: #666;
}

.content-wrapper {
    padding: 0px 10px;
    display: table !important;
    height: 280px;
}

.content-wrapper .inner {
    display: table-cell;
    vertical-align: middle;    
}

.cta-label-txt {
    font-size: 16px;
    position: relative;
    top: 2px;
}

.leadIn {
    font-family:'gotham-bookgotham-book';
    font-size: 16px;
    margin-top: 20px;
    margin-bottom: 30px;
}

p.boldLeadIn {
    font-family: 'gotham-boldgotham-bold';
}

#cta {
    clear: both;
    width: 311px;
    margin: 0 auto 100px auto;
    cursor: pointer;
}

a.btn-clr-13:hover {
    text-decoration: none;
}

/* contact form */
.formCont .elq-form input[type='text'] {
    display: block;
    height: 35px;
    border: 0;
    margin-bottom: 10px;
    padding-left: 10px;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    font-size: 15px;
}

.formCont .elq-form .label-position.top {
    font-weight: 500;
    color: #666;    
}

#contactWrapper .formCont {
    max-width: 500px;
    margin: 0 auto;    
}

#contactWrapper .elq-form .field-wrapper.individual {
    float: left;
    width: 100%;
    clear: both;
}

#contactWrapper #formElement0 {
    width: 100%;
    float: left;
}

#contactWrapper #formElement1 {
    float: left;
    clear: left;
    width: 49%;
}

#contactWrapper #formElement2 {
    float: left;
    width: 49%;
}

#contactWrapper #formElement3 {
    float: left;
    width: 100%;
    clear: left;
}

#contactWrapper .elq-form .radio-option .label {
    color: #666;
    font-size: 13px;
    font-weight: 500;    
}

#contactWrapper input.submit-button {
    font-size: 20px;
    background-color: #0066A2;
    border: 0px;
    color: #ffffff;
    font-weight: 500;
    padding-top: 15px;
    padding-bottom: 20px;
    line-height: 6px;
    padding-right: 40px;
    padding-left: 40px;
    text-transform: uppercase;
    text-align: center;
    margin-top: 20px;
}

#contactWrapper input.submit-button:hover {
    background: #3db7e4;
}

#contactWrapper .LV_invalid {
    color: #CC0000;
    font-size: 12px;
    margin: -8px 0px 0px 0px;
}

#contactWrapper .elq-form .radio-option .input,
#contactWrapper .elq-form .radio-option .inner {
    vertical-align: baseline;   
}

#contactWrapper .elq-form .radio-option .input {
    height: auto;
    margin-bottom: 5px;    
}

#contactWrapper .LV_invalid_field {
    border: solid 1px #CC0000 !important;
}

/* tips modal */
div#tipsModal {
    position: absolute;
    width: 100%;
    text-align: center;
    background-color: rgba(0,116,129,0.9);
    height: 100%;
    z-index: 999;
    display:none;
}
div#tipsModal ul {
    text-align: left;
    margin-left: 20px;
    margin-right: 20px;
    padding-left:0px;
}
div#tipsModal ul li{
    margin-bottom:20px;
    list-style-type:none;
    text-align:center;
}

/* modal */
#modalInfo .productList {
    width: 100%;
}

#modalInfo #prods {
    max-width: 1200px;
    margin: 40px auto 0 auto;
    float: none;
    /* height: 540px; */
    /* overflow-y: scroll; */
}

#modalInfo .item img {
    height: 85px;
    width: auto;
    width: 110px;
}

#modalInfo .item h3 {
    font-size: 17px;
    font-weight: bold;
}

#modalInfo .item.ng-scope {
    text-align: center;
    margin-bottom: 20px;
}

#modalInfo .productList {
    padding-left: 0px;
    position: relative;
    width: 60%;
    padding-top: 40px;
}

#modalClose2 {
    position: relative;
    margin-bottom: -48px;
    width: 100% !important;
}

/* override default */
#introScreen a.cta.cta-link {
    display: block !important;
    padding: 10px 0px;
}

#introScreen a.cta.cta-link span.link-label-blue {
    display: block !important;
    text-align: center !important;
}

#introScreen a.cta.cta-link .cta-label .cta-label-txt {
    display: block !important;
    text-align: center !important;
}

#introScreen .btn-orange {
    background: #0077d4;
    text-align: center;
    color: white;
}

#tipsButton.btn-orange {
    background: #0077d4;
    text-align: center;
    color: white;
    padding: 10px 20px;
    border: 0px;
    text-transform: uppercase;
    text-transform: uppercase;
    font: 900 14px 'Avenir','Avenir W02',Arial,Helvetica,sans-serif;
    font-size: 1.675rem;
    line-height: 1.28571429;
}

#introScreen .btn-orange:hover {
    text-decoration: none;
}

/* media queries */
@media (min-width: 768px) {
    .navbar-default .container {
        width: 728px;
    }  
    .navbar-default .navbar-nav > li > a {
        color: #666;
        font: 500 14px 'Avenir','Avenir W02',Arial,Helvetica,sans-serif;    
        line-height: 135%;
    }
    .navbar-nav > li > a {
        padding-top: 16px !important;
        padding-bottom: 16px !important;
    }
    .choosePath a{
        margin-bottom:20px;
    }  
}

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

    .headingWrap{
        width:52%;
    }

   #productInfo:not(.basic){
       height:auto !important;
       display: flex;
       /*flex-direction: row-reverse;
       flex-direction: column-reverse;*/
   }

   #modalInfo .productList{
        width:48%;
   }

}

@media only screen and (max-width : 1025px) {
    .simple-header h1 {
        overflow: visible !important;
        white-space: normal !important;
        line-height: 100%;
        height: auto !important;
    }
    .leadIn {
        font-size: 16px;
    }
    .stepMedia {
        height: auto;
        max-height: none;
        float: none;
    }
    .content-wrapper {
        padding: 10px 5px;
        display: block !important;
        height: auto;
        max-width: 100%;
    }
    .content-wrapper .inner {
        display: block;
    }
    .stepContent {
        width: auto;
        float: none;
    }
    #cta {
        width: 260px;
    }
    #contactWrapper #formElement1, #contactWrapper #formElement2 {
        width: 100%;
    }
    #contactWrapper .elq-form .list-order.twoColumn {
        width: 100%;    
    }
    .choosePath a{
        margin-bottom:20px;
    }  

    .slider-for, .slider-nav{
        width:75%;
        margin:0 auto;
    }

    .slick-next{
        right:5px !important;
    }
    .introImage {
        display:none;
    }
    .introText{
        width:100%;
        background-repeat: repeat-x;
    }
    #productInfo.basic{
        height:100% !important;
    }
}

@media (orientation: landscape) and (max-width: 1025px) {
    .headingWrap{
        width:32%;
    }
    .productList{
        width:68%;
    }

   #productInfo{
       height:auto !important;
       flex-direction: row;
       flex-direction: row;
   }

   #modalInfo .productList{
        width:68%;
   }
   .slick-next{
        right:-4px !important;
   }
}

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

    .headingWrap{
        width:100%;
    }

   #productInfo:not(.basic){
       height:auto !important;
       display: flex;
       flex-direction: row-reverse;
       flex-direction: column-reverse;
   }

   #modalInfo .productList{
        width:100%;
   }

}

@media only screen and (max-width : 991px) {
    #modalInfo .item img {
        height: auto;
        width: 100%;
        max-width: 250px;
    }
}

@media only screen and (max-width : 767px) {
    #Layer_1 {
        margin-bottom: 0px;
        clear: both;
    }
    .headingWrap h4 {
        clear: both;    
    }
    #modalInfo {
        height: 100%;    
    }
    #modalInfo #prods {
        margin: 0px auto 0 auto; 
        padding-bottom: 100px;  
    }
    #modalInfo .item img {
        height: auto;
        width: 100%;
        max-width: 250px;
    }
    #modalInfo h3#headline {
        margin-top: 0px;   
    }
    #modalInfo #message {
        line-height: 125%;    
    }
    .choosePath a{
        margin-bottom:20px;
    }
    .choosePath {
        margin-top: 50px;
        margin-bottom: 20px;
        display: grid;
    }
    .choosePath div{
        margin-bottom:40px
    }    

    .headingWrap {
        width: 100%;
    }
    #modalInfo .productList {
        width: 100%;
    }
    div#productInfo.basic .headingWrap img {
        margin-bottom: 20px;
        width:100%;
    }
    #productInfo.basic .headingWrap {
        display:block;
    }
    #productInfo.basic #message p.imgwrp{
        display:block;
    }
    .whtbnr{
        display:block;
    }
}