/* general styles */
html, body{height: 100%;width: 100%;}
.content{width: 80%;margin-left: 10%;margin-top: 20px;}

/* navigation (Menu) */
.container-fluid{background-color: white;}
.li_menu{text-align: center;font-size:15px;font-family: Purisa, cursive;}

/* vertical-centered text */
.text-vcenter {display: table-cell;text-align: center;vertical-align: bottom;}
.text-vcenter h1 {font-size: 4.5em;font-weight: 700;margin: 0;padding: 0;}

/* Couleur des icon du nav*/
#menu_accueil a{color: blue;}
#menu_pres a{color: green;}
#menu_actu a{color: orange;}
#menu_activite a{color: rgba(226,18,157,1);}
#menu_repas a{color: red;}
#menu_inscription a{color: rgba(0,150,0,1);}

/* btn_ContactUs */
#btn_ContactUs {color: rgba(0,0,100,1);}
#btn_ContactUs img {height:30px; width:auto;}

/* btn_ConnectionGallery */
#btn_ConnectionGallery {color: rgba(100,100,100,1);}
#btn_ConnectionGallery img {height:30px; width:auto;}

/* padded section */
.pad-section {padding: 50px 0;}
.pad-section img {width: 100%;}

/* additional sections */
#home {background: url(../images/facade/IMG_2658.jpg); display: table;height: 90%;position: relative;width: 100%;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}
#services {background-color: rgba(255,0,30,1);color: #ffffff;}
#services .glyphicon {border: 2px solid #FFFFFF;border-radius: 50%;display: inline-block;font-size: 60px;height: 140px;line-height: 140px;text-align: center;vertical-align: middle;width: 140px;}
#information {background: url(../images/jardin/Jardin2.jpg) no-repeat center center fixed; display: table;height: 800px;position: relative;width: 100%;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}
#information .panel {opacity: 0.85;}

.Purisa{font-family: cursive, Purisa;}
.Bleu{color:blue;}
.Rouge{color:red;}
.Justify{text-align: justify;}

.style_texte{text-align:justify;font-size: 18px;font-family: Times;}


/*************************/
/* Grand titres des pages */
/*************************/

.crem_blue
{
	margin-top: 55px;
	padding-top : 30px;
	background-color: rgba(255,40,50,1);
	height:150px;
	color: white;
	font-style: italic;
}

/**************/
/* Partenaire */
/**************/

.list-partenaire{margin-left : 30%;}


/***************/
/*    Footer   */
/***************/

footer{background-color:rgba(255,0,30,1);padding: 20px 0;}
footer p, footer a{color: white;}
iframe{width: 100%;}
.menu li { display : inline;padding : 0 0.5em;}
.menu {list-style-type : none;margin-left : -45px;font-size: 125%;}
.menu a , .menu a:focus{text-decoration: none;color: white;}


/**********************/
/*  Carte Google Map  */
/**********************/

.box-iframe{margin-top:-20px;}
.box-iframe > iframe {max-width: 100%;width: 100%;}
.scrolloff {pointer-events: none;}


/********************************************************************************************/
/**********                 Modal window : ModalConnectionGallery                  **********/
/**********                modal present in the navigation.php file                **********/
/********************************************************************************************/

