/* Bleu Brittaz #1595B5 1595B5 */

@font-face {font-family: "Roboto";src: url("../fonts/RobotoCondensed-Bold.ttf");font-weight: bold;}
@font-face {font-family: "Roboto";src: url("../fonts/RobotoCondensed-BoldItalic.ttf");font-style: italic;font-weight: bold;}
@font-face {font-family: "Roboto";src: url("../fonts/RobotoCondensed-Italic.ttf");font-style: italic;}
@font-face {font-family: "Roboto";src: url("../fonts/RobotoCondensed-Regular.ttf");}

@font-face {font-family: "WorkSans";src: url("../fonts/WorkSans-Bold.ttf");font-weight: bold;}
@font-face {font-family: "WorkSans";src: url("../fonts/WorkSans-BoldItalic.ttf");font-style: italic;font-weight: bold;}
@font-face {font-family: "WorkSans";src: url("../fonts/WorkSans-Italic.ttf");font-style: italic;}
@font-face {font-family: "WorkSans";src: url("../fonts/WorkSans-Regular.ttf");}

@font-face {font-family: "SourceSansPro";src: url("../fonts/SourceSansPro-Bold.ttf");font-weight: bold;}
@font-face {font-family: "SourceSansPro";src: url("../fonts/SourceSansPro-BoldItalic.ttf");font-style: italic;font-weight: bold;}
@font-face {font-family: "SourceSansPro";src: url("../fonts/SourceSansPro-Italic.ttf");font-style: italic;}
@font-face {font-family: "SourceSansPro";src: url("../fonts/SourceSansPro-Regular.ttf");}

@font-face {font-family: "Abel";src: url("../fonts/Abel-Regular.ttf");}

