body {
    margin:0;
    padding:0;
    position: relative;
    /*font-family: Verdana, "DejaVu Sans", "Bitstream Vera Sans", Geneva, sans-serif;*/
    font-family: 'Open Sans', sans-serif;
    font-size: 14px; line-height: 20px;

    color:#707070;
}
.text-center {
    text-align: center;
}
.text-justify {
    text-align: justify;
}
.rouge {
    color:#ea3255;
}
.vert {
    color:#bcdb69;
}
h3 {

}
::-moz-selection { /* Code for Firefox */
    color: white;
    background: #d94561;
}
::selection {
    color: white; 
    background: #d94561;
}
img::-moz-selection { /* Code for Firefox */
    color: none;
    background: none;
}
img::selection {
    color: none;
    background: none;
}

/* BG */

.bg {
    position:absolute;
    width:100%;
    transform:skewY(-16deg);
    z-index:1;
}
.bg.diamond {
    background-image: url('img/bg.png');
    background-repeat: repeat;
}
.bg.pink {background-color: #d94561;}
.bg.dark {background-color: #1a2430;}
.bg.gray {background-color: #efefef;}


.hideme {
    opacity:0;
}

.videoWrapper {
    position: relative;
    padding-bottom: 58.25%; /* 16:9 */
    
    height: 0;

    width:93%; 
    margin-left:4%; 
    margin-top:4%; 
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/* SECTIONS */

#bg-header, #header {height:850px;} #bg-header {top:-350px;}
#bg-fonctios, #fonctios {height:1150px;}
#bg-video, #video {height:700px;}
#bg-footer, #bg-footer-container, #footer {height:1000px;} #bg-footer {height:1500px;top:275px;}
.container {
    max-width:990px;
    
    margin-left: auto;
    margin-right: auto;
    position:relative;
    z-index:2;
}
.inner-container {
    padding-top:100px;
    padding-bottom:100px;
    padding-left:20px;
    padding-right:20px;
}
#bg-white {
    position: absolute;
    background-image: url('img/white-background.jpg');
    background-repeat: no-repeat;
    width:387px;
    height: 767px;
}
#bg-video-shadow {
    position: absolute;
    top:0;
    right: 0;
    width:887px;
    height:200px;
    z-index: 2;
    background-image: url('img/inner-shadow2.png');
    background-repeat: no-repeat;
}

/* TITRES */

.title {
    font-size:33px;
    font-family: 'Fjalla One', sans-serif;
    text-transform: uppercase;
}
.title.pink {color: #d94561;}
.title.gray {color: #CCC;}
.title.white {color: white;}
.title.center {text-align: center;}
.trait {
    width:35px;
    height:7px;
    margin-top: 15px;
}
.trait.gray {background-color: #CCC;}
.trait.white {background-color: white;}
.trait.pink {background-color: #d94561;}
.trait.center {margin-left: auto; margin-right: auto;}


/* HEXAGONS */
.hexagon-container {
    width:628px;
    margin-left: auto;
    margin-right: auto;
}
.big-hexagon {
    width:294px;
    height:361px;
    float: left;
    margin-left:10px;
    margin-right:10px;
    margin-top:-70px;
} 
.big-hexagon h2 {
    font-family: 'Fjalla One', sans-serif;
    
    line-height: 25px;
    font-weight: 300;
}
.hexagon-content {
    padding-top:50px;
    padding-left: 20px;
    padding-right: 20px;
    text-align: center;
}
.big-hexagon.gray {background-image: url('img/hexagon-gray.png'); color:#999; }
.big-hexagon.pink {background-image: url('img/hexagon-pink.png'); color:#ffdde3; }
.big-hexagon.dark {background-image: url('img/hexagon-dark.png'); color:#dbdfe4; }

.big-hexagon.gray {
    float: none;
    margin-left: auto;
    margin-right: auto;
    margin-top:0;
}



#header {
    color:white;
}

    
#fonctios {
    position:relative;
    z-index:2;
}


.badge-left {
    position: relative;
    background: -moz-linear-gradient(left,  rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
    background: -webkit-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
    background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 );

    height:166px;
    width:100%;
}
.badge-left h2 {
    font-family: 'Fjalla One', sans-serif;
    font-weight: 300;
    text-align: left;
    color: #d94561;
}
.badge-right h2 {
    font-family: 'Fjalla One', sans-serif;
    font-weight: 300;
    text-align: right;
    color: #4c4c67;
}
.badge-right {
    position: relative;
    background: -moz-linear-gradient(left,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
    background: -webkit-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
    background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 );


    height:166px;
    width:100%;
}
.badge-left .inner-badge {
    padding:10px; 
    padding-left:170px; 
}
.badge-right .inner-badge {
    padding:10px; 
    padding-right:170px; 
    text-align: right;
}


.badge-left .badge-shadow {
    position:absolute;
    top:166px;
    left: 0;
}
.badge-right .badge-shadow {
    position:absolute;
    top:166px;
    right: 0;
    -webkit-transform: scaleX(-1);  /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: scaleX(-1);  /* IE 9 */
    transform: scaleX(-1);
}
.badge-left img {
    float:left;
}

#logo {
    margin-top:10px;
}

#menu {
    float:right;
    font-family: 'Fjalla One', sans-serif;
    font-weight: 300;
    font-size: 18px;
    height:70px;
    line-height: 70px;

}
#menu a {
    transition:0.2s;
    text-decoration: none;
    float:left;
    margin-left:30px;
}
#menu a:link, #menu a:visited {color:white;}
#menu a:active, #menu a:hover {color:#d94561;}

#slogan {
    height:180px;
    padding-top:100px;
    z-index:5;
    color: white;
    font-size: 35px;
    line-height: 42px;
    font-family: 'Fjalla One', sans-serif;
    font-weight: 300;
    text-transform: uppercase;
}
#slogan span.gray {color:#a1a8b1;}
#slogan span.pink {color:#d94561;}

#screens {
   
}
#screens img.screens {
    float: left;
    width: 700px;
}
#screens a {
    float: right;
    margin-top:300px;
}
#cubes {
    position:absolute;
    z-index:4;
    top:100px;
    right:0px;
}


