@import url('https://daneden.github.io/animate.css/animate.min.css');
@import url('https://mynameismatthieu.com/WOW/css/libs/animate.css');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:100,300,400,700,900');



html,
button,
input,
select,
textarea {
    color: #222;
}


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

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


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

/* ==========================================================================
   Parallax Scroll
   ========================================================================== */
body, html {
    height: 100%;
    min-height: 100%;
    background-color: #000000;
    color: #ffffff;

}

body {
    background-color: #000;

}
h2 {
    margin-top: 0;
}

main {
    /*overflow-x: hidden;*/
    min-height: 100%;

}


.bcg {
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    height: 100%;
    width: 100%;
}






.hsContainer {
    display: table;
    table-layout: fixed;
    width: 100%;
    height: 100%;
        overflow: hidden;
    position: relative;

}

.hsContent {

    margin: -150px auto 0 auto;
    display: table-cell;
    vertical-align: middle;
    padding: 0;
    text-align: left;
    position: relative;
    z-index: 10;

}


#menu-social
{
    padding-top: 50px;

}



.navbar-default .container {padding-left: 15px; padding-right: 15px; }



/* Slide COMMON */
section h1, section h2, section h3, section p, section input[type="text"], section input[type="submit"] {font-family: "Open Sans"; text-align: left; }

section h1 {height: 40px; margin-bottom: 50px; background-repeat: no-repeat; background-position: top left; }
section h1 span:first-child {font-weight: 700; font-size: 40px; line-height: 24px; display: inline-block; width: 100%; margin: 0; margin-bottom: 22px; float: left; }
section h1 span:last-child {font-weight: 700; font-size: 20px; line-height: 12px; display: inline-block; width: 100%; margin: 0 0 22px 0; float: left; text-transform: lowercase; color: #beafbf }
section h1 span:last-child:first-letter {
    text-transform: uppercase;
}
section h2 {font-size: 20px; text-transform: uppercase; font-weight: 300; background-repeat: no-repeat; background-position: left center; }

#slide-3 h1 span:first-child {
    margin-bottom: 6px;
}

section img {margin-bottom: 40px;}


section .table {display: table; }
section .cell {display: table-cell; }





/* Slide 1 */
#slide-1 {
    min-height: 100%;
    min-height: 480px;
    position: relative;
}
#slide-1 #bcg1 {background-color: #0e0c0f; background-position: 50% 50%; background-size: cover; }
#slide-1 #bcg1 .bcg2 {background-color: transparent; }


#slide-1 #bcg1 span.h {display: block; }
#slide-1 #bcg1 span#h1 { color: #f17277; font-weight: 100; text-transform: uppercase; margin-bottom: 400px; z-index: 1; font-weight: 900}
#slide-1 #bcg1 span#h2 { color: #ffffff; font-weight: 300; text-transform: uppercase; box-sizing: border-box; }

#slide-1 .container {position: relative; }
#slide-1 .bcg2 #phone {position: absolute; left: 15px; background-repeat: no-repeat; background-position: center center; z-index: 2 }

#slide-1 .bs-example{margin: 0; height: 100%;}
#slide-1 .carousel{height: 100%; }
#slide-1 .carousel-inner{height: 100%;}
#slide-1 .item{background-color: transparent; text-align: center; height: 100% !important;}
#slide-1 .carousel-caption {top: 0; left: 0; width: 100%; height: 100%; padding: 0;text-shadow: none;}
#slide-1 .carousel-indicators li {border: 2px solid #ffffff; }

#slide-3 .flipInY {
    margin-bottom: 40px;
}



/* FADE EFFECT */
/*#slide-1 .carousel .item {-webkit-transition: opacity 3s; -moz-transition: opacity 3s; -ms-transition: opacity 3s; -o-transition: opacity 3s; transition: opacity 3s;}*/
/*#slide-1 .carousel .active.left {left:0;opacity:0;z-index:2;}*/
/*#slide-1 .carousel .next {left:0;opacity:1;z-index:1;}*/


/*#slide-1 .button, #slide-1 .button:active, #slide-1 .button:focus, #slide-1 .button:hover, #slide-1 .button:visited, #slide-1 .button:link {display: inline-block; width: 160px; background-color: #009ee0;  font-size: 12px; font-weight: 400; color: #f2ebe6; text-decoration: none; padding: 15px; margin: 30px 0;z-index: 500; border-radius: 20px;}*/








/* Slide 2 */
/*#slide-2 .bcg {background-color: #f0efef; }*/
#slide-2 .bcg {background-color: #0f0c0e; }
#slide-2 h1 {color: #f17277; text-transform: uppercase}
#slide-2 h1 span small {color: #f17277; display: block; margin-bottom: 10px; font-size: 22px}
#slide-2 h2 {color: #ffffff; }

#slide-2 p {color: #beafbf; font-size: 16px}


/* Slide 3 */
/*#slide-3 .bcg {background-color: #242328; }*/
#slide-3 h1 {color: #f17277; text-transform: uppercase}
#slide-3 h1 span small {color: #f17277; display: block; margin-bottom: 7px; font-size: 22px}
#slide-3 h1 span:last-child {
    font-weight: 700;
    font-size: 40px;
    line-height: 24px;
    display: inline-block;
    width: 100%;
    margin: 0;
    margin-bottom: 22px;
    float: left;
text-transform: uppercase;
color: #f17277}

#slide-3 h2 {color: #beafbf; }
#slide-3 p {color: #b6a7b1; }


/* Slide 4 */
#slide-4 .bcg {background: url(img/slide-4.jpg) no-repeat; background-size: cover !important; background-position: 50% 100% !important }
#slide-4 h1 {color: #0c0d0e; text-align: center }
#slide-4 h1 span,
#slide-4 h1 small {
    display: block;
    margin-bottom: 15px;
    font-size: 22px;
    text-transform: uppercase;
    color: #0c0d0e;
    font-weight: 700;
}
#slide-4 h1 b {
    font-weight: 700;
    font-size: 40px;
    line-height: 24px;
    display: inline-block;
    width: 100%;
    margin: 0;
    float: left;
    text-transform: uppercase;
    color: #0c0d0e;
margin-bottom: 15px}
#slide-4 h2 {color: #bfc4c8; }
#slide-4 p {color: #bfc4c8; height: 100%; width: 100%; background-color: transparent; border: 3px solid #bfc4c8; box-sizing: border-box; padding: 40px 25px 25px 25px; }


/* Slide 5 */
#slide-5 .bcg {background-color: #1b0706; }

#slide-5 h1 {color: #f17277; text-transform: uppercase; margin-bottom: 100px}
#slide-5 h1 span small {color: #f17277; display: block; margin-bottom: 7px; font-size: 22px}
#slide-5 h1 span:first-child {
    color: #f17277;
    display: block;
    margin-bottom: 12px;
    font-size: 22px;
}
#slide-5 h1 span:last-child {
    font-weight: 700;
    font-size: 40px;
    line-height: 24px;
    display: inline-block;
    width: 100%;
    margin: 0;
    margin-bottom: 22px;
    float: left;
    text-transform: uppercase;
    color: #f17277}

#slide-5 h2 {color: #beafbf;
    font-size: 20px;
    text-transform: uppercase;
    font-weight: 300;}
#slide-5 p {color: #beafbf; }

