/* GENERAL */

h1{
	font-family:"Brandon Grot W01 Bold";
	font-size: 62px;
	text-transform: uppercase;
}
h2{
	font-size:20px;
	margin: 50px 0; 
	text-transform: uppercase;
}

h3{
	font-family:"Brandon Grot W01 Bold";
	font-size: 16px;
	line-height: 30px;
	margin: 30px 0 10px 0; 
	text-transform: uppercase;
}


.medium{
	font-family:"Brandon Grot W01 Medium";
}

#nav_years {
	background: black;
	padding-top: 5px;
	position: absolute;
	top: 70px;
  	z-index: 900;
  	width: 100%;
}

#nav_years_container {
    height: 20px;
    overflow: hidden;
    width: 90%;
    margin-bottom: 20px;
}

#prev_years, #next_years, #nav_years_container{
	float: left;
	cursor: pointer;
}

#nav_years_container ul li.active:hover{
	text-decoration: underline;
}

#prev_years.off, #next_years.off{
	cursor: normal;
	opacity: 0.2;
}

#nav_years_container ul {
	transition: all 1s;
	-webkit-transition: all 1s;
	width: 3000px;
}

#nav_years_container li{
	cursor: pointer;
    float: left;
    letter-spacing: 2px;
    margin: 0 20px;
    text-align: justify;
    width: 40px;
    color: #5c5c5c;
}

#nav_years_container li.active{
	color:#fff;
}

/* Animation */
#intro_anim{
	margin-bottom: 50px;
}
#intro_anim h1{
	border-bottom: 1px solid #a5a5a5;
	font-size: 30px !important;
	margin-bottom: 0px !important;
	padding-bottom: 25px;
	width: 100%;
}
#intro_anim .intro_texte{
	margin: 45px 0;
	border-bottom: 1px solid #a5a5a5;
	padding-bottom: 45px;
	text-align: justify;
}
#intro_anim p{
	width: 100%;
}

/* Design */
#intro_design{
	margin-bottom: 50px;
}
#intro_design h1{
	border-bottom: 1px solid #a5a5a5;
	font-size: 30px !important;
	margin-bottom: 0px !important;
	padding-bottom: 25px;
	width: 100%;
}
#intro_design .intro_texte{
	margin: 45px 0;
	border-bottom: 1px solid #a5a5a5;
	padding-bottom: 45px;
	text-align: justify;
	width: 100%;
}
#intro_design p{
	width: 100%;
}

/* PROJECTS MOSAIC */


#films {
	width: 100%;
}

.case {
	background-color: #000;
	border-top: 1px solid #000;
	cursor: pointer;
	float: left;
	font-family:"Brandon Grot W01 Thin";
	font-size: 60px;
	margin: 0 5px 5px 0;
	overflow: hidden;
	position: relative;
	text-align: center;
	width: 307px;
}
.casedate a{
	width: 100%;
	display: block;
	padding-bottom: 131%;
	height: 0;
}
.date_case {	
	position: absolute;
	height: 92px;
	top: 50%;
	margin-top: -46px;
	width: 100%;
}

.case.off{
	background-color: #535353;
	color: #000;
	opacity: 0.4;
	filter:alpha(opacity=40);
}

.case .poster, .casedate .poster {
	display: block;
	height: auto;
	width: 100%;
}

.case:hover {
	border-top: 1px solid #fff;
}

#films .casedate {
	border-top: none;
	display: none;
}

#demo {
	position: absolute;
	text-transform: uppercase;
	margin-left: 80px;
	margin-top: 123px;
	font-size: 24px;
	font-weight: bold;
}

#commercials #demo {
	margin-left: 115px;
	margin-top: 35px;
}

.casedate:hover #demo {
	display: block;
}

.casedate:hover {
	color: #1fda00;
	border-top: none;
}

#container .case  h1 {
	display: block;
	font-size: 14px;
	margin: 10px 0 0;
	text-align: left;
}

.more {
	margin: 10px 0;
	text-align: center;
}

/* TV & Commercials */
#commercials .case, #commercials .casedate {
	margin-bottom: 30px;
	border-top: none;
}

#commercials .case:hover {
	border-top: none;
}


#commercials .credits_infos {
	float: left;
	width: 100%;
}

