/*all*/

	body{
		background-color: #586c47;
	}

	:root {
	  --noir: #111111;
	  --vert: #586c47;
	  --olive: #96b879;
	  --oie: #191f14;
	  --blanc: #f4f3f1;
	  --marron: #413624;
	}

	a{
		text-decoration: none;
	}

	*{
		margin: 0;
		padding: 0;
		cursor: default;
	}

	::-webkit-scrollbar-track{
		background-color: var(--vert);
	}

	::-webkit-scrollbar{
		width: 12px;
		background-color: var(--blanc);
	}

	::-webkit-scrollbar-thumb{
		background: var(--noir);
	}

/*bandeaux*/

	.bandeau{
		width: 100%;
		height: 3.5vh;
		background-color: var(--oie);
	}

/*section header*/

	#top{
		width: 100%;
	}

	/*menu*/

		.nav{
    		display: flex;
    		align-items: center;
    		justify-content: space-between;
    		background-color: var(--noir);
    		background-size: cover;
    		height: 4.3vh;
    		width: 100%;
    		z-index: 1;
		}

		.nav_list{
			list-style: none;
			display: flex;
			column-gap: 2px;
			align-items: center;
			width: 100%;
			padding: 0;
		}

		.nav_item{
			display: flex;
			align-items: center;
			margin: 0% 2.5% 0% 2.5%;
			justify-content: ;
		}

		.title_nav{
			padding-left: 6px;
			color: var(--blanc);
		}

		.title_nav::selection{
			color: var(--olive);
		}

		.fas{
			color: var(--blanc);
		}

		.nav_link{
			display: flex;
			align-items: center;
			text-decoration: none;
			color: var(--blanc);
			position: relative;
			font-size: 1.5vh;
			font-family: 'Russo One', sans-serif;;
			text-transform: uppercase;
			font-weight: bold;
		}

		.nav_link::after{
			content: "";
			position: absolute;
			left: 0;bottom: 0;
			width: 100%;height: 1px;
			background-color: var(--blanc);
			transform: scaleX(0);
			transform-origin: right;
			transition: transform .5s;
		}

		.nav_link:hover::after{
			transform: scaleX(1.0);
			transform-origin: left;
		}

	/*header*/

		h1::selection{
			background-color: var(--olive);
		}

		h1{
			color: var(--noir);
			white-space: nowrap;
		}

		.typewriter{
			display: inline-block;
		}

		.title_e2 {
			font-weight: 700;
			white-space: nowrap;
			width: 100%;
			overflow: hidden;
		  	border-right: 0.15em solid var(--noir);
		 	animation: typing 3s steps(38), blink 0.3s step-end;
		}

		@keyframes typing {
		  	from {
		  	  width: 0%;
		  	}
		}

		@keyframes blink {
		  	50% {
		   		border-color: transparent;
		  	}
		}

		@media screen and (max-width:  1000px){
			#header{
				background-color: var(--vert);
				/*background-image: url(images/FD2.png);*/
				height: 45vh;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.title_e{
				display: block;
			}

			.title_e1{
				font-size: 8vh;
				letter-spacing: 5px;
				font-family: 'Russo One', sans-serif;
			}

			.title_e2{
				display: none;
			}

			.title_2{
				display: none;
			}

			.title_1{
				font-size: 6vh;
				letter-spacing: 2px;
				font-family: 'Russo One', sans-serif;
				text-align: center;
			}

			.logo_airsoft{
				height: 15vh;
				margin-right: 4vh;
			}
		}

		@media screen and (min-width:  1000px){
			#header{
				background-color: var(--vert);
				/*background-image: url(images/FD2.png);*/
				height: 87vh;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			
			.title_e{
				display: flex;
				flex-direction: column;
				align-items: center;
			}

			.title_e1{
				font-size: 18vh;
				letter-spacing: 5px;
				font-family: 'Russo One', sans-serif;
			}

			.title_e2{
				font-size: 3vh;
				letter-spacing: 2px;
				font-family: 'Russo One', sans-serif;
			}


			.title_1{
				font-size: 18vh;
				letter-spacing: 5px;
				font-family: 'Russo One', sans-serif;
				text-align: center;
			}

			.title_2{
				display: none;
			}

			.logo_airsoft{
				height: 50vh;
				margin-right: 10vh;
			}
		}

		br::selection{
			background-color: var(--olive);
		}

		.logo_airsoft::selection{
			background-color: var(--olive);
		}

		.title_e2::selection{
			background-color: var(--olive);
		}

	/*scroll down*/

		@media screen and (max-width:  1200px){
			.scroll_down{
				display: none;
			}

			.scroll_label{
				display: none;
			}

			.mouse{
				display: none;
			}

			.mouse-wheel{
				display: none;
			}
		}

		@media screen and (min-width:  1200px){
			.scroll_down{
				background-color: var(--vert);
				display: flex;
				justify-content: flex-end;
				align-items: center;
				height: 9vh;
			}

			.scroll_label{
				font-family: 'Russo One', sans-serif;
				text-transform: uppercase;
				font-weight: bold;
				margin-left: 10px;
				margin-right: 1%;
			}

			.mouse{
				width: 25px;
				height: 50px;
				border: 2px solid black;
				border-radius: 20px;
				display: flex;
				background-color: var(--vert);
				margin-right: 0px;
			}

			.mouse-wheel{
				display: block;
				width: 10px;
				height: 10px;
				background-color: black;
				border-radius: 50%;
				margin: auto;
				animation: move-wheel 1s linear infinite;
			}

			@keyframes move-wheel {
		    	0%{
		        	opacity: 0;
		        	transform: translateY(-1rem);
		    	}
		    	100%{
		        	opacity:1;
		        	transform:translateY(1rem);
		        }
		    }
		}

		.scroll_label::selection{
			background-color: var(--olive);
		}

