@import url('https://fonts.googleapis.com/css?family=Big+Shoulders+Display:900&display=swap');


body
{
	margin: 0;
	padding: 0;
	width: 100%
}

#crea
{
	opacity: 1;
}

#landing
{
	height: 120vh;
	background-color: black!important;	
}
.wrapp-pastille
{
	padding:1%;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: black;
}
#pastilles col-lg-12
{
	background-color: black;
}
#titre
{
	height:30vh;
	
	font-family: 'Big Shoulders Display', cursive;
	letter-spacing: 8px;
	text-transform: uppercase;
	text-align: right;
	display: flex;
	align-items: center;
	background-color: black;
	color:white;
}

#titre h1
{
	font-size:80px;
	padding-right: 3%;
}

.no
{
	padding-left: 0;
	padding-right: 0;
}
.wrap-h1
{
	
	width:100%;
	height: auto;
	text-transform: uppercase;
	text-align: center;
	position: absolute;
	top:30%;
}

.wrapp-landing
{
	position: relative;
	top:0;
	height: 120vh;
	background-image: url('../imgs/pastille.gif');
	background-size: cover;
	background-repeat:no-repeat;
	background-attachment: fixed;
}
.wrapp-landing img
{
	display: none;
}

.wrap-h1 h1
{
	font-size:180px;
	font-family: 'Big Shoulders Display', cursive;
	letter-spacing: 8px;
	color:white;
}

#adn
{
	height: 100vh;
	width:100%;
	margin:0;

	background-image: url('../imgs/sunrise.gif');
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

.foot-site
	{
		width: 100%;
		text-align: center;

	}
	.foot-site a
	{
		font-size: 30px;
		text-transform: uppercase;
		text-align: center;

	}
	.foot-site i
	{
		margin: 3% 3%;
	}
.adn-zone-titre h3
{
font-size:80px;
	font-family: 'Big Shoulders Display', cursive;
	letter-spacing: 8px;
	color:white;
	text-transform: uppercase;
	text-align: right;
}
.adn-zone-titre
{
	
	height: 200px;
}

.wrapper-adn
{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	width:100%;
}

#collectif
{
	height: 100vh;
	background-color: black;
	padding: 10%;
	
}
.box-collectif
{
	
	height: 70vh;
	position: relative;
}
.box-wrap-img
{
	height:80%;
	filter: blur(0);
}
.box-collectif:hover .box-wrap-img
{
	filter: blur(.4rem);
	
}
.box-shade
{
	background-color: blue;
	height: 80%;
	width:100%;
	position: absolute;
	z-index:8;
	opacity: 0.1;
}

.wrapper-collectif
{
	
}
.box-infos
{
	position:relative;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 20%;
	background-color: white;
}

.wrapper-video
{
	height:120vh;
	width:100%;
}

#video
{
	height: 120vh;
}

#pastilles
{
	height: 400vh;
	background-color: black!important;
	padding: 50px;
}

.box-cont1
{
	background-image: url('../imgs/dizzy.gif');
	background-size: cover;
	background-repeat: no-repeat;
}

.box-cont2
{
	background-image: url('../imgs/dxspi.gif');
	background-size: cover;
	background-repeat: no-repeat;
}

.box-cont3
{
	background-image: url('../imgs/edvm.gif');
	background-size: cover;
	background-repeat: no-repeat;
}

.box-cont4
{
	background-image: url('../imgs/finley.gif');
	background-size: cover;
	background-repeat: no-repeat;
}


#footer
{
	height:100%;
	background-color: black;
	color:white;
		font-family: 'Big Shoulders Display', cursive;
	
}
iframe
{
	height: 100vh;
	width: 80%;
}
#footer a 
{
	color:white;
}
.foot-wrapper
{
	height: 10vh;
	font-family: 'Big Shoulders Display', cursive;
	display: flex;
	justify-content: center;
	align-items: center;

}


.foot-wrapper a i
{
	font-size: 30px;
}

.wrapper-adn img
{
	display: none;
}

.fab:hover
{
color: red;
}
.foot-site:hover a
{
	text-decoration: none;
	color:red;
}



@media screen and (max-width: 414px)
 {
	body
	{
		margin:0!important;
		padding:0!important;
	}
	.foot-site
	{
		width: 100%;
		text-align: center;

	}
	.foot-site a
	{
		font-size: 30px;
		text-transform: uppercase;
		text-align: center;

	}
	.foot-site i
	{
		margin: 3% 3%;
	}
	.wrapp-landing img
	{
		 display: block;
		 height: 80%;
		 width:100%;
		 position: absolute;
	}
.box-social i
{font-size: 30px;
margin-top: 2%;}

#collectif
{
	height: 340vh;
	background-color: black;
	padding: 10%;
	
}
	.wrapper-adn img
{
	height: 90%;
	width: 100%;
	display: block;
}

.wrapper-adn
{
	height: 100vh;
}

.orange
{
	font-size: 10px;
}
	#adn
	{
		background-image: url('xx.gif');
		height: 80vh;
		background-color: black;
	}


	.wrap-h1 h1
{
	font-size:45px;
	padding-right: 3%;
	padding-top: 8%;
	color:white;
}

.foot-wrapper
{
	
	font-family: 'Big Shoulders Display', cursive;
	display:none;
	justify-content: none;
	align-items: none;
	

}

#titre h1
{
	font-size: 50px;
}
.adn-zone-titre h3
{
	font-size:20px;
	font-family: 'Big Shoulders Display', cursive;
	text-align:center;
	letter-spacing: 1px;
		
}
.orange
{
	font-size: 20px;
}
.adn-zone-titre
{
	width: 100%;
	position: absolute;
	height: 200px;

}
	#footer
	{
		height: 100%;
	}

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

.wrapp-landing
{
	background-image: url('xx.gif');
	
}

.wrapper-collectif
{
	margin-top: 50px;
	height: 100%;
	width:100%;
 }

#landing
{
	height: 80vh;
}

}





.box-social
{
	width: 100%;
	text-align: center;
	position: absolute;
	margin-top: 55%;
	margin-left:2%;
	z-index:9999;
	height: 80%;
	width: 100%;
	
}

.box-social a
{
	font-size: 40px;
	margin-right: 3%;
	color:orangered;
	opacity: 0;
}
.box-collectif:hover .box-social > a
{
	opacity: 1;
	transition: opacity .5s ease-in;
}









.topnav {
  background-color: black;
  overflow: hidden;
  font-family: 'Big Shoulders Display', cursive;
  z-index: 9999;
  position: fixed;
  width: 100%;

}


/* Style the links inside the navigation bar */
.topnav a {
  float:left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 25px;
  	font-family: 'Big Shoulders Display', cursive;

}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: orangered;
  color: white;
	transition: background-color .2s ease-in;
}

/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: black;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
} 


 /* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 1000px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 1000px) {
  .topnav.responsive {position: relative;
  	position: fixed;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  #except
  {
  	margin-right: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}