/* HTML */

html
{
font-size: 62.5% !important;
overflow-y: scroll;
height: 100%;
}

/* Fonts */

@font-face
{
font-family: 'Roboto 700';
font-style: normal;
font-weight: 700;
src: url('/static/fonts/roboto-normal-700.woff2') format('woff2'), 
	 url('/static/fonts/roboto-normal-700.woff') format('woff'), 
	 url('/static/fonts/roboto-normal-700.ttf') format('ttf'), 
	 url('/static/fonts/roboto-normal-700.eot') format('eot'), 
	 url('/static/fonts/roboto-normal-700.svg') format('svg');
}

@font-face
{
font-family: 'Roboto 500';
font-style: normal;
font-weight: 500;
src: url('/static/fonts/roboto-normal-500.woff2') format('woff2'), 
	 url('/static/fonts/roboto-normal-500.woff') format('woff'), 
	 url('/static/fonts/roboto-normal-500.ttf') format('ttf'), 
	 url('/static/fonts/roboto-normal-500.eot') format('eot'), 
	 url('/static/fonts/roboto-normal-500.svg') format('svg');
}

@font-face
{
font-family: 'Roboto 400';
font-style: normal;
font-weight: 400;
src: url('/static/fonts/roboto-normal-400.woff2') format('woff2'), 
	 url('/static/fonts/roboto-normal-400.woff') format('woff'), 
	 url('/static/fonts/roboto-normal-400.ttf') format('ttf'), 
	 url('/static/fonts/roboto-normal-400.eot') format('eot'), 
	 url('/static/fonts/roboto-normal-400.svg') format('svg');
}

/* Global */

*
{
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
outline: none;
font-family: 'Roboto 400', Arial, Verdana, sans-serif;
}

body
{
font-family: 'Roboto 400', Arial, Verdana, sans-serif;
min-height: 100%;
display: flex;
flex-direction: column;
}

input
{
padding: 0;
line-height: 1;
border: 0;
border-radius: 0;
-webkit-appearance: none;
-moz-appearance: none;
}

#content
{
flex: 1 0 auto;
}

pre
{
white-space: pre-wrap;
font-size: 13px;
color: #666;
}

img
{
vertical-align: middle;
}

a
{
text-decoration: none;
color: #0177FF;
font-family: inherit;
font-weight: inherit;
}

.center
{
text-align: center;
}

/* Fill */

a.fill span.fill, ul.rows li a span
{
display: block;
position: absolute; 
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 99;
}

/* Pin */

div.pin
{
margin: 0 auto;
padding: 0 2rem;
}

/* No JS */

#nojs
{
background: #ff6868;
padding: 1.6rem 2rem;
margin: 6rem 0 -6rem 0;
text-align: center;
color: #111;
font-size: 1.4rem;
}

#nojs a
{
color: #111;
font-weight: 500;
font-family: 'Roboto 500', Arial, Verdana, sans-serif;
}

/* Header */

header
{
padding: 1rem 0;
border-bottom: 0.3rem solid #f2f2f2;
overflow: auto;
text-align: center;
box-shadow: 0 3px 4px 0px #f6f6f6;
background: #FFF;
z-index: 999;
position: absolute;
top: 0;
left: 0;
width: 100%;
}

/* Header - Logo */

.logo
{
float: left;
font-size: 1.6rem;
line-height: 3.2rem;
font-family: 'Roboto 700', Arial, Verdana, sans-serif;
color: #111;
text-transform: uppercase;
background: url('/static/images/site/logo.png') no-repeat 0 center;
background-size: 3.2rem;
padding-left: 4rem;
letter-spacing: -0.6px;
}

.logo-small
{
display: none;
}

/* Header - Search */

form.recherche-form
{
text-align: left;
display: inline-block;
background: #f9f9f9;
border-radius: 0.4rem;
border: 0.1rem solid #c9c9c9;
border-bottom-color: #d3d3d3;
box-shadow: 0 0 2px 1px #f2f2f2;
}

#recherche
{
width: calc(100% - 55rem);
max-width: 60rem;
}

#recherche-main
{
width: 100%;
margin-top: 1rem;
}

