/* FONTS */
@font-face {
    font-family: default-font;
    src: url(../fonts/subset-Sora-Regular.woff);
    font-weight: 400;
}

@font-face {
    font-family: default-font;
    src: url(../fonts/subset-Sora-Bold.woff);
    font-weight: 700;
}

@font-face {
    font-family: icon-font;
    src: url(../fonts/icon-font.woff);
    font-weight: 400;
}

/* MAIN */
:root{
    --blue: #052fd6;
    --cyan: #6ee7b7;
    --pink: #f30e83;
    --grey: #f2f2f2;
    --green: #1a3f48;
	--gradient: linear-gradient(135deg, #31c6b7, #1d86c6);
}

html {
	font-size: 62.5%;
	-webkit-font-smoothing: antialiased;
}

body {
    margin: 0;
	font-family: default-font, sans-serif;
	font-size: 1.6rem;
	line-height: 1.6em;
	background-color: #ffffff;
	color: #000000;
    --link-color: var(--cyan);
    --button-text-color: #ffffff;
    --button-background: var(--gradient);
    --button-hover-text-color: #ffffff;
    --button-hover-background: var(--blue);
}

.light{
    background-color: #ffffff;
	color: #000000;
    --link-color: var(--cyan);
    --button-text-color: #ffffff;
    --button-background: var(--gradient);
    --button-hover-text-color: #ffffff;
    --button-hover-background: var(--blue);
}

.grey{
    background: var(--grey);
	color: #000000;
    --link-color: var(--cyan);
    --button-text-color: #ffffff;
    --button-background: var(--gradient);
    --button-hover-text-color: #ffffff;
    --button-hover-background: var(--blue);
}

.dark{
    background: var(--green);
    color: #ffffff;
    --link-color: var(--cyan);
    --button-text-color: #000000;
    --button-background: var(--cyan);
    --button-hover-text-color: #fffff;
    --button-hover-background: var(--blue);
}

.cyan{
    background: var(--cyan);
    color: #000000;
    --link-color: #ffffff;
    --button-text-color: #000000;
    --button-background: #ffffff;
    --button-hover-text-color: #ffffff;
    --button-hover-background: var(--blue);
}

.blue{
    background: var(--blue);
    color: #ffffff;
    --link-color: var(--cyan);
    --button-text-color: #000000;
    --button-background: #ffffff;
    --button-hover-text-color: #000000;
    --button-hover-background: var(--cyan);
}

.pink{
    background: var(--pink);
    color: #ffffff;
    --link-color: #000000;
    --button-text-color: #000000;
    --button-background: #ffffff;
    --button-hover-text-color: #ffffff;
    --button-hover-background: var(--blue);
}

.cyan-blue{
    background: linear-gradient(135deg, #34e19f 10%, #3446e5 90%);
	background-attachment: fixed;
    color: #ffffff;
    --link-color: #000000;
    --button-text-color: #000000;
    --button-background: #ffffff;
    --button-hover-text-color: #ffffff;
    --button-hover-background: var(--blue);
}

/* GENERAL */
p {
	margin: 2rem 0;
}

ul,
ol{
    margin: 2rem 0;
    padding-left: 1em;
}

li{
	margin: 1.5rem 0;
}

figure{
    margin: 2rem 0;
}

blockquote{
    margin: 2rem 0;
    font-size: 3rem;
	line-height: 1.2em;
}

hr {
	margin: 3rem 0;
	background-color: #e5e5e5;
	height: 0.1rem;
	border: 0;
}

a {
	color: var(--link-color);
    font-weight: 700;
	text-decoration: none;
    outline: 0;
	cursor: pointer;
}

a:hover,
a:focus{
	text-decoration: underline;
}

img,
svg,
video{
	width:auto;
	max-width: 100%;
	height:auto;
    vertical-align: top;
}

h1, h2, h3, h4{
	margin: 3rem 0 2rem 0;
}

h1,
.h1{
	font-size: 5rem;
	line-height: 1em;
    font-weight: 400;
}

h2,
.h2{
	font-size: 4rem;
	line-height: 1em;
    font-weight: 400;
}

h3,
.h3{
	font-size: 3rem;
	line-height: 1.2em;
    font-weight: 400;
}

h4,
.h4{
	font-size: 2.2rem;
	line-height: 1.2em;
    font-weight: 400;
}

@media screen and (max-width: 75em) {
    blockquote{
        font-size: 2.2rem;
        line-height: 1.2em;
    }
    h1,
    .h1{
        font-size: 3rem;
        line-height: 1.2em;
    }
    h2,
    .h2{
        font-size: 2.5rem;
        line-height: 1.2em;
    }
    h3,
    .h3{
        font-size: 2.2rem;
        line-height: 1.2em;
    }
    h4,
    .h4{
        font-size: 2rem;
        line-height: 1.2em;
        font-weight: 400;
    }
}

/* ICON FONT */
.icon-font{
    font-family: icon-font;
    font-weight: 400;
}

/* CHECKLIST */
.checklist li{
    margin: 2rem 0;
    padding-left: 1rem;
    font-weight: 700;
}

.checklist li::marker {
    content: '\e80c ';
    font-family: icon-font;
    color: var(--link-color);
}

/* SCREEN READER */
.screen-reader:not(:focus){
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    word-wrap: normal !important;
    overflow: hidden;
}

/* WORDPRESS */
img.alignnone{
    display: block;
    margin: 2rem 0;
}

img.aligncenter{
    display: block;
    margin: 2rem auto;
}

img.alignleft{
    display: block;
    margin: 2rem auto 2rem 0;
}

img.alignright{
    display: block;
    margin: 2rem 0 2rem auto;
}

figure.wp-caption{
    display: flex; flex-wrap: wrap;
	max-width: 100%;
}

figure.wp-caption.aligncenter{
    justify-content: center;
    margin: 2rem auto;
    text-align: center;
}

figure.wp-caption.alignleft{
    justify-content: flex-start;
    margin: 2rem auto 2rem 0;
    text-align: left;
}

figure.wp-caption.alignright{
    justify-content: flex-end;
    margin: 2rem 0 2rem auto;
    text-align: right;
}

figure.wp-caption figcaption{
    width: 0;
    flex-basis: 100%;
	margin-top: 1rem;
	font-style: normal;
}

/* RECAPTCHA BADGE */
.grecaptcha-badge {
    visibility: hidden !important;
}

/* BUTTON */
.button{
	display: inline-block;
	max-width: 100%;
    margin: 0;
	padding: 1.5rem 2.5rem;
	box-sizing: border-box;
	border-radius: 1rem;
	border: 0;
    outline: 0;
	text-align: center;
	font-family: default-font, sans-serif;
    font-weight: 400;
	font-size: 1.6rem;
	line-height: 1.6em;
	color: var(--button-text-color);
    background: var(--button-background);
	cursor:pointer;
}

.button:hover,
.button:focus{
    text-decoration: none;
	color: var(--button-hover-text-color);
    background: var(--button-hover-background);
}

.button:disabled,
.button.disabled{
    background: #dddddd;
    color: #aaaaaa;
	cursor: default;
	pointer-events: none;
}

/* BLOCK */
.block{
    max-width: 165rem;
    margin: 7.5rem auto;
    padding: 0 max(2rem, 5vw);
}

@media screen and (max-width: 60em) {
    .block{
        margin: 5rem auto;
    }
}

/* GALLERY */
.gallery{
    margin: 2rem 0;
    position: relative; z-index: 0;
}

.gallery .slider{
	height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

.gallery .slider.swiper-container{
    overflow: hidden;
}

.gallery .slides{
    display: flex;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.gallery .slide {
    width: 100%;
    height: auto;
    flex-shrink: 0;
}

.gallery img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery .nav-button {
    position: absolute; top: 0; bottom: 0; z-index: 1;
    width: 1em;
    height: 1em;
    margin: auto;
    padding: 0.5em;
    border: 0;
    outline: 0;
    text-align: center;
    font-size: 5rem;
    line-height: 1em;
    cursor: pointer;
    color: #ffffff;
}

.gallery .nav-button.prev {
    left: 0;
}

.gallery .nav-button.next {
    right: 0;
}

.gallery .nav-button:hover,
.gallery .nav-button:focus{
    color: var(--cyan);
}

.gallery .nav-button.swiper-button-disabled {
    display: none;
}

@media screen and (max-width: 75em) {
    .gallery .slide > .inner{
        padding: 0 5rem;
    }
    .gallery .nav-button{
        font-size: 2.5rem;
    }
}

/* VIDEO PLAYER */
.video-player{
    margin: 2rem 0;
    --plyr-color-main: var(--cyan);
	--plyr-video-control-color-hover: var(--plyr-color-main);
	--plyr-video-control-background-hover: transparent;
    --plyr-focus-visible-color: transparent;
}

.video-player .plyr .plyr__control--overlaid{
	--plyr-control-icon-size: 3rem;
    --plyr-control-spacing: 1.5rem;
	--plyr-video-control-background: rgba(0,0,0,0.5);
	--plyr-video-control-background-hover: rgba(0,0,0,0.5);
    opacity: 1;
}

.video-player .plyr .plyr__control{
	outline: 0;
}

.video-player .plyr input[type=range]:focus-visible{
    --plyr-range-thumb-background: var(--plyr-color-main);
}

/* STATISTIC */
.statistic{
    max-width: 45rem;
    margin: auto;
    text-align: center;
}

.statistic .value{
	display: block;
    font-size: 15rem;
    line-height: 1em;
}

.statistic .value .icon{
    width: 18rem;
    max-width: 50%;
    margin: auto;
    position: relative;
}

.statistic .value .icon::before{
    content: "";
    display: block;
    padding-bottom: 100%;
}

.statistic .value .icon img{
    position: absolute; top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: scale-down;
}

@media screen and (max-width: 90em) {
    .statistic .value{
        font-size: 10rem;
    }
}

@media screen and (max-width: 60em) {
    .statistic .value{
        font-size: 7.5rem;
    }
}

/* HERO */
.hero{
    display: flow-root;
}

.hero > .inner{
    display: flex; flex-direction: row-reverse; flex-wrap: wrap;
    margin: -1.5rem;
}

.hero .right{
    align-self: center;
    width: 50%;
    flex-grow: 1;
    margin: -1.5rem 0;
}

.hero .right > .inner{
    margin: 3rem 0;
    padding: 0 1.5rem;
}

.hero .left{
    max-width: 55rem;
    width: 50%;
    margin: -1.5rem 0;
}

.hero .left > .inner{
    max-width: 45rem;
    margin: 3rem 0;
    padding: 0 1.5rem;
}

.hero .graphic{
    margin: 0 min(2rem, -5vw);
    padding: 0 5vw;
    position: relative;
    background-image: url(../img/blue-dots.svg);
    background-position: top 15% right;
    background-size: 30% auto;
    background-repeat: no-repeat;
}

.hero .graphic::after{
    content: "";
    display: block;
    position: absolute; top: 0; bottom: 0; left: 0; right: 0;
    background-image: url(../img/pink-dots.svg);
    background-position: bottom 15% left;
    background-size: 30% auto;
    background-repeat: no-repeat;
    pointer-events: none;
}

.hero .graphic > .inner{
    display: flow-root;
    padding: 0 10% 4% 4%;
    background-image: url(../img/hero-bg.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom center;
    position: relative;
}

.hero .graphic > .inner::after{
    content: "";
    display: block;
    position: absolute; top: 0; bottom: 0; left: 0; right: 0;
    background-image: url(../img/hero-fg.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom center;
    pointer-events: none;
}

.hero .graphic .image{
    position: relative;
	overflow: hidden;
    background-color: var(--grey);
}

.hero .graphic .image::before{
    content: "";
    display: block;
    padding-bottom: 75%;
}

.hero .graphic .image > img{
    position: absolute; top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero .graphic .image .map{
    position: absolute; top: 0; left: 0;
    width: 100%;
    height: 100%;	
}

.hero .graphic .image .accreditation{
    position: absolute; top: 5rem; right: 5rem;
    width: 15rem;
    padding: 1rem 5rem;
    text-align: center;
    text-transform: uppercase;
    transform-origin: 50% 0;
    transform: translateX(50%) rotate(45deg);
	background: var(--gradient);
	color: #ffffff;
    box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.2);
}

.hero .duration{
	display: flex; align-items: center;
	font-weight: 700;
}

.hero .duration .icon-font{
	margin-right: 1rem;
	font-size: 2.5rem;
	line-height: 1em;
	color: var(--cyan);
}

.hero .date{
	display: block;
	margin: 2rem 0;
	font-weight: 700;
}

@media screen and (max-width: 75em) {
    .hero .left{
        width: 100%;
        max-width: none;
    }

    .hero .left > .inner{
        max-width: none;
    }
}

/* SKIP TO CONTENT */
#skip-to-content:not(:focus) {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(1px,1px,1px,1px);
    word-wrap: normal!important;
    overflow: hidden;
}

#skip-to-content:focus {
    position: fixed;
    top: 2rem;
    left: 2rem;
    z-index: 2;
}

/* HEADER */
#header::before{
    content: "";
    display: block;
    height: 2rem;
    background-image: linear-gradient(90deg, var(--cyan), var(--blue));
}

#header .header{
    display: flow-root;
    margin: 5rem auto;
}

#header .header > .inner{
    display: flex;
}

#header .logo{
    max-width: 50%;
    padding-right: 3rem;
    margin-right: auto;
}