#commercials .credits_infos {
	color: #999;
	font-size: 14px;
	font-weight: bold;
	margin: 0;
	text-align: left;
}

.no-touch #commercials .credits_wrapper {
	bottom: 40px;
	height: 150px;
	left: 0;
	overflow: hidden;
	pointer-events: none;
	position: absolute;
	width: 100%;	
}

.no-touch #commercials .credits_wrapper > div {
	background: #1fda00;
	bottom: -150px;
	overflow: hidden;
	padding: 12px 10px;
	position: absolute;
	width: 100%;
	transition: bottom 0.3s;
	-webkit-transition: bottom 0.3s;
}

.no-touch #commercials .case:hover .credits_wrapper > div {
	bottom: 0;
}

.no-touch #commercials .credits_infos {
	color: #000;
}


/* Design */
#design .case {
	width: 300px;
	margin: 0 20px 20px 0;
	border-top: 1px solid black;
}

#design .case .case_img img {
	border-top: 1px solid black;
}

#design .case:hover .case_img img {
	border-top: 1px solid white; 
}

#design .casedate, #design .casedate:hover {
	border-top: none;
}

#design .casedate a {
	padding-bottom: 64%;
}
#commercials .casedate a {
	padding-bottom: 64%;
}

#design .case .case_infos h1 {
	font-size: 18px;
	margin: 5px 0 0 0;
	float: left;
}

#design .case .case_infos a {
	display: block;
	float: left;
}
.date_case_reel{
	line-height: 200px;
}
@media screen and (max-width: 640px) {

	.case {
		width: 49%;
	}

	#commercials .case, #design .case {
		width: 100%;
	}
}

@media screen and (max-width: 960px) {
	.case:nth-child(2n), #commercials .case:nth-child(2n), #design .case:nth-child(2n) {
		margin-right: 0;
	}

	.case:nth-child(2n+1), #commercials .case:nth-child(2n+1), #design .case:nth-child(2n+1) {
		clear: left;
	}
}

@media screen and (min-width:960px) and (max-width: 1480px) {
	#films {
		width:940px;
	}

	.case {
		width: 310px;
	}

	.case:nth-child(3n), #commercials .case:nth-child(3n), #design .case:nth-child(3n) {
		margin-right: 0;
	}

	.case:nth-child(3n+1), #commercials .case:nth-child(3n+1), #design .case:nth-child(3n+1) {
		clear: left;
	}
}

@media screen and (min-width: 1480px) {
	body #films {
		width: 1470px;
	}

	.case, .casedate {
		width: 284px;
	}

	.case:nth-child(5n), #commercials .case:nth-child(5n), #design .case:nth-child(5n) {
		margin-right: 0;
	}

	.case:nth-child(5n+1), #commercials .case:nth-child(5n+1), #design .case:nth-child(5n+1) {
		clear: left;
	}

	#design .case {
		width: 272px;
	}

	body #nav_years{
		width: 1470px;
	}
	body #nav_years_container{
		width: 1410px;
	}
}

/* SLIDES */

.diaporama{
	position: relative;
}

.slides_container_home{
	position: relative;
}
#push_slides, .slides_container .slidesjs-container, .slides_container .slidesjs-control{
	height: 100% !important;
}
#push_slides {
    display: none;
}

#slides .slidesjs-navigation {
    margin-top: 3px;
}
.slidesjs-pagination {
	margin-top: 10px;
    position: absolute;
    right: 0;
    z-index: 990;
}
.slidesjs-pagination li {
    float: left;
    margin: 0 1px;
}
.slidesjs-pagination li a {
    background-image: url("../img/pagination.png");
    background-position: 0 0;
    display: block;
    float: left;
    height: 0;
    overflow: hidden;
    padding-top: 13px;
    width: 13px;
}
.slidesjs-pagination li a.active, .slidesjs-pagination li a.active:hover {
    background-position: 0 -13px;
}
.slidesjs-pagination li a:hover {
    background-position: 0 -26px;
}
#slides a:link, #slides a:visited {
    color: #333333;
}
#slides a:hover, #slides a:active {
    color: #9E2020;
}

