@import url(fontawesome-all.min.css);
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300italic,600italic,300,600");

    body, html {
      height: 100%;
      margin: 0;
	  padding:0;
      font: 400 15px/1.8 "Lato", sans-serif;
      color: #777;
	  
    }


	html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;}
    
    
    .bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4, .bgimg-5, .bgimg-6, .bgimg-7, .bg-matt, .bg-resistance, .bg-giants, .bg-conference, .bg-quisommesnous  {
		position: relative;
		opacity: 1;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
    	min-width: 100%; min-height: 100%;
		-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
		-moz-animation: fadein 2s; /* Firefox < 16 */
		-ms-animation: fadein 2s; /* Internet Explorer */
		-o-animation: fadein 2s; /* Opera < 12.1 */
		animation: fadein 2s;
		display: flex;
		flex-direction: column;
		text-align: center;
		overflow: hidden;
}

.bgimg-1 {background-image:url(../images/bg_contact.jpg);}
.bgimg-2 {background-image:url(../images/bg2.jpg);}
.bgimg-3 {background-image:url(../images/bg3.jpg);}
.bgimg-4 {background-image:url(../images/bg4.jpg);}
.bgimg-5 {background-image:url(../images/bg5.jpg);}
.bgimg-6 {background-image:url(../images/bg6.jpg);}
.bgimg-7 {background-image:url(../images/bg7.jpg);}
.bg-matt {background-image:url(../images/bg-matt.jpg);}
.bg-resistance {background-image:url(../images/bg-resistance.jpg);}
.bg-giants {background-image:url(../images/bg-giants.jpg);}
.bg-conference {background-image:url(../images/bg_conference.jpg);}
.bg-quisommesnous {background-image:url(../images/bg-quisommesnous.jpg);}



#bgvid {
	position: fixed; right: 0; bottom: 0;
	min-width: 100%; min-height: 100%;
	width: auto; height: auto; z-index: -100;
	background-size: cover;
			display: flex;
		flex-direction: column;
		text-align: center;
		overflow: hidden;
	;
  }


@keyframes fadein {
   from { opacity: 0; }
   to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
   from { opacity: 0; }
   to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
   from { opacity: 0; }
   to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
   from { opacity: 0; }
   to   { opacity: 1; }
}
	  
    
	h1, h2, h3, h4, h5, h6 {
		color: #ffffff;
		font-weight: 600;
		line-height: 1.5;
		margin: 0 0 1rem 0;
		text-transform: uppercase;
		letter-spacing: 0.2rem;
	}

		h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
			color: inherit;
			text-decoration: none;
		}

		h1.major, h2.major, h3.major, h4.major, h5.major, h6.major {
			border-bottom: solid 1px #ffffff;
			width: -moz-max-content;
			width: -webkit-max-content;
			width: -ms-max-content;
			width: max-content;
			padding-bottom: 0.5rem;
			margin: 0 0 2rem 0;
		}

	h1 {
		font-size: 2.25rem;
		line-height: 1.3;
		letter-spacing: 0.5rem;
		margin: 2rem 0 2rem 0;

	}

	h2 {
		font-size: 1.5rem;
		line-height: 1.4;
		letter-spacing: 0.5rem;
	}

	h3 {
		font-size: 1rem;
	}

	h4 {
		font-size: 0.8rem;
	}

	h5 {
		font-size: 0.7rem;
	}

	h6 {
		font-size: 0.6rem;
	}

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

		h1 {
			font-size: 1.75rem;
			line-height: 1.4;
		}

		h2 {
			font-size: 1.25rem;
			line-height: 1.5;
		}

	}


	blockquote {
		
		margin: .5em 10px;
		padding:1em;
		quotes: "\201C""\201D""\2018""\2019";
		color:#FFF;
		font-style:italic;
		border-left:1px solid #FFF;
		width: 400px;
	  }

	  blockquote:before {
		color: #ccc;
		content: open-quote;
		font-size: 2rem;
		line-height: 0.1rem;
	
		opacity: .5;
	  }

	  blockquote:after {
		color: #ccc;
		content: close-quote;
		font-size: 2rem;
		line-height: 0.1rem;
		opacity: .5;
	  }

	  
	  blockquote p {
		display: inline;
		
	  }

	  .emphasis {
		color: #ffffff;
		font-weight: 600;
		line-height: 1.5;
		margin: 0 0 1rem 0;
		text-transform: uppercase;
		letter-spacing: 0.2rem;	  
	  }


	
	.creditcreation p {
	text-align:justify;
	padding:1em;
	
	}

	.informations {
	color: #FFF;
	font-size:1;
	}
	
	.distribution {
	color: #FFF;
	font-size:.9em;
	line-height:1.1em;
	}

	.production {
	color: #000;
	font-size:.8em;
	line-height:.9em;
	}		
	
	.credits {
	color:#FFF;
	font-size: 0.8em;
	text-align: left;
	}  

	.credits p {
	margin:0.5rem;
	}
			 

