@media only screen and (orientation:portrait){

    body
    {
        background-image: url(Assets/bg-2.jpg);
        background-size: 105%;
        height: 100vh;
        width: 100vw;
        font-family: 'Roboto', sans-serif;
        font-size: 1.8vh;
        font-weight: normal;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.33;
        letter-spacing: normal;
        text-align: left;
        color: #ffffff;
        
        overflow-x: hidden;
    }
    
     /* Nav Bar */

    .nav-bar
    {
        position: fixed;
        bottom: 0vh;
        text-align: center;
        width: 100vw;
        height: 8vh;
        background-color: #000;

        padding: 1.8vh 0;
        margin: 0;
        z-index: 100;
    }

    .nav-bar li {
        display: inline;
    }
    
    .nav-bar li a {
        margin: 3vh 4vw;
    }
    
    .iconn
    {
        height: 90%;
    }
    
    .cta
    {
        height: 100%;
    }
    
    
    /* Letters */
    
    .switch-buttons
    {
        position: fixed;
        bottom: 11vh;
        z-index: 20;
        right: 5vw;
    }
    
    .switch-buttons-main
    {
        position: fixed;
        bottom: 15vh;
        right: 5vw;
    }
    
    .switch-buttons-main button
    {
        border-radius: 2vw;
        height: 4vh;
        width: 17vw;
        border: 0;
        font-size: 1.6vh;
    }
    
    .button1
    {
        background-color: #9f9f9f;
        color: #000;
    }
    
    .button2
    {
        background-color: #000;
        color: #fff;
    }
    
    .button3
    {
        background-color: #9f9f9f;
        color: #000;
    }
    
    .button4
    {
        background-color: #000;
        color: #fff;
    }
    
  .switch-buttons button
    {
        border-radius: 2vw;
        height: 6vh;
        width: 25vw;
        border: 0;
    }
    
    h1
    {
        font-family: 'Bebas Neue', sans-serif;
        font-size: 4.5vh;
        font-weight: 600;
        font-style: normal;
        font-stretch: normal;
        line-height: 1;
        letter-spacing: normal;
        text-align: left;
        color: #fbf1d6;
        text-transform: uppercase;
    }
    
    .title-letters
    {
        margin: 5vh 8vw 4vh 9vw;
    }
    
    .swiper-container {
      width: 100%;
      padding-bottom: 2vh;
        z-index: 5;
    }
    
    .swiper-slide {
      background-position: center;
      background-size: cover;
     width: 67vw;
        height: 65vh;
        background-color: white;
        padding: 0 7vw 3vh 7vw;
    }
    
    .swiper-slide h2
    {
        font-family: 'Bebas Neue', sans-serif;
        font-size: 3.5vh;
        font-weight: 600;
        font-style: normal;
        font-stretch: normal;
        line-height: 1vh;
        letter-spacing: normal;
        text-align: left;
        color: #000000;
        text-transform: uppercase;
    }
    
    .quotes
    {
        height: 50vh;
    }
    
    .trans-quotes
    {
        height: 50vh;
        display: none;
    }
    
        .swiper-slide p
    {
        font-family: 'Roboto', sans-serif;
        font-size: 1.7vh;
        font-weight: normal;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.33;
        letter-spacing: normal;
        text-align: left;
        color: #000000;
        margin: 0;
    }
    
    /*the letters*/
    
    .read-letters
    {
        height: 100vh;
        width: 100vw;
        background-color: #fff;
        background-image: url(Assets/story-background.png);
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: 10;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        overflow-x: hidden;
        display: none;
    }
    
    .the-letters
    {
        width: 95%;
        margin: 2.5vw;
    }
    
    .text-letters
    {
        color: #fff;
        font-family: 'Roboto', sans-serif;
        overflow: scroll;
        
        padding: 6vh 7vw 20vh 8.5vw;
        display: none;
    }
    
    .profile
    {
        margin: 4vh 0;
    }
    
    .profile h2
    {
        font-family: 'Bebas Neue', sans-serif;
        font-size: 4.5vh;
        font-weight: 600;
        font-style: normal;
        font-stretch: normal;
        line-height: 1vh;
        letter-spacing: normal;
        text-align: left;
        color: #000000;
        text-transform: uppercase;
    }
    
    .profile p
    {
        font-family: 'Roboto', sans-serif;
        font-size: 2vh !important;
        font-weight: normal;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.33 !important;
        letter-spacing: normal;
        text-align: left;
        color: #000000;
        margin: 0;
    }
    
    .text-letters .material-icons
    {
        position: sticky;
        top: 0;
    }
    
    .text-letters p
    {
       font-family: 'Roboto', sans-serif;
        font-size: 2.5vh;
        font-weight: 300;
        font-style: normal;
        font-stretch: normal;
        line-height: 3.5vh;
        letter-spacing: normal;
        text-align: left;
        color: #000000;    
    }
    
    .blockquote
    {
        font-family: 'Bebas Neue', sans-serif;
        font-size: 4.5vh;
        font-weight: 500;
        font-style: normal;
        font-stretch: normal;
        line-height: 5vh;
        letter-spacing: normal;
        text-align: left;
        color: #000000;
        text-transform: uppercase;
        
        padding-left: 4.5vw;
        border-left: solid 3.5vw #e00000;
    }
    
    .close
    {
        position: fixed;
        top: 3vh;
        right: 6vw;
        color: #e00;
        font-size: 2.5em;
    }
    
    .open
    {
        position: absolute;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #e00;
        font-size: 2.5em;
        opacity: 0.45;
    }
    
    .back
    {
        position: fixed;
        background-color: #000;
        top: 4vh;
        right: 7vw;
        border-radius: 5vw;
        width: 8.5vw;
        height: 8.5vw;
        padding: 0 1.8vw;
        z-index: 5;
    }
    
    .back i
    {
        color: #fbf1d6;
        font-size: 3.5vh;
    }

}

