/* latin-ext */
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 200;
  src: local('Titillium WebThin'), local('TitilliumWeb-Thin'), url('/static/fonts/TitilliumWeb-Thin-1.woff2?b68bc6f4a44c') format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 200;
  src: local('Titillium WebThin'), local('TitilliumWeb-Thin'), url('/static/fonts/TitilliumWeb-Thin-1.woff2?b68bc6f4a44c') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
/* latin-ext */
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 400;
  src: local('Titillium Web'), local('TitilliumWeb-Regular'), url('/static/fonts/TitilliumWeb-Regular-1.woff2?b68bc6f4a44c') format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 400;
  src: local('Titillium Web'), local('TitilliumWeb-Regular'), url('/static/fonts/TitilliumWeb-Regular-2.woff2?b68bc6f4a44c') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
/* latin-ext */
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 600;
  src: local('Titillium WebSemiBold'), local('TitilliumWeb-SemiBold'), url('/static/fonts/TitilliumWeb-SemiBold-1.woff2?b68bc6f4a44c') format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 600;
  src: local('Titillium WebSemiBold'), local('TitilliumWeb-SemiBold'), url('/static/fonts/TitilliumWeb-SemiBold-2.woff2?b68bc6f4a44c') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

:root{
  --colorSable:#ffd38c;
  --colorB:#0e2336;
  --colorCielPale:rgb(23,135,194,0.3);
  --colorD:#eee;
  --colorE:#555;
  --colorSablePale:#f2dec0;
  --colorCiel:#1787c2;
  --colorH: rgb(255,255,255,.6);
  --banner-height:264;
}


body{
    font-family: 'Titillium Web', sans-serif;
    background-color:#ffd38c;
    color: #333;
    font-size: 18px;
    padding: 0;
    margin: 0;
}

a{color:var(--link-color);font-size: smaller;}

ul{
  list-style-type: square;
}

h1, h2, h3, h4{
  font-weight:200;
}

h2 a{text-decoration: none}

.pull-left{
  float:left;
  width:40%;
  margin-right: 1em;
}

/*NAVIGATION*/


 .navbar-mobile{
   display: none;
   position: inherit;
   top: 5px;
   left: 5px;
  }
  .navbar-mobile > button {
	padding: 6px 10px;
	background-color: var(--colorCielPale);;
	background-image: none;
	border: 1px solid #555;
	border-radius: 4px;
	position: relative;
	width: 50px;
	cursor: pointer;
}
  .navbar-mobile > button:hover{
    background-color: var(--colorCiel);
  }
  .sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}
  .navbar-mobile .icon-bar {
	display: block;
	width: 30px;
	height: 2px;
	border-radius: 1px;
	background-color: #888;
	margin: 4px 0;
}
  .navbar-mobile:hover>div{
    display:block;
  }
  .navbar-mobile>div{
    display:none;
    background-color: var(--colorCiel);
    border-radius: 5px;
    margin: 5px 0 0 -20px;
    -webkit-box-shadow: 3px 3px 5px rgba(0,0,0,.4);
    -moz-box-shadow: 3px 3px 5px rgba(0,0,0,.4);
            box-shadow: 3px 3px 5px rgba(0,0,0,.4);
  }
  .navbar-mobile>div>div{
    padding: 0 5px 0 20px;
  }

  .navbar-mobile>div>div:hover>ul{
   display:block;
  }
.navbar-mobile  a{
    color:#fff!important;
    text-decoration: none;
    background-color: var(--colorCiel) !important;
  }
.navbar-mobile  a:hover{
    text-decoration: underline;
}
.navbar-mobile .dropdown-menu a{
    color:#fff!important;
    text-decoration: none;
    background-color: var(--colorCiel) !important;
  }
.navbar-mobile .dropdown-menu a:hover{
    text-decoration: underline;
}
  .navbar-mobile .dropdown-menu{
    position: static;
    margin-left:14px;
    width:auto;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
            box-shadow: none;

  }

