#hero>.clearfix {
    position: relative;
    background-color: var(--light-blue);
}

#hero-picture {
  position: relative;
  float: none;
  border-bottom: 5px solid var(--color-white);
}

#hero-picture .hero-pic img {
    position: relative !important;
    width: 100%;
    display: block !important;
    height: auto;
}

#hero-separation {
    display: none;
}

#hero-content {
    float: none;
    background-color: var(--light-blue);
}

#hero-content-inner {
  padding: 1.5em var(--padding-small) 2.5em;
}

#hero-content-inner h1 {
    font-size: 24px;
    font-size: 1.5rem;
    color: var(--blue);
    font-weight: 700;
    font-family: var(--font-family-bold);
    margin-bottom: 1em;
}

#hero-content-inner p {
    font-size: 18px;
    font-size: 1.125rem;
    color: var(--color-white);
    margin-bottom: 2em;
}

#hero-content-inner strong,
#hero-content-inner b {
    font-weight: 700;
    font-family: var(--font-family-bold);
}

#hero-content-inner .links {
    margin: 1.5em 0 0;
}
#hero-content-inner .links .button-primary {
    margin-right: 1em;
}

/* Tabs */
#hero-tabs {
    background-color: var(--blue);
    border-bottom: 5px solid var(--blue);
}

.hero-tab {
    background-color: var(--blue);
    padding: 1em 0;
    border-bottom: 1px solid var(--blue);
}

.hero-tab:last-of-type {
    border-bottom: none;
}

.hero-tab-header {
    float: left;
    width: 80%;
}

.hero-tab-header .icon {
    display: block;
    float: left;
}

.hero-tab-header h2 {
    display: inline-block;
    float: left;
    color: var(--color-white);
    font-size: 18px;
    font-size: 1.125rem;
    font-weight: 700;
    font-family: var(--font-family-bold);
    text-transform: uppercase;
    width: 71%;
    line-height: 1.2em;
}

.hero-tab-content {
    display: none;
}

.hero-tab-buttons {
    float: right;
    width: 20%;
    text-align: right;
}
.hero-tab-buttons .button-primary {
    display: none;
}

.hero-tab-button-mobile,
.hero-tab-button-mobile:link,
.hero-tab-button-mobile:active,
.hero-tab-button-mobile:visited {
    display: inline-block;
    border: 2px solid var(--light-blue);
    border-radius: 50%;
    position: relative;
    width: 44px;
    height: 44px;
}

.hero-tab-button-mobile span,
.hero-tab-button-mobile:link span,
.hero-tab-button-mobile:active span,
.hero-tab-button-mobile:visited span {
    display: block;
    width: 20px;
    height: 20px;
    background: url("../images/sprite.png") -38px 0 no-repeat;
    position: absolute;
    top: 12px;
    left: 12px;
}

/* Geometer tab */
.hero-geometer .icon {
    width: 48px;
    height: 41px;
    background: url("../images/sprite.png") 0 -26px no-repeat;
    margin: 0.25em 1em 0 0;
}

.hero-geometer h2 {
    margin-top: 0.25em;
}

/* Tip */
.hero-conseil .icon {
    width: 44px;
    height: 48px;
    background: url("../images/sprite.png") -48px -22px no-repeat;
    margin: 0.25em 1.25em 0 0;
}

.hero-conseil h2 {
    margin-top: 0.85em;
}

/* Agenda */
.hero-agenda .icon {
    width: 44px;
    height: 47px;
    background: url("../images/sprite.png") -2px -78px no-repeat;
    margin: 0.25em 1.25em 0 0;
}

.hero-agenda h2 {
    margin-top: 0.85em;
}

/* Asbl */
#asbl>.row {
    padding: 0;
}

#asbl {
    padding: 2.5em 0;
}

.asbl-main {
    float: none;
}

.asbl-main .inner {
    padding: 0 var(--padding-small);
}

.asbl-main h2 {
    color: var(--blue);
    font-weight: 700;
    font-family: var(--font-family-bold);
    margin-bottom: 1em;
}

.asbl-main h3 {
    font-weight: 700;
    font-family: var(--font-family-bold);
    color: var(--grey);
    margin-bottom: 1.5em;
}