#slide-5 form {display: block; width: 100%;}
#slide-5 input[type="text"] {width: 100%; margin: 0 0 30px 0; padding: 15px 15px; text-transform: uppercase; background-color: transparent; color: #201e1a; border-width: 0px; border-bottom: 2px solid #201e1a; outline: none; }
#slide-5 .text-wrapper:last-child input[type="text"] {margin-bottom: 0px; }
#slide-5 textarea {width: 100%; height: 52px; margin: 0 0 20px 0; padding: 15px 15px; font-size: 15px; text-transform: uppercase; background-color: transparent; color: #201e1a; border-width: 0px; border: 2px solid #201e1a; outline: none; border-top-width: 0px; border-right-width: 0px; border-left-width: 0px; }
#slide-5 input[type="submit"] {border-width: 2px; border-color: #201e1a; padding: 10px 15px; text-transform: uppercase; background-color: transparent; color: #201e1a; font-weight: 700; letter-spacing: 2px; }
#slide-5 .submit-wrapper {margin-top: 40px; text-align: center; }

#slide-5 ::-webkit-input-placeholder {color: #141022; }
#slide-5 :-moz-placeholder { /* Firefox 18- */  color: #141022; }
#slide-5 ::-moz-placeholder {  /* Firefox 19+ */ color: #141022; }
#slide-5 :-ms-input-placeholder { color: #141022; }


#slide-5 h2 {padding-left: 0px; font-size: 22px; line-height: 22px; font-weight: 900; height: auto; margin-top: 30px; }






