/* Top level css START */

html {
    scroll-snap-type: y mandatory;
}

a {
    text-decoration: none;
    color: inherit;
}

a:hover {
    text-decoration: underline;
}

body {
    scroll-snap-type: y mandatory;
}

section.slide  {
    scroll-snap-align: start;
}

body {
    margin: 0;
}

section img {
    width: 100%;
}

.slide {
    position: relative;
}

.text-container {
    position: absolute;
    z-index: 1;
}

h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 100;
    font-size: 3vw;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.bold {
    font-weight: 900;
}

.gold {
    color: #be9d75;
}

.subheading {
    width: 60%;
}

/* Top level css END */

/* desktop css START */

@media only screen and (min-width:768px) {
    .desktop-image {
        display: block;
    }

    .mobile-image {
        display: none;
    }

    /* Slide 1 START */

    #slide1 {
        top: 25%;
        left: 5%;
        width: 33%;
        font-size: 3vw;
        text-transform: uppercase;
    }

    #slide1 .history {
        letter-spacing: 2px;
    }

    #slide1 .of {
        font-weight: 100;
        font-style: italic;
    }

    #slide1 .extensions {
        letter-spacing: 2px;
        font-family: 'Times New Roman', Times, serif;
        font-weight: 100;
    }



    /* Slide 1 END */

    /* Slide 2 START */

    #slide2 {
        width: 33%;
        margin-left: 5%;
        font-size: 1.4vw;
        top: 12%;
    }
    /* Slide 2 END */

    /* Slide 14 START */

    #slide14 {
        top: 22%;
        width: 80%;
        height: 80%;
        font-size: 2vw;
    }

    #slide14 p {
        margin: 0;
    }

    #slide14 h2 {
        align-self: flex-start;
        margin-left: 10%;
    }

    #slide14 .paragraphs {
        position: relative;
        left: 15%;
        width: 85%;
    }


    /* Slide 14 END */

    /* Slide 3 START */

    #slide3 {
        top: 18%;
        width: 80%;
        height: 80%;
        font-size: 1.6vw;
    }

    #slide3 p {
        margin: 0;
    }

    #slide3 h2 {
        align-self: flex-start;
        margin-left: 10%;
    }

    #slide3 .paragraphs {
        position: relative;
        left: 15%;
        width: 85%;
    }

    /* Slide 3 END */

    /* Slide 4 START */
    #slide4 {
        top: 0%;
        left: 10%;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
    }
    #slide4 h2 {
        width: 40%;
        position: relative;
        left: 15%;
    }

    #slide4 p {
        width: 68%;
        font-size: 2vw;
    }

    /* Slide 4 END */


    /* Slide 5 START */

    #slide5 {
        position: absolute;
        z-index: 1;
        top: 60%;
        left: 50%;
        font-size: 2vw;
        width: 30%;
    }

    /* Slide 5 END */

    /* Slide 6 START */

    #slide6 {
        width: 60%;
        text-align: center;
        bottom: 8%;
        left: 18%;
    }
    #slide6 p {
        font-size: 1.4vw;
    }

    /* Slide 6 END */

    /* Slide 7 START */

    #slide7 {
        width: 30%;
        font-size: 2vw;
        margin-right: 5%;
        top: 10%;
        left: 52%;
    }

    /* Slide 7 END */

    /* Slide 8 START */

    #slide8 {
        width: 25%;
        font-size: 1.8vw;
        left: 15%;
        top: 30%;
    }

    /* Slide 8 END */

    /* Slide 9 START */

    #slide9 {
        width: 25%;
        font-size: 1.8vw;
        left: 15%;
        top: 35%;
    }

    /* Slide 9 END */

    /* Slide 10 START */
    #slide10 {
        width: 60%;
        font-size: 1.5vw;
        text-align: center;
        bottom: 10%;
        left: 20%;
    }

    /* Slide 10 END */

    /* Slide 11 START */
    #slide11 {
        width: 28%;
        font-size: 2vw;
        text-align: center;
        left: 52%;
        top: 28%;
    }

    /* Slide 11 END */

    /* Slide 12 START */
    #slide12 {
        width: 28%;
        font-size: 1.5vw;
        text-align: center;
        left: 18%;
        top: 50%;
    }

    /* Slide 12 END */

    /* Slide 13 START */

    #slide13 {
        width: 28%;
        font-size: 1.8vw;
        left: 18%;
        top: 18%;
    }

    /* Slide 13 END */


    .sidebar-container {
        position: fixed;
        z-index: 2;
        right: 0;
        font-size: 1.2vw;
        width: 16.5%;
        height: 100%;
        background-color: rgba(0 0 0 / 58%);
        color: #fff;
    }

    .sidebar-nav {
        height: inherit;
        margin: 10% 0;
    }

    .sidebar-nav .nav-list {
        display: flex;
        flex-direction: column;
        height: 90%;
    }

    .nav-list div {
        display: flex;
        align-items: center;
        flex: 1 1 auto;
        padding-left: 5%;
    }

    .nav-list div a {
        color: #fff;
        text-decoration: none;
    }

    .nav-list div:hover {
        background-color: rgba(0, 0, 0, 0.3);
        cursor: pointer;
    }
}

