/* --- LOADER --- */

#loading {
  position: fixed;
	display:block;
opacity:1;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  text-align: center;
  background-color: #fff;
  z-index: 1040;
	transition:opacity 1s ease;
}

#loading-image {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
	animation-name: load;
	animation-iteration-count: infinite;
	animation-duration: 1s;
}

#loading p
{
	position:absolute;
	top:55%;
 	left: 0;
  	right: 0;
	margin:auto;
font-family: "aptly", sans-serif;
font-weight: 700;
font-style: normal;
text-transform: uppercase;
}

@keyframes load
{
        from { 
            transform: rotate(0deg); 
        } to { 
            transform: rotate(360deg); 
        }

}






body
{
font-family: "barlow", sans-serif;
font-weight: 400;
font-style: normal;
}





/*_____----- SMARTPHONE------______*/


/* --- ACCUEIL --- */



header
{
	z-index:1;
}

#brand
{
	display:block;
}




.navbar
{
	background-color:rgba(0,0,0,0);	
}

.navbar-nav
{
	background-color:rgba(0,0,0,0.8);
	margin:0px;
	z-index:1;
	border:solid 3px white;

}

.nav-item
{
	border-bottom:solid 1px grey;
	text-transform: uppercase;
	text-align: center;
}

.nav-link
{
		color:white!important;
}

.navbar-toggler
{
  width: 40px;
  height: 30px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
	padding:0px;
	position:relative;
	left:10px;
	outline:none;
	border:none;
}

.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
    outline: none;
    box-shadow: none;
}

.navbar-toggler span
{
	display: block;
	height: 4px;
	width: 100%;
	background: white;
	box-shadow:2px 2px 5px grey;
	opacity: 1;
	margin-top:0px;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
 	-webkit-transition: .25s ease-in-out;
	-moz-transition: .25s ease-in-out;
	-o-transition: .25s ease-in-out;
	transition: .25s ease-in-out;
	position:absolute;
}


.navbar-toggler span:nth-child(1)
{
	top:0px;
}

.navbar-toggler span:nth-child(2), .navbar-toggler span:nth-child(3)
{
	top:12px;
}

.navbar-toggler span:nth-child(4)
{
	top:24px;
	width:80%;
	right:0px!important;
}



.navbar-toggler.open span:nth-child(1) {
	width: 0%;
}

.navbar-toggler.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.navbar-toggler.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.navbar-toggler.open span:nth-child(4) {
	width: 0%;
}








a
{
	text-decoration: none;
	color:white;
}

a:hover
{
	color:grey;
}


h1,h2, a, #countdown, .btn
{
font-family: "aptly", sans-serif;
font-weight: 700;
font-style: normal;
text-transform: uppercase;
}

#accueil h1, #accueil h2, #accueil p
{
	text-shadow: 2px 2px 5px grey;
	color:white;
}


#accueil
{
	background-image: url("../img/illustration-phone.jpg");
	background-size:cover;
	height:100vh;
}

h1
{
	margin-top:100px;
	font-size:3rem;
}

#countdown, #accueil p
{
	text-align:center;
	color:white;
	
}

#countdown
{
	font-size:1.5rem;
	background-color:#51563f;
	width:160px;
	margin:auto;
	padding:5px;
	color:white;
}

#countdown span
{
	color:orangered;
}

#premier-bouton
{
	position:absolute;
  bottom: 15%;
  left: 50%;
  transform: translate(-50%, 0%);
	transition-duration: 0.2s;
}

#premier-bouton:hover
{
}


.scrollta
{
	position: absolute;
	bottom:0px;
  	left:0px;
  	margin-inline:auto;
	width:fit-content;
	right:0px;
	z-index:1;
	animation-duration: 3s;
	animation-name: fleche;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}

@keyframes fleche
{
	0%   {bottom:20px;}
	50%  {bottom:24px;}
	60%  {bottom:24px;}
	70%  {bottom:18px;}
	75%  {bottom:21px;}
	80%  {bottom:20px;}
	100% {bottom:20px;}

}



/* --- LA BD --- */

#BD
{
	position:relative;
}

#BD h2, #collector h2, #videos h2, #precommander h2
{
	margin-top:50px;
	margin-bottom:20px;
}

