/*

	Site internet netgem
	Version : 1.1
	Site	: netgem.com
	
	Theme 	: netgem 1.1
	Author	: Integration : Yann Lobry
	
*/



#loader-wrapper {
	 position: absolute;
	 top: 0;
	 left: 0;
	 width: 100%;
	 height: 100%;
	 z-index: 9999;
}

.videostart #loader-wrapper {
	display: none;
	visibility: hidden;
	 -webkit-transition: all 0.4s 0.6s ease-out;
				transition: all 0.4s 0.6s ease-out;
}

#loader {
	 display: block;
	 position: relative;
	 left: 50%;
	 top: 50%;
	 width: 150px;
	 height: 150px;
	 margin: -75px 0 0 -75px;
	 border-radius: 50%;
	 border: 3px solid transparent;
	 -webkit-animation: spin 2s linear infinite;
	 animation: spin 2s linear infinite;
}

.videostart #loader-wrapper {
	display: none;
	opacity: 0;
	 -webkit-transition: all 0.3s 0.6s ease-out;
				transition: all 0.3s 0.6s ease-out;
}

#loader::before {
	 content: "";
	 position: absolute;
	 top: 5px;
	 left: 5px;
	 right: 5px;
	 bottom: 5px;
	 border-radius: 50%;
	 border: 6px solid transparent;
	 -webkit-animation: spin 3s linear infinite;
	 animation: spin 3s linear infinite;
}

#loader:before {
	 border-top-color: #ccc;
}

#loader::after {
	 content: "";
	 position: absolute;
	 top: 15px;
	 left: 15px;
	 right: 15px;
	 bottom: 15px;
	 border-radius: 50%;
	 border: 3px solid transparent;
	 -webkit-animation: spin 1.5s linear infinite;
	 animation: spin 1.5s linear infinite;
}

#loader::after {
	 border-top-color: #ed7921;
}

@-webkit-keyframes spin {
	 0% { 
		  -webkit-transform: rotate(0deg);
				-ms-transform: rotate(0deg);
					 transform: rotate(0deg);
	 }
	 100% {
		  -webkit-transform: rotate(360deg);
				-ms-transform: rotate(360deg);
					 transform: rotate(360deg);
	 }
}
@keyframes spin {
	 0% { 
		  -webkit-transform: rotate(0deg);
				-ms-transform: rotate(0deg);
					 transform: rotate(0deg);
	 }
	 100% {
		  -webkit-transform: rotate(360deg);
				-ms-transform: rotate(360deg);
					 transform: rotate(360deg);
	 }
}

#video-page {
	position: relative;
	margin-bottom: 12vw;
}

#cache-video-page {
	overflow: hidden;
	position: relative;
	height: 55.6vw;
}

@keyframes findevideo {
  0% { opacity: 1;}
  99% { opacity: 1;}
  100% { opacity: 0;}
}

@keyframes findevideobt {
  0% { opacity: 0;}
  99% { opacity: 0;}
  100% { opacity: 1;}
}

#video-page video {
	width: 100%;
	height: auto;
	display: block;
	cursor: pointer;
	opacity: 1;

}

#video-page.videofin video {
	opacity: 0;
	animation: findevideo 3.0s ease;
}

#btn-revoir-video {
	 position: absolute;
	 top: 50%;
	 left: 50%;
	 transform: translate(-50%, -50%);
	 width: 0;
	 height: 4vw;
	 background: transparent url(/themes/netgem/images/bt-revoir-video.svg) no-repeat center center;
	 background-size: contain;
	 opacity: 0;
	 -o-transition: all .5s;
		-webkit-transition: all .5s;
		-moz-transition: all .5s;
		transition: all .5s;
}

body.en #btn-revoir-video {
	background: transparent url(/themes/netgem/images/bt-revoir-video-en.svg) no-repeat center center;
	 background-size: contain;
}

#video-page.videofin #btn-revoir-video {
	opacity: 1;
	width: 12.5vw;
	animation: findevideobt 3.0s ease;
}

#video-page.videofin #btn-revoir-video:hover {
	transform: scale(1.2) translate(-50%, -50%);
}

#btn-play-video {
	position: absolute;
	 top: 50%;
	 left: 50%;
	 width: 3.5vw;
	 height: 3.5vw;
	 background: transparent url(/themes/netgem/images/bt-play-video.svg) no-repeat center center;
	 background-size: contain;
	 opacity: 0;
	 transform-origin: center;
	 transform: scale(0) translate(-50%, -50%);
	 -o-transition: all .2s;
		-webkit-transition: all .2s;
		-moz-transition: all .2s;
		transition: all .2s;
}

#video-page.videopause #btn-play-video {
	opacity: 1;
	transform: scale(1) translate(-50%, -50%);
	transform-origin: center;
}

#video-page.videopause #btn-play-video:hover {
	transform-origin: center;
	transform: scale(1.05) translate(-50%, -50%);
}

#btn-unmute-video {
	position: absolute;
	 bottom: 1.7vw;
	 right: 1.7vw;
	 width: 3.3vw;
	 height: 3.5vw;
	 background: transparent url(/themes/netgem/images/bt-mute.svg) no-repeat center center;
	 background-size: contain;
	 -o-transition: all .2s;
	 -webkit-transition: all .2s;
	 -moz-transition: all .2s;
	 transition: all .2s;
	 z-index: 20;
}

#video-page.videosonon #btn-unmute-video {
	 background: transparent url(/themes/netgem/images/bt-unmute.svg) no-repeat center center !important;
	 background-size: contain !important;
}

#btn-unmute-video:hover {
	transform-origin: center;
	transform: scale(1.05);
}

#video-page.videofin #btn-unmute-video {
	opacity: 0;
	transform: scale(0);
}

#video-page .conteneur-barres-parallax-haut,
#video-page .conteneur-barres-parallax-bas {
	 width: 45vw;
}






@media screen and (max-width: 1260px) {

	#cache-video-page {
	 	height: 55.3vw;
	}
	  
  #btn-unmute-video {
		bottom: 1.8vw;
		right: 1.8vw;
		width: 3.7vw;
		height: 3.7vw;
  }
  
  #btn-play-video {
	  width: 3.7vw;
	  height: 3.7vw;
  }
	
}







@media screen and (max-width: 852px) {
	
	#cache-video-page {
		 height: 54.6vw;
	}
	
	#btn-unmute-video {
		 bottom: 18px;
		 right: 20px;
		 width: 44px;
		 height: 44px;
	}
	
	#btn-play-video {
		 width: 44px;
		 height: 44px;
	}
	
	#btn-revoir-video {
		 height: 44px;
	}
	
	#video-page.videofin #btn-revoir-video {
		width: 140px;
	}
	
}





@media screen and (max-width: 540px) {

	#video-page {
	 	margin-bottom: 20vw;
	}
	
	#video-page video {
	 	margin-top: 0;
	}
	
	#cache-video-page {
	 	height: 53.8vw;
	}
	
	#btn-unmute-video {
	 	bottom: -22px;
	 	right: 10px;
	 	border-radius: 50%;
	 	box-shadow: 0 3px 7px rgb(0 0 0 / 15%);
	}
	
	#btn-play-video {
		 top: 28vw;
	}
	
	#btn-unmute-video {
		bottom: auto;
		 margin-top: -34px;
	}
	
	#btn-revoir-video {
		 /*top: 21vw;*/
	}
	
}