*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body{
    font-family: "Poppins", sans-serif;
    min-width: 320px;
}

::selection {
  background: #e0b8de;
}

/******** HEADINGS AND TEXTS*******/

h1{
    font-size: 3.5vw;
    line-height: 120%;
    font-weight: 600;
    color: #42204A;
    text-transform: uppercase;
}

h2{
    font-size: 40px;
    line-height: 120%;
    font-weight: 600;
    color: #42204A;
    text-transform: uppercase;
}

h3{
    font-size: 28px;
    line-height: 120%;
    font-weight: 600;
    color: #42204A;
    text-transform: uppercase;
}


p, .accordion-body,.modal li{
    font-size: 14px;
    line-height: 140%;
    font-weight: 400;
}

a{
    font-size: 14px;
    line-height: 140%;
    font-weight: 600;
    color: #212529;
    cursor: pointer;
}
a:hover{
    color: #AE6BAA;
}

.xs, small{
    font-size: 12px;
    font-weight: 400;
    color: #ffffff;
    text-decoration: none;
}

.quote{
    font-size: 14px;
    line-height: 140%;
    font-weight: 600;
    color: #AE6BAA;
}

.description{
    margin-top: 25px;
    font-size: 11px;
}


.highlight-purple{
    color: #61346B;
}
.highlight-pink{
    color: #AE6BAA;
}
.highlight-yellow{
    color: #FFAF00;
}



/**********CUSTOM HEADINGS***********/

.section1 h3{
    font-size: 1.8vw;
    color: #fff;
}

.section1 h1{
    color: #fff;
}

.section1 ul{
    list-style: none;
}

.section1 ul p{
    font-size: 12px;
    padding-bottom: 15px;
}

.section6 h1{
    font-size: 25px !important;
}
.section6 h3{
    font-size: 15px !important;

}

.section-nl input{
    border-radius: 5px;
    outline: none;
    border: none;
    padding: 3px 6px;
    width: 80%;
}

.section-nl h6{
    font-weight: 600;
    border-bottom: 1px solid #61346B;
    padding-bottom: 15px;
}

/*********SECTIONS**********/


.section1{
    position: relative;
    margin-top: -50px;
    z-index: 5;
    background-color: #2B0F32;
    color: #fff;
    padding: 8rem 0 4rem 0;
    box-shadow: 0px -32px 40px rgba(0, 0, 0, 0.2);
}

.section2{
    position: relative;
    margin-top: 100px;
    z-index: 3;
}
.section3{
    position: relative;
    margin-top: -200px;
    z-index: 4;
}

.section4{
    background-color: #61346B;
    box-shadow: 0px 10px 50px rgba(0, 0, 0, 0.15);
}
.section4>h4{
    color: #FFFFFF;
}
.section5{
    margin: 100px 0;
    padding: 100px 0;
    box-shadow: 0px 10px 50px rgba(0, 0, 0, 0.15);
}

.section6{
    color: #42204A;
    background-color: #FFAF00;
    margin-top: -6.5rem;
    box-shadow: 0px -10px 50px rgba(0, 0, 0, 0.15);
}

.section-nl{
    background-color: #FFAF00;
}

footer{
    background-color: #2B0F32;
    color: #ffffff;
    padding: 25px 0 25px 0;
}



/********NAVBAR*********/

nav{
    border-bottom: 1px solid #42204A;
}

.navlogo{
    width: 200px;
}

#anchor1{
    position: absolute;
    bottom:-5rem;
}

.navbar-toggler:focus{
    box-shadow: none;
}



/**********SKEWED SECTION*******/

.skewed{
    width: 100%;
    position: relative;
}
#skewed1{
    background: #2B0F32;
    z-index: 4;
    height: 115px;
    margin-top: -168px;
}
#skewed2{
    background: #FFAF00;
    background-image: url(/GRANDLINE.TV/LOGO_min-04.png);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: 110% 90%;
    z-index: 3;
    height: auto;
    margin: 0 0;
    padding: 3rem 0;
}
#skewed3{
    background:#ffffff;
    z-index: 4;
    height: 120px;
}
.skewed::after{
    content: '';
    width: 100%;
    height: 70%;
    position: absolute;
    background: inherit;
    z-index: -1;
    bottom: 0;
}
#skewed1::after{
    transform-origin: left bottom;
    transform: skewY(359deg) translateY(80px);
    overflow: hidden;
    box-shadow: 0px 20px 20px rgba(0, 0, 0, 0.3);
}

