
@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=Raleway: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: #186ca6;

}

body {
    background-color: #186ca6;

}
h2 {
    margin-top: 0;
}

main {
    overflow-x: hidden;
    min-height: 100%;
    width: 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: "Raleway"; text-align: left; }

section h1 {background-repeat: no-repeat; background-position: top left; margin-bottom: 30px; font-size: 20px; font-weight: 700; }
section h1 span:first-child {font-weight: 300; font-size: 50px; line-height: 47px; display: inline-block; width: 100%; margin: 0; margin-bottom: 3px; float: left; }
/*section h1 span:last-child {font-weight: 700; font-size: 12px; line-height: 12px; display: inline-block; width: 100%; margin: 0; float: left; }*/

section h2 {font-size: 16px; font-weight: 700; background-repeat: no-repeat; background-position: left center; }

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: #186ca6; background-position: 50% 50%; background-size: cover; }


#slide-1 #bcg1 span.h {display: block; text-align: center; }
#slide-1 #bcg1 span#h1 { color: #ffffff; margin: 0 0 0 0; font-weight: 900; }
#slide-1 #bcg1 span#h2 { color: #ffffff; font-weight: 400; margin-bottom: 10px; margin-bottom: 30px; }

#slide-1 #bcg1 #next-wrapper {margin-left: auto; margin-right: auto; box-sizing: border-box; }
#slide-1 #bcg1 #next {margin-top: 50px; display: block; box-sizing: border-box; height: 82px; padding-bottom: 50px; color: #ffffff; text-decoration: none; text-align: center; background: url('img/slide-1-more.png') no-repeat bottom center; }

#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; }



/* 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: #186ca6; }
#slide-2 h1 {color: #2caa47; text-align: center; }
#slide-2 h2 {color: #000000; }
#slide-2 p {color: #000000; }


/* Slide 3 */
/*#slide-3 .bcg {background-color: #242328; }*/
#slide-3 .bcg {background-color: #186ca6; }
#slide-3 h1 {color: #ffffff; text-align: center; }
#slide-3 h2 {color: #ffffff; text-align: center; padding-top: 30px}
#slide-3 .wrapper {box-sizing: border-box; padding: 20px; border: 1px solid #ffffff; height: 100%; text-align: center; margin-bottom: 30px; }
#slide-3 p {color: #ffffff; text-align: center; }
#slide-3 img {margin-top: 30px; }


/* Slide 4 */
#slide-4 .bcg {background-color: #2e2f3a; }
#slide-4 h1 {color: #ffffff; }
#slide-4 h2 {color: #ffffff; }
#slide-4 p {color: #ffffff; box-sizing: border-box; padding: 20px; border: 1px solid #ffffff; height: 100%; }

/* Slide 5 */
#slide-5 .bcg {background-color: #0c293f; }
#slide-5 h1 {color: #ffffff; }
#slide-5 h2 {color: #ffffff; }
#slide-5 p {color: #ffffff; }

#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: #ffffff; border-width: 0px; border-bottom: 2px solid #ffffff; outline: none; }
#slide-5 .text-wrapper:last-child input[type="text"] {margin-bottom: 0px; }
#slide-5 textarea {width: 100%; margin: 0 0 20px 0; padding: 15px 15px; font-size: 15px; text-transform: uppercase; background-color: transparent; color: #ffffff; border-width: 0px; border: 2px solid #ffffff; outline: none; border-top-width: 0px; border-right-width: 0px; border-left-width: 0px; }
#slide-5 input[type="submit"] {-webkit-appearance: none; -moz-appearance: none; border-width: 2px; border-color: #ffffff; padding: 10px 15px; text-transform: uppercase; background-color: transparent; color: #ffffff; font-weight: 700; letter-spacing: 2px; }
#slide-5 .submit-wrapper {margin-top: 40px; }

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

/*#slide-5 #screen {left: 50%; background-repeat: no-repeat; background-position: center center; }*/