.ModalConnectionGallery-container{padding: 30px;max-width: 400px;width: 100% !important;background-color: #F7F7F7;margin: 0 auto;border-radius: 2px;box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);overflow: hidden;font-family: roboto; }

/* Size of the logo present in the modal */
.ModalConnectionGallery-container img {max-width: 180px; height: auto;}

.ModalConnectionGallery-container h1{font-size: 1.8em;}
.ModalConnectionGallery-container h5{font-size: 1.3em;}
.ModalConnectionGallery-container input[type=submit]{width: 100%;display: block;margin-bottom: 10px;position: relative;}
.ModalConnectionGallery-container input[type=password]{height: 44px;font-size: 16px;width: 100%;margin-bottom: 10px;-webkit-appearance: none;background: #fff;border: 1px solid #d9d9d9;border-top: 1px solid #c0c0c0;padding: 0 8px;box-sizing: border-box;-moz-box-sizing: border-box;}
.ModalConnectionGallery-container input[type=password]:hover{border: 1px solid #b9b9b9;border-top: 1px solid #a0a0a0;-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);}
.ModalConnectionGallery-submit{font-size: 2.0rem;padding: 1.25rem 2.5rem;display: block;background-color: #009ac9;border: 1px solid transparent;color: #ffffff;font-weight: 300;-webkit-border-radius: 3px;border-radius: 3px;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
.ModalConnectionGallery-submit:hover{border: 0px;text-shadow: 0 1px rgba(0,0,0,0.3);background-color: #ffffff;color: #009ac9;border-color: #009ac9;}

/*************************************************************/
/*  Effet des cercles (sous-menu des catégorie des enfants)  */
/*************************************************************/

/* Parti dite "en commun" de tout les effets */
.ch-grid {margin: 20px 0 0 0;padding: 0;list-style: none;display: block;text-align: center;width: 100%;}
.ch-grid:after,.ch-item:before {content: '';display: table;}
.ch-grid:after {clear: both;}
.ch-grid li {width: 220px;height: 220px;display: inline-block;margin: 20px;}

.ch-item {width: 100%;height: 100%;border-radius: 50%;position: relative;box-shadow: 0 1px 2px rgba(0,0,0,0.1);cursor:pointer;}
.ch-info-wrap, .ch-info{position: absolute;width: 180px;height: 180px;border-radius: 50%;}
.ch-info-wrap {top: 20px;left: 20px;background: #f9f9f9 url(../images/bg.jpg);box-shadow: 0 0 0 20px rgba(255,255,255,0.2), inset 0 0 3px rgba(115,114, 23, 0.8);}
.ch-info > div {display: block;position: absolute;width: 100%;height: 100%;border-radius: 50%;background-position: center center;	-webkit-backface-visibility: hidden;}
.ch-info .ch-info-front {-webkit-transition: all 0.6s ease-in-out;-moz-transition: all 0.6s ease-in-out;-o-transition: all 0.6s ease-in-out;-ms-transition: all 0.6s ease-in-out;transition: all 0.6s ease-in-out;}
.ch-info .ch-info-back {opacity: 0;background: rgba(255,0,30,1);pointer-events: none;-webkit-transform: scale(1.5);-moz-transform: scale(1.5);-o-transform: scale(1.5);-ms-transform: scale(1.5);transform: scale(1.5);-webkit-transition: all 0.4s ease-in-out 0.2s;-moz-transition: all 0.4s ease-in-out 0.2s;-o-transition: all 0.4s ease-in-out 0.2s;-ms-transition: all 0.4s ease-in-out 0.2s;transition: all 0.4s ease-in-out 0.2s;}

/* Image dans les cercles */
.ch-img-1 { background-image: url(../images/4_pattes/mascotte.jpeg);}
.ch-img-2 { background-image: url(../images/4_pattes/mascotte.jpeg);}
.ch-img-3 { background-image: url(../images/Bout_choux/mascotte7.jpeg);}
.ch-img-4 { background-image: url(../images/lucioles/mascotte.jpeg);}

.ch-info h3 {color: #fff;text-transform: uppercase;letter-spacing: 2px;font-size: 18px;margin: 0 15px;padding: 40px 0 0 0;height: 80px;font-family: 'Open Sans', Arial, sans-serif;text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0,0,0,0.3);}
.ch-info p {color: #fff;padding: 10px 5px 0;font-style: italic;margin: 0 30px;font-size: 12px;border-top: 1px solid rgba(255,255,255,0.5);}
.ch-info p span {display: block;color: #e7615e;font-style: normal;font-weight: 700;text-transform: uppercase;font-size: 9px;letter-spacing: 1px;padding-top: 4px;font-family: 'Open Sans', Arial, sans-serif;}
.ch-info p span:hover {color: #fff;}
.ch-item:hover .ch-info-front {-webkit-transform: scale(0);-moz-transform: scale(0);-o-transform: scale(0);-ms-transform: scale(0);transform: scale(0);	opacity: 0;} 
.ch-item:hover .ch-info-back {-webkit-transform: scale(1);-moz-transform: scale(1);-o-transform: scale(1);-ms-transform: scale(1);transform: scale(1);opacity: 1;pointer-events: auto;}


/************************************************/
/* Petit div " A noter !" sur la page d'accueil */
/************************************************/

#popUp {position: fixed;max-width: 350px;height: 225px;background: rgba(236, 240, 241, 1);border: 7px solid #fff;bottom: 0;margin-left: 0;-webkit-transition: all 1s ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;transition: all 1s ease;}
#new span {background: #fff;position: absolute;color: #1c8dc4;padding: 4px 10px;font-size: 16px;font-weight: 600;letter-spacing: 1px;margin-top: -5px;}
#popUp .close {color: #464646;right: 8px;top: 0px;position: absolute;font-size: 20px;cursor: pointer;}
#popUp h2 {font-size: 17px;color: #464646;line-height: 24px;font-weight: 400;text-align: center;margin-top: 40px;padding: 0 20px;}
a.button {margin: 0 auto;text-align: center;right: 0;left: 0;position: absolute;width: 120px;font-size: 15px;color: #fff;border-bottom: 2px solid #18729f;background: #1c8dc4;border-radius: 4px;padding: 8px 0;}
#plus {position: fixed;color: #fff;bottom: 15%;font-size: 15px;margin-left: -425px;-webkit-transition: all 1.25s ease;-moz-transition: all 1.25s ease;-o-transition: all 1.25s ease;transition: all 1.25s ease;cursor: pointer;text-align: left;letter-spacing: 1px;}
#plus span {position: absolute;margin-top: 38px;left: 4px;}
#plus::after {content: '';display: block;display: relative;border-top: 65px solid transparent;border-bottom: 65px solid transparent;border-left: 65px solid #1c8dc4;}
@media all and (max-width: 900px) {
  #popUp {
    margin-left: -425px;
  }
  #plus {
    margin-left: 0px;
  }
}


/**********************/
/***    Activité    ***/
/**********************/

.cinta {position: relative;text-align: center;display: inline-block; *display: inline; zoom: 1;margin: 20px auto 10px;}
.dos:before, .dos:after{content: "";display: block;width: 100px;height: 30px;position: relative;top: 20px;margin: auto;background: rgba(255,255,200,0.6);-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);box-shadow: 0px 1px 3px rgba(0,0,0,0.4);}
.cinta img {display: inline-block; *display: inline; zoom: 1;border: 1px solid #ddd;margin: 0 20px;padding: 8px;background: #fff;text-align:center;vertical-align:top;-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);box-shadow: 0px 1px 3px rgba(0,0,0,0.4);}
.dos:before, .dos:after {position: absolute;top: 10px;}
.dos:before {left: 0;-webkit-transform: rotate(-35deg);-moz-transform: rotate(-35deg);transform: rotate(-35deg);}
.dos:after {right: 0;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);transform: rotate(45deg);}
hr{display: inline-block;width: 100%;}

@import url(http://fonts.googleapis.com/css?family=Raleway);
#cssmenu,#cssmenu ul,#cssmenu ul li,#cssmenu ul li a {margin: 0;padding: 0;border: 0;list-style: none;line-height: 1;display: block;position: relative;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
#cssmenu:after,#cssmenu > ul:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;}
#cssmenu {width: auto;border-bottom: 3px solid rgba(255,0,30,1);font-family: Raleway, sans-serif;line-height: 1;}
#cssmenu ul {background: #ffffff;}
#cssmenu > ul > li {float: left;}
#cssmenu.align-center > ul {font-size: 0;text-align: center;}
#cssmenu.align-center > ul > li {display: inline-block;float: none;}
#cssmenu.align-right > ul > li {float: right;}
#cssmenu.align-right > ul > li > a {margin-right: 0;margin-left: -4px;}
#cssmenu > ul > li > a {z-index: 2;padding: 18px 25px 12px 25px;font-size: 15px;font-weight: 400;text-decoration: none;color: rgba(255,0,30,1);-webkit-transition: all .2s ease;-moz-transition: all .2s ease;-ms-transition: all .2s ease;-o-transition: all .2s ease;transition: all .2s ease;margin-right: -4px;}
#cssmenu > ul > li.active > a,#cssmenu > ul > li:hover > a,#cssmenu > ul > li > a:hover {color: #ffffff;}
#cssmenu > ul > li > a:after {position: absolute;left: 0;bottom: 0;right: 0;z-index: -1;width: 100%;height: 120%;border-top-left-radius: 8px;border-top-right-radius: 8px;content: "";-webkit-transition: all .3s ease;-o-transition: all .3s ease;transition: all .3s ease;-webkit-transform: perspective(5px) rotateX(2deg);-webkit-transform-origin: bottom;-moz-transform: perspective(5px) rotateX(2deg);-moz-transform-origin: bottom;transform: perspective(5px) rotateX(2deg);transform-origin: bottom;}
#cssmenu > ul > li.active > a:after,#cssmenu > ul > li:hover > a:after,#cssmenu > ul > li > a:hover:after {background: rgba(255,0,30,1);}


/* Bouton sur la page d'accueil */
.btn-circle{width:80px;height:80px;margin-top:30px;padding:15px 20px;border-radius:100%!important;font-size:40px;color:#fff;background:0 0;-webkit-transition:background .3s ease-in-out;-moz-transition:background .3s ease-in-out;transition:background .3s ease-in-out}.btn-circle:focus,.btn-circle:hover{outline:0;color:#fff;background:rgba(255,255,255,.1)}.btn-circle @-webkit-keyframes pulse{0%,100%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1.2);transform:scale(1.2)}}@-moz-keyframes pulse{0%,100%{-moz-transform:scale(1);transform:scale(1)}50%{-moz-transform:scale(1.2);transform:scale(1.2)}}

.btn{font-weight:400;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;transition:all .3s ease-in-out;border-radius:0}
 i.animated{-webkit-transition-property:-webkit-transform;-webkit-transition-duration:1s;-moz-transition-property:-moz-transform;-moz-transition-duration:1s}.btn-circle:hover i.animated{-webkit-animation-name:pulse;-moz-animation-name:pulse;-webkit-animation-duration:1.5s;-moz-animation-duration:1.5s;-webkit-animation-iteration-count:infinite;-moz-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;-moz-animation-timing-function:linear}
 .btn{text-transform:uppercase;font-family:Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif}