@import 'https://fonts.googleapis.com/css?family=Catamaran:200,600';

/*	#############################################
					Slideshow
	#############################################	*/
/**/

	.slides {
		z-index: 1;
		position: absolute;
		top: 0; left: 0;
		overflow: hidden;
		background-size: cover;
		background-position: center;
		width: 100%;
		height: 100%;
	}

	#welcome {
		z-index: 100;
		text-shadow: 1px 1px 5px #000;
	}
	

/*	#############################################
					Header
	#############################################	*/
/**/
	/* Size */
		#logo { height: 35px }	/* Pour xxs */
		/*#logo {	height: 50px; }*/
		/* Header size = 84 px*/

	/* Liens du menu */
		.nav-item { margin: 0.1em; }

		.nav-link {
			font-size: 1.6rem;					/* MQ */
			padding: 0.4em 1em !important;
			font-family: 'Catamaran', 'Lato', sans-serif;
			font-weight: 200 !important;
			color: #fff !important;
		}
		.nav-active::after {
			content: '';
			display:block;
			width: 100%;
			height: 1px;
			position: relative;
			bottom: 0;
			background: #fff;
		}
		.nav-link:hover {
			background-color: #fff;
			color: black !important;
			/*font-weight: 400;*/
		}
		.nav-link.nav-active:hover::after {
			opacity: 0;
		}

	/* Centrage toggler mobile */
		.navbar-toggler-right {
			position: relative !important;
			right: -1rem !important;
		}

/*	#############################################
					Footer
	#############################################	*/
/**/
	.footer {
		z-index: 99;
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 40px;
		line-height: 40px;  /* Vertically center the text there */ 
	}


/*	#############################################
					Body
	#############################################	*/
/**/
	body {
		padding-top: 110px;			/* Espace header */
		padding-bottom: 60px;		/* Espace footer */
		color: #fff;
		/*font-family: 'Catamaran', 'Lato', sans-serif;*/
		/*font-weight: 600;*/
	}

	.transitions,
	.transitions * {
		-webkit-transition: all .25s ease-out;
		   -moz-transition: all .25s ease-out;
		    -ms-transition: all .25s ease-out;
		     -o-transition: all .25s ease-out;
		        transition: all .25s ease-out;
	}
	
	.pop-cookie {
		z-index: 1500;
		position: fixed;
		top: 84px;
		right: 0;
		max-width: 300px;
		max-height: 60px;
	}

	/* Design */
		h1 {
			font-family: 'Catamaran', 'Lato', sans-serif;
		}
		strong {
			font-weight: 400;
		}

		.grey {
			background-color: #1E1E1E !important;
		}
		.navbar.vshadow {
			box-shadow: 0 0 20px 10px rgba(30, 30, 30, .8);
		}
		.footer.vshadow {
			box-shadow: 0 0 5px 3px rgba(30, 30, 30, .8);
		}
		.transparent {
			background-color: rgba(0,0,0,0.35) !important; 
			/*box-shadow: none !important;*/
		}
		.contour {
			border: 1px solid #555;
			padding: 1.5rem;
		}
		.back-arrow {
			float: left;
			position: absolute;
			font-size: 2.5rem;
			line-height: 1.1;
			color: #aaa;
		}
		.back-arrow:hover {
			text-decoration: none;
			color: #fff;
		}

/*	#############################################
				Liste à puces
	#############################################	*/
/**/

/*
	.list {
		margin-left: 2rem; 
	}
	.list-item-circle {
    	list-style-type: disc !important;	
    	padding: .6em 0;
    	font-size: 1.1rem;
	}
*/
	.list {
		display: inline-block;
		/*padding: 0 1em;*/
	}
	.list > li {
		padding: 1em;
		border-bottom: 1px solid #555;
	}
	.list > li:last-child {
		border-bottom: none;
	}
	.list > li > a {
		color: #fff !important;
		display: block;
	}

/*	#############################################
					Media Queries
	#############################################	*/
/**/

@media (max-width:335px) {
	#logo { height: 25px }
}

/* xs = par défaut */
@media (max-width:575px) {
	.navbar {
		padding-left: 0;
		padding-right: .3rem;
	}
}

/* sm+ */
@media (min-width:576px)
{
	#logo { height: 40px }
}

/* md+ */
@media (min-width:768px)
{
	body { padding-top: 100px }
	.pop-cookie { top: 74px }
	#logo { height: 30px }
	.nav-link { font-size: 1.1rem; }
}

/* lg+ */
@media (min-width:992px)
{
	body { padding-top: 110px }
	.pop-cookie { top: 84px }
	#logo { height: 40px }
	.nav-link { font-size: 1.5rem; }
}

/* xl+ */
@media (min-width:1200px)
{
	.nav-link { font-size: 1.6rem; }
}