/*scroll div*/

	.card_scroll{
		display: flex;
		flex-direction: row;
	}

	.image_scroll{
		border-radius: 15px;
	}

	.image_scroll::selection{
		background-color: var(--marron);
	}

	.image_scroll:hover{
		cursor: url("images/cursor.png"), pointer;
	}

	#middle_scroll{
		width: 0px;
		height: 0px;
	}

	@media screen and (min-width: 860px){
		.image_scroll{
			width: 200px;
			height: 200px;
			box-shadow: 0px 0px 15px black;
			margin-right: 50px;
		}

		.scroll_container{
			width: 96%;
			height: 230px;
			overflow-x: scroll;
			background-color: var(--vert);
			padding: 2%;
		}
	}

	@media screen and (max-width: 860px){
		.image_scroll{
			width: 100px;
			height: 100px;
			box-shadow: 0px 0px 8px black;
			margin-right: 25px;
		}

		.scroll_container{
			width: 96%;
			height: 130px;
			overflow-x: scroll;
			background-color: var(--vert);
			padding: 2%;
		}
	}	

/*Calendrier*/

	.calendrier{
		background-color: var(--vert);
	}

	.content_calendrier{
		display: flex;
		justify-content: center;
		padding: 3vh 0 4vh 0;
	}

	.title_calendrier::selection{
		background-color: var(--olive);
	}

	.title_calendrier{
		font-family: Russo One;
		font-size: 4vh;
		font-weight: bold;
		text-transform: uppercase;
	}

	.event{
		display: flex;
		justify-content: center;
	}

	.calendrier_container{
		background-color: var(--blanc);
		width: 80%;
		padding: 4vh 2vh 2vh 4vh;
	}

	.date_calendrier{
		font-family: Russo One;
		font-size: 2.4vh;
		font-weight: bold;
		text-transform: uppercase;
		margin-bottom: 10px;
	}

	.date_calendrier::selection{
		background-color: var(--olive);
	}

	.adresse_calendrier{
		/*font-family: Russo One;
		font-size: 1.6vh;
		text-transform: uppercase;*/
		font-family: Russo One;
		font-size: 2.4vh;
		font-weight: bold;
		text-transform: uppercase;
		margin-bottom: 5vh;
	}

	.adresse_calendrier::selection{
		background-color: var(--olive);
	}

	.billet_web{
		font-family: Russo One;
		font-size: 2.5vh;
		text-transform: capitalize;
		background-color: var(--vert);
		border-radius: 2px;
		padding: 10px 23px 10px 23px;
		margin-left: 43%;
		margin-bottom: 5vh;
		color: var(--blanc);
		transition: 0.2s;
		animation-duration: 1s;
	   	animation-name: clignoter;
	   	animation-iteration-count: infinite;
	   	transition: none;
	}

	@keyframes clignoter {
	  0%   { background-color: var(--vert); }
	  35%   { background-color: var(--vert); }
	  50%   {background-color: red; }
	  65%   { background-color: var(--vert); }
	  100% { background-color: var(--vert); }
	}

	.billet_web:hover{
		cursor: pointer;
		border-radius: 10px;
		transition: 0.2s;
	}

	.billet_web::selection{
		background-color: var(--olive);
	}