/*---------------------------------------------------------------*/



@media only screen and (orientation:landscape){    

    body
    {
        background-image: url(Assets/bg-2.jpg);
        background-size: 105%;
        height: 100vh;
        width: 100vw;
        font-family: 'Roboto', sans-serif;
        font-size: 1.8vh;
        font-weight: normal;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.33;
        letter-spacing: normal;
        text-align: left;
        color: #ffffff;
    }
    
     /* Nav Bar */

    .nav-bar
    {
        position: fixed;
        bottom: 0vh;
        text-align: center;
        width: 100vw;
        height: 7vh;
        background-color: #000;

        padding: 1.5vh 0;
        margin: 0;
        z-index: 105;
    }

    .nav-bar li {
        display: inline;
    }
    
    .nav-bar li a {
        margin: 1vh 2.7vw;
    }
    
    .iconn
    {
        height: 100%;
    }
    
    .cta
    {
        height: 150%;
    }

    
    /* Letters */
    
    .switch-buttons
    {
        position: fixed;
        bottom: 10vh;
        right: 5vw;
        z-index: 20;
    }
    
    .switch-buttons-main
    {
        position: relative;
        left: 7vw;
    }
    
    .switch-buttons-main button
    {
        border-radius: 2vw;
        height: 3.5vh;
        width: 5.5vw;
        border: 0;
        font-size: 1.6vh;
    }
    
    button
    {
        font-size: 1.3vh !important;
    }
    
    .button1
    {
        background-color: #9f9f9f;
        color: #000;
    }
    
    .button2
    {
        background-color: #000;
        color: #fff;
    }
    
    .button3
    {
        background-color: #9f9f9f;
        color: #000;
    }
    
    .button4
    {
        background-color: #000;
        color: #fff;
    }
    
  .switch-buttons button
    {
        border-radius: 2vw;
        height: 5vh;
        width: 9vw;
        border: 0;
    }
    
    h1
    {
        font-family: 'Bebas Neue', sans-serif;
        font-size: 4.5vh;
        font-weight: 600;
        font-style: normal;
        font-stretch: normal;
        line-height: 1;
        letter-spacing: normal;
        text-align: left;
        color: #fbf1d6;
        text-transform: uppercase;
    }
    
    .title-letters
    {
        margin: 5vh 30vw 4vh 30vw;
    }
    
    .swiper-container {
      width: 100%;
      padding-bottom: 2vh;
        z-index: 5;
    }
    
    .swiper-slide {

        height: 65vh;
        background-color: white;
        padding: 0 3vw 4vh 3vw;
        box-sizing: border-box;
    }
    
    .swiper-slide h2
    {
        font-family: 'Bebas Neue', sans-serif;
        font-size: 1.5vw;
        font-weight: 600;
        font-style: normal;
        font-stretch: normal;
        line-height: 1vh;
        letter-spacing: normal;
        text-align: left;
        color: #000000;
        text-transform: uppercase;
        margin-top: 3vh;
    }
    
    .quotes
    {
         height: 44vh;
        margin: 0 1vw;
    }
    
    .trans-quotes
    {
        height: 44vh;
        margin: 0 1.5vw;
        display: none;
    }
    
        .swiper-slide p
    {
        font-family: 'Roboto', sans-serif;
        font-size: 0.8vw;
        font-weight: normal;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.33;
        letter-spacing: normal;
        text-align: left;
        color: #000000;
        margin: 0;
    }
    
    /*the letters*/
    
    .read-letters
    {
        height: 100vh;
        width: 100vw;
        background-image: url(Assets/story-background-d.jpg);
        position: fixed;
        background-repeat: no-repeat;
        background-size: 100%;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: 10;
        overflow-y: scroll;
        overflow-x: hidden;
        display: none;
    }
    
    .the-letters
    {
        width: 95%;
        margin: 2.5vw;
    }
    
    .text-letters
    {
        color: #fff;
        font-family: 'Roboto', sans-serif;
        overflow: scroll;
        padding: 6vh 27vw 10vh 27vw;
        display: none;
    }
    
    .profile
    {
        margin: 4vh 0;
    }
    
    .profile h2
    {
        font-family: 'Bebas Neue', sans-serif;
        font-size: 2.5vw;
        font-weight: 600;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.3vh;
        letter-spacing: normal;
        text-align: left;
        color: #000000;
        text-transform: uppercase;
    }
    
    .profile p
    {
        font-family: 'Roboto', sans-serif;
        font-size: 1.75vh !important;
        font-weight: normal;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.33 !important;
        letter-spacing: normal;
        text-align: left;
        color: #000000;
        margin: 0;
        padding-right: 20vw;
    }
    
    .text-letters .material-icons
    {
        position: sticky;
        top: 0;
    }
    
    .text-letters p
    {
       font-family: 'Roboto', sans-serif;
        font-size: 2.5vh;
        font-weight: 300;
        font-style: normal;
        font-stretch: normal;
        line-height: 3.6vh;
        letter-spacing: normal;
        text-align: left;
        color: #000000;    
    }
    
    .blockquote
    {
        font-family: 'Bebas Neue', sans-serif;
        font-size: 4.5vh;
        font-weight: 500;
        font-style: normal;
        font-stretch: normal;
        line-height: 5vh;
        letter-spacing: normal;
        text-align: left;
        color: #000000;
        text-transform: uppercase;
        
        padding-left: 4.5vw;
        border-left: solid 3.5vw #e00000;
    }
    
    .close
    {
        position: fixed;
        top: 4vh;
        right: 4vw;
        color: #e00;
        font-size: 2.5em;
    }
    
    .open
    {
        position: absolute;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #e00;
        font-size: 2.5em;
        opacity: 0.45;
    }
    
    .back
    {
        position: fixed;
        background-color: #000;
        top: 4vh;
        right: 7vw;
        border-radius: 5vw;
        width: 6.25vh;
        height: 6.25vh;
        padding: 1vh 1vw;
        z-index: 5;
    }
    
    .back i
    {
        color: #fbf1d6;
        font-size: 3.5vh;
        z-index: 5;
    }

}