@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Comfortaa|Mr+Bedfort|Almendra+Display');

body, html {
height: 100%;
width: 100%;
margin-right: -10px;
padding: 0;
font-weight: 400;
font-size:"1.5";
font-family:"Comfortaa";
color: #777;
background-color: #FFF;
}
.TexteBasicBlanc {
font-weight: 400;
font-size:"1.5";
font-family:"Comfortaa";
color: #FFF;
}
/*Background*/
.bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4 {
  position: relative;
  opacity: 0.65;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  max-width: 100vw;
  margin: 0;
}
.bgimg-1 {
  background-image: url("../pictures/img_Background1.png");
  min-height: 100%;
  text-align: center;
}

.bgimg-2 {
  background-image: url("../pictures/img_Background2.png");
  min-height: 100%;
}
.bgimg-3 {
  background-image: url("../pictures/img_Background3.png");
  min-height: 400px;
  vertical-align: center;
}

.bgimg-4 {
  background-image: url("../pictures/img_Background4.png");
  min-height: 100%;
  vertical-align: middle;
  margin: 0 auto;
}

/************************************************************/
.caption {
  position: relative;
  left: 0;
  padding: 30px;
  width: 100%;
  height: 100%;
  text-align: center;
  color: #000;
}

.caption span.border {
font-family: 'Mr Bedfort', cursive;
background-color:transparent;
font-size:2em;
color: #f7f7f7;
}