/*Documents*/

	.reglement{
		background-color: var(--vert);
	}

	.content_reglement{
		display: flex;
		justify-content: center;
		padding: 3vh 0 4vh 0;
	}

	.title_reglement{
		font-family: Russo One;
		font-size: 4vh;
		font-weight: bold;
		text-transform: uppercase;
		margin-right: 10px;
	}

	.title_reglement::selection{
		background-color: var(--olive);
	}

	@media screen and (max-width:  650px){
		.title_reglement_suite{
			font-family: Russo One;
			font-size: 4vh;
			font-weight: bold;
			text-transform: uppercase;
			display: none;
		}
	}

	@media screen and (min-width:  650px){
		.title_reglement_suite{
			font-family: Russo One;
			font-size: 4vh;
			font-weight: bold;
			text-transform: uppercase;
			display: block;
		}
	}

	.title_reglement_suite::selection{
		background-color: var(--olive);
	}

	.reglement_content{
		display: flex;
		justify-content: center;
	}

	.reglement_container{
		background-color: var(--blanc);
		width: 80%;
		padding: 4vh 2vh 2vh 4vh;
	}

	.date_reglement{
		font-family: Russo One;
		font-size: 2vh;
		font-weight: bold;
		text-transform: uppercase;
		padding-bottom: 10px;
	}

	.date_reglement::selection{
		background-color: var(--olive);
	}

	.adresse_reglement{
		font-family: Russo One;
		font-size: 2vh;
		font-weight: initial;
	}

	.adresse_reglement::selection{
		background-color: var(--olive);
	}

	.fa-folder{
		color: var(--vert);
		margin-right: 5px;
	}

	.document_telechargement{
		color: var(--noir);
		font-family: Russo One;
		text-decoration: underline;
		transition-duration: 0.3s;
	}

	.document_telechargement:hover{
		cursor: pointer;
		color: var(--olive);
		transition-duration: 0.3s;
	}

/*article*/

	#collections{
		display: block;
		justify-content: center;
		background-color: var(--vert);
		padding: 4vh;
	}

	.resp-card{
		background: linear-gradient(-45deg, var(--olive), var(--vert), var(--oie));
		color: white;
		padding: 1rem;
		background-size: 400% 400%;
		/*height: 6rem;*/
		animation: gradient 10s ease infinite;
		box-shadow: 0px 0px 20px black;
		border-radius: 2rem;
		display: flex;
		align-items: center;
		border: solid var(--noir) 1px;
		transition-duration: 0.3s;
		letter-spacing: 0.4rem;
	}

	.resp-card:hover{
		border: solid var(--noir) 5px;
	}

	@media screen and (max-width:  1200px){
		.resp-card{
			height: 2rem;
			justify-content: center;
		}	

		.airsoft_1{
			display: none;
		}

		.airsoft_2{
			font-size: 3vh;
		}

		.bushcraft_1{
			display: none;
		}

		.bushcraft_2{
			font-size: 3vh;
		}

		.logo_article{
			height: 5vh;
			margin-right: 1.5vh;
		}
	}

	@media screen and (min-width:  1200px){
		.resp-card{
			height: 6rem;
		}

		.airsoft_1{
			font-size: 6vh;
		}

		.airsoft_2{
			display: none;
		}

		.bushcraft_1{
			font-size: 6vh;
		}

		.bushcraft_2{
			display: none;
		}

		.logo_article{
			height: 10vh;
			margin-right: 2.5vh;
			margin-left: 3%;
		}
	}

	.logo_article::selection{
		background-color: var(--vert);
	}

	.airsoft_1{
		font-family: Russo One;
		text-transform: uppercase;
		font-weight: bold;
		color: var(--blanc);
		/*font-size: 6vh;*/
	}

	.airsoft_1::selection{
		background-color: var(--olive);
	}

	.airsoft_2{
		font-family: Russo One;
		text-transform: uppercase;
		font-weight: bold;
		color: var(--blanc);
		/*font-size: 6vh;*/
	}

	.airsoft_2::selection{
		background-color: var(--olive);
	}

	.bushcraft_1{
		font-family: Russo One;
		text-transform: uppercase;
		font-weight: bold;
		color: var(--blanc);
		/*font-size: 6vh;*/
	}

	.bushcraft_1::selection{
		background-color: var(--olive);
	}

	.bushcraft_2{
		font-family: Russo One;
		text-transform: uppercase;
		font-weight: bold;
		color: var(--blanc);
		/*font-size: 6vh;*/
	}

	.bushcraft_2::selection{
		background-color: var(--olive);
	}

	.card_container{
		max-width: 800px;
		margin: 0 auto;
		display: grid;
		grid-gap: 1rem;
	}

	@media (min-width 600px){
		.card_container{
			grid-template-columns: repeat(2, 1fr);
		}
	}

	@media (min-width 900px){
		.card_container{
			grid-template-columns: repeat(3, 1fr);
		}
	}

	@keyframes gradient {
		0% {
			background-position: 0% 50%;
		}

		50% {
			background-position: 100% 50%;
		}

		100% {
			background-position: 0% 50%;
		}
	}

