/* 
5px		0.3125em
6px		0.3750em
7px		0.4375em
8px		0.5000em
9px		0.5625em
10px	0.6250em
11px	0.6875em
12px	0.7500em
13px	0.8125em
14px	0.8750em
15px	0.9375em
16px	1.0000em
17px	1.0625em
18px	1.1250em
19px	1.1875em
20px	1.2500em
21px	1.3125em
22px	1.3750em
23px	1.4375em
24px	1.5000em
25px	1.5625em */


/*
Palette Web
#173753
#359be4
#6daedb
#1b4353
#1d70a2
*/

@font-face {
	font-family: IndieFlower;
	src: url(/fonts/indie_flower/indieflower.ttf);
}

@font-face {
	font-family: Roboto;
	src: url(/fonts/roboto_condensed/robotocondensed-regular.ttf);
}

@font-face {
	font-family: Roboto;
	src: url(/fonts/roboto_condensed/robotocondensed-bold.ttf);
	font-weight: bold;
}

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	background: transparent;
	margin: 0;
	padding: 0;
}

html {
    font-family: Roboto, sans-serif;
	font-size: 1em;
}

body {
	background: #fff url(/imgs/design/background.jpg) no-repeat center center fixed;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
}

body:after{
	content:"";
	position:fixed; /* stretch a fixed position to the whole screen */
	top:0;
	height:100vh; /* fix for mobile browser address bar appearing disappearing */
	left:0;
	right:0;
	z-index:-1; /* needed to keep in the background */
	background: url(/imgs/design/background.jpg) center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

img {
	border: none;
}

/* ---------------------------------------- Header ---------------------------------------- */

div#menu_small_overlay::-webkit-scrollbar {
  display: none;
}

div#menu_small_overlay {
	position: fixed;
	z-index: 20;
	top: 75px;
	right: 0;
	width: 0;
	/* width: 100%; */
	overflow-x: hidden;
	overflow-y: scroll;
	min-height: calc(100vh - 65px);
	background: rgba(255,255,255,0.9);
	-ms-overflow-style: none;
}

div#menu_small_overlay a {
	display: block;
	color: #000;
	text-decoration: none;
	padding: .5em 0 .5em 1em;
}

#menu_small_overlay ul.lvl_1 {
    list-style-type: none;
    margin: 0;
    padding: 0;
	text-align: left;
	white-space:nowrap
}

#menu_small_overlay li.lvl_1 {
	display: block;
	cursor: pointer;
    margin: 0;
    font-family: IndieFlower, sans-serif;
    font-size: 1.5em;
	font-weight: bold;
	color: #000;
	border-bottom: 1px solid #000;
}

#menu_small_overlay li.lvl_1:first-child {
	border-top: 1px solid #000;
}

#menu_small_overlay li.lvl_1:hover {
	background: #ffdbdb;
}

div#header {
	position: fixed;
	z-index: 10;
	top: 0;
	left: 0;
	width: 100%;
}

div#ban {
	width: 100%;
	background: #fff;
}

#ban div.left {
    float: left;
	padding: 5px;
}

img.logo {
    float: left;
	height: 65px;
	width: 210px;
	cursor: pointer;
}

img.slogan {
    float: left;
	height: 65px;
	width: 200px;
	display: none;
}

#ban div.right {
    float: right;
	padding: 0 5px 0 0;
}

div#menu_big {
	display: none;
}

#menu_big a {
	text-decoration: none;
	color: #333;
	display: block;
}

#menu_big #big_menu2 a {
	padding: 0.875em 1em 0.875em 1em;
}

#menu_big #big_menu2 a:hover {
	color: #ec2345;
}

#big_menu, #big_menu ul{
	padding: 0;
	margin: 0;
	list-style: none;
}

#big_menu li{
	display: inline-block;
	position: relative;
	cursor: pointer;
	padding: 1em 2em 0 2em;
	font-family: IndieFlower, sans-serif;
	font-size: 1.125em;
	font-weight: bold;
	background: #fff;
	color: #333;
	border-top: #fff 3px solid;
	-webkit-transition: all 200ms ease-in-out;
	-moz-transition: all 200ms ease-in-out;
	-o-transition: all 200ms ease-in-out;
	transition: all 200ms ease-in-out;
}

#big_menu ul li{
	display: inherit;
	font-size: 0.875em;
	padding: 0;
	text-align: center;
    border: 0;
}

#menu_big li.active {
    border-top: #6daedb 3px solid;
}

#big_menu ul{
	position: absolute;
	z-index: 1000;
	max-height: 0;
	left: 0;
	right: 0;
	overflow: hidden;
	-webkit-transition: all 250ms ease-in-out 300ms;
	-moz-transition: all 250ms ease-in-out 300ms;
	-o-transition: all 250ms ease-in-out 300ms;
	transition: all 250ms ease-in-out 300ms;
}

