@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700');
@import url('https://fonts.googleapis.com/css?family=PT+Serif:700');
@import url(elements.css);
@import url(responsive.css);


/** PAGE **/
html, body{
	margin: 0;
	padding: 0;
	font-family: 'Roboto';
	overflow-x: hidden;
}
#page{
	max-width: 1400px;
	margin-left: auto;
	margin-right: auto;
}

/** GLOBAL **/
#text{
	font-size: 13px;
}
h1{
	text-transform: uppercase;
}


/** HEADER + NAV **/
.logo{
	position: absolute;
	display: flex;
}
.logo img{
	margin: auto;
}
.red{
	width: 100vw;
	height: 40px;
	background: linear-gradient(to right, rgba(255,0,0,0.8),rgba(255,0,0,0.8),rgba(255,0,0,0.8), rgba(255,0,0,0));
	color: #FFF;
	font-family: 'Roboto';
	font-weight: 300;
	text-align: center;
	font-size: 30px;
	letter-spacing: 12px;
	margin: auto auto 0 auto;
  letter-spacing: 1vw;
}

.red a{
  color: #FFF;
  text-decoration: none;
}
.header{
	display: flex;
	height: 190px;
	position relative;
	background: url('/images/bandeau-nb.jpg') no-repeat;
	background-position: right;
	background-size: calc(1400px - 170px);
}
.header .burger{
  display: none;
}
#nested ul{
	list-style-type: none;
}
#nested > ul{
	margin:  6px 0px;
	padding: 0px;
	display: flex;
	list-style-type: none;
	font-family: 'Roboto';
	font-size: 12px;
	justify-content: space-around;
	text-transform: uppercase;
}

#nested > ul > li{
	background-color: #DDD;
	padding: 12px 0px;
	text-align: center;
	flex-grow: 1;
	margin: 0 5px;
}
#nested > ul > li:hover, #nested > ul > li.active{
	background-color: #445e73;
}
#nested > ul > li:hover a, #nested > ul > li.active a{
	color: #FFF;
}

#nested > ul > li > a{
	text-decoration: none;
	color: #000;
}

#nested ul li ul{
	display: none;
}

#nested ul > li:hover > ul, #nested ul > li > ul:hover{
	position: absolute;
	display: flex;
	background-color: #fff;
	z-index: 5000;
	max-width: 1400px;
	flex-direction: column;
	padding-left : 0;
	margin-top: 15px;
	min-width: 171px;
	padding : 0 20px;
	text-align: left;
}
#nested ul > li:hover:first-child > ul,
#nested ul > li:first-child > ul:hover{
	
}

#nested ul > li:hover > ul a, #nested ul > li > ul:hover a{
	color: #f50000;
	text-decoration: none;
	flex-grow: 1;
}
#nested ul > li:hover > ul a>span, #nested ul > li > ul:hover a>span{
	display : block;
	margin: 5px;
}

#nested ul > li > ul > li.active{
	text-decoration: underline;
	color: #f50000;
}

#nested ul > li > ul > li{
}

#nested ul > a > img{
	height: 33px;
	width: 33px;
	margin-top: 5px;
	margin-right: 5px;
}

/** BOX CALENDRIER **/
.box_calendrier{
	width: 400px;
	height: 230px;
}
.box_calendrier .widgetContainer .news{
	margin: 8px;
	width: 234px;
}
.box_calendrier .widgetContainer .news .date{
	display: none;
}
.box_calendrier .widgetContainer{
	background-color: #f50000;
	color: white;
	width: 250px;
}
.box_calendrier{
	background-color: #e3e7ea;
  display: flex;
  flex-wrap: wrap;
}
.box_calendrier h4{
	text-transform: uppercase;
	color: #f50000;
  font-size: 20px;
  margin: 0px 8px;
  line-height: 50px;
  width: 250px;
}
.box_calendrier a{
	text-decoration: none;
	color: white;
}
.box_calendrier h3{
	margin:0;
	/*line-height: 12px;*/
}
.box_calendrier .news span{
	font-size: 10px;
  display: block;
	overflow: hidden;
  height: 18px;
}
.box_calendrier .linksmore{
	/*display: none;*/
}
.box_calendrier .widgetContainer{
	height: 122px;
	overflow: hidden;

}
.box_calendrier .widgetContainer .three{
	width: 250px;
	display: inline-block;
}
.arrow{
	width: 250px;
	text-align: center;
	color: white;
	background-color: #f50000;
	cursor: pointer;
  user-select: none;
  -moz-user-select: none;
}
.calendar{
  margin-left: 10px;
}
.box_calendrier .buttons{
  flex-grow: 1;
}
.box_calendrier .calendar{
  width: 250px;
}
.box_calendrier .buttons ul{
  list-style-type: none;
  padding: 0;
  margin-left: 20px;
}
.box_calendrier .buttons li{
  width: 130px;
  background-color: white;
  text-align: center;
  padding: 6px;
  margin: 5px 0px;
  font-size: 15px;
  font-weight: 700;
}
.box_calendrier .buttons a{
  color: #f50000;
}

