body, html {margin:0; padding:0;  }
html { }

@font-face {
    font-family: 'brandon_grotesqueregular';
    src: url('../webfonts/brandon_reg-webfont.woff2') format('woff2'),
         url('../webfonts/brandon_reg-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'brandon_grotesqueblack';
    src: url('../webfonts/brandon_blk-webfont.woff2') format('woff2'),
         url('../webfonts/brandon_blk-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}



body {color:#1b1f31; font-family: 'roboto', sans-serif; font-weight:400; font-size:13px;
background-position:left top; background-repeat: no-repeat;background-attachment:fixed;
background-color: #ffffff;/*background: linear-gradient(180deg, rgba(152,212,218,1) 60%, rgba(42,81,140,1) 120%); */
/*background-size:cover; */ }

div {display:block}
.colored { color:#ffff00}

.messbox { display:block;margin:0 0 20px 0}
.messbox span i { display: inline-block; font-size:25px; color:#5ed17d; margin:0 5px 0 0}
.messbox span i.error {color: inherit;}
.messbox span { font-size:20px; display:block; margin:15px 0}
.messbox p { margin-bottom:15px;}
.messbox a {}

.error {color:#F00}


.offline { display: flex;background:#1b1f31;
    vertical-align: middle;
    text-align: center; height:100%}
	
.offline .logo {    margin: auto;}	
.offline h1 { color:#ffffff; margin-top:25px; font-family: 'brandon_grotesqueblack', sans-serif; text-transform:uppercase; font-size:18px; letter-spacing:1px }	

/*typo*/
h1,h2,h3 { display:block; margin:0; padding:0 0 10px 0; font-family: 'brandon_grotesqueblack'; text-transform:uppercase}
h1 {padding:0; font-weight:400; font-size:22px; line-height:25px; margin-bottom:8px}
h2 { font-size:15px;  padding:0 0 10px 0}
h3 { font-size:15px; }
h4 { font-size:15px;  padding:0 0 10px 0; margin:0}
.subTitle {font-size:18px; line-height:26px; display:block;}
* b, * strong {font-weight:500}
p {margin:0 0 20px 0 ; padding:0; }
.description {color:#1b1f31; line-height:22px}
p.center {margin:0 auto 20px auto ; padding:0; text-align:center }

ul {display:block; margin:0; padding:0; border-left:1px solid #f1f1f1}
ul li { display:block; padding:3px 0 3px 12px; list-style:circle}
ul li i {float:left; margin:2px 0 0 -12px; font-size:11px}
/*elements*/
hr {display:block; margin:20px 0 18px 0; width:100%; border:0; border-top:1px solid #f2f3f2}
hr.full {display:block; margin:0; width:100%;}
hr.sep {border:0}
img {max-width:100%}
a, a:visited { text-decoration:none; cursor:pointer}
a.small {border-bottom:1px dotted #1b1f31; font-size:11px; color:#1b1f31; display:inline-block; padding-bottom:3px; margin:6px 0 0 0}
a.small:hover {color:#98d4da}

a.small i {display:inline-block; width:15px;}
a.color{ color:#455d8b; border-bottom:1px dotted #455d8b; display:inline-block; padding-bottom:1px}

a.linkIcon, a.linkIcon:visited {display:inline-block; color:#1b1f31 }
a.linkIcon i {display:inline-block; width:22px}
a.linkIcon:hover {color:#7fddb9}
.icoRound { display:inline-block; padding:7px; width:14px;   text-align:center; background:#7fddb9; border-radius:8px;}
.icoRound i {line-height:14px;font-size:16px;color:#fff;}

.icoRound.bg2 {background:#7fddb9}

/*nav*/
/*nav {display:block; margin:-10px 0 20px 0}
nav a,nav a:visited {display:inline-block; padding-bottom:6px; border-bottom:0px solid #969dac; margin:0 24px 0 2px; color:#969dac;
font-size:11px; letter-spacing:0; font-family: 'brandon_grotesqueregular', arial;}
nav a.active {border-bottom:1px solid #1b1f31; color:#0d1419}
nav a:hover {border-bottom:1px solid #969dac; color:#969dac}
nav .fal {color:#969dac; display:inline-block; margin:0 10px 0 0px; font-size:12px}*/

nav {display:block; margin:-10px 0 20px 0}
nav a,nav a:visited, nav a:hover {display:inline-block; padding:5px 10px; margin:0 24px 0 2px; color:#969dac;
font-size:11px; letter-spacing:0; font-family: 'brandon_grotesqueregular', arial;}
nav a.active {color: #fff;background-color: #7fddb9;}
/*nav a:hover {border-bottom:1px solid #969dac; color:#969dac}*/
nav .fal {color:#969dac; display:inline-block; margin:0 10px 0 0px; font-size:12px}


/*BLOC DATE TITRE*/
.vAlignCenter {vertical-align:middle}
.blocDate, .blocTitre {display:inline-block; padding:10px 7px 5px 6px;  vertical-align:middle;border-radius:10px;}
/*.blocTitre {width: calc(100% - 80px); padding:0 0 0 2px ; margin-bottom:20px  }*/
.blocTitre {width: calc(100% - 0px); padding:0 0 0 2px ; margin-bottom:20px  }

/*.blocDate { height:54px; max-height:54px; width:46px; background:#98d4da; font-weight:500; text-align:center;  color:#ffffff; display:inline-block; margin:0 10px 20px 0}*/
.blocDate { height:52px; max-height:52px; width:46px; background:#1b1f31; font-weight:500; text-align:center;  color:#fcfe00; display:inline-block; margin:0 10px 20px 0}

.blocDate span { display:block;font-size:15px; line-height:27px; letter-spacing:-0.5px}
.blocDate span.day {font-size:33px; letter-spacing:-2px; font-weight:400; color:#fcfe00 }
.organisator {color:#1b1f31; font-size:11px;}
.organisator a { display:inline-block;border-bottom:1px dotted #1b1f31; color:#0d1419}

.logo {    display: block;
    margin: -230px auto 10px auto;
    max-width: 90%;
    border-radius: 24px;
   /*border: 5px solid #fff;*/}


/*BOUTON TAGS*/
.tag, .buton {display: inline-block; padding:10px 16px; border-radius:4px; border:2px solid #1b1f31; font-size:13px; line-height:12px; letter-spacing:0.03em;  }

.tag i { color:#1b1f31; display:inline-block; margin-right:6px; font-size:13px;}
.buton { background:#1b1f31; border:1px solid #1b1f31; margin:0 10px 10px 0; color:#ffffff !important; font-weight:500; cursor:pointer; font-size:14px; line-height:14px;}
.buton i { color:#ffffff; display:inline-block; margin-right:6px; font-size:13px;}
.buton:hover, .buton:hover i { background:#ffffff; color:#1b1f31 !important}
.butonInv { background:#fff; border:1px solid #1b1f31; margin:0 10px 10px 0; color:#1b1f31 !important; font-weight:500; cursor:pointer; font-size:14px; line-height:14px;}

.butonBig {}

.butonRed {background:#7fddb9; border:1px solid #7fddb9}
.butonRed:hover, .butonRed:hover i { background:#ffffff; color:#7fddb9}


.add-button, .big-button, .add-button-inv, .add-button-inv2, .main-button {
    position: sticky;
    bottom: 10px;
    background-color: #7fddb9;
    border: 0;
    margin: auto;
    padding: 10px 20px;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    border-radius: 20px;
    flex-shrink: 0;
    z-index: 1;
    cursor: pointer;
    border: 2px solid #7fddb9;
}

.big-button {padding:14px 30px; font-size:19px !important;}
.main-button {display:block; margin:0; border-radius:0; width:100%; text-transform:uppercase; letter-spacing:1px; padding:14px 0}
.add-button:hover , .big-button:hover,.main-button:hover  {color:#7fddb9;  background-color:rgba(255,255,255,0.9)}
.add-button-inv  { background-color:transparent; color:#fff; border:1px solid #fff; font-weight:normal; font-size:13px !important}
.add-button-inv:hover   { background-color:#fff; color:#7fddb9}
.add-button-inv2 { background-color:transparent; color:#7fddb9; border:1px solid #7fddb9; font-weight:normal; }
.add-button,.big-button,.add-button-inv, .main-button
{-moz-transition: all 0.3s ease-in;  -webkit-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in; transition: all 0.3s ease-in;}
	
	

/*color*/
.bgGrey {background:#f7f8f7}
.green {color:#7fddb9}
.orange {color:#98d4da}

/*bloc*/
.content {background:#fff; border-radius:30px; width:940px; max-width:100%; margin:40px auto; padding:0px; overflow:hidden}
.module {}
.bloc,.bloc-40, .bloc-60, .bloc-50 , .bloc-33 , .bloc-67 , .bloc-25, .blog-50, .blog-33, .blog-25 {display:inline-block; margin:0; padding:0; vertical-align:top}
.bloc-25 {width:25%}
.bloc {width:100%}
.bloc-33 {width:33.33%}
.bloc-40 {width:33.33%}
.bloc-60 {width:65%}
.bloc-67 {width:66.66%}
.bloc-50 {width:50%}
.inner {display:block; padding:40px}
.blog-50 { width:calc(50% - 10px); margin:0 10px 10px 0}
.blog-33 { width:calc(33.33% - 10px); margin:0 10px 10px 0}
.blog-25 { width:calc(25% - 10px); margin:0 10px 10px 0}

section.banner {padding: 0; background-color :#1b1f31}


div.topContainer, div.blocsContainer {display: flex;  flex-direction: row;}
div.topContainer section,  div.blocsContainer section {height: auto;}


/*DISPO*/
/*#dispo .item { display:inline-block; vertical-align:top; position:relative; border-radius:12px; padding:64px 14px 14px 14px;  background:#f7f8f7; margin:0 4px 10px 0;}
#dispo .item i{ position:absolute; font-size:19px; width:20px; height:20px; line-height:20px; text-align:center; top:10px; left:10px }
#dispo .item span.data { font-size:20px; letter-spacing:-1px}
#dispo .item span.data small { font-size:11px; color:#1b1f31;letter-spacing:0; display:block}*/

#dispo .item { display:inline-block; vertical-align:top; position:relative; border-radius:12px; padding:0 6px 10px 0; margin:0 8px 0 0;}
#dispo .item i{ font-size:19px; width:20px; height:20px; line-height:20px; text-align:center; margin-right:5px  }
#dispo .item span.data { font-size:22px; letter-spacing:-1px}
#dispo .item span.data small { font-size:11px; color:#1b1f31;letter-spacing:0; display:block}


/*FORM*/
.formContainer {}
.formContainer div { display:block; margin:0 0 15px 0; }
.formContainer label, .formContainer input:not([type="submit"]) {display:block; margin:0 0 6px 0;width: -moz-available; }
.formContainer input:not([type="submit"]):not([type="radio"]):not([type="checkbox"]), .formContainer select {padding:10px; border-radius:6px; border:1px solid #1b1f31; display:block; width:-webkit-fill-available}

.formContainer input.errorForm {border:1px solid #F00 !important;}

.formContainer label small {font-size:11px; opacity:0.7}
.formContainer input[type="radio"]{padding:10px 0; width:5px}


.formContainer div.checkbox input, .formContainer div.radio input { display: inline-block; width:20px; margin-right:5px  }
.formContainer div.checkbox label , .formContainer div.radio label.labelList {display: inline-block;  width: calc(100% - 40px); cursor:pointer ;margin:0 0 5px 0}

.formContainer div.checkbox input {vertical-align:top; }
.formContainer div.radio input {vertical-align:top; margin-top: 1px;}

.formContainer textarea {
    display: block;
    margin: 0 0 6px 0;
    width: 100%;
    height: 30px;
}

/*blog*/
.blogContainer {margin:10px 0}
article.poster {background-size:cover ; background-position:center center; height:200px; overflow: hidden; position:relative; border-radius:16px}
article.poster .innerBloc { padding:15px;position:relative; background: linear-gradient(180deg, rgba(255,255,255,0) 46%, rgba(0,0,0,0.6222689759497548) 91%);height:calc(100% - 30px)}
article.poster .articleContent {position:absolute; bottom:15px; left:0; padding:0 15px; color:#ffffff}
article.poster .articleContent .title {font-size:16px; font-weight:500}

article.liste { margin-bottom:15px; max-width:440px}
article.liste .innerBloc { padding:0;position:relative;}
article.liste .articleContent, article.liste figure {display:inline-block; vertical-align:top }
article.liste figure {width:48px; height:48px; border-radius:6px; margin:3px 5px 0 0; padding:0; background-size:cover ; background-position:center center;}
article.liste .articleContent { width:calc(100% - 57px)}
article.liste .articleContent .title {font-size:14px; font-weight:500; line-height:20px;}
article.liste .articleContent p.txt { display:block; margin:2px 0 0 0; font-size:12px; color:#1b1f31;}

article.poster:hover {}
article.poster .tag {}
article.liste .articleContent, article.liste figure {display:inline-block; vertical-align:top }


article.classic { margin-bottom:20px;}
article.classic .innerBloc { padding:0;position:relative;}
article.classic figure {height:140px; display:block; border-radius:10px; margin:0 0 10px 0; padding:0; background-size:cover ; background-position:center center;}
article.classic .articleContent .title {font-size:14px; display:block; font-weight:500; line-height:20px; margin:0 0 5px 0}
article.classic .articleContent p.txt { display:block; margin:2px 0 0 0; font-size:12px; color:#1b1f31;}

/*liste inscrits*/

ul.inscrits {margin:10px 0; padding:0}
ul.inscrits li { display:block;  position:relative; border-radius:12px; padding:18px; background:#f7f8f7; margin:0 0 10px 0;}




/*global effect*/
.borderRight {border-right:1px solid #f2f3f2; margin-right:-1px;} 
.borderLeft {border-left:1px solid #f2f3f2; margin-left:-1px;} 
/*.shadowHover:hover {-webkit-box-shadow: 0px 23px 28px -25px rgba(0,0,0,0.47);
-moz-box-shadow: 0px 23px 28px -25px rgba(0,0,0,0.47);
box-shadow: 0px 23px 28px -25px rgba(0,0,0,0.47);}*/


.shadow  {box-shadow: 0px -1px 150px -1px rgba(45,60,89,0.14);
-webkit-box-shadow: 0px -1px 150px -1px rgba(45,60,89,0.14);
-moz-box-shadow: 0px -1px 150px -1px rgba(45,60,89,0.14);}


.shadow2  {-webkit-box-shadow: 0px 0px 36px 16px rgba(255,255,255,0.52); 
box-shadow: 0px 0px 36px 16px rgba(255,255,255,0.52);}

.floatR {float:right}

.anim-x {animation: slideX .6s both;}
@keyframes slideX {
  0% {
    opacity: 0;
    transform: translateX(200px);
  }
}

.anim-y {
  animation: slideUp .6s both;
}

.anim-y:nth-child(2) {
  animation-delay: 0.28s;
}

.anim-y:nth-child(3) {
  animation-delay: 0.42s;
}

.anim-y:nth-child(4) {
  animation-delay: 0.56s;
}

.anim-y:nth-child(5) {
  animation-delay: 0.7s;
}

.anim-y:nth-child(6) {
  animation-delay: 0.84s;
}

.anim-y:nth-child(7) {
  animation-delay: 0.98s;
}

.anim-y:nth-child(8) {
  animation-delay: 1.12s;
}

.anim-y:nth-child(9) {
  animation-delay: 1.26s;
}

.anim-y:nth-child(10) {
  animation-delay: 1.4s;
}


.anim-y:nth-child(11) {
  animation-delay: 1.54s;
}


/*GLOBAL EFFECT*/
a, .buton, .butonRed
 {-webkit-transition: all 0.2s; -moz-transition: all 0.2s ; -o-transition: all 0.2s ; transition: all 0.2s ; }


.logos img {display: block; margin:20px auto 0 auto; height:70px}


@keyframes slideUp {
  0% {
    transform: translateY(76px) scale(0.92);
    opacity: 0;
  }
}



/*responsive*/
@media (max-width: 880px) {
.bloc-40, .bloc-60, .bloc-50 , .bloc-33 , .bloc-67 {display:block; width:auto}

div.topContainer {display: flex;  flex-direction:column  ;}
#topBan {max-height:300px; min-height:300px}

.blocsContainer .bloc-33 {width:50%}

.borderRight {border-right:0px solid #f2f3f2; margin-right:0;} 
.inner {display:block; padding:20px}
.content {margin:0 auto; border-radius:0}

.logo {max-width: 70%;}

nav, .hide {display:none !important}
.present * {text-align:center !important}
.logos img {display: inline-block; margin:10px ; height:70px}
ul li {    padding: 0 0 10px 0;}
ul li i {display:none !important}


}


@media (max-width: 680px) {
.bloc-40, .bloc-60, .bloc-50 , .bloc-33 , .bloc-67, .blog-50, .blog-33 {display:block; width:auto; margin-right:0}
.ban {display:none}
.banMobile {display:block !important;}


}