#big_menu li:hover ul{
	max-height: 50em;
	height: auto;
}

#big_menu li.menu1:not(.active):hover {
    border-top: #ec2345 3px solid;
}

#big_menu2 li.menu2:hover {
    border: 0;
	background: #eee;
	color: #ec2345;
}


#big_menu li:hover li {
	color: #fff;
	text-transform: inherit;
}


div#menu_small {
	display: none;
}

#menu_small ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#menu_small li {
	display: inline-block;
	cursor: pointer;
    margin: 0;
	padding: 0.5em 0.5em 0 0.5em;
    font-family: IndieFlower, sans-serif;
    font-size: 1.5625em;
	font-weight: bold;
	color: #333;
}

div.header_bottom {
    clear: both;
	width: 100%;
	height: 30px;
	background-color: #359be4;
    background: #fff;
    background: linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));
}

/* -------------------------------- Footer----------------------------------------- */


.footer {
	z-index: 1;
    height: 40px;
	background-color: #23282e;
    color: #cecece;
    text-align: center;
    font-size: 0.625em;
    padding: 1.25em 0 0 0;
}

/* ---------------------------------------- Contents ---------------------------------------- */


.page_block {
    position:relative;
	background-color: rgba(255,255,255,0.9);
	padding: 0.625em;
	margin: 0.625em 0.3125em;
    text-align: center;
	border: 1px solid #ccc;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
	overflow: hidden;
}

.block_title {
	color: #173753;
	padding: .75em 1em;
    text-align: left;
	border-bottom: 2px solid #173753;
}

.block_title p {
	font-family: IndieFlower, sans-serif;
	font-size: 1.125em;
	font-weight: bold;
}

.block_contents {
	padding: 1em .75em 0 .75em;
}

.block_contents p {
	color: #000;
	text-align: justify;
	font-size: 0.875em;
	padding: 0 0 1em 0;
}

.block_contents p.pagecontent {
	color: #000;
	text-align: justify;
	font-size: 0.875em;
	padding: 0 0 .5em 0;
}

.block_contents a {
	color: #173753;
	text-decoration: none;
}

.block_contents a:hover {
	color: #ec2345;
}

.error_message img {
	vertical-align: middle;
	padding: 0 20px 0 0;
}

.content_img_float_right {
	float: right;
	width: calc(50% - 2em);
	margin: 0 0 1em 1em;
	border: 1px solid #000;
}

.content_img_float_left {
	float: left;
	width: calc(50% - 2em);
	margin: 0 0 1em 1em;
	border: 1px solid #000;
}

.block_footer_date {
	border-top: 2px solid #173753;
	color: #173753;
	padding: 1em .75em;
	text-align: right;
	font-size: 0.75em;
}

.block_contents p.facebook {
	color: #4267b2;
}

.block_contents p.title {
	color: #173753;
    text-align: left;
    font-size: 1em;
	padding: 0 0 0.375em 0;
}

.block_contents p.titlecontentfirst {
	color: #000;
    text-align: left;
    font-size: 1em;
	font-weight: bold;
	padding: 0 0 .75em 0;
}

.block_contents p.titlecontent {
	color: #000;
    text-align: left;
    font-size: 1em;
	font-weight: bold;
	padding: .75em 0;
}

.block_contents p.contentsign {
	font-family: IndieFlower, sans-serif;
	color: #000;
    text-align: left;
    font-size: 1.125em;
	font-weight: bold;
	padding: 1em 0 .5em 0;
}

.block_contents a.link, .block_contents a.mail {
	color: #173753;
    text-decoration: none;
}

.block_contents a.link:hover, .block_contents a.mail:hover {
	color: #ec2345;
    text-decoration: none;
}

.page_block_small {
	display: none;
}
	



.aside {
	display: none;
	position:relative;
	background-color: rgba(255,255,255,0.9);
	padding: 10px 10px 0 10px;
	margin: 10px 5px;
	border: 1px solid #ccc;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.aside_title {
	border-bottom: 2px solid #173753;
}

.aside_title p {
	font-family: IndieFlower, sans-serif;
	font-size: 1.125em;
	font-weight: bold;
	color: #173753;
	padding: .75em 1em;
    text-align: left;
}

.aside_contents {
	padding: 1em .75em .5em 1em;
}

.aside_contents p {
	color: #000;
    text-align: justify;
    font-size: 0.875em;
	padding: 0 0 1em 0;
}

.aside_contents p.facebook {
	color: #4267b2;
}

