/* Reset CSS
		 * --------------------------------------- */
		body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
		form,fieldset,input,textarea,p,blockquote,th,td {
		    padding: 0;
		    margin: 0;
		}
		a{
			text-decoration:none;
		}
		table {
		    border-spacing: 0;
		}
		fieldset,img {
		    border: 0;
		}
		address,caption,cite,code,dfn,em,strong,th,var {
		    font-weight: normal;
		    font-style: normal;
		}
		strong{
			font-weight: bold;
		}
		ol,ul {
		    list-style: none;
		    margin:0;
		    padding:0;
		}
		caption,th {
		    text-align: left;

		}
		h1,h2,h3,h4,h5,h6 {
		    font-weight: normal;
		    font-size: 100%;
		    margin:0;
		    padding:0;
		}
		q:before,q:after {
		    content:'';
		}
		abbr,acronym { border: 0;
		}
		/* -----
		SVG Icons - svgicons.sparkk.fr
		----- */

		.svg-icon {
		  width: 2em;
		  height: 2em;
		}

		.svg-icon path,
		.svg-icon polygon,
		.svg-icon rect {
		  fill: #4691f6;
		}

		.svg-icon circle {
		  stroke: #4691f6;
		  stroke-width: 1;
		}


		/* Custom CSS
		 * --------------------------------------- */
		body{
			font-family: 'robotobold',arial,helvetica;
			color: #021d43;
		}
		h1{
		    font-family: robotobold;
		    font-size: 98px;
		    letter-spacing: -3px;
		    line-height: 122px;
		    color: #021d43;
		    transform: translate(0, 120px);
		}
		p{
			font-size: 2em;
		}
		em{
			color: #39b5e8;
		}
		.content{
			position: relative;
			top: 50%;
			transform: translateY(-50%);
			text-align: left;
			margin: 0 10%;
		}
		.textright{
			text-align: right;
		}
		.textright h4{
			 margin-left: 40%;
		}
		.textleft{
			text-align: left;
		}
		.textleft h4{
			 margin-right: 40%;
		}
		.title{
			/*position: absolute;*/
		    width: 50%;
		    height: 100%;
		    background: #FFF;
		    /*margin-left: 0%;*/
		    float: left;
		}
		.title div{
			margin-top: 50%;
			margin-right: 10%;
			margin-left: 10%;
		}
		.title p{
			    font-size: 12px;
		    font-family: 'robotolight',arial,helvetica;
		    letter-spacing: 4px;
		}
		.title h2{
			font-size: 80px;
			font-family: 'robotobold',arial,helvetica;
			line-height: 90px;
			letter-spacing: -2px;
		}
		.title h4, h4{
		    font-family: 'robotolight',arial,helvetica;
		    width: 60%;
		    font-size: 26px;
		    margin-top: 30px;
		    margin-bottom: 30px;
		}
		.cover{
			/*position: absolute;*/
		    /*width: 50%;*/
		    height: 100%;
		    background: url('../') 50% center no-repeat;
		    background-color: #FFF;
		    /*margin-left: 50%;*/
		    float: left;
		    position: relative;
			  overflow: hidden;
		}
		.cover.cas01{
			position: relative;
			  overflow: hidden;
		}
		.cover img{
		        position: absolute;
			    left: 50%;
			    top: 50%;
			    height: 100%;
			    min-width: 100%;
			    -webkit-transform: translate(-50%,-50%);
			    -ms-transform: translate(-50%,-50%);
			    transform: translate(-50%,-50%);
		}
		header{
			position: fixed;
			z-index: 100;
			height: 100px;
			width: 100%;
			margin: 20px;
			font-family: 'robotobold',arial,helvetica;
			color: #021d43;
			font-size: 26px;
		}
		header em{
			font-family: 'robotolight',arial,helvetica;
			color: #021d43;
		}

		
		/* Menu
		 * --------------------------------------- */
		 #icon-menu{
		 	width: 100px;
		 	height: 100px;
		 	background: red;
		 	z-index: 300;
		 	right: 5%;
		 	top: 5%;
		 	position: fixed;
		 }
		 .open-menu{
		 	letter-spacing: -2px;
		 	z-index: 200;
		    top: 0;
		    right: 0;
		    position: fixed;
		    text-align: center;
		    width: 100%;
		    height: 100%;
		    background: #2FB4EA;
		    font-family: 'robotobold',arial,helvetica;
		    font-size: 100px;
		    opacity: 0;
		    animation-name: open-menu;
		    animation-duration: 0.25s;
		    animation-fill-mode: forwards;
		    animation-delay: 0.4s;
		    animation-timing-function: ease-out;
		 }
		 @-webkit-keyframes open-menu {
		    from {
		    	transform:translate(100%);
		    	opacity:0;
		    }
		    to {
		    	transform:translate(0%);
		    	opacity: 1;
		    }
		}
		.open-menu a,
		.close-menu a{
			color: #FFF;
		}
		a.selected,
		.open-menu a:hover,
		.close-menu a:hover{
			color: #001C44;
		}
		 .close-menu{
		 	letter-spacing: -2px;
		 	z-index: 200;
		    top: 0;
		    right: 0;
		    position: fixed;
		    text-align: center;
		    width: 100%;
		    height: 100%;
		    background: #2FB4EA;
		    font-family: 'robotobold',arial,helvetica;
		    font-size: 100px;
		    animation-name: close-menu;
		    animation-duration: 0.25s;
		    animation-fill-mode: forwards;
		    animation-delay: 0.4s;
		    animation-timing-function: ease-out;
		 }
		 @-webkit-keyframes close-menu {
		    from {
		    	transform:translate(0%);
		    	opacity:1;
		    }
		    to {
		    	transform:translate(100%);
		    	opacity: 0;
		    }
		}
		/* Animation
		 * --------------------------------------- */
		 #title01, #title02, #title03{
		 	opacity: 0;
		 }
		.hide {
		    -webkit-animation-name: example; /* Chrome, Safari, Opera */
		    -webkit-animation-duration: 1s; /* Chrome, Safari, Opera */
		    animation-name: example;
		    animation-duration: 1s;
		    animation-fill-mode: forwards;
		    animation-delay: 0.4s;
		    animation-timing-function: linear;
		}

		/* Chrome, Safari, Opera */
		@-webkit-keyframes example {
		    from {
		    	transform:translate(50px);
		    	opacity:0;
		    }
		    to {
		    	transform:translate(0px);
		    	opacity: 1;
		    }
		}

		/* Standard syntax */
		@keyframes example {
		    from {
		    	transform:translate(50px);
		    	opacity: 0;
		    }
		    to {
		    	transform:translate(0px);
		    	opacity: 1;
		    }
		}


		.cover01 {
		    -webkit-animation-name: exampledeux; /* Chrome, Safari, Opera */
		    -webkit-animation-duration: 0.5s; /* Chrome, Safari, Opera */
		    animation-name: exampledeux;
		    animation-duration: 0.5s;
		    animation-fill-mode: forwards;
		    animation-delay: 0.1s;
		    animation-timing-function: linear;
		}

		/* Chrome, Safari, Opera */
		@-webkit-keyframes exampledeux {
		    from {
		    	width: 0px;
		    }
		    to {
		    	width: 50%;
		    }
		}

		/* Standard syntax */
		@keyframes exampledeux {
		    from {
		    	width: 0px;
		    }
		    to {
		    	width: 50%;
		    }
		}
		.texte-anim-wrapper{
			height: 140px;
			overflow: hidden;
		}
		.texte-anim-wrapper h1{
			animation-name: texte-intro;
		    animation-duration: 0.45s;
		    animation-fill-mode: forwards;
		    animation-delay: 1s;
		    animation-timing-function: linear;
		}
		@-webkit-keyframes texte-intro {
		    from {
		    	transform: translate(0, 120px);
		    	opacity: 0;
		    }
		    to {
		    	transform: translate(0, 20px);
		    	opacity: 1;
		    }
		}

/* Background Vidéo
		 * --------------------------------------- */
		video#bgvid {
		  position: fixed; right: 0; bottom: 0;
		  min-width: 100%; min-height: 100%;
		  width: auto; height: auto; z-index: -100;
		  background: url(polina.jpg) no-repeat;
		  background-size: cover;
		}