@import "https://font.nicdn.de/montserrat.css";


body, form, figure {
    margin: 0;
    padding:0
}

img {
    border:0
}

header, footer, nav, section, aside, article, figure, figcaption {
    display:block
}

body {
    font-size:100.01%
}

select, input, textarea {
    font-size:99%
}

#container, .inside {
    position:relative
}

#main, #left, #right {
    float: left;
    position:relative
}

#main {
    width:100%
}

#left {
    margin-left:-100%
}

#right {
    margin-right:-100%
}

#footer {
    clear:both
}

#main .inside {
    min-height:1px
}

.ce_gallery > ul {
    margin: 0;
    padding: 0;
    overflow: hidden;
    list-style:none
}

.ce_gallery > ul li {
    float:left
}

.ce_gallery > ul li.col_first {
    clear:left
}

.float_left {
    float:left
}

.float_right {
    float:right
}

.block {
    overflow:hidden
}

.clear, #clear {
    height: .1px;
    font-size: .1px;
    line-height: .1px;
    clear:both
}

.invisible {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width:1px
}

.custom {
    display:block
}

#container:after, .custom:after {
    content: "";
    display: table;
    clear: both
}

@media (max-width: 767px) {
    #wrapper {
        margin: 0;
        width:auto
    }

    #container {
        padding-left: 0;
        padding-right:0
    }

    #main, #left, #right {
        float: none;
        width:auto
    }

    #left {
        right: 0;
        margin-left:0
    }

    #right {
        margin-right:0
    }
}

img {
    max-width: 100%;
    height:auto
}

.ie7 img {
    -ms-interpolation-mode:bicubic
}

.ie8 img {
    width: auto
}

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


html, body, h1, h2, h3, h4, ul, ol, li, p {
    margin: 0;
    padding:0
}

html, body {
    height:100%
}

html {
    font-size:14px
}

body {
    font-family: "Montserrat", sans-serif;
    font-size: 100%;
    color: #576457;
    line-height: 1.45;
    font-weight:300
}

h1, h2, h3, h4, p, ul, ol {
    margin-bottom:1rem
}

.ce_text li {
    margin-left: 1.5rem;
    list-style-type:square
}

a {
    color:#474
}

strong {
    font-weight:500
}

.clr {
    clear:both
}

#header {
    background-color: #fff;
    height: 7rem;
    z-index: 5;
    position: relative;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    -webkit-transition: all 0.125s;
    transition:all 0.125s
}

#header .inside {
    max-width: 75rem;
    margin: 0 auto;
    position:relative
}

#header #logo {
    display:inline-block
}

#header #logo a {
    display: inline-block;
    padding: 2rem 2rem;
    -webkit-transition: all 0.125s;
    transition:all 0.125s
}

#header #logo a svg {
    display: block;
    height: 3rem;
    -webkit-transition: all 0.125s;
    transition:all 0.125s
}

#header #logo a svg .a {
    fill:#474
}

#header #logo a svg .b {
    fill:#1d1d1b
}

#header nav {
    position: absolute;
    right: 0;
    top:0
}

#header nav ul {
    list-style-type: none;
    padding:0 1rem
}

#header nav ul li {
    float: left;
    text-transform: uppercase;
    line-height:7rem
}

#header nav ul li a, #header nav ul li strong {
    font-weight: 500;
    padding: 0 1rem;
    display: block;
    -webkit-transition: all 0.125s;
    transition:all 0.125s
}

#header nav ul li a {
    text-decoration: none;
    color:#576457
}

#header nav ul li a:hover {
    color:#474
}

#header nav ul li strong {
    background-color: #474;
    color:#fff
}

#nav-toggle {
    display: none;
    position: absolute;
    right: 0;
    top: 0;
    background: transparent;
    width: 2rem;
    padding: 2.5rem 2rem;
    -webkit-transition: all 0.125s;
    transition: all 0.125s;
    color:#576457
}

#nav-toggle:hover {
    color:#474
}

#nav-toggle svg {
    width: 2rem;
    height: 2rem;
    display: block;
    fill:currentColor
}

#nav-toggle .close {
    display:none
}

.fixed #nav-toggle, .header-light .fixed #nav-toggle {
    padding: 1.5rem 2rem;
    color:#576457
}

.fixed #nav-toggle:hover, .header-light .fixed #nav-toggle:hover {
    color:#474
}

.header-light.nav-open #nav-toggle {
    color:#576457
}

.header-light.nav-open #nav-toggle:hover {
    color:#474
}

.header-light #nav-toggle {
    color:#a3caa3
}

.header-light #nav-toggle:hover {
    color:#fff
}

body.nav-open {
    overflow: hidden;
    height:100%
}

body.nav-open #nav-toggle .open {
    display:none
}

body.nav-open #nav-toggle .close {
    display:block
}

body.nav-open #header {
    height:auto
}

body.nav-open #header nav {
    display:block
}

body.nav-open #container, body.nav-open #footer {
    filter:blur(50px)
}

@media screen and (max-width: 600px) {
    #nav-toggle {
        display:block
    }

    #header nav, .header-light #header nav {
        display: none;
        position: fixed;
        z-index: 1;
        top: 7rem;
        left: 0;
        right: 0;
        bottom: 0;
        height: 100%;
        border-top:1px solid #a3caa3
    }

    #header nav ul, .header-light #header nav ul {
        padding: 0;
        background:#fff
    }

    #header nav ul li, .header-light #header nav ul li {
        float: none;
        text-align:center
    }

    #header nav ul li a, #header nav ul li strong, .header-light #header nav ul li a, .header-light #header nav ul li strong {
        line-height:4rem
    }

    #header.fixed nav {
        top:5rem
    }
}

.header-light #header {
    background-color:transparent
}

.header-light #header #logo a svg .a, .header-light #header #logo a svg .b {
    fill:#fff
}

.header-light #header nav ul li a {
    color:#a3caa3
}

.header-light #header nav ul li strong, .header-light #header nav ul li a:hover {
    color: #fff;
    background-color:transparent
}

#header.fixed, .header-light #header.fixed {
    background: #fff;
    height: 5rem;
    box-shadow:0 1px 3px rgba(0, 0, 0, 0.125)
}

#header.fixed #logo a, .header-light #header.fixed #logo a {
    padding:1rem 2rem
}

#header.fixed #logo a svg .b, .header-light #header.fixed #logo a svg .b {
    fill:#1d1d1b
}

#header.fixed #logo a svg .a, .header-light #header.fixed #logo a svg .a {
    fill:#474
}

#header.fixed nav ul li a, #header.fixed nav ul li strong, .header-light #header.fixed nav ul li a, .header-light #header.fixed nav ul li strong {
    line-height:5rem
}

#header.fixed nav ul li a, .header-light #header.fixed nav ul li a {
    color:#576457
}

#header.fixed nav ul li a:hover, .header-light #header.fixed nav ul li a:hover {
    color:#474
}

#header.fixed nav ul li strong, .header-light #header.fixed nav ul li strong {
    background-color: #474;
    color:#fff
}

body.nav-open #header {
    background:#fff
}

body.nav-open #header #logo a svg .b {
    fill:inherit
}

body.nav-open #header #logo a svg .a {
    fill:#474
}

body.nav-open #header nav ul li a {
    color:#576457
}

body.nav-open #header nav ul li a:hover {
    color:#474
}

body.nav-open #header nav ul li strong {
    background-color: #474;
    color:#fff
}

.hero-header {
    margin-top: -7rem;
    height: 100vh;
    position: relative;
    z-index: 0;
    background-color:#474
}

.hero-header .ce_player {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index:1
}

.hero-header .ce_player video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    opacity: 0.25;
    z-index: 1;
    object-fit:cover
}

.hero-header .video-overlay {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin-top: -7rem;
    z-index: 3;
    padding:1rem
}

.hero-header .video-overlay .container {
    color: #fff;
    max-width: 75rem;
    margin: 0 auto;
    text-align:center
}

.hero-header .video-overlay h1 {
    font-size: 2.5rem;
    margin: 0;
    font-weight:400
}

.hero-header .video-overlay p {
    color: #a3caa3;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom:2rem
}

.hero-header .video-overlay .btn {
    text-decoration: none;
    color: #a3caa3;
    border: 2px solid #a3caa3;
    display: inline-block;
    padding: 0 1rem 0 0.75rem;
    line-height: 2.25rem;
    margin-bottom: 3rem;
    border-radius: 2.5rem;
    -webkit-transition: all 0.125s;
    transition:all 0.125s
}

.hero-header .video-overlay .btn svg {
    vertical-align: middle;
    display: inline-block;
    fill: currentColor;
    width: 1, 25rem;
    height: 1.25rem;
    margin:-3px 0.25rem 0 0
}

.hero-header .video-overlay .btn:hover {
    color: #fff;
    border-color: #fff;
    box-shadow:0 0 2rem #a3caa3
}

.hero-header .scroll-down {
    position: absolute;
    z-index: 3;
    bottom: 2rem;
    left: 50%;
    margin-left:-1.5rem
}

.hero-header .scroll-down a {
    display:block
}

.hero-header .scroll-down a svg {
    width: 3rem;
    height: 3rem;
    fill: #a3caa3;
    -webkit-transition: all 0.125s;
    transition:all 0.125s
}

.hero-header .scroll-down a:hover svg {
    fill:#fff
}

body.modal {
    overflow:hidden
}

#video-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: #fff;
    text-align:center
}

#video-modal.active {
    display:block
}

#video-modal .close {
    position: absolute;
    right: 0rem;
    top: 0rem;
    font-weight: 100;
    cursor: pointer;
    z-index:3
}

#video-modal .close a {
    color: rgba(255, 255, 255, 0.25);
    color: #576457;
    padding: 2rem;
    display: inline-block;
    text-decoration:none
}

#video-modal .close a:hover {
    color:#474
}

#video-modal .close a svg {
    width: 3rem;
    height:3rem
}

#video-modal .ce_player {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    width: 480px;
    height: 270px;
    margin:-135px 0 0 -240px
}

#video-modal .ce_player video {
    width: 480px;
    height:270px
}

.title-header {
    background:#f6f7f6
}

.title-header .ce_headline {
    max-width: 71rem;
    margin: 0 auto;
    padding: 3rem 2rem;
    font-size: 1.5rem;
    font-weight: 300;
    color:#474
}

.title-header .ce_text {
    max-width: 71rem;
    margin: 0 auto;
    padding:3rem 2rem
}

.title-header .ce_text h1 {
    font-size: 1.5rem;
    font-weight: 300;
    color:#474
}

.title-header .ce_text p {
    margin-bottom:0
}

.hero {
    background-color:#fff
}

.hero .ce_text, .hero .ce_gallery {
    max-width: 71rem;
    margin: 0 auto;
    padding:1rem 2rem
}

.hero h2 {
    color: #474;
    margin: 2rem 0 3rem;
    font-weight:400
}

.hero h3 {
    color: #474;
    margin: 2rem 0;
    font-weight:400
}

.hero h4 {
    margin: 2rem 0;
    font-weight:600
}

#footer {
    background-color: #474;
    color: #fff;
    font-weight:400
}

#footer .inside {
    max-width: 75rem;
    margin:0 auto
}

#footer .copy {
    float: left;
    padding:3rem 2rem
}

#footer nav {
    float:right
}

#footer nav ul {
    list-style-type: none;
    padding:0 1rem
}

#footer nav li {
    float:left
}

#footer nav a, #footer nav strong {
    display: block;
    padding:3rem 1rem
}

#footer nav a {
    text-decoration: none;
    color: #a3caa3;
    -webkit-transition: all 0.125s;
    transition:all 0.125s
}

#footer nav a:hover {
    color:white
}

#footer nav strong {
    font-weight:400
}

@media screen and (min-width: 767px) {
    html {
        font-size:16px
    }

    #video-modal .ce_player {
        width: 640px;
        height: 360px;
        margin:-180px 0 0 -320px
    }

    #video-modal .ce_player video {
        width: 640px;
        height:360px
    }
}

@media screen and (min-width: 1200px) {
    html {
        font-size:16px
    }

    #video-modal .ce_player {
        width: 960px;
        height: 540px;
        margin:-270px 0 0 -480px
    }

    #video-modal .ce_player video {
        width: 960px;
        height:540px
    }
}

@media screen and (min-width: 1400px) {
    html {
        font-size:18px
    }

    #video-modal .ce_player {
        width: 1280px;
        height: 720px;
        margin:-360px 0 0 -640px
    }

    #video-modal .ce_player video {
        width: 1280px;
        height: 720px
    }
}