.asbl-main p {
    color: var(--grey);
    margin-bottom: 1.5em;
}

.asbl-main .button-primary,
.asbl-main .button-primary:link,
.asbl-main .button-primary:active,
.asbl-main .button-primary:visited {
    background-color: var(--color-white);
    border: 2px solid var(--blue);
    color: var(--light-blue);
}

.asbl-main .button-primary:hover {
    background-color: var(--blue);
    color: var(--color-white);
}

.asbl-left {
    float: none;
}

.asbl-right {
    float: none;
}

.asbl-extras {
    float: none;
    background-color: var(--blue);
    margin-top: 2.5em;
    border-bottom: 5px solid var(--blue);
}

.asbl-extras h3 {
    font-weight: 700;
    font-family: var(--font-family-bold);
    color: var(--color-white);
    border-bottom: 1px dotted var(--light-blue);
    padding-bottom: 0.3em;
    margin-top: 0;
}

.asbl-extras ul {
    color: var(--color-white);
    list-style: disc;
    margin: 1.2em 1.2em 0;
    padding: 0;
}

.asbl-extras ul li {
    margin-bottom: 0.5em;
}

.asbl-extras ul li a,
.asbl-extras ul li a:link,
.asbl-extras ul li a:active,
.asbl-extras ul li a:visited {
    color: var(--color-white);
    text-decoration: none;
    line-height: 1.3em;
}

.asbl-extras ul li a:hover {
    text-decoration: underline;
}

.asbl-extras-inner {
    padding: 1.5em var(--padding-small);
}

.asbl-extras-inner ul {
    margin-top: 0;
}

.asbl-extras-header .icon {
    float: left;
    margin-right: 1em;
}

.asbl-extras-header .icon span {
    display: block;
    width: 26px;
    height: 34px;
    background: url("../images/sprite.png") -57px -85px no-repeat;
}

.asbl-extras-header .title {
    float: left;
    padding-top: 0.5em;
}

/* Metier */
.metier-header {
    padding: 0 0 1.5em;
}

.metier-header h2 {
    color: var(--blue);
    font-size: 24px;
    font-size: 1.5rem;
    font-weight: 700;
    font-family: var(--font-family-bold);
    margin-bottom: 0;
}

.metier-list-title {
    position: relative;
    background-color: var(--light-blue);
    padding: var(--padding-small) var(padding-small) 1em;
    border-bottom: 1px solid var(--blue);
}

.metier-list-title .number {
    display: inline-block;
    width: 36px;
    height: 36px;
    margin: 0 0.5em -0.6em 0;
}

.metier-list-title .one {
    background: url("../images/sprite.png") 0 -130px no-repeat;
}

.metier-list-title .two {
    background: url("../images/sprite.png") 0 -171px no-repeat;
}

.metier-list-title .three {
    background: url("../images/sprite.png") 0 -212px no-repeat;
}

.metier-list-title h3 {
    display: inline-block;
    font-size: 22px;
    font-size: 1.375rem;
    font-weight: 700;
    font-family: var(--font-family-bold);
    color: var(--color-white);
}

.metier-list-title .expand-button {
    position: absolute;
    display: block;
    width: 28px;
    height: 16px;
    background: url("../images/sprite.png") -59px 0 no-repeat;
    top: 50%;
    right: var(--padding-small);
    margin-top: -7px;
    transform: rotate(180deg);
    z-index: 5;
    cursor: pointer;
}

.metier-list-title .expand-button.open {
    transform: rotate(0deg);
}

.metier-list-content {
    display: none;
}

.metier-list-content .inner {
    padding: 1.5em var(--padding-small);
    background-color: var(--blue);
    border-bottom: 5px solid var(--blue);
}

.metier-list-content p {
    color: var(--color-white);
    margin-bottom: 1.5em;
}

.metier-list-content ul {
    color: var(--color-white);
    list-style: disc;
    margin: 0 0 2em 1.2em;
}

.metier-list-content ul li {
    margin-bottom: 0.8em;
    line-height: 1.3em;
}

.metier-list-content a,
.metier-list-content a:link,
.metier-list-content a:active,
.metier-list-content a:visited {
    color: var(--color-white);
    text-decoration: underline;
}

.metier-list-conten a:hover {
    text-decoration: none;
}