@media screen and (min-width: 1480px) {
	body .slides_container{
		height: 668px;
	}
	body .slides_container, body .home .slides_container_home, body .home #push_slides_home, body .home .slidesjs-container, body .home .slidesjs-control, body #intro_tax .diaporama img{
		height: 668px !important;
	}
	body .home .slidesjs-slide .wrapper_bandeau{
		height: 668px;
	}
	body .slides_container_home ul li:hover .bandeau{
		left: 0 !important;
		margin-left: 0;
		margin-top: -50px;
	}
	body #main .search ul li{
		width: 355px;
	}
}


/* HOME */

.rub_title{
	text-align: center;
	font-weight: bold;
}

#push{
	position: relative;
	width: 100%;
	height: 100%;
}

#push .infos{
	z-index: 2;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -180px;
	margin-top: -16px;
}
#push .infos h1{
	margin:0;
}

#push img {
	width: 100%;
	z-index: 1;
}
.slides_container{
	height: 146px;
	position: relative;
}
.slides_container_home .bandeau{
	opacity: 0;
	text-transform: uppercase;
}
.slides_container .bandeau h1{
	margin: 0 !important;
	font-size: 42px;
}

body #container .slides_container_home ul li:hover .wrapper_bandeau .bandeau h1{
	margin-top: 0;
}
.credit_home{
	float: left;
	width: 100%;
	font-size: 16px;
}
.credit_title{
	font-weight: bold;
	font-size: 13px;
	font-family: "Brandon Grot W01 Bold";
}

.slides_container ul li .Blanc{
	color: white;
}
.slides_container ul li .Noir{
	color: black;
}
.latest_title{
	float: left;
	font-size: 22px;
	text-align: center;
	width: 100%;
	font-weight: bold;
}
#latest{
	overflow: hidden;
}
#latest,#news {
	position: relative;
}
#latest .content{
	border-top: 1px #a3a3a3 solid;
	width: 100%;
}
#latest  #wrapper_latest{
	display: none;
	position: absolute;
	z-index: 2;
	font-size: 12px;
	text-transform: uppercase;
}
#latest .item:hover #wrapper_latest{
	display: block;
	left: 50%;
	top: 50%;
	margin-left: -125px;
	margin-top: -38px;
	width: 250px;
	text-align: center;
}
#latest .item{
	position: relative;
}
#latest .item,#news .item{
	float: left;
	margin-right: 10px;
	width: 88px;
}
#latest a:last-child .item, #news .item:last-child{
	margin-right: 0;
}

#latest .item img,#news .item img{
	width: 100%;
}
#latest .item:hover img{
	background-color: #000;
	opacity: 0.2;
}
#latest #wrapper_latest .bandeau.Noir{
	color:black;
}
#latest #wrapper_latest .bandeau.Blanc{
	color: white;
}


#news .item h3{
	border-bottom: 1px solid black;
	/*font-size: 12px;*/
	line-height: 16px;
}
/*#news .item:hover h3{
	border-bottom: 1px solid white;
}*/

	
@media screen and (max-width: 959px) {
	.bandeau {
		left: 0%!important;
		/*top: 40%!important;*/
	}
}


@media screen and (min-width: 1480px) {
	body #latest .content, body #news .content{
		width: 1470px;
	}
	body #latest .item, body #news .item{
		margin-right:10px;
		width: 480px;
	}
	body #push .infos{
		margin-left: -227px;
		margin-top: -19px;
	}
}


#latest .item.last,#news .item.last{
	margin-right:0;
}

#news .date{
	color: #616161;
	font-family:"Brandon Grot W01 Medium";
	font-size: 10px;
	height: 10px;
	margin-top: -30px;
	margin-bottom: 20px;
	text-transform: uppercase;
}
#news .readmore:hover{
	color:#1fda00;
}
#news .text{
	color: #b1b1b1;
	font-size: 12px;
}

#news .text *:not(a) {
	color: #b1b1b1!important;
}

#nav_news{
	position: absolute;

	top: 100%;
	right: 0;
}

#nav_news div{
	cursor: pointer;
	float: right;
	margin-left: 10px;
	visibility: visible;
}


#nav_news .off{
	visibility: hidden;
}


/* BTN TAX REBATES */
.btn_tax{
	width: 100%;
	height: 70px;
	display: block;
	border: 1px solid white;
	text-align: center;
	line-height: 70px;
	margin-top: 30px;
}

.btn_tax:hover {
	color: black;
	background-color: white;
}