@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans&display=swap');

:root{
    --color-grey001: #f2f2f2;
    --color-grey002: #cccccc;
    --color-grey003: #999999;
    --color-grey004: #666666;
    --color-grey005: #333333;
    --color-scouts-purple: #7413dc;
    --color-purple001: #6414db;
    --color-purple002: #5314db;
    --color-purple003: #4214db;
    --color-scouts-teal: #00a794;
    --color-scouts-red: #e22e12;
    --color-scouts-pink: #ffb4e5;
    --color-scouts-green: #23a950;
    --color-green001: #23a845;
    --color-scouts-section-green: #004851;
    --color-green101: #004052;
    --color-scouts-navy: #003982;
    --color-navy001: #002e82;
    --color-scouts-blue: #006ddf;
    --color-blue001: #0059de;
    --color-scouts-yellow: #ffe627;
    --color-guides: #3366ff;
    --color-blue101: #3355ff;
    --menu-speed: 0.75s;
}

* {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 12pt;
    font-weight: 400;
    color: white;
    margin: 0;
    padding: 0;
}

.myTypography-Headline {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 3rem;
    font-weight: 900;
    color: white;
    margin: 0 ;
    padding: 0;
    text-align: left;
}

.myTypography-Personalisation {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    color: white;
    margin: 0;
    padding: 0;
}

.myTypography-Highlighting {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: white;
    margin: 0;
    padding: 0;
}

.myTypography-Regular {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    color: white;
    margin: 0;
    padding: 0;
}

.myTypography-Light {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 1rem;
    font-weight: 300;
    color: black;
    margin: 0;
    padding: 0;
}


/* Centered texts in each section
	* --------------------------------------- */
.section {
    text-align: center;
}



/* Defining each section background and styles
	* --------------------------------------- */
#section0 {
    background: -webkit-gradient(linear, top left, bottom left, from(var(--color-scouts-purple)), to(var(--color-purple001)));
    background: -webkit-linear-gradient(var(--color-scouts-purple), var(--color-purple001));
    background: linear-gradient(var(--color-scouts-purple),var(--color-purple001));
}

#section2 {
    background: -webkit-gradient(linear, top left, bottom left, from(var(--color-purple002)), to(var(--color-purple003)));
    background: -webkit-linear-gradient(var(--color-purple002), var(--color-purple003));
    background: linear-gradient(var(--color-purple002),var(--color-purple003));
}



/*Adding background for the slides
	* --------------------------------------- */

    #slide1 {
        background: -webkit-gradient(linear, top left, bottom left, from(var(--color-purple001)), to(var(--color-purple002)));
        background: -webkit-linear-gradient(var(--color-purple001), var(--color-purple002));
        background: linear-gradient(var(--color-purple001), var(--color-purple002));
    }
#slide2 {
    background: -webkit-gradient(linear, top left, bottom left, from(var(--color-scouts-blue)), to(var(--color-blue001)));
    background: -webkit-linear-gradient(var(--color-scouts-blue), var(--color-blue001));
    background: linear-gradient(var(--color-scouts-blue),var(--color-blue001));
}

#slide3 {
    background: -webkit-gradient(linear, top left, bottom left, from(var(--color-scouts-green)), to(var(--color-green001)));
    background: -webkit-linear-gradient(var(--color-scouts-green), var(--color-green001));
    background: linear-gradient(var(--color-scouts-green),var(--color-green001));
}

#slide4 {
    background: -webkit-gradient(linear, top left, bottom left, from(var(--color-scouts-section-green)), to(var(--color-green101)));
    background: -webkit-linear-gradient(var(--color-scouts-section-green), var(--color-green101));
    background: linear-gradient(var(--color-scouts-section-green),var(--color-green101));
}

#slide5 {
    background: -webkit-gradient(linear, top left, bottom left, from(var(--color-scouts-navy)), to(var(--color-navy001)));
    background: -webkit-linear-gradient(var(--color-scouts-navy), var(--color-navy001));
    background: linear-gradient(var(--color-scouts-navy),var(--color-navy001));
}

#slide6 {
    background: -webkit-gradient(linear, top left, bottom left, from(var(--color-guides)), to(var(--color-blue101)));
    background: -webkit-linear-gradient(var(--color-guides), var(--color-blue101));
    background: linear-gradient(var(--color-guides),var(--color-blue101));
}

/* Bottom menu
	* --------------------------------------- */
#infoMenu {
    bottom: 80px;
}

#infoMenu li a {
    color: #fff;
}

#fp-nav {
    position: fixed;
    z-index: 100;
    top: 20%;
    opacity: 1;
    transform: translateY(-20%);
    -ms-transform: translateY(-20%);
    -webkit-transform: translate3d(0,-20%,0);
}


/* overwrite arrows */

.fp-controlArrow.fp-prev {
    left: 0;
    border: none;
    width: 50px;
    height: 101px;
    background: url(Right.png) no-repeat;
    background-size: 50px 50px;
    cursor: pointer;
}
.fp-controlArrow.fp-next {
    right: 0;
    border: none;
    width: 50px;
    height: 101px;
    background: url(Left.png) no-repeat;
    background-size: 50px 50px;
    cursor: pointer;
}