:root {
	--xl-margin: 150px;
	--lg-margin: 80px;
	--md-margin: 0px;
	--sm-margin: 10px;
	--xs-margin: 15px;
	--primary-color: #243A3D;
	--secondary-color: #CA0F02;
	--tertiary-color: #F5F7FA;
	
	--title-color: #333;
	--text-color: #666;
	
	--md-width: 700px;
	--lg-width: 800px;
	--xl-width: 800px;
	--photo-ratio: 1.538461538461538;
}

::selection { background-color: #DD290F; color: #fff; }

* { margin: 0; padding: 0; box-sizing: border-box; appearance:none; -moz-appearance: none; -webkit-appearance:none;  /*outline: 1px solid #f00;*/  }
html { font-family: system-ui, sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: system-ui, sans-serif; color: #333; line-height: 100%; display: flex; flex-direction: column; min-height: 100vh; }
a, a:hover { text-decoration: none; color: #666; }
h1, h2, h3 { font-family: "Times New Roman", "Time", serif; font-family: system-ui, sans-serif; }

img { width: 100%; max-width: 100%; }
.atc:hover, .atcb:hover { cursor: pointer; }
.relative { position: relative; }
.body__stop-scrolling { overflow: hidden; }

/*.atc.link { text-decoration: underline; }*/

.container { width: 100%; margin-right: auto; margin-left: auto; /*overflow: hidden;*/ }
.container--inner { width: 100%; overflow: hidden; position: relative; }
@media (max-width: 767px) {
	.container { width: 100%; margin: 0; }
	.container--inner { padding: 0 15px;  }
	.container__inner { padding: 0 20px;  }
}	
@media (min-width: 768px) and (max-width: 991px) {
	.container { width:100%; }
	.container--inner { padding: 0 15px;  }
	.container__inner { padding: 0 20px;  }
}
@media (min-width: 992px) and (max-width: 1199px) {
	.container { max-width: 970px;  }
	.container--inner { padding: 0;  }
	.container__inner { padding: 0;  }
}
@media (min-width: 1200px) {
	.container { max-width: 1140px; }
	.container--inner { padding: 0;  }
	.container__inner { padding: 0;  }
}



.header { background-color: #000; padding-top: 20px; position: relative;  }
.header--wrapper { display: block; width: 100%; overflow: hidden; position: relative; }
.header--sitename { display: block; width: 100%; text-align: center; color: #000; }
.header--logo { display: inline-block; /*float: left;*/ width: 60px; height: 60px; }
.header--brand { display: inline-block; /*float: left;*/ color: #fff; font-weight: 900; overflow: hidden;}

.header--icons { display: flex; flex-grow: 1; align-items: center; justify-content: space-between; text-align: right; }
.header--icon { display: inline-block; }
.header--icon:hover { cursor: pointer; }
.header--icon svg { opacity: 1; }
.header--icon svg:hover { opacity: 0.7;}



.header--menu-toggle { display: none; position: absolute; z-index: 301; width: 30px; height: 40px; top: 20px; left: 20px; transform : translateY(-50%); }
.header--menu-toggle span { display: block; background-color : #fff; width: 30px; height: 3px; border-radius: 3px; margin-top: -1px; transition : background-color 0.3s ease-in-out; position: absolute; right: 0; top: 50%; bottom: auto; left: auto; }
.header--menu-toggle span::before,
.header--menu-toggle span::after { content: ""; width: 100%; height: 100%; transition: transform 0.3s ease-in-out; background-color : inherit; position: absolute; left: 0; }
.header--menu-toggle span::before { top : -12px; }
.header--menu-toggle span::after { bottom : -12px; }
.header--menu-toggle.is-clicked span { background-color: rgba(0,0,0,0); transition: all .1s; }
.header--menu-toggle.is-clicked span::before,
.header--menu-toggle.is-clicked span::after { background-color : #fff; }
.header--menu-toggle.is-clicked span::before { top: 0; transform : rotate(135deg); }
.header--menu-toggle.is-clicked span::after { bottom: 0; transform : rotate(225deg); }




.main-menu { }
.main-menu ul { margin: 0 80px; padding: 0; list-style: none; display: flex; flex-direction: row; align-items: center; justify-content: space-between; position: relative; }
.main-menu li { color: #fff; border-bottom: 5px solid #000; }
.main-menu li a { color: #fff; text-transform: uppercase; font-weight: 400; }
.main-menu li.active { border-bottom: 5px solid #CA0F02; }
.main-menu li.active a { color: #fff; }

@media screen and (max-width: 767px) {
	.header--wrapper { width: 100%; margin: 0 0 10px 0; overflow: hidden; z-index: 2; }
	.header--menu-toggle { display : block; }

	.header--sitename { width: calc(100% - 40px); margin-left: 40px; /*outline: 1px solid #f00;*/ }
	.header--logo { width: 40px; height: 40px; overflow: hidden; }
	.header--brand { font-size: 24px; line-height: 40px; padding: 0 0 0 5px; }

	.main-menu { display: none; }
	.main-menu.main-menu__show { display: flex; width: 100%; height: 100%; position: fixed; z-index: 1; left: 0; top: 0; overflow-x: hidden; background-color: #000; padding-top: 50px; }
	
	.main-menu ul { display: block; width: 100%; margin: 0; padding: 60px 0 30px 30px; counter-reset: ctr; }
	.main-menu li { display: block; width: 100%; padding: 0; margin-bottom: 20px; text-align: left;  position: relative; }
	.main-menu li:before { content: counter(ctr, decimal-leading-zero); counter-increment: ctr; display: inline; font-weight: 400; font-size: 15px; color: #999; transform: translateY(-50%); position: absolute; left: 0; top: 15px; }
	.main-menu li a {  padding-left: 30px; line-height: 1.5; font-size: 20px; }
	.main-menu li.active { border-bottom: none; /* background: var(--primary-color);*/ }
	.main-menu li.active a { color: #CA0F02; }	
}

@media screen and (min-width: 768px) {
	.header--wrapper { width: 95%; margin: 0 auto 10px auto; position: relative; overflow: hidden; display: flex; flex-grow: 1; }
	.nav-toggle { display: none; }
	.header--logo { width: 60px; height: 60px; overflow: hidden; }
	.header--brand { font-size: 32px; line-height: 60px; padding: 0 0 0 10px; }

	.main-menu { width:95%; margin: 0 auto; }
	.main-menu ul { margin: 0; flex-direction: row; align-items: center; justify-content: space-between; }
	.main-menu li { line-height: 37px; padding: 5px 5px; text-align: center; display: inline-block; width: auto;  }
	.main-menu li a { padding: 5px 5px; line-height: 30px; font-size: 14px; }

	.menu-sub ul { flex-direction: column; align-items: center; justify-content: space-between; }
}


.menu-sub { position: absolute; left: 0; background: #444; width: 100%; display: none; color: #fff; padding: 2em; /*z-index: 999;*/ }
nav li:hover .menu-sub { display: block; }
.menu-sub ul { flex-direction: column; align-items: center; justify-content: space-between; width: 100%; }
.menu-sub li {display: block; }
.menu-sub a { padding: 0; margin-bottom: .35em; }
.menu-sub a:hover { text-decoration: underline; }
.menu-category { margin: 2.5em 0 .5em; }
.menu-category:first-of-type { margin-top: 0; }
.menu-col { width: 25%; float: left; }





/*
 * FRONTPAGE
 */
 
.frontpage--banner { width: 100%; background: #FBFBF9; overflow: hidden; position: relative; border-top: 2px solid var(--primary-color); border-bottom: 2px solid var(--primary-color); }
.frontpage--banner-image { display: block; max-width: none !important; /*outline: 1px solid #fff;*/ }
.frontpage--banner-meta { position: absolute; /*outline: 1px solid #00f;*/ }
.frontpage--banner-title { line-height: 1.5; font-weight: 900; color: var(--secondary-color); width: 100%; text-align: center; /*-webkit-text-stroke: 1px #FBFBF9;*/ text-shadow: 0 0 10px #FBFBF9; }
.frontpage--banner-items { display: block; margin-top: 30px; }
.frontpage--banner-items ul { list-style: none; margin: 0; padding: 0; }
.frontpage--banner-items ul li { display: block; width: 100%; text-align: center; font-size: 20px; line-height: 1.3; font-weight: 700; color: #fff; margin: 30px 0; }
.frontpage--banner-items ul li:not(:last-child):after { content: ''; display: block; width: 15px; height: 15px; border-radius: 50%; background: #fff; margin: 30px auto 0 auto; }

.home--banner { width: 100%; height: 500px; background: #000; position: relative;}
.home--banner img { display: block; height: 500px; width: auto; position: absolute; top: 0; right: 0;}
.home-banner--text { width: 100%; position: absolute; top: 50px; left: 0; }
.home-banner--title { display: block; width: calc(100% - 30px); font-size: 48px; font-weight: 900; color: #fff; text-align: left; position: absolute; left: 15px; top: 130px;  }
.home-banner--subtitle { display: block; width:calc(100% - 30px); font-size: 16px; font-weight: 600; color: #fff; text-align: left; text-transform: uppercase; line-height: 1.5; letter-spacing: 3px; /*z-index: 99;*/ position: absolute; left: 15px; top: 180px;  }

.home-section { display: block; width: 100%; padding: 30px 0; margin-bottom: 0px; position: relative; }
.home-block { width: 100%; padding: 60px 0; }
.home-block__padding { padding: 60px 30px; }
.home-block__grey { background-color: var(--primary-color); }
.home-block--tag { display: block; width: 100%; font-size: 13px; text-transform: uppercase; color: var(--primary-color); }
.home-block--title { display: block; width: 100%;  color: var(--primary-color); font-weight: 900; line-height: 1.3; margin-left: auto; margin-right: auto; }
.home-block--title a { color: var(--primary-color); }
.home-block__center { text-align: center; }
.home-block--intro { color: #999; font-weight: 900; display: block; margin: 0 auto 30px auto; line-height: 1.8; }
.home-block--intro a { color: #999; border-bottom: 2px solid #999; }
.home-block__grey .home-block--intro { color: #fff !important; }
.home-block--intro em:before { content: '`'; }
.home-block--intro em:after { content: '´'; }

.home-block__grey .home-block--tag { color: #fff; }
.home-block__grey .home-block--title { color: #fff; }
.home-block__grey h2 a { color: #fff; }
.home-block__follow { }
.home-block__follow:before { content: ''; display: block; width: 10px; height: 50px; position: absolute; left: calc(50% - 5px); top: -30px; background: var(--secondary-color); }

@media screen and (max-width: 575px) {
	.home--banner { height: 250px; }
	.home--banner img { width: 100%; height: 250px; object-fit: cover; }
	.home-banner--title { font-size: 32px; }
	.home-banner--subtitle { font-size: 14px; letter-spacing: 3px; }
	.home-block--title { font-size: 24px; margin: 0px 0 30px 0; }
	.home-block__padding { padding: 15px; }
	.home-block__red { padding-top: 30px; }
}
@media screen and (min-width: 576px) and (max-width: 767px)  {
	.home--banner img { object-fit: cover; }
	.home-banner--title { font-size: 54px; }
	.home-banner--subtitle { font-size: 15px; letter-spacing: 3px; }
	.home-block--title { font-size: 48px; margin: 0px 0 60px 0; }

}
@media screen and (min-width: 768px) and (max-width: 991px) {
	.home-banner--title { font-size: 60px; }
	.home-banner--subtitle { font-size: 15px; letter-spacing: 3px; }
	.home-block--title { font-size: 48px; margin: 0px 0 60px 0; }
}
@media screen and (min-width: 992px) and (max-width: 1199px)  {
	.home-banner--title { font-size: 64px; }
	.home-banner--subtitle { font-size: 15px; letter-spacing: 3px; }
	.home-block--title { font-size: 48px; margin: 0px 0 60px 0; }
}
@media screen and (min-width: 1200px) {	
	.home-banner--title { font-size: 64px; }
	.home-banner--subtitle { font-size: 15px; letter-spacing: 3px; }
	.home-block--title { font-size: 48px; margin: 0px 0 60px 0; }
	.home-block--intro { width: 80%; }
}





.home-questions { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; }
.home-question { width: 33.3%; padding: 16px; border-left: 1px solid #ccc; }
.home-question:first-child { border-left: none; }
.home-question--heading-title { display: block; width: 100%; color: var(--primary-color); font-weight: 700; line-height: 1.1; }
.home-question--heading-subtitle { display: block; width: 100%; color: #000; line-height: 1; margin: 15px 0; font-weight: 900; }
.home-question--text { font-size: 14px; line-height: 1.5; }
.home-question--text a { color: var(--secondary-color); text-decoration: underline; }

.home-cards { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; }
.home-card { width: 33.3%; padding: 16px; }
.home-card img { opacity: 1; transition: opacity 300ms; }
.home-card:hover img { opacity: 0.7; }
.home-card--tag { display: block; width: 100%; color: var(--primary-color); font-size: 13px; line-height: 1; text-transform: uppercase; }
.home-card--title { display: block; width: 100%; color: var(--primary-color);  font-weight: 900; line-height: 1.1; }
.home-card--title a { color: var(--primary-color); }
.home-card--text { font-size: 14px; line-height: 1.5; }


@media screen and (max-width: 575px) {
	.home-questions { display: flex; flex-direction: row; flex-wrap: wrap; align-items: start; justify-content: space-between; }
	.home-question { width: 100%; padding: 16px; border-top: 1px solid #ccc; border-left: 0; }
	.home-question:first-child { border-top: none; }
	.home-question--heading-title { font-size: 16px; }
	.home-question--heading-subtitle { font-size: 24px; }
	.home-cards { flex-direction: row; }
	.home-card { width: 100%; padding: 16px 0; }
	.home-card--title { font-size: 22px; margin: 10px 0 15px 0; }
}
@media screen and (min-width: 576px) and (max-width: 767px)  {
	.home-question--heading-title { font-size: 16px; }
	.home-question--heading-subtitle { font-size: 24px; }
	.home-card--title { font-size: 18px; margin: 10px 0 15px 0; }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
	.home-question--heading-title { font-size: 16px; }
	.home-question--heading-subtitle { font-size: 24px; }
	.home-card--title { font-size: 18px; margin: 10px 0 15px 0; }
}
@media screen and (min-width: 992px) and (max-width: 1199px)  {
	.home-question--heading-title { font-size: 18px; }
	.home-question--heading-subtitle { font-size: 32px; }
	.home-card--title { font-size: 20px; margin: 10px 0 15px 0; }
}
@media screen and (min-width: 1200px) {	
	.home-question--heading-title { font-size: 18px; }
	.home-question--heading-subtitle { font-size: 32px; }
	.home-card--title { font-size: 22px; margin: 10px 0 15px 0; }
}







.home-posters { width: calc(100% - 32px); margin-left: auto; margin-right: auto; display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; }
.home-poster-feature { width: calc(66.67% - 10px); height: 550px; position: relative; }
.home-poster-feature picture { display: block; width: 100%; height: 550px; margin: 0; }
.home-poster-feature img { display: block; width: 100%; height: 550px; object-fit: cover; }
.home-poster-feature-text { position: absolute; width: 70%; top: 40px; left: 40px; }
.home-poster-tag { display: block; width: 100%; color: #fff; font-size: 13px; line-height: 1; text-transform: uppercase; }
.home-poster-feature-title a { color: #fff; font-weight: 900; line-height: 1.3; }
.home-poster-group { width: calc(33.33% - 10px); height: 550px; }
.home-poster-small { width: 100%; height: 265px; position: relative; }
.home-poster-small__first { margin-bottom: 20px; }
.home-poster-small picture { display: block; width: 100%; height: 265px; }
.home-poster-small img { display: block; width: 100%; height: 265px;  object-fit: cover; }
.home-poster-small-text { position: absolute; width: 75%; top: 40px; left: 20px; }
.home-poster-small-title a { color: #fff; font-weight: 900; line-height: 1.3; }
.home-poster-feature picture:after, .home-poster-small picture:after { content: ""; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to top, rgba(34,39,37,0), rgba(34,39,37,0.5)); }


@media screen and (max-width: 575px) {
	.home-posters { flex-direction: row; }
	.home-poster-feature { width: 100%; height: 200px; position: relative; margin-bottom: 20px; }
	.home-poster-feature picture { width: 100%; height: 200px; margin: 0; }
	.home-poster-feature img { width: 100%; height: 200px; }
	.home-poster-feature-text { position: absolute; width: 80%; top: 20px; left: 20px; }
	.home-poster-group { width: 100%; height: auto; }
	.home-poster-small { width: 100%; height: 200px; position: relative; }
	.home-poster-small__first { margin-bottom: 20px; }
	.home-poster-small picture { display: block; width: 100%; height: 200px; }
	.home-poster-small img { display: block; width: 100%; height: 200px; }
	.home-poster-small-text { width: 80%; top: 20px; left: 20px; }
}
@media screen and (min-width: 576px) and (max-width: 767px)  {
	.home-poster-feature-title a { font-size: 36px; }
	.home-poster-small-title a { font-size: 20px; }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
	.home-poster-feature-title a { font-size: 36px; }
	.home-poster-small-title a { font-size: 20px; }
}
@media screen and (min-width: 992px) and (max-width: 1199px)  {
	.home-poster-feature-title a { font-size: 36px; }
	.home-poster-small-title a { font-size: 20px; }
}
@media screen and (min-width: 1200px) {	
	.home-poster-feature-title a { font-size: 48px; }
	.home-poster-small-title a { font-size: 20px; }
}


.home-genres-list { list-style: none; display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; width: 100%; }
.home-genres--item { width: 30%; margin-bottom: 30px; }
.home-genres--item img { display: block; width: 100%; height: 150px; object-fit: cover; border-radius: 10px; transition: opacity 250ms; }
.home-genres--item a { display: block; width: 100%; padding: 5px 0 0 0; font-size: 15px; font-weight: 700; color: #fff; text-align: center; }
.home-genres--item img:hover { opacity: 0.5; }
.home-genres--item:hover a { text-decoration: underline; }

@media screen and (max-width: 575px) {
	.home-genres--item img { width: 100%; height: 75px; }
}
@media screen and (min-width: 576px) and (max-width: 767px)  {
	.home-genres--item img { width: 100%; height: 100px; }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
	.home-genres--item img { width: 100%; height: 100px; }
}

.section__grey { background: var(--tertiary-color); }
.frontpage--pretitle { display: block; line-height: 1.5; font-weight: 700; color: #AA9F80; font-size: 16px; text-transform: uppercase; }
.frontpage--pretitle__center { text-align: center; }
.frontpage--pretitle__center::before { content: ''; display: block; width: 4px; height: 80px; background: #AA9F80; position: absolute; left: calc(50% - 2px); top: -100px; }
.frontpage--title { display: block; line-height: 1.5; font-weight: 900; color: var(--primary-color); position: relative; }
.frontpage--title__center { text-align: center; }


.frontpage--columns { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; }
.frontpage--col { width: 48%; }
.frontpage--col p { margin-top: 15px; margin-bottom: 15px; font-size: 16px; line-height: 30px; text-align: justify; }


.frontpage--chapo { display: block; width: 75%; margin: 20px auto; text-align: center; font-size: 20px; line-height: 1.8; font-style: italic; }

.frontpage--card-wrapper { display: block; width: 100%; position: relative; }
.frontpage--card { display: block; width: 100%; margin: 30px 0; background: #F2EED9; border-radius: 20px; padding: 45px; }
.frontpage--card-title { display: block; font-size: 32px; line-height: 1.3; font-weight: 900; color: #333; width: 580px; text-align: left; margin-bottom: 30px; }
.frontpage--card-subtitle { font-size: 20px; line-height: 1.3; font-weight: 700; color: #333; width: 580px; text-align: left; }
.frontpage--card-city { display: block; border-radius: 10px; position: absolute;  }
.frontpage--card-ancient { display: block; border-radius: 10px; position: absolute; }
.frontpage--card-subtext { }

.frontpage--subtitle { display: block; line-height: 1.5; font-weight: 900; color: #333; text-align: left; position: relative; font-size: 18px; }
.frontpage--subtitle:before { content:url("data:image/svg+xml;utf8,<svg viewBox='0 0 100 60'  xmlns='http://www.w3.org/2000/svg'><g transform='matrix(0.897844,0,0,-0.881301,-5392.89,113.681)'><path d='M6010.39,122.862C6012.19,124.121 6013.99,125.021 6018.13,125.021C6022.27,125.021 6024.11,124.062 6027.72,121.187C6033.03,116.945 6038.23,109.471 6031.48,104.736C6024.15,99.597 6019.37,106.329 6021.49,111.018C6025.03,118.888 6041.61,121.679 6047.32,121.311C6057.6,120.646 6062.43,114.805 6064.66,111.739C6066.89,108.672 6068.06,104.013 6068.88,96.829C6069.71,89.645 6068.99,73.99 6069.14,73.99C6073.77,88.452 6073.27,88.177 6078.64,98.081C6084,107.985 6093.7,119.296 6095.92,120.404' style='fill:none;fill-rule:nonzero;stroke:rgb(221,41,15);stroke-width:4.5px;'/></g><g transform='matrix(0.520829,-0.717866,0.731341,0.511233,-3161.8,4333.7)'><path d='M6072.57,83.531C6077.1,81.551 6082.57,81.817 6087.07,83.531' style='fill:none;fill-rule:nonzero;stroke:rgb(221,41,15);stroke-width:4.46px;'/></g><g transform='matrix(0.773402,-0.447638,0.45604,0.759152,-4687.71,2678.14)'><path d='M6083.19,115.274C6088.62,113.668 6090.92,113.77 6095.24,115.274' style='fill:none;fill-rule:nonzero;stroke:rgb(221,41,15);stroke-width:4.46px;'/></g><g transform='matrix(0.890979,0.108772,-0.110814,0.874562,-5336.34,-724.275)'><path d='M6084.97,132.904C6098.08,131.237 6102.33,129.935 6114.25,132.904' style='fill:none;fill-rule:nonzero;stroke:rgb(221,41,15);stroke-width:4.51px;'/></g></svg>"); position: absolute; width: 80px; height: 48px; left: -90px; top: 0px; }

.frontpage--elastic-columns { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; margin: 50px 0 30px 0; }
.frontpage--elastic-col { position: relative; /*outline: 1px solid #0f0;*/ }

.frontpage--subtitle { font-size: 18px; line-height: 1.5; font-weight: 900; color: #333; text-align: left; }
.frontpage--elastic-col-icons { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; }
.frontpage--elastic-col-icon { width: 25%; height: 130px; transition: all 250ms; /* outline: 1px solid #000;*/ }
.frontpage--elastic-col-icon:hover { cursor: pointer; padding-top: 10px; }
.frontpage--elastic-col-icon svg { display: block; width: 64px; height: 64px; margin: 15px auto; }
.frontpage--elastic-col-icon a { display: block; width: 100%; text-align: center; font-size: 15px; font-weight: bold; }
.frontpage--elastic-col p.small { color: #999; font-size: 14px; width: 100%; text-align: center; }
.frontpage--elastic-col p.small a:hover { text-decoration: underline; }

.frontpage--elastic-col-image-big { display: block; position: absolute; }
.frontpage--elastic-col-image-small-wrapper { display: block; background: #fff; padding: 10px; position: absolute; box-shadow: 0 0 12px #999; }
.frontpage--elastic-col-image-small { width: 100%;  height: 100%; }
.frontpage--bullets { display: block; position: absolute; }

.frontpage--articles { background: #F2EED9; padding: 30px 0; overflow: hidden; position: relative; }
.frontpage--articles:after { content: ''; width: 100%; height: 60px; background: #fff; position: absolute; bottom: 0; left: 0; }
.frontpage--articles-list { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: space-between; padding-bottom: 5px; }
.frontpage--articles-thearticle { background: #fff; width: 24%; border-radius: 5px; overflow: hidden; box-shadow: 0 0 12px #999; z-index: 9; }
.frontpage--articles-thearticle img { display: block; opacity: 1; transition: opacity 250ms;  }
.frontpage--articles-thearticle a { display: block; color: #333; font-size: 16px; line-height: 1.3; font-weight: 700; text-align: center; padding: 10px; transition: color 250ms; }
.frontpage--articles-thearticle:hover a { color: #DD290F; }
.frontpage--articles-thearticle:hover img { opacity: 0.7; }


.frontpage--last-articles-list { margin: 30px 0 0 0; display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; justify-content: space-between;  }
.frontpage--last-articles-thearticle { display: block; position: relative; }
.frontpage--last-articles-thearticle img { opacity: 1; transition: opacity 250ms; }
.frontpage--last-articles-thearticle a { display: block; color: #333; font-weight: 700; font-size: 18px; line-height: 1.3; margin: 10px 0; width: 100%; transition: color 250ms; }
.frontpage--last-articles-thearticle-intro { font-size: 15px; line-height: 1.3; padding-bottom: 20px; }
.frontpage--last-articles-thearticle-label { display: inline-block; position: absolute; top: 10px; right: 15px; background: #DD290F; color: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase; padding: 3px 10px; }
.frontpage--last-articles-thearticle:hover img  { opacity: 0.7; }
.frontpage--last-articles-thearticle:hover a { color: #DD290F; }

.frontpage--partners-list { margin: 30px 0; display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; justify-content: space-between; }
.frontpage--partners-item { width: 48%; text-align: center; }
.frontpage--partners-item img { display: block; width: 200px; height: auto; margin: 0 auto; }
/*.frontpage--partners-item-link { font-weight: 700; color: #555; text-decoration: underline; }*/

.frontpage--now { display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; justify-content: space-between; }
.frontpage--now-main { position: relative; display: flex; flex-direction: row; align-items: center; justify-content: space-between; }
.frontpage--now-second { display: flex; flex-direction: column; flex-wrap: wrap; align-items: stretch; justify-content: space-between; }
.frontpage--now-second-1 { position: relative; display: flex; flex-direction: row; align-items: center; justify-content: space-between; }
.frontpage--now-second-2 { position: relative; display: flex; flex-direction: row; align-items: center; justify-content: space-between; }
.frontpage--now-item {  }
.frontpage--now img { display: block; position: absolute; top: 0; left: 0; object-fit: cover; border-radius: 5px; }
.frontpage--now a { display: block; width: 100%; padding: 0 20px; font-size: 24px; line-height: 1.3; font-weight: 700; color: #fff; text-shadow: 0px 0px 9px #000; text-align: center; z-index: 9; }

.frontpage--btn { background: var(--primary-color); color: #fff; padding: 8px 16px; border-radius: 5px; }

@media screen and (max-width: 575px) {
	.frontpage--last-articles-thearticle { width: 48%; }
	.frontpage--last-articles-thearticle a { color: #333; font-weight: 700; font-size: 1rem; line-height: 1.1; margin: 0.7rem 0; width: 100%; }
	.frontpage--last-articles-thearticle-intro { font-size: 13px; line-height: 1.3; }
}
@media screen and (min-width: 576px) {
	.frontpage--last-articles-thearticle { width: 32%; padding-bottom: 30px; }
	.frontpage--last-articles-thearticle-label { top: 10px; right: 15px; font-size: 12x; line-height: 1; }
}


@media (max-width:767px) {
	.frontpage--section { margin: 30px 0; }
	.frontpage--banner { height: 500px; }
	.frontpage--banner-image { display: block; width: 520px; height: 500px; margin-left: -200px; }
	.frontpage--banner-meta {  width: 300px; height: 500px; top: 100px; right: 15px;}
	.frontpage--banner-title { font-size: 40px; }
	.frontpage--col { width: 100%; }
	.frontpage--col p { font-size: 16px; line-height: 1.6; text-align: left; }

	.frontpage--title { font-size: 36px; width: 100%; margin: 30px 0 15px 0px; }
	.frontpage--title:before { width: 40px; height: 40px; left: -50px; }

	.frontpage--chapo {width: 100%; font-size: 18px; line-height: 1.5; font-style: italic; }

	.frontpage--card { padding: 20px; }
	.frontpage--card-title { font-size: 24px; width: 100%; margin-bottom: 30px; }
	.frontpage--card-subtitle { font-size: 18px; width: 100%; }
	.frontpage--subtitle:before { display: none; }
	
	.frontpage--card-city { display: none; }
	.frontpage--card-ancient { display: none; }
	.frontpage--card-subtext, .frontpage--card-subtext2 { width: 100%; }
	.frontpage--card-subtext p, .frontpage--card-subtext2 p { margin-top: 15px; color: #666; font-size: 16px; line-height: 1.6; text-align: left;  }

	.frontpage--subtitle { font-size: 20px; text-align: center; }
	.frontpage--elastic-col-icon { width: 50%; }
	.frontpage--elastic-col { min-height: 520px; width: 100%; }
	.frontpage--elastic-col p { margin-top: 15px; margin-bottom: 15px; font-size: 16px; line-height: 30px; color: #666; line-height: 1.6; text-align: center;  }
	.frontpage--elastic-col p.emphasis { margin: 20px 0; font-size: 18px; line-height: 1.5; text-align: center; color: #999; font-weight: 900; }
	.frontpage--elastic-col p.small { font-size: 13px; }
	.frontpage--elastic-col-image-big { width: 280px; height: 280px; right: 0; top: 180px; }
	.frontpage--elastic-col-image-small-wrapper { width: 200px; height: 200px; left: 0; top: 40px; }
	.frontpage--bullets { width: 80px; height: 80px; right: 230px; top: 410px; }

	.frontpage--articles:after { height: 90px; }
	.frontpage--articles-thearticle { width: 48%; margin-bottom: 20px; }
	.frontpage--articles-thearticle a { font-size: 15px; }

	.frontpage--now { width: 100%; height: 400px; margin: 30px auto 0 auto; }
	.frontpage--now-main { width: 100%; height: 195px; }
	.frontpage--now-second { width: 100%; height: 195px; }
	.frontpage--now-second-1 { width: calc(50% - 5px); height: 195px; }
	.frontpage--now-second-2 { width: calc(50% - 5px); height: 195px; margin-left: 10px; }
	.frontpage--now-main img { width: 100%; height: 195px; }
	.frontpage--now-second img { width: 100%; height: 195px; }
	.frontpage--now a { font-size: 18px; }
	
}
@media (min-width:768px) and (max-width:991px) {
	.frontpage--banner { height: 650px; }
	.frontpage--banner-image { display: block; width: 676px; height: 650px; margin-left: -120px; }
	.frontpage--banner-meta {  width: 500px; height: 500px; top: 80px; left: calc(50% - 100px); }
	.frontpage--banner-title { font-size: 64px; }
	.frontpage--col { width: 48%; }
	.frontpage--title { font-size: 36px; width: 80%; margin: 30px auto 15px auto; }

	.frontpage--card-title { font-size: 32px; width: 350px; margin-bottom: 30px; }
	.frontpage--card-subtitle { font-size: 20px; width: 350px; }
	.frontpage--card-city { width: 300px; height: 400px; top: 15px; right: 15px; }
	.frontpage--card-ancient { width: 200px; height: 200px; top: 60px; right: 160px; }
	.frontpage--card-subtext { width: 430px; }
	.frontpage--card-subtext2 { width: 100%; }
	.frontpage--card-subtext p, .frontpage--card-subtext2 p { margin-top: 15px; margin-bottom: 15px; font-size: 16px; line-height: 30px; text-align: justify; color: #666; }

	.frontpage--subtitle { font-size: 20px; }
	.frontpage--elastic-col { min-height: 520px; }
	.frontpage--elastic-col:nth-of-type(1) { width: 43%; }
	.frontpage--elastic-col:nth-of-type(2) { width: 55%; }
	.frontpage--elastic-col p { margin-top: 15px; margin-bottom: 15px; font-size: 16px; line-height: 30px; text-align: justify; color: #666; }
	.frontpage--elastic-col p.emphasis { margin: 20px 0; font-size: 20px; line-height: 1.5; text-align: center; color: #999; font-weight: 900; }
	.frontpage--elastic-col-image-big { width: 280px; height: 280px; right: 0; top: 180px; }
	.frontpage--elastic-col-image-small-wrapper { width: 200px; height: 200px; left: 0; top: 40px; }
	.frontpage--bullets { width: 80px; height: 80px; right: 230px; top: 410px; }

	.frontpage--articles-thearticle a { font-size: 15px; }
}


@media (min-width: 992px) and (max-width: 1199px) {
	.frontpage--banner { height: 650px; }
	.frontpage--banner-image { display: block; width: 676px; height: 650px; margin-left: -120px; }
	.frontpage--banner-meta {  width: 700px; height: 500px; top: 80px; left: calc(50% - 200px); }
	.frontpage--banner-title { font-size: 64px; }
	.frontpage--col { width: 48%; }
	.frontpage--title { font-size: 32px; width: 60%; margin: 30px auto 15px auto; }

	.frontpage--card-title { font-size: 32px; width: 410px; margin-bottom: 30px; }
	.frontpage--card-subtitle { font-size: 20px; width: 410px; }
	.frontpage--card-city { width: 300px; height: 400px; top: 15px; right: 15px; }
	.frontpage--card-ancient { width: 250px; height: 250px; top: 60px; right: 250px; }
	.frontpage--card-subtext { width: 600px; padding-top: 15px; }
	.frontpage--card-subtext2 { width: 600px; }
	.frontpage--card-subtext p, .frontpage--card-subtext2 p { margin-top: 15px; margin-bottom: 15px; font-size: 16px; line-height: 30px; text-align: justify; color: #666; }

	.frontpage--subtitle { font-size: 20px; }
	.frontpage--elastic-col { width: 48%; min-height: 520px; }
	.frontpage--elastic-col p { margin-top: 15px; margin-bottom: 15px; font-size: 16px; line-height: 30px; text-align: justify; color: #666; }
	.frontpage--elastic-col p.emphasis { margin: 20px 0; font-size: 20px; line-height: 1.5; text-align: center; color: #999; font-weight: 900; }
	.frontpage--elastic-col p.small { font-size: 13px; }
	.frontpage--elastic-col-image-big { width: 400px; height: 400px; right: 0; top: 80px; }
	.frontpage--elastic-col-image-small-wrapper { width: 240px; height: 240px; left: 0; top: 0px; }
	.frontpage--bullets { width: 80px; height: 80px; right: 370px; top: 430px; }

}

@media (min-width: 1200px) {
	.frontpage--banner { height: 650px; }
	.frontpage--banner-image { display: block; width: 676px; height: 650px; }
	.frontpage--banner-meta {  width: 700px; height: 500px; top: 80px; left: calc(50% - 200px); }
	.frontpage--banner-title { font-size: 64px; }
	.frontpage--col { width: 48%; }
	.frontpage--title { font-size: 48px; margin: 0px auto 15px auto; }

	.frontpage--card-title { font-size: 32px; width: 580px; margin-bottom: 30px; }
	.frontpage--card-subtitle { font-size: 20px; width: 580px; }
	.frontpage--card-city { width: 300px; height: 400px; top: 15px; right: 15px; }
	.frontpage--card-ancient { width: 250px; height: 250px; top: 60px; right: 250px; }
	.frontpage--card-subtext, .frontpage--card-subtext2 { width: 580px; }
	.frontpage--card-subtext p, .frontpage--card-subtext2 p { margin-top: 15px; margin-bottom: 15px; font-size: 16px; line-height: 30px; text-align: justify; color: #666; }

	.frontpage--subtitle { font-size: 20px; }
	.frontpage--elastic-col { width: 48%; min-height: 570px; }
	.frontpage--elastic-col p { margin-top: 15px; margin-bottom: 15px; font-size: 16px; line-height: 30px; text-align: justify; color: #666; }
	.frontpage--elastic-col p.emphasis { margin: 20px 0; font-size: 20px; line-height: 1.5; text-align: center; color: #999; font-weight: 900; }
	
	.frontpage--elastic-col-image-big { width: 440px; height: 440px; right: 0; top: 80px; }
	.frontpage--elastic-col-image-small-wrapper { width: 240px; height: 240px; left: 0; top: 0px; }
	.frontpage--bullets { width: 80px; height: 80px; right: 410px; top: 470px; }
	
}




.frontpage--box { display: block; width: calc (100% - 60px); margin: 0 auto; background: var(--primary-color); padding: 60px; }
.frontpage--box p { color: #fff; }
.frontpage--box-title { display: block; width: 100%; color: #AA9F80; font-size: 48px; line-height: 1.1; font-weight: 900; }
.frontpage--box-title span { display: block; clear: both; color: #fff; }
.frontpage--box-title:before { content: ''; display: block; width: 60px; height: 4px; background: #AA9F80; position: absolute; left: -30px; top: 70px; }

.frontpage--peoples { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; }
.frontpage--people img { display: block; border-radius: 50%; object-fit: cover; }
.frontpage--people a { display: block; color: #fff; text-align: center; font-weight: 700; }

@media (max-width:767px) {
	.frontpage--box { padding: 30px; }
	.frontpage--box-title { font-size: 36px; line-height: 1.4; }
	.frontpage--box p { line-height: 1.3; }
	.frontpage--people { width: 50%; }
	.frontpage--people img { width: 130px; height: 130px; margin: 20px auto; }
	.frontpage--people a { font-size: 18px; }
}

@media (min-width:768px) and (max-width:991px) {
	.frontpage--box-title { font-size: 36px; line-height: 1.4; }
	.frontpage--box p { line-height: 1.3; }
	.frontpage--people { width: 25%; }
	.frontpage--people img { width: 130px; height: 130px; margin: 20px auto; }
	.frontpage--people a { font-size: 18px; }
}

@media (min-width: 992px) {
	.frontpage--box-title { font-size: 48px; }
	.frontpage--people { width: 25%; }
	.frontpage--people img { width: 200px; height: 200px; margin: 20px auto; }
	.frontpage--people a { font-size: 18px; }
}




/*
 PAGES INDEX
 */

/*
.banner { position: relative; overflow: hidden; }
.banner img { object-fit: cover; }
.banner--title { position: absolute; display: block; color: #fff; font-weight: 700; text-shadow: 0 0 6px #000; }
.banner--title strong { display: block; clear: both; font-weight: 900; font-size: 150%; }
.banner--subtitle { position: absolute; display: block; color: #fff; text-shadow: 0 0 6px #000; }
.banner--buttons { display: flex; flex-wrap: wrap; justify-content: space-between; }
.banner--button-item { display: flex; width: 100%; background: #fff; border-bottom: 1px solid #7F7F76; transition: background 250ms; }
.banner--button-item:hover { background: #F5F5EF; }
.banner--button-icon { display: block; flex-shrink: 0; background: #F2EED9; border-radius: 50%; }
.banner--button-title { text-transform: uppercase; color: var(--primary-color); font-weight: 700; letter-spacing: 1px;  }
.banner--button-text { color: #666; line-height: 1.3; }


@media screen  and (max-width: 575px) {
	.banner { width: 100%; height: 350px; }
	.banner img { width: 100%; height: 350px; }
	.banner--meta {  width: 100%; float: left; }
	.banner--title { width: 350px; top: 70px; left: 20px; font-size: 24px; line-height: 1.3; }
	.banner--subtitle { width: 350px; top: 190px; left: 20px; font-size: 18px; line-height: 1.5; }
	.banner--buttons { width: 100%;  }
	.banner--button-item { width: 50%; padding: 10px; }	
	.banner--button-icon { width: 48px; height: 48px; }	
	.banner--button-content { padding-left: 10px; }
	.banner--button-title { font-size: 16px; margin: 5px 0; }
	.banner--button-text { font-size: 13px; }
}
@media screen and (min-width: 576px) and (max-width: 767px) {
	.banner { width: 100%; height: 450px; }

}
@media screen and (min-width: 768px) and (max-width: 991px) {
	.banner { width: 100%; height: 450px; margin-bottom: 30px; }
	.banner img { width: 100%; height: 450px; }
	.banner--meta {  width: 66%; float: left; }
	.banner--title { width: 460px; top: 150px; left: 20px; font-size: 24px; line-height: 1.3; }
	.banner--subtitle { width: 460px; top: 290px; left: 20px; font-size: 18px; line-height: 1.5; }
	.banner--buttons { position: absolute; display: block; box-shadow: 0 10px 20px 0 rgba(0,0,0,.3); width: 250px; right: 20px; top: 35px; }
	.banner--button-item { width: 100%; padding: 10px; }	
	.banner--button-icon { width: 64px; height: 64px; }	
	.banner--button-content { padding-left: 20px; }
	.banner--button-title { font-size: 17px; margin: 5px 0; }
	.banner--button-text { font-size: 14px; }
}
@media screen and (min-width: 992px) and (max-width: 1199px) {
	.banner { width: 100%; height: 550px; margin-bottom: 30px; }
	.banner img { width: 100%; height: 550px; }
	.banner--meta {  width: 66%; float: left; }
	.banner--title { width: 570px; top: 260px; left: 20px; font-size: 30px; line-height: 1.3; }
	.banner--subtitle { width: 570px; top: 400px; left: 20px; font-size: 20px; line-height: 1.5; }
	.banner--buttons { position: absolute; display: block; box-shadow: 0 10px 20px 0 rgba(0,0,0,.3); width: 350px; right: 30px; top: 35px; }
	.banner--button-item { width: 100%; padding: 20px; }	
	.banner--button-icon { width: 80px; height: 80px; }	
	.banner--button-content { padding-left: 20px; }
	.banner--button-title { font-size: 20px; margin: 10px 0; }
}
@media screen and (min-width: 1200px) {
	.banner { width: 100%; max-width: 1300px; height: 550px; margin: 0 auto 30px auto; }
	.banner img { width: 100%; height: 550px; }
	.banner--meta {  width: 66%; float: left; }
	.banner--title { width: 780px; top: 160px; left: 20px; font-size: 32px; line-height: 1.3; }
	.banner--subtitle { width: 780px; top: 300px; left: 20px; font-size: 20px; line-height: 1.5; }
	.banner--buttons { position: absolute; display: block; box-shadow: 0 10px 20px 0 rgba(0,0,0,.3); width: 350px; right: 30px; top: 35px; }
	.banner--button-item { width: 100%; padding: 20px; }	
	.banner--button-icon { width: 80px; height: 80px; padding: 15px; }	
	.banner--button-content { padding-left: 20px; }
	.banner--button-title { font-size: 20px; margin: 10px 0; }
}
*/

#frontpage-wrapper { display: flex; flex-direction: column;}
#frontpage-text { width: 100%; order: 2; }
#frontpage-text p { font-size: 14px; color: #555; line-height: 1.3; margin-bottom: 15px; }
#frontpage-text p a { color: #555; text-decoration: underline; }
#frontpage-content { width: 100%; order: 1; }

 
.page-section { display block; width: 100%; } 
.page-section--icon { display: block; margin: 0 auto; background: #F2EED9; border-radius: 50%; }
.page-section--title { width: 100%; font-weight: 700; color: #333; text-align: center; }
.page-section--title:after { content: ''; display: block; width: 80px; height: 10px; background: #DD290F; margin: 10px auto 20px auto; }
.page-section--intro {margin: 0 auto; font-style: italic; color: #666; text-align: center; }
.page-section--all { width: 100%; text-align: right; position: relative; }
.page-section--all a { color: #DD290F; font-size: 13px; text-transform: uppercase; padding-right: 20px; font-weight: 700; }
.page-section--all a:after { content:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' style='fill:rgb(221,41,15);'><path d='M115.452,99.004L51.223,34.594C48.048,31.41 48.056,26.247 51.239,23.072L62.777,11.567C65.961,8.392 71.124,8.399 74.299,11.583L155.883,93.072C157.519,94.704 158.317,96.861 158.274,99.004C158.317,101.147 157.519,103.304 155.883,104.936L74.299,186.425C71.124,189.609 65.961,189.616 62.777,186.441L51.239,174.936C48.056,171.761 48.048,166.599 51.223,163.415L115.452,99.004Z' /></svg>"); position: absolute; width: 16px; height: 16px; right: 0; top: 0; }

.frontpage-section--subtitle { text-align: center; color: #7F7F76; }

.page-section--articles { list-style: none; padding: 0; margin: 10px 0 30px 0; display: flex; flex-direction: row; flex-wrap: wrap; align-items: start; justify-content: space-between;  }
.page-section--article { display: block; position: relative; }
.page-section--article-image { width: 100%; height: auto; opacity: 1; transition: opacity 250ms;  }
.page-section--article-title { display: block; color: var(--primary-color); font-weight: 700; font-size: 18px; line-height: 1.3; margin: 10px 0; width: 100%; transition: color 250ms; }
.page-section--article-intro { font-size: 15px; line-height: 1.3; padding-bottom: 20px; }
.page-section--article-label { display: inline-block; position: absolute; top: 10px; right: 15px; background: #DD290F; color: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase; padding: 3px 10px; }
.page-section--article:hover .page-section--article-image { opacity: 0.7; }
.page-section--article:hover .page-section--article-title { color: #DD290F; }

@media screen and (max-width: 575px) {
	.page-section--article { width: 48%; }
	.page-section--article-title { color: #333; font-weight: 700; font-size: 1rem; line-height: 1.1; margin: 0.7rem 0; width: 100%; }
	.page-section--article-intro { font-size: 13px; line-height: 1.3; }
}
@media screen and (min-width: 576px) {
	.page-section--article { width: 32%; padding-bottom: 30px; }
	.page-section--article-label { top: 10px; right: 15px; font-size: 12x; line-height: 1; }
}


@media screen  and (max-width: 575px) {
	.page-section { margin: 60px 0; }
	.page-section--icon { width: 48px; height: 48px; padding: 15px; margin-bottom: 15px; }
	.page-section--title { font-size: 24px; line-height: 1.3; }
	.page-section--title:after { content: ''; display: block; width: 60px; height: 5px; background: #DD290F; margin: 10px auto 10px auto; }	
	.page-section--intro { width: 90%; font-size: 16px; line-height: 1.5; margin-bottom: 30px; }
}

@media screen and (min-width: 576px) {
	.page-section { margin: 60px 0; }
	.page-section--icon { width: 96px; height: 96px; padding: 15px; margin-bottom: 15px; }
	.page-section--title { font-size: 32px; line-height: 1.5; }
	.page-section--intro { width: 80%; font-size: 18px; line-height: 1.5; }
}




/* Derniers articles */



.recommendations { list-style: none; padding: 0; margin: 30px 0; display: flex; flex-flow: row wrap; align-items: start; justify-content: space-between;  }
.recommendations--section-title { display: block; width: 100%; color: #000; font-weight: 900; font-size: 20px; line-height: 1; text-transform: uppercase; letter-spacing: 2px; margin: 4rem 0 0.6rem 0; width: 100%; text-align: center;}
.recommendations--item { padding: 0px 15px; margin-bottom: 2rem; position: relative; }
.recommendations--image { opacity: 1; transition: opacity 250ms;  }
.recommendations--image:hover { opacity: 0.75; }
.recommendations--title { color: #333; font-weight: 900; font-size: 18px; line-height: 1.3; margin: 10px 0; width: 100%; }
.recommendations--title a { color: #333; transition: color 250ms; }
.recommendations--title a:hover { color: #DD290F; }
.recommendations--intro { font-size: 15px; line-height: 1.3; }
.recommendations--label { display: inline-block; position: absolute; top: 10px; right: 15px; background: #DD290F; color: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase; padding: 3px 10px; }
@media screen and (max-width: 575px) {
	.recommendations--section-title { font-size: 16px; }
	.recommendations--item { width: 50%; }
	.recommendations--label { padding: 2px 5px; }
}
@media screen and (min-width: 576px) {
	.recommendations--item { width: 33.33%; }
	.recommendations--label { top: 10px; right: 15px; line-height: 1; }
}








/*
 * FRONTPAGE
 */

/*
 * ARTICLE
 */

#article-wrapper { display: flex; flex-flow: row wrap; }
#article-wrapper #article-chapternav { width: 100%; order: 1; }
#article-wrapper #article-image { display: block; width: 100%; margin-top: 0px; order: 2; }
#article-wrapper #article-simple { display: block; width: 100%; margin-top: 0px; order: 2; }
#article-wrapper #article-path { width: 100%; overflow: hidden; clear: both; margin: 0 auto; order: 2; display: flex; align-items: center; justify-content: center; }
#article-wrapper #article-content { width: 100%; order: 6; margin-bottom: 30px; line-height: 130%; }
#article-wrapper #article-related { width: 100%; order: 7; margin-bottom: 30px; }
#article-wrapper #article-footer { width: 100%; order: 8; }

.bcrumbs { padding: 10px 0 30px 0; margin: 0; list-style: none;  }
.bcrumbs li { list-style: none; float: left; margin-right: 20px; font-size: 12px; line-height: 12px; color: #bbbbbb; position: relative; }
.bcrumbs li a { color: #bbbbbb; transition: color 250ms; }
.bcrumbs li a:hover { color: #DD290F; }
.bcrumbs li:after { content: ">"; position: absolute; top: 1px; right: -13px; font-size: 11px; }
.bcrumbs li:last-child:after { display: none; }

/*#article-image .container { padding: 0; }
#article-image img { width: 100%; max-width: 100%; height: auto; }*/

.article-image { position: relative; }
.article-image img { width: 100%; max-width: 100%; object-fit: cover;  }


h1.article-title { display: block; color: var(--primary-color); line-height: 130%; font-weight: 900; text-align: center;  }
p.article-intro { color: #666; font-size: 18px; line-height: 30px; font-weight: normal; text-align: center; margin: 0px 0px 30px 0px; font-weight: 700; }
.article-intro a { color: #666; border-bottom: 2px solid #666; }

.article-content { margin-top: 30px; counter-reset: elements-list; }
.article-content p {  margin-top: 15px; margin-bottom: 15px; font-size: 16px; line-height: 30px; text-align: justify; color: #666; word-break: keep-all; }
/*.article-content p em { font-style: italic; }
.article-content p em:before, .article-content blockquote em:before { content: '`'; }
.article-content p em:after, .article-content blockquote em:after { content: '´'; }*/
.article-content a, .article-content .link { color: #000; text-decoration: none; border-bottom: 2px solid var(--secondary-color); transition: all 250ms; font-weight: 700; }
.article-content a:hover, .article-content .link:hover { color: var(--secondary-color); border-bottom: 2px solid var(--secondary-color); }
.article-content a.external { border-bottom: 1px dashed #666; font-weight: inherit !important; }
.article-content a.external:hover { color: var(--secondary-color); border-bottom: 1px dashed var(--secondary-color); }

.article-content ul { margin-bottom: 15px; padding: 0; list-style-type: none; } 
.article-content ol { margin-bottom: 15px; padding: 0; } 
.article-content ul li {  position: relative; padding-left: 16px; margin-bottom: 10px; font-size: 16px; line-height: 30px; text-align: justify; color: #666; }
.article-content ul li:before { content:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' style='fill:rgb(86,86,86);'><path d='M115.452,99.004L51.223,34.594C48.048,31.41 48.056,26.247 51.239,23.072L62.777,11.567C65.961,8.392 71.124,8.399 74.299,11.583L155.883,93.072C157.519,94.704 158.317,96.861 158.274,99.004C158.317,101.147 157.519,103.304 155.883,104.936L74.299,186.425C71.124,189.609 65.961,189.616 62.777,186.441L51.239,174.936C48.056,171.761 48.048,166.599 51.223,163.415L115.452,99.004Z' /></svg>"); position: absolute; left: 0; top: 0; }
.article-content ol li { margin-bottom: 10px; font-size: 16px; line-height: 30px; text-align: justify; color: #666; }
.article-content li a { color: #000; text-decoration: none; }
.article-content > img { max-width: 100%; height: auto; margin: 30px auto; }
.article-content h2 { color: var(--primary-color); font-weight: 900; font-size: 30px; line-height: 40px; margin: 60px 0 10px 0; }
.article-content h3 { color: var(--primary-color); font-weight: 900; font-size: 24px; line-height: 30px; margin: 30px 0 10px 0; }
.article-content .youtube { display: block; }
.article-content a.reference { color: #87AEE1; background: #fff; padding: 0px 4px; border-radius: 10px; border: 1px solid #87AEE1; margin-left: 3px; transition: all 250ms; }
.article-content q { font-style: italic; font-weight: 300; }
.article-content q:before { content: '\0000AB'; padding-right: 0.2em; }
.article-content q:after { content: '\0000BB'; padding-left: 0.2em; }
.article-content a.reference:hover { color: #fff; background: #87AEE1; }
.article-content ol.references { margin-bottom: 15px; padding: 0; list-style: none; } 
.article-content ol.references li { position: relative; padding-left: 0px; margin-bottom: 10px; font-size: 14px; line-height: 1.3; text-align: left; color: #666; }
.article-content ol.references li a { font-weight: normal; color: #333; text-decoration: underline; border: none; }
.article-content .references-title { color: #333; font-weight: 700; text-transform: uppercase; font-size: 18px; line-height: 1.5; margin-top: 45px; }

.article-content ol.references li a.citation-return { text-decoration: none; color: #666; }

.article-content figure { margin-top: 30px; margin-bottom: 30px; }
.article-content figcaption { font-style: italic; text-align: left; color: #999; font-weight: 700; }
.article-content figcaption:after { content:''; display: block; width: 100px; height: 2px; background: var(--primary-color); margin-top:10px; }
.article-content strong { color: #000; }

.counters { counter-reset: elements-list; }
.counter::before { counter-increment: elements-list; content: counter(elements-list); background: #333; color: #fff; padding: 0 7px; border-radius: 3px; margin-right: 10px; }

.steps { counter-reset: steps-list; }
.step {  }
.step::before { counter-increment: steps-list; content: counter(steps-list); background: #fff; color: #333; padding: 0 7px; border: 1px solid #333; border-radius: 30px; padding: 0 8px; margin-right: 10px; }

.article-content table {  }
.article-content table th { background: var(--secondary-color); border-bottom: 2px solid #FD7C02; color: #fff; }


@media screen and (max-width: 575px) {
	.article-image img { width: 100%; /*height: calc(100% * 0.65);*/ height: auto; }
	h1.article-title { font-size: 28px; line-height: 1.3; width: 100%; padding: 0 15px; margin: 20px 0px;  }
	p.article-intro { font-size: 16px; line-height: 1.5; margin: 20px 15px 30px 15px; }
	.article-content p { margin: 16px 16px; font-size: 16px; line-height: 1.6; text-align: left; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; }
	.article-content ul li { margin: 0 1rem 0.62rem 1rem; font-size: 1rem; line-height: 1.6; text-align: left; }
	.article-content ul li:before { width: 13px; height: 13px; padding: 1px 10px 0 0; }	
	.article-content ol li { font-size: 16px; line-height: 1.5; text-align: left; margin: 16px 16px;  }
	.article-content h2 { font-size: 1.5rem; line-height: 1.2; margin: 2.5rem 1rem 0.6rem 1rem; }
	.article-content h3 { font-size: 1.2rem; line-height: 1.2; margin: 1.5rem 1rem 0.6rem 1rem; }
	.article-content > img { margin: 1.8rem 0;}
	.article-content figcaption { font-size: 0.9rem; margin: 0.6rem 1rem 1.2rem 1rem; }
	.article-content .youtube { width: 100%; height: calc(100vw / 1.78); margin: 1.2rem auto; }
	.article-content table { border: 1px solid #ddd; border-collapse: collapse; width: 90%; border-spacing: 0; margin: 16px auto; }
	.article-content table td, .article-content table th { font-size: 16px; line-height: 1.6; padding: 8px; }
	#article-wrapper #article-path { display: none;}
}
@media screen and (min-width: 576px) and (max-width: 767px) {
	h1.article-title { font-size: 32px; line-height: 1.3; width: 100%; padding: 0 15px; margin: 20px 0px;  }
	p.article-intro { font-size: 15px; line-height: 1.5; margin: 30px var(--sm-margin) 30px var(--sm-margin); }
	.article-content p { margin: 15px; font-size: 15px; line-height: 1.5; text-align: justify; }
	.article-content ul li { margin: 0 15px 10px 15px; font-size: 15px; line-height: 1.5; text-align: justify; }
	.article-content ul li:before { width: 13px; height: 13px; padding: 1px 10px 0 0; }	
	.article-content ol li { font-size: 15px; line-height: 1.5; text-align: justify; width: var(--sm-width); margin: 0 auto 10px auto; }
	.article-content h2 { font-size: 28px; line-height: 1.3; margin: 60px var(--sm-margin) 10px var(--sm-margin); }
	.article-content h3 { font-size: 22px; line-height: 1.3; margin: 30px var(--sm-margin) 10px var(--sm-margin); }
	.article-content > img { padding: 0 var(--sm-margin); }
	.article-content figcaption { font-size: 14px; margin: 10px var(--sm-margin) 30px var(--sm-margin); }
	.article-content .youtube { width: 510px; height: 287px; margin: 30px auto; }
	.article-content table { border: 1px solid #ddd; border-collapse: collapse; border-spacing: 0; width: 100%; margin: 15px; }
	.article-content table td, .article-content table th { font-size: 15px; line-height: 1.5; padding: 8px; }
	#article-wrapper #article-path { display: none;}
}
@media screen and (min-width: 768px) and (max-width: 991px) {
	h1.article-title { font-size: 54px; letter-spacing: 2px; line-height: 1.1; width: 100%; padding: 0 30px; margin: 20px 0px; }
	p.article-intro { font-size: 20px; line-height: 1.7;  width: var(--md-width); margin: 0 auto 2rem auto; }
	.article-content p { font-size: 17px; line-height: 1.6; text-align: justify; width: var(--md-width); margin: 1rem auto; }
	.article-content ul li { font-size: 17px; line-height: 1.5; text-align: justify; width: var(--md-width); margin: 0 auto 10px auto; }
	.article-content ul li:before { width: 13px; height: 13px; padding: 1px 10px 0 0; }
	.article-content ol li { font-size: 17px; line-height: 1.5; text-align: justify; width: var(--md-width); margin: 0 auto 10px auto; }
	.article-content h2 { font-size: 2rem; line-height: 1.1; width: var(--md-width); margin: 5rem auto 1rem auto; }
	.article-content h3 { font-size: 1.5rem; line-height: 1.1; width: var(--md-width);  margin: 3rem auto 1rem auto;  }
	.article-content > img { width: 100%; height: auto; margin: 0 auto; }
	.article-content figure.image-content { width: 100%; margin: 2rem auto 2rem auto; }
	.article-content figcaption { font-size: 1rem; width: var(--md-width); margin: 0.6rem auto 2rem auto; }
	.article-content .youtube { width: 690px; height: 388px; margin: 30px auto; }
	.article-content table { border: 1px solid #ddd; border-collapse: collapse; border-spacing: 0; width: var(--md-width); margin: 15px auto; }
	.article-content table td, .article-content table th { font-size: 17px; line-height: 1.6; padding: 8px; }
	#article-wrapper #article-path { display: flex; }
	.article-image { width: 100%; height: auto; margin-bottom: 30px; }
	.article-image img { width: 100%; height: auto; }
}
@media screen and (min-width: 992px) and (max-width: 1199px) {
	h1.article-title { font-size: 64px; letter-spacing: 2px; line-height: 1.1; width: 100%; padding: 0 50px; margin: 20px 0px; }
	p.article-intro { font-size: 20px; line-height: 1.7;  width: var(--lg-width); margin: 0 auto 2rem auto; }
	.article-content p { font-size: 16px; line-height: 1.6; text-align: justify; width: var(--lg-width); margin: 0.5rem auto; }
	.article-content ul li { font-size: 16px; line-height: 1.5; text-align: justify; width: var(--lg-width); margin: 0 auto 10px auto; }
	.article-content ol li { font-size: 16px; line-height: 1.5; text-align: justify; width: var(--lg-width); margin: 0 auto 10px auto; }
	.article-content ul li:before { width: 13px; height: 13px; padding: 1px 10px 0 0; }	
	.article-content h2 { font-size: 2rem; line-height: 1.1; width: var(--lg-width); margin: 5rem auto 1rem auto; }
	.article-content h3 { font-size: 1.5rem; line-height: 1.1; width: var(--lg-width);  margin: 3rem auto 1rem auto;  }
	.article-content > img { width: calc(var(--lg-width) + 100px); height: auto; margin: 0 auto; }
	.article-content figure.image-content { width: calc(var(--lg-width) + 100px); margin: 2rem auto 2rem auto; }
	.article-content figcaption { font-size: 1rem; width: var(--lg-width); margin: 0.6rem auto 2rem auto; }
	.article-content .youtube { width: calc(var(--lg-width) + 100px); height: 506px; margin: 30px auto; }
	.article-content table { border: 1px solid #ddd; border-collapse: collapse; border-spacing: 0; width: var(--lg-width); margin: 15px auto; }
	.article-content table td, .article-content table th { font-size: 16px; line-height: 1.6; padding: 8px; }
	#article-wrapper #article-path { display: flex; }
	.article-image { width: 100%; height: 600px; margin-bottom: 30px; }
	.article-image img { width: 100%; height: 600px; }
	.article-content figure { width: calc(var(--lg-width) + 100px); margin-left: auto; margin-right: auto;  }
	.article-content figure img { width: calc(var(--lg-width) + 100px); height: auto; }	
}
@media screen and (min-width: 1200px) {
	h1.article-title { font-size: 64px; letter-spacing: 2px; line-height: 1.1; width: 100%; padding: 0px 50px; margin: 20px 0px; }
	p.article-intro { font-size: 20px; line-height: 1.7;  width: var(--xl-width); margin: 0 auto 2rem auto; }
	.article-content p { font-size: 17px; line-height: 1.7; text-align: justify; width: var(--xl-width); margin: 0.7rem auto; }
	.article-content ul li { font-size: 17px; line-height: 1.7; text-align: justify; width: var(--xl-width); margin: 0 auto 10px auto; }
	.article-content ol li { font-size: 17px; line-height: 1.7; text-align: justify; width: var(--xl-width); margin: 0 auto 10px auto; }
	.article-content ul li:before { width: 13px; height: 13px; padding: 1px 10px 0 0; }	
	.article-content h2 { font-size: 48px; line-height: 1.1; width: var(--xl-width); margin: 5rem auto 1rem auto; }
	.article-content h3 { font-size: 32px; line-height: 1.1; width: var(--xl-width);  margin: 3rem auto 1rem auto;  }
	.article-content > img { width: calc(var(--xl-width) + 100px); height: auto; margin: 0 auto; }
	.article-content .youtube { width: calc(var(--xl-width) + 100px); height: 506px; margin: 30px auto; }
	.article-content table { border: 1px solid #ddd; border-collapse: collapse; border-spacing: 0; width: var(--xl-width); margin: 15px auto; }
	.article-content table td, .article-content table th { font-size: 16px; line-height: 1.6; padding: 8px; }
	.article-content table th { text-align: left; }
	.article-content figure { width: calc(var(--xl-width) + 100px); margin-left: auto; margin-right: auto;  }
	.article-content figure img { width: calc(var(--xl-width) + 100px); height: calc((var(--xl-width) + 100px) / var(--photo-ratio)); }	
	.article-content figure.image-content { width: var(--xl-width); margin-left: auto; margin-right: auto;  }
	.article-content figure.image-content img { width: var(--xl-width); height: auto !important; margin: 0 auto; }
	.article-content figcaption { font-size: 16px; width: var(--xl-width); margin: 0.6rem auto 2rem auto; }
	#article-wrapper #article-path { display: flex; }
	.article-image { width: 1140px; height: 771px; margin: 0 auto 30px auto; padding-top: 30px; }
	.article-image img { display: block; width: 1140px; height: 741px;  margin-left: auto; margin-right: auto; }
}

.article-content table tr.block-start td { padding-bottom: 0; }
.article-content table tr.block-end td { padding-top: 0; }
.article-content table td.colspan { font-size: 90%; font-stype: italic;  color: #666; }

/*
 * TABLE OF CONTENT
 */

.table-of-content { border: 4px solid #eee; border-radius: 3px; position: relative; }
.table-of-content ul { list-style: none; margin-bottom: 5px; }
.table-of-content--title:before { content: "Sommaire de l'article"; display: block; font-size: 16px; text-transform: uppercase; color: #333; font-weight: 700; }
.table-of-content ul.primary { margin-top: 15px; }
.table-of-content ul li { font-size: 14px; margin: 0 0 5px 0; padding: 0; }
.table-of-content ul li:before { content:""; position: absolute; left: 0; top: 0; width: 10px; height: 10px; }
.table-of-content ul li ul { margin-left: 16px; }
.table-of-content a { border: none !important; font-weight: 400; color: #333 !important; transition: none; }
.table-of-content a:hover { text-decoration: underline; }

.article-toc--toggle { display: block; position: absolute; width: 30px; height: 30px; top: 10px; right: 10px; pointer-events: none; }
.article-toc--toggle span { display: block; background-color : rgba(0, 0, 0, 0); width: 30px; height: 3px; position: absolute; right: 0; top: 50%; bottom: auto; left: auto; }
.article-toc--toggle span::before,
.article-toc--toggle span::after { content: ""; width: 61%; height: 100%; transition: transform 0.3s ease-in-out; background-color : #999; position: absolute; }
.article-toc--toggle span::before { top : 0; left: 0; transform : rotate(225deg);}
.article-toc--toggle span::after { top : 0; right: 0; transform : rotate(135deg); }
.article-toc--toggle.is-clicked span { background-color: rgba(0, 0, 0, 0); transition: all .1s; }
.article-toc--toggle.is-clicked span::before { transform : rotate(135deg); }
.article-toc--toggle.is-clicked span::after { transform : rotate(225deg); }

@media screen and (max-width: 575px) {
	.table-of-content { padding: 15px; width: calc(100% - 30px); margin: 1rem auto; }
	.table-of-content ul.primary { display: none; }
	.table-of-content ul.primary.is-open { display: block; }
	.article-toc--toggle { display: block; }
}
@media screen and (min-width: 576px) and (max-width: 767px) {
	.table-of-content { padding: 15px; width: calc(100% - 30px); margin: 1rem auto; }
	.table-of-content ul.primary { display: none; }
	.table-of-content ul.primary.is-open { display: block; }
	.article-toc--toggle { display: block; }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
	.table-of-content { padding: 15px; width: calc(var(--md-width) - 30px); margin: 1rem auto; }
	.article-toc--toggle { display: none; }
}
@media screen and (min-width: 992px) and (max-width: 1199px) {
	.table-of-content { padding: 15px; width: calc(var(--lg-width) - 50px); margin: 1rem auto; }
	.article-toc--toggle { display: none; }
}
@media screen and (min-width: 1200px) {
	.table-of-content { padding: 15px; width: calc(var(--xl-width) - 50px); margin: 15px auto; }
	.article-toc--toggle { display: none; }
}






.related { list-style: none; padding: 0; margin: 30px 0; display: flex; flex-direction: row; align-items: start; justify-content: space-between;  }
.related h2 { color: #333; font-weight: 900; font-size: 30px; line-height: 40px; margin: 60px 0 10px 0; width: 100%; }
.related--item { padding: 0px 5px; }
.related--image { opacity: 1; transition: opacity 250ms;  }
.related--image:hover { opacity: 0.75; }
.related--title { color: #333; font-weight: 700; font-size: 18px; line-height: 1.3; margin: 5px 0 0 0; width: 100%; }
.related--title a { color: #333; transition: color 250ms; }
.related--title a:hover { color: #DD290F; }
.related--intro { font-size: 15px; line-height: 1.3; margin-top: 10px; }
.related--meta { display: flex; flex-direction: row; align-items: start; justify-content: space-between; margin-top: 10px; }
.related--meta-distance { color: #666; font-size: 14px; }
.related--meta-top { color: #666; text-align: right; }
.related--meta-top-label { font-size: 12px; color: #fff; background: #FFC052; padding: 2px 10px; border-radius: 15px; }

@media screen and (max-width: 575px) {
	.related--item { width: 50%; }
	.related--item:last-child { display: none; }
	.related--title { color: #333; font-weight: 700; font-size: 1rem; line-height: 1.1; margin: 0.7rem 0; width: 100%; }
	.related--intro { font-size: 0.8rem; line-height: 1.3; }
	.related--meta-distance { color: #666; font-size: 12px; }
	.related--meta-top-label { font-size: 12px; color: #fff; background: #FFC052; padding: 2px 5px; border-radius: 15px; }	
}
@media screen and (min-width: 576px) {
	.related--item { width: 33.33%; }
}





/*
 * QUOTE
 */
 
blockquote { position: relative; text-align: left; color: #999; font-weight: 900; letter-spacing: 1px; }
blockquote:before { content:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' style='fill:rgb(242,238,217);'><g><path d='M15.493,119.549L67,36L98,36L65.22,114.48C71.842,120.425 76,128.988 76,138.5C76,157.437 61.213,171 43,171C16.787,171 10,158.437 10,138.5C10,131.867 12.022,124.695 15.493,119.549Z' /><g transform='matrix(1,0,0,1,94,0)'><path d='M15.493,119.549L67,36L98,36L65.22,114.48C71.842,120.425 76,128.988 76,138.5C76,157.437 61.213,171 43,171C16.787,171 10,158.437 10,138.5C10,131.867 12.022,124.695 15.493,119.549Z' /></g></g></svg>"); position: absolute; }
/*
blockquote:before { content: ''; position: absolute; background:url('/theme/images/quote-left.png'); }
blockquote:before { content: ''; position: absolute; background:url('data:image/svg+xml;utf8,<svg viewBox="0 0 200 200"><g itransform="matrix(1.0582,0,0,1.0582,-7.40741,-7.06349)"><path d="M65.226,113.463C71.86,119.752 76,128.646 76,138.5C76,157.541 60.541,173 41.5,173C22.459,173 7,157.541 7,138.5C7,133.308 8.13,127.375 10.842,122.672C21.176,104.756 69,31 69,31L100,31L65.226,113.463Z" style="fill:rgb(235,235,235);"/><g transform="matrix(1,0,0,1,96,0)"><path d="M65.226,113.463C71.86,119.752 76,128.646 76,138.5C76,157.541 60.541,173 41.5,173C22.459,173 7,157.541 7,138.5C7,133.308 8.13,127.375 10.842,122.672C21.176,104.756 69,31 69,31L100,31L65.226,113.463Z" style="fill:rgb(235,235,235);"/></g></g></svg>'); }*/
blockquote:after { content:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' style='fill:rgb(242,238,217);'><g><g transform='matrix(-1,0,0,-1,201,203.5)'><path d='M15.493,119.549L67,36L98,36L65.22,114.48C71.842,120.425 76,128.988 76,138.5C76,157.437 61.213,171 43,171C16.787,171 10,158.437 10,138.5C10,131.867 12.022,124.695 15.493,119.549Z' /></g><g transform='matrix(-1,0,0,-1,107,203.5)'><path d='M15.493,119.549L67,36L98,36L65.22,114.48C71.842,120.425 76,128.988 76,138.5C76,157.437 61.213,171 43,171C16.787,171 10,158.437 10,138.5C10,131.867 12.022,124.695 15.493,119.549Z' /></g></g></svg>"); position: absolute; }
blockquote a { color: #999 !important; font-weight: 900 !important; letter-spacing: 1px; border-bottom: 2px solid #999 !important; }
blockquote strong { font-weight: 900 !important; color: #999 !important; }
blockquote .author { display: block; clear: both; font-weight: 500; font-size: 15px; font-style: italic; letter-spacing: 0; color: #aaa; }
blockquote .author:before { content:'\002014'; padding-right: 10px; }

@media screen and (max-width: 575px) {
	blockquote { margin: 2.5rem 3rem; font-size: 1rem; line-height: 1.5; }
	blockquote:before { left: -35px; top: -1.8rem; width: 35px; height: 35px; }
	blockquote:after { right: -35px; bottom: -1.8rem; width: 35px; height: 35px; }
	blockquote .author { font-size: 0.7rem; }
}
@media screen and (min-width: 576px) and (max-width: 767px) {
	blockquote { margin: 50px 50px; font-size: 18px; line-height: 1.5; }
	blockquote:before { left: -50px; top: -30px; width: 50px; height: 50px;  }
	blockquote:after { right: -50px; bottom: -30px; width: 50px; height: 50px; }
	blockquote .author { font-size: 14px; }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
	blockquote { width: calc(var(--md-width) - 10rem); margin: 3em auto; font-size: 1.5rem; line-height: 1.6; }
	blockquote:before { left: -60px; top: -30px; width: 60px; height: 70px; }
	blockquote:after { right: -60px; bottom: -30px; width: 60px; height: 60px; }
	blockquote .author { font-size: 15px; }
}
@media screen and (min-width: 992px) and (max-width: 1199px) {
	blockquote { margin: 60px 150px; font-size: 24px; line-height: 1.5; }
	blockquote:before { left: -70px; top: -30px; width: 70px; height: 70px; }
	blockquote:after { right: -70px; bottom: -30px; width: 70px; height: 70px; }
}
@media screen and (min-width: 1200px) {
	blockquote { margin: 60px 220px; font-size: 24px; line-height: 1.5; }
	blockquote:before { left: -70px; top: -30px; width: 70px; height: 70px; }
	blockquote:after { right: -70px; bottom: -30px; width: 70px; height: 70px; }
}



/*
figure { position: relative; }
figure figcaption { font-style: italic; text-align: center; margin: 10px 0 30px 0; color: #999; }
figure figcaption span { }
figure figcaption span:before { content: ' － '; }
@media screen and (min-width: 768px) {
	figure figcaption { font-size: 15px; }	
}
*/


.img-crop { width: 120px; height: 120px; max-width:100%; max-height:100%; overflow: hidden; margin-bottom: 10px; }
.img-thumb { width: 120px; height: 120px; max-width:100%; max-height:100%; border-radius: 60px; border: 1px solid #000; background: #eee no-repeat center; background-size: cover; }



/* TEASER */

.teaser { position: relative; margin-top: 30px; margin-bottom: 30px; overflow: hidden; background-color: #f5f5f5; padding: 10px; }
.teaser__image { display: block; position: absolute; /*border: 1px solid #666;*/ object-fit: cover; opacity: 1; transition: opacity 250ms; }
.teaser__title { font-weight: 700; color: var(--title-color); display: block; }
.teaser__title::before { content: "Pour en savoir plus"; display: block; color: var(--text-color); text-transform: uppercase; letter-spacing: 1px; font-weight: 400; }
.teaser__title a { color: var(--title-color); transition: color 250ms; border: none; }
.teaser:hover { background-color: #eee; }
.teaser:hover .teaser__title a { color: #DD290F; }
.teaser:hover .teaser__title a:hover { border: none; }
.teaser:hover .teaser__image { opacity: 0.5; }
.teaser__body { font-weight: 400; text-align: left; color: var(--text-color); margin: 0; display: inline-block; }
/*.teaser * { outline: 1px solid #f00; }*/
@media screen and (max-width: 575px) {
	.teaser {  margin: 1.5rem 0; padding: 1rem; }
	.teaser__image { width: 80px; height: 80px; border-radius: 5px; top: 10px; left: 16px; }
	.teaser__title { font-size: 1.1rem; line-height:1.1; width: calc(100% - 96px); margin: 0px 0 0 96px; height: 90px; /*outline: 1px solid #f00;*/ }
	.teaser__title::before { font-size: 0.69rem; margin-bottom: 0.2rem; }
	.teaser__body { display: block; clear: both; font-size: 0.88rem; line-height: 1.4; width: 100%; margin: 0px; /*outline: 1px solid #f00;*/ }
}
@media screen and (min-width: 576px) {
	.teaser { margin: 30px var(--sm-margin) 10px var(--sm-margin); min-height: 100px; }
	.teaser__image { width: 80px; height: 80px; border-radius: 5px; top: 10px; left: 10px; }
	.teaser__title { font-size: 18px; line-height:1.3; width: calc(100% - 90px); margin: 0 0 0 90px; height: auto; }
	.teaser__title::before { font-size: 0.69rem; }
	.teaser__body { font-size: 0.88rem; line-height: 1.4; width: calc(100% - 90px); margin: 2rem 0 0 90px; }
}
@media screen and (min-width: 768px) {
	.teaser { width: var(--md-width); margin: 2rem auto 2rem auto; min-height: 120px; }
	.teaser__image { width: 100px; height: 100px; border-radius: 5px; top: 10px; left: 15px; }
	.teaser__title { font-size: 1.4rem; line-height:1.3; width: calc(100% - 130px); margin: 0 0 0 120px; height: auto; }
	.teaser__title::before { font-size: 12px; }
	.teaser__body { font-size: 14px; line-height: 1.4; width: calc(100% - 130px); margin: 10px 0 0 120px; }
}
@media screen and (min-width: 992px)  {
	.teaser {  width: var(--lg-width); margin: 2rem auto 2rem auto; min-height: 120px; }
	.teaser__image { width: 100px; height: 100px; border-radius: 5px; top: 10px; left: 15px; }
	.teaser__title { font-size: 22px; line-height:1.3; width: calc(100% - 130px); margin: 0 0 0 120px; height: auto; }
	.teaser__title::before { font-size: 12px; }
	.teaser__body { font-size: 14px; line-height: 1.4; width: calc(100% - 130px); margin: 10px 0 0 120px; }
}
@media screen and (min-width: 1200px) {
	.teaser { width: var(--xl-width); margin: 2rem auto 2rem auto; min-height: 120px; }
	.teaser__image { width: 100px; height: 100px; border-radius: 5px; top: 10px; left: 15px; }
	.teaser__title { font-size: 22px; line-height:1.3; width: calc(100% - 130px); margin: 0 0 0 120px; height: auto; }
	.teaser__title::before { font-size: 12px; }
	.teaser__body { font-size: 14px; line-height: 1.4; width: calc(100% - 130px); margin: 10px 0 0 120px; }
}


/* DETAIL ¨*/

.detail { margin: 30px 0; background: #f5f5f5; overflow: hidden; }
.detail__main { padding: 1rem; display: inline-block; width: 50%; float: left; }
.detail__main__title { font-weight: 700; color: var(--title-color); display: inline-block; }
.detail__main__title a { color: var(--title-color); transition: color 250ms; border: none; }
.detail__main:hover .detail__main__title a { color: #DD290F; border: none; }
.detail__main__body { font-weight: 400; text-align: left; color: var(--text-color); display: inline-block; }
.detail__main__body2 { font-weight: 400; text-align: left; color: var(--text-color); display: inline-block; }
.detail__children { display: inline-block; width: 50%; float: right; }
.detail__children_child { display: inline-block; overflow: hidden; padding-bottom: 0.8rem; }
.detail__children_child:hover .detail__image { opacity: 0.5; }
.detail__child__image { display: inline-block; float: left; }
.detail__child__title { font-weight: 700; color: var(--title-color); display: inline-block; float: right; position: relative; }
.detail__child__title a { color: var(--title-color); transition: color 250ms; border: none; }
.detail__children_child:hover .detail__child__title a { color: #DD290F; border: none; }
.detail__child__body { font-weight: 400; text-align: left; color: var(--text-color); display: inline-block; float: right; }
.detail__main__image, .detail__child__image { width: 100%; height: auto; max-width: 100%; border-radius: 5px; opacity: 1; transition: opacity 250ms; }
.detail__main:hover .detail__main__image, .detail__children_child:hover .detail__child__image { opacity: 0.5; }

@media screen and (max-width: 575px) {
	.detail__main { width: 100%; position: relative; }
	.detail__main__image { display: block; position: absolute; top: 10px; left: 16px; width: 80px; height: 80px; float: left; border-radius: 5px; object-fit: cover;  }
	.detail__main__title { display: block; font-size: 1.1rem; line-height:1.1;  margin: 0 0 10px 0; width: calc(100% - 96px); margin: 0px 0 0 96px; height: 90px }
	.detail__main__title::before { content: "Pour en savoir plus"; display: block; color: var(--text-color); text-transform: uppercase; letter-spacing: 1px; font-weight: 400; font-size: 0.69rem; margin-bottom: 0.2rem; }

	.detail__main__body { display: none; }
	.detail__main__body2 { display: block; clear: both; font-size: 0.88rem; line-height: 1.4; width: 100%; margin: 0px; /*outline: 1px solid #f00;*/ }
	.detail__children { width: 100%; border-top: 1px solid #ddd; padding-top: 10px; }
	.detail__children_child { width: 100%; float: left; padding: 5px 10px; }
	.detail__child__image { width: 80px; }
	.detail__child__title { font-size: 15px; line-height:1.2;  margin: 10px 0 10px 0; /*padding-left: 12px; width: 100%;*/ width: calc(100% - 90px); }
	.detail__child__body { display: none; }
}
@media screen and (min-width: 576px) and (max-width: 767px) {
	.detail__main { width: 100%; }
	.detail__main__image { width: 25%; float: left; }
	.detail__main__title { font-size: 22px; line-height:1.3;  margin: 10px 0; width: calc(75% - 10px); float: right; }
	.detail__main__body { font-size: 14px; line-height: 1.4; margin: 10px 0; clear: both; width: 100%; float: left; }
	.detail__main__body2 { display: none; }
	.detail__children { width: 100%; border-top: 1px solid #ddd; }
	.detail__children_child { width: 50%; float: left; padding: 10px; }
	.detail__child__image { width: 100px; }
	.detail__child__title { font-size: 15px; line-height:1.2;  margin: 0 0 5px 0; width: calc(100% - 110px); padding-left: 0px; }
	.detail__child__title:before { content: ""; }
	.detail__child__body { display: none; }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
	.detail__main { width: 40%; padding: 16px; }
	.detail__main__image { width: 100%; }
	.detail__main__title { font-size: 22px; line-height:1.3;  margin: 10px 0; width: 100%; }
	.detail__main__body { font-size: 14px; line-height: 1.4; margin: 10px 0; }
	.detail__children { width: 60%; border: none; padding: 1rem; }
	.detail__children_child { width: 100%; float: left; }
	.detail__child__image { width: 140px; height: calc(140px / var(--photo-ratio)); }
	.detail__child__title { font-size: 16px; line-height:1.2;  margin: 0 0 5px 0; width: calc(100% - 150px); }
	.detail__child__body { display: inline-block; font-size: 14px; line-height: 1.4; width: calc(100% - 150px); margin: 0 0 10px 0; }
	.detail__main__body2 { display: none; }
}
@media screen and (min-width: 992px) and (max-width: 1199px) {
	.detail__main { width: 45%; padding: 16px; }
	.detail__main img { width: 405px; height: 263px; }
	.detail__main__title { font-size: 22px; line-height:1.1; margin: 7px 0; }
	.detail__main__body { font-size: 15px; line-height: 1.5; margin: 10px 0; }
	.detail__children { width: 55%; padding: 16px; }
	.detail__child__image { width: 140px; height: calc(140px / var(--photo-ratio)); }
	.detail__child__title { font-size: 18px; line-height:1.3;  margin: 0 0 7px 0; width: calc(100% - 150px); }
	.detail__child__body {font-size: 14px; line-height: 1.4; width: calc(100% - 150px); margin: 0 0 10px 0; }
	.detail__main__body2 { display: none; }
}
@media screen and (min-width: 1200px) {
	.detail__main { width: 50%; padding: 16px; }
	.detail__main img { width: 538px; height: 350px; }
	.detail__main__title { font-size: 22px; line-height:1.1;  margin:10px 0; }
	.detail__main__body { font-size: 17px; line-height: 1.7; margin: 0 0 10px 0; }
	.detail__children { width: 50%; padding: 16px; }
	.detail__children_child { display: inline-block; overflow: hidden; padding: 0 0 10px 0; }
	.detail__child__image { width: 200px; height: calc(200px / var(--photo-ratio)); }
	.detail__child__title { font-size: 18px; line-height:1.1;  margin: 0; width: calc(100% - 210px); }
	.detail__child__body {font-size: 15px; line-height: 1.4; width: calc(100% - 210px); margin: 7px 0 10px 0; }
	.detail__main__body2 { display: none; }
}


 * EBOOK
 */
 


.cta-ebook { position: relative; display: block; width: 100%; background: #F2EED9; border: 2px solid #DD290F; border-radius: 5px; }
.cta-ebook--cover { position: absolute; background: #DD290F; clip-path: polygon(0 0, 100% 0, 75% 100%, 0 100%); }
.cta-ebook--image { position: absolute; }
.cta-ebook--image img { object-fit: cover; }
.cta-ebook--content { display: inline-block; float: right; }
.cta-ebook--title { line-height: 1.1; font-weight: 700; color: #000; text-align: center; }
.cta-ebook--body { display: block; color: #333; text-align: center; }
.cta-ebook--action { background: #fff; border-radius: 3px; display: block; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: stretch; box-shadow: 0 0 30px rgba(0,0,0,0.1); border: 1px solid transparent; }
.cta-ebook--action.required { background: #fcc; border: 1px solid #DD290F; }
.cta-ebook--input { background: transparent; color: #666; font-size: 15px; line-height: 2; border: none; outline: none; width: 78%; }
.cta-ebook--action.required .cta-ebook--input::placeholder { color: #DD290F; }
.cta-ebook--btn { width: 18%; background: #DD290F; color: #fff; font-size: 20px; font-weight: 700; text-align: center; border-radius: 5px; padding: 5px; transition: all 250ms; }
.cta-ebook--btn:hover { background: #333; cursor: pointer; }
.cta-ebook--btn span { display: block; clear: both; width: 100%; text-align: center; font-size: 11px; text-transform: uppercase; font-weight: 400;  }
.cta-ebook--message { display: none; width: 100%; font-size: 14px; line-height: 1.5; font-weight: bold; color: #DD290F; text-align: center; }
.cta-ebook--message svg { display: inline-block; width: 16px; height: 16px; vertical-align: middle; fill: #DD290F; }
.cta-ebook--footer { text-align: center; color: #333; }
.cta-ebook--footer a { font-weight: 700; color: #000; text-decoration: underline; transition: all 250ms; }
.cta-ebook--footer a:hover { color: #DD290F; }
.cta-ebook--link { display: block; overflow: hidden; width: 100%; text-align: center; }
.cta-ebook--link a { font-size: 14px; font-weight: bold; text-decoration: underline; color: #333; transition: all 250ms; }
.cta-ebook--link a:hover { color: #DD290F; }
.cta-ebook--see-more { display: block; overflow: hidden; width: 100%; text-align: center; }
.cta-ebook--see-more a { display: inline-block; background: #DD290F; color: #fff; border: 2px solid #DD290F; border-radius: 3px; transition: all 250ms; }
.cta-ebook__listing:hover .cta-ebook--see-more a { background: #fff; color: #DD290F; }

.cta-ebook-attributes { display: flex; justify-content: space-between; margin: 30px 0; }
.cta-ebook-attribute { width: 33%; }
.cta-ebook-attribute-icon { display: block; width: 32px; height: 32px; margin: 0 auto; }
.cta-ebook-attribute-icon svg { fill: #666; }
.cta-ebook-attribute-label { width: 100%; text-align: center; font-weight: 700; font-size: 16px; line-height: 2; }

.cta-ebook--testimonials { display: block; margin: 30px 0 60px 0; overflow: hidden; }
.cta-ebook--testimonials-title { width: 60%; margin: 20px auto; font-size: 20px; font-weight: 700; color: #333; text-align: center; text-transform: uppercase; }
.cta-ebook--testimonial { display: inline-block; width: 50%; float: left; padding: 0 60px 30px 60px; font-size: 16px; line-height: 1.6; font-style: italic; color: #999; text-align: center; }

.cta-ebook--author { display: block; margin: 30px 0; overflow: hidden; }
.cta-ebook--author-image { width: 150px; height; 150px; margin: 0 auto;}
.cta-ebook--author-image img { border-radius: 50%; border: 3px solid #666; }
.cta-ebook--author-title { width: 60%; margin: 20px auto; font-size: 20px; font-weight: 700; color: #333; text-align: center; text-transform: uppercase; }
.cta-ebook--author-intro { width: 60%; margin: 20px auto; font-size: 20px; line-height: 1.6; font-weight: 300; color: #666; text-align: center; }
.cta-ebook--author-text { width: 80%; margin: 30px auto; font-size: 16px; line-height: 1.6; font-weight: 400; color: #666; text-align: left; columns: 2; }

@media screen and (max-width: 575px) {
	.cta-ebook { margin: 40px 0; width: 95%; margin: 0 auto; min-height: 300px; }
	.cta-ebook--cover { width: 120px; height: 100%; top: 0; left: 0; clip-path: polygon(0 0, 100% 0, 50% 100%, 0 100%); }
	.cta-ebook--image { width: 100px; height: 120px; top: 10px; left: 5px; }
	.cta-ebook--content { width: 100%); padding: 15px; outline: 1px solid #000; }
	.cta-ebook--title { font-size: 16px; margin: 0 0 15px 100px; outline: 1px solid #000; }
	.cta-ebook--body { margin: 0 0 20px 100px; font-size: 14px; line-height: 1.2; outline: 1px solid #000; }
	.cta-ebook--action {  left: 0; width: 100%; margin: 20px 10px 10px 10px; padding: 5px 5px; /* outline: 1px solid #000; */ }
	.cta-ebook--input { width: 73%; }
	.cta-ebook--btn { width: 25%; font-size: 16px; }
	.cta-ebook--footer { font-size: 13px; line-height: 1.3; margin: 10px 0; }
	.cta-ebook--see-more { margin-bottom: 20px; }
	.cta-ebook--see-more a { font-size: 18px; line-height: 1; padding: 10px 20px; }
	#full-description { display: none; }
	#small-description { display: block; }
}
@media screen and (min-width: 576px) and (max-width: 767px) {
	.cta-ebook { margin: 40px 0; width: 95%; margin: 0 auto; min-height: 300px; }
	.cta-ebook--cover { width: 150px; height: 100%; top: 0; left: 0; clip-path: polygon(0 0, 100% 0, 50% 100%, 0 100%);  }
	.cta-ebook--image { width: 130px; height: 156px; top: 15px; left: 5px; }
	.cta-ebook--content { width: calc(100% - 120px); padding: 20px; outline: 1px solid #000;}
	.cta-ebook--title { font-size: 20px; margin: 0 0 15px 0px; outline: 1px solid #000; }
	.cta-ebook--body { margin: 0 0 20px 0px; font-size: 14px; line-height: 1.5; outline: 1px solid #000; }
	.cta-ebook--action { width: 100%; margin: 20px auto 10px auto; padding: 5px 5px; /* outline: 1px solid #000; */ }
	.cta-ebook--input { width: 73%; }
	.cta-ebook--btn { width: 25%; font-size: 16px; }
	.cta-ebook--footer { font-size: 13px; line-height: 1.3; margin: 10px 0; }
	.cta-ebook--see-more { margin-bottom: 20px; }
	.cta-ebook--see-more a { font-size: 18px; line-height: 1; padding: 10px 20px; }
	#full-description { display: none; }
	#small-description { display: block; }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
	.cta-ebook { margin: 40px 0; width: 95%; margin: 0 auto; min-height: 300px; }
	.cta-ebook--cover { width: 200px; height: 100%; top: 0; left: 0; }
	.cta-ebook--image { width: 150px; height: 180px; top: 15px; left: 10px; }
	.cta-ebook--content { width: calc(100% - 170px); padding: 20px; outline: 1px solid #000;}
	.cta-ebook--title { font-size: 24px; margin: 0 0 15px 15px; outline: 1px solid #000; }
	.cta-ebook--body { margin: 0 0 20px 0px; font-size: 15px; line-height: 1.5; outline: 1px solid #000; }
	.cta-ebook--action { width: 100%; margin: 20px auto 10px auto; padding: 5px 10px;  outline: 1px solid #000; }
	.cta-ebook--footer { font-size: 14px; line-height: 1.5; margin: 10px 0; }
	.cta-ebook--see-more { margin-bottom: 20px; }
	.cta-ebook--see-more a { font-size: 18px; line-height: 1; padding: 10px 20px; }
	#full-description { display: block; }
	#small-description { display: none; }
}
@media screen and (min-width: 992px) and (max-width: 1199px) {
	.cta-ebook { margin: 40px 0; min-height: 300px; }
	.cta-ebook--cover { width: 250px; height: 100%; top: 0; left: 0; }
	.cta-ebook--image { width: 180px; height: 216px; top: 15px; left: 10px; }
	.cta-ebook--content { width: 80%; padding: 20px; outline: 1px solid #000;}
	.cta-ebook--title { font-size: 32px; margin: 0 0 20px 35px; outline: 1px solid #000; }
	.cta-ebook--body { margin: 0 0 20px 20px; font-size: 16px; line-height: 1.6; outline: 1px solid #000; }
	.cta-ebook--action { width: 90%; margin: 20px auto; padding: 5px 10px;  outline: 1px solid #000; }
	.cta-ebook--footer { font-size: 14px; line-height: 1.5; margin: 15px 0; }
	.cta-ebook--see-more { margin-bottom: 20px; }
	.cta-ebook--see-more a { font-size: 18px; line-height: 1; padding: 10px 20px; }
	#full-description { display: block; }
	#small-description { display: none; }
}
@media screen and (min-width: 1200px) {
	.cta-ebook { margin: 40px 0; min-height: 300px; }
	.cta-ebook--cover { width: 280px; height: 100%; top: 0; left: 0; }
	.cta-ebook--image { width: 200px; height: 240px; top: 15px; left: 10px; }
	.cta-ebook--content { width: 80%; padding: 20px; }
	.cta-ebook--title { font-size: 32px; margin: 0 0 20px 35px; }
	.cta-ebook--body { margin: 0 0 20px 20px; font-size: 16px; line-height: 1.6; }
	.cta-ebook--action { width: 90%; margin: 20px auto; padding: 5px 10px; }
	.cta-ebook--footer { font-size: 14px; line-height: 1.5; margin: 15px 0; }
	.cta-ebook--see-more { margin-bottom: 20px; }
	.cta-ebook--see-more a { font-size: 18px; line-height: 1; padding: 10px 20px; }
	#full-description { display: block; }
	#small-description { display: none; }
}


.ebook-download { display: flex; flex-wrap: wrap; justify-content: space-between; width: 90%; margin: 0 auto; border: 2px solid #DD290F; border-radius: 5px; }
.ebook-download--image { }
.ebook-download--title { display: block; width: 100%; color: #333; text-align: center; }
.ebook-download--subtitle { display: block; width: 100%; color: #333; font-weight: bold; text-align: center; font-style: italic; }
.ebook-download--footer { font-size: 14px; line-height: 1.5; margin: 15px 0; text-align: center; color: #333; }
.ebook-download--btn { display: block; font-weight: 700; text-align: center; background: #DD290F; border-radius: 3px; color: #fff; transition: all 250ms; }
.ebook-download--btn:hover { background: #333; }

@media screen and (max-width: 575px) {
	.ebook-download { padding: 15px; }
	.ebook-download--image { width: 100%; text-align: center; }
	.ebook-download--image img { width: 120px; height: auto; }
	.ebook-download--content { width: 100%; }
	.ebook-download--title { font-size: 18px; margin: 20px 0; }
	.ebook-download--subtitle { font-size: 24px; margin-bottom: 10px; }
	.ebook-download--btn { width: 70%; margin: 30px auto 0 auto; font-size: 20px; line-height: 2; }	
}
@media screen and (min-width: 576px) and (max-width: 767px) {
	.ebook-download { padding: 15px; }
	.ebook-download--image { width: 100%; text-align: center; }
	.ebook-download--image img { width: 120px; height: auto; }
	.ebook-download--content { width: 100%; }
	.ebook-download--title { font-size: 18px; margin: 20px 0; }
	.ebook-download--subtitle { font-size: 24px; margin-bottom: 10px; }
	.ebook-download--btn { width: 70%; margin: 30px auto 0 auto; font-size: 20px; line-height: 2; }	
}
@media screen and (min-width: 768px) and (max-width: 991px) {
	.ebook-download { max-width: 750px; padding: 20px; }
	.ebook-download--image { width: 25%; }
	.ebook-download--content { width: 75%; }
	.ebook-download--title { font-size: 18px; margin-bottom: 20px; }
	.ebook-download--subtitle { font-size: 24px; margin-bottom: 10px; }
	.ebook-download--btn { width: 70%; margin: 30px auto 0 auto; font-size: 20px; line-height: 2; }	
}
@media screen and (min-width: 992px) {
	.ebook-download { max-width: 800px; padding: 20px; }
	.ebook-download--image { width: 20%; }
	.ebook-download--content { width: 80%; }
	.ebook-download--title { font-size: 20px; margin-bottom: 30px; }
	.ebook-download--subtitle { font-size: 28px; margin-bottom: 10px; }
	.ebook-download--btn { width: 50%; margin: 30px auto 0 auto; font-size: 20px; line-height: 2; }	
}





.image-404 { display: block; margin: 40px auto; }
.text-404 { text-align: center; }
.text-404 p { font-size: 20px; font-weight: 700; line-height: 1.5; }
.btn-404 { display: inline-block; background: #333; color: #fff; margin-top: 30px; font-size: 20px; line-height: 1; padding: 10px 20px; border-radius: 3px; transition: all 250ms; }
.btn-404:hover { opacity: 0.5; cursor: pointer; }

@media screen and (max-width: 575px) {
	.image-404 { width: 300px; }
	.text-404 { margin: 20px 0 30px 0; }	
	.text-404 p { width: 90%; margin: 0 auto;}
}
@media screen and (min-width: 576px) and (max-width: 767px) {
	.image-404 { width: 350px; }
	.text-404 { margin: 20px 0 40px 0; }	
}
@media screen and (min-width: 768px) and (max-width: 991px) {
	.image-404 { width: 450px; }
	.text-404 { margin: 20px 0 60px 0; }	
}
@media screen and (min-width: 992px) and (max-width: 1199px) {
	.image-404 {  width: 500px; }
	.text-404 { margin: 20px 0 60px 0; }	
}
@media screen and (min-width: 1200px) {
	.image-404 { width: 600px; }
	.text-404 { margin: 20px 0 60px 0; }	
}






@media screen and (max-width: 575px) {
	.margin { margin: 0px var(--xs-margin); }
}
@media screen and (min-width: 576px) {
	.margin { margin: 0px var(--sm-margin); }
}
@media screen and (min-width: 768px) {
	.margin { margin: 0px var(--md-margin); }
}
@media screen and (min-width: 992px)  {
	.margin { margin: 0px var(--lg-margin); }
}
@media screen and (min-width: 1200px) {
	.margin { margin: 0px var(--xl-margin); }
}
.border { box-shadow: 0px 0px 20px #ccc; padding: 10px; margin-top: 15px; margin-bottom: 15px; }

.review { display: flex; flex-wrap: wrap; align-items: center; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: 30px 0; margin-top: 30px; margin-bottom: 30px; }
.review--label { color: #666; font-weight: 700; }
.review--sublabel { display: block; clear: both; color: #999; font-weight: 400; font-size: 14px; }
.review--choice { display: flex; justify-content: space-around; }
.review--button { text-decoration: none; background-color: #fff; border: 1px solid #ccc; color: #87AEE1; border-radius: 3px; font-size: 15px; font-weight: 700; padding: 10px 15px; transition: all 250ms; margin: 0 15px; }
.review--button:hover { background-color: #F2EED9; }
@media screen and (max-width: 767px) {
	.review { padding-top: 15px; padding-bottom: 15px; }
	.review--label { width: 100%; text-align: center; }
	.review--choice { width: 100%; }
}
@media screen and (min-width: 768px) {
	.review { padding-top: 30px; padding-bottom: 30px; }
	.review--label { width: 60%; text-align: left; }
	.review--choice { width: 40%; }
}
@media screen and (min-width: 992px)  {
}
@media screen and (min-width: 1200px) {
}




.form--entry { margin-bottom: 20px; overflow: hidden; }
.user-register--title { width: 100%; font-size: 1.5rem; line-height: 2; font-weight: 700; border-bottom: 1px solid #ccc; margin-bottom: 20px; }
.form--label { font-size: 0.8rem; line-height: 1rem; font-weight: 700; text-transform: uppercase; width: 100%; color: #333; }
.form--input { width: 100%; font-size: 1rem; line-height: 1rem; border: 1px solid #ccc; border-radius: 5px; padding: 0.5rem; color: var(--text-color); }
.form--input:focus { outline: none; border: 1px solid #333; }
.form--input:disabled { background: #eee; border: 1px solid #eee; }
.form--input.required { border: 1px solid #f00 !important; background: #fcc !important; }
.form--input-description { width: 100%; font-size: 13px; line-height: 1.2; color: #999; margin-top: 10px; }
.form--btn-submit { display: block; width: 100%; height: 45px; border: none; color: #fff; font-size: 20px; line-height: 45px; text-align: center; background: #333; border-radius: 5px; margin-top: 20px; transition: all 250ms; }
.form--btn-submit:hover { cursor: pointer; background: #DD290F; }
.form--link { display: block; width: 100%; text-align: center; margin: 20px 0; font-size: 1rem; color: #333; }
.form--link a { font-weight: 700; text-decoration: underline; color: #333; }
.form--small-link { display: block; width: 100%; text-align: center; margin: 10px 0; font-size: 0.8rem; color: #666; }
.form--small-link a { color: #666; }
.form--small-link a:hover { text-decoration: underline; }
.form--input-message { display: none; margin: 10px 0; font-size: 14px; line-height: 14px; font-weight: 700; }
.form--input-message svg { display: inline-block; width: 16px; height: 16px; vertical-align: middle; }
.form--input__error { color: #DD290F; fill: #DD290F; }
.form--input__success { color: #209E7C; fill: #209E7C; }
.form--input__info { color: #65BBD6; fill: #65BBD6; }
.form--input-alert { display: none; padding: 10px; border-radius: 3px; font-size: 14px; line-height: 1.2; text-align: center; color: #DD290F; background-color: #f2dede; border: 1px solid #ebccd1; }
.form--input-alert a { color: #843534; font-weight: 700; text-decoration: underline; }
.form--profile-preview { width: 120px; height: 120px; border-radius: 60px; border: 3px solid #999; }

.form--textarea { width: 100%; min-height: 100px; font-size: 1rem; line-height: 1rem; border: 1px solid #ccc; border-radius: 5px; padding: 0.5rem; color: var(--text-color); }
.form--textarea:focus { outline: none; border: 1px solid #333; }
.form--textarea:disabled { background: #eee; border: 1px solid #eee; }
.form--textarea.required { border: 1px solid #f00 !important; background: #fcc !important; }





.overlay { display: none; background-color: rgba(0, 0, 0, 0.8); width: 100%; height: 100%; position: absolute; top: 0; justify-content: center; align-items: center; z-index: 999; }
.modal-content { width: 500px; height: 530px; background-color: #fff; text-align: center; padding: 40px; position: relative; border-radius: 4px; }
.modal-content--title { font-size: 24px; color: #333; text-align: center; margin-bottom: 20px; font-weight: 900; }
.modal-content--avatar { width: 64px; height: 64px; display: block; margin: 0px auto; }
.modal-content--subtitle { font-size: 16px; color: #666; text-align: center; margin-bottom: 10px; }
.modal-content--close { position: absolute; top: 10px; right: 10px; font-size: 42px; color: #333; transform: rotate(45deg); cursor: pointer; }
.modal-content--close:hover { color: #999; }
.modal-content--text { font-size: 15px; line-height: 1.3; color: #666; text-align: center; margin-top: 20px; margin-bottom: 10px; }
.modal-content--error { display: none; color: #fff; font-size: 14px; font-weight: 700; background-color: #DD290F; padding: 5px; margin-bottom: 10px; text-align: center; }

.button { display: inline-block; border: none !important; outline: none; border-radius: 30px; font-size: 14px; font-weight: 600; text-transform: uppercase; padding: 10px 20px; transition: all 0.3s ease; }
.button-primary-action { color: #fff !important; background: #DD290F; }
.button-primary-action:hover { color: #fff !important; background: #E19990; cursor: pointer; }
.button-secondary-action { color: #fff; background: #999; }
.button-secondary-action:hover { color: #fff; background: #E19990; cursor: pointer; }
.link-recover { font-size: 14px; line-height: 1.3; margin-top: 15px; color: #666; transition: all 0.3s ease; }
.link-recover:hover { color: #E19990; }


.chart { width: 100%; height: 600px; }


.city-navigation { display: flex; flex-direction: row; align-items: center; justify-content: space-between; }
.city-navigation-cell { }
.city-navigation-image { width: 100%; background-size: cover; background-position: center; border-radius: 10px; opacity: 1; transition: opacity 250ms; cursor: pointer; }
.city-navigation-image:hover { opacity: 0.6; }

.city-navigation-title { display: block; text-align: center; text-transform: uppercase; font-size: 14px; font-weight: 700; margin: 5px 0; }
.city-navigation-title a { color: #000; transition: all 0.3s ease; border: none; }
.city-navigation-title a:hover { color: #E19990; }

@media screen and (max-width: 575px) {
	.city-navigation-cell { width: 220px; }
	.city-navigation-image { width: 220px; height: 120px; }
}
@media screen and (min-width: 992px) {
	.city-navigation-cell { width: 220px; }
	.city-navigation-image { height: 120px; }
}
@media screen and (min-width: 1200px) {
	.city-navigation-cell { width: 250px; }
	.city-navigation-image { height: 150px; }
}








/*
 * ELEMENTS UI
 */

.formfield-select { position: relative; }
.formfield-select--container { position: relative; background-color: #fff; border: 1px solid #ccc; margin: 0 0 1.5em 0; overflow: hidden; }
.formfield-select--container select { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 110%; height: auto; border: 0; margin: 0; padding: .75em; border-radius: 0; overflow: hidden; text-overflow: ellipsis; }
.formfield-select--container::after { content: ''; position: absolute; top: 50%; margin-top: -3px; right: .75em; display: block; width: 0; height: 0; border-color: transparent; border-top-color: #444; border-width: 6px; border-style: solid; pointer-events: none; }

.number-selector { display:block; width: 100%; border: none; border-radius: 3px; background: #fff; overflow: hidden;}
.number-selector .button { width: 33%; height: 45px; display: inline-block; float: left; /*background: #f5f5f5;*/ text-align: center; }
.number-selector .count { width: 33%; height: 45px; display: inline-block; float: left; text-align: center; }
.number-selector .count input { width: 100%; background: #fff; border: none; font-size: 18px; line-height: 45px; height: 45px; color: #333; text-align: center; }
.number-selector .button .minus { line-height: 45px; }
.number-selector .button .plus { line-height: 45px; }
.number-selector .button.button-enable { color: #555; }
.number-selector .button.button-disable { color: #ccc; }
.number-selector .button .minus:before { content: "\f068"; line-height: 45px; font-family: "FontAwesome"; }
.number-selector .button .plus:before { content: "\f067"; line-height: 45px; font-family: "FontAwesome"; }





/*
 * FOOTER
 */


.footer { margin-top: auto; padding: 0; overflow: hidden; }
.footer--clouds { display: block; fill: #F2EED9; stroke: #F2EED9; background: #fff; width: 100%; height:100px; margin: 0; overflow: hidden; }
.footer--keepintouch { background-color: #F2EED9; margin: 0; overflow: hidden; }

/* CARD */

.card { border: none; background: 0; padding: 30px 0; display: flex; flex-direction: column; flex-wrap: wrap; text-align: center; }
.card__sidebar { /*outline: 1px solid #000;*/ }
.card__main { /*outline: 1px solid #000;*/ }
.card__profile_image { width: 150px; height: 150px; border-radius: 50%; border: 5px solid #fff; }
.card__social_list { display: flex; list-style: none; margin: 10px auto 0 auto; ; padding: 0; justify-content: space-around; width: 150px; }
.card__social_item { }
.card__social_link { color: #87AEE1; font-size: 20px; opacity: 0.7; }
.card__social_link:hover { color: #87AEE1; opacity: 1; }
.card__main { text-align: center; }
.card__main_name { font-weight: 700; color: var(--title-color); font-size: 22px; letter-spacing: 1px; margin: 20px 0 10px 0; }
.card__main_name::after { content: ''; display: block; height: 1px; width: 50px; background: #87AEE1; opacity: 0.5; margin: 15px auto; }
.card__main_position { text-transform: uppercase; letter-spacing: 2px; color: #87AEE1; font-size: 13px; font-weight: 400; margin-bottom: 10px; }
.card__main_body { color: var(--text-color); font-weight: 300; font-size: 14px; line-height: 1.3; opacity: 0.8; }

@media screen and (max-width: 575px) {
	.card__main_name { text-align: center; }
}
@media screen and (min-width: 576px) {
	.card { flex-direction: row;  }
	.card__sidebar { width: 100%; }
	.card__main { width: 100%; }
	.card__profile_image { width: 100px; height: 100px; border-radius: 50%; }
	.card__social_list { width: 100px; }
	.card__main { text-align: left; padding-left: 30px; }
	.card__main_name::after { margin-left: 0; }
}
@media screen and (min-width: 768px) {
	.card { width: 700px; margin: 30px auto; }
	.card__sidebar { width: 30%; }
	.card__main { width: 70%; }
	.card__profile_image { width: 150px; height: 150px; border-radius: 50%; }
	.card__social_link { font-size: 24px; }
	.card__social_list { width: 150px; }
	.card__main_name { font-size: 24px; margin: 20px 0 20px 0;}
	.card__main_name::after { margin: 20px 0 20px 0; }
	.card__main_position { margin-bottom: 15px; }
	.card__main_body { font-size: 16px; line-height: 1.3; }
}
@media screen and (min-width: 992px)  {
	.card__sidebar { width: 30%; }
	.card__main { width: 70%; }
}
@media screen and (min-width: 1200px) {
	.card__sidebar { width: 30%; }
	.card__main { width: 70%; }
}

.article__footer__divider { position: relative; margin: 40px auto 0 auto; height: 1px; width: 50%; }
.article__footer__divider::before { content: ""; position: absolute; top: 0; left: 5%; right: 5%; width: 90%; height: 1px; background-image: linear-gradient(to right, transparent, #ccc, transparent); }
.article__footer__divider::after { content: ""; position: absolute; z-index: 1; top: -9px; left: calc(50% - 9px); width: 18px; height: 18px; background-color: #E19990;
border: 1px solid #ccc; border-radius: 50%; box-shadow: inset 0 0 0 2px #F2EED9, 0 0 0 4px #F2EED9; }






.footer--bottom { background: #000; padding-bottom: 30px; }

.footer--intro { margin: 0 auto; padding-top: 20px; padding-bottom: 20px; /*border-bottom: 1px solid #FD7C02;*/ }
.footer--logo { display: block; margin: 0 auto; text-align: left; }
.footer--brand { font-size: 32px; line-height: 60px; padding: 0 0 0 10px; color: #fff; font-weight: 900; }
.footer--text { width: 100%; margin-top: 10px; margin-bottom: 10px; font-size: 13px; color: #fff; text-align: left; }
.footer--text a, .footer--text span.atc { color: #fff; text-decoration: underline; font-style: italic; opacity: 0.8; margin-right: 5px; }


.footer--groups { display: flex; align-items: start; justify-content: space-between; flex-wrap: wrap; }
.footer--group { padding: 40px 0; /*outline: 1px solid #f00;*/ }
.footer--group-title { display: block; font-size: 14px; color: #fff; text-transform: uppercase; font-weight: 600; margin-top: 20px; margin-bottom: 20px; }
.footer--group ul { margin: 0; padding: 0; list-style: none; }
.footer--group ul li { display: block; width: 100%; padding: 0; font-size: 14px; line-height: 1.5; }
.footer--group ul li a { color: #fff; }
.footer--group ul li a:hover { text-decoration: underline; }
.footer--copyright { width: 100%; text-align: center; color: #999; font-size: 14px; line-height: 1.5; padding-top: 20px; padding-bottom: 20px; }

.footer--group__zodiac ul { column-count: 2;  }
.footer--group__zodiac ul li { width: 50% !important; }

@media screen and (max-width: 575px) {
	.footer--group { width: 50%; }
}
@media screen and (min-width: 576px) {
	.footer--group { width: 25%; }
}


.message--icone { display: block; width: 200px; height: 200px; margin: 30px auto; }
.message--icone__error { fill: #9E2020; }
.message--icone__ok { fill: #209E7C; }
.message--image { display: block; width: 400px; height: auto; margin: 30px auto; }
.message--title { font-weight: 700; color: #333; font-size: 20px; text-align: center; margin: 30px auto; width: 95%; max-width: 600px; }
.message--content { color: #333; font-size: 15px; text-align: center; margin: 30px auto; width: 95%; max-width: 600px; }
.message--action { display: block; width: 100%; margin: 30px auto; text-align: center; }
.message--button { display: inline-block; font-size: 20px; line-height: 45px; color: #fff; font-weight: 700; padding: 0px 30px; background: #333; border-radius: 5px; transition: all 250ms; }
.message--button:hover { background: #DD290F; }
@media screen and (max-width: 767px) {
	.message--image { width: 250px; height: auto; }
}

#china-map text { font-size: 28px; font-weight: 700; fill: #DD290F; transition: fill 250ms; }
#china-map text:hover { fill: #E19990; cursor: pointer; }
#china-map circle { fill: #666; transition: fill 250ms; }
#china-map circle:hover { fill: #E19990; cursor: pointer; }




#cookies { color: #fff; background-color: #000; display: block; position: fixed; min-width: 100%; height: auto; z-index: 100000; padding: 10px; bottom: 0; left: 0; }
#cookies p { color: #fff; font-size: 13px; line-height: 25px; text-align: center; }
#cookies p a { color: #fff; text-decoration: underline; }
#cookies p button { color: #fff; background-color: #cc2127; border-radius: 3px; padding: 4px 10px; margin: 0 7px; text-decoration: none; text-shadow: 0 -1px 0 rgba(0,0,0,.25); cursor: pointer; border: none; }

.check-media { width: 100%; height: 2px; background-color: #000; margin-top: 10px; margin-bottom: 10px; }
@media screen and (max-width: 575px) {
.check-media { background-color: #ff0; }
}
@media screen and (min-width: 576px) {
.check-media { background-color: #f0f; }
}
@media screen and (min-width: 768px) {
.check-media { background-color: #00f; }
}
@media screen and (min-width: 992px)  {
.check-media { background-color: #0f0; }
}
@media screen and (min-width: 1200px) {
.check-media { background-color: #f00; }
}


/*
 * CONTACT
 */
 
.contact { display: flex; justify-content: space-between; padding: 60px 0; width: 100%; margin-right: auto; margin-left: auto; }
.contact--content { width: 65%; display: flex; align-items: center; justify-content: center; }
.contact--form { display: block; width: 90%; border-radius: 16px; padding: 30px; box-shadow: 0 0 32px 0 rgba(0,0,0,0.1), 0 32px 64px -48px rgba(0,0,0,0.5); }
.contact--side { width: 35%; display: flex; align-items: center; justify-content: center; }
/*.user-register__color { background: #F2EED9; }
.user-register--title { font-weight: 900; color: #333; font-size: 20px; line-height: 1.3; margin-bottom: 30px; }
.user-register--intro { font-size: 16px; color: #333; line-height: 1.5; font-weight: 700; margin-bottom: 20px; }
.user-register--text { font-size: 14px; color: #666; line-height: 1.5; }*/
@media screen and (max-width: 575px) {
	.contact { max-width: 95%; padding: 30px 0 60px 0; }
	.contact--content { width: 100%; }
	.contact--side { display: none; }
}
@media (min-width: 992px) and (max-width: 1199px) {
	.contact { max-width: 970px;  }
}
@media (min-width: 1200px) {
	.contact { max-width: 1140px; }
	.contact--image { display: block; width: 350px; height: auto; }
}



.articles-sitemap { display: flex; flex-flow: row wrap; width: 100%; }
a.articles-sitemap--title { width: 100%; font-size: 32px; font-weight: 900; margin: 45px 0 15px 0; color: #333 !important; border: none !important; }
.articles-sitemap--text { width: 100%; font-size: 14px; text-align: left; }
.articles-sitemap--children { }
.articles-sitemap--item-box { width: 33.33%; padding: 5px; }
.articles-sitemap--item-box img { transition: opacity 250ms; }
.articles-sitemap--item-box img:hover { opacity: 0.7; }
.articles-sitemap--item-title { width: 100%; font-size: 16px; font-weight: 700; }
.articles-sitemap--item-title a { color: #333; }

.articles-sitemap--item-text { font-size: 13px; color: #666; font-style: italic; line-height: 1.2; }
.articles-sitemap--item-list { list-style: none; margin: 0; padding: 0; }
.articles-sitemap--item-list li { font-size: 14px; line-height: 1; margin: 8px 0; }
.articles-sitemap--item-list a { color: #333; text-decoration: none; }
.articles-sitemap--item-list a:hover { text-decoration: underline; }

@media screen and (max-width: 575px) {
	.articles-sitemap--title { font-size: 1.5rem; line-height: 1.2; margin: 2rem 0 0.4rem 0; }
	.articles-sitemap--text { font-size: 1rem; margin-bottom: 1rem; }
	.articles-sitemap--item-box { width: 100%; padding: 0; margin-bottom: 2rem; }
	.articles-sitemap--item-title { width: 100%; font-size: 1rem; margin-bottom: 0.4rem; }
	.articles-sitemap--item-text { font-size: 0.9rem; line-height: 1.2; margin-bottom: 0.4rem; }
	.articles-sitemap--item-list li { font-size: 0.9rem; line-height: 1; margin: 0.5rem 0; }
}

ins { text-decoration: none; text-decoration-line: none; outline: 1px solid #e5e5e5; margin: 20px auto; }

.ad { position: relative; }
.ad--title { font-size: 18px; color: #333; font-weight: 700; line-height: 1; padding: 7px 15px 7px 15px; }
.ad--tagline { font-size: 14px; color: #333; font-weight: 400; line-height: 1; padding: 7px 55px 7px 15px; }

ins.top, .ad.ad__top { display: block; width: 300px; height: 270px;  }
.ad__top .ad--image { display: block; width: 300px; height: 160px; }
.ad__top .ad--title { display: block; background: #f3f3f3;  }
.ad__top .ad--tagline { line-height: 1.3; }


.ad.ad__feed { display: block; width: var(--xl-width); height: 90px; margin: 15px auto; outline: 1px solid #e5e5e5; overflow: hidden; }
.ad__feed .ad--image { display: inline-block; width: 200px; height: 106px; float: left; object-fit: cover; max-width: 100%; }
.ad__feed .ad--content { display: inline-block; width: calc(100% - 200px); float: right; }
.ad__feed .ad--title { display: block; background: #f3f3f3; font-size: 22px; padding: 10px 15px;  }
.ad__feed .ad--tagline { font-size: 18px; padding: 10px 55px 10px 15px; }

@media screen and (max-width: 575px) {
	.ad.ad__feed { width: 300px; height: 270px; margin: 15px auto; }
	.ad__feed .ad--image { width: 300px; height: 160px; }
	.ad__feed .ad--content { display: block; width: 100%; overflow: hidden; }
	.ad__feed .ad--title { display: block; width: 100%; font-size: 18px; padding: 7px 15px;  }
	.ad__feed .ad--tagline { display: block; width: 100%; font-size: 14px; line-height: 1.3; padding: 7px 55px 0px 15px; }
}
@media screen and (min-width: 576px) and (max-width: 767px) {
	.ad.ad__feed { width: calc(100% - 30px); height: 100px; }
	.ad__feed .ad--image { width: 150px; height: 100px; }
	.ad__feed .ad--content { width: calc(100% - 150px); float: right; }
	.ad__feed .ad--title { font-size: 20px; padding: 7px 15px; }
	.ad__feed .ad--tagline { font-size: 15px; padding: 7px 55px 0px 15px; }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
	.ad.ad__feed { width: 700px; height: 120px; }
	.ad__feed .ad--image { width: 200px; height: 120px; }
	.ad__feed .ad--content { width: calc(100% - 200px); float: right; }
	.ad__feed .ad--tagline { font-size: 17px; padding: 7px 55px 0px 15px; }
}
@media screen and (min-width: 992px)  {
	.ad.ad__feed { width: 800px; height: 133px; }
	.ad__feed .ad--image { width: 250px; height: 133px; }
	.ad__feed .ad--content { width: calc(100% - 250px); float: right; }
}

.ad .ad--btn { display: block; width: 38px; height: 38px; background: #fff; border-radius: 50%; position: absolute; right: 10px; bottom: 10px; box-shadow: 0 0 2px 0 rgba(0,0,0,0.12),0 2px 2px 0 rgba(0,0,0,0.24); background: #DD290F; }
.ad .ad--btn:before { content:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' style='fill:rgb(255,255,255);'><path d='M115.452,99.004L51.223,34.594C48.048,31.41 48.056,26.247 51.239,23.072L62.777,11.567C65.961,8.392 71.124,8.399 74.299,11.583L155.883,93.072C157.519,94.704 158.317,96.861 158.274,99.004C158.317,101.147 157.519,103.304 155.883,104.936L74.299,186.425C71.124,189.609 65.961,189.616 62.777,186.441L51.239,174.936C48.056,171.761 48.048,166.599 51.223,163.415L115.452,99.004Z' /></svg>"); display: block; width: 24px; height: 24px; position: absolute; left: 8px; top: 8px; }


.zodiac-footer { display: flex; width: 100%; background: #CA0F02; justify-content: space-between; padding: 30px; overflow: hidden; margin: 60px 0; }
.zodiac-footer--the-animal { position: relative; border-right: 1px solid #FD7C02; }
.zodiac-footer--the-animal-text { font-weight: 700; color: #fff; line-height: 1; }
.zodiac-footer--the-animal img { display: block; height: auto; position: absolute; transition: all 250ms; }
.zodiac-footer--the-animal img:hover { opacity: 0.5; }
.zodiac-footer--animals { }
.zodiac-footer--animals-text { line-height: 1; font-weight: 400; color: #fff; margin-bottom: 20px; }
.zodiac-footer--animals-text a { font-weight: 700; color: #fff; }
.zodiac-footer--animals-group { display: flex; justify-content: space-between; flex-wrap: wrap; }
.zodiac-footer--animals-item { width: 100px; height: 100px; padding: 5px; margin-bottom: 10px; }
.zodiac-footer--animals-item:hover { outline: 1px solid #FD7C02; } 
.zodiac-footer--animals-item img { display: block; height: 90px; width: auto; margin: 0 auto; transition: all 250ms; }
.zodiac-footer--animals-item img:hover { opacity: 0.5; }

@media screen and (max-width: 575px) {
	.zodiac-footer { flex-direction: column; }
	.zodiac-footer--the-animal { width: 100%; height: 280px; border-bottom: 1px solid #FD7C02; border-right: none; overflow: hidden; }
	.zodiac-footer--the-animal-text { font-size: 24px; }
	.zodiac-footer--the-animal img { width: calc(100% - 80px); top: 60px; left: 20px; }
	.zodiac-footer--animals { width: 100%; }
	.zodiac-footer--animals-text { font-size: 16px;	margin-top: 20px; }
	.zodiac-footer--animals-item { width: calc(100% / 4); height: 70px; }
	.zodiac-footer--animals-item img { height: 60px; width: auto; }	
}
@media screen and (min-width: 576px) {
	.zodiac-footer--the-animal { width: calc(100% - 220px);/*outline: 1px solid #000;*/ }
	.zodiac-footer--the-animal-text { font-size: 24px; }
	.zodiac-footer--the-animal img { width: calc(100% - 80px); top: 120px; left: 20px; }
	.zodiac-footer--animals { width: 200px; /*outline: 1px solid #000;*/ }
	.zodiac-footer--animals-text { font-size: 16px;	}
	.zodiac-footer--animals-item { width: 60px; height: 60px; }
	.zodiac-footer--animals-item img { height: 50px; width: auto; }	
}
@media screen and (min-width: 768px) {
	.zodiac-footer--the-animal { width: calc(100% - 280px);/*outline: 1px solid #000;*/ }
	.zodiac-footer--the-animal-text { font-size: 36px; }
	.zodiac-footer--the-animal img { width: calc(100% - 80px); top: 120px; left: 20px; }
	.zodiac-footer--animals { width: 250px; /*outline: 1px solid #000;*/ }
	.zodiac-footer--animals-text { font-size: 18px;	}
	.zodiac-footer--animals-item { width: 70px; height: 70px; }
	.zodiac-footer--animals-item img { height: 60px; width: auto; }	
}
@media screen and (min-width: 992px)  {
	.zodiac-footer--the-animal { width: 580px; }
	.zodiac-footer--the-animal-text { font-size: 48px; }
	.zodiac-footer--the-animal img { width: 530px; top: 120px; left: 20px; }
	.zodiac-footer--animals { width: 310px; }
	.zodiac-footer--animals-text { font-size: 24px;	}
	.zodiac-footer--animals-item { width: 100px; height: 100px; }
	.zodiac-footer--animals-item img { height: 90px; width: auto; }	
}
@media screen and (min-width: 1200px) {
	.zodiac-footer--the-animal { width: 750px; }
	.zodiac-footer--the-animal-text { font-size: 64px; }
	.zodiac-footer--the-animal img { width: 700px; top: 180px; left: 20px; }
	.zodiac-footer--animals { width: 310px; }
	.zodiac-footer--animals-text { font-size: 24px;	}
	.zodiac-footer--animals-item { width: 100px; height: 100px; }
	.zodiac-footer--animals-item img { height: 90px; width: auto; }	
}





.astrology-compute { display: block; width: 100%; background: var(--secondary-color); margin: 24px auto; padding: 30px 20px; }
.astrology-compute--form { display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; }
.astrology-compute--intro { width: 100%; }
.astrology-compute--title { text-align: center; font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 15px; }
.astrology-compute--subtitle { text-align: center; font-size: 16px; line-height: 1.6; color: #fff; margin-bottom: 30px; }
.astrology-compute--label { width: 30%; font-size: 15px; color: #fff; text-align: center; font-weight: 700; }

.astrology-compute--select { position: relative; display: block; width: 30%; margin-right: 10px; }
.astrology-compute--select-container { position: relative; width: 100%;  border: none; margin: 0; overflow: hidden; }
.astrology-compute--select-container select { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; height: auto; border: 1px solid #eee; border-radius: 3px; margin: 0; /*padding: 5px 7px;*/ padding: 0 10px; font-size: 15px; line-height: 30px; overflow: hidden; text-overflow: ellipsis; color: #666; background: #fff; }
.astrology-compute--select-container::after { content: ''; position: absolute; top: 50%; margin-top: -3px; right: .75em; display: block; width: 0; height: 0; border-color: transparent; border-top-color: #444; border-width: 6px; border-style: solid; pointer-events: none; }
.astrology-compute--select-container select.required { border: 1px solid #f00 !important; background: #fcc !important; }
.astrology-compute--select-container select:focus { outline: none; border: 1px solid #336799; }

.astrology-compute--action { width: 100%; text-align: center; padding: 20px 0; }
.astrology-compute--btn { display: inline-block; font-size: 18px; line-height: 1.3; text-transform: uppercase; letter-spacing: 1px; padding: 10px 15px; color: var(--secondary-color); font-weight: 700; background: #fff; border-radius: 5px; transition: opacity 300ms; }
.astrology-compute--btn:hover { opacity: 0.7; cursor: pointer; }
.astrology-compute--result { width: 100%; padding: 15px 0; text-align: center; }

.astrology-result-name { width: 100%; text-align: center; font-size: 20px; color: #fff; font-weight: 400; margin-bottom: 20px; }
.astrology-result-name span { display: block; clear: both; width: 100%; color: #fff; font-size: 32px; font-weight: 900; line-height: 2; text-align: center; }
.astrology-result-url { display: inline-block; background: #fff; padding: 10px 20px; border-radius: 5px; color: var(--secondary-color) !important; font-size: 20px; }

.astrology-grid { display: flex; justify-content: space-between; flex-wrap: wrap; margin: 30px auto; }

.astrology-grid--item { width: 48%; position: relative; border: 1px solid #ccc; border-radius: 8px; padding: 20px; margin-bottom: 20px; }
.astrology-grid--image { position: absolute; top: -15px; right: -15px; display: flex; align-items: center; justify-content: center; width: 100px; height: 100px; border-radius: 50%; border: 1px solid var(--secondary-color); background: #fff; }
.astrology-grid--image img { height: 50px; width: auto; }
.astrology-grid--content { }
.astrology-grid--title { font-size: 18px !important; margin: 0 0 20px 0 !important; width: 100% !important; }
.astrology-grid--years { color: #999; font-style: italic; font-size: 14px; margin-bottom: 10px; padding-right: 60px; }
.astrology-grid--years:before { content: 'Années :'; }
.astrology-grid--chinese { color: #999; font-style: italic; font-size: 14px; margin-bottom: 10px;  }
.astrology-grid--chinese:before { content: 'Chinois :'; }
.astrology-grid--item p { width: 100% !important;; margin: 10px 0 !important; font-size: 95% !important; line-height: 1.5 !important; }
.astrology-grid--text { }
.astrology-grid--btn { width: 100%; padding: 15px; text-align: center; }
.astrology-grid--btn a { color: #fff; background: var(--secondary-color); padding: 10px 20px; border-radius: 3px; border: 2px solid var(--secondary-color); position: relative; padding-left: 20px; }
.astrology-grid--btn a:hover { background: #fff; }



.astrology-list { }
.astrology-list--item { display: flex; justify-content: space-between; flex-wrap: wrap; margin: 30px auto; padding: 0px 0; overflow: hidden; }
.astrology-list--image { width: 300px; }
.astrology-list--image img { display: block; height: 100px; width: auto; margin: 0 auto; }
.astrology-list--text { width: calc(100% - 330px); }
.astrology-list--item > h3 { text-align: center; font-size: 20px; }
.astrology-list--item > p { text-align: center; }
.astrology-list--link { display: block; overflow: hidden; width: 300px; height: 40px; margin: 0 auto; line-height: 40px; text-align: center; color: #fff !important; font-weight: 700; background: #DD290F; border-radius: 3px; transition: opacity 300ms; }
.astrology-list--link:hover { opacity: 0.7; }


@media screen and (max-width: 575px) {
	.astrology-table { width: 100%; margin: 1rem auto; }
	.astrology-grid { width: 100%; margin: 1rem auto; }
	.astrology-grid--item { width: calc(100% - 40px); margin-left: auto; margin-right: auto; }
	.astrology-table--item { width: 24%; margin-bottom: 10px; height: 130px; }
}
@media screen and (min-width: 576px) and (max-width: 767px) {
	.astrology-table { width: var(--sm-width); margin: 1rem auto; }
	.astrology-grid { width: var(--sm-width); margin: 1rem auto; }
	.astrology-table--item { width: 24%; margin-bottom: 10px; height: 130px; }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
	.astrology-table { width: var(--md-width); margin: 1rem auto; }
	.astrology-grid { width: var(--md-width); margin: 1rem auto; }
	.astrology-table--item { width: 15%; margin-bottom: 10px; height: 130px; }
}
@media screen and (min-width: 992px) and (max-width: 1199px) {
	.astrology-table { width: var(--lg-width); margin: 1rem auto; }
	.astrology-grid { width: var(--lg-width); margin: 1rem auto; }
	.astrology-table--item { width: 15%; margin-bottom: 10px; height: 130px; }
	.astrology-compute { width: var(--lg-width); }
}
@media screen and (min-width: 1200px) {
	.astrology-table { width: var(--xl-width); margin: 1rem auto; }
	.astrology-grid { width: var(--xl-width); margin: 1rem auto; }
	.astrology-table--item { width: 15%; margin-bottom: 10px; height: 130px; }
	.astrology-compute { width: var(--xl-width); }
}





.dropdown--elements { display: block; width: var(--xl-width); margin: 30px auto; border-bottom: 1px solid #ccc; }
.dropdown--tab { width: 100%; position: relative; border-top: 1px solid #ccc; padding: 15px 0; }
.dropdown--tab input { position: absolute; opacity: 0; z-index: -1; }

.dropdown--heading { width: 100%; display: flex; justify-content: space-between; pointer-events: none; }
.dropdown--label { display: flex; justify-content: space-between; width: 100%; }
.dropdown--label::after { content: "\276F"; width: 16px; height: 16px; text-align: center; transform: rotate(90deg); transition: all 250ms; }
.dropdown--tab input:checked + .dropdown--label::after { transform: rotate(270deg); }

.dropdown--icon { display: block; width: 48px; height: 48px; background: var(--secondary-color); border-radius: 50%; overflow: hidden; }
.dropdown--icon img { display: block; width: 32px; height: 32px; margin: 8px; }
.dropdown--text { width: calc(100% - 48px); padding-left: 16px; }
.dropdown--title { width: 100%; font-size: 17px; font-weight: 700; color: #333; }
.dropdown--subtitle { width: 100%; font-size: 15px; font-style: italic; color: #666; }
.dropdown--caret { display: block; width: 48px; height: 48px; background: #ddd; border-radius: 50%; overflow: hidden; position relative; }
.dropdown--caret input { display: block; width: 48px; height: 48px; position relative; }
.dropdown--caret input:before { content: ""; display: block; position: absolute; width: 0.5rem; height: 1.5px; background-color: #000; left: 0; transform: rotate(45deg); }
.dropdown--caret input:after { content: ""; display: block; position: absolute; width: 0.5rem; height: 1.5px; background-color: #000; left: 0.3125rem; transform: rotate(-45deg); }
.dropdown--content { display: none;  padding: 15px; transition: all 250ms; }
.dropdown--content p { margin-left: 0; margin-right: 0; }
.dropdown--tab input:checked  ~ .dropdown--content { display: block; }

@media screen and (max-width: 575px) {
	.dropdown--elements { width: calc(100% - 30px); margin: 30px auto; }
}
@media screen and (min-width: 576px) {
	.dropdown--elements { width: calc(100% - 30px); margin: 30px auto; }
}
@media screen and (min-width: 768px) {
	.dropdown--elements { width: var(--md-width); margin: 30px auto; }
}
@media screen and (min-width: 992px)  {
	.dropdown--elements { width: var(--lg-width); margin: 30px auto; }
}
@media screen and (min-width: 1200px) {
	.dropdown--elements { width: var(--xl-width); margin: 30px auto; }
}


.consent-panel { display: block; width: calc(100% - 30px); max-width: 800px; overflow: hidden; position: fixed; bottom: 20px; background: #fff; left: 16px; right: 16px; margin: 0 auto;  box-shadow: rgba(2, 2, 3, 0.28) 0px 10px 30px 0px; border-radius: 8px; border: 1px solid #2d4156; padding: 24px; }
.consent-panel--content { display: inline-block; width: calc(100% - 240px); float: left; }
.consent-panel--content p { font-size: 14px; line-height: 1.3; text-align: left; }
.consent-panel--heading { font-size: 16px; font-weight: 700; color: #333; margin-bottom: 8px; }
.consent-panel--buttons { display: inline-block; width: 225px; float: right; }
.consent-panel--button { width: 100%; padding: 12px 0; text-align: center; background: #eaeff2; color: #2d4156; border-radius: 5px; border: none; }
.consent-panel--button:hover { background: #d8e0e6; cursor: pointer; }
.consent-panel--buttons button:first-child { margin-bottom: 8px; background: #2d4156; color: #fff; }
.consent-panel--buttons button:first-child:hover { background: #1d2e38; }

@media screen and (max-width: 575px) {
	.consent-panel--content { width: 100%; margin-bottom: 16px; }
	.consent-panel--buttons { width: 100%; }
}
@media screen and (min-width: 576px) and (max-width: 767px) {
	.consent-panel--content { width: calc(100% - 170px); }
	.consent-panel--buttons { width: 150px; }
}