.navbar-right{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  width:100%;
  -webkit-box-pack:end;
      -ms-flex-pack:end;
          justify-content:flex-end;
  position: absolute;
  top:0;
  right:10px;
  -webkit-column-gap:5px;
  -moz-column-gap:5px;
          column-gap:5px
}
.navbar-right a{
  color:#fff;
  text-decoration: none;
  font-size:0.8em;
}
.navbar-right a:hover{
  color:#555;
}
.banner {
  position: fixed;
	background-image:  url('/static/image/plage2.jpg?0a30bec85a4d');
  background-repeat: no-repeat;
	background-attachment: fixed;
	background-position-y: top;
  min-height: 120px;
  left: 0;
  right: 0;
  max-width: 1600px;
  background-position-x: center;
  margin: 0 auto;
  z-index: 1000;
}

.center {
	padding: 25px;
	margin: 0 auto;

}
.titre-fixe{
  position:absolute;
  top:185px;
  lefft:25px;
  font-size:1.3em;
}
.navbar {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	font-size: .9em;
	-webkit-column-gap: 8px;
	-moz-column-gap: 8px;
	        column-gap: 8px;
  width: 100%;
	bottom: 0px;
	z-index: 1000;
}

.navbar > div:hover > ul {
	display: block;
}
.navbar a{
 background-color: var(--colorH);
  display: block;
  padding:0 10px;
  text-align: center;
 color: var(--colorE);
  text-decoration: none;
 border-top-right-radius: 4px;
 border-top-left-radius: 4px;
}
.navbar a.active{
  background-color: var(--colorSable);
  color:var(--colorB);
}
.navbar a:hover{
 background-color: var(--colorSable);
 color: var(--colorE);
}
.navbar>div{
  position:relative;
}
.dropdown-menu {
	position: absolute;
	margin: 0;
	padding: 0;
	display: none;
	list-style-type: none;
	text-align: left;
	width: 180px;
    border-bottom-right-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
box-shadow: 4px 8px 5px rgba(0, 0, 0, .175);
}
.dropdown-menu a{
  text-align: left !important;
  background-color:var(--colorSable) !important;
  color: var(--colorB) !important;
  border-top-right-radius: 0 !important;
  border-top-left-radius: 0 !important;
}
.dropdown-menu a:hover{
  background-color:var(--colorCiel) !important;
  color: var(--colorD) !important;
}
.dropdown-menu a:last-child{
  border-bottom-right-radius:4px;
}



/*TITRES*/
.navbar-annexe{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-column-gap: 5px;
          column-gap: 5px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 40px 0 30px 0;
  font-size:.9em;
  display: none;
}
.navbar-annexe a{
  color:#555;
  text-decoration: none;
}
.navbar-annexe a:hover{
  color:#fff;
  text-decoration: underline;
}
.small-title a{
  text-transform: uppercase;
  color: #fff;
  font-weight:bold;
}

.titles h1{
 font-size: 5em;
	color: #fff ;
	text-transform: uppercase;
	font-weight: 200;
	line-height: .7em;
	padding: 25px 0 0px 0;
	text-align: center;
 margin: 0;
}
.titles h2 {
	font-size: 1.5em;
  font-weight: 200;
	font-style: normal;
	text-align: center;
	color: #fff;
	padding-top: 25px;
	line-height: 1em;
}
.titles>h2>strong{
  display: none;
  text-transform: uppercase;
  letter-spacing: .2em;
}
.titles a{color:#fff;
  text-decoration: none}

.nav-footer>ul{
  margin-left:0
}
.breadcrumb {
  padding: 8px 15px;
  margin-bottom: 20px;
  list-style: none;
  background-color: #fff;
  border-radius: 4px;
  font-size:12px;
  float:right;
}

.page{
  padding-top:290px;
}
.main{
  background-color: var(--colorSable);
}
div.ciel{
  background-color:#1787c2;
  padding:30px 110px;

}
div.ciel *{
  color:var(--colorD);
}

div.ciel h1,div.sable h1,div.ciel>h4,div.sable>h4,div.ciel>h2,div.sable>h2,div.ciel>h3,div.sable>h3{
  text-align: center;
  font-weight: 200;
  font-size:1.3em;
  padding-top:20px
}
div.ciel h1,div.sable h1{
  font-size: 2.5em
}
div.sable{
  background-color:#ffd38c;
  padding:30px 110px;
}
.title-page{
  font-weight: 200;
  text-align: center;
  font-size: 3em;
}
/*BLOGPOST*/
.blogpost{
  margin-bottom: 6em;
}
.postedby{
  clear:left;
  padding-top: 25px;
}

.blog-list-detail h3{
  margin: 0
}
.list-inline{
  list-style-type: none;
}
.list-inline>li{
  float:left;
  padding: 0 10px;
}
.readmore{
  clear:left;
}
.pagination{
  list-style-type: none;
  padding: 50px 0;
}
.pagination>li{
  float:left;
  padding:0 10px
}
/*RIGHT COL*/
.right-col{
  background-color: var(--colorCiel);
  width:22%;
}

.right-col ul{
  padding-left: 0;
  margin-top: 0;
}
.right-col *{
  color:#ddd;
  font-size:0.9em
}
.right-col h3,.right-col h4{
  margin-bottom: 0;
  clear: left;
}
.right-col li{
  padding:5px 0
}

/*ACCORDEON FAQ*/

.accordeon>h2{
  text-decoration: underline;
  cursor:pointer;
}
.accordeon>.texte{
  display:none;
}

/*CAROUSEL INDEX*/

.jcarousel-wrapper{
  max-width: 960px;
  margin: 50px auto -140px auto !important;
  border: none !important;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
}
.jcarousel li{
  width:310px !important;
  padding:15px;
  border:none !important;
  border-radius: 10px;
  margin:5px;
  min-height: 370px;
}
.jcarousel li h4{
  text-align: center;
  font-weight: 200;
}
.jcarousel li>.image{
}
.jcarousel li p{
  text-align: justify;
  font-size:.9em
}
.jcarousel li.ciel{
  background-color: var(--colorCiel);
}
.jcarousel li.ciel *{
  color: #fff;
}
.jcarousel li.sable{
  border-style: solid !important;
  border-color: var(--colorCiel) !important;
}

.jcarousel-control-prev{
  left:-55px !important;
}
.jcarousel-control-next{
  right:-50px !important;;
}
.jcarousel-control-prev, .jcarousel-control-next {
	top:20% !important;
	background: var(--colorCiel)!important;
}
/*PAGE ADHERER*/
.tab-content{
  height: 650px;
overflow-y: scroll;
}
.tab-content>div{
  display: none;
    width: 100%;
  margin: 0 auto;
  height: 900px;
}
.tab-content>div.active{
  display: block;
}
.tab-content iframe{
  width:100%;
  height:1400px;
  border:none;
}
.tabs{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;

  list-style-type: none;
  margin:0 auto;
  padding: 0;
}

.tabs a{
  text-decoration: none;
}
.tabs>li{
  padding:5px 15px;
  border-radius:4px;
  margin-bottom: -4px;
}
.tabs>li.active{
  background-color: var(--colorCiel);
  color:#eee;
}
.tabs>li:not(.active):hover{
  background-color: rgb(255,255,255,.5);
}
/*FORMULAIRE DE CONTACT*/

.form-group{
  padding:20px 10px;
  position: relative;
  width:400px
}
.control-label{
  display:block;
  float:left;
  width:120px
}
.form-group input,.form-group textarea{
  width:250px;
}
.help-block{
  position: absolute;
  right:10px;
  top:10px;
  font-style: italic;
  font-size:smaller;
}
.form-actions{
    width:400px;
    text-align: right;
  }
/*PIED DE PAGE*/

footer{
  color:#eee;
  margin: 0 auto;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  background-color: var(--colorCiel);
  /*! align-items: center; */
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
footer>ul{
list-style-type: none;

}
/*BOUTONS*/

.sable .btn-ciel, .ciel .btn-sable{
  padding: 8px;
  border-radius: 10px;
  -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,.3);
          box-shadow: 3px 3px 3px rgba(0,0,0,.3);
  font-size: 1.1em
}
.sable .btn-ciel:hover, .ciel .btn-sable:hover{
  -webkit-box-shadow: none;
          box-shadow: none;
}

