@normalFont: "Proxima Nova Regular", 'Helvetica Neue', Arial, Helvetica, sans-serif;
@boldFont: "Proxima Nova Bold", 'Helvetica Neue', Arial, Helvetica, sans-serif;
@regularitalicFont: "Proxima Nova Regular Italic", 'Helvetica Neue', Arial, Helvetica, sans-serif;
@semiboldFont: "Proxima Nova Semibold", 'Helvetica Neue', Arial, Helvetica, sans-serif;
@lightFont: "Proxima Nova Light", 'Helvetica Neue', Arial, Helvetica, sans-serif;
@thinFont: "proxima_nova_ththin", 'Helvetica Neue', Arial, Helvetica, sans-serif;
@avenir: "AvenirNext-UltraLight", 'Helvetica Neue', Arial, Helvetica, sans-serif;

body.homepage #world{
    overflow-x: hidden;
}

body.homepage .lander-module{
     h1, h2, h3, h4, h5, h6, p, span, a{
        color: #ffffff;
        font-family: @lightFont;
     }
     h1, h2, h3, h4, h5, h6{
        text-transform: uppercase;
     }
     h1, h2, h3, h4, h5, h6 {
        font-family: @thinFont;
     }
}

body.homepage  .threeby h3{
    color: #1d6a9a;
    text-transform: none;
    background: url('/static/img/landing/icon-occipital-highlighted.png');
    background: url('/static/img/landing/icon-occipital.png');
    background-size: 25px 25px !important;
    background-repeat: no-repeat  !important;
    padding-left: 30px;
    padding-right: 0px;
}
body.homepage  .threeby h3:hover{
    color: #42a8fb;
    background: url('/static/img/landing/icon-occipital-highlighted.png');
    background-repeat: no-repeat  !important;
    padding-left: 30px;
}

body.homepage #product_options{
    height: 110px;
    display: none;
    .module{
        text-align: center;
        a{
            margin: 0px auto;
        }
        a h3{
            width: 150px;
            font-size: 20px;
        }
    }
}

body.homepage div.lander-module.big_headline {
    background-color: #070707;
    background: url('/static/img/landing/header.jpg');
    background-repeat: no-repeat !important;
    background-size: 190%  !important;
    background-position: 50% 0%;
    height: 308px;
    margin-top: -140px !important;
    padding-top: 140px;
    h1{
        padding-top: 40px;
        font-size: 36px;
        line-height: 44px;
        max-width: 70%;
        margin: 0px auto;
        font-family: @normalFont;
    }
}

body.homepage div.image_left_checkmarks_right {
    background: url('/static/img/landing/blueBG-LightRight.jpg');
    background-size: contain  !important;
    background-repeat: no-repeat  !important;
    background-size: 100% !important;
    background-position: 100% 100% !important;
}

body.homepage div#structure_sensor {
    span.image{
        background: url('/static/img/landing/sensor.png');
        background-size: 100%  !important;
        background-repeat: no-repeat  !important;
        width: 70%;
    }
}

body.homepage div#structure_core {
    span.image{
        background: url('/static/img/landing/core.png');
        background-size: 100%  !important;
        background-repeat: no-repeat !important;
        width: 80%;
    }
    h2{
        margin-top: 0px;
    }
    span.image{
        height: 200px;
    }
}

body.homepage div#structure_bridge {
    span.image{
        background: url('/static/img/landing/bridge-scene-mobile.png');
        background-size:  100%  !important;
        background-repeat: no-repeat  !important;
        width: 90%;
    }
    span.image{
        height: 200px;
    }
}

body.homepage div.lander-module.image_right_copy_left {
    background: url('/static/img/landing/blueBG-LightLeft.jpg');
    background-repeat: no-repeat  !important;
    background-size: 100% !important;
    background-position: 100% 100% !important;
    span.image{
        margin: 0px auto;
    }
}

body.homepage div.lander-module.image_right_copy_left,
body.homepage div.lander-module.image_left_checkmarks_right {
    .twoby .module h2,
    p,
    .cta-button-c{
        margin-left: 0px;
    }
    span.image{
        margin-top: 30px;
    }
    .twoby .module h2{
        font-size: 26px;
        line-height: 34px;
    }
    p, .cta-button-c{
        font-size: 16px;
        line-height: 24px;
        margin-top: 45px;
    }
    p{
        margin-top: 25px;
    }
    .cta-button-c {
        margin-bottom: 50px;
    }
    .module{
        text-align: center;
        .cta-button-c{
            margin: 0px auto;
        }
    }

}

