@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.woff2') format('woff2'),
         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;

}

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

}

@font-face {
    font-family: 'robotoregular';
    src: url('fonts/roboto-regular-webfont.eot');
    src: url('fonts/roboto-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/roboto-regular-webfont.woff2') format('woff2'),
         url('fonts/roboto-regular-webfont.woff') format('woff'),
         url('fonts/roboto-regular-webfont.ttf') format('truetype'),
         url('fonts/roboto-regular-webfont.svg#robotoregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'geosanslightregular';
    src: url('fonts/geosanslight-webfont.woff2') format('woff2'),
         url('fonts/geosanslight-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body, html {
	padding:0;
	margin:0;
	background: #f6f6f6;
}

footer {
	padding:30px;
	background:#333;
	min-height:400px;
	text-align:center;
}

a { 
	text-decoration:none;
}

h1 {
	font-size:60px;
	margin-top:20px;
	color:#fafafa;
	font-family: 'bebas_neueregular';
}

.no-js #loader { display: none;  }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: url('../img/loader.gif') center no-repeat #fff;
}

.adresse_contact {
	width:40%;
	float:left;
}

.fields_contact {
	width:60%;
	float:left;
}

.social {
	margin:40px auto;
}

.social_videos {
	float:right;
}

.social_videos img {
	width:33px;
}

.arrow_left {
	max-width:9%;
	position:absolute;
	left:-100px;
	margin-top:350px;
	opacity:0.8;
	cursor:pointer;
}

.arrow_left:hover, .arrow_right:hover {
	opacity:1;
}

.arrow_right {
	max-width:9%;
	position:absolute;
	right:-100px;
	margin-top:350px;
	opacity:0.8;
	cursor:pointer;
}

#load_more1, #load_more2, #load_more3, #less1, #less2, #less3 {
	display:none;
}

#popup {
	display:none;
	position:fixed;
	width:100%;
	height:100%;
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin:0;
	padding:0;
	z-index: 100;
	background: rgba(255,255,255,0.8);
}

#popup_content {
	display:none;
	position:absolute;
	top:-1800px;
	padding:30px;
	background:#fafafa;
	width:70%;
	box-shadow: 0px 0px 5px #333;
	text-align:center;
	z-index: 500;
	left:50%;
	margin-left:-35%;
	transition: all 0.6s ease-in-out;
}

#popup_content h1 {
	font-family: 'bebas_neueregular';
	font-size:90px;
	margin: 80px auto;
	color:#333;
}

#popup_content p {
	font-family: 'geosanslightregular';
	font-size:30px;
	color:#000;
}

#popup_content h4 {
	font-family: 'bebas_neueregular';
	font-size:30px;
	color:#555;
	text-align:left;
	padding-left:30px;
}

#popup_contact h5 {
	font-family: 'bebas_neueregular';
	font-size:30px;
	color:#fafafa;
	text-align:left;
}

.more_docs {
	width:165px;
}

.more_corp {
	width:135px;
}

.more_fiction {
	width:110px;
}

