@font-face {
    font-family: 'Euclid Circular A Light';
    src: url('../fonts/EuclidCircularA-Light.eot');
    src: url('../fonts/EuclidCircularA-Light.eot?#iefix') format('embedded-opentype'),
        url('../fonts/EuclidCircularA-Light.woff2') format('woff2'),
        url('../fonts/EuclidCircularA-Light.woff') format('woff'),
        url('../fonts/EuclidCircularA-Light.ttf') format('truetype'),
        url('../fonts/EuclidCircularA-Light.svg#../fonts/EuclidCircularA-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Euclid Circular A LightItalic';
    src: url('../fonts/EuclidCircularA-LightItalic.eot');
    src: url('../fonts/EuclidCircularA-LightItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/EuclidCircularA-LightItalic.woff2') format('woff2'),
        url('../fonts/EuclidCircularA-LightItalic.woff') format('woff'),
        url('../fonts/EuclidCircularA-LightItalic.ttf') format('truetype'),
        url('../fonts/EuclidCircularA-LightItalic.svg#../fonts/EuclidCircularA-LightItalic') format('svg');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Euclid Circular A';
    src: url('../fonts/EuclidCircularA-Regular.eot');
    src: url('../fonts/EuclidCircularA-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/EuclidCircularA-Regular.woff2') format('woff2'),
        url('../fonts/EuclidCircularA-Regular.woff') format('woff'),
        url('../fonts/EuclidCircularA-Regular.ttf') format('truetype'),
        url('../fonts/EuclidCircularA-Regular.svg#../fonts/EuclidCircularA-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'Euclid Circular A Italic';
    src: url('../fonts/EuclidCircularA-RegularItalic.eot');
    src: url('../fonts/EuclidCircularA-RegularItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/EuclidCircularA-RegularItalic.woff2') format('woff2'),
        url('../fonts/EuclidCircularA-RegularItalic.woff') format('woff'),
        url('../fonts/EuclidCircularA-RegularItalic.ttf') format('truetype'),
        url('../fonts/EuclidCircularA-RegularItalic.svg#../fonts/EuclidCircularA-RegularItalic') format('svg');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Euclid Circular A Medium';
    src: url('../fonts/EuclidCircularA-Medium.eot');
    src: url('../fonts/EuclidCircularA-Medium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/EuclidCircularA-Medium.woff2') format('woff2'),
        url('../fonts/EuclidCircularA-Medium.woff') format('woff'),
        url('../fonts/EuclidCircularA-Medium.ttf') format('truetype'),
        url('../fonts/EuclidCircularA-Medium.svg#../fonts/EuclidCircularA-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Euclid Circular A MediumItalic';
    src: url('../fonts/EuclidCircularA-MediumItalic.eot');
    src: url('../fonts/EuclidCircularA-MediumItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/EuclidCircularA-MediumItalic.woff2') format('woff2'),
        url('../fonts/EuclidCircularA-MediumItalic.woff') format('woff'),
        url('../fonts/EuclidCircularA-MediumItalic.ttf') format('truetype'),
        url('../fonts/EuclidCircularA-MediumItalic.svg#../fonts/EuclidCircularA-MediumItalic') format('svg');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Euclid Circular A Semibold';
    src: url('../fonts/EuclidCircularA-Semibold.eot');
    src: url('../fonts/EuclidCircularA-Semibold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/EuclidCircularA-Semibold.woff2') format('woff2'),
        url('../fonts/EuclidCircularA-Semibold.woff') format('woff'),
        url('../fonts/EuclidCircularA-Semibold.ttf') format('truetype'),
        url('../fonts/EuclidCircularA-Semibold.svg#../fonts/EuclidCircularA-Semibold') format('svg');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'Euclid Circular A SemiboldItalic';
    src: url('../fonts/EuclidCircularA-SemiboldItalic.eot');
    src: url('../fonts/EuclidCircularA-SemiboldItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/EuclidCircularA-SemiboldItalic.woff2') format('woff2'),
        url('../fonts/EuclidCircularA-SemiboldItalic.woff') format('woff'),
        url('../fonts/EuclidCircularA-SemiboldItalic.ttf') format('truetype'),
        url('../fonts/EuclidCircularA-SemiboldItalic.svg#../fonts/EuclidCircularA-SemiboldItalic') format('svg');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}



@font-face {
    font-family: 'Euclid Circular A Bold';
    src: url('../fonts/EuclidCircularA-Bold.eot');
    src: url('../fonts/EuclidCircularA-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/EuclidCircularA-Bold.woff2') format('woff2'),
        url('../fonts/EuclidCircularA-Bold.woff') format('woff'),
        url('../fonts/EuclidCircularA-Bold.ttf') format('truetype'),
        url('../fonts/EuclidCircularA-Bold.svg#../fonts/EuclidCircularA-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Euclid Circular A Bold Italic';
    src: url('../fonts/EuclidCircularA-BoldItalic.eot');
    src: url('../fonts/EuclidCircularA-BoldItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/EuclidCircularA-BoldItalic.woff2') format('woff2'),
        url('../fonts/EuclidCircularA-BoldItalic.woff') format('woff'),
        url('../fonts/EuclidCircularA-BoldItalic.ttf') format('truetype'),
        url('../fonts/EuclidCircularA-BoldItalic.svg#../fonts/EuclidCircularA-BoldItalic') format('svg');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

html, 
body {
    min-height: 100%;
    background-color: #FBFBFA;
    position: relative;
}

.menu-mobile-open .page-wrapper,
body.menu-mobile-open{
    height: 100dvh;
    min-height: auto;
}

body *{
    font-family: 'Euclid Circular A';
}

svg,object{
    overflow: visible;
}

p{
    letter-spacing: 0.02em;
}

a{
    text-decoration: none;
}

nav{
    height: 100%;
}

main{
    z-index: 2;
    background-color: #FBFBFA;
    position: relative;
}

.image{
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
}

/** font-weight **/

.font-w-300{
    font-family: 'Euclid Circular A Light';
}

/** color **/
.color-222222{
    color: #222222!important;
}

.color-939393{
    color: #939393!important;
}

.color-d6d6d6{
    color: #D6D6D6!important;
}

/** border-color **/
.border-939393{
    border-color: #FEE62F!important;
}


/** header **/
header{
    position: relative;
    z-index: 4;
}




body.menu-mobile-open #logoAWO *{
    fill: #D6D6D6;
}


header{
    transition: background-color 0.5s ease;
}

/** overlay **/
.overlay{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #FBFBFA;
    z-index: 2;
    opacity: 0.7;
    display: none;
    left: 0;
    top: 0;
}

section{
    position: relative;
}

.awo-slider-count{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    background: #222222;
   
}

.awo-slider-count span{
    flex: none;
    order: 0;
    flex-grow: 0;
    color: #FBFBFA;
    letter-spacing: 0.02em;
    text-align: center;
}

/** Wrapper Page **/


.main-content{
    padding-left: 2.793296089385475vw;;
    z-index: 2;
    position: relative;
    height: 100%;
}

.side-content{
    height: 100%;
    position: fixed!important;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 3;
    -webkit-transition: border-color 0.5s ease-out;
    -moz-transition: border-color 0.5s ease-out;
    -o-transition: border-color 0.5s ease-out;
    transition: border-color 0.5s ease-out;  
    border-right: solid 1px #FEE62F;
}


.side-content.menu-open{
    border-color: #939393;
}

/** Button **/
.btn-awo-dark{
    align-items: center;
    display: flex;
    letter-spacing: 0.02em;
    flex-direction: row;
    justify-content: center;
    background-color: #FBFBFA;
    color: #939393;
    text-decoration: none;
    border: 1px solid #939393;
    -webkit-transition: background-color 0.5s ease-out, border-color 0.5s ease-out, color 0.5s ease-out;
    -moz-transition: background-color 0.5s ease-out, border-color 0.5s ease-out, color 0.5s ease-out;
    -o-transition: background-color 0.5s ease-out, border-color 0.5s ease-out, color 0.5s ease-out;
    transition: background-color 0.5s ease-out, border-color 0.5s ease-out, color 0.5s ease-out;
}

.btn-awo-dark:hover{
    background-color: #FEE62F;
    color: #222222;
    border-color: #FEE62F;
}

.btn-awo-light{
    display: inline-block;
    background-color: #FBFBFA;
    color: #939393;
    letter-spacing: 0.02em;
    text-decoration: none;
    -webkit-transition: background-color 0.5s ease-out, border-color 0.5s ease-out, color 0.5s ease-out;
    -moz-transition: background-color 0.5s ease-out, border-color 0.5s ease-out, color 0.5s ease-out;
    -o-transition: background-color 0.5s ease-out, border-color 0.5s ease-out, color 0.5s ease-out;
    transition: background-color 0.5s ease-out, border-color 0.5s ease-out, color 0.5s ease-out;
}

.btn-awo-light:hover{
    background-color: #FEE62F;
    color: #222222;
    border-color: #FEE62F;
}

.awo-button-chevron{
    display: block;
    width: 15px;
    height: 15px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer;
    background-image: url('../img/chevron-down.svg');
    -webkit-transition: -webkit-transform .8s ease-in-out;
    -ms-transition: -ms-transform .8s ease-in-out;
    transition: transform 1s ease-out;
    border: none;
    background-color: transparent;
}

.awo-button-chevron.down{
    transform: rotate(0deg);
}

.awo-button-chevron.up{
    transform: rotate(180deg);
}

.micro-awo-arrow-next{
    background-position: center;
    background-repeat: no-repeat;
    background-image: url('../img/svg/micro-next-fleche-pillule.svg');
    display: inline-block;
}

.micro-awo-arrow-next:hover{
    background-color: #FEE62F;
    background-image: url('../img/svg/micro-next-fleche-pillule-hover.svg');
    border-color: #FEE62F;
}

.micro-awo-arrow-prev{
    background-position: center;
    background-repeat: no-repeat;
    background-image: url('../img/svg/micro-prev-fleche-pillule.svg');
    display: inline-block;
}

.micro-awo-arrow-prev:hover{
    background-color: #FEE62F;
    background-image: url('../img/svg/micro-prev-fleche-pillule-hover.svg');
    border-color: #FEE62F;
}

.awo-button-prev,
.awo-button-next{
    display: inline-block;
    background-color: #FBFBFA;
    color: #FBFBFA;
    text-decoration: none;
    background-repeat: no-repeat;
    background-position: center;
    -webkit-transition: background-color 0.5s ease-out, border-color 0.5s ease-out, color 0.5s ease-out;
    -moz-transition: background-color 0.5s ease-out, border-color 0.5s ease-out, color 0.5s ease-out;
    -o-transition: background-color 0.5s ease-out, border-color 0.5s ease-out, color 0.5s ease-out;
    transition: background-color 0.5s ease-out, border-color 0.5s ease-out, color 0.5s ease-out;
}

.awo-button-prev{
    background-image: url('../img/svg/previous-fleche-pilule.svg');
}

.awo-button-next{
    background-image: url('../img/svg/next-fleche-pilule.svg');
}

.awo-toogle-button{
    width: 100%;
    border: none;
    background-color: transparent;
    text-align: left;
    position: relative;
    color: #222222;
}

.awo-toogle-button.awo-open:after,
.awo-toogle-button.awo-close:after{
    content: '';
    position: absolute;
    background-repeat: no-repeat;
    background-position: right center;
    background-size: contain;
    background-image: url('../img/svg/plus.svg');
    transition: transform 0.5s;
}

.awo-toogle-button.awo-close:after{
    transform: rotate(45deg);
}


/** Sidebar **/

.sidebar{
    width: 100%;
    height: 100%;
    z-index: 1;
    position: relative;
    background-color: #FEE62F;
    -webkit-transition: background-color 0.5s ease-out, border-color 0.5s ease-out;
    -moz-transition: background-color 0.5s ease-out, border-color 0.5s ease-out;
    -o-transition: background-color 0.5s ease-out, border-color 0.5s ease-out;
    transition: background-color 0.5s ease-out, border-color 0.5s ease-out;  
}

.menu-open .sidebar{
    background-color: #FEE62F;
}

.menu-label{
    display: inline-block;
    background-color: transparent;
    border: none;
    width: 100%;
}

.menu-open .menu-label svg *{
    fill: #636363;
}

.lang-selector{
    display: inline-block;
    width: 100%;
    position: absolute;
    left: 0;
    background-image: url('../img/svg/lang.svg');
    background-repeat: no-repeat;
    background-position: center;
    visibility: hidden;
}

.lang-selector a{
    display: block;
    height: 50%;
    font-size: 0;
    
}


/** Menu **/

.menu-desktop{
    background-color: #FEE62F;
    position: fixed;
    top: 0;
    

    height: 100%;
    z-index: 0;
    -webkit-transition: left 0.5s ease-out;
    -moz-transition: left 0.5s ease-out;
    -o-transition: left 0.5s ease-out;
    transition: left 0.5s ease-out;
}

.menu-open .menu-desktop{
    left: 2.793296089385475vw;
}

#menu {
    background-color: #FEE62F;
    padding-left: 0;
    list-style: none;
}


#menu li:after{
    content:attr(data-count);
    letter-spacing: initial;
    color: #939393;
    position: relative;
}

#menu li a{
    font-family: 'Euclid Circular A Medium';
    text-transform: uppercase;
    letter-spacing: -0.025em;
    color: #636363;
    text-decoration: none;
    -webkit-transition: color 0.5s ease-out;
    -moz-transition: color 0.5s ease-out;
    -o-transition: color 0.5s ease-out;
    transition: color 0.5s ease-out;
    position: relative;
}


#menu li:hover{
    border-color: #222222;
}