body.homepage .lander-module .twoby span.image{
    height: 250px;
    margin: 0px auto;
}

body.homepage #fireghost-occipital-footer {
     a:hover, a span:hover{
         color:#919191;
     }
    text-align: center;
    h5{
        color: #42a8fb;
    }
    .twoby{
        background-color: #191919;
        height: 65px;
        margin: 0px;
        max-width: 100%;
        .module{
            text-align: center;
        }
        li{
            display: inline;
            cursor: pointer;
        }
        p, a{
            color: #42a8fb;
            font-size: 14px;
        }
        p:hover, a:hover{
            color: #D7E9F5 !important;
        }
    }
    .threeby{
        a:hover, a span:hover{
            color: white !important;
        }
        .contactus{
            li.email{
                list-style-image: url('/static/img/landing/icon-email.png');
            }
            li.loc1{
                background: url('/static/img/landing/icon-location.png');
                background-repeat: no-repeat;
                list-style: none;
                margin-left: -30px;
                padding-left: 30px;
            }
        }
        .getintouch li{
            list-style: none;
        }
        #social{
            li.twitter{
                list-style-image: url('/static/img/landing/icon-twitter.png');
            }
            li.facebook{
                list-style-image: url('/static/img/landing/icon-facebook.png');
            }
            li.youtube{
                list-style-image: url('/static/img/landing/icon-youtube.png');
            }
        }
    }
}

@media (-webkit-min-device-pixel-ratio: 1.25), (min-device-pixel-ratio: 1.25) {

    body.homepage  .threeby h3{
        background: url('/static/img/landing/icon-occipital@2x.png');
    }
    body.homepage  .threeby h3:hover{
        background: url('/static/img/landing/icon-occipital-highlighted@2x.png');
    }

    body.homepage div.lander-module.big_headline {
        background: url('/static/img/landing/header@2x.jpg');
    }

    body.homepage div.image_left_checkmarks_right {
        background: url('/static/img/landing/blueBG-LightRight@2x.jpg');
    }

    body.homepage div#structure_sensor {
        span.image{
            background: url('/static/img/landing/sensor@2x.png');
        }
    }

    body.homepage div#structure_core {
        span.image{
            background: url('/static/img/landing/core@2x.png');
        }
    }

    body.homepage div#structure_bridge {
        span.image{
            background: url('/static/img/landing/bridge-scene-mobile@2x.png');
        }
    }

    body.homepage div.image_right_copy_left {
        background: url('/static/img/landing/blueBG-LightLeft@2x.jpg');
    }
}


@media (max-width: 638px) {

    body.homepage #fireghost-occipital-footer {
        .threeby{
            .module{
                width: 220px;
                margin: 0px auto;
            }
            .module{
                text-align:center;
                ul{
                    margin-top: 3px;
                    margin-bottom: 35px;
                    margin-left: 0px;
                }
                li{
                    margin-top: 7px;
                    margin-bottom: 7px;
                }
            }
            .module .contactus{
                text-align:left;
                margin-left: 70px;
            }
            .module #social{
                text-align:left;
                margin-left: 100px;
            }
        margin-bottom: 30px;
        }
        .twoby{
            .module{
                margin-top: 10px;
                margin-bottom: 10px;
            }
            margin-bottom: 50px;
        }
    }
}

@media (min-width: 450px) {
    body.homepage div.lander-module.big_headline {
        background-size: 150% !important;
    }
    body.homepage .lander-module .twoby span.image{
        height: 350px;
    }
    body.homepage div#structure_core .twoby span.image,
    body.homepage div#structure_bridge .twoby span.image{
        height: 250px;
    }

}