/* Pour que les images soient collées aux bords */
body {margin: 0; font-family: "WorkSans", arial; }
footer {/*background-color: #000;*/ color: #898989; padding: 10px 20px; font-weight: normal; display: flex; justify-content: space-between;background-image:-webkit-linear-gradient(top,#fff 0,#e0e0e0 100%);background-image:linear-gradient(to bottom,#fff 0,#e0e0e0 100%);}
footer div {margin: auto 0;}
footer a {color: #898989;}
footer img {margin-right: 10px; filter: brightness(0) invert(.7); height: 30px; width: auto;}
footer > .col:nth-child(1) {margin-left: 8px;}
.equal {display: flex; display: -webkit-flex; flex-wrap: wrap;}
h1 {font-family: "Roboto", arial; text-align: left; margin-top: -55px; margin-right: 20px; color: #fff; position: absolute; z-index: 1; right: 0; width: 40%;}
/*h1 {font-family: "Roboto", arial; text-align: left; margin-top: -55px; margin-left: 20px; color: #fff; position: absolute; z-index: 1; left: 0;}*/
h2 {font-family: "Roboto", arial; text-transform: uppercase; font-size: 26px; font-weight: bold; /*color: #fff; background-color: #FFA500; padding: 10px;*/}
.titreOnglet {font-family: "Roboto", arial; font-size: 26px;}
.div2 h2, .div3 h2 {margin-left: -100px; padding-left: 25px; /*background: url("../img/logo-hd-gris.png") transparent no-repeat; background-size: 20px; background-position: left center;*/}
.div2 h2 img, .div3 h2 img {width: 20px; height: auto; margin-bottom: 5px; margin-right: 2px;}
.div3 h2 img {filter: brightness(0) invert(1);}
.div2 h2 img {filter: brightness(0.4);}
h5 {font-family: "Roboto", arial; font-size: 20px; padding-left: 20px; color: #1595B5; font-weight: bold;}
a {color: #1595B5;}
/*a {color: #B5E0FE;}*/
a:hover {color: #999999; text-decoration: none;}
.formContact input, .formContact select, .formContact textarea {outline: #fff;}
#navbar a {outline: #000;}
.navbar-nav > li {padding: 0 10px;}
.rouge {color: #D2322D;}
.bordure-rouge {border: 2px solid #D2322D; border-radius: 10px; padding-top: 15px;}
.info {font-style: italic; font-size: 12px;}
.ressort {font-family: "SourceSansPro";font-size: 40px; font-weight: bold; color: #1595B5; letter-spacing: .1em;}
.displayname {font-family: "Roboto", arial; font-weight: bold; font-size: 22px; letter-spacing: .1em; margin: auto; color:#1595B5;}
li.displayname {list-style: none}
.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus {color: #1595B5}
.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus {color: #1595B5}
.navbar-inverse .navbar-toggle {border-color: #898989;}
.navbar-inverse .navbar-toggle .icon-bar {background-color: #898989;}
select#domaine {background-color: #fff;}
.navbar-toggle {border: none; outline: transparent;}
.navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus {background-color: transparent;}

.parallax {
    /*background-image: url('../img/industry-2630319_1920.jpg');*/
    background-image: url('../img/industry.jpg');
    height: 450px;

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#lienArrowsDown .arrows-down {margin-top: 20px;}
.description {padding: 50px 15%; font-family: "Roboto", arial; font-size: 26px; text-align: justify; line-height: 40px;}
.div2, .div3 {width: 100%; padding: 50px 15%;}
.div2 {background-color: #fff; outline: #fff;}
/*.div3 {background-color: #FFFF78; outline: #FFFF78}*/
/*.div3 {background-color: #1595B5; outline: #1595B5; color: #fff;}*/
.div3 {background-color: #000056; outline: #000056; color: #fff;/* background: url("../img/logo-hd-gris.png") #000056 no-repeat; background-size: 80%; background-position: center center;*/}
/*.div2 { background: url("../img/logo-hd-gris.png") transparent no-repeat; background-size: 80%; background-position: center center}*/
.div2, .div3 {overflow-x: hidden; overflow-y: hidden;}
/*.div3 {background-color: #FFEEB3; outline: #FFEEB3}*/
.dernierDiv {padding-bottom: 0;}
.col-sm-6 {padding: 20px;}

.imgLogo {height: 60px; margin-left: 50px; /*margin-top: 8px;*/}
.sousTitre {display: flex;}
.sousTitre h5 {margin: auto 0;}

/*.navbar {background-color: black; padding: 20px; transition: all .5s ease; font-size: 20px;background-image:-webkit-linear-gradient(top,#383838 0,#000 100%);background-image:linear-gradient(to bottom,#383838 0,#000 100%);}*/
.navbar {background-color: black; padding: 20px; transition: all .5s ease; font-size: 20px;background-image:-webkit-linear-gradient(top,#fff 0,#e0e0e0 100%);background-image:linear-gradient(to bottom,#fff 0,#e0e0e0 100%);}
/*.navbar {background-color: black; padding: 20px; transition: padding .5s ease; font-size: 24px;}*/
.navbar-collapse ul {text-align: right; margin-right: 0; float: right;}
/*.navbar-inverse .navbar-nav > .active > a {font-size: 16px;}*/
/* AJOUT POUR AVOIR LA CROIX DANS LE MENU "HAMBURGER" */
.navbar-toggle .icon-bar {
    position: relative;
    transition: all 200ms ease-in-out;
}

.navbar-toggle:not(.collapsed) .icon-bar:nth-of-type(1) {
    top: 6px;
    transform: rotate(45deg);
}

.navbar-toggle:not(.collapsed) .icon-bar:nth-of-type(2) {
    background-color: transparent;
}

.navbar-toggle:not(.collapsed) .icon-bar:nth-of-type(3) {
    top: -6px;
    transform: rotate(-45deg);
}
/* FIN AJOUT */

.mr-4-svg {height: 50px; width: auto;}

.rowMessage {font-size: 16px; margin: auto;}
.formContact {
    margin: auto;
    /*width: 80%;*/
    background-color: #fff;
    /*    border: 1px solid #383838;
        border-radius: 20px;*/
    padding: 40px 8% 20px 8%;
    position: relative;
    text-align: center;
    color: #000;
}

.media, .media-body {padding-top: 10px;}

.formContact .col-md-6, .formContact .col {margin-bottom: 30px;}
.formContact input, .formContact select {width: 400px; border-radius: 20px; border: 1px solid gray; margin: 0 10px; line-height: 40px; font-size: 16px;}
/*.formContact input#resultat {width: 200px; border-radius: 20px; border: 1px solid gray; margin: 0 10px; line-height: 40px; font-size: 16px;}*/
.formContact input:not(#submitbutton)
/*, .formContact select*/ 
{padding: 0 0 0 55px;}
.formContact select {height: 40px; padding-left: 0; text-indent: 60px;}
/*.formContact select {height: 40px; padding-left: 60px;}*/
.formContact textarea {resize: none; width: 800px; height: 230px; padding: 20px; border-radius: 20px; border: 1px solid gray; margin: 0 10px; line-height: 20px; font-size: 16px;}
.formContact label {font-weight: normal; font-size: 16px; padding-top: 5px;}
.formContact .labelTextarea {display: flex; margin-left: 35px; line-height: 20px; margin-bottom: 10px; color: #505050; justify-content: center;}
.formContact .labelTextarea img {height: 30px; width: 30px; margin-right: 20px;}
.formContact #labelDomaine {background: url("../img/icons/question-mark-round.svg") transparent no-repeat; background-size: 25px 25px; background-position: left center; margin: 8px 30px 0 -400px; padding-left: 50px; line-height: 25px; background-color: transparent!important; padding-left: 21px;}
/* Les labels "flottants" façon placeholder */
input:focus ~ .floating-label,
select:focus ~ .floating-label,
input:not(:focus).floatingValid ~ .floating-label,
select:not(:focus).floatingValid ~ .floating-label {
    font-size: 12px;
    margin-top: -8px;
    margin-left: -370px;
    padding: 0 3px;
    background-color: #fff!important;
}

.floating-label {
    position: absolute;
    pointer-events: none;
    transition: 0.2s ease all;
    margin-top: 10px;
    margin-left: -350px;
    font-size: 16px;
    color: #505050;
    background-color: #fff;
}
#texteLabelDomaine {background-color: transparent;}
/* Fin des floating label */
.formContact #nomSociete {background: url("../img/icons/building.svg") transparent no-repeat; background-size: 30px 25px; background-position: left 8px center;}
.formContact #prenom, .formContact #nom {background: url("../img/icons/single-01.svg") transparent no-repeat; background-size: 25px 30px; background-position: left 8px center;}
.formContact #email {background: url("../img/icons/email-84.svg") transparent no-repeat; background-size: 25px; background-position: left 8px center;}
.formContact #telephone {background: url("../img/icons/phone-2.svg") transparent no-repeat; background-size: 30px 30px; background-position: left 8px center;}
.formContact #resultat {background: url("../img/icons/settings-gear-63.svg") transparent no-repeat; background-size: 30px 30px; background-position: left 8px center;}
/*.formContact #resultat {background: url("../img/icons/lock-open.svg") transparent no-repeat; background-size: 30px 30px; background-position: left 8px center;}*/
.formContact .colSubmit {text-align: center; margin-top: 20px;}
.formContact .colSubmit input {background: url("../img/icons/send-2.svg") transparent no-repeat; background-size: 30px 30px; background-position: 110px center; text-transform: uppercase;}
.formContact .colSubmit input:hover {background-color: #1595B5; color: #fff;}
.formContact .colSubmit input:hover {filter: brightness(1);}
.formContact .row.info {text-align: left;}

#fondateurs .row {display: flex; display: -webkit-flex; justify-content: space-between;}
/*#fondateurs .presentation {width: 50%;}*/
#fondateurs .col-50 {width: 48%;}
#fondateurs .row.col-50 {margin-left: 0; margin-right: 0;}
#fondateurs .col-auto {width:auto;}
#fondateurs .col-auto.col-img-droite {margin-right: 20px;}
#fondateurs .col-auto.col-img-gauche {margin-left: 20px;}
#fondateurs .col-50 img {height: 150px; width: auto; text-align: center;}
#fondateurs .phr {padding: 10px 20px; text-align: justify; margin-bottom: 10px;}
#fondateurs #clothilde .phr {margin-right: 10px}
#fondateurs #habib .phr {margin-left: 10px}
#fondateurs #brittaz {margin-top: 50px;}
#fondateurs #brittaz img {text-align: center; width: 250px; height: auto; align-self: flex-start;}
#fondateurs .texteBr {width: 100%; margin: 20px auto 0 auto; text-align: justify; padding: 0 20px;}
a .numTel {margin-right: 4px;}

ul.sol-contact {list-style: none;}
/*ul.sol-contact li:before {content: '\8640';}*/
/*ul.sol-contact li:before {}*/

.arrows-down{
    position: absolute;
    /*top: 50%;*/
    left: 50%;
    transform: translate(-50%,-50%);
}

.arrows-down span{
    display: block;
    width: 25px;
    height: 25px;
    border-bottom: 5px solid #1595B5;
    border-right: 5px solid #1595B5;
    transform: rotate(45deg);
    margin: -10px;
    animation: animate 2s infinite;
}
.arrows-down span:nth-child(2){
    animation-delay: -0.2s;
}

.formContact .input-erreur {border: 1px solid #CC0000; box-shadow: 0px 0px 5px #CC0000;}
.tipErreurResultat {font-style: italic; /*color:#DD0000;*/ font-weight: normal; margin-left: -78px; margin-top: 3px; visibility: hidden;}
.formContact .question-reultat {padding-top: 11px; text-align: right; padding-right: 20px;}

@keyframes animate {
    0%{
        opacity: 0.2;
        transform: rotate(45deg) translate(-5px,-5px);
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0.2;
        transform: rotate(45deg) translate(5px,5px);
    }
}

@media screen and (min-width:1279px) {
    h1 {margin-top: 250px; font-size: 46px}
}

@media screen and (min-width: 1024px) and (max-width:1279px) {
    h1 {margin-top: 270px;}
}

/*@media screen and (min-width: 992px) and (max-width:1479px) {*/
@media screen and (min-width: 1010px) and (max-width:1479px) {
    .div2, .div3 {padding: 50px;}
    .div2 h2, .div3 h2 {margin-left: -30px;}
    .formContact {padding: 40px 20px 20px 20px;}
    h1 {margin-top: 270px;}
}

@media screen and (min-width: 992px) and (max-width:1010px) {
    .div2, .div3 {padding: 50px;}
    .div2 h2, .div3 h2 {margin-left: -30px;}
    .formContact {padding: 40px 20px 20px 20px;}
    h1 {margin-top: 270px;}
    .floating-label {margin-top: -30px; margin-left: -140px;}
    .formContact #labelDomaine {margin: -32px 0px 0 -190px;}
    input:focus ~ .floating-label,
    select:focus ~ .floating-label,
    input:not(:focus).floatingValid ~ .floating-label,
    select:not(:focus).floatingValid ~ .floating-label
    {margin-top: -51px; margin-left: -160px;}
}

@media screen and (min-width: 768px) and (max-width:992px) {
    /*@media screen and (min-width: 768px) and (max-width:927px) {*/
    h1 {margin-top: 270px;}
    .imgLogo {height: 40px; margin-left: 0;}
    .nav > li > a {padding: 15px 5px;}
    .description {padding: 50px 10%;}
    input:focus ~ .floating-label,
    select:focus ~ .floating-label,
    input:not(:focus).floatingValid ~ .floating-label,
    select:not(:focus).floatingValid ~ .floating-label
    {margin-left: -380px; margin-top: -10px;}
    .formContact textarea {width: 450px;}
    .formContact .question-reultat {text-align: center; margin-bottom: 10px;}
}

@media screen and (min-width: 479px) and (max-width:768px) {
    h1 {font-size: 36px; margin-top: 110px; width: 70%;}
    .div2, .div3 {padding: 50px;}
    .div2 h2, .div3 h2 {margin-left: -30px;}
    .imgLogo {height: 40px; margin-left: 20px;}
    .parallax {height: 200px;}
    .description {font-size: 20px; padding: 30px}
    .ressort {font-size: 28px; font-weight: bold;}
    .rowMessage {width: 100%;}
    .formContact {width: 100%; padding: 20px 10px 10px 10px; text-align: center;}
    .formContact .col-md-6, .formContact .col {margin-bottom: 20px; padding: 0;}
    .formContact input, .formContact select {width: 350px;}
    .formContact input:not(#submitbutton)
    /*, .formContact select*/ 
    {padding-left: 60px;}
    .formContact textarea {width: 350px;}
    .formContact .row.info {margin-left: 0;}
    .floating-label {margin-left: -300px; margin-top: 10px;}
    .formContact .labelTextarea {margin-left: 30px;}
    .formContact #labelDomaine {margin-left: -350px;}
    .formContact #texteLabelDomaine {margin-left: -300px; margin-top: 8px;}
    .formContact .colSubmit input {background-position: 100px center;}
    input:focus ~ .floating-label,
    input:not(:focus).floatingValid ~ .floating-label
    {margin-left: -320px; margin-top: -8px;}
    select:focus ~ .floating-label#texteLabelDomaine, select:not(:focus).floatingValid ~ .floating-label#texteLabelDomaine { margin-left: -320px; margin-top: -8px;}
    footer {display: block; font-weight: normal;}
    footer > .col:nth-child(1) {margin-left: 0}
    footer > .col:nth-child(1) > .col:nth-child(1) {margin-right: 6px}
    .container > .navbar-header, .container > .navbar-collapse {margin-bottom: 5px;}
    .formContact select:focus#domaine, .formContact select.floatingValid#domaine {padding-left: 0; text-indent: 60x;}
    .formContact .question-reultat {text-align: center; margin-bottom: 10px;}
}

@media screen and (max-width: 479px) {
    h1 {font-size: 32px; margin-top: 105px; width: 90%;}
    .div2, .div3 {padding: 20px 20px 0 20px;}
    .div2 h2, .div3 h2 {margin-left: -15px;}
    .imgLogo {height: 40px; margin-left: 20px; margin-top: 4px;}
    /*.navbar {padding: 5px 20px;}*/
    .parallax {height: 200px;}
    .description {font-size: 20px; padding: 30px}
    .ressort {font-size: 28px; font-weight: bold;}
    .rowMessage {width: 100%;}
    .formContact {width: 100%; padding: 20px 10px 10px 10px; text-align: center;}
    .formContact .col-md-6, .formContact .col {margin-bottom: 20px; padding: 0;}
    .formContact input, .formContact select {width: 320px;}
    .formContact input:not(#submitbutton)
    /*, .formContact select*/ 
    {padding-left: 45px;}
    .formContact textarea {width: 320px;}
    .formContact .row.info {margin-left: 0;}
    .floating-label {margin-left: -280px; margin-top: 10px;}
    .formContact .labelTextarea {margin-left: 20px;}
    .formContact #labelDomaine {margin-left: -320px; margin-top: 8px; line-height: 25px; padding-left: 21px;}
    .formContact #texteLabelDomaine {margin-left: -280px; margin-top: 8px;}
    .formContact .colSubmit input {background-position: 50px center;}
    input:focus ~ .floating-label,
    input:not(:focus).floatingValid ~ .floating-label
    {margin-left: -300px; margin-top: -8px;}
    select:focus ~ .floating-label#texteLabelDomaine, select:not(:focus).floatingValid ~ .floating-label#texteLabelDomaine { margin-left: -300px; margin-top: -8px;}
    .formContact .labelTextarea img {margin-right: 15px;}
    footer {display: block; font-weight: normal;}
    #fondateurs .col-50 img {height: 100px;}
    .description {line-height: 28px;}
    .parallax {height: 180px; background-position: center bottom 250px; background-image: url('../img/industry-mobile.jpg');}
    footer > .col:nth-child(1) {margin-left: 0}
    footer > .col:nth-child(1) > .col:nth-child(1) {margin-right: 6px}
    .container > .navbar-header, .container > .navbar-collapse {margin-bottom: 5px;}
    /*.formContact select {padding-left: 65px;}*/
    .formContact select:focus#domaine, .formContact select.floatingValid#domaine {padding-left: 0; text-indent: 45px;}
    .formContact .question-reultat {text-align: center; margin-bottom: 10px;}
}

/* Pour le formulaire */
@media screen and (max-width: 355px) {
    .div2, .div3 {padding: 10px;}
    .div2 h2, .div3 h2 {margin-left: 0;}
    .formContact input, .formContact select {width: 250px}
    .formContact textarea {width: 250px;}
    .formContact #texteLabelDomaine {margin-left: -222px; margin-top: 10px;}
    .formContact #labelDomaine {margin-left: -250px;}
    .floating-label {margin-left: -215px;}
    .formContact .labelTextarea img {margin-right: 10px;}
    .formContact .colSubmit input {background-position: 50px center;}
    #fondateurs .phr {padding: 10px 7px;}
    .navbar-toggle {margin-right: 0}
    input:focus ~ .floating-label,
    input:not(:focus).floatingValid ~ .floating-label
    {margin-left: -230px; margin-top: -8px;}
    select:focus ~ .floating-label#texteLabelDomaine, select:not(:focus).floatingValid ~ .floating-label#texteLabelDomaine { margin-left: -225px; margin-top: -8px;}
    .formContact .question-reultat {text-align: center; margin-bottom: 10px;}
}