/* FONTS */
@font-face {
	font-family:'Bright';
	src: url('../fonts/Bright.otf') format('opentype');
	font-weight: 400;
	font-style: normal;
	font-stretch: normal;
}

/* **************************************** */
/* ******		Page main settings	 ****** */
/* **************************************** */

body {
  height: 100%;
  margin: 0;
  color: #eee;
  background: #11132d;
  background-image: url('../images/cielfond-highres.jpg');
  background-color: #11132d;
  /*background-position: center;*/
  background-repeat: repeat;
  /* background-size: cover; */
  overflow-x: hidden;
  min-height: 100vh;
}

    :root {
  font-family: sans-serif;
  font-size: 16px;
}

* {
  box-sizing: border-box;
}
 	
 	.DivLogo {
 	height: 5vh;
 	text-align: left;

	}
	
	.LogoPlanet {
 	height: 143%;
	}
	
	.powered {
	text-align: center;
	color: white;
	/*position: fixed;
	bottom: 0px;*/

	}
	
	.content {
 width: 1380px;
  margin: auto;
}


	/* Gallerie  */

.gallery {
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
  align-items: stretch;
  width: 100%;
  margin: auto;
}
.gallery .galleryItem {
  flex: 1 1 auto;
  margin: 0px;
  border: 1px solid black;
  position: relative;
  width: 30em;
  height: 22em;
  overflow: hidden;
}
.gallery .galleryItem2 {
  flex: 1 1 auto;
  margin: 0px;
  border: 1px solid black;
  position: relative;
  width: 27em;
  height: 10em;
  overflow: hidden;
}

.gallery .galleryItem3 {
  flex: 1 1 auto;
  margin: 0px;
  border: 1px solid black;
  position: relative;
  width: 30em;
  height: 10em;
  overflow: hidden;
}

.gallery .galleryItem4 {
  flex: 1 1 auto;
  margin: 0px;
  border: 1px solid black;
  position: relative;
  width: 30em;
  height: 10em;
  overflow: hidden;
}

.gallery .smallbanner{
  height: 10em;
}

.gallery .galleryItem:hover img {
  transform: scale(1.2);
}

.gallery .galleryItem2:hover img {
  transform: scale(1.2);
}

.gallery .galleryItem3:hover img {
  transform: scale(1.2);
}

.gallery .galleryItem4:hover img {
  transform: scale(1.2);
}

.gallery a {
  display: block;
  width: 100%;
  height: 100%;
}
.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.2s;
  filter: brightness(105%);
}
.gallery figcaption {
  background-color: rgba(0, 0, 0, 0.4);
  color: #fff;
  position: absolute;
  bottom: 34%;
  left: 50%;
  right: 0;
  padding: 1em;
  font-size: 34px;
  font-family: "Bright";
}

.gallery .galleryItem2 figcaption {
  background-color: rgba(0, 0, 0, 0.4);
  color: #fff;
  position: absolute;
  bottom: 10%;
  left: 50%;
  right: 0;
  padding: 1em;
  font-size: 34px;
  font-family: "Bright";
}

.gallery .galleryItem3 figcaption {
  background-color: rgba(0, 0, 0, 0.4);
  color: #fff;
  position: absolute;
  bottom: 10%;
  left: 45%;
  right: 0;
  padding: 1em;
  font-size: 34px;
  font-family: "Bright";
}

.gallery .galleryItem4 figcaption {
  background-color: rgba(0, 0, 0, 0.4);
  color: #fff;
  position: absolute;
  bottom: 10%;
  left: 55%;
  right: 0;
  padding: 1em;
  font-size: 34px;
  font-family: "Bright";
}


/* ********* BANNER UP 	*********** */

.bannerUp {
	position: relative;
	width: 100%;
	height: 10em;
	border: 1px solid black;
	overflow: hidden;
}

.bannerUp figcaption {
	background-color: rgba(0, 0, 0, 0.4);
	color: #fff;
	position: absolute;
	bottom: 34%;
	left: 0%;
	right: 50%;
	padding: 1em;
	font-size: 34px;
	font-family: "Bright";
	
}

.bannerUp a {
  display: block;
  width: 100%;
  height: 100%;
}
.bannerUp img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.2s;
  filter: brightness(105%);
}

.bannerUp:hover img {
  transform: scale(1.2);
}



/* **************************************** */
/* ******		Country Flags		 ****** */
/* **************************************** */


.flagdivs {
	position: relative;
/*	display: table-caption; */
	width: 100%;
}

.flagleft {
	width: 33%;
	float: left;
	text-align: center;
}
.flagcenter {
	width: 50%;
	float: left;
	text-align: center;
}
.flagright {

	text-align: center;
}


/* **************************************** */
/* ******		Cookie Button   	 ****** */
/* **************************************** */

.cookie-box {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  padding: 0.5rem 2rem;
  background: #fff;
  transition: all .75s cubic-bezier(.19,1,.22,1);
  color: #9c610a;
}

.cookie-box--hide {
    opacity: 0;
    bottom: -100%;
}