.aside_contents p.title {
	color: #173753;
    text-align: left;
    font-size: 1em;
	padding: 0 0 0.375em 0;
}

.aside_contents a.link, .aside_contents a.mail {
	color: #173753;
    text-decoration: none;
}

.aside_contents a.link:hover, .aside_contents a.mail:hover {
	color: #ec2345;
    text-decoration: none;
}

/* Styles calendrier */

.aside_contents div.timelinepassed, .block_contents div.timelinepassed {
	border-left: 3px solid #000;
	margin: 0 0 0 .3125em;
	padding: .3125em 0;
}

.aside_contents div.timelineavenir, .block_contents div.timelineavenir {
	border-left: 3px solid #000;
	margin: 0 0 1em .3125em;
	padding: .3125em 0;
}

.aside_contents p.titlecalendar, .block_contents p.titlecalendar {
	color: #173753;
    text-align: left;
    font-size: 1.0625em;
	padding: 0.375em 0;
}

.aside_contents p.eventcalendar, .block_contents p.eventcalendar {
    font-size: 0.75em;
    text-align: left;
	color: #000;
	cursor: pointer;
	padding: 0;
	margin: 0.375em 0;
	
}

.aside_contents p.eventcalendar:hover, .block_contents p.eventcalendar:hover {
    background: #eea1a1;
	
}

.aside_contents a.linkcalendar, .block_contents a.linkcalendar {
	display: block;
	color: #173753;
    text-decoration: none;
}

.aside_contents span.datecalendar, .block_contents span.datecalendar {
	font-family: IndieFlower, sans-serif;
    font-size: 1.5em;
}

/* Page d'accueil */
div.events_home {
	float: left;
	width: 50%;
	text-align: center;
	/* border: 1px solid black; */
}

div.events_home p {
	width: 100%;
	font-family: IndieFlower, sans-serif;
	font-size: 1em;
	font-weight: bold;
	text-align: center;
	margin: 0;
	padding: 0;
}

div.events_home p.icon {
	width: 100%;
	font-family: IndieFlower, sans-serif;
	font-size: 1em;
	font-weight: bold;
	text-align: center;
	margin: 0;
	padding: 0;
	color: #980120;
}

div.events_home a.iconlink {
	color: #980120;
}

div.events_home a.iconlink:hover {
	color: #cb4460;
}



video {
    width: 100%;
    height: auto;
}

/* ---------------------------------------- Formulaire de contact ---------------------------------------- */

label {
	cursor: pointer;
}

form#Contact_Form {
	width: 90%;
	margin: 0 auto 2em auto;
	padding: 0;
	font-family: Roboto, sans-serif;
	font-size: 0.875em;
	color: #000;
	text-align: center;
}

#Contact_Form p {
	width: 100%;
	margin: 0;
	padding: .75em 0 0 0;
	font-family: Roboto, sans-serif;
	font-size: 1em;
	color: #000;
	text-align: left;
}

#Contact_Form input.text {
	width: 100%;
	margin: 0;
	padding: 1px;
	border: 1px solid #7d7e7d;
	background: #fafafa;
	font-family: Roboto, sans-serif;
	font-size: 1em;
	color: #000;
	text-align: left;
}

#Contact_Form textarea {
	width: 100%;
	resize: vertical;
	margin: 0;
	padding: 1px;
	border: 1px solid #7d7e7d;
	background: #fafafa;
	font-family: Roboto, sans-serif;
	font-size: 1em;
	color: #000;
	text-align: left;
}