#skewed3::after{
    transform-origin: left bottom;
	transform: skewY(359deg) translateY(-50px);
    box-shadow: 0px -20px 20px rgba(0, 0, 0, 0.2);
}
.skewedInner{
    height: auto;
    display: block;
    overflow: hidden;
    padding: 100px 50px;
    color: rgba(0, 0, 0, 0.5);
    font-weight: bold;
    font-size: 2em;
}

.skewedInner h2, .skewedInner h3{
    text-shadow: 0 4px 6px rgba(0, 0, 0, 0);
}


/**********ELEMENTS*************/

.social{
    transition: all 0.3s ease;
}
.social:hover{
    opacity: 0.7;
}


.section-nl .form-floating{
    width: 100%;
}
.section-nl .form-floating label{
    margin-left: 3px;
}

/*BUTTON "Rejoignez la campagne" */
.button2{
    font-size: 12px;
    line-height: 120%;
    font-weight: 600;
    padding: 7px 14px 5px 24px;
    border: none;
    border-radius: 5px;
    background-color: #FFAF00;
    color: #61346B;
    transition: all 0.3s ease;
    max-height: 40px;
}

.button2:hover{
    background-color: #D99500;
}

.nav-container .button2{
    min-width: 210px;
}

/*BUTTON "En savoir plus" */

.button3{
    font-size: 12px;
    line-height: 120%;
    font-weight: 600;
    border: none;
    background: none;
    color: #42204A;
}

/*BUTTON NEWSLETTER */

.button-nl{
    font-size: 12px;
    line-height: 120%;
    font-weight: 600;
    min-width: 80px;
    width: 15%;
    border: none;
    background-color: #2B0F32;
    color: #FFAF00;
    padding: 0 10px;
    border-radius: 5px;
    transition: all 0.3s ease;
}
.button-nl:hover{
    opacity: 0.8;
}

/*BUTTON KissKissBankBank */

.button-kiss{
    font-size: 12px;
    line-height: 120%;
    font-weight: 600;
    background-color: #2B0F32;
    color: #FFAF00;
    border-radius: 50px;
    margin-top: 30%;
    box-shadow: 0px 8px 24px rgba(43, 15, 50, 0.25);
    border: none;
    transition: all 0.3s ease;
}
.button-kiss:hover{
    transform: translateX(5px);
}

.button-kiss .material-icons-outlined{
    background-color: #FFAF00;
    color: #2B0F32;
    padding: 0.8rem;
    margin-top: 1.3rem;
    margin-left: 0.8rem;
}

.kiss :nth-child(1n){
    font-size: 14.5px !important;
    font-weight: 400;
    margin-bottom: 0.8rem;
    text-align: left !important;
}
.kiss :nth-child(2n){
    font-size: 22px !important;
    font-weight: 500;
}



/*SUPPORTERS CARDS -> "Merci pour votre soutien"*/

.support-card{
    background-color: #42204A;
    border-radius: 10px;
    height: 100px;
    box-shadow: 0 4px 32px rgba(66, 32, 74, 0.3);
}
.support-card h5{
    color: #fff;
    text-decoration: underline;
    font-weight: 500;
    font-size: 16px;
}
.support-card p{
    color: #FFAF00;
    font-weight: 500;
    font-size: 14px;
    margin: 0 !important;
}
.support-card span{
    color: #FFAF00;
    font-weight: 200;
    font-size: 10px;
    font-style: italic;
    margin: 0;
}

.support-arrow:hover{
    color: #61346B;
}



/**************** FULL-SCREEN VIDEO**************/

.hero-vid{
    min-height: 100vh;
    background-color: rgba(255, 255, 255, 0.4);
}


video { 
    position: static;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: -100;
    background-color: rgba(255, 255, 255, 1);
    background: url('') no-repeat;
    background-size: cover;
    transition: 1s opacity;
    object-fit: contain;
    opacity: 0.6;
}

.div2{
    position:relative;
    height: 500px;
    margin-top: -20px;
}



.stopfade { 
    opacity: .9;
}

#video-overlay { 
    position: absolute;
    padding: 2rem;
    top: 0;
    margin-top: 4rem;
    float: left;
    width: 100%;
    transition: all 0.3s ease;
}
.lower {
    margin-top: 9rem !important;
}

#video-overlay h2{
    text-transform: none;
    color: #fff;
    font-weight: 600;
    font-size: 5vw;
}