.metier-list-content.open {
    display: block;
}

#metier-tabs,
#metier-tabs-content {
    display: none;
}

#metier-picture {
    display: none;
}

/* Membres */
#gmap {
    display: none;
}

#membres {
    position: relative;
}

#members-widget .header {
    background-color: var(--blue);
    padding: 2em var(--padding-small) 1em;
}

#members-widget .header h2 {
    color: var(--color-white);
    margin-top: 0;
    margin-bottom: 1em;
}

#members-widget .header p {
    color: var(--color-white);
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 1.2em;
    margin-bottom: 0;
}

#members-widget ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.member.odd {
    background-color: var(--blue);
}

.member.even {
    background-color: var(--color-blue-900);
}

.member-header {
    padding: 1em var(--padding-small);
    position: relative;
}

.member-header .icon {
    float: left;
    margin-right: var(--padding-small);
}

.member-header .icon span {
    display: block;
    width: 48px;
    height: 41px;
    background: url("../images/sprite.png") 0 -26px no-repeat;
}

.member-header .title {
    float: left;
    max-width: 185px;
    padding: 0.2em 0 0 0;
}

.member-header .title h3 {
    font-size: 18px;
    font-size: 1.125rem;
    color: var(--color-white);
    margin-top: 0;
    margin-bottom: 4px;
}

.member-header .title h3 span.lastname {
    text-transform: uppercase;
}

.member-header .title span.city {
    font-size: 18px;
    font-weight: 700;
    font-family: var(--font-family-bold);
    color: var(--light-blue);
}

.member-header .expand {
    display: block;
    position: absolute;
    width: 40px;
    height: 40px;
    border: 2px solid var(--light-blue);
    border-radius: 50%;
    right: var(--padding-small);
    top: 50%;
    cursor: pointer;
    margin-top: -22px;
}

.member-header .expand span {
    position: absolute;
    display: block;
    background: url("../images/sprite.png") -38px 0 no-repeat;
    width: 20px;
    height: 20px;
    top: 50%;
    left: 50%;
    margin-top: -10px;
    margin-left: -10px;
}

.member-header .expand.open span {
    background: url("../images/sprite.png") -78px -130px no-repeat;
    height: 2px;
    margin-top: -1px;
    margin-left: -9px;
}

.member-header:hover {
    background-color: var(--light-blue);
}

.member-header:hover .icon span {
    background: url("../images/sprite.png") -93px 0 no-repeat;
}

.member-header:hover .title span.city {
    color: var(--blue);
}

.member-header:hover .expand {
    border: 2px solid var(--blue);
}

.member-body {
    display: none;
}

.member-body .inner {
    padding: 1em var(--padding-small);
}

.member-body ul li {
    margin-bottom: 0.5em;
    color: var(--color-white);
    font-size: 16px;
    font-weight: 400;
}

.member-body ul li span {
    color: var(--light-blue);
    text-transform: uppercase;
    font-weight: 700;
    font-family: var(--font-family-bold);
}

.member-body ul li a,
.member-body ul li a:link,
.member-body ul li a:active,
.member-body ul li a:visited {
    color: var(--color-white);
    text-decoration: none;
}

.member-body ul li a:hover {
    text-decoration: underline;
}

.member-body.open {
    display: block;
}

/* Inscription */
#devenirMembre {
    padding: 2em 0 0;
}

#devenirMembre h2 {
    color: var(--blue);
    margin-bottom: 1em;
}

#devenirMembre p {
    color: var(--grey);
}

#devenirMembre>.row {
    padding: 0 var(--padding-small) 1.5em;
}

.member-option {
    float: none;
}

.member-option .option-header {
    background: var(--blue);
    padding: var(--padding-medium) var(--padding-small);
    position: relative;
}

.member-option .option-header h3 {
    font-size:21px;
    font-size: 1.3125rem;
    font-weight: 700;
    font-family: var(--font-family-bold);
    color: var(--color-white);
    margin-top: 0;
    margin-bottom: 0;
}

.member-option .option-header .expand {
    display: block;
    position: absolute;
    width: 40px;
    height: 40px;
    border: 2px solid var(--light-blue);
    border-radius: 50%;
    right: var(--padding-small);
    top: 50%;
    margin-top: -22px;
    cursor: pointer;
}

