html {
  
background:black;
}
body{
	font-family: source_sans_prolight;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  margin:0px;
font-size: 1.2em;
}
a {
  color: inherit; 
  text-decoration: inherit; 
  	font-family: source_sans_prolight;
        outline : none;
}
h1 {
	font-family: source_sans_probold;
	text-transform: uppercase;
	font-size: 2em;
}
h2{
	font-family: source_sans_prolight;
	text-transform: uppercase;
	font-size: 1.5em;
	
}

.spacer{
height:0px;

}
.spacer_b{
    height: 150px;
    position: absolute;
    top: 800px;
    width: 20px;
}

.svg_dot{
position: relative;
margin-top: -100px;
left: 50%;

}
#logo_3d{
 filter:hue-rotate(0deg) grayscale(100);

     animation-name: logo;
    animation-duration: 500s;
	animation-iteration-count: infinite;
    position: fixed;
    z-index: 9999;
bottom: 5px;

}
@keyframes logo {
    0%   {filter:hue-rotate(320deg) grayscale(0); }
	14%   {filter:hue-rotate(360deg) grayscale(0); }
	28%   {filter:hue-rotate(0deg) grayscale(0); }
	32%   {filter:hue-rotate(360deg) grayscale(0); }
	46%   {filter:hue-rotate(280deg) grayscale(100); }
	60%   {filter:hue-rotate(360deg) grayscale(100); }
	74%   {filter:hue-rotate(280deg) grayscale(100); }
	88%   {filter:hue-rotate(360deg) grayscale(100); }
	100%   {filter:hue-rotate(280deg) grayscale(0); }
}

#logo_3d_index{
 filter:hue-rotate(180deg) grayscale(100);

     animation-name: logo;
    animation-duration: 500s;
	animation-iteration-count: infinite;

}
#contenu {
	flex: 1;

	text-shadow: 0px 0px 0.4px #0003;
}
#footer{
  display: flex;
  flex-direction: row;
z-index: 999;
background-color:#242424;
text-shadow: 0px 0px 0.1px #9e9e9e;
    position: fixed;
    bottom: 0px;
    width: 100%;
padding: 4px;
border-top: 1px solid #30303080;
padding-left: 117px;
}
#studio_text{
width:90%;
max-width:600px;
flex: 1;
line-height: 21px;
padding-right: 10px;
}

#contact_bar{

}

.isometric{

background-color: #f3f3f3;
}

#contact_infos {

color: #929292;
font-size: 1.3em;
font-family: source_sans_probold;
text-align: center;
margin: 7px;
padding: 8px;
padding-left: 10px;
padding-right: 10px;
display: inline-block;
}
#copyright_infos {
color: #9e9e9e;
font-size: 0.8em;
font-family: source_sans_prolight;
z-index: 99;
bottom: 70px;
position: relative;
width: 100%;
text-align: right;
opacity: 0.6;
padding: 10px;
    padding-left: 10px;
padding-left: 123px;
margin-top: -145px;
padding-right: 30px;
}
#company_infos {
	font-family: source_sans_prolight;
	color: #9e9e9e;
	font-size: 0.9em;
	text-align: left;
	flex: 2;
	padding-right: 10px;
	text-shadow: 0px 0px 0.1px #9e9e9e;
}
.en{
font-family: source_sans_prolight_italic;
	color: #747474;

}

video_overlay_button
.videobck {  
width:100%; 
min-height:120%;
min-width:1800px;
height:auto; 
}
.videocnt {
width:100%;
max-width:1280px;

}
.animation_holder{
width: 100%;
overflow: hidden;
}
.blackbackground{
background-color: #101010;
padding-bottom: 25%;

}
.animation_3d  {
	background-image:url(https://www.shai-studio.fr/assets/page_medias/trame.png);
	background-repeat:repeat;
	width:100%;
	height:100%;
	 z-index: 0;
	position:fixed;
	display:block;
	opacity: 0.5;
}
.content{
bottom: 0px;
position: fixed;
font-size: 6vmin;
color: #fff;
left: 22vmin;

z-index:2;


	}
	.black_layer{
	background: #101010;
	width:100%;
	height:250%;
	position: fixed;
	left:0%;
z-index:-1;
bottom: 0px;
	}
	
.rtext{
margin-right: 15%;
margin-left:25%;
}
	.ltext{

margin-right:35%;
}
	
		.white_layer{
	background: #F0F0F0;
	width:100%;
	height:250%;
	position: fixed;
	left:0%;
z-index:-1;

	}
.btn {
  -webkit-border-radius: 4;
  -moz-border-radius: 4;
  border-radius: 4px;

  color: #ffffff;
  font-size: 12px;
  background: #606060;
  padding: 5px 13px 6px 13px;
  text-decoration: none;
margin-left: 15px;
vertical-align: 10px;

}



.btn:hover {
  background: #fcbc3c;
  text-decoration: none;
}
.texte{
cursor: pointer;
}
#btn_scroll{
 display: block;	
 
}
	#btn_scroll:focus,#btn_scroll:active{