@media screen and (max-width: 60em) {
    #header .header{
        margin: 3rem auto;
    }
}

/* MAIN MENU */
#main-menu{
    flex-grow: 1;
    flex-shrink: 0;
}

#main-menu .open-button{
    display: none;
}

#main-menu .columns{
    display: flow-root;
}

#main-menu .columns > .inner{
    display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap;
    margin: -1.5rem;
}

#main-menu .menu{
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

#main-menu .menu li{
    margin: 0;
    padding: 0;
    position: relative;
    transition: height 0.3s;
}

#main-menu .menu a{
    display: inline-flex; align-items: center;
    line-height: 1.2em;
    padding: 1.5rem;
    font-weight: 400;
    color: currentColor;
}

#main-menu .menu a:hover,
#main-menu .menu a:focus{
    color: var(--blue);
	text-decoration: none;
}

#main-menu .menu .menu-item-has-children > a::after{
    content: "\e81b";
    font-family: icon-font;
    margin-left: 0.5rem;
}

#main-menu .menu .sub-menu{
    position: absolute; top: 100%; left: 0; z-index: 1;
    width: 20rem;
    list-style: none;
    margin: 0;
    padding: 0;
    border-radius: 1rem;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s linear 0s, visibility 0s linear 0.2s;
}

#main-menu .menu li.open > .sub-menu{
    visibility: inherit;
    opacity: 1;
    transition: opacity 0.2s linear 0s;
}