@media (min-width: 639px) {
    body.homepage div#structure_bridge {
        span.image{
            background: url('/static/img/landing/bridge-scene-desktop.png') no-repeat !important;
            background-size: contain !important;
        }
    }
    .lander-module.image_left_checkmarks_right .twoby,
    .lander-module.image_right_copy_left .twoby{
        height: 470px;
    }
    body.homepage #fireghost-occipital-footer .threeby{
        height: 300px;
    }
    body.homepage div.lander-module.big_headline {
        background-size: 100%  !important;
        background-position: 0% 0%;

        min-height: 300px;
        h1{
            font-size: 35px;
            line-height: 49px;
            margin-top: -40px;
        }
    }
    body.homepage #fireghost-occipital-footer {
        text-align: left;
        .threeby .module{
            margin-left: 30px;
            margin-right: -30px !important;
            li{
                line-height: 26px;
            }
        }
    }
    body.homepage div.lander-module.image_right_copy_left {
        span.image{
            float: right;
        }
    }
    body.homepage div.lander-module.image_left_checkmarks_right,
    body.homepage div.lander-module.image_right_copy_left {
        .module{
            text-align: left;
            .cta-button-c{
                margin: 0px 0px;
            }
        }
    }
    body.homepage .lander-module .twoby span.image{
        height: 400px;
        margin: 0px 0px;
    }

    body.homepage #fireghost-occipital-footer {
        .threeby{
            .contactus, 
            .products{
                margin-left: 31px;
            }
            .getintouch{
                margin-left: 0px;
            }
        }
    }
    body.homepage #product_options{
        display: none;
        .threeby{
            max-width: 900px;
        }
        .threeby .module.one,
        .threeby .module.two,
        .threeby .module.three{
            padding-left: 20px;
            padding-right: -20px;
        }
    }
    body.homepage div#structure_core .twoby span.image,
    body.homepage div#structure_bridge .twoby span.image{
        height: 400px;
    }

}



@media (min-width: 767px) {
    body.homepage div.lander-module.big_headline {
        height: 450px;
        h1{
            font-size: 50px;
            line-height: 64px;
            max-width: 460px;
            margin-top: 00px;
        }
    }
    body.homepage div.lander-module.image_right_copy_left,
    body.homepage div.lander-module.image_left_checkmarks_right {
        .twoby .module h2{
            font-size: 40px;
            line-height: 54px;
        }
        p, .cta-button-c{
            font-size: 18px;
            line-height: 30px;
            margin-top: 35px;
        }
        .cta-button-c{
            padding: 15px 45px;
        }
    }
    body.homepage div.lander-module.big_headline {
        margin-top: -120px !important;
        background-size: 120% !important;
        }
}
@media (min-width: 850px) {
    body.homepage div.lander-module.big_headline {
        background-size: 110% !important;
        }
}


@media (min-width: 1024px) {
    body.homepage div.lander-module.big_headline {
        min-height: 500px;
        background-size: 100% !important;
        h1{
            font-size: 60px;
            line-height: 70px;
            max-width: 860px;
            margin-top: 70px;
        }
    }
    body.homepage div.lander-module.image_right_copy_left,
    body.homepage div.lander-module.image_left_checkmarks_right {
        padding-top: 50px;
        padding-bottom: 30px;
        .twoby .module h2{
            font-size: 60px;
            line-height: 72px;
            max-width: 400px;
        }
        p, .cta-button-c{
            font-size: 18px;
            line-height: 30px;
            margin-top: 35px;
        }
        .cta-button-c{
            margin-top: 50px;
            padding: 15px 45px;
        }
    }
    body.homepage #fireghost-occipital-footer {
        .threeby .module{
            margin-left: 60px;
            margin-right: -60px !important;
            li{
                line-height: 26px;
            }
        }
    }

}

@media (min-width: 1100px) {
    body.homepage div.lander-module.big_headline {
        min-height: 600px;
        background-size: 100% !important;
        h1{
            margin-top: 50px;
        }
    }
}

@media (min-width: 1200px) {
    body.homepage div.lander-module.big_headline {
        min-height: 650px;
        h1{
            margin-top: 70px;
        }
    }
}
@media (min-width: 1300px) {
    body.homepage div.lander-module.big_headline {
        background: url('/static/img/landing/header@2x.jpg');
        min-height: 740px;
        h1{
            margin-top: 100px;
        }
    }
}

@media (min-width: 1500px) {
    body.homepage div.lander-module.big_headline {
        min-height: 750px;
        h1{
            font-size: 80px;
            line-height: 100px;
            max-width: 900px;
            margin-top: 140px;
        }
    }
}


@media (min-width: 638px) {
    @media (-webkit-min-device-pixel-ratio: 1.25), (min-device-pixel-ratio: 1.25) {
        body.homepage div#structure_bridge {
            span.image{
                background: url('/static/img/landing/bridge-scene-desktop@2x.png') no-repeat !important;
                background-size: contain !important;
                }
            }
        }
    }