.ciel .btn-sable {
  color: #333;
    text-shadow: 0 1px 0 #aaa;
    background-image: -webkit-linear-gradient(top, #ffd38c 0%, #e0e0e0 100%);
    background-image: -o-linear-gradient(top, #ffd38c 0%, #e0e0e0 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ffd38c), to(#e0e0e0));
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(5%, #ffd38c), to(#e0e0e0));
    background-image: -webkit-linear-gradient(top, #ffd38c 5%, #e0e0e0 100%);
    background-image: -o-linear-gradient(top, #ffd38c 5%, #e0e0e0 100%);
    background-image: linear-gradient(to bottom, #ffd38c 5%, #e0e0e0 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd38c', endColorstr='#e0e0e0', GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
    background-repeat: repeat-x;
    border-color: #ffd38c;
    text-decoration:none;
}
.ciel .btn-sable:hover {
  color: #333;
    background-image: -webkit-linear-gradient(top, #e0e0e0 0%, #ffd38c 100%);
    background-image: -o-linear-gradient(top, #e0e0e0 0%, #ffd38c 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#e0e0e0), to(#ffd38c));
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(5%, #e0e0e0), to(#ffd38c));
    background-image: -webkit-linear-gradient(top, #e0e0e0 5%, #ffd38c 100%);
    background-image: -o-linear-gradient(top, #e0e0e0 5%, #ffd38c 100%);
    background-image: linear-gradient(to bottom, #e0e0e0 5%, #ffd38c 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e0e0e0', endColorstr='#ffd38c', GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
    background-repeat: repeat-x;
    text-decoration:none;
}
.sable .btn-ciel {
  color: #333;
    text-shadow: 0 1px 0 #aaa;
    background-image: -webkit-linear-gradient(top, #1787c2 0%, #e0e0e0 100%);
    background-image: -o-linear-gradient(top, #1787c2 0%, #e0e0e0 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#1787c2), to(#e0e0e0));
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(5%, #1787c2), to(#e0e0e0));
    background-image: -webkit-linear-gradient(top, #1787c2 5%, #e0e0e0 100%);
    background-image: -o-linear-gradient(top, #1787c2 5%, #e0e0e0 100%);
    background-image: linear-gradient(to bottom, #1787c2 5%, #e0e0e0 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1787c2', endColorstr='#e0e0e0', GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
    background-repeat: repeat-x;
    border-color: #1787c2;
    text-decoration:none;

}
.sable a.btn-ciel:hover {
  color: #333;
    background-image: -webkit-linear-gradient(top, #e0e0e0 0%, #1787c2 100%);
    background-image: -o-linear-gradient(top, #e0e0e0 0%, #1787c2 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#e0e0e0), to(#1787c2));
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(5%, #e0e0e0), to(#1787c2));
    background-image: -webkit-linear-gradient(top, #e0e0e0 5%, #1787c2 100%);
    background-image: -o-linear-gradient(top, #e0e0e0 5%, #1787c2 100%);
    background-image: linear-gradient(to bottom, #e0e0e0 5%, #1787c2 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e0e0e0', endColorstr='#1787c2', GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
    background-repeat: repeat-x;
    text-decoration:none;
}

/*POSTABLES*/

@media(max-width:578px){
  .banner{
    background-image: url('/static/image/plage3.jpg?c53758f57600');
    -webkit-box-shadow: 5px 5px 5px rgba(0,0,0,.3);
            box-shadow: 5px 5px 5px rgba(0,0,0,.3);
    background-size: contain;
    min-height: 120px;
  }
  .navbar-right{display:none}

   .navbar-annexe>div{
    display:none
  }
  .titles>h1{
    margin:10px 0 -20px 45px;
  }

  .navbar{
    display:none;
  }
  .navbar-mobile{
   display: block;
  }
  .titles>h1{
    font-size: 2.7em;
    padding:0;
  }
    .titles>h2{
    font-size: 1.0em;
    margin-top:-5px;
  }

  .titles strong.centrage{
    display:block !important;
    padding-top:15px;
  }

  .page{
    padding-top:100px;
  }
  div.sable, div.ciel{
    padding:10px;
  }
  .title-page{
    font-size:2.5em;
  }

  .form-group{
  padding:20px 10px;
  width:100%;
}
  .form-actions{
    width:100%;
    text-align: center;
  }
  .tabs{
    width:100%;
  }
  .tabls a{
    font-size:smaller;
  }
  .jcarousel-wrapper {
	/*! margin: 20px auto !important; */
	width: 320px;
	margin-top: 90px !important;
}
  .jcarousel li {
	  width: 310px !important;
  }
  .jcarousel-control-next {
	    right: 10px !important;
   }
  .jcarousel-control-prev {
	    left: 10px !important;
      top:25px !important;
   }
  .jcarousel-control-next{
    top:25px !important;
  }

}
@media(max-width:815px){
  .navbar{
    -webkit-column-gap: 10px;
    -moz-column-gap: 10px;
            column-gap: 10px;
  }
}