@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Merienda+One');
@import url('https://fonts.googleapis.com/css?family=Lato:300,400');
/*
font-family: 'Merienda One', cursive;
font-family: 'Lato', sans-serif;
font-family: 'Chewy', cursive;
*/
/**************************
	CLASSES
**************************/
/*CSS MONICA Pour alignements*/
* {box-sizing: border-box}
[hidden] {display: none !important}
[disabled] {pointer-events:none; opacity: 0.3}
.horizontal-flex {display: flex; flex-direction: row; justify-content: space-between}
.horizontal-grid {display: grid; place-items: center;.}
.vertical {display: flex; flex-direction: column}

.auto{margin:auto;}
.flex {flex: 1}
:root {
  --spacing-xs: 8px;
  --spacing: 24px;
  --spacing-s: 12px;
  --spacing-m: 36px;
}
/*  fin css monica  */
/*centrage*/
.centrage {display: flex;justify-content: space-evenly;align-items: center;min-height: 10vh;  }
.center {justify-content: center; align-items: center}
.img_centree { display: block;margin: 0 auto;}

:root {
  --couleur-fond: #f4f3ed;/* color:var(--couleur-fond); */
  --couleur-texte: #333333;
  --couleur-titre: #7A1214;
  --couleur-footer: #3A3A3A;/* footer*/
  --couleur-favorite: #232323;/* background:rgba(35,35,35,0.15) ;*/
  --main-size: 82.5em;
  --main-font-size: 1.000em;
  }
  