/*Actus*/

	@media screen and (max-width 1000px){
		.actus{
			background-color: var(--vert);
			margin: 4vh 0 4vh 0;
		}

		.content_actus{
			display: flex;
			justify-content: center;
		}

		.title_actus::selection{
			background-color: var(--olive);
		}

		.title_actus{
			font-family: Russo One;
			font-size: 5vh;
			font-weight: bold;
			text-transform: uppercase;
			margin-bottom: 3vh;
		}

		.actus_image{
			display: flex;
			justify-content: center;
		}

		.image_actus{
			width: 300px;
		}
	}

	@media screen and (min-width 1000px){
		.actus{
			background-color: var(--vert);
			margin: 4vh 0 4vh 0;
		}

		.content_actus{
			display: flex;
			justify-content: center;
		}

		.title_actus::selection{
			background-color: var(--olive);
		}

		.title_actus{
			font-family: Russo One;
			font-size: 7vh;
			font-weight: bold;
			text-transform: uppercase;
			margin-bottom: 3vh;
		}

		.actus_image{
			display: flex;
			justify-content: center;
		}

		.image_actus{
			width: 800px;
		}
	}

/*Galery*/

	/*@media screen and (max-width: 1500px){
		.pic_ctn {
		  	width: 100vw;
		  	height: 200px;
		}

		@keyframes display {
		  	0% {
		    	transform: translateX(200px);
		    	opacity: 0;
		  	}
		  	10% {
		    	transform: translateX(0);
		    	opacity: 1;
		  	}
		  	20% {
		    	transform: translateX(0);
		    	opacity: 1;
		  	}
		  	30% {
		    	transform: translateX(-200px);
		   		opacity: 0;
		  	}
		  	100% {
		    	transform: translateX(-200px);
		    	opacity: 0;
		  	}
		}

		.pic_ctn {
		  	position: relative;
		  	width: 100vw;
		  	height: 600px;
		  	margin-top: 30px;
		  	margin-bottom: 30px;
		}

		.pic_ctn > img {
		  	position: absolute;
		  	top: 0;
		  	left: calc(50% - 200px);
		  	opacity: 0;
		  	animation: display 20s infinite;
		}

		img:nth-child(2) {
		  animation-delay: 4s;
		}
		img:nth-child(3) {
		  animation-delay: 8s;
		}
		img:nth-child(4) {
		  animation-delay: 12s;
		}
		img:nth-child(5) {
		  animation-delay: 16s;
		}
	}

	@media screen and (min-width: 1500px){
		.pic_ctn{
			display: flex;
			height: 20rem;
			gap: 1rem;
			margin: 0 6vh 0 6vh;
		}

		.pic{
			flex: 1;
			border-radius: 1rem;
			background-position: center;
			background-repeat: no-repeat;
			background-size: auto 100%;
			transition: all .8s cubic-bezier(.25, .4, .45, 1.4);
		}

		.pic:hover{
			flex: 5;
		}
	}*/

	.pic_ctn {
	    position: relative;
	    width: 100vw;
	    height: 600px;
	    margin-top: 30px;
	    margin-bottom: 30px;
	}

	.pic_ctn > img {
	    position: absolute;
	    top: 0;
	    left: calc(50% - 200px);
	    opacity: 0;
	    animation: display 25s infinite;
	}

	@keyframes display {
	    0% {
	        transform: translateX(200px);
	        opacity: 0;
	    }
	    10% {
	        transform: translateX(0);
	        opacity: 1;
	    }
	    20% {
	        transform: translateX(0);
	        opacity: 1;
	    }
	    30% {
	        transform: translateX(-200px);
	        opacity: 0;
	    }
	    100% {
	        transform: translateX(-200px);
	        opacity: 0;
	    }
	}

	img:nth-child(1) {
	    animation-delay: 5s;
	}
	img:nth-child(2) {
	    animation-delay: 10s;
	}
	img:nth-child(3) {
	    animation-delay: 15s;
	}
	img:nth-child(4) {
	    animation-delay: 20s;
	}
	img:nth-child(5) {
	    animation-delay: 25s;
	}
	img:nth-child(6) {
	    animation-delay: 30s;
	}