#video-overlay img{
    width: 40vw;
    margin: 5rem 0 3rem 0;
}

#hero-pause { 
    display: block;
    line-height: 0;
    padding: 5px;
    border: none; 
    margin: 1rem auto; 
    font-size: 1.3rem;
    background: rgba(255,255,255,0);
    color: #fff;
    border-radius: 3px; 
    cursor: pointer;
    transition: .3s background;
    position: absolute;
    bottom: 0;
    right: 1rem;
  
}
#hero-pause:hover { 
    background: rgba(0,0,0,0.5);
}

#arrow-down { 
    display: block;
    line-height: 0;
    padding: 5px;
    border: none; 
    margin: 1rem auto; 
    font-size: 1.3rem;
    background: rgba(255,255,255,0);
    color: #fff;
    cursor: pointer;
    position: absolute;
    bottom: 0;
    left: 50%;
  
}


/*********ACCORDIONS**********/

.accordion-button::after {
    background-image: url(/GRANDLINE.TV/chevron-down.png);
}

.accordion-button:not(.collapsed)::after {
    background-image: url(/GRANDLINE.TV/chevron-down.png);
    transform: rotate(-180deg);
}

.accordion-button:not(.collapsed) {
    color: #212529;
    background-color: rgba(255, 255, 255, 0);
    box-shadow: none;
}

.accordion-button:focus {
    z-index: 3;
    border: none;
    outline: 0;
    box-shadow: none;
}

.accordion-header{
    width: 120px;
}

.section5 .accordion-item{
    background-color: rgba(255, 255, 255, 0) !important;
}



/***********TEXT ANIMATION*********/


.content__container__list, .content__container__text {
    font-size: 32px;
    font-weight: 600;
    line-height: 48px;
    
}

.content {
    position: relative;
    top: 0%;
    left: 50%;
    transform: translate(-50%, 50%);
    height: 160px;
    overflow:hidden;
    font-size: 35px;
    line-height: 40px;
}  
.content__container {
    font-weight: 700;
    overflow: hidden;
    height: 40px;
}

.content__container__text {
    display: inline;
    float: left;
    margin: 0;
    color: #61346B;
    font-weight: 700;
}

.content__container__list {
    text-align: left;
    list-style: none;
    
    -webkit-animation-name: change;
    -webkit-animation-duration: 20s;
    -webkit-animation-iteration-count: infinite;
    animation-name: change;
    animation-duration: 20s;
    animation-iteration-count: infinite;
}
.content__container__list__item {
    line-height:40px;
    margin:0;
    color: #AE6BAA;
    height: 50px;
    text-align: left;
    margin-right: 10px;
}
    



@-webkit-keyframes change {
    0%, 1.33%, 100% {transform:translate3d(0,0,0);}
    8.33%, 9.66% {transform:translate3d(0,-50px,0);} 
    16.66%,17.99% {transform:translate3d(0,-100px,0);}
    24.99%,26.32% {transform:translate3d(0,-150px,0);}
    33.32%,34.65% {transform:translate3d(0,-200px,0);}
    41.65%,42.98% {transform:translate3d(0,-250px,0);}
    49.98%, 51.31% {transform:translate3d(0,-300px,0);}
    58.31%, 59.64% {transform:translate3d(0,-250px,0);}
    66.64%,67.97% {transform:translate3d(0,-200px,0);}
    74.97%,76.3% {transform:translate3d(0,-150px,0);}
    83.3%,84.63% {transform:translate3d(0,-100px,0);}
    91.63%,92.96% {transform:translate3d(0,-50px,0);}
}


@-o-keyframes change {
    0%, 1.33%, 100% {transform:translate3d(0,0,0);}
    8.33%, 9.66% {transform:translate3d(0,-50px,0);} 
    16.66%,17.99% {transform:translate3d(0,-100px,0);}
    24.99%,26.32% {transform:translate3d(0,-150px,0);}
    33.32%,34.65% {transform:translate3d(0,-200px,0);}
    41.65%,42.98% {transform:translate3d(0,-250px,0);}
    49.98%, 51.31% {transform:translate3d(0,-300px,0);}
    58.31%, 59.64% {transform:translate3d(0,-250px,0);}
    66.64%,67.97% {transform:translate3d(0,-200px,0);}
    74.97%,76.3% {transform:translate3d(0,-150px,0);}
    83.3%,84.63% {transform:translate3d(0,-100px,0);}
    91.63%,92.96% {transform:translate3d(0,-50px,0);}
}