#main-menu .menu li:last-child > .sub-menu{
    left: auto;
    right: 1.5rem;
}

#main-menu .menu .sub-menu li{
    background-color: var(--grey);
}

#main-menu .basket{
	padding: 1.5rem;
}

#main-menu .basket a{
	display: inline-flex; justify-content: center; align-items: center;
	padding: 1.5rem 2rem;
	box-sizing: border-box;
	border-radius: 1rem;
	text-align: center;
    background-color: var(--grey);
    color: currentColor;
    font-weight: 400;
}

#main-menu .basket a:hover,
#main-menu .basket a:focus{
    text-decoration: none;
    color: var(--blue);
}

#main-menu .basket a .icon-font{
    margin-right: 1rem;
}

#main-menu .shop{
	padding: 1.5rem;
}

#main-menu .contact{
    display: flow-root;
    margin-top: 3rem;
}

#main-menu .contact ul{
    display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap;
    list-style: none;
    margin: -1.5rem;
    padding: 0;
}

#main-menu .contact li{
    margin: 0;
    padding: 1.5rem;
}

#main-menu .contact a{
    display: block;
    margin: -1rem;
    padding: 1rem;
    font-size: 2rem;
    line-height: 1em;
    color: var(--blue);
}

#main-menu .contact a:hover,
#main-menu .contact a:focus{
    text-decoration: none;
    color: var(--cyan);
}

#main-menu .close-button{
    display: none;
}

@media screen and (max-width: 90em) {
    #main-menu .open-button{
        display: block;
        margin: 0 0 0 auto;
        padding: 1rem;
        border: 0;
        outline: 0;
        font-size: 3rem;
        line-height: 1em;
        background-color: transparent;
        color: currentColor;
        cursor: pointer;
    }
    #main-menu .open-button:hover,
    #main-menu .open-button:focus{
        color: var(--blue);
    }
    #main-menu .open-button:focus-visible{
        outline: 0.2rem solid var(--focus-color);
    }
	#main-menu .columns > .inner{
		justify-content: flex-start;
	}
    #main-menu .main-menu{
        visibility: hidden;
        position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 1;
        transition: background-color 0.4s, visibility 0s linear 0.4s;
    }
    #main-menu.open .main-menu{
        visibility: inherit;
        background-color: rgba(0, 0, 0, 0.7);
        transition: background-color 0.4s;
    }
    #main-menu .focus-area{
        display: block;
        position: absolute; top: 0; bottom: 0; left: 100%;
        width: 100%;
        max-width: 30rem;
        margin: 0;
        outline: 0;
        overflow: auto;
        background-color: #ffffff;
        transition: transform 0.4s;
    }
    #main-menu.open .focus-area{
        transform: translateX(-100%);
    }
    #main-menu .focus-area > .inner{
        margin: 5rem 0;
        padding: 0 3rem;
    }
    #main-menu .menu{
        width: 100%;
        flex-direction: column;
    }
    #main-menu .menu li{
        overflow: hidden;
    }
    #main-menu .menu .sub-menu{
        position: static;
        width: auto;
        height: 0;
        padding-left: 1.5rem;
        border-radius: 0;
        box-shadow: none;
        opacity: 1;
        overflow: visible;
        transition: visibility 0s linear 0.3s;
    }
    #main-menu .menu li.open > .sub-menu{
        height: auto;
        transition: none;
    }

    #main-menu .menu .sub-menu li{
        background-color: transparent;
    }
    #main-menu .contact ul{
        justify-content: flex-start;
    }
    #main-menu .close-button{
        display: block;
        position: absolute; top: 1rem; right: 1rem;
        margin: 0;
        padding: 1rem;
        border: 0;
        outline: 0;
        font-size: 2rem;
        line-height: 1em;
        background-color: transparent;
        color: currentColor;
        cursor: pointer;
    }
    #main-menu .close-button:hover,
    #main-menu .close-button:focus{
        color: var(--blue);
    } 
}

@media screen and (max-width: 30em) {
	#main-menu .focus-area{
		max-width: none;
	}
}

/* TRAINING */
#training .header .content{
	max-width: 100rem;
}

#training .course-types{
    margin-top: 20rem;
    display: flex; flex-direction: column-reverse;
}

#training .course-types > .inner{
    width: 100%;
    margin-top: -20rem;
}

#training .footer{
    text-align: center;
    overflow: hidden;
}

#training .footer .heading{
    margin: 0;
    text-align: center;
    font-size: min(6.66vw, 12rem);
    line-height: 0;
    line-height: 1em;
    margin-bottom: -0.25em;
    color: #ffffff;
    opacity: 0.2;
}

#training .columns{
    display: flow-root;
}

#training .columns > .inner{
    display: flex; flex-wrap: wrap;
    margin: -2rem;
}

#training .column{
    width: 33.33%;
    padding: 2rem;
    box-sizing: border-box;
}

#training article{
    display: flow-root;
    height: 100%;
    border-radius: 2rem;
    box-shadow: 0 0 2rem rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
}

#training article > .inner{
    margin: 2rem 0;
    padding: 0 2rem;
}

#training article .image{
    overflow: hidden;
    border-radius: 1rem;
    position: relative;
	background-color: var(--grey);
}

#training article .image::before{
    content: "";
    display: block;
    padding-bottom: 75%;
}

#training article .image img{
    position: absolute; top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#training article .content{
	margin: 3rem 0;
}

#training article .title a{
    color: currentColor;
    font-weight: 400;
}

#training article .title a:hover,
#training article .title a:focus{
    text-decoration: none;
    color: var(--link-color);
}

#training article .title a::before{
    content: "";
    display: block;
    position: absolute; top: 0; bottom: 0; left: 0; right: 0;
}

#training article .accreditation{
    position: absolute; top: 5rem; right: 5rem;
    width: 15rem;
    padding: 1rem 5rem;
    text-align: center;
    text-transform: uppercase;
    transform-origin: 50% 0;
    transform: translateX(50%) rotate(45deg);
	background: var(--gradient);
	color: #ffffff;
    box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.2);
}

#training article.open .accreditation{
	background: var(--cyan);
	color: #000000;
}

#training article.private .accreditation{
	background: var(--blue);
}

#training article.face-to-face .accreditation{
	background: var(--pink);
}


#training .more{
    text-align: center;
}

@media screen and (max-width: 75em) {
    #training .column{
        width: 100%;
    }
}

/* TAILORED TRAINING */
#tailored-training{
    display: flow-root;
}

#tailored-training .dots-top{
    display: block;
    max-width: 50%;
    margin: 5rem 0 5rem auto;
}

#tailored-training .tailored-training{
    display: flow-root;
    margin: 5rem auto;
}

#tailored-training .tailored-training > .inner{
    display: flex; flex-wrap: wrap;
    margin: -1.5rem -2rem;
}

#tailored-training .image{
    width: 33.33%;
    margin: -1.5rem 0;
    text-align: center;
}

#tailored-training .content{
    width: 66.66%;
    margin: -1.5rem 0;
}

#tailored-training .image > .inner,
#tailored-training .content > .inner{
    margin: 3rem 0;
    padding: 0 2rem;
}

#tailored-training .columns{
    display: flow-root;
}

#tailored-training .columns > .inner{
    display: flex; flex-wrap: wrap;
    margin: -1.5rem -2rem;
}

#tailored-training .column{
    width: 50%;
    margin: -1.5rem 0;
}

#tailored-training .column > .inner{
    max-width: 45rem;
    margin: 3rem 0;
    padding: 0 2rem;
}

#tailored-training .dots-bottom{
    display: block;
    max-width: 50%;
    margin: 5rem auto 5rem 0;
}

@media screen and (max-width: 75em) {
    #tailored-training .image,
    #tailored-training .content{
        width: 100%;
    }
}

@media screen and (max-width: 45em) {
    #tailored-training .column{
        width: 100%;
    }
    #tailored-training .column > .inner{
        max-width: none;
    }
}

/* ABOUT */
#about .columns{
    display: flow-root;
}

#about .columns > .inner{
    display: flex; flex-wrap: wrap;
    margin: -1.5rem -2rem;
}

#about .column{
    width: 33.33%;
    margin: -1.5rem 0;
}

#about .column > .inner{
    max-width: 45rem;
    margin: 3rem 0;
    padding: 0 2rem;
}

@media screen and (max-width: 75em) {
    #about .column{
        width: 100%;
    }
	#about .column > .inner{
		max-width: none;
	}
}

/* LATEST NEWS */
#latest-news{
    display: flex;
    flex-direction: column-reverse;
}

#latest-news > .inner{
    width: 100%;
}

#latest-news .footer{
    text-align: center;
    overflow: hidden;
}

#latest-news .footer .heading{
    margin: 0;
    text-align: center;
    font-size: min(6.66vw, 12rem);
    line-height: 0;
    line-height: 1em;
    margin-bottom: -0.25em;
    color: #ffffff;
    opacity: 0.2;
}

#latest-news .columns{
    display: flow-root;
    margin: 5rem 0;
}

#latest-news .columns > .inner{
    display: flex; flex-wrap: wrap;
    margin: -2.5rem -2rem;
}

#latest-news .column{
    width: 33.33%;
    margin: -0.5rem 0;
}

#latest-news .column > .inner{
    max-width: 45rem;
    margin: 3rem 0;
    padding: 0 2rem;
}

#latest-news article{
    position: relative;
}

#latest-news article .image{
    margin: 2rem 0;
    overflow: hidden;
    border-radius: 1rem;
    position: relative;
	background-color: rgba(0,0,0,0.1);
}

#latest-news article .image::before{
    content: "";
    display: block;
    padding-bottom: 75%;
}

#latest-news article .image img{
    position: absolute; top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#latest-news article .title{
    margin: 1rem 0;
}

#latest-news article .title a{
    color: currentColor;
    font-weight: 400;
}

#latest-news article .title a:hover,
#latest-news article .title a:focus{
    text-decoration: none;
    color: var(--link-color);
}

#latest-news article .title a::before{
    content: "";
    display: block;
    position: absolute; top: 0; bottom: 0; left: 0; right: 0;
}

#latest-news article .date{
	display: block;
	margin: 2rem 0;
    font-weight: 700;
}

#latest-news .more{
    text-align: center;
}

@media screen and (max-width: 75em) {
    #latest-news .column{
        width: 100%;
    }
    #latest-news .column > .inner{
        max-width: none;
    }
}

/* WHO WE ARE */
#who-we-are{
    max-width: 140rem;
}

/* OUR VALUES */
#our-values{
    display: flex;
    background-color: var(--green);
    color: #ffffff;
    --link-color: var(--cyan);
}

#our-values .background{
    align-self: flex-end;
    width: 100%;
    margin-right: -100%;
    text-align: right;
}

#our-values .overlay{
    width: 100%;
    align-self: center;
}

#our-values .dots-top{
    display: block;
    max-width: 50%;
    margin: 5rem 0 5rem auto;
}

#our-values .our-values{
    display: flow-root;
    margin: 5rem auto;
}

#our-values .our-values > .inner{
    display: flex; align-items: center; flex-wrap: wrap;
    margin: -2.5rem -2rem;
}

#our-values .content{
    width: 66.66%;
    margin: -0.5rem 0;
}

#our-values .content > .inner{
    margin: 3rem 0;
    padding: 0 2rem;
}

#our-values .content .columns{
    display: flow-root;
}

#our-values .content .columns > .inner{
    display: flex; flex-wrap: wrap;
    margin: -1.5rem -2rem;
}

#our-values .content .column{
    width: 50%;
    margin: -1.5rem 0;
}

#our-values .content .column > .inner{
    max-width: 45rem;
    margin: 3rem 0;
    padding: 0 2rem;
}

#our-values .values{
    list-style: none;
    margin: 3rem 0;
    padding: 0;
}

#our-values .values li{
    display: flex;
    margin: 3rem 0;
    padding: 0;
    font-weight: 700;
}

#our-values .values .number{
    width: 2em;
    flex-shrink: 0;
    font-weight: 400;
}

#our-values .statistics{
    width: 33.33%;
    margin: -0.5rem 0;
    text-align: center;
}

#our-values .statistics > .inner{
    margin: 3rem 0;
    padding: 0 2rem;
}

#our-values .statistic .value{
    color: var(--pink);
}

#our-values .dots-bottom{
    display: block;
    max-width: 50%;
    margin: 5rem auto 5rem 0;
}

@media screen and (max-width: 75em) {
    #our-values .content{
        width: 50%;
    }
    #our-values .content .column{
        width: 100%;
    }
    #our-values .statistics{
        width: 50%;
    }
}

@media screen and (max-width: 45em) {
    #our-values .content{
        width: 100%;
    }
    #our-values .statistics{
        width: 100%;
    }
}

/* KIND WORDS */
#kind-words{
    text-align: center;
}

#kind-words .header{
    margin-bottom: 3rem;
}

#kind-words .footer{
    margin-top: 3rem;
}

/* TESTIMONIALS */
#testimonials {
    margin: 5rem 0;
    position: relative;
    z-index: 0;
	text-align: center;
}

#testimonials .slider {
    position: relative;
    margin: -3rem 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

#testimonials .slider.swiper-container {
    overflow: hidden
}

#testimonials .slides {
    display: flex;
    align-items: center;
    height: 100%;
}

#testimonials .slide {
    width: 100%;
    flex-shrink: 0;
    height: auto;
}