/*footer*/

	#footer{
		background-color: var(--noir);
	}

	/*link*/

		.all_icons{
			display: flex;
			justify-content: center;
			margin: 0% 40% 0% 40%;
			padding-top: 5vh;
		}

		.socials{
			display: flex;
			gap: 25px;
			margin: 0 10px 0 10px;
		}

		.socials_links{
			position: relative;
			width: 50px;
			height: 50px;
			background: linear-gradient(90deg, var(--vert), var(--oie));
			display: inline-flex;
			align-items: center;
			justify-content: center;
			font-size: 24px;
			text-decoration: none;
			color: var(--blanc);
			border-radius: 50%;
			transition: scale 0.15s;
		}

		.socials_links:hover{
			scale: 0.9;
		}

		.socials_links::after{
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
			width: 100%;
			height: 100%;
			background: linear-gradient(90deg, var(--vert), var(--olive));
			border-radius: 50%;
			opacity: 0;
			scale: 0.95;
			pointer-events: none;
		}

		.socials_links:hover::after{
			animation: pulse 1s;
		}

		@keyframes pulse {
			0%{
				opacity: 0.0;
			}
			50%{
				opacity: 0.5;
			}
			100%{
				scale: 2;
				opacity: 0;
			}
		}

		/*faire bouger les icones*/

		@keyframes shake {
			10%{transform:rotate(15deg);}
			20%{transform:rotate(-15deg);}
			30%{transform:rotate(15deg);}
			40%{transform:rotate(-15deg);}
		}

	/*contact*/

		.contact{
			margin: 4vh 0 5vh 2vh;
		}

		.contact::selection{
			background-color: var(--vert);
		}

		.president{
			font-family: Russo One;
		}

		.president::selection{
			background-color: var(--vert);
		}

		.email{
			font-family: Russo One;
			display: flex;
			align-items: baseline;
			margin-top: 10px;
		}

		.email::selection{
			background-color: var(--vert);
		}

		.contact_nom{
			font-family: Russo One;
			font-size: 1.4rem;
			color: var(--olive);
		}

		.contact_nom::selection{
			background-color: var(--vert);
		}

		.contact_adresse{
			font-family: Russo One;
			font-size: 0.9rem;
			color: var(--olive);
			margin-left: 5px;
		}

		.contact_adresse:hover{
			color: var(--blanc);
			transition-duration: 0.3s;
		}

		.contact_adresse::selection{
			background-color: var(--vert);
		}

	/*credit*/

		.credit{
			font-family: 'Russo One', sans-serif;
			margin: 10px 0 0 2vh;
			color: var(--olive);
		}

		.credit::selection{
			background-color: var(--vert);
		}