/*
Theme Name: Framevox
Author: Sacha Béraud
Template: themedebase
*/
    @font-face {
font-family: 'wigrum-light';
    src: url('framework/fonts/wigrum-light/WigrumWeb-LightItalic.eot');
    src: url('framework/fonts/wigrum-light/WigrumWeb-LightItalic.eot?#iefix') format('embedded-opentype'),
         url('framework/fonts/wigrum-light/wigrumweb-light.woff') format('woff');
}

/*GENERAL*/
html, body {
	height: 100%;
	font-size: 14px;
	overflow: visible !important;
}
body {
	color:#333;
	font-family: 'wigrum-light', sans-serif;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
i, cite, em, var, address, dfn {
    font-style: normal;
}
main{ 
	position: relative;
	}
@media screen and (min-width:480px) {
	body {
		font-size: 110%;
	}
}
@media screen and (min-width:992px) {
	body {
		font-size: 120%;
	}
}
	/*REFONT BOOTSTRAP*/
	.modal-content {
		border-radius: 0;
	}
	ul li {
		list-style-type: square;
	}
/*FONTS*/
p {
	text-align: justify;
}
p a {
    color: inherit;
    position: relative;
}
p a {
    text-decoration: underline;
}
p a:hover {
	color: inherit;
	text-decoration:none;
}

h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 {

}
h1, .h1 {
	font-size: 56px;
    line-height: 64px;
}
h1 small {
	font-size:14px;
	color: #fff;
}
h2, .h2 {
  	font-size: 48px;
    line-height: 56px;
}
h3, .h3 {
    line-height: 40px;
    font-size: 34px;
}
@media screen and (max-width:1199px) {
	h1, .h1 {
		font-size: 56px;
		line-height: 64px;
	}
	h2, .h2 {
    	font-size: 38px;
    	line-height: 46px;
	}
}
@media screen and (max-width:991px) {
	h2, .h2 {
    	font-size: 30px;
    	line-height: 38px;
	}
}
@media screen and (max-width:768px) {
	h1, .h1 {
		font-size: 36px;
		line-height: 44px;
		margin-bottom: 0;
	}
	h2, .h2 {
    	font-size: 21px;
    	line-height: 30px;
	}
	h3, .h3 {
		font-size: 18px;
		line-height: 22px;
		margin-top: 5px;
	}
}
.red {color:#DC0003 !important;}
/*MENU #menu-content ul*/
.menu-item-page-209, .menu-item-page-624 {color:#DC0003 !important;}
#target-for-menu {
	position: absolute;
	height:100%;
	width:1px;
	top:0;
	left: 0;
	z-index: -1;
	pointer-events: none;
}

#main-header {
    width: 100%;
	border-bottom: 1px solid #000;
    padding: 0 15px;
	background-color: #fff;
	color: #000;
	padding-top: 1px;
	overflow: hidden;
	}
.skrollr-mobile #main-header {
	border-bottom: 1px solid #000 !important;
	background-color: #fff !important;
	color: #000 !important;
}
.page-id-209 #main-header, .page-id-624 #main-header {
	border-bottom: 1px solid #fff;
	background-color: #000;
	color: #fff;
}
.brand-menu {
	font-size: 20px;
	font-weight: 100;
	float: left;
	line-height: 40px;
}
.brand-menu a {
	color: inherit;
}
#menu-content {
	float: right;
}
#menu-content ul {
	margin: 0;
    height: 40px;
    display: inline-block;
}
.open #menu-content ul {
    height: auto;
	transition: all .3s ease-out
	}
#menu-content ul li a {
	color: inherit;
	padding: 0px 30px;
    line-height: 40px;
}
.lang-section {
    display: inline-block;
}
.lang-section a {
	display: block;
    width: 35px;
    text-align: center;
    color: inherit;
    border-left: 1px solid;
    height: 40px;
	padding-left: 15px;
	padding-top: 10px;
}
.lang-section a:hover {
	text-decoration: none;
}
@media screen and (max-width:991px) {
	
	#menu-content ul li a {
		padding: 0px 20px;
	}
	
}
#menu-content ul li a:hover, .brand-menu a:hover, .brand-menu a:focus {
	color: inherit;
	text-decoration: none;
}
@media screen and (max-width:767px) {
	#main-header {
		height: 40px;
	}
	#main-header.open {
		height: auto;
	}
	.open #menu-content ul {
		
	}
	#menu-content {
		float: none;
	}
	.lang-section {
		display: block;
	}
	.lang-section a {
		border: none;
		text-align: left;
		padding-left: 0;
	}
	#menu-content ul li a:focus {
		outline-width: 1px !important;
		outline-style: solid !important;
		outline-offset: 8px !important;
		outline-color: inherit !important;
		text-decoration: none;
	}
}
.menu-btn {
	position: absolute;
    top: 0;
    right: 0;
    background-color: transparent;
    border: 0;
    line-height: 41px;
    padding: 0 15px;
	display:none;
}
.menu-btn:focus {
	outline:0;
}
.menu-btn.open {
	outline-width: 1px !important;
	outline-style: solid !important;
	outline-offset: -5px !important;
	outline-color: inherit !important;
}

@media screen and (max-width:767px) {
	.menu-btn {
		display:block;
	}
}

/*CORRECTIF WORPRESS*/
.admin-bar #target-for-menu {
	top: 46px;
}
@media screen and (min-width:783px) {
	.admin-bar #target-for-menu {
		top: 32px;
	}
	
}
#wp-admin-bar-my-account {
	max-width: 120px;
    overflow: hidden;
}
@media screen and (min-width:991px) {
	#wp-admin-bar-my-account {
			max-width: 100%;
		}
}

/*END CORRECTIF WORPRESS*/
@media screen and (max-width:767px) {
	.brand-menu {
		float: none;
	}
	#menu-content ul {
		height:0;
		float: none;
	}
	#menu-content ul li {
		display: block;
		width: 100%;
		font-size: 18px;
	}
	#menu-content ul li a, #menu-content ul  {
		padding: 0;
	}
}

/*BTN*/
	.btn-transparent {
		background-color: transparent;
		line-height: 21px;
		padding: 3px 8px 2px 9px;
	}
	.btn-play {
		border:none;
		padding:0;
	}
	.btn-play .fa {
		padding: 10px 10px 10px 13px;
		border: none;
   	 	border: 1px solid rgba(255,255,255,0.5);
   	 	margin-right: 9px;
    	border-radius: 20px;
		transition: all .3s linear;
	}
	.btn-play:hover .fa{
   	 	border: 1px solid rgba(255,255,255,.5);
    	border-radius: 0px;
		background-color: #fff;
		color:#000;
	}
	.btn-play:focus .fa {
		transition: none;
   	 	border: 1px solid rgba(255,255,255,.5);
    	border-radius: 0px;
		background-color: #000;
		color:#fff;
	}
/*INTRO LOGO*/
@media screen and (max-width:767px) {
	.home .wp-image-32 {
		margin-left: calc(-23 / 100 * (77.777vw - 30px)) !important;
		width: 100%;
		}
	}
/*FOOTER*/
#main-footer {
	padding-bottom: 20px;
    border-top: 1px solid #eaeaea;
    margin-top: 100px;
	background-color: #fff;
	padding-top: 50px;
}
.textfooter {
	padding-top: 20px;
	border-top: 1px solid #eaeaea;
	margin-top: 40px;
}
.footer_left {
	margin-bottom: 30px;
}
.footer_left img {
	max-width: 330px !important;
}
@media screen and (max-width: 991px) {
	.footer_right {
		display: none;
	}
}
@media screen and (max-width: 768px) {
	.footer_left img {
		max-width: 81% !important;
		
	}
}
.network {
	font-size: 41px;
}
.network li {
	margin: 5px;
}
.network li a {
	color: #000;
}
.network li a:hover, .network li a:focus {
	text-decoration: none;
}
/*INTRO VIDEO*/
.background-slide {
	width:100%;
  	height:100vh;
	overflow: hidden;
	position: relative;
}
#intro_background::-webkit-media-controls {
    display:none !important;
  }
.full-jumbotron-slider {
	width:100%;
	height:100%;
	position: relative;
	background-color: #000;
	overflow: hidden;
	margin-bottom: 50px;
}
#intro_background {
	width:100%;
	height:100%;
	background-color: #000;
  	object-fit: cover;
}
.black-filter {
	width:100%;
	height: 100%;
	background-color:#000;
	opacity:0.47;
	position: absolute;
	top: 0;
	left: 0;
}
.content-intro-infos {
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	left: 0;
	width:100%;
	color:#fff;
}

/*MODAL*/
.modal-video {
	overflow: hidden !important;
}
.modal-video .modal-content {
	background-color: #000;
}
.modal-video .modal-content iframe {
	width:100%;
	height:100%;
}
.modal-video .modal-content p {
	margin:0;
}
.modal-video .modal-dialog {
	width: calc(100% - 20px);
    height: calc((100vw - 20px) * 1080 / 1920);
}
@media screen and (min-width:768px) {
	.modal-video .modal-dialog {
		height:404px;
		width: 717px;
	}
	.modal-dialog {
		margin:0;
	}
}
@media screen and (min-width:992px)  {
	.modal-video .modal-dialog {		
		height:530px;
		width:940px;
	}
}
@media screen and (min-width:1200px) {
	.modal-video .modal-dialog {
		width:1170px;
		height:660px;
		margin: auto;
	}
}
.modal.fade .modal-dialog {
    -webkit-transform: translate(-50%, -25%);
    -ms-transform: translate(-50%, -25%);
    -o-transform: translate(-50%, -25%);
    transform: translate(-50%, -25%);
    -webkit-transition: -webkit-transform 0.3s ease-out;
    -o-transition: -o-transform 0.3s ease-out;
    transition: transform 0.3s ease-out;
	position: absolute;
	top: 50%;	
	left: calc(50% - 10px);
}
.modal.in .modal-dialog {
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
@media (min-width: 768px) {
	.modal-dialog {
		width: auto;
		margin: 30px auto;
	}
}
.modal-video .modal-content, .modal-video .modal-content * {
	width:100%;
	height:100%;
}
.modal .close {
	position: absolute;
    top: -20px;
    color: #eaeaea;
    right: 0;
    opacity: 1;
    font-weight: 100;
    font-size: 14px;
	padding: 1px 2px 0px 3px;
	line-height: 13px;
}
.modal .close:focus {
	outline-style: dotted;
    outline-color: #fff;
    outline-width: 1px;
    outline-offset: 3px;    
}
.play:before {
	display:inline-block;
	font-size: 18px;
	content: "\f0001";
	margin-right: 10px;
	padding: 10px;
	border: 1px solid rgba(255,255,255,0.5);
	line-height: 16px;
	width: 40px;
	text-align: center;
}
#close_trailer {
	position: absolute;
	top: -20px;
	right: 0;
	padding: 15px;
	background: transparent;
	border:0;
	color:#fff;
}
/*SCROLL DOWN*/
.scroll-down {
	position: absolute;
	bottom: 0px;
	left: 50%;
	transform: translate(-50%, 0%);
	width: 32px;
    height: 32px;
	border-radius: 0;
	opacity: .5;
}
.scroll-down:after {
	content: "scroll";
	display:block;
	position:absolute;
	color:#fff;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -26px);
	font-size: 12px;
}

.scroll-down:before {
  	content: '';
	position: absolute;
	top: 6px;
	left: 50%;
	transform: translate(-50%,0);
	width: 2px;
	height: 9px;
	background-color: white;
	animation: scrollDown 2s infinite;
	opacity: .5;
}

@keyframes scrollDown {
  0% {
    opacity: 0;
    transform: translate(-50%, 0);
  }
  
  30% {
    opacity: .5;
  }
  
  100% {
    opacity: 0;
    transform: translate(-50%, 16px);
  }
}
/*BOTTOM RIGHT INFO*/
.real_main_info {
    position: absolute;
    bottom: 0;
    right: 15px;
	color: #fff;
	text-shadow: 0 3px 4px rgba(0,0,0,0.16);
	text-align:right;
	}
.real_main_info .text {
	position:relative;
	z-index: 2;
}
.real_main_info p {
	text-align: right;
}
@media screen and (max-width:991px) {
	.real_main_info {
		font-size: 12px;
	}
}
@media screen and (max-width:768px) {
	.real_main_info {
		position: relative;
		right: 0;
		padding: 0 15px;
		color: #000;
		text-shadow: none;
		text-align: left;
		margin-top: 20px;
	}
	.full-jumbotron-slider {
		background-color: #fff;
	}
}
.triangle {
	position: absolute;
    bottom: 0;
    right: -15px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 300px 550px;
    border-color: transparent transparent #000 transparent;
}
/*COLUMN TEXT MEDIA*/
.column_text_medias {
	position: relative;
	padding: 50px 0;
}
/*MEDIAS*/
@media screen and (min-width: 992px) {
		.media_column {
			
		}
	}
	@media screen and (min-width: 992px) {
		.column_text_medias .container-fluid {
			position: absolute;
			top: 130px;
			right: 0;
			width: 100%;
			z-index: -1;
			padding: 0;
		}
	}
	.column_text_medias .container-fluid .col-xs-12 {
		padding:0;
	}
	/*IMG*/
	.column_text_medias .container-fluid .image {
		padding-bottom: 30px;
	}
	/*QUOTES*/
	.quotes {
		padding: 0 30px;
	}
	.quotes .quote-content {
	}
	.quote-open:before {
		content:"“";
		font-size: 48px;
	}
	.quote-close:before {
		content:"”";
		font-size: 48px;
	}