.more_docs, .more_corp, .more_fiction {
	margin:30px auto;
	background: #424242;
	background-image: -webkit-linear-gradient(top, #424242, #000000);
	background-image: -moz-linear-gradient(top, #424242, #000000);
	background-image: -ms-linear-gradient(top, #424242, #000000);
	background-image: -o-linear-gradient(top, #424242, #000000);
	background-image: linear-gradient(to bottom, #424242, #000000);
	-webkit-border-radius: 3;
	-moz-border-radius: 3;
	border-radius: 3px;
	font-family: 'bebas_neueregular';
	color: #f6f6f6;
	font-size: 22px;
	padding: 10px 20px 10px 20px;
	text-decoration: none;
	cursor:pointer;
}

.more_docs:hover, .more_corp:hover, .more_fiction:hover {
  background: #595959;
  background-image: -webkit-linear-gradient(top, #595959, #2e2e2e);
  background-image: -moz-linear-gradient(top, #595959, #2e2e2e);
  background-image: -ms-linear-gradient(top, #595959, #2e2e2e);
  background-image: -o-linear-gradient(top, #595959, #2e2e2e);
  background-image: linear-gradient(to bottom, #595959, #2e2e2e);
  text-decoration: none;
}

.round {
    border: 5px solid #E60101;
    border-radius: 100px;
    box-shadow: 0 0 5px #000;
    height: 200px;
    margin: 20px auto;
    overflow: hidden;
    position: relative;
    transition: transform 0.5s ease-in-out 0s;
    width: 200px;
    z-index: 80;
}

.round img {
    bottom: 0;
    left: 0;
    margin: 0;
    min-height: 200px;
    position: absolute;
    right: 0;
    top: 0;
    width: 200px;
}

.portrait {
	text-align:center;
	width:50%;
	float:left;

}

.close {
	display:none;
	max-width:6%;
	position:absolute;
	right:30px;
	margin-top:80px;
	cursor: pointer;
}

.copyright {
	font-family: 'bebas_neueregular';
	color:#fafafa;
	font-size:30px;
}

.tv {
	text-align:center;
	margin:10px auto;
	clear:both;
	max-width:90%;
}

.boxtv {
	width:12.25%;
	height:100px;
	text-align:center;
	float:left;
	vertical-align: middle;
}

.align {
   	display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.boxtv img { 
	max-width:80%;
	vertical-align: middle;
	max-height:100%;
}
	

.clear {
	clear:both;
	width:100%;
}
	
	
.logo {
	width:900px;
	left:50%;
	margin-left:-450px;
	position:absolute;
	top:160px;
}

.portrait p {
	font-family: 'robotoregular';
}


/* ---- CONTAIN BOX ---- */

.container {
  max-width: 1024px;
  margin:40px auto;
  clear:both;
}

/* ---- BOXS ---- */

.box {
  float: left;
  width: 246px;
  height: 244px;
  margin: 5px;
  overflow:hidden;
  /* border-radius: 122px; */
 cursor: pointer;
}

.box:hover .legende {
	opacity:0.9;
}

.legende {
	color:#fff;
	font-family: 'bebas_neueregular';
	opacity:0;
	background:red;
	width:95%;
	height:100%;
	padding:10px;
	transition: opacity 0.3s ease-in-out;
	-moz-transition: opacity 0.3s ease-in-out;
	overflow:hidden;
}

.legende h3 {
	font-size:30px;
	margin-top:0px;
}

.legende span {
	font-size:20px;
}

.box img:hover {
	background:red;
}

.box img {
  min-width:115%;
  height:115%;
  margin-top:-270px;
  margin-left: -50px;
}


button { font-size: 20px; }

/**/


#accueil {
	background: transparent;
	-webkit-transition: background 0.6s ease-in-out;
    -moz-transition: background 0.6s ease-in-out;
    -o-transition: background 0.6s ease-in-out;
    transition: background 0.6s ease-in-out;
    width:100%;
    height:600px;
    overflow: hidden;
}

#reportages {
	background: #f6f6f6;
    width:100%;
    min-height:300px;
    padding-top:50px;
    position:relative;
    overflow:hidden;
    padding-bottom:50px;
}


#fiction {
	background: #E7E7E7;
    width:100%;
    min-height:300px;
    padding-top:50px;
    padding-bottom:50px;
}

#corporate {
	background: #CECECE;
    width:100%;
    min-height:300px;
    padding-top:50px;
    padding-bottom:100px;
}

.top {
    width:100%;
    position:relative;
    margin-top:-99px;
    overflow:hidden;
    height:99px;
}

.arrow {
    border:100px solid #f6f6f6;
    border-bottom:none;
    border-color:transparent #f6f6f6 transparent #f6f6f6;
    position:absolute;
    left:0;
    top:0;
    margin-left:-98px;
}

.arrow:before, .arrow:after {
    content:'';
    position:absolute;
    width:5000px;
    bottom:0;
    height:100px;
    background: #f6f6f6;
}
.arrow:before {
    right:99px;
}
.arrow:after {
    left:99px;
}
}

.top2 {
    width:100%;
    height:99px;
    position:relative;
    overflow:hidden;
    top:1009px;
}

.arrow2 {
    border:100px solid #E7E7E7;
    border-bottom:none;
    border-color:transparent #E7E7E7 transparent #E7E7E7;
    position:absolute;
    left:0;
    top:0;
}
.arrow2:before, .arrow2:after {
    content:'';
    position:absolute;
    width:5000px;
    bottom:0;
    height:100px;
    background: #E7E7E7;
}
.arrow2:before {
    right:99px;
}
.arrow2:after {
    left:99px;
}
}