#BD a
{
	margin-top:20px;
	margin-bottom:50px;
	color:black!important;
}

#BD img, #precommander img, #ref-marcel img
{
	margin-top:20px;
	margin-bottom:10px;
}


.position-image
{
	position:relative;
	width:100vw;
}

#ref-marcel
{
	position:relative;
	padding-top:150px;
}

#marcel
{
	position:absolute;
	left:-12px;
	top:-100px;
	width:300px;
}

#voiture
{
	width:250px;
	position:absolute;
	right:0px;
	bottom:-160px;
	margin:0px;
	padding:0px;
}


/* --- COLLECTOR --- */
#collector
{
	padding-top:50px;
}

/* --- LES VIDEOS --- */

iframe
{
	width:100%;
	height:175px;
}


/* --- précommandes --- */

.btn
{
	width:90%;
	padding-top:20px;
	padding-bottom:20px;
	background-color:#51563f;
	color:white;
	border:none;
	border-radius:100px;
	text-align:center;
	margin:auto;
	display:block;
	transition-duration: 0.2s;
}

.btn:hover
{
	transform: scale(1.02);
	background-color:mediumseagreen;
}


#precommander a, .produits img
{
		transition-duration: 0.2s;
	
}

.produits img:hover
{
	transform: scale(1.02);
}

.produits
{
	align-items: end;
}




/* --- FOOTER --- */


footer
{
	background-color:#51563f;
	padding:20px;
	margin-top:20px;
}


footer ul
{
	display:flex;
	justify-content: space-around;
	list-style-type: none;
	margin-top:30px;
	padding:0px;
}





/*_____----- MD ------______*/



@media (min-width: 768px){
	

	
/* ACCUEIL */
	
	
h1
{
	font-size:5rem;
}	

h2
	{
		font-size:3rem;
	}
	
.btn
	{
		width:220px;
	}
	
	
/* BD */
	

#marcel
{
	position:absolute;
	left:-30px;
	top:-70px;
	width:400px;
}

#voiture
{
	width:350px;
	position:absolute;
	right:0px;
	bottom:-200px;
	margin:0px;
	padding:0px;
}
	
/* VIDEOS */
	
	
iframe
{
	width:100%;
	height:350px;
}
	
	
}





/*_____----- LG ------______*/



@media (min-width: 960px){
	
	
/*accueil*/	
	
#accueil
{
	background-image: url("../img/illustration.jpg");
	background-size:cover;
}	
	
/*BD*/	
	
#BD h2, #ref-marcel h2
	{
		margin-top:100px;
	}

#marcel
{
	position:absolute;
	left:-30px;
	top:-0px;
	width:450px;
}

#voiture
{
	width:350px;
	position:absolute;
	right:0px;
	bottom:-170px;
	margin:0px;
	padding:0px;
}
	
/*collector*/
	
#collector h2
	{
		margin-top:0px;
	}
	
#collector
	{
		padding-top:100px;
	}
	
/*precommander*/
	
	#precommander
	{
		padding-top:50px;
	}
	
	
	.produits
	{
		padding-bottom:50px;
	}
	

}









/*_____----- XL ------______*/



@media (min-width: 1140px){
	
	
	
/*ACCUEIL*/	
	
.navbar
{
	background-color:rgba(255,255,255,0.0);	
}

.navbar-nav
{
	background-color:rgba(255,255,255,0);
	border:none;
	margin:0px;
	z-index:10;
	position:absolute;
	right:15px;
	top:40vh;
	transition-duration: 0.2s;
}

.navbar-nav:hover
	{
		background-color:rgba(0,0,0,0.1);
	}

.nav-item
{
	border-bottom:none;
	text-transform: uppercase;
	text-align: left;
}
	
	

.nav-item a
{
	color:grey!important;
}	

.nav-link
{
	padding:5px;
	transition-duration:0.2s;
	color:grey;
}
	
.nav-link
	{
			text-decoration: none;
			position:relative;
		transition-duration: 0.25s;
	}
	
.nav-link:hover
	{
		transform: scale(1.05);
		color:white!important;
	}
	



.nav-link:hover::after {
  transform: scaleX(1);
	}
	
/*video*/
iframe
{
	width:100%;
	height:450px;
}	
	
	
	
}