#menu li:hover a{
    color: #222222;
}

#close-menu{
    position: absolute;

    cursor: pointer;
}

/** Social **/

.social-link{
    position: absolute;
    padding-left: 0;
    margin-bottom: 0;
}


/** Intro **/

body.introduction{
    overflow: hidden;
}

.introduction #introduction{
    display: block;
    overflow: hidden;
}

#introduction{
    position: absolute;
    display: none;
    width: 100%;
    height: 100%;
    background-color: #FBFBFA;
    z-index: 4;
}

#introduction svg{
    position: absolute;
    top: 0;
    left: 0;
}




/** Animation **/

table{
    width: 100%;
    border-collapse: collapse;
}

table tbody tr{
    position: relative;
}

table tbody tr td {
    border-top-color: transparent;
    border-bottom-color: transparent;
}


table tbody tr:hover {

    background-color: #FBFBFA;
}

table tbody tr:hover td:not(:last-child){
    border-top-color: #939393;
    border-bottom-color: #939393;
}


table tbody tr:hover .micro-awo-arrow-next{
    background-color: #939393;
    background-image: url('../img/svg/micro-next-fleche-pillule-hover.svg');
}


/** Footer **/

footer{
    background-color: #222222;
    position: fixed;
    left: 0;
    top: auto;
    right: 0;
    bottom: 0;
    z-index: 0;
}