/* BUTTONS */
	a, a:visited {color:white;}

	.btn_simple, .btn_simple:visited {color:inherit; text-decoration: underline;}
	.btn_simple:hover{color:#FFF; text-decoration:line-through;}
	  

	  .btn, .btn:visited{		
		background-image: linear-gradient(144deg, #030678, #5B42F3 50%,#00DDEB);
		text-decoration: none;
		border:1px solid #FFF;
		color: white;
		border-radius: 1.5em;
		letter-spacing: 2px;
		font-weight: 300;
		padding: 15px 32px;
		text-align: center;
		text-decoration: none;
		display: inline-block;
		font-size: 1em;
		transition: all 0.5s ease 0s;
	  }

	  .btn:hover {
		border:1px solid #FFF;
		text-decoration: none;
		border-radius: 1.5em;
		color: white;
		padding: 15px 32px;
		text-align: center;
		text-decoration: none;
		display: inline-block;
		box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
		transform: translateY(-5px);
		transition: all 0.5s ease 0s;
		font-size: 1em;

	  }

	  .btn_xl, .btn_xl:visited	{
		text-decoration: none;		
		background-color:rgb(15, 87, 170);
		border:1px solid #FFF;
		border-radius: 1.5em;
		color: #FFF;
		padding: 15px 32px;
		text-align: center;
		text-decoration: none;
		display: inline-block;
		font-size: 1.5em;
		font-weight: 500;
		font-family: 'Source Sans Pro', sans-serif;
		letter-spacing: 2.5px;
		text-transform: uppercase;
		transition: all 1s;
	  }

	  .btn_xl:hover {
		text-decoration: none;
		border:1px solid #FFF;
		background:none;
		color: white;
		padding: 15px 32px;
		text-align: center;
		text-decoration: none;
		display: inline-block;
		transition: all 1s;
		font-size: 1.5em;

	  }

	  .btn_s, .btn_s:visited{		
		text-decoration: none;
		background-color:rgb(255, 255, 255);
		color: rgb(0, 0, 0);
		padding: 10px 30px;
		text-align: center;
		text-decoration: none;
		font-family: 'Roboto', sans-serif;
		font-weight: 400;
		font-size: 0.9em;
		letter-spacing: 2px;
		box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.5);
		transition: all 1s;
	  }

	  .btn_s:hover {
		text-decoration: none;
		border-top:1px solid #FFF;
		border-bottom:1px solid #FFF;
		background:none;
		color: white;
		padding: 10px 30px;
		text-align: center;
		text-decoration: none;
		transition: all 1s;

	  }

	  .btn_m, .btn_m:visited{
		display: inline-block;
		text-align: center;
		text-decoration: none;
		padding: 15px 32px;
		font-size: 1.2em;
		font-family: 'Roboto', sans-serif;
		font-size: 11px;
		text-transform: uppercase;
		letter-spacing: 2.5px;
		font-weight: 500;
		color: #000;
		background-color: #fff;
		border: none;
		border-radius: 45px;
		box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.5);
		transition: all 0.3s ease 0s;
		cursor: pointer;
		outline: none;
		}
	  
	  .btn_m:hover {
		text-decoration: none;
		background-color:rgb(6, 158, 218);
		box-shadow: 0px 15px 20px rgba(3, 114, 158, 0.6);
		color: #fff;
		transform: translateY(-7px);
	  }

