/*FONTS*/
@font-face {font-family: 'bebas_neueregular';src: url('fonts/BebasNeue-webfont.eot');src: url('fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),url('fonts/BebasNeue-webfont.woff') format('woff'),url('fonts/BebasNeue-webfont.ttf') format('truetype'),url('fonts/BebasNeue-webfont.svg#bebas_neueregular') format('svg');font-weight: normal;font-style: normal;}

h2,h3,#btn_video,.eco_text{font-family: "bebas_neueregular",Helvetica;font-weight: normal;}


/*COLORS*/
	/*WHITE*/
h3,#intro p,.eco_text,.contact_phrase{color:#FFF;}
	/*LIGHT GREY*/
.title_phrase,#presentation p,.eco_block>p,#footer a,#footer ul li{color:#777;}


/*GENERAL*/
*{margin: 0;padding: 0;border: none;}
body{background: #E6E6E6;}
h2{text-align: center;font-size: 50px;text-transform: uppercase;color:#222;}
h3{text-align: center;font-size: 46px;}
p,.contact_phrase{font-family: "Open sans", Arial;font-size: 14px;}
strong{color: #FFAD23;font-weight: 400;}
.title_phrase{text-align: center;}
.diagonal_bg{position: relative;z-index:-1;width: 100%;height:100%;background-color: #FFF;}
#container{max-width: 1440px;margin: 0 auto;}
#presentation_top,#presentation_bottom,#map_top,#map_bottom,#eco_top,#contact_top,#contact_bottom{max-width:1440px;width: 100%;height: 60px;background-repeat: no-repeat;}

/*VIDEO*/
#video_box{position:fixed;z-index: 3;top: 0;display: none;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.8);}
#video_wrapper{position: absolute; left:50%;top:120px;width: 853px;height: 480px; margin-left: -427px;}
#close_video{width: 15px;height: 15px;background: url(images/close.png);float: right;margin: 30px 30px 0 0;cursor: pointer;-webkit-transition: opacity 0.2s ease-in-out;-moz-transition: opacity 0.2s ease-in-out;-ms-transition: opacity 0.2s ease-in-out;-o-transition: opacity 0.2s ease-in-out;transition: opacity 0.2s ease-in-out;}
#close_video:hover{opacity:0.6;}

/*INTRODUCTION*/
#background{position: fixed;width:1440px;height:720px;background: url(images/background.jpg) no-repeat white;top:0;left:50%;z-index: -1;margin-left: -720px;}

#logo{width:250px;height:90px;background:url(images/logo.png);margin: 0 auto 50px auto;}

#intro{position:relative;height:560px;text-align: center;padding-top: 100px;}
#intro p{max-width: 700px;margin: 0 auto;font-weight: 600;line-height: 24px;}
.intro_elements{display: none;}

#btn_retour{position:absolute;left:0;top:300px;width:66px;height:135px;background: url(images/btn_retour.png);/*float: left;*/-webkit-transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out;-ms-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out;}
#btn_retour:hover{opacity: 0.8;}

#btn_video{position: relative;display: inline-block;width: 195px;height: 48px;margin: 50px auto 300px auto;cursor: pointer;display: none;}
#btn_video div{position: absolute;left:0;width:195px;height:48px;-webkit-transition: opacity 0.2s ease-in-out;-moz-transition: opacity 0.2s ease-in-out;-ms-transition: opacity 0.2s ease-in-out;-o-transition: opacity 0.2s ease-in-out;transition: opacity 0.2s ease-in-out;}


.video_top:hover{opacity:0;}


/*PRESENTATION*/
#presentation_top{background: url(images/top-white.png);}

#presentation{background: #FFF;padding-bottom: 100px;}
#presentation h2{padding: 65px 0 100px 0;}
#presentation p{display:inline-block;max-width: 595px;vertical-align: top;margin: 0 60px 0 18%;text-align: left;}

#thumb_wrapper{display: inline-block;width: 520px;height: 233px;overflow: hidden;float: right;}
#thumbs{display: inline-block;width: 946px;padding-left: 190px;}

.vignette{display:inline-block;width: 233px;height: 233px;}
#vignette_1{background: url(images/vignette_1.png);}
#vignette_2{background: url(images/vignette_2.png);}
#vignette_3{background: url(images/vignette_3.png);}
#vignette_4{background: url(images/vignette_4.png);}


/*MAP*/
#map_top{background: url(images/top-grey.png) white;}
#map_bottom{position:absolute;z-index: 2;background: url(images/bottom-grey.png);}

#map{padding: 60px 0 0 0;background: #F8F8F8;}
#map p{padding: 37px 0 55px 0;}

#map-canvas{max-width: 1440px;height: 420px;}


/*ECONOMY*/
#eco_top{background: url(images/top-white.png);position: absolute;z-index: 2;margin-top: 360px;}

#economy{padding-top: 90px;background: #FFF;}

.eco_phrase{margin: 37px 0 90px 0;}

#eco_block_container{text-align: center;}
.eco_block{display: inline-block;width: 290px;vertical-align: top;zoom: 1;*display: inline;}
.eco_block>p{margin: 40px 0 50px;line-height: 28px;}

.centre_block{margin: 0 80px 0 80px;}

#eco_1,#eco_2,#eco_3{width: 290px;height: 246px;}
#eco_1{background: url(images/economie_agroalimentaire.jpg);}
#eco_2{background: url(images/economie_luxe.jpg);}
#eco_3{background: url(images/economie_technologies.jpg);}

.eco_text{text-transform: uppercase;cursor: default;margin:0 auto;-webkit-transition: all 0.6s ease-in-out;-moz-transition: all 0.6s ease-in-out;-ms-transition: all 0.6s ease-in-out;-o-transition: all 0.6s ease-in-out;transition: all 0.6s ease-in-out;}
#eco_1 div{padding: 140px 0;}
#eco_2 div{padding: 120px 0;}
#eco_3 div{padding: 136px 0;}
#eco_1 .eco_text{width:144px;font-size: 24px;}
#eco_1 .eco_text:hover{opacity:0;}
#eco_2 .eco_text{font-size: 54px;}
#eco_2 .eco_text:hover{opacity:0;}
#eco_3 .eco_text{width:128px;font-size: 29px;}
#eco_3 .eco_text:hover{opacity:0;}

/*CONTACT*/
#contact_top{background: url(images/top-green.png) white;}
#contact_bottom{background: url(images/bottom-green.png) white;}

#contact{background: #88D73A;padding: 134px 0 120px 0;text-align: center;}

.contact_phrase{line-height: 28px;margin: 32px 0 37px 0;}

#mail{position: relative;display: inline-block;width: 75px;height: 48px;cursor: pointer;}
#mail div{position: absolute;left:0;width:75px;height:48px;-webkit-transition: opacity 0.2s ease-in-out;-moz-transition: opacity 0.2s ease-in-out;-ms-transition: opacity 0.2s ease-in-out;-o-transition: opacity 0.2s ease-in-out;transition: opacity 0.2s ease-in-out;}
#mail .mail_top:hover {opacity:0;}
.mail_hover{background: url(images/mail_hover.png);}
.mail_top{background: url(images/mail.png);}


/*FOOTER*/
#footer{background: #FFF;}
#footer ul{width: 315px;margin: 0 auto;text-align: center;padding:0 0 40px 15px;}
#footer ul li:first-child{list-style: none;padding-left:20px;}
#footer ul li{margin-right: 26px;float: left;}
#footer a{font-family: "Open sans",Arial;font-size: 12px;font-weight: 700;text-decoration: none;-webkit-transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out;-ms-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out;}
#footer a:hover{color: #333;}


/*MEDIA QUERIES*/
@media screen and (max-width: 1455px){
	#presentation p{margin: 0 0 0 17%}
	#thumb_wrapper{width:35%;}
}

@media screen and (max-width: 1340px){
	#presentation p{margin: 0 0 0 10%}
}

@media screen and (max-width: 1160px){
	#presentation p{margin: 0 0 0 6%}
}

@media screen and (max-width: 1120px){
	#presentation{text-align: center;}
	#presentation p{text-align: center;margin:0 25px;}
	#thumb_wrapper{width:470px;float: none;margin-top: 60px;}
	#thumbs{padding-left: 380px;}
}

@media screen and (max-width: 1000px){
	#presentation p{margin:0;}
}

@media screen and (max-width: 853px){
	#video_wrapper{top:100px;width: 640px;height: 360px; margin-left: -320px;}
}

@media screen and (max-width: 640px){
	#video_wrapper{top:100px;width: 560px;height: 315px; margin-left: -280px;}
}

@media screen and (max-width: 560px){
	#video_wrapper{top:80px;width: 448px;height: 252px; margin-left: -224px;}
}

@media screen and (max-width: 470px){
	#thumb_wrapper{width:100%;overflow:visible;}
	#thumbs{width: 100%;padding: 0;margin:0 !important;}
	#video_wrapper{top:60px;width: 320px;height: 180px; margin-left: -160px;}
}

@media screen and (max-width: 470px){
	#presentation p{margin: 0 auto;text-align: center;}
	.centre_block{margin: 0;}
}

/*RETINA*/

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
	#close_video{background: url(images/close@2x.png);background-size: 15px 15px;}
    #background{background: url(images/background@2x.jpg); background-size: 1440px 720px;}
    #logo{background:url(images/logo@2x.png); background-size: 250px 90px;}
    #btn_icon{background: url(images/btn_play@2x.png); background-size: 27px 27px;}
    #presentation_top{background: url(images/top-white@2x.png); background-size: 1440px 60px;}
    #vignette_1{background: url(images/vignette_1@2x.png);background-size: 233px 233px;}
	#vignette_2{background: url(images/vignette_2@2x.png);background-size: 233px 233px;}
	#vignette_3{background: url(images/vignette_3@2x.png);background-size: 233px 233px;}
	#vignette_4{background: url(images/vignette_4@2x.png);background-size: 233px 233px;}
	#map_top{background: url(images/top-grey@2x.png); background-size: 1440px 60px;}
	#map_bottom{background: url(images/bottom-grey@2x.png); background-size: 1440px 60px;}
	#eco_top{background: url(images/top-white@2x.png); background-size: 1440px 60px;}
	#eco_1{background: url(images/economie_agroalimentaire@2x.jpg); background-size: 290px 246px;}
	#eco_2{background: url(images/economie_luxe@2x.jpg); background-size: 290px 246px;}
	#eco_3{background: url(images/economie_technologies@2x.jpg); background-size: 290px 246px;}
	#contact_top{background: url(images/top-green@2x.png); background-size: 1440px 60px;}
	#contact_bottom{background: url(images/bottom-green@2x.png); background-size: 1440px 60px;}
	.mail_hover{background: url(images/mail_hover@2x.png);background-size: 75px 48px;}
	.mail_top{background: url(images/mail@2x.png);background-size: 75px 48px;}
}