.member-option .option-header .expand span {
    position: absolute;
    display: block;
    background: url("../images/sprite.png") -38px 0 no-repeat;
    width: 20px;
    height: 20px;
    top: 50%;
    left: 50%;
    margin-top: -10px;
    margin-left: -10px;
}

.member-option .option-header .expand.open span {
    background: url("../images/sprite.png") -78px -130px no-repeat;
    height: 2px;
    margin-top: -1px;
}

.member-option .option-body {
    display: none;
}

.member-option .option-body ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.member-option .option-body ul li {
    background-color: var(--color-gray-200);
    padding: 1em var(--padding-small);
    color: var(--grey);
}

.member-option .option-body ul li:nth-of-type(even) {
    background-color: var(--color-gray-100);
    color: var(--light-blue);
}

.member-option .option-body.open {
    display: block;
}

.stagiaire .option-header {
    background-color: var(--light-blue);
}

#inscription {
    padding: 1.5em 0 2em;
    background-color: var(--blue);
    text-align: center;
}

#inscription p {
    font-size: 18px;
    font-size: 1.125rem;
    font-weight: 700;
    font-family: var(--font-family-bold);
    text-align: center;
    margin-bottom: 1.5em;
    color: var(--color-white);
}

#inscription .button-primary,
#inscription .button-primary:link,
#inscription .button-primary:active,
#inscription .button-primary:visited {
    background-color: var(--blue);
    border: 2px solid var(--light-blue);
}

#inscription .button-primary:hover {
    background-color: var(--light-blue);
}

/* Agenda */
#agenda {
    padding: 2.5em 0;
}

#agenda h2 {
    color: var(--blue);
    margin-bottom: 1em;
}

#agenda p {
    color: var(--grey);
}

/* Grid */
.agenda {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.event,
.event:link,
.event:visited,
.event:active {
    display: block;
    width: 50%;
    box-sizing: border-box;
    padding: 1px;
    flex: 0 1 auto;
    text-decoration: none;
    border: 1px solid var(--color-white);
    min-height: 180px;
}

.event-box .event-box_inner {
    padding: 1em var(--padding-small);
}

.event-box h3 {
    font-family: var(--font-family-bold);
    font-weight: 700;
    font-size: 21px;
    font-size: 1.3125rem;
    text-decoration: none;
}

.event-box h3 span {
    font-family: var(--font-family-regular);
    font-weight: 400;
    display: block;
}

.event-month {
    background: var(--blue);
}

.event-month h3 {
    color: var(--color-white);
}

.event-month h3 span {
    color: var(--light-blue);
}

.event-day {
    background: var(--color-gray-100);
}

.event-day h3 {
    color: var(--blue);
}

.event-day em {
    font-family: var(--font-family-regular);
    color: var(--light-blue);
    font-style: normal;
    text-decoration: none;
    font-size: 15px;
    font-size: 0.9375rem;
}

.event-day  h4 {
    font-family: var(--font-family-bold);
    font-weight: 700;
    color: var(--blue);
    text-decoration: none;
    font-size: 18px;
    font-size: 1.125rem;
    margin-top: 1em;
}

.event-day.odd {
    background: var(--color-gray-200);
}

.event-day.private {
    background: #ffffcc;
}

.event-day:hover {
    background: var(--light-blue);
}

.event-day:hover h3,
.event-day:hover em,
.event-day:hover h4 {
    color: var(--color-white);
}

@media (min-width: 540px){
    .hero-tab h2 {
	margin-top: 0.9em;
    }

    /* Asbl */
    .asbl-left {
	float: left;
	width: 50%;
    }

    .asbl-right {
	float: left;
	width: 50%;
    }

    .asbl-main 	p {
	padding-right: 1.5em;
    }

    /* Inscription */
    #devenirMembre {
	background: url("../images/courbes_niveaux.png") 100% 0 no-repeat;
	background-size: cover;
    }

    #member-options {
	padding: 1em 0 2em;
    }

    .member-option {
	float: left;
	width: 50%;
    }

    .member-option .option-header .expand {
	display: none;
    }

    .member-option .option-body {
	display: block !important;
    }

    .member-option>.inner {
	padding: 0 var(--padding-small);
    }

    /* Agenda */
    .event, .event:link, .event:active, .event:visited {
	width: 33.3333%;
    }
}