#testimonials .slide > .inner{
    margin: 3rem auto;
    padding: 0 10rem;
    max-width: 140rem;
}

#testimonials .slide .logo{
	max-width: 15rem;
	margin: 3rem auto;
	position: relative;
}

#testimonials .slide .logo::before{
	content: "";
	display: block;
	padding-bottom: 50%;
}

#testimonials .slide .logo img{
	position: absolute; top: 0; left: 0;
	width: 100%;
	height: 100%;
	object-fit: scale-down;
}

#testimonials .slide .name{
    font-weight: 700;
}

#testimonials .slide blockquote{
    margin: 3rem 0;
}

#testimonials .nav-button {
    position: absolute; top: 0; bottom: 0; z-index: 1;
    width: 1em;
    height: 1em;
    margin: auto;
    padding: 0.5em;
    border: 0;
    outline: 0;
    text-align: center;
    font-size: 5rem;
    line-height: 1em;
    cursor: pointer;
    color: currentColor
}

#testimonials .nav-button.prev {
    left: 0
}

#testimonials .nav-button.next {
    right: 0
}

#testimonials .nav-button:hover,
#testimonials .nav-button:focus{
    color: var(--link-color)
}

#testimonials .nav-button.swiper-button-disabled {
    display: none
}

@media screen and (max-width: 75em) {
    #testimonials .slide > .inner{
        padding: 0 5rem;
    }
    #testimonials .nav-button{
        font-size: 2.5rem;
    }
}

/* OUR TEAM */
#our-team{
    display: flow-root;
    text-align: center;
}

#our-team .columns{
    display: flow-root;
    margin: 5rem 0;
}

#our-team .columns > .inner{
    display: flex; justify-content: center; flex-wrap: wrap;
    margin: -2.5rem -2rem;
}

#our-team .column{
    width: 33.33%;
    margin: -0.5rem;
    text-align: left;
}

#our-team .column > .inner{
    max-width: 40rem;
    margin: 3rem auto;
    padding: 0 2rem;
}

#our-team .column .photo{
    max-width: 30rem;
    margin: 3rem auto;
    border-radius: 50%;
    border: 1.5rem solid #ffffff;
	background-color: var(--grey);
    box-shadow: 0 0 2rem rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
}

#our-team .column .photo::before{
    content: "";
    display: block;
    padding-bottom: 100%;
}

#our-team .column .photo img{
    position: absolute; top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#our-team .column .name{
    margin: 0;
    font-weight: 700;
}

#our-team .column .linkedin{
    margin: 1rem 0;
}

#our-team .column .linkedin a{
    display: inline-block;
    padding: 1rem;
    margin: -1rem;
    font-size: 2.5rem;
    line-height: 1em;
    color: var(--blue);
}

#our-team .column .linkedin a:hover,
#our-team .column .linkedin a:focus{
    text-decoration: none;
    color: var(--cyan);
}

@media screen and (max-width: 75em) {
    #our-team .column{
        width: 50%;
    }
}

@media screen and (max-width: 45em) {
    #our-team .column{
        width: 100%;
    }
	#our-team .column > .inner{
		max-width: none;
	}
}

/* DIRECTORS */
#directors{
    display: flow-root;
    text-align: center;
}

#directors .columns{
    display: flow-root;
    margin: 5rem 0;
}

#directors .columns > .inner{
    display: flex; justify-content: center; flex-wrap: wrap;
    margin: -2.5rem -2rem;
}

#directors .column{
    width: 33.33%;
    margin: -0.5rem;
}

#directors .column > .inner{
    max-width: 40rem;
    margin: 3rem auto;
    padding: 0 2rem;
}

#directors .column .photo{
    max-width: 30rem;
    margin: 3rem auto;
    border-radius: 50%;
    border: 1.5rem solid #ffffff;
	background-color: var(--grey);
    box-shadow: 0 0 2rem rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
}

#directors .column .photo::before{
    content: "";
    display: block;
    padding-bottom: 100%;
}

#directors .column .photo img{
    position: absolute; top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#directors .column .name{
    margin: 0;
    font-weight: 700;
}

#directors .column .linkedin{
    margin: 1rem 0;
}

#directors .column .linkedin a{
    display: inline-block;
    padding: 1rem;
    margin: -1rem;
    font-size: 2.5rem;
    line-height: 1em;
    color: #ffffff;
}

#directors .column .linkedin a:hover,
#directors .column .linkedin a:focus{
    text-decoration: none;
    color: var(--blue);
}

@media screen and (max-width: 75em) {
    #directors .column{
        width: 50%;
    }
}

@media screen and (max-width: 45em) {
    #directors .column{
        width: 100%;
    }
	#directors .column > .inner{
		max-width: none;
	}
}

/* OUR PROJECTS */
#our-projects .header > .inner{
    max-width: 120rem;
}

#our-projects .statistics > .inner{
    display: flex; justify-content: center; flex-wrap: wrap;
    margin: -2.5rem -2rem;
}

#our-projects .statistics .column{
    width: 33.33%;
    margin: -0.5rem 0;
}

#our-projects .statistics .column > .inner{
    margin: 3rem 0;
    padding: 0 2rem;
}

#our-projects .statistics .column:nth-of-type(1) .statistic .value{
    color: var(--cyan);
}

#our-projects .statistics .column:nth-of-type(2) .statistic .value{
    color: var(--blue);
}

#our-projects .statistics .column:nth-of-type(3) .statistic .value{
    color: var(--green);
}

#our-projects article{
    display: flex; flex-wrap: wrap;
}

#our-projects article:nth-of-type(even){
    flex-direction: row-reverse;
}

#our-projects article .image{
    width: 50%;
	min-height: 100vh;
}

#our-projects article .content{
	align-self: center;
    width: 50%;
}

#our-projects article .content > .block{
    max-width: 60rem;
}

#our-projects article .image img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media screen and (max-width: 75em) {
    #our-projects article .image,
    #our-projects article .content{
        width: 100%;
		min-height: 0;
    }
    #our-projects article .content .block{
        max-width: none;
    }
}

@media screen and (max-width: 60em) {
    #our-projects .statistics .column{
        width: 100%;
    }
}

/* NEWS */
#news{
    display: flow-root;
}

#news article{
    max-width: 140rem;
	position: relative;
}

#news article > .inner{
    display: flex; flex-wrap: wrap;
    margin: -1.5rem -2rem;
}

#news article .image{
    width: 50%;
    flex-grow: 1;
    margin: -1.5rem 0;
}

#news article .content{
    align-self: flex-end;
    width: 50%;
    max-width: 60rem;
    margin: -1.5rem 0;
}

#news article .image > .inner,
#news article .content > .inner{
    margin: 3rem 0;
    padding: 0 2rem;
}

#news article .thumbnail{
    position: relative;
    border-radius: 1.5rem;
    overflow: hidden;
	background-color: rgba(0,0,0,0.1);
}

#news article .thumbnail::before{
    content: "";
    display: block;
    padding-bottom: 66.66%;
}

#news article .thumbnail img{
    position: absolute; top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#news article .title{
    margin: 1rem 0;
}