outline: medium none;
border: 0px none transparent;
 
}

h2,h5{


    color: rgb(59, 59, 59);
  
}
.extext{
position: absolute;
left: 60%;
text-align: left;
font-family: source_sans_prolight;
padding: 25px;
color: #303030;
margin-right: 5%;

padding-top: 20px;
background-color: #ECECEC;
border-radius: 6px;
margin-top: 30px;
}
.titre{
margin-top: -65px;
font-family: source_sans_probold;
font-size: 1.2em;
background-color: transparent;
color: #6e6e6e;
border: none;
padding: 0;
text-shadow: 0px 0px 0.5px #FFFFFF4D;
background-color: rgb(0,0,0);
color: #FFF;
border-radius: 5px;
padding: 10px;
}

.offset1{
padding-left:12vw;
left: 20px;
max-width:75vw;
}
.offset2{
padding-left:12vw;
left: 20px;
max-width: 75vw;

}
.offset3{
padding-left:12vw;
left: 20px;
max-width: 75vw;

}
#article1
{
position:absolute;
    width: 100%;
z-index:3;
background-color: #111;
color:#999;

}
#article2
{
position:absolute;

z-index:3;
margin-left:12vw;
left: 20px;
top:100%;
color:#999;
max-width:75vw;
}
#image_article
{
    vertical-align:top;
	float:left;
	margin-right: 25px;
margin-bottom: 25px;
}

.tdback{
background-image: url('https://www.shai-studio.fr/assets/page_medias/fond-total-siderurgie.jpg');
background-position: 55% 120%;
background-repeat: no-repeat;
background-color: rgb(27, 27, 27);
background-attachment: fixed;
background-size: cover;
height: 800px;
}
.tdbackb{
background-image: url('https://www.shai-studio.fr/assets/page_medias/visuel_3d_isometrique_coloré_maquette.jpg');
background-position: 55% 120%;
background-repeat: no-repeat;
background-color: rgb(34, 34, 34);

background-size: cover;
height: 800px;
}

.tdbackc{
background:  url('https://www.shai-studio.fr/assets/page_medias/trame1.jpg') left top repeat, url('https://www.shai-studio.fr/assets/page_medias/bruit.jpg') left top repeat;
background-blend-mode: screen;
}
.isometrique{
background-image: url('https://www.shai-studio.fr/assets/page_medias/illustrations_isometriques.jpg');
background-position: 55% 100%;
background-repeat: no-repeat;
background-color: rgb(38, 38, 38);

background-size: cover;
}






.bold_font{
font-family: source_sans_probold;
}


.caback{
background: rgb(38, 38, 38) url("https://www.shai-studio.fr/assets/page_medias/fond_cartoons.jpg") no-repeat scroll 0% 0%;
background-size: cover;
}

.example-image {
border-radius: 5px;

}
@media all and (min-width: 1920px)
 {
 .tdback{
background-size: auto;
background-color: rgb(34, 34, 34);
}
 
.caback{
background-size: cover;
}
 

 
 }
#replaybtn {
background-color: rgb(21, 138, 212);
color: #F0F0F0;
position: relative;
top: -120px;
left: 5%;
width: 310px;
font-family: source_sans_probold;
padding-left: 13px;
border-radius: 5px;
box-shadow: -2px 1px 4px 0px #0003;
font-size: 1.3em;
cursor:pointer;
}
#legende1, #legende2, #legende3{
position:absolute;
z-index:4;
font-family: clear_sansbold;
font-weight: bold;
font-size: 2.2em;
animation-name: legendes;
animation-duration: 2s;
animation-iteration-count: infinite;
    -ms-transform: skewY(28deg); 
    -webkit-transform: skewY(28deg); 
transform: skewY(28deg);
transform: translate3d(0,-1,0);
text-shadow: 0px 0px 1px #ffffffb3;
color:#fffffff0;
pointer-events:none;
}

@keyframes legendes {
    0%   {padding-top:0px;}
	50%   { padding-top:5px;}
	100%   {padding-top:0px; }

}


#legende1{
left: 15%;
margin-top: 29%;
}