@media (min-width: 768px) {
    #hero-picture {
	position: absolute;
	top: 0;
	right: 0;
	border: none;
	width: 50%;
	height: 100%;
	bottom: 0;
    }

    #hero-picture .hero-pic {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
    }

    #hero-separation {
	display: block;
	width: 70px;
	height: 100%;
	position: absolute;
	background-color: var(--light-blue);
	transform: skew(-10deg, 0);
	z-index: 1;
	top: 0;
	left: 50%;
	margin-left: -52px;
	border-right: 5px solid var(--color-white);
    }

    #hero-content {
	float: left;
	width: 50%;
	background-color: var(--light-blue);
    }

    #hero-content-inner {
	padding: 2.5em var(--padding-medium) 12em;
	width: 85%;
    }

    #hero-content-inner h1 {
	font-size: 30px;
	font-size: 1.875rem;
	color: var(--blue);
	font-weight: 700;
	font-family: var(--font-family-bold);
	margin-bottom: 1em;
    }

    #hero-content-inner p {
	font-size: 20px;
	font-size: 1.25rem;
	color: var(--color-white);
	margin-bottom: 2em;
    }

    #hero-content-inner .links {
	margin: 1.5em 0 0;
    }

    #hero-content-inner .links .button-primary {
        margin-right: 1em;
    }

    /* TABS */
    #hero-tabs {
	position: relative;
	height: 100px;
    }

    #hero-tabs>.row {
	position: absolute;
	bottom: 0;
	width: 100%;
	box-sizing: border-box;
    }

    .hero-tab {
	position: relative;
	border-bottom: none;
	width: 33.33%;
	float: left;
    }

    .hero-tab-inner {
	position: absolute;
	bottom: 0;
	z-index: 100;
	background-color: var(--blue);
	padding: 1.5em 1em;
	width: 100%;
	box-sizing: border-box;
    }

    .hero-tab-header {
	float: none;
	width: auto;
    }

    .hero-tab-header .icon {
	display: block;
	float: none;
	margin: 0 auto;
	height: 50px;
    }

    .hero-tab-header h2 {
	display: block;
	float: none;
	font-size: 20px;
	font-size: 1.25rem;
	width: auto;
	text-align: center;
	min-height: 3em;
	padding: 0 .5em;
    }

    .hero-tab-buttons {
	float: none;
	width: 100%;
	text-align: center;
    }

    .hero-tab-buttons .button-primary,
    .hero-tab-buttons .button-primary:link,
    .hero-tab-buttons .button-primary:active,
    .hero-tab-buttons .button-primary:visited {
	display: inline-block;
	background-color: var(--blue);
	border: 2px solid var(--light-blue);
    }

    .hero-tab-buttons .button-primary:hover {
	background-color: var(--light-blue);
    }

    .hero-tab-button-mobile,
    .hero-tab-button-mobile:link {
	display: none;
    }

    /* Asbl */
    #asbl>.row {
	padding: 0 var(--padding-medium);
    }

    .asbl-left {
	float: none;
	width: auto;
    }

    .asbl-right {
	float: none;
	width: auto;
    }

    .asbl-main {
	float: left;
	width: 50%;
    }

    .asbl-main .inner {
	padding: 0 1.5em 0 0;
    }

    .asbl-extras {
	float: left;
	width: 50%;
    }

    .asbl-extras-inner {
	padding: 1.5em var(--padding-medium);
    }

    /* Métier */
    #metier {
	padding: 2em 0 0;
    }

    .metier-header {
	padding: 0 0 2em;
    }

    .metier-header h2 {
	font-size: 30px;
	font-size: 1.875rem;
    }

    #metier-list {
	display: none;
    }

    #metier-tabs {
	display: block;
    }

    #metier-tabs>.row {
	display: flex;
    }

    .metier-tab {
	background-color: var(--light-blue);
	padding: var(--padding-small) var(--padding-small) 0.8em;
	border-right: 1px solid var(--color-white);
	cursor: pointer;
    }

    .metier-tab .number {
	width: 36px;
	height: 36px;
	display: inline-block;
	margin: 0 0.5em -0.5em 0;
    }

    .metier-tab h3 {
	display: inline-block;
	font-size: 24px;
	font-size: 1.5rem;
	font-weight: 700;
	font-family: var(--font-family-bold);
	color: var(--color-white);
	margin-bottom: 0;
	margin-top: 0;
    }

    .metier-tab:hover {
	background-color: var(--light-blue);
    }

    .metier-tab.active {
	background-color: var(--blue);
    }

    .one .number {
	background: url("../images/sprite.png") 0 -130px no-repeat;
    }

    .two .number {
	background: url("../images/sprite.png") 0 -171px no-repeat;
    }

    .three .number {
	background: url("../images/sprite.png") 0 -212px no-repeat;
    }

    .one.active .number {
	background: url("../images/sprite.png") -41px -130px no-repeat;
    }

    .two.active	.number {
	background: url("../images/sprite.png") -41px -171px no-repeat;
    }

    .three.active .number {
	background: url("../images/sprite.png") -41px -212px no-repeat;
    }

    #metier-tabs-content {
	position: relative;
	display: block;
	background-color: var(--blue);
	border-bottom: 30px solid var(--color-blue-900);
    }

    .metier-box {
	display: none;
	padding: 2em 0 0.1em;
    }

    .metier-box p {
	color: var(--color-white);
	margin-bottom: 1.5em;
    }

    .metier-box ul {
	color: var(--color-white);
	list-style: disc;
	margin: 0 0 2em 1.2em;
    }

    .metier-box ul li {
	margin-bottom: 0.8em;
	line-height: 1.3em;
    }

    .metier-box	a,
    .metier-box a:link,
    .metier-box a:active,
    .metier-box a:visited {
	color: var(--color-white);
	text-decoration: underline;
    }

    .metier-box a:hover {
	text-decoration: none;
    }

    .metier-box.active {
	display: block;
    }

    /* Membres */
    #gmap {
	display: block;
	width: 100%;
	min-height: 768px;
    }

    #members-widget {
	position: absolute;
	top: 5em;
	left: 0;
	width: 43%;
	bottom: 5em;
	overflow-y: scroll;
	overflow-x: hidden;
    }

    #members-widget .header {
	background-color: var(--blue);
	background-color: var(--transparent-blue);
	padding: 2em var(--padding-medium) 2em;
    }

    .member {
	cursor: pointer;
    }

    .member-header {
	padding: 1em var(--padding-medium);
    }

    .member-header .expand {
	display: none;
	right: var(--padding-medium);
    }

    .member-body {
	display: none !important;
    }

    .member-body .inner {
	padding: var(--padding-medium);
    }

    .member-card-header {
	position: relative;
	padding: 0 var(--padding-small) 1em;
    }

    .member-card-header h3 {
	font-size: 18px;
	font-size: 1.125rem;
	color: var(--blue);
	font-weight: 700;
	font-family: var(--font-family-bold);
	margin-top: 0;
	margin-bottom: 4px;
    }

    .member-card-header h3 span.lastname {
        text-transform: uppercase;
    }

    .member-card-header span.city {
	font-size: 18px;
	font-size: 1.125rem;
	font-weight: 400;
	color: var(--light-blue);
    }

    .member-card-body .inner {
	padding: 1em var(--padding-small);
    }

    .member-card-body ul {
	padding: 0;
	margin: 0;
	list-style: none;
    }

    .member-card-body ul li {
        margin-bottom: 0.5em;
        color: var(--light-blue);
	font-size: 16px;
	font-size: 1rem;
        font-weight: 400;
    }

    .member-card-body ul li span {
        color: var(--blue);
        text-transform: uppercase;
        font-weight: 700;
	font-family: var(--font-family-bold);
    }

    .member-card-body ul li a,
    .member-card-body ul li a:link,
    .member-card-body ul li a:active,
    .member-card-body ul li a:visited {
	color: var(--light-blue);
	text-decoration: none;
    }

    .member-card-body ul li a:hover {
	text-decoration: underline;
    }

    /* Inscription */
    #devenirMembre>.row {
	padding: 0 var(--padding-medium) 2.5em;
    }

    #member-options {
	padding: 0 var(--padding-medium) 4em;
    }

    .member-option>.inner {
	padding: 0 var(--padding-medium);
    }

    /* Agenda */
    .event, .event:link, .event:active, .event:visited {
	width: 25%;
	min-height: 200px;
    }

    .event-box .event-box-inner {
	padding: 1.5em var(--padding-medium);
    }

    .event-box h3 {
	font-size: 24px;
	font-size: 1.5rem;
    }

    .event-box h4 {
	font-size: 21px;
	font-size: 1.3125rem;
    }
}