#news article .date{
	display: block;
	margin: 2rem 0;
    font-weight: 700;
}

#news article a::before{
	content: "";
	display: block;
	position: absolute; top: 0; bottom: 0; left: 0; right: 0;
}

#news .more{
    text-align: center;
}

@media screen and (max-width: 60em) {
    #news article .content{
        width: 100%;
		max-width: none;
    }
}

/* CONTENT */
#content .row{
	display: flow-root;
}

#content .row.light{
	display: block;
	background: transparent;
}

#content .two-column-content{
	display: flow-root;
}

#content .two-column-content > .inner{
	display: flex; flex-wrap: wrap;
	margin: -2.5rem -2rem;
}

#content .two-column-content .column{
	width: 50%;
	margin: -0.5rem 0;
}

#content .two-column-content .column > .inner{
	max-width: 70rem;
	margin: 3rem 0;
	padding: 0 2rem;
}

#content .row > .gallery{
	margin: 0;
}

#content .gallery-content{
	display: flex; flex-wrap: wrap;
}

#content .gallery-content.reversed{
	flex-direction: row-reverse;
}

#content .gallery-content .images{
	width: 50%;
}

#content .gallery-content .images .gallery{
	height: 100%;
	margin: 0;
}

#content .gallery-content .content{
	width: 50%;
	align-self: center;
}

#content .gallery-content .content .block {
    max-width: 60rem;
}

@media screen and (max-width: 60em){
	#content .two-column-content .column{
		width: 100%;
	}
	#content .gallery-content .images{
		width: 100%;
	}
	#content .gallery-content .content{
		width: 100%;
	}
}

/* RELATED NEWS */
#related-news{
    display: flex;
    flex-direction: column-reverse;
}

#related-news > .inner{
    width: 100%;
}

#related-news .footer{
    text-align: center;
    overflow: hidden;
}

#related-news .footer .heading{
    margin: 0;
    text-align: center;
    font-size: min(6.66vw, 12rem);
    line-height: 0;
    line-height: 1em;
    margin-bottom: -0.25em;
    color: #ffffff;
    opacity: 0.2;
}

#related-news .columns{
    display: flow-root;
    margin: 5rem 0;
}

#related-news .columns > .inner{
    display: flex; flex-wrap: wrap;
    margin: -2.5rem -2rem;
}

#related-news .column{
    width: 33.33%;
    margin: -0.5rem 0;
}

#related-news .column > .inner{
    max-width: 45rem;
    margin: 3rem 0;
    padding: 0 2rem;
}

#related-news article{
    position: relative;
}

#related-news article .image{
    margin: 2rem 0;
    overflow: hidden;
    border-radius: 1rem;
    position: relative;
	background-color: rgba(0,0,0,0.1);
}

#related-news article .image::before{
    content: "";
    display: block;
    padding-bottom: 75%;
}

#related-news article .image img{
    position: absolute; top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#related-news article .title{
    margin: 1rem 0;
}

#related-news article .title a{
    color: currentColor;
    font-weight: 400;
}

#related-news article .title a:hover,
#related-news article .title a:focus{
    text-decoration: none;
    color: var(--link-color);
}

#related-news article .title a::before{
    content: "";
    display: block;
    position: absolute; top: 0; bottom: 0; left: 0; right: 0;
}

#related-news article .date{
	display: block;
	margin: 2rem 0;
    font-weight: 700;
}

#related-news .more{
    text-align: center;
}

@media screen and (max-width: 75em) {
    #related-news .column{
        width: 100%;
    }
    #related-news .column > .inner{
        max-width: none;
    }
}

/* COURSES */
#courses{
	overflow-anchor: none;
}

#courses .header .content{
	max-width: 100rem;
}

#courses .header .course-types{
	display: flow-root;
	margin: 3rem 0;
}

#courses .header .course-types > .inner{
	display: flex; flex-wrap: wrap;
	margin: -1.5rem -2rem;
}

#courses .header .course-type{
	width: 33.33%;
	margin: -1.5rem 0;
}

#courses .header .course-type > .inner{
	max-width: 50rem;
	margin: 3rem 0;
	padding: 0 2rem;
}

#courses .header .columns{
	display: flow-root;
	margin: 5rem 0;
}

#courses .header .columns > .inner{
	display: flex; align-items: flex-end; flex-wrap: wrap;
	margin: -1.5rem -2rem;
}

#courses .header .left{
	width: 66.66%;
	margin: -1.5rem 0;
}

#courses .header .right{
	width: 33.33%;
	margin: -1.5rem 0;
	text-align: right;
}

#courses .header .left > .inner,
#courses .header .right > .inner{
	margin: 3rem 0;
	padding: 0 2rem;
}

#courses .header form{
	display: flow-root;
}

#courses .header form .fields{
	display: flex; flex-wrap: wrap;
	margin: -2rem;
}

#courses .header form .field{
	width: 50%;
	padding: 2rem;
	box-sizing: border-box;
}

#courses .header form .select{
	display: block;
	position: relative;
}

#courses .header form .select .icon-font{
	position: absolute; top: 0; bottom: 0; right: 0;
	width: 4rem;
	height: 1em;
	text-align: center;
	font-size: 2rem;
	line-height: 1em;
	margin: auto;
	pointer-events: none;
}

#courses .header form .select select{
    appearance: none;
	display: block;
	width: 100%;
	margin: 0;
	padding: 1.5rem 4rem 1.5rem 1.5rem;
	box-sizing: border-box;
	border: 0.1rem solid var(--grey);
	outline: 0;
	border-radius: 1rem;
	font-family: default-font, sans-serif;
	font-size: 1.6rem;
	line-height: 2rem;
	background-color: var(--grey);
	color: #000000;
	cursor: pointer;
}

#courses .header form .select select:focus{
	border-color: var(--cyan);
}

#courses .header form input{
	display: block;
	width: 100%;
	margin: 0;
	padding: 1.5rem;
	box-sizing: border-box;
	border: 0.1rem solid var(--grey);
	outline: 0;
	border-radius: 1rem;
	font-family: default-font, sans-serif;
	font-size: 1.6rem;
	line-height: 2rem;
	background-color: var(--grey);
	color: #000000;
}

#courses .header form input:focus{
	border-color: var(--cyan);
}

#courses .courses.loading{
	opacity: 0.2;
	pointer-events: none;	
}

#courses .courses .bottom{
    margin-top: 20rem;
    display: flex; flex-direction: column-reverse;
}

#courses .courses .bottom > .inner{
    width: 100%;
    margin-top: -20rem;
}

#courses .courses .footer{
    text-align: center;
    overflow: hidden;
}

#courses .courses .footer .heading{
    margin: 0;
    text-align: center;
    font-size: min(6.66vw, 12rem);
    line-height: 0;
    line-height: 1em;
    margin-bottom: -0.25em;
    color: #ffffff;
    opacity: 0.2;
}

#courses .courses .page{
    display: flow-root;
	margin: 4rem 0;
}

#courses .courses .columns{
    display: flex; flex-wrap: wrap;
    margin: -2rem;
}

#courses .courses .column{
    width: 33.33%;
    padding: 2rem;
    box-sizing: border-box;
}