.cookie-button {
  display: inline-block;
  cursor: pointer;
  padding: 0.65rem 0.85rem;
  margin-left: 0.45rem;
  color: #fff;
  font-size: 0.75rem;
  letter-spacing: 1px;
  background-image: linear-gradient(62deg, #e3c797 0%, #9c610a 100%);
}


/* **************************************** */
/* ******		Responsive		   	 ****** */
/* **************************************** */
	

/* ******		background-image   	 ****** */
	
	
/* Smartphone */
@media only screen and (min-width: 320px) and (max-width: 450px) { body {background-image: url('../images/cielfond-450.jpg');}}

/* Ipad Mini */
@media only screen and (min-width: 451px) and (max-width: 768px) { body {background-image: url('../images/cielfond-768.jpg');}}

/* Ipad Air / Pro / other models  */
@media only screen and (min-width: 769px) and (max-width: 850px) { body {background-image: url('../images/cielfond-850.jpg');}}

/* Ipad Pro 12inch  */
@media only screen and (min-width: 851px) and (max-width: 1024px) { body {background-image: url('../images/cielfond-1024.jpg');}}
/* PC  */
/* PC 1366x768  */
@media only screen and (min-width: 1025px) and (max-width: 1366px) { body {background-image: url('../images/cielfond-1366.jpg');}}
/* PC 1536x864  */
@media only screen and (min-width: 1367px) and (max-width: 1536px) { body {background-image: url('../images/cielfond-1536.jpg');}}
/* PC 1920x10804  */
@media only screen and (min-width: 1536px) and (max-width: 1920px) { body {background-image: url('../images/cielfond-1920.jpg');}}
/* PC 2560x1440  */
@media only screen and (min-width: 1921px) and (max-width: 2560px) { body {background-image: url('../images/cielfond-2560.jpg');}}
	
	
	

	}	
	/* 1920X1080 resolution */
	@media screen and (max-width: 1920px) {
	
	
				.DivLogo {
				height: 2vh;
				
				}
				.LogoPlanet {
				height: 400%;
				}
				
				.content {
    			width: 1280px;
    			position: static;
				/*transform: translate(-50%,-50%);
				left: 50%;
				top: 50%;*/
  				} 
				.bannerUp figcaption {
				bottom: 34%;
				}
			
				.gallery figcaption {
				bottom: 34%;
				}
				.gallery .galleryItem {
   				 width: 27em;
   				 height: 20em;
  				}
  				.gallery .galleryItem2 {
				width: 27em;
    			height: 10em;
  				}
  				
				.gallery .galleryItem2 figcaption {
				bottom: 10%;
				}
				.gallery .galleryItem2 img {
  				height: 184%;
				}
  				.gallery .galleryItem3 {
				width: 27em;
    			height: 5em;
  				}
  				.gallery .galleryItem4 {
				width: 27em;
    			height: 5em;
  				}

	}


			/* 1536x864  resolution */
	@media screen and (max-width: 1536px) {
			
	}
			/* 1460x900  resolution */
	@media screen and (max-width: 1460px) {
			
	}

	/* 1336X768 resolution */
	@media screen and (max-width: 1366px) {
				.content {
			    width: 1000px;
				} 

				.gallery .galleryItem {
				width: 22em;
				height: 13em;
				}
				.bannerUp figcaption {
				font-size: 25px;
				}

				.gallery figcaption {
				font-size: 25px;
				}
				.gallery .galleryItem2 figcaption {
				font-size: 25px;
				}
				.gallery .galleryItem3 figcaption {
				font-size: 25px;
				}
				.gallery .galleryItem4 figcaption {
				font-size: 25px;
				}
				.powered {
				}
				
				
	}

	
		/* 1280x720  720p resolution */
	@media screen and (max-width: 1280px) {
				.content {
			    width: 880px;
				}
				.gallery .galleryItem {
   				 width: 27em;
				 height: 20em;
  				}
				.gallery .galleryItem2 {
			    width: 27em;
			    height: 10em;
				}
				.bannerUp figcaption {
				bottom: 34%;
				}
				.gallery figcaption {
				bottom: 34%;
				}
				.gallery .galleryItem2 figcaption {
				bottom: 10%;
				}
				.gallery .galleryItem2 img {
  				height: 184%;
				}
			
	}


	/* Ipad /Ipad Mini  resolution / Kindle  resolution*/
	@media screen and (max-width: 968px) {
	
				.LogoPlanet {
 				height: 12vh;
				}
				
				.DivLogo {
				position: relative;
				height: 20vh;
				}
				.content {
  				width: 640px;
				}
}
				
	}
	
	
		/* medium range  */
	@media screen and (max-width: 640px) {
				.gallery .galleryItem {
				width: 10em;
			    height: 10em;
				}
				.gallery .galleryItem2 {
				width: 10em;
			    height: 10em;
				}
	
				.LogoPlanet {
 				height: 17vh;
				}
				
				.DivLogo {
				position: relative;
				}
				 .content {
  				width: 100%;
				}
				
	}
	
	
		/* Iphone 12/13 Pro 428  */
	@media screen and (max-width: 429px) {
				.content {
				width: 428px;
				}
	}
	

	/* GS5 to Redmi  to Iphone Plus resolution */
	@media screen and (max-width: 414px) {
	
				.LogoPlanet {
 				height: 13vh;
				}
				
				.DivLogo {
				position: relative;
				}
				 .content {
  				width: 100%;
				}

				.powered {
				font-size: 11px;
				}
				
	}
	
		/* Legacy 375px phone 8% of french people! */
	@media screen and (max-width: 375px) {
	
				.LogoPlanet {
 				height: 13vh;
				}
				
				.DivLogo {
				position: relative;
				}

				.powered {
				font-size: 11px;
				}
				
	}