#big-screen {
    width:90%; 
    margin-left:5%; 
    margin-top: 50px;
    position: relative;
}

#footer {
    color: #dbdfe4;
}


.button {
    color:white;
    background-color: #d94561;
    border: 2px solid transparent;
    padding:8px 30px;
    cursor:hand;
    cursor: pointer;
    -webkit-border-radius: 50px; 
    -moz-border-radius: 50px; 
    border-radius: 50px; 
    transition:.3s;
    font-weight: 600;
    text-decoration: none;
}
.button:hover {
    color:#d94561;
    background-color: transparent;
    border: 2px solid #d94561;
}

#form-container {
    width:350px; 
    margin-left:auto; 
    margin-right:auto; 
}

form input[type="text"], form textarea, form select {
    background-color:rgba(0,0,0,0.13);
    border:1px solid rgba(255,255,255,0.6);
    color:#BBB;
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    padding:8px 15px;
    width:100%;
    display: inline-block;
    margin-bottom:10px;
    box-sizing:border-box;
}
form select option {
    background-color: #1a2430;
}
::-webkit-input-placeholder { color:#777; }
::-moz-placeholder { color:#777; } /* firefox 19+ */
:-ms-input-placeholder { color:#777; } /* ie */
input:-moz-placeholder { color:#777; }


.testimony {
    position:relative; 
    padding-left:120px;
    padding-right:20px;
}
#try {
    padding-left:20px;
    padding-right:20px;   
}
.footer-col {
    float:left; 
    width:50%;
}
.floating-logo {
    float:left; 
    width:331px;
}
.button-demo {
    position:absolute; 
    z-index:9; 
    top:465px; 
    right:210px;
}
.trait.about {
    margin-left:331px;
}

#contact {
    padding-top:350px;
}
#count {
    font-size:25px;
    color:#d94561;
}
.button-demo-2 {
    display:none;
}

/* -------------------- RESPONSIVE -------------------------- */

@media (min-width: 1200px) {/* LG,  écran large */ 

}
@media (max-width: 1200px) { /* MD,  écran moyen */

}
@media (max-width: 992px) { /* XS, tablette */

    #logo {
        margin-left: 20px;
        margin-top: 20px;
        width: 110px;
    }
    #menu { 
        margin-right: 20px;
        font-size: 17px;
    }

    .button-demo-2 {
        display:block;
    }
    
    .testimony {
        padding-left:20px;
    }
    .testimony img {
        display:none;
    }
    .footer-col {
        float:none; 
        width:auto;
        padding-left:20px;
        padding-right:20px;  
    }
    
    
    #form-container {width:100%; margin-top:30px;}

    .badge {
        display:none;
    }
    .badge-left .inner-badge {
        padding:10px; 
        padding-left:10px; 
    }
    .badge-right .inner-badge {
        padding:10px; 
        padding-right:10px;
    }
    .badge-left, .badge-right {
        height:auto;
    }
    .inner-container {
        padding:0;
    }
    .badge-shadow {
        display: none;
    }
    .floating-logo {
        display: none;
    }
    #about {
        margin-top:80px;
    }
    .about {
        padding-left:20px;
        padding-right:20px;  
    }
    
    #cubes {
        display: none;
    }
    #slogan {
        padding-left:20px;
    }
    #screens img.screens {
        float: none;
        width: 96%;
        margin-left:2%; 
    }
    .button-demo { 
        display: none;
    }
    .trait.about {
        margin-left:0px;
    }
    #bg-footer-container {
        width: 100%;
    }
    .container {
        width:100%;
    }
    #bg-white {
        width: 100%;
    }
    
    #bg-video-shadow {
        width:100%;
    }
    #try {
        width:auto;
    }

    #bg-footer, #bg-footer-container, #footer {height:1500px;} #bg-footer {height:2000px;top:275px;}
    #bg-header, #header {height:850px;} #bg-header {top:-200px;}
    #bg-fonctios, #fonctios {height:850px;}
    #bg-video, #video {height:600px;}
    #bg-footer, #bg-footer-container, #footer {height:1200px;} #bg-footer {height:1500px;top:125px;}

    #contact {
        padding-top:200px;
    }
}
@media (max-width: 767px) { /* SM,  mobile */
    #video .inner-container {
        padding-top:60px;
    }
    #fonctios .inner-container {
        padding-top:70px;
    }
    #menu { 
        display: none;
    }
    #logo {
        width: 149px;
        display: block;
        margin-left: auto;
        margin-right: auto; 
        margin-top: 45px;
    }
    #slogan {
        height:180px;
        padding-top:70px;

        font-size: 25px;
        line-height: 34px;
        padding-left:20px;
        padding-right:20px;
    }
    /* HEXAGONS */
    .hexagon-container {
        width:100%;
        margin-left: auto;
        margin-right: auto;
    }
    .big-hexagon {
        float: none;
    } 
    .big-hexagon {
        float: none;
        margin-left: auto;
        margin-right: auto;
        margin-top:10px;
    }

    #bg-footer, #bg-footer-container, #footer {height:1500px;} #bg-footer {height:2000px;top:275px;}
    #bg-header, #header {height:750px;} #bg-header {top:-350px;}
    #bg-fonctios, #fonctios {height:950px;}
    #bg-video, #video {height:400px;}
    #bg-footer, #bg-footer-container, #footer {height:1200px;} #bg-footer {height:1500px;top:125px;}

    #contact {
        padding-top:100px;    
    }
}
@media (max-width: 500px) { /* SM,  mobile */
    #bg-header, #header {height:650px;} #bg-header {top:-350px;}
    #bg-fonctios, #fonctios {height:1100px;}
}