form.recherche-form input
{
height: 3rem;
}

form.recherche-form input.recherche
{
line-height: 3rem;
font-size: 1.5rem;
padding: 0 1rem;
width: calc(100% - 5rem);
border-radius: 0.4rem 0 0 0.4rem;
}

form.recherche-form input.submit
{
background: url('/static/images/site/search.png') no-repeat center center;
background-size: 14px;
text-indent: -9999em;
width: 5rem;
cursor: pointer;
opacity: 0.4;
transition: opacity 0.2s;
border-left: 0.2rem solid #ddd;
}

form.recherche-form input.submit:hover
{
opacity: 0.6;
}

form.recherche-form input.submit:active
{
opacity: 0.85;
}

/* Header - Account Links */

#account
{
float: right;
margin-left: 1.8rem;
}

#account li
{
display: inline-block;
}

#account li a
{
display: block;
font-size: 1.4rem;
font-family: 'Roboto 500', Arial, Verdana, sans-serif;
text-transform: uppercase;
padding: 0.8rem 0;
margin: 0 1.5rem;
color: #999;
transition: color 0.2s;
}

#account li a.signup
{
margin-right: 0;
color: #4bad00;
}

#account li a:hover
{
color: #666;
}

#account li a.signup:hover
{
color: #56c700;
}

/* Main */

main
{
display: block;
margin: 10rem auto 0 auto;
max-width: 119.8rem;
padding: 0 6rem;
}

/* Headings */

h1, h1 *
{
font-family: 'Roboto 700', Arial, Verdana, sans-serif;
font-weight: 700;
font-size: 2rem;
color: #111;
}

h1 span.site
{
display: block;
font-family: 'Roboto 500', Arial, Verdana, sans-serif;
font-weight: 500;
font-size: 1.6rem;
color: #333;
margin-top: 0.4rem;
text-transform: uppercase;
}

#h1
{
border-bottom: 0.1rem solid #dddde3;
padding-bottom: 1rem;
margin-bottom: 2rem;
}

#heading1
{
position: absolute;
left: 0;
right: 0;
top: 0;
margin: 0 auto;
z-index: 1;
}

h2
{
font-family: 'Roboto 500', Arial, Verdana, sans-serif;
font-weight: 500;
font-size: 1.6rem;
line-height: 2rem;
color: rgb(17,17,17);
margin: 1rem 0;
}

h2 *
{
font-family: inherit;
font-weight: inherit;
font-size: inherit;
color: inherit;
}

h2 strong
{
font-weight: 700;
font-family: 'Roboto 700', Arial, Verdana, sans-serif;
}

/* Footer */

footer
{
margin-top: 12rem;
overflow: auto;
}

footer li
{
display: inline-block;
}

/* Promo */

#promo
{
background: #FFF;
text-align: center;
padding: 0 2rem 1.2rem 2rem;
}

#promo img
{
width: 100%;
max-width: 64.7rem;
height: auto;
}

/* Bread */

#breadcrumbs
{
border-top: 0.1rem solid #d8d8d8;
border-bottom: 0.1rem solid #d4d4d4;
padding: 1rem 2rem;
font-size: 1.3rem;
text-align: center;
color: rgba(0,0,0,0.8);
background: #FFF;
}

#breadcrumbs li
{
margin: 0 0.6rem;
}

#breadcrumbs li.item
{
background: url('/static/images/site/arrow.png') no-repeat 0 center;
background-size: 1rem;
padding-left: 2.2rem;
}

footer #breadcrumbs li a
{
color: rgba(0,0,0,0.8);
}

#breadcrumbs a:hover
{
color: rgba(0,0,0,1);
}	

/* Pages */

