@charset "UTF-8";
/* style.css */

@import url(https://fonts.googleapis.com/css?family=Amatic+SC:700);

html, body {height:100%;font-family: 'Amatic SC', cursive;font-size:20px;
	/-webkit-animation: fadein 2s; /* Safari and Chrome */
    -moz-animation: fadein 2s; /* Firefox */
    -ms-animation: fadein 2s; /* Internet Explorer */
    -o-animation: fadein 2s; /* Opera */
    animation: fadein 2s;
}

.bg{
	background: url("../img/bg.jpg") no-repeat center 25px fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-ms-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	z-index:-1;
	min-height:100%;
}
small {color:#ffffff;}

@keyframes fadein{from{opacity:0;}to{opacity:1;}}
/* Firefox */
@-moz-keyframes fadein{from{opacity:0;}to{opacity:1;}}
/* Safari and Chrome */
@-webkit-keyframes fadein{from{opacity:0;}to{opacity:1;}}
/* Internet Explorer */
@-ms-keyframes fadein{from{opacity:0;}to{opacity:1;}}
/* Opera */
@-o-keyframes fadein{from{opacity:0;}to{opacity:1;}}

/*Menu*/
.navbar{
	-moz-border-radius:0px;
	-webkit-border-radius:0px;
	border-radius:0px;
}
.navbar-brand{
	font-size:25px;
}
.dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover{
	background-color:#000;color:#ddd;
}
.dropdown-menu>li>a{color:#ddd;}

/*HEADER-----------------------------------------------------------*/
header{
		/*margin-top:50px;*/
}
.subtitle {
	background:#e5424d;
	/*margin:50px 0;*/
	padding-top:25px;
	width:100%;
}
.red{
	background:#e5424d;
	color:#fff;
}
.red a:hover{
	background:#e5424d;
	color:#282926;
}
.page-header{
	border-bottom:none;
	margin: 30px 0 0 0;
}

/*CONTENUS---------------------------------------------------------*/
h2{color:#e5424d;}
p{background:transparent;}
/*bio*/
.biographie{
	background:#181818;
	opacity:0.90;
	filter:alpha(opacity=90);	
	margin-top:10%;
	margin-bottom:10%;
	line-height:1.2;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	padding: 10px;}
	/*-webkit-animation: fadein 2s; /* Safari and Chrome */
    /*-moz-animation: fadein 5s; /* Firefox */
    /*-ms-animation: fadein 5s; /* Internet Explorer */
    /*-o-animation: fadein 5s; /* Opera */
   /*animation: fadein 5s;}
@keyframes fadein{from{opacity:0;}to{ opacity:0.9;}}
/* Firefox */
/*@-moz-keyframes fadein{from{opacity:0;}to{ opacity:0.9;}}
/* Safari and Chrome */
/*@-webkit-keyframes fadein{from{opacity:0;}to{ opacity:0.9;}}
/* Internet Explorer */
/*@-ms-keyframes fadein{from{opacity:0;}to{ opacity:0.9;}}
/* Opera */
/*@-o-keyframes fadein{from{opacity:0;}to{ opacity:0.9;}}
*/
.textbio{
	color: #ffffff;
}
.biographie img{
	margin-top: 10px; margin-bottom:10px; width:100%;
}

/*news*/
.news{
	color:#ffffff;
	background:#181818;
	opacity:0.90;
	filter:alpha(opacity=90);	
	margin-top:20%;
	margin-bottom:10%;
	line-height:1.2;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	padding: 10px;
}
/*video*/
.video{
	background:#181818;
	opacity:1;
	filter:alpha(opacity=100);	
	margin-top:5%;
	margin-bottom:10%;
	line-height:1.2;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	padding: 10px;
}

/*video*/
.photo{
	background:#181818;
	opacity:1;
	filter:alpha(opacity=100);
	margin-top:5%;
	margin-bottom:10%;
	line-height:1.2;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	padding: 10px;
}

.contact{
	color:#ffffff;
	background:#181818;
	opacity:0.90;
	filter:alpha(opacity=90);	
	margin-top:15%;
	margin-bottom:10%;
	line-height:1.2;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	padding: 10px;
}

/*FOOTER-------------------------------------------------------------*/
.footer{
	background-color: #000000;
	color:#ffffff;
}


@media ( max-width:345px ) {
.footer{
font-size:5px;
}
.photo{
	margin-top:40%;
}
}
@media ( max-width:433px ) {
.footer{
	font-size:15px;
}
.photo{
	margin-top:30%;
}
}

/*Test Alignement*/
/*.vertical-align {
    display:flex;
    align-items:center;
}*/
@media ( min-width:768px ) {
   /* .vertical-align {
        display:flex;
        align-items:center;
    }*/
}
@media ( min-width: 992px ) {
    .vertical-align {
        display:flex;
        align-items:center;
    }
}
@media ( min-width: 1200px ) {
    .vertical-align {
        display:flex;
        align-items:center;
    }
}