/** WIDGET STRUCTURE **/
.accueil #article{
  display: none;
}
.accueil #contentsInner{
  display: flex;
  flex-wrap: wrap;
  max-width: 1380px;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
}
.boxImg img{
  margin-left: auto;
  margin-right: auto;
  width: 80%;
  display: block;

}
#container .widget.boxImg{
    background-color: rgba(255,0,0,0.8);
}
.sliderbox h4, .ytVideo h4, .boxImg h4, .location h4{
  display: none;
}
#contentsInner .widget{
  background-color: #e3e7ea;
  margin: 5px;
}
.boxImg2{
  /*background-image: url('/images/courses.png');
  background-size: 220px 231px;*/
  background-color: #435E73!important;
}
/*.boxImg2 p{
  display: none;
}*/

.boxImg2 h4 { font-family: 'Roboto'; font-size: 20px; padding-left: 15px; max-width: 150px; color: #E6BC65; margin-top: 20px; margin-bottom: 10px; }
.boxImg2 .widgetContainer { padding-left: 20px; }
.boxImg2 .widgetContainer img { transform: rotateZ(-3deg); filter: drop-shadow(4px 4px 8px rgba(0,0,0,0.35)); max-width: 130px; width: 100%; height: auto; }

.widget.widgetText.location.col2 { min-height: 230px; height: auto; }

.col4{
  width: 910px;
}
.col2{
  width: 450px;
}
.col1{
  width: 220px;
}



/** SLIDERBOX **/
.sliderbox table{
	display: none;
}
.sliderbox .textbox h3{
	margin: 0;
	color: #FFF;
	text-decoration: none;
	margin-top: 50px;
	text-align: center;
	margin:auto auto 0 auto;
	width: 150px;
	font-weight: normal;
	font-family: 'PT Serif';
}
.sliderbox .textbox{
	margin-left: 280px;
	width: 200px;
	height: 230px;
	display: flex;
	flex-direction: column;
	background-color: rgba(255,0,0,0.6);

}
.sliderbox .textbox a{
	text-align: center;
	margin:20px auto auto auto;
	text-decoration: none;
	color: #F00;
	background-color: #FFF;
  font-weight: 700;
	padding: 5px;
}
.sliderbox .slide{
	background-size: cover;
	float: right;
	height: 230px;
	width: 910px;
	position:absolute;
}
.sliderbox .inner{
	width: 910px;
	height: 230px;
	overflow:hidden;
	position: relative;
}
.sliderbox .widgetContainer{
	display: inline-block;
	width: 910px;
	height: 230px;
	overflow: hidden;
}
.sliderbox .left{
	position: absolute;
	top: calc(50% - 16px);
	left: 10px;
	z-index: 5000;
	cursor: pointer;
	color: #f50000;
	width: 32px;
	background-color: #FFF;
	border-radius: 16px;
}
.sliderbox .right{
	position: absolute;
	top: calc(50% - 16px);
	right: 10px;
	z-index: 5000;
	cursor: pointer;
	color: #f50000;
	width: 32px;
	background-color: #FFF;
	border-radius: 16px;
}

.sliderbox .slide:nth-child(3){
	z-index: 8;
}
.sliderbox:nth-child(4){
	z-index: 4;
}
.sliderbox .slide:nth-child(5){
	z-index: 1;
}



/** LOCATION **/
.location .widgetContainer{
  width: 200px;
  background-color: rgba(255,0,0,0.7);
  height: 100%;
  display: flex;
}
.location{
	height: 230px;
    background-image: url('/images/support.jpg');
    background-size: cover;
}
.location p{
  margin: auto auto 10px 10px;
  color: #FFF;
  line-height: 30px;
	font-size: 28px;
	width: 170px;
	font-family: 'PT Serif';
}

.location p a{
  text-align: center;
	text-decoration: none;
	color: #f50000;
	background-color: #FFF;
	padding: 5px;
  text-transform: uppercase;
  font-weight: 700;
	font-size: 14px;
	width: 100px;
	font-family: 'Roboto';
}

/** FOOTER **/
#footer{
  height: 100%;
}
#footerInner{
  max-width: 1400px;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  background-color: #e3e7ea;
}
#footerInner .pictos{
  display: flex;

}

