body, html {height: 100%;margin: 0;background-color: #f2f2f2;font-family: "Roboto", sans-serif;}
html{scroll-behavior: smooth;}
section{padding:5%;}

/* ----------- Navigation ----------- */

nav {position:absolute;z-index:1;width:100%;display:flex;}

.logo{width:20%;}
.logo img{width:50%;padding:2% 8%;}

.menu{width:60%;display:flex;margin:auto;text-align: center;}
.menu a{width:33.33%;padding:4%;text-decoration: none;color:#1a1a1a;text-transform: uppercase;font-weight: 700;margin:auto;}
.menu a:hover{background-color: #1a1a1a;color:#f2f2f2;border-radius: 10px;transition: all 1s ease-out;}

.button{width:20%;margin:auto;padding-right:5%;text-align: center;}
.button a{width:33.33%;padding:2% 4%;text-decoration: none;color:#f2f2f2;text-transform: uppercase;font-weight: 700;margin:auto;}
.button a button{background-color:transparent;border:2px solid #1a1a1a;border-radius: 10px;font-size:1em;text-transform: uppercase;font-weight: 700; padding:4% 8%;color:#1a1a1a;}
.button a button:hover{background-color: #1a1a1a;color:#f2f2f2;cursor: pointer;border:2px solid #1a1a1a;transition: all 1s ease-out;}

/* ----------- Header ----------- */

header {height: auto;background-color:#f2f2f2;display:flex;}

.hero-text {width:100%;color: #1a1a1a;text-align: center;padding:2%;}
.hero-text h1{font-weight: 700;font-size:6em;line-height: 1em;text-transform: uppercase;padding:4% 5% 1% 5%;}

.hero-img{width:90%;margin:auto;display:flex;}
.hero-img img{width:33.33%;height:500px;padding:1%;}

.hero-text a{margin:5%;}
.button {font-size: 20px;font-weight:700;text-transform: uppercase;}

.arrow {color: #1a1a1a;
    &::after {margin:5% 0;
        display: inline-block;
        padding-left: 8px;
        content: "\0279E"; // arrow right unicode
        -webkit-transition: transform 0.3s ease-out;
        -moz-transition: transform 0.3s ease-out;
        -ms-transition: transform 0.3s ease-out;
        -o-transition: transform 0.3s ease-out;
        transition: transform 0.3s ease-out;
    }
    &:hover {
        color: #0c5449;
        &::after {
            -webkit-transform: translateX(40px);
            -moz-transform: translateX(40px);
            -ms-transform: translateX(40px);
            -o-transform: translateX(40px);
            transform: translateX(40px);
        }
    }
}

/* ----------- DATA ----------- */

.data-title{width:100%;display:flex;}

.data-logo{width:20%;}
.data-logo img{width:80%;}

.data-text{width:80%;margin:auto;font-size:4em;font-weight:700;text-transform: uppercase;line-height: 0.9em;}

.data-cards{width:100%;margin:auto;margin-top:5%;display:flex;}
.data-block{width:33.33%;padding:1% 5%;}
.data-block-01{margin-top:15%;}
.data-block h3{text-transform: uppercase;font-size:2em;}
hr{color:darkgrey;}
.data-block .sous-titre{font-size:1.5em;font-weight:500;}
.data-block .sous-titre span{background-color:darkgrey;padding:0 2%;border-radius: 10px;}
.data-block .card-text{font-size:1.2em;}

/* ----------- SOURCES ----------- */

#sources{background-color:#1a1a1a;}

#sources h2{text-transform: uppercase;font-size:4em;text-align: center;color:#f2f2f2;}
.sources-cards{width:100%;display:flex;color:#f2f2f2;}

.sources-block-01{width:33.33%;margin:1%;color:#f2f2f2;background-color: transparent;padding:2%;}
.sources-block-02{width:33.33%;margin:1%;color:#f2f2f2;background-color: #f2f2f2;padding:2%;}
.sources-block-01 h3{text-transform: uppercase;font-size:1.8em;color:#f2f2f2;}
.sources-block-02 h3{text-transform: uppercase;font-size:1.8em;color:#1a1a1a;}
#sources ul{list-style: none;padding:0;}
#sources ul li a{color:grey;}
#sources ul li a:hover{cursor: pointer;}
.sources-block-01 img, .sources-block-02 img{width:80%; margin:auto;display:block;}
.sources-block-01 p span, .sources-block-02 p span{background-color:darkgrey;padding:2% 4%;font-weight:700;color:#1a1a1a;border-radius: 10px;}

/* ----------- SUBTLE ----------- */

#subtle h2{text-transform: uppercase;font-size:6em;margin-bottom:6%;}
.subtle{width:80%;display:flex;margin:auto;margin-bottom:5%;}
.subtle-img{width:40%;}
.subtle-img img{width:100%;height:auto;}
.subtle-text{width:60%;padding:2% 15% 2% 5%;}
.subtle-text h3{text-transform: uppercase;font-size:1.8em;}
.subtle-text p{text-transform: uppercase;font-size:1.2em;line-height: 1.5em;}

/* ----------- COMMUNITY ----------- */

#community{background-color:#1a0d00;}

.community-titre{width:100%; display: flex;}

.community-titre-left{width:50%;}
.sur{color:#595959;text-transform: uppercase; font-size:1.5em;}
.community-titre-left h2{color:#f2f2f2;text-transform: uppercase;font-size:3em;}

.community-titre-right{width:50%;text-align: right;}
.up{color:#f2f2f2; text-transform: uppercase; font-size:1.5em;}
.down{color:#595959;text-transform: uppercase; font-size:1.5em;}

/* ----------- CARROUSEL ----------- */

.cont {position: absolute;margin-top: 190px;}
.controls {width: 32px;height: 32px;padding: 10px;border-radius: 50%;cursor: pointer;background-color: #f2f2f2;}
.controls ion-icon{margin:auto;display:block;margin-top:25%;}
.controls:hover {background-color: #1a1a1a;color:#f2f2f2;transition:all ease 0.6s;}
.left {float: left;margin-left:-200%;}
.right {float: right;margin-right:150%;}

.carrousel {width: 65%;margin: auto;margin-top: 5%;overflow:hidden;}
.tapa {width: 12000px;transition: .6s all;}
.item {width: 335px;height: 400px;float: left;margin-left: 15px;border-radius: 10px;cursor: pointer;transition: 0.6s all;}
.item img {width: 100%;height:100%;}
.item:hover {margin-top: -50px;}

/* ----------- AUTOPLAY ----------- */

.container{margin-top:2%;}
.customer-logo{width:100%;}
.slide{margin: auto;}
.slick-slide {margin: 0px 20px;}
.slick-slide img {width: 100%;}
.slick-list{overflow: hidden;}
.slick-slide{float: left;}

/* ----------- TITRE ----------- */

#titre h2{text-transform: uppercase;font-size:5em;margin-bottom:6%;font-weight: 700;}
#titre h2 span{font-weight: 400;}

/* ----------- CONTACT ----------- */

#contact{background-color:#1a0d00;}

.contact-text{with:100%;display: flex;}

.contact-left{width:50%;}
.contact-left p{color:#f2f2f2; text-transform: uppercase; font-size:1.5em;}
.contact-left h2{color:#f2f2f2;text-transform: uppercase;font-size:3em;margin-bottom:6%;font-weight: 700;}

.contact-right{width:50%;}
.contact-right img{width:40%;margin:auto;display:block;}

.contact-logo img{width:10%;margin-top:2%;}