/* BUTTONS */

  .fade-in-text {
	animation: fadeIn linear 20s;
	-webkit-animation: fadeIn linear 20s;
	-moz-animation: fadeIn linear 20s;
	-o-animation: fadeIn linear 20s;
	-ms-animation: fadeIn linear 20s;
  }
  
  @keyframes fadeIn {
	0% {opacity:0;}
	25% {opacity:0;}
	100% {opacity:1;}
  }
  
  @-moz-keyframes fadeIn {
	0% {opacity:0;}
	25% {opacity:0;}
	100% {opacity:1;}
  }
  
  @-webkit-keyframes fadeIn {
	0% {opacity:0;}
	25% {opacity:0;}
	100% {opacity:1;}
  }
  
  @-o-keyframes fadeIn {
	0% {opacity:0;}
	25% {opacity:0;}
	100% {opacity:1;}
  }
  
  @-ms-keyframes fadeIn {
	0% {opacity:0;}
	25% {opacity:0;}
	100% {opacity:1;}
  }


.text-container {
	height:35px;
	overflow:hidden;
	border-radius:10px;
	position:fixed;
	bottom:1em;
	place-self: center;
 }
 .text-container ul {
   color:#fff;
   
   font-family: 'Source Sans Pro', sans-serif;
   letter-spacing: 2px;
   background:rgba(0, 0, 0, 0.5);
   padding-left:10px;
   padding-right:10px;
   text-align:center;
   list-style:none;
   animation: 16s linear 0s normal none infinite change1;
   -webkit-animation: 16s linear 0s normal none infinite change1;
   -moz-animation:16s linear 0s normal none infinite change1;
   -o-animation:16s linear 0s normal none infinite change1;
 }
 
 .text-container ul li {

   line-height:35px;
   font-size: 1em;
   font-weight: 300;
   
 }
 
 @-webkit-keyframes change1 {
   0%   {margin-top:0px;}
   8%  {margin-top:0px;}
   16%  {margin-top:-35px;}
   24%  {margin-top:-35px;}
   32%  {margin-top:-70px;}
   40%  {margin-top:-70px;}
   48%  {margin-top:-105px;}
   56%  {margin-top:-105px;}
   64%  {margin-top:-70px;}
   72%  {margin-top:-70px;}
   80%  {margin-top:-35px;}
   88%  {margin-top:-35px;}
   100% {margin-top:0;}
 }
 @keyframes change1 {
	0%   {margin-top:0px;}
	8%  {margin-top:0px;}
	16%  {margin-top:-35px;}
	24%  {margin-top:-35px;}
	32%  {margin-top:-70px;}
	40%  {margin-top:-70px;}
	48%  {margin-top:-105px;}
	56%  {margin-top:-105px;}
	64%  {margin-top:-70px;}
	72%  {margin-top:-70px;}
	80%  {margin-top:-35px;}
	88%  {margin-top:-35px;}
	100% {margin-top:0;}
 }
 
 .orientation {
    background:#000;
    top:0;
	width:100% ;
	height:100% ;
    margin:0 auto;
    text-align:center;
    color:white;
    display:none;
	z-index:200 ;
	font-size: 3em;
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 700px) {
      .orientation{display:block}
}

.embed-container { 
position: relative; 
padding-bottom: 56.25%; 
height: 0; 
overflow: hidden; 
max-width: 100%; 
} 

.embed-container iframe, .embed-container object, .embed-container embed { 
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%; 
}