#footerInner .pictos .box{
  height: 45px;
  margin:5px 3px;
  background-color: #435e73;
  color: #FFF;
  flex-grow: 1;
  text-align: center;
  text-transform: uppercase;
  display: flex;
  font-weight: 400;
}
#footerInner .pictos .box .svg-inline--fa{
  margin-right: 5px;
}
#footerInner .pictos .box .text{
  margin: auto;

}
#footerInner .pictos .box .text a{
  color: #FFF;
  text-decoration: none;
}
#footerInner .pictos .box .text img{
  display: block;
  height: 30px;
  width: auto;
}
#footerInner .pictos .box:last-child{
  background-color: #d6252c;
}
#footerInner .coords{
  display: flex;
  justify-content: space-between;
}
#footerInner .coords .right{
  text-align: right;
  margin-right: 10px;
  margin-top: 10px;
}
#footerInner .coords .right a{
  color:inherit;
}
#footerInner .coords .left{
  display: flex;
}
#footerInner .coords .left img{
  margin: 10px;
}
#footerInner .coords .left .address{
  margin-top: auto;
  margin-bottom: auto;
}
#footerInner .coords p{
  margin: 0;
  font-size: 12px;
}

/* CONTENT */
#contentsInner #article{
	width: 90%;
	padding-left: 5%;
	padding-right: 5%;
	margin-left: auto;
	margin-right: auto;
}
#contentsInner #article a{
	color : #f50000;
}
#contentsInner h2{
	color : #f50000;
	font-family: 'PT Serif';
}

/* COMMENT PARIER */
.parier .simpleText h3{
	text-transform: uppercase;
	text-align: center;
	color: #c99716;
	font-size: 20px;
}
.parier .savoirJouer, .parier .typesParis{
	display: flex;
}
.parier .savoirJouer .simpleText{
	margin: 25px auto;
	font-size: 14px;
	flex-grow: 1;
	max-width: 300px;

}
.parier .typesParis .simpleText{
  margin: 25px auto;
  font-size: 14px;
  flex-grow: 1;
  max-width: 260px;
}
.parier .typesParis .simpleText p{
	width: 90%;
	margin-left: auto;
	margin-right: auto;
}
.parier .typesParis .simpleText{
	background-color: #f4ead0;
}
.parier .simpleText p > img{
	margin-top: 15px;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
 /* EVENT PAGE DEDIEE */
#event_list{
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: center;
	max-width: 970px;
    margin: auto;
}
#event_list .pager{
	width: 100%;
	text-align: center;
}
#event_list h2{
	width: 100%;
}
.event_list_memo{
	width: 100%;
}
#event_list .linksmore .LinkIn{
	color: #FFF;
text-decoration: none;
width: 100%;
}
#event_list .linksmore{
	background-color: #2c4457;
	width: 100%;
	text-align: center;
	height: 30px;
}
#event_list .event_txt{
	align-self: flex-end;
	width: 100%;
}
 #event_list .event{
	 width: 31.333%;
	 height: 220px;
	 background-color: #445e73;
	 color: #FFF;
	 margin: 10px 1%;
	 display: flex;
	 flex-wrap: wrap;
	 flex-direction: row;
 }
 
  #event_list .event .date{
		text-transform: uppercase;
		font-size: 19px;
		font-weight: bold;
		margin: 8px;
	}

  #event_list .event h3{
		margin: 8px;
		font-size: 15px;
		text-decoration: none;
		font-weight: normal;
	}
	.pager{
		height: 30px;
	}
	.pager a{
		text-decoration: none;
		color: #000;
	}
	.pager .pager_current_page{
		color: #cb0700;
		font-size: 18px;
	}


	#event_list .event.premium .linksmore{
		background-color: #cb0700;
	}
	#event_list .event.premium{
		background-color: #f50000;
	}
	#event_list > h2, #event_list > .event_list_memo{
		display: none;
	}


