/* ====== Police ====== */

@import url(https://fonts.googleapis.com/css?family=Abel);
@import url(https://fonts.googleapis.com/css?family=Cinzel);
@font-face {font-family: "assassin"; src: url('Assassin.ttf');}

/* ====== General ====== */

html,body{height:100%; padding:0px; margin:0px 8% 0px 8%;}


body{
	background: no-repeat fixed top center #333; 
  	font-family: 'Cinzel', 'Abel', sans-serif;
	font-size: 14px;
  	letter-spacing: 3px;
	text-decoration: none;
	width: 100%;
  	min-width: 300px;
	align: center;
	margin: 0px;
  	animation: intro 3s linear 0s;
	}

/* Standard syntax */
@keyframes intro {
    0%   {background: #000;	opacity: 0.0;}
  	20%   {background: #000;	opacity: 0.0;}
    100% {background: #333;	opacity: 1.0;}
}

section{
	background: no-repeat fixed top center #000; 
  	text-align: center;
  	min-height: 300px;
  	padding: 2px;
  	opacity: 0.8;
	filter:alpha(opacity=80);
  }

h3{ 
  	font-family: 'assassin', 'Cinzel';
  	font-size: 35px;
    text-decoration: none;
  	color: #5d2a22;
	letter-spacing: 15px;
	}

#intro, #bio h3 { 
     text-shadow: 0px 1px 25px #eee;
   }


#intro{
    background:url("../../files/design/bg-1.jpg") no-repeat fixed top center #C4C4C4;	
	background-position:50% -300px;
  	background-size: cover;
    min-height: 500px;
	padding: 70px 20% 10px 20%;
   }

#particle{
    background:url("../../files/design/bg-flou.png") no-repeat fixed top center;	
    background-position:50% 50%;
  	background-size: cover;
   }


#news{
  	background:no-repeat fixed top center #111;	
  	background-position:50%;
  	background-size: cover;
  	min-height: 250px;
  	text-align: left;
  	padding: 20px 8% 20px 8%;
  	color: #ddd;
   }

#news_txt{
  	float: left;
  	text-align: left;	
   }

#news_img{
  	text-align: right;
  	float: right;
  	top: -60px;
    right: 10%;
    position: relative;
  	-ms-transform: rotate(3deg); /* IE 9 */
    -webkit-transform: rotate(3deg); /* Safari */
    transform: rotate(3deg);
  	transition: transform 0.7s, color 0s, text-shadow 1s;
  	animation: intro_img 3.5s linear 0s;
	}

/* Standard syntax */
@keyframes intro_img {
    0%   {transform: rotate(-5deg);}
    100% {transform: rotate(3deg);}
}

#news_img:hover{
    -ms-transform: rotate(5deg); /* IE 9 */
    -webkit-transform: rotate(5deg); /* Safari */
    transform: rotate(5deg);
   }

#bio{
  	background:url("../../files/design/bg-IR.jpg") no-repeat fixed top center #B58072;	
	background-position:50% 50%;
  	background-size: cover;
  	min-height: 600px;
  	padding: 20px 40% 20px 8%;
  	text-align: left;
   }

#media{
  	background: #111; 
  	padding: 50px 20% 30px 20%;
  	min-height: 300px;
   }

#contact{
  	background:url("../../files/design/bg-2.jpg") no-repeat fixed bottom center #333;	
	background-position:50% 50%;
  	background-size: cover;
  	min-height: 600px;
  	padding: 100px 50% 20px 5%;
  	text-align: left;
   }

#box{
  	background: rgba(11,11,11,0.8);	
  	padding: 20px 20px 20px 20px;
  	text-align: center;
 	color: #ddd;
   }


.blog-info info{
  	background: no-repeat fixed top center #fff; 
 	}



a {
  	color: #fff;
 	}

#gallery {
	display: inline;
  	}

#gallery:after {
  content: ""; /* Important, sinon l'élément n'est pas généré. */
  display: table;
  clear: both;
}



/* ====== Menu ====== */

nav {
	background-color: #0d0e0e;
	border: 0px solid #ffffff;
	box-shadow: 1px 5px 8px #000;
  	font-family: 'Cinzel';
	font-size: 16px;
	letter-spacing: 22px;
	padding: 28px;
	margin-top: 0px;
	
	text-align: center;
	word-spacing: 20pt;

	opacity: 0.8;
	filter:alpha(opacity=80);
	}

nav a {
	background-color: inherit;
  	color: #822816;
  	padding: 12px 0px 12px 18px;
	text-decoration: none;
	text-align: center;
	opacity: 1.0;
	transition: color 1s;
	}

nav a:hover {
	background-color: #822816;
	color: #ffffff;
	text-shadow: 0px 1px 3px #000000;
	text-decoration: none;
	opacity: 1.0;
	}

}
nav .current a {
	background-color: #822816;
	color: #9A0F0F;
	text-shadow: 0px 2px 4px #000000;
	text-decoration: none;
	opacity: 1.0;
}

ul {
		list-style-type: none;
		margin-left: 0px;
		padding-left: 0px;
		margin-top: 0px;
		margin-bottom: 0px;
	}

ul li {
		list-style-type: none;
		margin-left: 0px;
		padding-left: 0px;
		display: inline;
  }
  
/* ====== Footer ====== */

footer {
	text-align: center;
   	height: 40px;
	background-color: rgba(10,10,10,0.8);
	border: 4px none #ffffff;
  	vertical-align: middle;
  
  	box-shadow: 1px -5px 10px #000;
  	padding: 5px 5px 5px 5px;
	color: #ddd;
	padding: 35px;
  	font-size: 10px;
  	letter-spacing: 3px;
    line-height: 150%;
  	display: block;
	}

footer a{
  	text-decoration: none;
	}


/* ====== Responcive for mobile ====== */

@media screen and (max-width: 1024px)
{
#news_img{
  	text-align: center;
  	float: none;
  	top: -20px;
    right: 10%;
    position: static;
   }
  
  iframe{
	margin: 0px;
    height: 350px;
	width: 500px;
	padding: 0px;
  }
    #media{
  	padding: 20px 15px 20px 15px;
   }

}

@media screen and (max-width: 1320px)
{
  #intro{background-position:50% -150px;}
}

@media screen and (max-width: 600px)
{
  html,body{height:100%; padding:0px; margin:0px 2px 0px 2px;}
  body{
  	font-family: 'Cinzel', 'Abel', sans-serif;
	font-size: 14px;
  	letter-spacing: 2px;
	}
  
  #intro, #bio, #news, #media, #contact{
  	padding: 20px 15px 20px 15px;
   }
  
   iframe{
	margin: 0px;
    height: 300px;
	width: 300px;
	padding: 0px;
  }
}