#courses article{
    display: flow-root;
    height: 100%;
    border-radius: 2rem;
    box-shadow: 0 0 2rem rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
}

#courses article > .inner{
    margin: 2rem 0;
    padding: 0 2rem;
}

#courses article .image{
    overflow: hidden;
    border-radius: 1rem;
    position: relative;
}

#courses article .image::before{
    content: "";
    display: block;
    padding-bottom: 75%;
}

#courses article .image img{
    position: absolute; top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#courses article .content{
	margin: 3rem 0;
}

#courses article .title a{
    color: currentColor;
    font-weight: 400;
}

#courses article .title a:hover,
#courses article .title a:focus{
    text-decoration: none;
    color: var(--link-color);
}

#courses article .title a::before{
    content: "";
    display: block;
    position: absolute; top: 0; bottom: 0; left: 0; right: 0;
}

#courses article .duration{
	display: flex; align-items: center;
	font-weight: 700;
}

#courses article .duration .icon-font{
	margin-right: 1rem;
	font-size: 2.5rem;
	line-height: 1em;
	color: var(--cyan);
}

#courses article .accreditation{
    position: absolute; top: 5rem; right: 5rem;
    width: 15rem;
    padding: 1rem 5rem;
    text-align: center;
    text-transform: uppercase;
    transform-origin: 50% 0;
    transform: translateX(50%) rotate(45deg);
	background: var(--gradient);
	color: #ffffff;
    box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.2);
}

#courses article.open .accreditation{
	background: var(--cyan);
	color: #000000;
}

#courses article.private .accreditation{
	background: var(--blue);
}

#courses article.face-to-face .accreditation{
	background: var(--pink);
}

#courses .courses .more{
	margin: 5rem 0;
    text-align: center;
}

@media screen and (max-width: 75em) {
	#courses .header .course-type{
		width: 100%;
	}
	#courses .header .course-type > .inner{
		max-width: none;
	}
    #courses .header .left{
        width: 100%;
    }
    #courses .header .right{
        width: 100%;
		text-align: inherit;
    }
    #courses .courses .column{
        width: 50%;
    }
}

@media screen and (max-width: 45em) {
	#courses .header form .field{
		width: 100%;
	}
    #courses .courses .column{
        width: 100%;
    }
}

/* BOOK */
#book{
	overflow: hidden;
	transition: height 0.5s;
}

#book .columns{
	display: flow-root;
}

#book .columns > .inner{
	display: flex; flex-wrap: wrap;
	margin: -1.5rem -2rem;
}

#book .left{
	width: 33.33%;
	margin: -1.5rem 0;
}

#book .right{
	width: 66.66%;
	margin: -1.5rem 0;
}

#book .left > .inner{
	max-width: 40rem;
	margin: 3rem 0;
	padding: 0 2rem;
}

#book .right > .inner{
	max-width: 80rem;
	margin: 3rem 0;
	padding: 0 2rem;
}

#book .price{
	font-weight: 700;
	font-size: 2.2rem;
	line-height: 1.2em;
}

#book input{
	display: block;
	width: 100%;
	margin: 0;
	padding: 1rem;
	box-sizing: border-box;
	border: 0.1rem solid transparent;
	outline: 0;
	border-radius: 0;
	font-family: default-font, sans-serif;
	font-size: 1.6rem;
	line-height: 2rem;
	background-color: #ffffff;
	color: #000000;
}

#book input:focus{
    border-color: var(--cyan);
}

#book select{
    appearance: none;
	display: block;
	width: 100%;
	margin: 0;
	padding: 1rem 3rem 1rem 1rem;
	box-sizing: border-box;
	border: 0.1rem solid transparent;
	outline: 0;
	border-radius: 0;
	font-family: default-font, sans-serif;
	font-size: 1.6rem;
	line-height: 2rem;
	background-color: #ffffff;
	color: #000000;
	background-image: url("../img/select.svg");
	background-position: right center;
	background-repeat: no-repeat;
	cursor: pointer;
}

#book select:focus{
    border-color: var(--cyan);
}

#book .course-types{
	display: flow-root;
}

#book .course-types > .inner{
	display: flex;
	margin: -3rem 0;
}

#book .course-type{
	width: 100%;
	flex-shrink: 0;
	margin-right: -100%;
	height: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s, visibility 0s 0.25s;
}

#book .course-type.active{
	height: auto;
	opacity: 1;
	visibility: inherit;
	transition: opacity 0.25s 0.25s, visibility 0s 0.25s;
}

#book .course-type > .inner{
	margin: 3rem 0;
}

#book .open .variations th,
#book .open .variations td{
	font-weight: 400;
    display: block;
    padding: 0;
    text-align: left;
}

#book .open .single_variation{
	padding-top: 1rem;
}

#book .open .single_variation .stock{
	margin: 0;
}

#book .open .woocommerce-variation-add-to-cart-disabled{
	opacity: 0.5;
	pointer-events: none;
}

#book .open .quantity{
	display: flex;
	margin: 2rem 0;
}

#book .open .quantity input{
	width: 5rem;
	text-align: center;
}

#book .open .quantity input::-webkit-outer-spin-button,
#book .open .quantity input::-webkit-inner-spin-button {
    display: none;
}

#book .open .quantity button{
	width: 4rem;
	flex-shrink: 0;
    margin: 0;
	padding: 0;
	border: 0;
    outline: 0;
	text-align: center;
	font-family: default-font, sans-serif;
    font-weight: 400;
	font-size: 2rem;
	line-height: 1em;
	color: var(--button-text-color);
    background: var(--button-background);
	cursor:pointer;
}

#book .open .quantity button:hover,
#book .open .quantity button:focus{
	color: var(--button-hover-text-color);
    background: var(--button-hover-background);
}

#book .open .quantity button:disabled{
    background: #dddddd;
    color: #aaaaaa;
	cursor: default;
	pointer-events: none;
}

#book .open .fields{
	margin: 2rem 0;
	display: flow-root;
}

#book .open .attendees{
	margin: -0.5rem;
}

#book .open .attendee{
	display: flex; flex-wrap: wrap;
}

#book .open .attendee .field{
	width: 50%;
	padding: 0.5rem;
	box-sizing: border-box;
}

#book .private .fields{
	display: flow-root;
	margin: 2rem 0;
}

#book .private .fields > .inner{
    display: flex; flex-wrap: wrap;
	margin: -1rem;
}

#book .private .field{
	width: 50%;
	padding: 1rem;
	box-sizing: border-box;
}

#book .face-to-face .fields{
	display: flow-root;
	margin: 2rem 0;
}

#book .face-to-face .fields > .inner{
    display: flex; flex-wrap: wrap;
	margin: -1rem;
}

#book .face-to-face .field{
	width: 50%;
	padding: 1rem;
	box-sizing: border-box;
}

@media screen and (max-width: 60em) {
	#book .left{
		width: 50%;
	}
	#book .right{
		width: 100%;
	}
}

@media screen and (max-width: 45em) {
	#book .left{
		width: 100%;
	}
	#book .left > .inner{
		max-width: none;
	}
	#book .private .field{
		width: 100%;
	}
	#book .face-to-face .field{
		width: 100%;
	}
}