footer .footer-header{
    position: relative;    
}

.footer-header .awo-button-chevron{
    float: right;
    position: relative;
}

.contact-details{
    padding-left: 0;
    list-style: none;
}

footer .small-title{
    letter-spacing: 0.13em;
}

footer .text{
    letter-spacing: 0.02em;
   
}



footer .footer-body a{
    text-decoration: none;
    display: block;
}

footer .footer-body a:hover{
    cursor: pointer;
}



@keyframes drawBorderVertical {
    from { height: 1px;}
    to { height: 100%;}
}

@keyframes drawBorderHorizontal {
    from { width: 1px;}
    to { width: 100%;}
}

@keyframes drawBorderSection {
    from { width: 1px;}
    to { width: 100% ;}
}

@keyframes fade-bottom {
    0% {
      transform: translateY(50px);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
}

@keyframes fade-left {
    0% {
      transform: translateX(-100px);
      opacity: 0;
    }
    100% {
      transform: translateX(0);
      opacity: 1;
    }
}
  
@keyframes fade-right {
    0% {
      transform: translateX(100px);
      opacity: 0;
    }
    100% {
      transform: translateX(0);
      opacity: 1;
    }
}
  
  
  
  
footer.line{
    z-index: 1;
    position: absolute;
    background-color: #D6D6D6;;
}


.border-end-awo{
    border-right: solid 1px #939393!important;
}

footer .image{
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
}


footer .websites li a{
    display: block;
    background-repeat: no-repeat;
    font-size: 0;
}

footer .websites li a object{
    height: 100%;
}

footer .websites li{
    list-style: none;
}

.splide .splide__slide:not(.is-active) img {
    filter: grayscale(0%) opacity(100%);
    -webkit-filter: grayscale(0%) opacity(100%);
    -moz-filter: grayscale(0%) opacity(100%);   
}

.splide .splide__slide:not(.is-active){
    filter: grayscale(100%) opacity(25%);
    -webkit-filter: grayscale(100%) opacity(25%);
    -moz-filter: grayscale(100%) opacity(25%);
    transition: all 1s;
}