@media (min-width: 960px) {
    /* Membres */
    #gmap {
	min-height: 800px;
    }

    #members-widget {
	left: 2em;
	width: 30%;
    }
}

@media (min-width: 1024px)
{
    #hero-content-inner {
	padding: 3em var(--padding-large) 12em;
    }

    #hero-content-inner h1 {
	font-size: 36px;
	font-size: 2.25rem;
    }

    #hero-content-inner p {
	font-size: 21px;
	font-size: 1.3125rem;
    }

    #hero-tabs {
	height: 140px;
    }

    .hero-tab-inner {
	padding: 2.5em 1em 1.5em;
	border-right: 1px solid var(--blue);
    }

    .hero-tab:last-of-type .hero-tab-inner {
	border-right: none;
    }

    .hero-tab-header {
	display: flex;
	justify-content: center;
    }

    .hero-tab-header .icon {
	margin: -12px 1em 0 0;
    }

    .hero-tab-header h2 {
	width: auto;
	text-align: left;
	padding: 0;
	margin: 0;
    }

    .hero-geometer .icon {
	margin: 0 1em 0 0;
	flex: 0 0 auto;
    }

    .hero-tab-content {
	display: block;
	margin: 0 auto;
    }

    .hero-tab-content p {
	padding: 0 0.5em;
	text-align: center;
	color: var(--color-white);
	min-height: 4.5em;
    }

    .hero-tab-buttons {
	padding-top: 1.2em;
    }

    /* Asbl */
    #asbl {
	padding: 3.5em 0 0;
    }

    #asbl>.row {
	padding: 0 var(--padding-large);
    }

    .asbl-left {
	float: left;
	width: 50%;
    }

    .asbl-right {
	float: left;
	width: 50%;
    }

    .asbl-main {
	width: 65%;
    }

    .asbl-main .inner {
	padding: 0;
    }

    .asbl-main 	p {
	padding-right: 2em;
    }

    .asbl-extras {
	width: 35%;
    }

    /* Métiers */
    #metier {
	padding: 3em 0 0;
    }

    .metier-header h2 {
	font-size: 36px;
	font-size: 2.25rem;
    }

    .metier-header>.row {
	padding: 0 0 0 25em;
    }

    #metier-tabs>.row {
	padding: 0;
    }

    #metier-tabs,
    #metier-tabs-content {
	padding-left: 25em;
    }

    #metier-tabs-content>.row {
	padding: 0 var(--padding-large) 0 0;
    }

    #metier-picture {
	display: block;
	position: absolute;
	bottom: 0;
	left: -8%;
	z-index: 5;
	width: 47%;
	height: auto;
	max-width: 500px;
    }

    .metier-box {
	min-height: 442px;
    }

    /* Inscription */
    #devenirMembre {
	padding: 3em 0 0;
    }

    #devenirMembre p {
	width: 60%;
    }

    #devenirMembre>.row {
	padding: 0 var(--padding-large) 2.5em;
    }

    #member-options {
	padding: 0 var(--padding-xlarge) 4em;
    }

    .member-option>.inner {
	padding: 0 var(--padding-medium);
    }

    #inscription {
	padding: 2.5em 0 3em;
    }

    #inscription p {
	padding: 0 var(--padding-xxxlarge);
    }

    /* Agenda */
    #agenda {
	padding: 3.5em 0;
    }

    #agenda p.agenda-noevent {
	width: 60%;
    }

    .event, .event:link, .event:active, .event:visited {
	width: 20%;
    }
}