/* CONTACT */
#contact .contact{
    list-style: none;
    margin: 3rem 0;
    padding: 0;
}

#contact .contact li{
    margin: 2rem 0;
    padding: 0;
}

#contact .contact a{
    display: inline-flex; align-items: center;
    color: inherit;
}

#contact .contact a:hover,
#contact .contact a:focus{
    text-decoration: none;
    color: var(--blue);
}

#contact .contact a .icon-font{
    width: 1em;
    margin-right: 1rem;
    font-size: 2.5rem;
    line-height: 1em;
    color: var(--blue);
}

#contact .address a{
    color: currentColor;
}

#contact .address a:hover,
#contact .address a:focus{
    text-decoration: none;
    color: var(--blue);
}

#contact .social ul{
    display: flex; align-items: center; flex-wrap: wrap;
    list-style: none;
    margin: -1.5rem;
    padding: 0;
}

#contact .social li{
    margin: 0;
    padding: 1.5rem;
}

#contact .social a{
    display: block;
    margin: -1rem;
    padding: 1rem;
    font-size: 2rem;
    line-height: 1em;
    color: var(--blue);
}

#contact .social a:hover,
#contact .social a:focus{
    text-decoration: none;
    color: var(--cyan);
}

/* FOOTER */
#footer .footer-logo{
    text-align: center;
}

#footer .footer{
    display: flex;
    background-image: linear-gradient(170deg, #3c4777 15%, #49666d 85%);
	background-attachment: fixed;
    color: #ffffff;
    --link-color: var(--cyan);
}

#footer .footer .background{
    align-self: flex-end;
    width: 100%;
    margin-right: -100%;
    text-align: right;
}

#footer .footer .background > .block{
    margin-bottom: 0;
}

#footer .footer .overlay{
    width: 100%;
    align-self: center;
}

#footer .top{
	display: flow-root;
	margin: 5rem 0;
}

#footer .top > .inner{
    display: flex; flex-wrap: wrap;
	margin: -2.5rem -2rem;
}

#footer .links{
    width: 33.33%;
	max-width: 40rem;
	margin: -0.5rem 0;
}

#footer .links > .inner{
	margin: 3rem 0;
	padding: 0 2rem;
}

#footer .links .menu{
    list-style: none;
    margin: 3rem 0;
    padding: 0;
}

#footer .links .menu li{
    margin: 1rem 0;
    padding: 0;
}

#footer .links .menu a:hover,
#footer .links .menu a:focus{
    text-decoration: none;
    color: currentColor;
}

#footer .links .contact{
    display: flow-root;
    margin: 3rem 0;
}

#footer .links .contact ul{
    display: flex; align-items: center; flex-wrap: wrap;
    list-style: none;
    margin: -1.5rem;
    padding: 0;
}

#footer .links .contact li{
    margin: 0;
    padding: 1.5rem;
}

#footer .links .contact a{
    display: block;
    margin: -1rem;
    padding: 1rem;
    font-size: 2rem;
    line-height: 1em;
}

#footer .links .contact a:hover,
#footer .links .contact a:focus{
    text-decoration: none;
    color: currentColor;
}

#footer .forms{
    display: flex; flex-wrap: wrap;
    width: 66.66%;
	flex-grow: 1;
}

#footer .get-in-touch{
    width: 66.66%;
    margin: -0.5rem 0;
    padding-right: 2rem;
    box-sizing: border-box;
	position: relative;
}

#footer .get-in-touch::after{
	content: "";
	display: block;
	position: absolute; top: 3rem; bottom: 3rem; right: 0;
	width: 0.1rem;
	background-color: currentColor;
	opacity: 0.5;
}

#footer .get-in-touch > .inner{
    margin: 3rem 0;
    padding: 0 2rem;
}

#footer .get-in-touch .columns{
    display: flow-root;
    margin: 2rem 0;
}

#footer .get-in-touch .columns > .inner{
    display: flex; flex-wrap: wrap;
    margin: -1.5rem;
}

#footer .get-in-touch .column{
    width: 50%;
    margin: -1.5rem 0;
}

#footer .get-in-touch .column > .inner{
    margin: 3rem 0;
    padding: 0 1.5rem;
}

#footer .newsletter{
    width: 33.33%;
    margin: -0.5rem 0;
    padding-left: 2rem;
    box-sizing: border-box;
}

#footer .newsletter > .inner{
    margin: 3rem 0;
    padding: 0 2rem;
}

#footer form{
    margin: 3rem 0;
}

#footer form .field{
    display: block;
    margin: 2rem 0;
}

#footer form input,
#footer form textarea{
	display: block;
	width: 100%;
	margin: 0;
	padding: 1rem;
	box-sizing: border-box;
	border: 0.1rem solid transparent;
	outline: 0;
	border-radius: 0;
	font-family: default-font, sans-serif;
	font-size: 1.6rem;
	line-height: 2rem;
	background-color: #ffffff;
	color: #000000;
}

#footer form input:focus,
#footer form textarea:focus{
    border-color: var(--cyan);
}

#footer form textarea{
    height: 21.7rem;
}

#footer .bottom{
	display: flow-root;
	margin: 5rem 0;
}

#footer .bottom > .inner{
    display: flex; align-items: flex-end;
	margin: -1.5rem -2rem;
}

#footer .legal{
    flex-grow: 1;
	margin: -1.5rem 0;
}

#footer .legal > .inner{
    margin: 3rem 0;
	padding: 0 2rem;
}

#footer .credit{
	flex-shrink: 0;
	margin: -1.5rem 0;
}

#footer .credit > .inner{
    margin: 3rem 0;
	padding: 0 2rem;	
}

#footer .credit a:hover,
#footer .credit a:focus{
    filter: brightness(0) invert(1);
}

#footer .affiliates{
	max-width: 120rem;
}

#footer .affiliates ul{
    display: flex; justify-content: center; align-items: center; flex-wrap: wrap;
    list-style: none;
    margin: -1.5rem;
    padding: 0;
}

#footer .affiliates li{
	width: 33%;
	max-width: 15rem;
    margin: 0;
    padding: 1.5rem;
	box-sizing: border-box;
}

#footer .affiliates .logo{
	position: relative;
}

#footer .affiliates .logo::before{
	content: "";
	display: block;
	padding-bottom: 50%;
}

#footer .affiliates .logo img{
	position: absolute; top: 0; left: 0;
	width: 100%;
	height: 100%;
	object-fit: scale-down;
}

#footer .company{
    text-align: center;
}

@media screen and (max-width: 90em) {
    #footer .get-in-touch,
    #footer .newsletter{
        width: 50%;
    }
	#footer .get-in-touch form .column{
		width: 100%;
	}
}

@media screen and (max-width: 60em) {
    #footer .links{
        width: 100%;
		max-width: none;
    }
}

@media screen and (max-width: 45em) {
    #footer .get-in-touch,
    #footer .newsletter{
        width: 100%;
		padding: 0;
    }
	#footer .get-in-touch::after{
		content: "";
	}
	#footer .bottom > .inner{
		flex-wrap: wrap;
	}
}