#legende2{
left: 44%;
margin-top: 15.5%;
}

#legende3{
left: 59.5%;
margin-top: 3.5%;
}


#imagex,#image0, #image1, #image2, #image3{
position:absolute;
z-index:3;
}

#imagex{
z-index:0;
}
#image0{
z-index:4;
}
#holder{

}
#instructions {
font-family: source_sans_prolight;
z-index: 99;
padding: 50px 25px 0px 20px;
color: #171717;
font-size: 0.8em;
margin-left: 45%;
}
#instructions_autovid {
font-family: source_sans_prolight;
z-index: 99;
padding: 0px 25px 0px 20px;
color: #171717;
font-size: 0.8em;
margin-top: -30px;
margin-left: 55%;
}




.example-image-link{
cursor: zoom-in;
}

@media all and (max-width: 700px)
 {

 h5{
 font-size-adjust:0.4;
 }
 .bold{
 font-size-adjust:0.4;
 }
 

 
 }
 
@media all and (max-width: 600px)
 {
 #copyright_infos{
	padding-bottom: 150px;
 }
 
 }
 
 svg{
 position:absolute;
left:-80px;

 }
.formules {
border: 1px solid #ffffff4d;
padding: 10px 10px 10px 15px;
border-radius: 5px;

margin: 40px;
}

.placeholder {
min-height: 1000px;
}
@media all and (max-width: 1300px)
 {
.placeholder{ 
min-height: 800px;
}

}
@media all and (max-width: 960px)
 {
.placeholder{ 
min-height: 520px;
}

}
@media all and (max-width: 400px)
 {
.placeholder{ 
min-height: 250px;
}

}


.isometrique{
background:none;
}

@media
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5){

.videoholder {
display:none;
}
.isometrique{
min-height: 50vh;
}

#contenu {

    position: absolute;
    width: 108%;

}

}


#element-1 {
  top: 391px;
  height: 50px;
  width: 336px;
  background: url("../page_medias/01-01.png") no-repeat;
  position: absolute;
  left: 324px;
}

#element-2 {
  top: 452px;
  height: 50px;
  width: 335px;
  background: url("../page_medias/01-01-6.png") no-repeat;
  position: absolute;
  left: 324px;
}

#element-3 {
  top: 511px;
  height: 50px;
  width: 336px;
  background: url("../page_medias/01-01-4.png") no-repeat;
  position: absolute;
  left: 324px;
}

#element-4 {
  top: 571px;
  height: 50px;
  width: 336px;
  background: url("../page_medias/01-01-0.png") no-repeat;
  position: absolute;
  left: 324px;
}

#element-5 {
  top: 572px;
  height: 50px;
  width: 336px;
  background: url("../page_medias/01-01-62.png") no-repeat;
  position: absolute;
  left: 324px;
}

#element-6 {
  top: 679px;
  height: 50px;
  width: 336px;
  background: url("../page_medias/01-01-5.png") no-repeat;
  position: absolute;
  left: 324px;
}

#element-7 {
  top: 347px;
  height: 32px;
  width: 289px;
  background: url("../page_medias/titre_serv_b2b.png") no-repeat;
  position: absolute;
  left: 209px;
}

#element-8 {
  top: 637px;
  height: 35px;
  width: 130px;
  background: url("../page_medias/01-01-8-2.png") no-repeat;
  position: absolute;
  left: 215px;
}

#element-9 {
  top: 381px;
  height: 61px;
  width: 67px;
  background: url("../page_medias/01-01-8-2-2.png") no-repeat;
  position: absolute;
  left: 246px;
}

#element-10 {
  top: 443px;
  height: 61px;
  width: 62px;
  background: url("../page_medias/01-01-8-2-2-0.png") no-repeat;
  position: absolute;
  left: 250px;
}

#element-11 {
  top: 505px;
  height: 61px;
  width: 69px;
  background: url("../page_medias/01-01-8-2-2-7.png") no-repeat;
  position: absolute;
  left: 251px;
}

#element-12 {
  top: 574px;
  height: 45px;
  width: 75px;
  background: url("../page_medias/01-01-8-2-2-0-1.png") no-repeat;
  position: absolute;
  left: 245px;
}

#element-13 {
  top: 574px;
  height: 44px;
  width: 70px;
  background: url("../page_medias/01-01-8-2-2-0-1-2.png") no-repeat;
  position: absolute;
  left: 250px;
}

#element-14 {
  top: 679px;
  height: 53px;
  width: 69px;
  background: url("../page_medias/01-01-8-2-2-0-1-9.png") no-repeat;
  position: absolute;
  left: 251px;
}