@charset: "UTF-8";

*{
	box-sizing: border-box;
}

body{
    font-family: 'Raleway', sans-serif;
    background-color: #282828; 
    font-size: 1rem;   
}

div.debugboot{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 999;
}

img{
	width: 100%;
}
/*colors*/
.bg-w{
	background-color: white;
}
.bg-b{
	background-color: black;
}
.bg-grisf{
	background-color: #161616;
}
.bg-accent{
	background-color: #FF8400;
}
.c-w{
	color: white;
}
.c-accent{
	color: #FF8400;
}


/*utils*/
h1, h2{
	font-size: 1.5rem;
	font-weight: 500;
  font-family: 'Cairo', sans-serif;
  color: #FF8400;
}
h2{
	font-size: 1.2rem;
}

ul{
	margin: 0;
	padding-left: 0;
	list-style-type: none;
}
.bord-img{
	border: 1px solid #FF8400;;/*#DDDDDD*/
}

.arrondi{
	border-radius: 10px;
	overflow: hidden;
}
.arrondiBig{
	border-radius: 20px;
	overflow: hidden;
}
.espaceV{
	margin-bottom: 6rem;
}
.espaceVs{
	margin-bottom: 3rem;
}


/*carousel top*/
.slider-logo img{
	width: 75vw;
}
.carousel-top img{
	width: auto;
	height: 71vw;
}
.carousel-top .carousel-caption{
	top: 1rem;
	left: 2rem;
	text-shadow: 0px 0px 10px #223762;
}
.carousel-top .carousel-item h5, header .slider h5{
	font-size: 2rem;
	font-weight: 500;
  font-family: 'Cairo', sans-serif;
}
.carousel-top .carousel-control-prev i, .carousel-top .carousel-control-next i, .carousel-topm .carousel-control-prev i, .carousel-topm .carousel-control-next i{
	font-size: 2rem;
}
.carousel-top .carousel-control-prev i, .carousel-topm .carousel-control-prev i{
	margin-left: 2rem;
}
.carousel-top .carousel-control-next i, .carousel-topm .carousel-control-next i{
 	margin-right: 2rem;
}
.carousel-top .carousel-indicators button, .carousel-topm .carousel-indicators button{
	background-color: transparent;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border: 1px solid white;
	opacity: 0.8;
}
.carousel-top .carousel-indicators button.active, .carousel-topm .carousel-indicators button.active{
	background-color: white;
}

/*menu*/
.menu-top li{
	margin-right: 0;
	text-align: center;
}
.menu-top a{
	color: white;
	text-transform: capitalize;
}
.menu-top a:hover, .menu-top li.current-menu-item a, .menu-top li.current-menu-parent>a,.menu-top li a.nav-link.show{
	color: #FF8400;
}
.menu-top .dropdown-menu{
	background-color: black;
	width: 100%;
}
.menu-top .navbar-toggler i{
	font-size: 2rem;
}



/*about*/
.about img{
	width: 75%;
	padding-bottom: 2rem;
	padding-right: 0;
	float: none;
}

/*richi campaign*/
.campaign .image-wide{
	height: 50vw;
	background-size: cover;
}

/*illus jdr*/
.grid-sizer, .grid-item{
	float: left;
	width: 45%;
}
.grid-item--width2{
	width: 46%
}

/*scifi landscapes*/
header .slider{
	/*height: 400px;*/
	position: relative;	
}
header .slider h5{
	font-size: 1.8rem;	
}
header .slider span.roll{
	font-size: 1rem;
	position: absolute;
	bottom: 1rem;
	left: 1rem;
	z-index: 3;
	display: none;
}
header .slider .image, header .sliderm .image{
	position: relative;
}
header .sliderm .image{
	width: 100%;
	height: 71vw;
}
header .slider .image .cache{
	position: absolute;
	z-index: 3;
	top: 0;
	right: 0;	
}
header .slider .image .thumb{
	position: absolute;
	z-index: 3;
	top: 0;
	width: 100%;
	height: 100%;
	display: none;
}
header .slider img.illu{
	width: 100%;	
}
header .slider img.cache, header .slider .thumb img{
	width: auto;
	height: 100%;
}
header .slider .fiche{
	width: 100%;
	padding: 1rem;
	padding-left: 3rem;
	padding-right: 3rem;
	font-size: 1.2rem;
}
header .slider .fiche p{
	margin-bottom: 0;
}
header .slider .fiche span{
	font-weight: 500;
}
header .slider .fiche .boutons{
	width: 75%;
}
header .slider .fiche a.btn, .showls a.btn{	
	font-weight: 500;
	border: 1px solid #FF8400;
	display: block;
}
header .slider .fiche a.btn:hover{
	background-color: #FF8400;
}
header .slider a.logo{
	width: 20%;
}
header .slider .fiche span.type, header .slider .fiche span.color, header .slider .fiche span.format{
	text-transform: capitalize;
}

.filtres button{
	color: #555555;
	padding-bottom: 0;
	text-transform: capitalize;
}
.filtres button:hover, .filtres button.bon{
	color: #FF8400;
}


/*liste*/
.liste .image{
	width: 48%;
	position: relative;
}
.mobile-wpp .mobw{
	position: relative;
}
.liste .image .over, .grid-item .over, .mobile-wpp .over{
	position: absolute;
	height: 100%;
	width: 100%;
	opacity: 0;
	transition: opacity 1s;
	overflow: hidden;
}
.liste .image .over:hover, .grid-item .over:hover,  .mobile-wpp .over:hover{
	opacity: 0.5;
}

/*mobile-wpp*/
.intro a{
	color: #FF8400;
	text-decoration: none;
}

/*contact*/
.contact .form-control:focus{
	border-color: #FF8400;
}
.contact button:hover{
	border-color: #FF8400;
}
.contact input.det{
	display: none;
}

/*footer*/
footer{
	height: 15vh;
}

.showfs, .showls{
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0,0,0,1);
	z-index: 999;
}
.showfs .image, .showls .image{
	position: relative;
	width: 150vh;
}
.showfs .capt{
	position: absolute;
	bottom: 5px;	
}
.showfs img, .showls img{
	height: auto;
	width: 93%;
}
/*.showls .image{
	position: absolute;
}*/
/*.showls .fond{
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,1);
}*/


/*XS devices (portrait phones, less than 576px)*/
/*No media query for `xs` since this is the default in Bootstrap*/

/*SM devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {

}
/*MD devices (tablets, 768px and up)*/
@media (min-width: 768px) {
	.carousel-top img{
		height: auto;
		width: 100%;
	}	
	.about img{
		width: 33%;
		float: left;
		padding-right: 2rem;
	}
	.campaign .image-wide{
		height: 100%;
	}	
}
/*LG devices (desktops, 992px and up)*/
@media (min-width: 992px) {
	h1{
		font-size: 1.5rem;
		font-weight: 400;
	}
	.menu-top li{
		margin-right: 2rem;
	}
	.menu-top li:last-child{
		margin-right: 0;
	}
	.menu-top .dropdown-menu{
		width: 260px;
	}
	.menu-top .dropdown-menu li{
		text-align: left;
	}
	.about img{
		width: 19%;
	}

	.grid-sizer, .grid-item{
		width: 23%;
	}
	.showfs img{
		height: 719px;
		width: auto;
		/*rotate: 0.25turn;*/
	}

}
/*XL devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
	header .slider .fiche{
		width: 35.21%;
	}
	header .slider .image{
		width: 64.79%;
		height: 20.83vw;
	}
}
/*XXL devices (larger desktops, 1400px and up)*/
@media (min-width: 1400px) {

}