h3 {
  text-transform: capitalize;
  font: 200 2.0em Comfortaa, cursive;
  color: #FFF;
  text-align: center;
}
h3::first-letter
{
  letter-spacing: 1px;
  text-transform: capitalize;
  font: bold 2.0em Almendra Display, cursive;
  color: #FFF;
  text-align: center;
}
h4 {
  text-transform: capitalize;
  font: 200 2.0em Comfortaa, cursive;
  color: #777;
  text-align: center;
}
h4::first-letter
{
  letter-spacing: 1px;
  text-transform: capitalize;
  font: bold 2.0em Almendra Display, cursive;
  color: #777;
  text-align: center;
}
/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1024px) {
.bgimg-1, .bgimg-2, .bgimg-3 {
background-attachment: scroll;
}}
/************************************************************/
/*Top Menu*/
/************************************************************/
.menulogo{
margin-top : -10px !important;
height: 80px;
opacity: 0;
}
.active{
color: hotpink !important;
}
.opaque-navbar {
background-color: rgba(0,0,0,0);
/* Transparent = rgba(0,0,0,0) / Translucent = (0,0,0,0.5)  */
height: 80px;
border-bottom: 0px;
transition: background-color .5s ease 0s;
}
.opaque-navbar.opaque {
background-color: rgba(165,226,255,0.30);
height: 80px;
transition: background-color .5s ease 0s;
}
.menulogo.opaque{
margin-top : -10px !important;
height: 80px;
opacity :1;
}
ul.dropdown-menu {
background-color: rgba(165,226,255,0.30);
}
@media (max-width: 992px) {
.opaque-navbar {
background-color: rgba(0,0,0,0);
/* Transparent = rgba(0,0,0,0) / Translucent = (0,0,0,0.5)  */
height: 60px;
border-bottom: 0px;
transition: background-color .5s ease 0s;
}
.menulogo{
margin-top : -10px !important;
height: 60px;
}
}
/************************************************************
/*Intro*/
.PageDeGarde {
width: 100%;
height: 100%;
padding-top: 10%;
text-align: center;
}
.logo {
margin: 0 auto;
width: 90%;
text-align: center;
}
@media screen and (max-width: 700px){
.PageDeGarde {
padding-top: 10%;
padding-bottom: 10%;
}}
@media screen and (max-width: 480px){
.caption span.border {
font-family: 'Mr Bedfort', cursive;
background-color:transparent;
font-size:1.0em;
color: #f7f7f7;
}
.PageDeGarde {
padding-top: 10%;
}

.TexteBasicBlanc {
font-weight: 400;
font-size:"1.3";
font-family:"Comfortaa";
color: #FFF;
}}
/************************************************************/
/*Timer*/
.Timer{
 width: 100%;
 text-align:center;
 font-family: Comfortaa;
 font-size : 1.5em;
 color: white;
}
.TimerGroup{
 display: inline;
 width: 100%;
 text-align:center;
}
.circle{
display: inline-block;
margin:0 auto;
width:100px !important;
height:100px;
border-radius:100%;
background-color:transparent;
border: thick solid;
color:#fff;
text-align:center;
font:100 1.2em Comfortaa;
overflow:hidden;
}
.circle.one-line{line-height:100px;}
.circle.multi-line{
padding-top:25px;
height:100px;
}
@media screen and (max-width: 480px){
.circle {
margin-left: 15px;
margin-right: 15px;
margin-bottom: 15px;
font-weight:bold;
}}
/************************************************************/
/*Date & Video*/
.Board{
vertical-align: top;
margin: 0;
width: 100%;
overflow:auto;
display: table
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.LeftBoard{
display:table-cell;
padding: 50px;
width: 50%;
min-width: 350px;
height: 100%;
background-color: #64d7fe;
vertical-align: top;
text-align: justify;
overflow:auto;
}
.RightBoard{
display:table-cell;
padding: 50px;
width: 50%;
min-width: 350px;
height: 500px;
background-color: #d892f6;
vertical-align: top;
text-align: center;
}
@media screen and (max-width: 700px){
.Board{display:block;}
.LeftBoard{
display:block;
padding: 30px;
width: 100%;
max-height: 100%;
vertical-align: top;
text-align: justify;
overflow:auto;
}
.RightBoard{
display:block;
padding: 30px;
margin:0;
width: 100%;
max-height: 100%;
vertical-align: top;
text-align: justify;
overflow:hidden;
}
}
.Table{
vertical-align: top;
margin: 0;
display: table
}
.LeftTable{
display:table-cell;
padding: 0px;
width: 20%;
min-height: 50px;
vertical-align: middle;
text-align: center;
}
.RightTable{
display:table-cell;
padding: 0px;
padding-left : 10px;
width: 80%;
min-height: 50px;
vertical-align: top;
}
.DateJour{font: bold 1.5em "Comfortaa";color: #FFF;}
.DateMois{font: 100 1.0em "Comfortaa";color: #FFF;}
.DateHeure{font: bold 1.0em "Comfortaa";color: #FFF;}
.DateVille{font: bold 1.0em "Comfortaa";color: deeppink;}
.DateNormal{font: 1.0em "Comfortaa";color: #FFF;}
.DateReserver{
 height: 1.4em;
 background: #d892f6;
 border: 1px solid #d892f6;
 color: #FFF;
 font-size: 1.0em;
 font-weight: bold;
 margin: 5px;
 margin-left:0px;
 padding: 2px;
 vertical-align: middle;
}
/************************************************************/
/*Video Youtube*/
.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}
.video-container iframe,  
.video-container object,  
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
/************************************************************/
/*Story*/
.Story{
margin: 0;
height: 100%;
width: 100%;
text-align: center;
}
.Translucide{
background-color:rgba(0,0,0,0.2)
}
.LeftStory{
position: absolute;
top: 10%;
bottom:10%;
left: 50px;
padding: 30px;
width: 50%;
min-width: 350px;
max-height : 90%;
vertical-align: middle;
text-align: justify;
overflow:auto;
background-color: rgba(255,226,255,0.50);
}
.MiddleStory{
margin: 0 auto;
padding-top: 60px!important;
padding: 30px;
width: 90%;
min-width: 350px;
max-height : 90%;
vertical-align: middle;
text-align: justify;
overflow:hidden;
}
@media screen and (max-width: 700px){
.Story{
margin: 0;
height: 100%;
width: 100%;
text-align: center;
}
.LeftStory{
width:100%;
left: 20px;
right:20px;
top: 10%;
bottom:10%;
max-height: 90%;
font-size: 1.0em;}
.MiddleStory{
width:100%;
left: 20px;
right:20px;
top: 10%;
bottom:10%;
max-height: 90%;
vertical-align: middle;
}}
@media screen and (max-width: 480px){
.Story{
margin: 0;
height: 100%;
width: 100%;
text-align: center;
}
.LeftStory{
top: 0em;
bottom:0em;
left: 0em;
right:0em;
padding: 1.0em;
width:100%;
max-height: 100%;
font-size: 1.0em;
}
.MiddleStory{
width:100%;
max-height: 90%;
vertical-align: middle;
right:0em;
}}
/************************************************************/
/*Personnage*/
.Image{
position : relative;
background-color : #FFF;
margin: 0;
padding: 50px;
height: auto;
width: 100%;
text-align: center;
}
.ContainerImage{
position : relative;
display: table;
}
.LeftImage{
display: table-cell;
width: 50%;
min-width: 350px;
vertical-align: middle;
text-align: center;
}
.RightImage{
display: table-cell;
width: 50%;
min-width: 350px;
vertical-align: middle;
text-align: center;
}
.Img{
width: 100%;
vertical-align: middle;
}
@media screen and (max-width: 480px){
.Image{
position : relative;
background-color : #FFF;
margin: 0;
height: auto;
width: 100%;
text-align: center;
}
.ContainerImage{
display:block;
height:auto;
text-align: center;
margin: 0;
}
.Img{
width: 80%;
vertical-align: middle;
}
.LeftImage{
display:block;
margin:0;
padding : 0.5em 0.5em 0 0.5em;
width: 100%;
height: auto;
vertical-align: top;
text-align: center;
overflow:hidden;
}
.RightImage{
display:block;
margin:0;
padding : 0 0.5em 0 0.5em;
width: 100%;
height: auto;
vertical-align: top;
text-align: center;
overflow:hidden;
}}
@media screen and (max-width: 700px){
.ContainerImage{
display:block;
height:auto;
}
.LeftImage{
display:block;
padding : 20px 20px 0 20px;
width: 100%;
height: auto;
vertical-align: top;
text-align: justify;
overflow:auto;
}
.RightImage{
display:block;
padding : 0 20px 20px 20px;
width: 100%;
height: auto;
vertical-align: top;
text-align: justify;
overflow:auto;
}}

h1{
font-size: 1.5em; /* 25px/16px */
}
#content       
{
font-size: .85em; /* 12/16 */
width: 90%; /* 650/960 */
max-width: 960px;
text-align: left;
margin: 0px auto; /*auto centers the container */
padding: 3.84615384615385%; /* 25/650 */
}
/*CSS3 multiple columns.*/
/* Get em size for colums: 184/16 */   
.columns
{   
-moz-column-width: 11.5em; /* Firefox */
-webkit-column-width: 11.5em; /* webkit, Safari, Chrome */
column-width: 11.5em;
}
/*remove standard list and bullet formatting from ul*/
.columns ul
{
margin: 0;
padding: 0;
list-style-type: none;
}
/* correct webkit/chrome uneven margin on the first column*/
.columns ul li:first-child
{
margin-top:0px;
}