@-moz-keyframes change {
    0%, 1.33%, 100% {transform:translate3d(0,0,0);}
    8.33%, 9.66% {transform:translate3d(0,-50px,0);} 
    16.66%,17.99% {transform:translate3d(0,-100px,0);}
    24.99%,26.32% {transform:translate3d(0,-150px,0);}
    33.32%,34.65% {transform:translate3d(0,-200px,0);}
    41.65%,42.98% {transform:translate3d(0,-250px,0);}
    49.98%, 51.31% {transform:translate3d(0,-300px,0);}
    58.31%, 59.64% {transform:translate3d(0,-250px,0);}
    66.64%,67.97% {transform:translate3d(0,-200px,0);}
    74.97%,76.3% {transform:translate3d(0,-150px,0);}
    83.3%,84.63% {transform:translate3d(0,-100px,0);}
    91.63%,92.96% {transform:translate3d(0,-50px,0);}
}



@keyframes change {
    0%, 1.33%, 100% {transform:translate3d(0,0,0);}
    8.33%, 9.66% {transform:translate3d(0,-50px,0);} 
    16.66%,17.99% {transform:translate3d(0,-100px,0);}
    24.99%,26.32% {transform:translate3d(0,-150px,0);}
    33.32%,34.65% {transform:translate3d(0,-200px,0);}
    41.65%,42.98% {transform:translate3d(0,-250px,0);}
    49.98%, 51.31% {transform:translate3d(0,-300px,0);}
    58.31%, 59.64% {transform:translate3d(0,-250px,0);}
    66.64%,67.97% {transform:translate3d(0,-200px,0);}
    74.97%,76.3% {transform:translate3d(0,-150px,0);}
    83.3%,84.63% {transform:translate3d(0,-100px,0);}
    91.63%,92.96% {transform:translate3d(0,-50px,0);} 
}



/* 6 is the number of animation.
// Here, there are 4 lines :

// 1 to 2
// 2 to 3
// 3 to 4
// 4 to 3
// 3 to 2
// 2 to 1

// 6x + 6y = 100 (100% duration)

// HERE : 
// y = 4 -> Animation between two lines
// x = 12.66 -> Time spent on a line

// You can define a value and calculate the other if you want change speed or the number of lines*/





/***********MEDIA QUERIES***********/


@media screen and (max-width: 1430px) {
    .skewedInner h2, .skewedInner h3{
        color: #61346b !important;
    }
    .skewedInner h3 .highlight-purple{
        font-weight: 700;
    }
}

@media screen and (max-width: 1024px) {
    h1{
        font-size: 5vw;
    }
}

@media screen and (max-width: 992px) {
    .section1 h3{
        font-size: 28px;
    }
    .section1 h1{
        font-size: 56px;
    }
    .section5{
        margin: 0;
    }
    h1{
        font-size: 6vw;
    }
    .button-kiss{
        margin-top: 0% !important;
    }
    .content {
        transform: translate(-50%, 0%);
    }
    
}


@media screen and (max-width: 768px) {
    #anchor1{
        display: none;
    }
    .button-kiss{
        margin-top: 5% !important;
        margin-bottom: 35px !important;
    }
    .higher { 
        margin-top: 1rem !important;
    }
}

@media screen and (max-width: 576px) {
    h1{
        font-size: 7.5vw;
    }
    .section1 h3{
        font-size: 1rem;
    }
    #video-overlay img {
        width: 40vw;
        margin: 5rem 0 1rem 0 !important;
    }
    .section6{
        margin-top: -3rem !important;
        padding-top: 2rem;
    }
    .button-kiss{
        margin-top: 25px !important;
        margin-bottom: 25px !important;
    }
    #skewed3{
        height: 60px;
    }
    .section5{
        padding: 50px 0;
    }
    .nav-container .button2{
        padding: 6px 5px 4px 15px;
        font-size: 11px;
    }
}


@media screen and (max-width: 440px) {
    .kiss :nth-child(1n) {
        font-size: 12.1px !important;
        margin-bottom: 0.4rem;
    }
    .kiss :nth-child(2n) {
        font-size: 18px !important;
    }
    .section1{
        padding: 4rem 0 2rem 0;
    }
    
    #hero-pause{ 
        margin: 1rem auto; 
        position: absolute;
        transform: translateY(-100px) !important;
        right: 1rem;
        bottom: 500%;
    }
    .section6 h1{
        font-size: 10vw;
        font-weight: 600;
    }
}