@media (min-width: 1120px) {
    #hero-tabs {
	height: 120px;
    }

    .hero-tab-content p {
	min-height: 3.5em;
    }
}

@media (min-width: 1280px)
{
    #hero-content-inner {
	padding: 3em var(--padding-xlarge) 12em;
	width: 70%;
    }

    .hero-tab-content p {
	min-height: 3em;
    }

    /* Asbl */
    #asbl>.row {
	padding: 0 var(--padding-xlarge);
    }

    .asbl-extras-inner {
	padding: 1.5em var(--padding-large);
    }

    /* Métiers */
    #metier {
	padding: 3.5em 0 0;
    }

    .metier-header>.row {
	padding: 0 0 0 35em;
    }

    #metier-tabs,
    #metier-tabs-content {
	padding-left: 35em;
    }

    #metier-picture {
	left: 2%;
	width: 35%;
	max-width: 450px;
    }

    #metier-tabs-content>.row {
	padding: 0 var(--padding-xlarge) 0 0;
    }

    /* Membres */
    #members-widget {
	left: var(--padding-xlarge);
	width: 20%;
    }

    /* Inscription */
    #devenirMembre {
	padding: 4em 0 0;
    }

    #devenirMembre>.row {
	padding: 0 var(--padding-xlarge) 2.5em;
    }

    #member-options {
	padding: 0 var(--padding-xxxlarge) 4em;
    }

    #inscription {
	padding: 3em 0 3.5em;
    }

    /* Agenda */
    .event-box h3 {
	font-size: 30px;
	font-size: 1.875rem;
    }

    .event-box h4 {
	font-size: 21px;
	font-size: 1.3125rem;
    }
}

