/* General Demo Style */

@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);

*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

body, html { font-size: 100%; padding: 0; margin: 0;}


body {
	font-family: 'Lato', Calibri, Arial, sans-serif;
	color: #333;
	background: #fff;
}

.container {width:1000px;margin:0 auto;}
.espaceur {height:135px;}
a {
	color: #000;
	text-decoration: none;
}
a:hover, a.active {
	color: #000;
	text-decoration: underline;
}

img {max-width:100%;height:auto;}

.clear {clear:both;}

/* Header Style */

header {
	position: fixed;
	width:100%;
	border-bottom:1px solid #ccc;
	text-align: center;
	background: #fafafa;
	z-index:1000;
	top:0;
}
header .container {padding:20px 0;}

header h1 {
	font-size: 34px;
	line-height: 1.3;
	margin: 0;
	font-weight: 700;
}

.social {
	margin:0;
	padding: 10px 0; 
	font-size:10px; 
	font-family: Arial ,sans-serif; 
	color:#000000; 
	text-align: center; 
	text-transform: uppercase;
}
.social a {margin:0 7px;}

.menu a {margin:10px 15px 0 15px;}

section {border-bottom:1px solid #ccc;padding-bottom:40px;}

h2 {text-align: center;margin:30px 0;}

h3 {text-align: center;margin:20px 0;color:#666;}

.movie { 
	float:left;
	width:23%;
	margin: 30px 1%; 
	font-size:14px; 
	text-align: left; 
	padding: 0px;
	font-weight: 700;
}
.movie iframe {width:100%;height:128px;}

.credits {font-size:12px;}

.copyright {
	font-size: 16px;
	opacity: 0.8;
	font-weight: 300;
	text-align: center;
	margin-top:-25px;
}

.dl {color:#BB0D10;}

.dl-bio {float:left;width:20%;text-align: center;margin:20px 2.5%}
.dl-bio img {width:70px;}

.grid {
	max-width: 69em;
	list-style: none;
	margin: 30px auto;
	padding: 0;
}

.grid li {
	display: block;
	float: left;
	padding: 7px;
	width: 25%;
	opacity: 0;
}

.grid li.shown,
.no-js .grid li,
.no-cssanimations .grid li {
	opacity: 1;
}

.grid li a,
.grid li img {
	outline: none;
	border: none;
	display: block;
	max-width: 100%;
}

/* Effect 1: opacity */
.grid.effect-1 li.animate {
opacity: 1;
}

.gamma-description {
    background: #fff;
    background: rgba(255, 255, 255, 0.6);
    position: absolute;
    top: 20px;
    left: 20px;
    bottom: 20px;
    right: 20px;
    text-align: center;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transition: opacity 0.4s ease-in-out;
    -moz-transition: opacity 0.4s ease-in-out;
    -ms-transition: opacity 0.4s ease-in-out;
    -o-transition: opacity 0.4s ease-in-out;
    transition: opacity 0.4s ease-in-out;
}

.grid li .left {
    text-align: left;
    font-size: 12px;
    display: block;
    float: left;
    color: #c5c5c5;
}

.grid li .left a {
    display: inline-block;
}

li:hover .gamma-description {
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
	filter: alpha(opacity=80);
	opacity: 1;
}

.gamma-description:before, .gamma-description h3 {
    display: inline-block;
    vertical-align: middle;
}

.gamma-description h3 {
    width: 100%;
    padding: 0 20px;
    font-weight: 400;
    text-transform: lowercase;
    font-size: 16px;
}

.gamma-description:before {
    content: '';
    height: 100%;
}





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

.container {width:100%;margin:0 auto;}

}

@media screen and (max-width: 900px) {
	.grid li {
		width: 33.33%;
	}
	.movie { 
		width:48%;
	}
	.movie iframe {height:216px;}
}
@media screen and (max-width: 768px) {
	.grid li {
		width: 33.33%;
	}

}

@media screen and (max-width: 639px) {
	.grid li {
		width: 100%;
	}
	.movie {
		width: 98%;
	}
	.movie iframe {height:360px;}
	
	.dl-bio {float:left;width:45%;text-align: center;margin:20px 2.5%}

}

@media screen and (max-width: 400px) {
	.movie iframe {height:225px;}
}