div#event_list .event:first-of-type {
    width: 64.333%;
	animation: bounce-left 0.8s both, coursepulse 4s infinite;
}
div#event_list .event:first-of-type .date {
    font-size: 28px;
}
div#event_list .event.premium:first-of-type {
	animation: bounce-left 0.8s both, coursepulsered 4s infinite;
}

@keyframes coursepulse {
	0% {background-color: #445e73;}
	33% {background-color: #1f4d73;}
	66% {background-color: #0b78a3;}
	100% {background-color: #445e73;}
}
@keyframes coursepulsered {
	0% {background-color: #f50000;}
	33% {background-color: #9c0000;}
	66% {background-color: #ff2600;}
	100% {background-color: #f50000;}
}


/**
 * ----------------------------------------
 * animation bounce-left
 * ----------------------------------------
 */

@keyframes bounce-left {
  0% {
    -webkit-transform: translateX(-48px);
            transform: translateX(-48px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  40% {
    -webkit-transform: translateX(-26px);
            transform: translateX(-26px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
	background-color: #1f4d73;
  }
  65% {
    -webkit-transform: translateX(-13px);
            transform: translateX(-13px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  82% {
    -webkit-transform: translateX(-6.5px);
            transform: translateX(-6.5px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  93% {
    -webkit-transform: translateX(-4px);
            transform: translateX(-4px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
	background-color: #445e73;
  }
  25%,
  55%,
  75%,
  87%,
  98% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  100% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
}

	/** FORMULAIRE **/
	fieldset{
		border:none;
		background-color: #e3e7ea;
	}
	fieldset legend{
		margin-top: 50px;
		text-transform: uppercase;
		color: #c99716;
		font-weight: bold;
		font-size: 20px;
	}
	input, textarea{
		border:1px solid #445e73;
	}
	input[type="submit"]{
		background-color: #445e73;
		color: #FFF;
	}
	input[type="reset"]{
		border: none;
	}
	input[type="submit"],input[type="reset"]{
		width: 110px;
		height: 40px;
		font-size: 18px;
		margin-top: 5px;
		cursor:pointer;
		text-transform: uppercase;
	}
	.form_creator_footer{
		font-size: 10px;
	}
	.errorForm{
		color: #F50000;
		font-size: 10px;
	}
	fieldset .row{
		margin-bottom: 10px;
	}

/* page résultats */
.resultats #article{width:100% !important;padding:0 !important}
.resultats .result{display:block;float:left;width:100%;max-width:450px;padding:20px 10px 0 0;text-align:center}
.resultats #resultat_div{margin-left:20px}
.resultats .result p{text-align:center !important;padding:15px;line-height:24px}
.resultats .result a.linkText{display:block;width:30%;text-align:center;text-decoration:none;background-color:#f50000;color:#fff!important;padding:7px 0; margin:0 auto;font-weight:600;border:1px solid #fff}
.resultats .result a.linkText:hover{border:1px solid #f50000;color:#f50000!important;background-color:#fff}

/* formulaire de commande photos */
.commande_photo label{display:block;}
.commande_photo h3{color:#445e73}
.multi_radio input[type="radio"]{float:left}
.multi_radio{margin-top:10px;display:block}
input[type="text"]{height:15px;margin:5px 0 0;padding:5px}
input[type="text"],textarea{width:100%;max-width:400px}
.calendar{ background-color: #fff;padding: 15px;margin-left:0px !important}
.commande_photo #captcha{margin-top:15px}
.commande_photo  .captcha_zone{margin-left:10px}
.commande_photo  .submit{margin:0 0 20px 0}
.commandez_une_photo_d_arrivee #formsThanks{display: block;width: 100%;text-align: center;margin: 40px 0;font-size: 1.2em;}

.etiquette{display: block;float: left;margin:0 5px 0px 0;padding: 1px 5px;background-color: #f50000;color: #fff;}
.le_jour_des_courses .medias{overflow:hidden}
.demi{width:45%;float:left;padding:0 2%}
.firstdemi{ border-right:1px solid #e3e7ea}

.infrastructures .textAndImages, .grands_rendez-vous .textAndImages, .hors_courses .textAndImages{min-height:250px}
.infrastructures .textAndImages ul{margin-left:20px}

.behavior_gal { margin: auto; }
#page .galleria-container { background: white; }
#page .galleria-thumbnails-container { display: none; }