*{margin:0px;padding:0px;}
@font-face{
    font-family : "Roboto";
	src : url('../fonts/Roboto-Regular.ttf');
}
body{background-color:#fff;text-align:center;font-family:"Roboto", sans-serif;font-size:12px;color:#000;}

/*
.or{  background: linear-gradient(to bottom right, rgb(243, 216, 122), rgb(177, 117, 33), rgb(243, 216, 122), rgb(177, 117, 33), rgb(243, 216, 122), rgb(0, 0, 0));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;}
*/
.hidden{visibility:hidden;}/*texte logo siska*/

p{text-align: justify;line-height:2;}
img {border:0 none;}
ul, li {list-style-type:none;}
a, a:hover {text-decoration:none;}

header {width:100%;display:inline;float:left;;margin:20px auto 40px auto;text-align:center;}
#siska {cursor:pointer;width:200px;height:50px;margin:5px auto 15px auto;}
#wrapper{margin:0 auto;width:100%;}
nav{margin:0 auto;width:100%;max-width:1000px;}
nav li {display:inline;margin:0px 30px;list-style: none;}
nav li a {color:#b17521;letter-spacing:1em;font-size:10px;text-transform: uppercase;}
nav li a:hover {color:#000;transition: 0.3s;}

.copyright{display:block;width:100%;text-align:left;color:#b17521;letter-spacing:1em;font-size:8px;text-transform: uppercase;}

#content-project{width:100%;max-width:1190px;margin:0px auto;}

.grid-100, .grid-40-60, .grid-60-40, .grid-50-50, .grid-70-30 {display:flex;opacity: 1;}
.grid-100 .element a:hover,.grid-40-60 .element a:hover,.grid-60-40 .element a:hover, .grid-50-50 .element a:hover, .grid-70-30 .element a:hover {opacity: 0.5;transition: 0.3s;}
.grid-100 {width:100%;}
.grid-70-30 {grid-template-columns: 70% 30%;}
.grid-40-60 {grid-template-columns: 40% 60%;}
.grid-60-40 {grid-template-columns: 60% 40%;}
.grid-50-50 {grid-template-columns: 50% 50%;}

h1, h2, h3, h4 {text-transform:uppercase;line-height:1;text-align:left;}
#content-project h1 {font-family:serif;text-transform:uppercase;letter-spacing:0.1em;line-height:1;text-align:left;}
#content-project h2 {font-family:serif;text-transform:uppercase;letter-spacing:0.1em;line-height:1;text-align:left;}
#content-project h2 span.esperluette{line-height:0.4;background: linear-gradient(to bottom right, rgb(243, 216, 122), rgb(177, 117, 33), rgb(243, 216, 122), rgb(177, 117, 33), rgb(243, 216, 122), rgb(0, 0, 0));
-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
#content-project h3 {text-transform:uppercase;line-height:1;text-align:left;letter-spacing:0.3em;}
#content-project h4 {text-transform:uppercase;line-height:1;text-align:left;margin :10px 0px;letter-spacing:0.3em;}
#content-project p {line-height:2;margin-bottom:30px;letter-spacing:0.1em;}


#content-project .mission{color:#b17521;font-family:serif;text-align:left;letter-spacing:0.3em;background:linear-gradient(to bottom right, rgb(243, 216, 122), rgb(177, 117, 33), rgb(243, 216, 122), rgb(177, 117, 33), rgb(243, 216, 122), rgb(0, 0, 0));-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
#content-project .barre {color:#b17521;}
#content-project .barre-xs {color:#000;font-size:10px;font-family:serif;}
#content-project .contexte-mission {color:#b17521;font-family:serif;text-transform:uppercase;letter-spacing:0.3em;font-size:10px;text-align:left;line-height:2;margin-top:7px;}

/*PAGE CONTACT*/
main#content-contact{width:100%;max-width:1200px;height:800px;margin:0px auto;}
.content-contact{width:100%;position:relative;top:35%;margin:0px auto;text-align:center;}
.content-contact h1{color:#000;font-family:serif;text-transform:uppercase;letter-spacing:0.3em;font-size:30px;line-height:1.7;text-align:center;}
.content-contact p{padding:20px;color:#b17521;font-size:16px;letter-spacing:0.5em;text-align:center;}

footer{display:block;float:left;text-align:center;color:#b17521;line-height:2;letter-spacing:0.5em;width:100%;margin:40px auto 0px auto;padding:15px;}

#scroll_to_top {position:fixed;top:50%;right:30px;z-index:99;cursor:pointer;}

iframe{margin:0px auto;display:block;border:0px;background-color:#fff;}
.logo-video {position: absolute;height:auto;}

#content-project h1 {font-size:2.7vw;}
#content-project h2 {font-size:2.6vw;}
#content-project h2 span.esperluette {font-size:4vw;}/*deco esperluette*/
#content-project h3 {font-size:0.8vw;margin:0px 0px 30px 0px;}/*reponse mission*/
#content-project h4 {font-size:0.6vw;}/*titre de paragraphe*/
#content-project .mission{font-size:1vw;margin:0px 0px 5px 0px;}
iframe, video {width:1170px;height:650px;}
.logo-video {top:32%;left:38%;width:450px;}

article{margin:0px 0px 40px 0px;}
.element {margin:0px;padding:0px 10px 0px 10px;}
.element-text {margin:0px;padding:0px 10px 0px 10px;}
section{margin:0px;padding:0px;}

/*page hello*/
#content-project .hello h1 {margin-bottom:30px;}
#content-project .hello {position:relative;/*top:-250px;left:-50px;*/}
#content-project .hello h2 {font-family:"Roboto", sans-serif;font-size:14px;margin-bottom:5px;letter-spacing:0.3em;}
#content-project .hello h3 {font-family:"Roboto", sans-serif;font-size:14px;margin:0px 0px 30px 0px;letter-spacing:0.3em;}/*reponse mission*/
#content-project .hello h4 {font-family:"Roboto", sans-serif;font-size:14px;margin:0px 0px 20px 0px;letter-spacing:0.3em;}/*reponse mission*/

/*
.hello{position:absolute;top:100px;}
*/
.grid-70-30 .element {width:773px;}
.grid-70-30 .element-text {width:376px;}

.grid-60-40 .element {width:60%;}
.grid-60-40 .element-text {width:40%;}

.grid-40-60 .element-text {width:70%;}
.grid-40-60 .element {width:80%;}

.grid-50-50 .element-text {width:50%;}
.grid-50-50 .element {width:50%;}


@media screen and (max-width:1200px) {
#content-project h1 {font-size:3.7vw;}
#content-project h2 {font-size:3.5vw;}
#content-project h2 span.esperluette {font-size:4vw;}/*deco esperluette*/
#content-project h3 {font-size:1vw;margin:0px 0px 30px 0px;}/*reponse mission*/
#content-project h4 {font-size:1.5vw;}/*titre de paragraphe*/
#content-project .mission{font-size:2vw;margin:0px 0px 5px 0px;}
#content-project p{max-width:90%;}
iframe, video{width:800px;height:448px;}
.logo-video {top:20%;left:30%;width:400px;}
    
.grid-70-30 .element {width:773px;}
.grid-70-30 .element-text {width:376px;}

.grid-60-40 .element {width:60%;}
.grid-60-40 .element-text {width:40%;}

.grid-40-60 .element-text {width:70%;}
.grid-40-60 .element {width:80%;}

.grid-50-50 .element-text {width:50%;}
.grid-50-50 .element {width:50%;}

}


@media screen and (max-width:800px) {
#content-project h1 {font-size:7vw;}
#content-project h2 {font-size:5vw;margin-bottom:10px;}
#content-project h2 span.esperluette {font-size:9vw;}/*deco esperluette*/
#content-project h3 {font-size:2vw;margin:0px 0px 20px 0px;}/*reponse mission*/
#content-project h4 {font-size:2vw;margin:30px 0px 15px 0px;}/*titre de paragraphe*/
#content-project .mission{font-size:2.7vw;margin:0px 0px 0px 0px;}
#content-project p{max-width:90%;margin:0px;}
iframe{max-width:90%;height:240px;}
video{max-width:90%;height:auto;}
.logo-video {top:18%;left:25%;width:350px;}
    

.grid-100 {width:100%;}
.grid-70-30 .element {width:80%;}
.grid-70-30 .element-text {width:80%;}

.grid-60-40 .element {width:100%;}
.grid-60-40 .element-text {width:90%;}

.grid-40-60 .element-text {width:90%;}
.grid-40-60 .element {width:100%;}
    
.grid-50-50 .element-text {width:80%;}
.grid-50-50 .element {width:80%;}

    
    
.element {/*margin: 0px 10px;*/padding:0px 10px 40px 0px;}
.element-text {padding:0px 10px;}

.grid-100, .grid-40-60, .grid-60-40, .grid-50-50, .grid-70-30 {
flex-direction: column;justify-content: center;width:100%;}
}


@media screen and (max-width:500px) {
#content-project h1 {font-size:7vw;}
#content-project h2 {font-size:7vw;margin-bottom:10px;}
#content-project h2 span.esperluette {font-size:11vw;}/*deco esperluette*/
#content-project h3 {font-size:2vw;margin:0px 0px 20px 0px;}/*reponse mission*/
    
    
iframe{max-width:90%;height:240px;}
video{max-width:90%;height:auto;}
.logo-video {top:14%;left:20%;width:300px;}

    
    
    
/*brands*/
.brands {width:100%;height:200px;border-top:1px solid #bbb;padding-top:15px;margin-top:30px;text-align:center;}
.brands-content {width:auto;max-width:60%;height:200px;margin:0 auto;}

.brands-content .col-4 {display:inline;float:left;width:23%;height:200px;text-align: center;
  display: flex; /* contexte sur le parent */
  flex-direction: column; /* direction d'affichage verticale */
  justify-content: center; /* alignement vertical */
}
.brands-content .col-4 .block-ref {height:60%;text-align: center;margin: auto;width: 60%;
  display: flex; /* contexte sur le parent */
  flex-direction: column; /* direction d'affichage verticale */
  justify-content: center; /* alignement vertical */}
.brands-content .col-4 img {max-height:100%;width:100%;}
    
    
    
    
    
    /*essai*/
    .bg-direction{background-image: url(../essai/gtte-direction-bg.svg); }