#slide-5 h2 {padding-left: 0px; font-size: 35px; line-height: 35px; font-weight: 900; height: auto; }
#slide-5 .col:last-child p {width: 70%; font-weight: 900; }
#slide-5 .table {height: 100%; }
#slide-5 .cell {vertical-align: bottom; }

#slide-5 #footer {margin-top: 50px; }

@media screen and (min-width: 240px)
{
    section .col-xs-12 {padding-left: 30px; padding-right: 30px; }



    .affix-top {width: 100%; z-index: 99999; background-color: rgba(255, 255, 255, 0.9); border-width: 0px;}
    .affix-top .navbar-brand {width: 220px; height: 50px; background: url('img/ecostrategic.png') no-repeat 0 -28px; background-size: cover; 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: #6a6a6a; }
    .affix-top .navbar-nav > .active > a, .affix-top .navbar-nav > .active > a:hover, .affix-top .navbar-nav > .active > a:focus {text-align: center; background-color: #2caa47; color: #ffffff; }

    .affix {width: 100%; z-index: 99999; background-color: rgba(255, 255, 255, 0.9); border-width: 0px;}
    .affix .navbar-brand {width: 220px; height: 50px; background: url('img/ecostrategic.png') no-repeat 0 -28px; margin-left: 7px; background-size: cover}
    .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: #6a6a6a; }
    .affix .navbar-nav > .active > a, .affix .navbar-nav > .active > a:hover, .affix .navbar-nav > .active > a:focus {text-align: center; background-color: #d63852; color: #ffffff; }


    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: 30px; line-height: 30px; margin-bottom: 100px; }
    #slide-1 #bcg1 span#h2 {font-size: 18px; line-height: 18px; }

    #slide-1 #bcg1 #next {font-size: 15px; }
    #slide-1 #bcg1 {background-image:url('img/slide-1-carousel-1.jpg'); }

    #slide-2 h1 {text-align: center; }
    #slide-2 p {text-align: center; }


    #slide-5 #footer {background-position: top left; padding-top: 65px; }



}


@media screen and (min-width: 320px)
{
    .container {padding-left: 30px; padding-right: 30px; }
    #slide-1 #bcg1 #next {font-size: 20px; }
}


@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: 30px; line-height: 30px; margin-bottom: 100px; }
    #slide-1 #bcg1 span#h2 {font-size: 18px; line-height: 18px; }

}


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

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

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


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

    .affix-top {margin-top: 0px; }
    .affix-top {background-color: #ffffff; }
    .affix-top .navbar-collapse {min-width: 460px; float: right; }

    .affix-top .navbar-nav > li > a, .affix-top .navbar-nav > li > a:hover, .affix-top .navbar-nav > li > a:focus {color: #fff; padding-left: 10px; padding-right: 10px; }
    .affix-top .navbar-nav > .active > a, .affix-top .navbar-nav > .active > a:hover, .affix-top .navbar-nav > .active > a:focus {color: #2caa47; background-color: transparent; }


    .affix {background-color: #ffffff; }
    .affix .navbar-collapse {min-width: 460px; float: right; }
    .affix .navbar-nav > li > a, .affix .navbar-nav > li > a:hover, .affix .navbar-nav > li > a:focus {color: #fff; padding-left: 10px; padding-right: 10px; }
    .affix .navbar-nav > .active > a, .affix .navbar-nav > .active > a:hover, .affix .navbar-nav > .active > a:focus {color: #2caa47; background-color: transparent; }





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

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



    #slide-1 .hsContent {padding-bottom: 30px; }


    #slide-2 p {margin: 0 30%; }


    #slide-3 .row {margin-bottom: 50px; }


    /*#slide-5 #footer {background-position: left center; padding-top: 0px; padding-left: 115px; height: 59px; line-height: 59px;  }*/


}

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




    #slide-1 .hsContent { }


}

@media screen and (min-width: 1200px)
{
    #slide-1 .hsContent { }

}

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

}

.navbar {border-radius: 0 !important; background: #2e2f3a !important}

#privacy {
    background-image: url(img/slide-1-carousel-1.jpg);
    background-position: 50% 0px;
    background-size: cover;
    color: #fff;
}