#pages
{
padding: 1rem 2rem;
font-size: 1.2rem;
margin: 0 auto;
text-transform: uppercase;
text-align: center;
max-width: 8000rem;
background: #f3f3f3;
background: linear-gradient(#fafafa, #f1f1f1);
}

#pages li
{
display: inline-block;
vertical-align: top;
margin: 0.6rem 0.8rem;
}

#pages a
{
color: rgba(17,17,17,0.8);
font-family: 'Roboto 500', Arial, Verdana, sans-serif;
font-weight: 500;
}	

#pages a:hover
{
color: rgba(17,17,17,1);
}

/* Legal */

#legal
{
border-top: 0.1rem solid #d8d8d8;
background: #ddd;
background: linear-gradient(#eaeaea, #ddd);
padding: 1rem 2rem;
font-size: 1.2rem;
color: rgba(17,17,17,0.8);
}

#legal p:first-child
{
margin-bottom: 1.1rem;
}

#legal ul
{
float: right;
}

#legal li
{
display: inline-block;
margin-left: 1.4rem;
}

#legal a
{
display: block;
color: rgba(17,17,17,0.8);
}

#legal a:hover
{
color: rgba(17,17,17,1);
}

/* Section */

section
{
border-bottom: 0.1rem solid #ddd;
padding-bottom: 2rem;
}

section + section
{
margin-top: 2rem;
}

/* Info Pages */

#info h2
{
margin-top: 4rem;
font-size: 1.5rem;
line-height: 1.7;
max-width: 55rem;
color: #222;
}

#info p
{
margin-top: 2rem;
font-size: 1.5rem;
line-height: 1.7;
max-width: 55rem;
color: #272727;
}

#info p b
{
font-family: 'Roboto 500', Arial, Verdana, sans-serif;
font-weight: 500;
}

#info ol, #info ul
{
margin: 1rem 0 1rem 4rem;
}

#info li
{
font-size: 1.4rem;
line-height: 1.7;
color: #272727;
}

/* Table */

#info div.table
{
margin: 1rem 2rem;
}

#info div.table p
{
display: block;
font-size: 1.4rem;
margin: 0rem 0;
}

#info div.table p span
{
font-family: 'Roboto 500', Arial, Verdana, sans-serif;
display: inline-block;
width: 10rem;
}

/* Box */

div.box
{
position: relative;
display: inline-block;
vertical-align: top;
}

div.text-wrapper
{
width: 90%;
}

div.image-wrapper
{
color: #FFF;
width: 100%;
height: auto;
overflow: hidden;
background-size: cover;
position: relative;
margin: 0 auto;
z-index: 1;
background: #222;
background: linear-gradient(135deg, #222, #111);
}

div.image-wrapper img
{
display: inline-block;
max-width: 100%;
height: auto;
min-height: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 10;
}

div.box span.name
{
display: block;
color: rgb(17,17,17);
font-size: 1.4rem;
line-height: 1.6rem;
font-family: 'Roboto 500', Arial, Verdana, sans-serif;
max-height: 3.2rem;
overflow: hidden;
margin: 1rem 0 0.5rem 0;
}

div.box span.name span
{
color: rgb(17,17,17);
font-size: 1.4rem;
line-height: 1.6rem;
font-family: 'Roboto 500', Arial, Verdana, sans-serif;
max-height: 3.2rem;

}

div.box span.user
{
color: rgba(17,17,17,0.8);
display: block;
font-size: 1.3rem;
line-height: 1.8rem;
}

div.box p.views
{
font-size: 1.3rem;
color: rgba(17,17,17,0.6);
line-height: 1.8rem;
}

/* Movie Box */

div.film-wrapper
{
margin-left: -0.7rem;
}

div.film-box
{
width: calc(20% - 0.7rem);
max-width: 210px;
margin: 1rem 0 2rem 0.7rem;
}

div.film-box div.image-wrapper
{
padding: 56.25% 0 0 0;
font-size: 0;
}

/* Person Box */

div.persons-wrapper
{
margin-left: -0.7rem;
}

div.person-box
{
width: calc(12.5% - 0.7rem);
margin: 1rem 0 2rem 0.7rem;
}

div.person-box div.image-wrapper
{
padding: 150% 0 0 0;
font-size: 0;
}

/* More */

a.more
{
display: inline-block;
font-size: 1.3rem;
line-height: 1.7rem;
text-transform: uppercase;
color: rgba(17,17,17,0.8);
}

a.more:hover
{
color: rgba(17,17,17,1);
}

/* Also */

section.also
{
padding: 5rem 0 1rem 0;
}

section.also p
{
font-size: 1.4rem;
line-height: 2.1rem;
color: rgb(17,17,17);
margin: 1.5rem auto;
max-width: 50rem;
}

ul.also
{
margin: 2rem -4rem 0 0;
}

ul.also li
{
display: inline-block;
vertical-align: top;
width: calc(20% - 4rem);
margin: 0 4rem 1rem 0;
font-size: 1.4rem;
line-height: 1.8rem;
}

ul.also a
{
font-family: 'Roboto 500', Arial, Verdana, sans-serif;
color: rgba(17,17,17,0.8);
}
	
ul.also a:hover
{
color: rgba(17,17,17,1);
}

/* Section first */

#first section.also
{
padding-top: 0;
}

/* Intro */

#intro
{
margin: 2rem 0;
font-size: 1.5rem;
line-height: 1.7;
max-width: 55rem;
color: #272727;
}

/* Movie Info */

#movie-logo
{
display: inline-block;
vertical-align: top;
width: 4.8rem;
height: 4.8rem;
border-radius: 50%;
margin-right: 1.7rem;
background: #0177FF url('/static/images/site/logo.png') no-repeat center center;
background-size: 4rem;
}

#movie-info
{
display: inline-block;
vertical-align: top;
width: calc(100% - 6.5rem);
}

#movie-info p.desc
{
color: #000;
font-size: 1.4rem;
line-height: 2.1rem;
margin: 1rem 0;
max-width: 75rem;
}

#movie-info p.film-gratuit
{
color: #666;
font-size: 1.4rem;
line-height: 2.1rem;
margin: 1rem 0;
max-width: 75rem;
}

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

	#movie-logo
	{
	display: none;
	}
	
	#movie-info
	{
	display: block;
	width: 100%;
	}
}

/* Movie Buttons */

.button
{
display: inline-block;
font-size: 1.4rem;
font-family: 'Roboto 500', Arial, Verdana, sans-serif;
text-transform: uppercase;
color: #FFF;
background: rgb(1,119,255);
padding: 1rem 1.6rem;
border-radius: 0.2rem;
cursor: pointer;
text-align: center;
}

.button:hover
{
background: rgb(11,139,255);
}

#movie-buttons
{
display: block;
margin: 1.6rem 0;
overflow: auto;
}

#movie-buttons div.button
{
display: inline-block;
width: 20rem;
}

div.button-stream
{
margin-right: 1rem;
}

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

	#movie-buttons div.button
	{
	display: block;
	width: 100%;
	max-width: 30rem;
	margin: 1rem auto 0 auto;
	}
}

/* Movie Meta Table */

#movie-meta
{
font-size: 1.4rem;
line-height: 2.1rem;
border: 0.1rem solid #ddd;
border-left: 0;
border-right: 0;
padding: 1.1rem 0;
margin: 1.9rem 0;
}

#movie-meta li
{
margin-top: 1rem;
display: inline-block;
vertical-align: top;
width: calc(100% - 9rem);
}

#movie-meta li.title
{
width: 9rem;
color: rgb(136,136,136);
}

#movie-meta ul li
{
width: auto;
display: inline-block;
margin: 0 1.4rem 0 0;
color: rgba(17,17,17, 0.8);
font-family: 'Roboto 500', Arial, Verdana, sans-serif;
font-weight: 500;
}

#movie-meta ul li *
{
font-family: inherit;
color: inherit;
font-weight: inherit;
}

#movie-meta ul li a:hover
{
color: rgba(17,17,17, 1);
}

@media screen and (max-width: 500px) {
	
	#movie-meta ul li
	{
	display: block;
	}
}

/* Comments */

div.comment
{
margin: 3rem 0;
}

div.avatar
{
display: inline-block;
vertical-align: top;
width: 4rem;
height: 4rem;
border-radius: 50%;
border: 0.1rem solid #ddd;
text-align: center;
font-size: 1.6rem;
text-indent: 0.2rem;
line-height: 3.8rem;
font-family: 'Roboto 700', Arial, Verdana, sans-serif;
color: rgb(136,136,136);
margin-right: 1.5rem;
}

div.user-avatar
{
background: #f7f7f7 url('/static/images/site/user.png') no-repeat center 0.8rem;
background-size: 3.2rem;
border-color: #0177FF ;
}

div.review
{
display: inline-block;
vertical-align: top;
width: calc(100% - 5.5rem);
}

div.post
{
font-size: 1.4rem;
line-height: 3.4rem;
border-bottom: 0.1rem solid #ddd;
max-width: 70rem;
cursor: text;
color: #999;
}

div.rating
{
display: inline-block;
vertical-align: top;
height: 1.8rem;
width: 6.5rem;
background: url('/static/images/site/nostar.png') repeat-x 0 center;
background-size: 1.3rem;
}

div.rating div
{
display: inline-block;
height: 1.8rem;
background: url('/static/images/site/star.png') repeat-x 0 center;
background-size: 1.3rem;
}

div.comment p.user
{
display: inline-block;
vertical-align: top;
font-family: 'Roboto 500', Arial, Verdana, sans-serif;
font-weight: 500;
font-size: 1.3rem;
line-height: 1.8rem;
color: rgb(17,17,17);
margin-left: 1.6rem;
}

div.comment p.user span
{
font-family: 'Roboto 400', Arial, Verdana, sans-serif;
font-weight: 400;
color: rgb(136,136,136);
margin-left: 1.6rem;
}

div.comment p.comm
{
font-size: 1.4rem;
line-height: 2rem;
margin: 0.6rem 0 1rem 0;
max-width: 70rem;
}

div.comment p.link a
{
font-family: 'Roboto 500', Arial, Verdana, sans-serif;
font-weight: 500;
font-size: 1.3rem;
line-height: 1.7rem;
color: rgba(17,17,17,0.8);
text-transform: uppercase;
}

div.comment p.link a:hover
{
color: rgba(17,17,17,1);
}

/* Pagination */

#pag-head
{
display: block;
border-bottom: 0.1rem solid #f2f2f2;
padding: 0 0 0.5rem 0;
margin: 0 0 1rem 0;
overflow: auto;
}

#showing
{
text-transform: uppercase;
font-size: 1.4rem;
line-height: 2.7rem;
color: #777;
}

#sort-box
{
float: right;
font-size: 1.4rem;
line-height: 2.7rem;
}

select
{
appearance: none;
-moz-appearance: none;
-webkit-appearance: none; 
}

select::-ms-expand
{ 
display: none;
}

@media screen and (min-width:0\0) {

	select
	{
	background-image:none\9;
	padding: 5px\9;
	}
}

#sort-box select
{
font-size: 1.3rem;
line-height: 1;
padding: 0.4rem 2.6rem 0.4rem 0.4rem;
margin: 0 0 0 1rem;
border-radius: 0.2rem;
background: #f3f3f3 url('/static/images/site/drop-down.png') no-repeat right 0.6rem center;
background-size: 1.4rem;
color: #555;
border: 0.1rem solid #ddd;
width: 14rem;
}

#sort-box select:hover
{
background: #eee url('/static/images/site/drop-down.png') no-repeat right 0.6rem center;
background-size: 1.4rem;
}

div.pagination
{
text-align: center;
overflow: auto;
}

div.pagination li
{
display: inline-block;
}

div.pagination li.pnum-split
{
padding: 0 1.5rem;
}

div.pagination a, div.pagination div
{
display: inline-block;
font-size: 1.3rem;
}

div.pagination .box
{
padding: 0.5rem 1.2rem;
margin: 0 0.4rem;
text-decoration: none;
color: #333;
border: 0.1rem solid #ccc;
border-radius: 0.2rem;
transition: background 0.2s ease-in-out;
}

div.pagination a:not(.active):not(.dir):hover
{
background: #efefef;
}

div.pagination a.active
{
background: #eee;
border-color: #aaa;
}

div.pagination .next
{
opacity: 0.75;
background-size: 12px;
border: none;
}

div.pagination .prev
{
opacity: 0.75;
background-size: 12px;
border: none;
}

div.pagination .dir span
{
border: none;
text-transform: uppercase;
}

div.pagination a.dir:hover
{
opacity: 1;
}

div.pagination div.dir
{
opacity: 0.2;
border: none;
}

div.pagination div.mobile
{
display: none;
}

div.pnum-bottom
{
margin: 2rem 0 -1rem 0;
border-top: 0.1rem solid #f3f3f3;
padding: 1rem 0 0 0; 
}

/* Contact */

#contact
{
margin: 2rem 0;
max-width: 55rem;
}	

#contact label
{
display: inline-block;
font-size: 1.4rem;
color: #444;
margin: 2rem 0 0.6rem 0;
}

#contact input, #contact textarea
{
width: 100%;
margin: 0;
font-size: 1.3rem;
border: 0.1rem solid #ddd;
border-radius: 0.2rem;
transition: border-color 0.2s ease-in-out;
line-height: 2.4rem;
height: 3.2rem;
padding: 0.4rem 1rem;
color: #111;
}

#contact input:hover, #contact textarea:hover
{
border-color: #bbb;
}

#contact input:focus, #contact textarea:focus
{
border-color: #aaa;
padding: 0.4rem 1rem;
}

#contact textarea
{
width: 100%;
min-width: 100%;
max-width: 100%;
min-height: 8.8rem;
max-height: 23rem;
border-radius: 0.3rem;
}

#contact button
{
display: block;
margin: 2rem auto 5rem auto;
}

#contact button::-moz-focus-inner
{
padding: 0;
border: 0;
}

div.form-half
{
vertical-align: top;
display: inline-block;
width: calc(50% - 1.5rem);
}

div.form-half + div.form-half
{
margin-left: 3rem;
}

#info p.form-message
{
font-family: 'Roboto 500', Arial, Verdana, sans-serif;
font-size: 1.4rem;
line-height: 2.1rem;
text-align: center;
color: red;
margin-top: 3rem;
margin-bottom: 0;
}

#info p.success
{
color: #4bad00;
}

#verify
{
display: none;
}

/* Secure */

#secure-wrapper
{
margin: 2rem auto;
width: 100%;
max-width: 162px;
text-align: center;
}

#secure-image
{
border: 0.1rem solid #ddd;
border-radius: 2px;
width: 160px;
height: 55px;
}

#info #secure-reload
{
font-size: 1.2rem;
color: #888;
cursor: pointer;
margin-top: 0.4rem;
}

#info #secure-reload:hover
{
color: #666;
}












/* Modes */

a.mode
{
z-index: 9999;
position: fixed;
right: 0;
background: #aaa;
color: #fff;
font-size: 1rem;
padding: 0.1rem 0.4rem;
-webkit-transform: rotate(-90deg);
transform-origin: right bottom 0;
}

a.mode-admin
{
top: 55%;
}

a.mode-test
{
top: 50%;
}

a.mode-diag
{
top: 45%;
}

a.mode-nice
{
top: 40%;
}

a.mode-cc
{
top: 35%;
}

/* Diagnostics */

div.diagnostics
{
margin: 2rem;
padding: 2rem;
background: #f7f7f7;
font-size: 1.6rem;
}

div.diagnostics h4
{
font-size: 2rem;
margin: 4rem 0 1rem 0;
}

pre
{
white-space: pre-wrap;
white-space: -moz-pre-wrap;
word-wrap: break-word;
font-family: Courier, Verdana, Arial, sans-serif;
}

#recherche-icon
{
display: none;
float: right;
background: url('/static/images/site/search.png') no-repeat center center;
background-size: 1.6rem;
width: 1.6rem;
height: 1.6rem;
text-indent: -99999px;
opacity: 0.6;
margin: 0.8rem 0 1rem 2.6rem;
}

#recherche-icon:hover
{
opacity: 1;
}

/* Search options */

p.recherche-options
{
font-size: 1.3rem;
line-height: 1.4;
background: #fbfbfe;
border: 0.1rem solid #ddddee;
padding: 0.8rem 1rem;
margin: 2rem 0;
}

p.recherche-options a
{
padding: 0.4rem 1rem;
}

/* sl */

div.sl span
{
display: inline-block;
width: 2.4rem;
height: 2.4rem;
background-size: 100%;
margin-right: 0.5rem;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
cursor: pointer;
opacity: 0.55;
transition: 0.3s all;
}

div.sl span:hover
{
opacity: 0.8;
}

span.sl-1
{
background: url('/static/images/sl/1.png');
}

span.sl-2
{
background: url('/static/images/sl/2.png');
}

span.sl-3
{
background: url('/static/images/sl/3.png');
}

span.sl-4
{
background: url('/static/images/sl/4.png');
}

span.sl-5
{
background: url('/static/images/sl/5.png');
}

span.sl-6
{
background: url('/static/images/sl/6.png');
}

span.sl-7
{
background: url('/static/images/sl/7.png');
}

span.sl-8
{
background: url('/static/images/sl/8.png');
}

span.sl-9
{
background: url('/static/images/sl/9.png');
}






/* MQ- Main */

@media (max-width: 600px) {

	main
	{
	padding: 0 2rem;
	}
}

/* MQ - Top Header */

@media (max-width: 1300px) {

	#recherche
	{
	width: calc(100% - 62rem);
	}
}

@media (max-width: 1000px) {

	#recherche
	{
	display: none;
	}
	
	#recherche-icon
	{
	display: block;
	}
}

@media (max-width: 700px) {

	#account li:first-child
	{
	display: none;
	}
}

@media (max-width: 600px) {

	#account
	{
	display: none;
	}
}

@media (max-width: 400px) {
	
	.logo
	{
	display: none;
	}

	.logo-small
	{
	display: block;
	}
}

/* MQ- Promo */

@media (max-width: 500px) {

	#promo
	{
	display: none;
	}
}

/* MQ- Legal */

@media (max-width: 800px) {
	
	#legal
	{
	text-align: center;
	}
	
	#legal ul
	{
	float: none;
	display: block;
	margin-bottom: 1.2rem;
	}
}

/* MQ - Headings sizes */

@media (max-width: 800px) {

	#info p
	{
	font-size: 1.3rem;
	line-height: 1.6;
	}
}

@media (max-width: 800px) {

	div.form-half
	{
	display: block;
	width: 100%;
	margin: 0;
	}
	
	div.form-half + div.form-half
	{
	margin-left: 0;
	}
}

/* MQ - Also */

@media (max-width: 1000px) {

	ul.also li
	{
	width: calc(25% - 4rem);
	margin: 0 4rem 1rem 0;
	}
}

@media (max-width: 800px) {

	ul.also li
	{
	width: calc(33.33% - 4rem);
	margin: 0 4rem 1rem 0;
	}
}

@media (max-width: 600px) {
	
	ul.also
	{
	margin: 2rem 0 0 0;
	}

	ul.also li
	{
	width: calc(50% - 4rem);
	margin: 0 4rem 1rem 0;
	}
}

@media (max-width: 450px) {
	
	ul.also
	{
	margin: 2rem 0 0 0;
	}

	ul.also li
	{
	width: 100%;
	margin: 0 0 1rem 0;
	}
}

/* Movie Box */

@media (max-width: 1000px) {
	
	div.film-box
	{
	width: calc(25% - 0.7rem);
	}
}

@media (max-width: 800px) {
	
	div.film-box
	{
	width: calc(33.33% - 0.7rem);
	}
}

@media (max-width: 480px) {
	
	div.film-box
	{
	width: calc(50% - 0.7rem);
	}
}

@media (max-width: 360px) {
	
	div.film-box
	{
	width: 100%;
	margin-right: 0;
	}
}

/* MQ - Person */

@media (max-width: 950px) {

	div.person-box
	{
	width: calc(16.66% - 0.7rem);
	margin: 1rem 0 2rem 0.7rem;
	}
}

@media (max-width: 800px) {

	div.person-box
	{
	width: calc(20% - 0.7rem);
	margin: 1rem 0 2rem 0.7rem;
	}
}

@media (max-width: 620px) {

	div.person-box
	{
	width: calc(25% - 0.7rem);
	margin: 1rem 0 2rem 0.7rem;
	}
}

@media (max-width: 460px) {

	div.person-box
	{
	width: calc(33.33% - 0.7rem);
	margin: 1rem 0 2rem 0.7rem;
	}
}

@media (max-width: 360px) {

	div.person-box
	{
	width: calc(50% - 0.7rem);
	margin: 1rem 0 2rem 0.7rem;
	}
}

/* Pagination */

@media (max-width: 600px) {
	
	div.pagination .box
	{
	padding: 0.1rem 0.4rem;
	}
}


/* Pagination */

@media (max-width: 600px) {
	
	#pages li
	{
	width: calc(50% - 2rem);
	}
}

#player
{
margin-bottom: 3rem;
}

#removed
{
width: 100%;
margin: -2rem auto 3rem auto;
}

.video-wrapper
{
width: 100%;
display: block;
position: relative;
margin: -2rem auto 0 auto;
background: #222;
background-size: cover;
box-shadow: inset 0 0 3rem 3rem rgba(0,0,0,0.5);
cursor: pointer;
}

.video-wrapper:after 
{
padding-top: 45%;
display: block;
content: '';
}

.video-main
{
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
background: #000;
background: #222;
height: 100%;
text-align: center;
}

.video-main:before
{
content: '';
display: inline-block;
height: 100%; 
vertical-align: middle;
text-align: center;
}

.video-play
{
background: url('/static/images/site/play-256.png') no-repeat 50% 50%;
background-size: 10%;
opacity: 0.9;
transition: background 0.4s;
}

.video-play:hover
{
background-size: 15%;
}

.video-play:active
{
background-size: 14%;
}

.video-load
{
background: url('/static/images/site/loading.gif') no-repeat 50% 50% #222;
box-shadow: inset 0 0 3rem 3rem rgba(0,0,0,0.5);
}

.video-title
{
position: absolute;
bottom: 0;
background: #222;
background: rgba(0, 0, 0, 0.6);
width: 100%;
text-align: left;
padding: 1rem;
font-size: 0;
margin: 0;
}

span.meter
{
display: inline-block;
vertical-align: top;
margin: 0.3rem 1rem;
border-radius: 3px;
width: 200px;
width: calc(100% - 22.9rem);
height: 1rem;
background: rgba(255,255,255,0.6);
}

span.time
{
display: inline-block;
vertical-align: top;
font-size: 1.2rem;
line-height: 1.6rem;
color: #FFF;
width: 10rem;
}

span.progress-bar 
{
display: block;
height: 1rem;
font-size: 0.8rem;
line-height: 1;
background: #005fcd;
width: 0%;
color: #FFF;
text-align: center;
border-radius: 3px;
}

span.icon
{
display: inline-block;
vertical-align: top;
width: 16px;
height: 16px;
margin: 0rem 1rem;
opacity: 0.7;
transition: opacity 0.1s;
}

span.icon:hover
{
opacity: 1;
}

span.play
{
background: url('/static/images/site/play-16.png');
}

span.volume
{
background: url('/static/images/site/volume-16.png');
}

span.fullscreen
{
background: url('/static/images/site/fullscreen-16.png');
}






.video-message
{
background: url('/static/images/site/logo.png') no-repeat center 1rem, rgba(0,0,0,0.7);
background-size: 3.2rem;
text-align: center;
color: #fff;
display: none;
z-index: 99;
margin: 2rem auto;
padding: 4.8rem 2.4rem 0 2.4rem;
vertical-align: middle;
border: 0.2rem solid #000;
border-top-color: #111;
border-radius: 0.4rem;
}

.video-message span
{
display: block;
font-size: 1.4rem;
}

.video-message span.p2
{
font-size: 1.4rem;
line-height: 2.2rem;
}

.video-message span.p3
{
padding: 1rem 1.4rem;
background: #4bad01;
font-family: 'Roboto 700';
font-weight: 700;
text-transform: uppercase;
margin: 0.6rem auto 1rem auto;
cursor: pointer;
max-width: 30rem;
border-radius: 0.2rem;
font-size: 1.4rem;
}

.video-message span.p3:hover
{
background: #56c700;
}

@media screen and (max-width: 480px) {
	
	#player
	{
	display: none;
	}
}