p{padding-bottom:10px;}
.large{font-size:1.4rem;}
em{font-size:0.9rem;}
.big{font-size:1.1em;}
.link {color: #444444;transition: border 0.2s ease-in-out;border-bottom: 1px solid #444444;/*transparent*/}
.link:hover {border-bottom: 2px solid #333333;}
a[class~="lien_ext"]:after { content: url(../elements/external_brown.png);padding-left: 4px;width:50px;}/* ~ cible un attribut qui a une liste de valeurs séparées par un espace*/
a[href$=".pdf"]{padding-right:25px;background:url(../elements/adobe_acrobat.png) no-repeat right center transparent;color:#d90000;text-decoration: underline}
a:hover[href$=".pdf"]{color:#d90000;text-decoration: none;}

.ombrage{-webkit-box-shadow: 5px -5px 3px -4px #000000; box-shadow: 5px -5px 3px -4px #000000;}
.bordure{border:1px solid #868695;border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;}
.bordure_left{border-left:1px solid #868695;border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;}
.no-border{border: 0px;}
.radius{border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;}
/* elements flottants */
.fl {float: left;margin-right: auto;}
img.fl {margin-right: 1rem;}
.fr {float: right;margin-left: auto;}
img.fr {margin-left: 1rem;}
img.fl,img.fr {margin-bottom: 0.5rem;}

.small-text{font-size: 1.2rem;padding:10px;}

.portfolio,.portfolio_inverse {padding:5px;width:90%;margin:2rem auto 8rem auto;}
.portfolio p{padding-top:px;}
.portfolio img {float:left;margin:0 10px 5px 0;}
.portfolio_inverse p{text-align:right;padding:20px 0 30px 0;}
.portfolio_inverse img{float:right;padding:2px;margin:0 0 5px 10px;}
.portfolio-bord img{float:left;margin-right:30px;padding-right:20px;border-right:1px solid #D5D1B7;}

/*conteneur fluide Voir site https://la-cascade.io/css-flexbox-et-la-dimension-des-boites/	*/
.flex-contain{display: flex; flex-flow: row wrap; justify-content: flex-start ;}/* 	flex-flow: row wrap;	raccourci pour flex-direction: row; et flex-wrap: wrap;	.	wrap = passage à la ligne	*/
.flex-contain> *{ padding:px;}
.flex-item {flex: 1 ;}/*flex 1 : tous les éléments se répartissent l'espace */

/*colonnes*/
.colonne_1{width:69%;padding-right:10px;}
.colonne_2{width:29%;padding:10px 0 10px 10px;}

.img{ display: block; width: 100%;}
.display{display: block;}
.img_cachee{display:none;}

/*conteneur responsive*/
.video{width:100%;margin:40px auto;margin-left:;
	-webkit-box-shadow:4px -3px 5px 0px rgba(50, 50, 50, 0.75);
	-moz-box-shadow:4px -3px 5px 0px rgba(50, 50, 50, 0.75);
	box-shadow:4px -3px 5px 0px rgba(50, 50, 50, 0.75);}
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; }
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

hr.style20-bis {width:50%;padding: 0;border: none;border-top: medium double #757584;color: #757584;text-align: center;overflow: visible; /* For IE */margin:50px auto;}
hr.style20-bis:after {content:url(../elements/logo-noir-ligne.svg);display: inline-block;position: relative;top:-0.8em;font-size: 1.6em;padding: 0 0.25em;background:var(--couleur-fond);}

.sticky {position: fixed;top: 0;width: 100%;}

/*==============================
	STYLES GENERAUX
==============================*/
html{scroll-behavior: smooth;}
html, body { width: 100%; height: 100%; font-family: 'Lato', sans-serif;font-weight:400; /*font-size: 1.4rem;   voir kcnacss ligne 423*/ }
body {background:url(../elements/logo-pattern-2.svg) repeat; background-color: #f4f3ed;}
footer{ width: 100%;background: #422505;color:#fff;border-top:solid 10px #8A6905;}
.logo_footer{padding:0 0;width: 90px;display:block;margin:auto;}
#content {/*font-family:"Source Sans Pro","Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif;*/}
main{width:100%;max-width:var(--main-size);height:auto;padding:20px ;margin: 0 auto 0 auto;background: #f4f3ed;/*background-color: rgba(255, 255, 255, 0.5);*/}
.main-size{width:100%;max-width:var(--main-size);}
.hero {padding: 40px 0 30px 0; width:100%;padding-top: 100px;}

h1, h2, h3, h4, h5, h6 {font-family: 'Lato', sans-serif;font-weight:400;font-style:normal;word-wrap: break-word; }
.h1-title, .h2-title, .h2-like {color:var(--couleur-titre);}
.h1-title {font-size: 6rem;line-height:1;font-family: 'Merienda One', cursive;display:inline-block;}
.h2-title {font-size: 3rem;line-height:1px;font-family: 'Merienda One', cursive;}
.h2-like{font-family: 'Acme', sans-serif;}
.h2-like:before{content:url(../favicon/favicon-32x32.png);display: inline-block;padding: 0 0.25em;vertical-align:middle;}
.h3-like{font-size: 2.4rem;margin-left:;}
.h4-like{font-size: 2.0rem;text-align:center;font-family: 'Merienda One', cursive;}

/*================================
	ACCUEIL
=================================*/
.logo{padding:0px 30px 0 0;}
.texte_accueil{font-size: 2.2rem;}
.rate{margin-top:15px;}

/*================================
	TARIFS
=================================*/
.flex-styles {  
  border: 5px solid rgb(111,41,97);
  border-radius: .5em;
  padding: 10px;
}
.flex-wrap{flex-wrap:wrap;}

.item-styles {
	min-width:300px;
  padding: 5px 1px;
  background-color: rgba(111,41,97,.3);
  border: 2px solid rgba(111,41,97,.5);
}
/*================================
	COURS STAGES
=================================*/
.cours{width:30%;margin:20px;}
.cours-01{background-color:rgba(223, 255, 155, 0.4);}
.cours-02{background-color:rgba(191, 223, 255, 0.4);}
.cours-03{background-color:rgba(255, 239, 191, 0.4);}
.cours-04{background-color:rgba(255, 191, 207, 0.4);}
.cours p{padding:10px;min-height:150px}
.color-green{background-color:rgba(223, 255, 155, 0.9);}
.color-blue{background-color:rgba(191, 223, 255, 0.9);}
.color-yellow{background-color:rgba(255, 239, 191, 0.9);}
.color-red{background-color:rgba(255, 191, 207, 0.9);}

.port_centre_equestre,.port_centre_equestre_inverse{padding:px;width:;margin:0 auto;}
.port_centre_equestre p{padding-top:20px;}
.port_centre_equestre img{float:left;margin: 5px ;}

.port_centre_equestre_inverse p{text-align:right;padding:20px 0 30px 0;}
.port_centre_equestre_inverse img{float:right;padding:2px;margin:0 0 5px 10px;}

/*=======================
	ACCORDEON
 =======================*/
.accordion {background-color:#827F7F;color: #ffffff;cursor: pointer;padding: 18px;width: 100%;border: none;text-align: left;outline: none;font-size:18px ;transition: 0.4s;}
.active, .accordion:hover, .accordion:focus{background-color: #;outline:0;color: #ffbf00;}
.accordion:after {content: '\002B';color: #fff;font-size:20px;font-weight: ;float: right;margin-left: 5px;}
.active:after {content: "\2212";}
.panel {/*position:absolute;width:30%;*/padding: 0 18px;background-color: white;max-height: 0;overflow: hidden;transition: max-height 0.2s ease-out;}

/*================================
	PAGE CONTACT
=================================*/
fieldset{width:95%;min-height:120px;border:0px solid #E3E3E3;margin:5px ;padding:5px 0 20px 0;
	-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}	
legend{font-size:1.4em;margin-left:10%;text-align:center;padding:0 5px;color:#9d9886;}	
label{display:block;width:75%;margin-left:10px;cursor:default;}

input,textarea{margin-bottom:10px;text-decoration: none;border:1px solid #868695;background-color:#f4f4f4;outline:none;padding:0 10px;
	border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;}

input[type="text"],input[type="email"]{width:60%;height:32px;}
textarea{width:90%;}
input[type="text"]:hover,input[type="email"]:hover,textarea:hover{background-color:#ffffff;border-left:4px solid #0F85BF;}
textarea:focus,input[type="text"]:focus {background-color:#FFF;border-left:4px solid #0F85BF;}
.h-title{text-align:center;font-size:1.0em;width:100%;padding:10px 0;margin-top:100px;border-left:10px solid #18181A;border-right:10px solid #18181A;}
input[type=submit]{display:block;outline: none;cursor: pointer;text-align: center;margin:10px;padding: .4em 1.8em;width:180px;transition: width 1s;
	border-radius: 5px;box-shadow: 0 1px 2px rgba(0,0,0,.2);font-size: 1.2em;margin-top: 5px;color: #fef4e9;border: solid 1px #242415;			
	background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898; 
	background-blend-mode: multiply,multiply;}
input[type=submit]:hover{width:220px;color:#b8dcff;}

.captcha{font-weight:bold;cursor:text;}

.remarque{display: none}/*classe du champ caché anti-spam*/
.erreur{color:#ff0000;font-size:1.6rem;font-weight:400;padding:2px 8px;width:60%;}
.erreur-bordure{caret-color: #FF0000;border: 1px solid red !important;border-left:5px solid red !important;}

.alert {padding:15px;margin:10px auto;width: 90%;border: 1px solid transparent;border-radius: 4px;text-align:center;font-size:22px;}
.alert_info {color: #1a3b9d;background-color: #d9edf7;border: 1px solid #6b87d9;}
.alert_warning {color: #9f0606;background-color: #fcf8e3;border: 1px solid #8a6d3b;}

/* ============ TOOLTIPS ========= */
a.tooltips {position: relative;display: inline;}
a.tooltips span {padding:10px;position: absolute;width:140px;color: #FFFFFF;background: #282828;height: auto;text-align: center;visibility: hidden;border-radius: 20px;}
a.tooltips span:after {content: '';position: absolute;top: 100%;left: 50%;margin-left: -8px;width: 0; height: 0;border-top: 8px solid #282828;border-right: 8px solid transparent;border-left: 8px solid transparent;}
a:hover.tooltips span {visibility: visible;opacity: 0.9;bottom: 30px;left: 50%;margin-left: -76px;z-index: 999;}

/*=======================
	CAROUSSEL
 =======================*/
#container-carousel{width:100%;max-width:1900px;height:auto;margin:auto;background-color:#943E23;}	
.css-carousel {position: relative; padding-bottom:25% ; height: auto; overflow: hidden;margin:0px auto;background-color:#373335;}
.css-carousel .css-img {max-width: 100%;position: absolute;left: 0;right: 0;opacity: 0;
	/* Pour rajouter des photos, rajouter 5 secondes par photo supplémentaire à -webkit-animation: */
	/* ici il y a 8 photos donc 8x 5 secondes = 40 secondes */
	-webkit-animation: css-carousel-fade 40s linear infinite;
	-moz-animation: css-carousel-fade 40s linear infinite;
	-ms-animation: css-carousel-fade 40s linear infinite;
	animation: css-carousel-fade 40s linear infinite;
}

/*Styles au-dessus de 1400px */
@media only screen and (min-width: 1400px) {
	.css-carousel {padding-bottom: 25%;}
}
/* Pour rajouter des photos, rajouter 5 secondes par photo supplémentaire à -webkit-animation: */
.css-carousel .css-img:nth-child(2) {-webkit-animation-delay: 5s;-moz-animation-delay: 5s;-ms-animation-delay: 5s;animation-delay: 5s;}
.css-carousel .css-img:nth-child(3) {-webkit-animation-delay: 10s;-moz-animation-delay: 10s;-ms-animation-delay: 10s;animation-delay: 10s;}
.css-carousel .css-img:nth-child(4) {-webkit-animation-delay: 15s;-moz-animation-delay: 15s;-ms-animation-delay: 15s;animation-delay: 15s;}
.css-carousel .css-img:nth-child(5) {-webkit-animation-delay: 20s;-moz-animation-delay: 20s;-ms-animation-delay: 20s;animation-delay: 20s;}
.css-carousel .css-img:nth-child(6) {-webkit-animation-delay: 25s;-moz-animation-delay: 25s;-ms-animation-delay: 25s;animation-delay: 25s;}
.css-carousel .css-img:nth-child(7) {-webkit-animation-delay: 30s;-moz-animation-delay: 30s;-ms-animation-delay: 30s;animation-delay: 30s;}
.css-carousel .css-img:nth-child(8) {-webkit-animation-delay: 35s;-moz-animation-delay: 35s;-ms-animation-delay: 35s;animation-delay: 35s;}
@-webkit-keyframes css-carousel-fade{
	0%, 20%, 100% { opacity: 0; }
	5%, 15% { opacity: 1;}
}

/*================================
	MEDIA-QUERIES
=================================*/
@media only screen and (max-width: 960px){
	.h1-title {font-size: 4.0rem;line-height:1;}
	.h2-title {font-size: 3.0rem;line-height:1px;padding:;}
	.logo{padding:0 0;width: 90px;}
	.h3-like{font-size: 2.2rem;}
	.hero {padding: 20px 0 ; }
	.cours{width:50%;margin:10px;}
	.mlxxl {margin-left: 6rem;}
	.flex-contain {flex-flow: column wrap;padding: 5px;}
	.flex-item {width:100%;}
}

@media only screen and (max-width: 48em){/*768px*/
	/* All CSS will go here */
	/* Un message personnalisé 
	body:before {content:"Version mobile du site";display:block;text-align:center;font-style:italic;color:#fff;}*/
	html, body { overflow-x: hidden;font-size: 1.0rem; }
	main{padding:10px;}
	.colonne_1,.colonne_2{width:100%;}
	
	.logo{padding:0 0;width: 60px;display:block;margin:auto;}
	.texte_accueil{font-size: 1.2rem;}
	.h1-title {display:block;font-size: 2.0rem;line-height:1;text-align:center;}
	.h2-title {font-size: 1.4rem;line-height:1.5;text-align:center;}
	.h2-like{font-size: 1.4rem;}
	.h3-like{font-size: 1.2rem;}
	.h4-like{font-size: 1.2rem;}
	.bigger,.u-bigger{font-size: 1.2rem}
	.mlxxl {margin-left: 0;}
	
	.hero {padding: 20px 0 ; }
	.portfolio,.portfolio_inverse{width:100%;margin:2rem auto 2rem auto;}	
	.portfolio img,.portfolio_inverse img{float:none;margin:0 auto;display:block;padding-bottom:0px;}	
	.portfolio p,.portfolio_inverse p{padding-top:5px;}	
	.portfolio_inverse p{text-align:left;}
	.img_cachee{display: block;width:100%;height:auto;}
	.video{width:100%;margin:15px auto;}
	fieldset,textarea,input[type="text"],input[type="email"]{width:95%;}
	
}