@media screen and (min-width: 240px)
{
    main {margin-top: -50px; }

    #nav-wrapper {height: 50px; }

    section .col-xs-12 {padding-left: 30px; padding-right: 30px; }


    .affix-top {width: 100%; z-index: 99999; background-color: rgba(0, 0, 0, 0.8); border-width: 0px; margin-bottom: 0px; }
    .affix-top .navbar-brand {width: 100%; height: 50px; background: url('img/logo.png') no-repeat left center; margin-left: 7px;}
    .affix-top .navbar-toggle, .affix-top .navbar-toggle:hover, .affix-top .navbar-toggle:focus {border-radius: 0px; border-width: 0px; background-color: transparent; margin-right: 7px; }
    .affix-top .navbar-collapse {border-top-width: 0px; }
    .affix-top .navbar-nav {margin-top: 0px; margin-bottom: 0px; }
    .affix-top .navbar-nav > li > a, .affix-top .navbar-nav > li > a:hover, .affix-top .navbar-nav > li > a:focus {text-align: center; color: #ffffff; letter-spacing: 2px; }
    .affix-top .navbar-nav > .active > a, .affix-top .navbar-nav > .active > a:hover, .affix-top .navbar-nav > .active > a:focus {text-align: center; color: #000000; }

    .affix {width: 100%; z-index: 99999; background-color: rgba(0, 0, 0, 0.6); border-width: 0px; margin-bottom: 0px; -webkit-animation-name: bounceInDown; animation-name: bounceInDown; }
    .affix .navbar-brand {width: 117px; height: 50px; background: url('img/logo.png') no-repeat left center; margin-left: 7px; background-size: contain}
    .affix .navbar-toggle, .affix .navbar-toggle:hover, .affix .navbar-toggle:focus {border-radius: 0px; border-width: 0px; background-color: transparent; margin-right: 7px; }
    .affix .navbar-collapse {border-top-width: 0px; }
    .affix .navbar-nav {margin-top: 0px; margin-bottom: 0px; }
    .affix .navbar-nav > li > a, .affix .navbar-nav > li > a:hover, .affix .navbar-nav > li > a:focus {text-align: center; color: #ffffff; letter-spacing: 2px; }
    .affix .navbar-nav > .active > a, .affix .navbar-nav > .active > a:hover, .affix .navbar-nav > .active > a:focus {text-align: center; color: #000000; }

    /*main {margin-top: -70px; }*/


    section .hsContent {padding-top: 100px;/* padding-bottom: 100px;*/ }

    /*#slide-1 {margin-top: -50px; }*/
    #slide-1 .hsContent {vertical-align: bottom;/* padding-bottom: 60px;/ }
    #slide-1 #bcg1 span#h1 {font-size: 60px; line-height: 60px; }
    #slide-1 #bcg1 span#h2 {font-size: 12px; line-height: 12px; }

    #slide-1 #bcg1 {background-image:url('img/slide-1-carousel-1-mobile-320.jpg'); }

}


@media screen and (min-width: 320px)
{
    .container {padding-left: 30px; padding-right: 30px; }

    .affix-top .navbar-brand {width: 213px; }
    .affix .navbar-brand {width: 213px; }

}


@media screen and (min-width: 480px)
{
    .container {padding-left: 60px; padding-right: 60px; }
    #slide-1 .hsContent {/*padding-bottom: 80px; */}

    #slide-1 #bcg1 span#h1 {font-size: 60px; line-height: 60px; }
    #slide-1 #bcg1 span#h2 {font-size: 20px; line-height: 20px; }

}

@media screen and (min-width: 320px) {
    #slide-1 #bcg1 {
        background-image: url('img/slide-1-carousel-1.jpg');
    }
    #slide-3 .bcg {
        background-image: url('img/slide-3.jpg');
    }
    /*#slide-3 .row {padding: 0 25px}
    #slide-3 .row h1 {padding: 0 25px}
    #slide-5 .row {padding: 0 20px}
    #slide-5 .row h1 {padding: 0 20px}*/
}

@media screen and (min-width: 320px) and (max-width: 767px) {
    #slide-1 .bcg2 #phone {
        background-image: url('img/slide-1-carousel-1-phone.png.jpg');
        width: 350px !important;
        height: 566px !important;
        bottom: -148px;
        background-size: contain;
        display: block !important;
    }
    #slide-1 .bcg2 #phone {background-image: url('img/slide-1-carousel-1-phone.png'); width: 350px !important; height: 566px !important; bottom: -148px; background-size: contain}

    /* #slide-5 .row:nth-child(3n+2) div:nth-child(3n+2) {
        padding: 10px 0 0 0;
    } */
    .time-counter div span {
        font-size: 50px !important;

    }
    .time-counter div b {
        font-size: 14px !important;

    }
}

@media screen and (max-width: 428px) {
    #slide-1 #bcg1 span#h1 {font-size: 40px !important; line-height: 40px !important}
}



@media screen and (min-width: 768px)
{

    main {margin-top: -113px; }
    /*#slide-1 {margin-top: 0px; }*/
    #slide-1 #bcg1 {background-image:url('img/slide-1-carousel-1.jpg'); }

    #nav-wrapper {height: 113px; }
    #nav-wrapper .container {padding-left: 0px; padding-right: 0px; }


    .navbar-default .navbar-collapse .navbar-nav {float: right; text-align: right; }
    .navbar-default .navbar-collapse .navbar-nav li {display: inline-block; }


    .affix-top {padding-top: 20px; padding-bottom: 20px; }
    .affix-top {background-color: transparent; }
    .affix-top .navbar-brand {width: 246px; height: 73px; background-image: url('img/logo.png'); }
    .affix-top .navbar-collapse {min-width: 475px; float: right; padding-right: 0px; }

    .affix-top .navbar-nav > li > a, .affix-top .navbar-nav > li > a:hover, .affix-top .navbar-nav > li > a:focus {font-size: 11px; color: #dfe0d9; padding-left: 5px; padding-right: 5px; line-height: 43px; }
    .affix-top .navbar-nav > .active > a, .affix-top .navbar-nav > .active > a:hover, .affix-top .navbar-nav > .active > a:focus {color: #4cb834; background-color: transparent; }



    .affix .navbar-collapse {min-width: 475px; float: right; }
    .affix .navbar-nav > li > a, .affix .navbar-nav > li > a:hover, .affix .navbar-nav > li > a:focus {font-size: 11px; color: #dfe0d9; padding-left: 10px; padding-right: 10px; }
    .affix .navbar-nav > .active > a, .affix .navbar-nav > .active > a:hover, .affix .navbar-nav > .active > a:focus {color: #4cb834; background-color: transparent; }





    /*.affix-top .container {width: 100%; }*/
    .affix-top >.container .navbar-brand, .affix-top >.container-fluid .navbar-brand {margin-left: 0px; }

    .affix .container {width: 100%; }
    .affix > .container .navbar-brand, .affix-top >.container-fluid .navbar-brand {margin-left: 10px; }

    #slide-1 #bcg1 .bcg2 {}
    #slide-1 #bcg1 span#h1 {font-size: 50px; line-height: 50px; }
    #slide-1 #bcg1 span#h2 {font-size: 25px; line-height: 25px; }

    #slide-1 .bcg2 #phone {background-image: url('img/slide-1-carousel-1-phone.png'); width: 450px !important; height: 666px !important; bottom: -148px; background-size: contain}

    #slide-1 .hsContent {/*padding-bottom: 100px;*/ }




    #slide-3 .bcg {background-image: url('img/slide-3.jpg'); }
    #slide-3 .row {margin-bottom: 50px; }

    #slide-5 .bcg {background-image: url('img/slide-5.jpg'); }

    #slide-5 h1 { }

    #slide-5 .hsContent {vertical-align: middle; }


}

@media screen and (min-width: 992px)
{
    .container {padding-left: 15px; padding-right: 15px; }

    #slide-1 #bcg1 span#h1 {font-size: 70px; line-height: 70px; width: 70%; }
    #slide-1 #bcg1 span#h2 {font-size: 23px; line-height: 23px; width: 70%; }

    #slide-1 .hsContent {/*padding-bottom: 100px; */}


    /*#slide-1 .bcg2 #phone {background-image: url('img/slide-1-carousel-1-phone-250.png'); width: 250px; height: 404px; bottom: -130px; }*/
    #slide-1 .bcg2 #phone {background-image: url('img/slide-1-carousel-1-phone.png'); width: 450px; height: 666px; bottom: -148px; background-size: contain}

}

@media screen and (min-width: 1200px)
{
    #slide-1 .hsContent {/*padding-bottom: 100px;*/ }

    #slide-1 #bcg1 span#h1 {font-size: 90px; line-height: 90px; width: 70%; }
    #slide-1 #bcg1 span#h2 {font-size: 27px; line-height: 27px; width: 70%; }

    /*#slide-1 .bcg2 #phone {background-image: url('img/slide-1-carousel-1-phone-506.png'); width: 506px; height: 818px; bottom: -150px; }*/

    #slide-1 .bcg2 #phone {background-image: url('img/slide-1-carousel-1-phone.png'); width: 450px; height: 666px; bottom: -148px; background-size: contain}

}

@media screen and (min-width: 1800px)
{

}
.navbar-nav,
.navbar-toggle {display: none}
#slide-2 .hsContent,
#slide-4 .hsContent {padding-top: 0 !important}
#slide-4 .hsContent {vertical-align: top}
#slide-2 {height: 420px !important}
#slide-4 {height: 648px !important}
#slide-4 .row:last-child {margin-top: 220px}
#slide-5 .media-ic {
    list-style: none;
    overflow: hidden;
    padding: 0;
  }
#slide-5 .media-ic li {
    float: left;
    margin-right: 32px;
}
#slide-5 .media-ic li a {
    display: block;
    text-indent: -9999px;
    background: url(img/media-ic.png) no-repeat;
    width: 36px;
    height: 28px;
}
#slide-5 .media-ic li a.ic2 {
    background-position: 0 -30px;
}
#slide-5 .media-ic li a.ic3 {
    background-position: 0 -60px;
}
#slide-5 .row:last-child {margin-top: 50px}

.time-counter {
    width: 100%;
    text-align: center;
    display: table;
}
.time-counter div {
    width: 25%;
    text-align: center;
    display: table-cell;
    position: relative;
}
.time-counter div span {
    font-size: 90px;
    color: #fff;
    font-weight: 100;
    display: block;
}
.time-counter div b {
    font-size: 20px;
    color: #fff;
    font-weight: 100;
    text-transform: uppercase;
    bottom: -50px;
    left: 50%;
    display: block;
    text-align: center;
}