#Contact_Form button.bt {
	/* display: inline-block; */
	display: none;
	margin: 1em auto;
	padding: .5em 2em .5em 2em;
	border: 1px solid #666;
	border-radius: .5em;
	box-shadow: .125em .125em .25em #555;
	background: #ffffff;
	background: -webkit-linear-gradient(to top left, #abbaab, #ffffff);
	background: linear-gradient(to top left, #abbaab, #ffffff);
	font-family: Roboto, sans-serif;
	font-size: 1em;
	color: #000;
	cursor: pointer;
}

#Contact_Form button.bt:hover {
	background: #abbaab;
	background: -webkit-linear-gradient(to top left, #ffffff, #abbaab);
	background: linear-gradient(to top left, #ffffff, #abbaab);
}





/* ---------------------------------------- Containers ---------------------------------------- */

[class*="col-"] {
    float: left;
    width: 100%;
}

.contents {
	z-index: 1;
	min-height: calc(100vh - 150px);
	width: 100%;
	margin: 100px auto 10px auto;
}

.contents:after {
    content: "";
    clear: both;
    display: table;
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {

    .col-s-1 {width: 8.33%;}
    .col-s-2 {width: 16.66%;}
    .col-s-3 {width: 25%;}
    .col-s-4 {width: 33.33%;}
    .col-s-5 {width: 41.66%;}
    .col-s-6 {width: 50%;}
    .col-s-7 {width: 58.33%;}
    .col-s-8 {width: 66.66%;}
    .col-s-9 {width: 75%;}
    .col-s-10 {width: 83.33%;}
    .col-s-11 {width: 91.66%;}
    .col-s-12 {width: 100%;}

	/* body { */
		/* background-attachment: scroll; */
	/* } */
	
	div#menu_small {
		display: block;
	}

	div#menu_small_overlay {
		display: block;
	}
	
	div#menu_big {
		display: none;
	}

	.contents {
		width: 100%;
	}

	.page_block_small {
		display: block;
	}
	
	.aside {
		display: none;
	}

	.footer {
		font-size: 0.75em;
	}

	div.events_home {
		width: 50%;
	}
	
} 

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {

    .col-s-1 {width: 8.33%;}
    .col-s-2 {width: 16.66%;}
    .col-s-3 {width: 25%;}
    .col-s-4 {width: 33.33%;}
    .col-s-5 {width: 41.66%;}
    .col-s-6 {width: 50%;}
    .col-s-7 {width: 58.33%;}
    .col-s-8 {width: 66.66%;}
    .col-s-9 {width: 75%;}
    .col-s-10 {width: 83.33%;}
    .col-s-11 {width: 91.66%;}
    .col-s-12 {width: 100%;}

	/* body { */
		/* background-attachment: scroll; */
	/* } */
	
	div#menu_small {
		display: block;
	}

	div#menu_small_overlay {
		display: block;
	}
	
	div#menu_big {
		display: none;
	}

	.contents {
		width: 100%;
	}

	.page_block_small {
		display: block;
	}
	
	.aside {
		display: none;
	}

	.footer {
		font-size: 0.75em;
	}

	div.events_home {
		width: 50%;
	}
	
} 

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {

    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}



	img.slogan {
		display: block;
	}
	
	div#menu_small {
		display: block;
	}

	div#menu_small_overlay {
		display: block;
	}
	
	div#menu_big {
		display: none;
	}

	.contents {
		width: 100%;
	}

	.page_block_small {
		display: block;
	}
	
	.aside {
		display: none;
	}

	.footer {
		font-size: 0.75em;
	}

	div.events_home {
		width: 20%;
	}
	
} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
	
    .col-w-1 {width: 8.33%;}
    .col-w-2 {width: 16.66%;}
    .col-w-3 {width: 25%;}
    .col-w-4 {width: 33.33%;}
    .col-w-5 {width: 41.66%;}
    .col-w-6 {width: 50%;}
    .col-w-7 {width: 58.33%;}
    .col-w-8 {width: 66.66%;}
    .col-w-9 {width: 75%;}
    .col-w-10 {width: 83.33%;}
    .col-w-11 {width: 91.66%;}
    .col-w-12 {width: 100%;}


	img.slogan {
		display: none;
	}
	
	div#menu_small {
		display: none;
	}

	div#menu_small_overlay {
		display: none;
	}
	
	div#menu_big {
		display: block;
	}

	.contents {
		width: 100%;
	}

	.page_block_small {
		display: none;
	}
	
	.aside {
		display: block;
	}

	.footer {
		font-size: 0.75em;
	}

	div.events_home {
		width: 20%;
	}
	
} 


/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {

    .col-fixed-1 {width: 780px;}
    .col-fixed-2 {width: 390px;}
    .col-fixed-3 {width: 1170px;}

	img.slogan {
		display: block;
	}
	
	div#menu_small {
		display: none;
	}

	div#menu_small_overlay {
		display: none;
	}
	
	div#menu_big {
			display: block;
	}

	.contents {
		width: 1170px;
	}

	.page_block_small {
		display: none;
	}
	
	.aside {
		display: block;
	}

	.footer {
		font-size: 0.75em;
	}

	div.events_home {
		width: 20%;
	}
	
}


/* XXxtra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1600px) {

    .col-fixed-w-1 {width: 1180px;}
    .col-fixed-w-2 {width: 390px;}
    .col-fixed-w-3 {width: 1570px;}

	img.slogan {
		display: block;
	}
	
	div#menu_small {
		display: none;
	}

	div#menu_small_overlay {
		display: none;
	}
	
	div#menu_big {
			display: block;
	}

	.contents {
		width: 1570px;
	}

	.content_img_float_right {
		width: 30%;
	}

	.content_img_float_left {
		width: 30%;
	}

	.page_block_small {
		display: none;
	}
	
	.aside {
		display: block;
	}

	.footer {
		font-size: 0.75em;
	}

	div.events_home {
		width: 20%;
	}
	
}