/* RESET */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

ol, ul {list-style: none; }
blockquote, q { quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: '';	content: none;}
table {	border-collapse: collapse; border-spacing: 0;}


body {float: left; position: relative; width: 100%; }

.page {width: 1140px; float: left; position: relative; left:50%; margin: 0 0 0 -570px; 	 padding: 0 0 1% 0;  font-family: arial, sans-serif; font-size: 14px;}

nav {padding: 2% 0; background-color: white; float: left; width: 100%; }
nav a {display: block; clear: both; float: right; text-decoration: none; font-weight: bold; color: #000;padding: 7px 0; background-image: url(media/fleche.svg); background-repeat: no-repeat; background-position: right -35px center; background-size: 30px; transition: all 400ms cubic-bezier(.47,1.64,.41,.8);}
nav a:hover {padding: 7px 45px 7px 0; background-position: right  center;}

span {text-align: center; padding: 5px 0; line-height: 150%;}

.col2 span {display: block; height: 20px; float: left; margin: 1% 3% 0 0; width: 48.5%; background-color: #1D7874;}
.col4 span {display: block; height: 20px; float: left; margin: 1% 3% 0 0; width: 22.75%; background-color: #F4C095;}
.col6 span {display: block; height: 20px; float: left; margin: 1% 3% 0 0; width: 14.16%; background-color: #679294;}
.col2 span:last-child, .col4 span:last-child, .col6 span:last-child {margin: 1% 0 0 0;}


.col3 {float: left; width: 48.5%; position: relative; margin: 4% 0 4% 0 ; border-top : 3px solid #000; padding: 1% 0 0 0;}
.col3:nth-child(2n+1) {margin-left: 3%;}
.col3 p.split {columns : 3 auto; column-gap: 33px; float: left;  line-height: 130%;}


div.star {width: calc(1140px + calc(50% - 570px)); float: left; margin: 0 0 5% 0 ; left: 0; margin-left: calc(50% - 570px);  clear: both;
overflow-x: scroll; -ms-overflow-style: none;  /* Internet Explorer 10+ */ scrollbar-width: none;   /* Firefox*/  }	
div.star::-webkit-scrollbar { display: none;  /* Safari and Chrome */ }
	 

div.star ul {float: left; width:2700px; overflow: hidden; padding: 30px 0; }
div.star ul li {float: left;  display: block;  background-color: lemonchiffon; margin: 0 33.4px 0 0;}

div.star ul li a {display: block; width: 260px; height: 390px; background-color: #444; float: left; position: relative; cursor: pointer;}
div.star ul li a img {opacity: 0.8; width: 100%; transition: linear 0.2s;}
div.star ul li a:hover {cursor: pointer;}
div.star ul li a:hover img {opacity: 1; cursor: pointer;}
	 

* MEDIA QUERIES */


@media only screen 
and (min-device-width : 0px) 
and (max-device-width : 3000px)  { 


}

@media only screen and (max-width: 1300px) {
	 	
	.page {width: 900px; margin: 0 0 0 -450px;}
	
	.col3 p.split {columns : 2 auto; column-gap: 30px;}
	
	div.star {width: calc(900px + calc(50% - 450px)); left: 0; margin-left: calc(50% - 450px);}
	div.star ul li { margin: 0 28px 0 0; }
	div.star ul li a {width: 204px; height: 306px;}
	div.star ul li a img { width: 100%;}
	
}


@media only screen and (max-width: 900px) {
	

	.col2 span, .col4 span {display: block; height: 20px; float: left; margin: 1% 0 0 0; width: 100%; }
	.col2 span:last-child, .col4 span:last-child, .col6 span:last-child {margin: 1% 0 0 0;}

	.col6 span { width: 48.5%; margin: 1% 3% 0 0; }
	.col6 span:nth-child(2n+2) { margin: 1% 0% 0 0; }
	.page {width: 85%; left:0%; margin: 0 0 0 7.5%;}
	
	.col3 p.split {columns : 1 auto; column-gap: 0px;}
	
	div.star {width: 85%; float: left; margin: 5% 7.5% ; left: 0; }
	div.star ul {float: left; width:100%;  padding: 30px 0; }
	div.star ul li { width: 48.5%; margin: 1% 3% 0 0;}
	div.star ul li:nth-child(2n+2) {margin:1% 0 0 0;}
	div.star ul li:nth-child(1n+5) {display:none; }
	div.star ul li a {width: 100%; height: auto;}
	
}