@media (min-width: 1383px) {
    .hero-geometer .icon {
	margin: -12px 1em 0 0;
    }
}

@media (min-width: 1440px)
{
    #hero-content-inner {
	padding: 3em var(--padding-xxlarge) 12em;
    }

    #hero-content-inner h1 {
	padding-right: 2em;
    }

    #hero-content-inner p {
	padding-right: 3em;
    }

    .hero-tab-content p {
	padding: 0 1em;
    }

    /* Asbl */
    #asbl>.row {
	padding: 0 var(--padding-xxlarge);
    }

    /* Métiers */
    #metier {
	padding: 4em 0 0;
    }

    #metier-picture {
	left: 10%;
	width: 32%;
    }

    #metier-tabs-content>.row {
	padding: 0 var(--padding-xxlarge) 0 0;
    }

    .metier-header>.row {
	padding: 0 0 0 40em;
    }

    #metier-tabs,
    #metier-tabs-content {
	padding-left: 40em;
    }

    .metier-box {
	min-height: 422px;
    }

    /* Membres */
    #members-widget {
	left: var(--padding-xxlarge);
    }

    /* Inscription */
    #devenirMembre>.row {
	padding: 0 var(--padding-xxlarge) 2.5em;
    }

    #member-options {
	padding: 0 22em 4em;
    }

    #inscription {
	p {
	    padding: 0 20em;
	}
    }
}

@media (min-widht: 1630px) {
    /* Agenda */
    .event, .event:link, .event:active, .event:visited {
	width: 16.66667%;
    }
}

@media (min-width: 1680px)
{
    #hero-content-inner {
	padding: 3em var(--padding-xxxlarge) 12em;
    }

    #hero-content-inner h1 {
	padding-right: 4em;
    }

    #hero-content-inner  p {
	padding-right: 6em;
    }

    /* Asbl */
    #asbl>.row {
	padding: 0 var(--padding-xxxlarge);
    }

    /* Métiers */
    #metier {
	padding: 5em 0 0;
    }

    #metier-tabs-content>.row {
	padding: 0 var(--padding-xxxlarge) 0 0;
    }

    .metier-header>.row {
	padding: 0 0 0 43.5em;
    }

    #metier-tabs, #metier-tabs-content {
	padding-left: 43.5em;
    }

    #metier-picture {
	left: 9%;
    }

    /* Membres */
    #members-widget {
	left: var(--padding-xxxlarge);
	width: 20%;
    }

    /* Inscription */
    #devenirMembre>.row {
	padding: 0 var(--padding-xxxlarge) 3em;
    }

    #member-options {
	padding: 0 30em 4em;
    }
}

@media (min-width: 2000px) {
    /* Agenda */
    .event, .event:link, .event:active, .event:visited {
	width: 12.5%;
    }

    .event-box h4 {
	font-size: 24px;
	font-size: 1.5rem;
    }
}