/* desktop css END */


/* mobile css START */
@media only screen and (max-width:767px) {
    .desktop-image {
        display: none;
    }

    .sidebar-container {
        display: none;
    }

    /* Slide 1 START */

    #slide1 {
        top: 3%;
        left: 5%;
        width: 33%;
        font-size: 5vw;
        text-transform: uppercase;
    }

    #slide1 .history {
        letter-spacing: 2px;
    }

    #slide1 .of {
        font-weight: 100;
        font-style: italic;
    }

    #slide1 .extensions {
        letter-spacing: 2px;
        font-family: 'Times New Roman', Times, serif;
        font-weight: 100;
    }



    /* Slide 1 END */

    /* Slide 2 START */

    #slide2 {
        font-size: 3vw;
        bottom: 15%;
        text-align: center;
    }

    #slide2 h2 {
        margin-bottom: 95%;
        font-size: 4vw;
        text-align: center;
    }

    #slide2 .subheading {
        width: unset;
    }
    /* Slide 2 END */

    /*Slide 14 START */

    #slide14 {
        top: 25%;
        width: 80%;
        height: 80%;
        font-size: 4vw;
    }

    #slide14 p {
        margin: 0;
    }

    #slide14 h2 {
        align-self: flex-start;
        margin-left: 10%;
        font-size: 4vw;
    }

    #slide14 .paragraphs {
        position: relative;
        left: 15%;
        width: 85%;
    }

    /*Slide 14 END */


    /* Slide 3 START */

    #slide3 {
        top: 10%;
        width: 80%;
        height: 80%;
        font-size: 3vw;
    }

    #slide3 p {
        margin: 0;
    }

    #slide3 h2 {
        align-self: flex-start;
        margin-left: 10%;
        font-size: 4vw;
    }

    #slide3 .paragraphs {
        position: relative;
        left: 15%;
        width: 85%;
    }

    /* Slide 3 END */

    /* Slide 4 START */
    #slide4 {
        top: 0%;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        height: 100%;
        font-size: 4vw;
    }
    #slide4 h2 {
        width: 40%;
        position: relative;
        font-size: 5vw;
        top: 10%;
    }

    #slide4 p {
        width: 68%;
    }

    /* Slide 4 END */


    /* Slide 5 START */

    #slide5 {
        position: absolute;
        z-index: 1;
        left: 30%;
        font-size: 3vw;
        width: 50%;
        bottom: 5%;
        text-align: center;
    }

    /* Slide 5 END */

    /* Slide 6 START */

    #slide6 {
        width: 60%;
        text-align: center;
        left: 30%;
        font-size: 3vw;
        bottom: 20%;
    }

    /* Slide 6 END */

    /* Slide 7 START */

    #slide7 {
        width: 50%;
        font-size: 3.5vw;
        top: 5%;
        left: 30%;
        text-align: center;
    }

    /* Slide 7 END */

    /* Slide 8 START */

    #slide8 {
        width: 50%;
        font-size: 3vw;
        left: 30%;
        bottom: 10%;
        text-align: center;
    }

    /* Slide 8 END */

    /* Slide 9 START */

    #slide9 {
        width: 50%;
        font-size: 4vw;
        left: 30%;
        bottom: 8%;
        text-align: center;
    }

    /* Slide 9 END */

    /* Slide 10 START */
    #slide10 {
        width: 50%;
        font-size: 3.5vw;
        text-align: center;
        bottom: 10%;
        left: 30%;
    }

    /* Slide 10 END */

    /* Slide 11 START */
    #slide11 {
        width: 50%;
        font-size: 4vw;
        text-align: center;
        left: 30%;
        bottom: 10%;
    }

    /* Slide 11 END */

    /* Slide 12 START */
    #slide12 {
        width: 50%;
        font-size: 3.5vw;
        text-align: center;
        left: 30%;
        top: 1%;
    }

    /* Slide 12 END */

    /* Slide 13 START */

    #slide13 {
        width: 50%;
        font-size: 3vw;
        left: 30%;
        bottom: 10%;
        text-align: center;
    }

    /* Slide 13 END */


    .sidebar-container {
        position: fixed;
        z-index: 1;
        right: 0;
        font-size: 1.2vw;
        width: 16.5%;
        height: 100%;
        background-color: rgba(0 0 0 / 58%);
        color: #fff;
    }

    .sidebar-nav {
        height: inherit;
        margin: 10% 0;
    }

    .sidebar-nav ul {
        height: inherit;
        list-style: none;
        padding: 0;
        margin: 0;
        margin-left: 5%;
    }

    .sidebar-nav li {
        margin-bottom: 5%;
    }

    .sidebar-nav li:hover {
        background-color: rgba(0, 0, 0, 0.3);
        cursor: pointer;
    }

    .sidebar-nav .nav-list {
        display: flex;
        flex-direction: column;
        height: 90%;
    }

    .nav-list div {
        display: flex;
        align-items: center;
        flex: 1 1 auto;
        padding-left: 5%;
    }

    .nav-list div a {
        color: #fff;
        text-decoration: none;
    }

    .nav-list div:hover {
        background-color: rgba(0, 0, 0, 0.3);
        cursor: pointer;
    }
}
/* mobile css END */