/*COLUMN TEXT*/
	/*SMALL SQUARE BEFORE*/
	.text_colum-text {
		position: relative;
		padding-top: 25px;
		padding-bottom: 50px;
		text-align: justify;
	}
	.text_colum-text .square {
		position: absolute;
		padding-top: 15px;
		background-color: transparent;
		text-align: left;
		display: inline-block;
		top: 10px;
		font-size: 14px;
	}
	.text_colum-text .square:before, .text_colum-text .square:after {
		content: "";
		width: 60px;
		height: 60px;
		position: absolute;
		z-index: -1;
	}
	.text_colum-text .square:before {
		border: 1px solid #ddd;
		top:0;
		left: -15px;
	}
	.text_colum-text .square:after {
		background-color: #fff;
		top:10px;
		left: -5px;
	}
/*GRID VOD*/
.grid-VOD {
	background-color: #000;
}
.vod-el {
	position: relative;
	width: 100%;
    padding-top: 66%;
	background-size: cover;
	background-color: #000;
	color:#fff;
}
.video-el-container {
	padding: 0;
}
.vod-el-content {
	position: absolute;
	top:0;
	width: 100%;
	height: 100%;
	padding: 10px;
}
.vod-el-fade {
	position: absolute;
	top:0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.25);
}
.vod-el-title {
	font-size: 41px;
	margin-bottom: 0;
}
.vod-el-year, .vod-el-sub {
	font-size: 14px;
}
.vod-el-cat {
	position: absolute;
	bottom: 10px;
	right: 10px;
}
.vod-el-cat div {
	border: 1px solid #fff;
    display: inline-block;
    margin-left: 9px;
    font-size: 14px;
    padding: 4px 8px 2px 8px;
    border-radius: 17px;
	text-transform: lowercase;
}

.page-template-template-vod .full-jumbotron-slider {
	margin-bottom: 0;
}
.categories-VOD {
	background-color: #363636;
	color: #fff;
	padding: 25px 0;
}
.categories-VOD .cat-title, .categories-VOD select {
	display: inline-block;
}
.categories-VOD select {
    border: 1px solid #fff;
    background-color: #363636;
    color: #fff;
    height: 40px;
	margin: 5px 3px;
	box-shadow: 0 0 0 0 transparent;
}
.btn-reboot {
	border: 1px solid #fff;
    background-color: #363636;
    color: #fff;
    height: 40px;
	margin: 5px 3px;
    font-size: 18px;
}
.cat-title {
	height: 40px;
    margin: 5px;
	line-height: 40px;
	font-size: 20px;
}
.cat-select-vod {
	float: right;
}
@media screen and (max-width: 1199px) {
	.cat-select, .btn-reboot  {
		font-size: 14px;
	}
}
@media screen and (max-width: 967px) {
	.cat-title {
		display: none !important;
	}
	.cat-select-vod {
		float: left;
	}
}
@media screen and (max-width: 480px) {
	.cat-select, .btn-reboot  {
		font-size: 12px;
	}
}

.clearfix-VOD {
	background-color: #000;
    border-bottom: 1px solid #363636;
}
.page-template-template-vod #main-footer {
	margin: 0;
	background-color: #000;
	color: #fff;
	border-top: #363636;
}
.page-template-template-vod footer {
	margin: 0;
}
.film-VOD iframe {
	width: 100%;
	height: 392px;
    display: block;
	}
@media screen and (max-width: 1639px) {
	.film-VOD iframe {
		height: 312px;
	}
}
@media screen and (max-width: 1199px) {
	.film-VOD iframe {
		height: 264px;
	}
}
@media screen and (max-width: 991px) {
	.film-VOD iframe {
		height: 430px;
	}
}
@media screen and (max-width: 767px) {
	.film-VOD iframe {
		height: 390px;
	}
}
@media screen and (max-width: 479px) {
	.film-VOD iframe {
		height: 250px;
	}
}
.projection ul {
	font-size: 13px;
    padding-left: 22px;
} 
a .vod-el-content * {
	color: #fff;
}
.vod_link:hover .red {
	background-color: #DC0003;
	color:#fff !important;
}
/*SINGLE VOD*/
.single-vod h1 {
	margin-bottom: 12px;
}
.single-vod .vod-el-cat {
	position: relative;
	margin-bottom: 15px;
}