@media only screen and (orientation:portrait){


    .layer1
    {
        z-index: 1;
    }

    .layer2
    {
        z-index: 2;
    }
    
 
    body
    {
        margin: 0;
        background: url(Assets/background.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    }


    .button-collapse
    {
        position: fixed;
        right: 8vw;
        top: 5vh;
        z-index: 105;
        color: #e00;
        font-size: 4vh;
    }


    /* 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;
    }
    
    .icon
    {
        height: 90%;
    }
    
    .cta
    {
        height: 100%;
    }




    .youtube-player-gif {
        position: relative;
        padding-bottom: 56.23%;
        /* Use 75% for 4:3 videos */
        height: 0;
        overflow: hidden;
        max-width: 100%;
        background: #000;
    }

    .youtube-player-gif iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 100;
        background: transparent;
    }

    .youtube-player-gif img {
        bottom: 0;
        display: block;
        left: 0;
        margin: auto;
        max-width: 100%;
        width: 100%;
        position: absolute;
        right: 0;
        top: 0;
        border: none;
        height: auto;
        cursor: pointer;
        -webkit-transition: .4s all;
        -moz-transition: .4s all;
        transition: .4s all;
    }

    .youtube-player-gif img:hover {
        -webkit-filter: brightness(75%);
    }

    .youtube-player-gif .play {
        height: 72px;
        width: 72px;
        left: 50%;
        top: 50%;
        margin-left: -36px;
        margin-top: -36px;
        position: absolute;
        background: url("//i.imgur.com/TxzC70f.png") no-repeat;
        cursor: pointer;
        z-index: 105;
    }


    .youtube-player {
        position: relative;
        padding-bottom: 56.23%;
        /* Use 75% for 4:3 videos */
        height: 0;
        overflow: hidden;
        max-width: 100%;
        background: #000;
    }

    .youtube-player iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 100;
        background: transparent;
    }

    .youtube-player img {
        bottom: 0;
        display: block;
        left: 0;
        margin: auto;
        max-width: 100%;
        width: 100%;
        position: absolute;
        right: 0;
        top: 0;
        border: none;
        height: auto;
        cursor: pointer;
        -webkit-transition: .4s all;
        -moz-transition: .4s all;
        transition: .4s all;
    }

    .youtube-player img:hover {
        -webkit-filter: brightness(75%);
    }

    .youtube-player .play {
        height: 72px;
        width: 72px;
        left: 50%;
        top: 50%;
        margin-left: -36px;
        margin-top: -36px;
        position: absolute;
        background: url("//i.imgur.com/TxzC70f.png") no-repeat;
        cursor: pointer;
    }

    .vid-description
    {
        text-align: center;
        padding: 0.5vh 0vw 2vh 0vw;
    }
    
    .chapter-header
    {
        width: 100vw; 
        height: 40vh;
        position: relative;
    }
    
    #header-1
    {
        background-image: url(Assets/chapter-1-thumbnail.jpg);
        background-position: top center;
        background-size: cover;
        padding:  22vh 10vw 28vh 10vw;;
        text-align: center;
    }
    
    #header-2
    {
        background-image: url(Assets/chapter-2-thumbnail.jpg);
        background-position: top center;
        background-size: cover;
        padding: 20vh 13vw 30vh 13vw;
        text-align: center;
    }
    
    #header-3
    {
        background-image: url(Assets/chapter-3-thumbnail.jpg);
        background-position: center;
        background-size: cover;
        padding: 20vh 18vw 30vh 18vw;
        text-align: center;
    }
    
    #header-4
    {
        background-image: url(Assets/chapter-4-thumbnail.jpg);
        background-position: top center;
        background-size: cover;
        padding: 18vh 18vw 32vh 18vw;
        text-align: center;
    }
    
    #header-5
    {
        background-image: url(Assets/chapter-5-thumbnail.jpg);
        background-position: top center;
        background-size: cover;
        padding: 20vh 17vw 30vh 17vw;
        text-align: center;
    }
    
    #header-6
    {
        background-image: url(Assets/chapter-6-thumbnail.jpg);
        background-position: top center;
        background-size: cover;
        padding: 20vh 15vw 30vh 15vw;
        text-align: center;
    }
    
    .chapter-title
    {
        width: 80%;
    }
    
    .header-share
    {
        position: absolute;
        bottom: 2vh;
        right: 5vw;
    }
    
    .header-share img
    {
        margin: 0.5vh;
        width: 25%;
    }
    
    .story
    {
        background-image: url(Assets/story-background.png);
        height: 100vh;
        width: 100vw;
        background-size: 105%;
        background-attachment: scroll;
        color: #fff;
        font-family: 'Roboto', sans-serif;
        overflow-y: scroll;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;

        padding: 0 0 10vh 0;
    }


    .story .material-icons
    {
        position: sticky;
        top: 0;
        right: 3vw;
    }

    .story h1
    {
         font-family: 'Bebas Neue', sans-serif;
        font-size: 4vh;
        font-weight: 600;
        font-style: normal;
        font-stretch: normal;
        line-height: 1;
        letter-spacing: normal;
        text-align: center;
        color: #000000;
        margin-top: 1.2vh;
        text-transform: uppercase;
    }
    
    .story h2
    {
         font-family: 'Bebas Neue', sans-serif;
        font-size: 6vh;
        font-weight: 600;
        font-style: normal;
        font-stretch: normal;
        line-height: 0;
        letter-spacing: normal;
        text-align: center;
        color: #000000;
        text-transform: uppercase;
        margin-bottom: 7vh;
    }
    
    .story h3
    {
         font-family: 'Bebas Neue', sans-serif;
        font-size: 4.5vh;
        font-weight: 600;
        font-style: normal;
        font-stretch: normal;
        line-height: 0;
        letter-spacing: normal;
        text-align: left;
        color: dimgray;
        text-transform: uppercase;
        margin-top: 7vh;
        margin-left: 6.5vw;
    }

    .story p
    {
       font-family: 'Roboto', sans-serif;
        font-size: 2.5vh;
        font-weight: 300;
        font-style: normal;
        font-stretch: normal;
        line-height: 3.7vh;
        letter-spacing: normal;
        text-align: left;
        color: #000000;
        
        padding: 1.5vh 7vw;
    }

    .story p i
    {
       font-family: 'Roboto', sans-serif;
        font-size: 2.2vh;
        font-weight: 300;
        font-style: italic;
        font-stretch: normal;
        line-height: 3.7vh;
        letter-spacing: normal;
        text-align: left;
        color: #000000;
    }
    
    .story .names
    {
        font-style: italic;
    }
    
    
    .image-banner-2
    {
        width: 100vw;
        position: relative;
        height: 50vh;
    }
    
    .image-banner-1
    {
        width: 100vw;
        position: relative;
        height: 35vh;
    }
    
    .photo-caption
    {
        font-family: 'Bebas Neue', sans-serif;
        font-size: 2.5vh;
        font-weight: normal;
        font-stretch: normal;
        line-height: 1.43;
        letter-spacing: normal;
        text-align: left;
        color: #000;
        display: block;
        padding: 1.5vh 7vw;
    }
    
    .image-banner-1 img
    {
        position: absolute;
    }
    
    .image-banner-2 img
    {
        position: absolute;
    }
    

    #pic1
    {
        width: 85vw;
         left: -7vw;
        top: 0;
        transform: rotate(-2.3deg);
    }
    
    #pic2
    {
        width: 75vw;
        bottom: 2vh;
        right: -2vw;
    }
    
    
    #pic3
    {
        width: 85vw;
        left: 7vw;
        bottom: 0;
    }
    
    
    #pic4
    {
        width: 85vw;
        left: 7vw;
        bottom: 0;
    }
    
    
    #pic5
    {
        width: 85vw;
        left: 7vw;
        bottom: 0;
    }

    
    #pic6
    {
        width: 85vw;
        left: 7vw;
        bottom: 0;
    }
    
    
    #pic7
    {
        width: 85vw;
        left: 7vw;
        bottom: 0;
    }
    
    
    #pic8
    {
        width: 85vw;
        left: 7vw;
        bottom: 0;
    }

    
    #pic9
    {
        width: 85vw;
        left: 7vw;
        bottom: 0;
    }
    

    #pic10
    {
        width: 85vw;
        left: 7vw;
        bottom: 0;
    }
    
    
    #pic11
    {
        width: 85vw;
        left: 7vw;
        bottom: 0;
    }
    
    
    #pic12
    {
        width: 85vw;
        left: 7vw;
        bottom: 0;
    }
    

    .chapter
    {
        padding:  0;
    }

    .chapter .character
    {
        color: #000;
         border-bottom: 1.5px solid #e00;

    }
    
    .hint
    {
        margin: 2vh 5vw;
        text-align: center;
    }

    .chapter .cntn
    {
        font-size: 2.3vh;
        font-weight: 600;
        color: #000;
         text-transform: uppercase;
    }

    .chapter .cntn i
    {
        font-size: 2.7vh;

    }
    
    .iconn
    {
        height: 100%;
        margin: 1vh 0;
    }
    
    .prev
    {
        text-align: left;
    }
    
    .next
    {
        text-align: right;
    }

    @-webkit-keyframes pulsate {
    0% {
        opacity: 0.5;
    }
    50% {
        opacity: 1.0;
    }
    100% {
        opacity: 0.5;
    }
}

    .preview
    {
        margin: 10vh 3vh 5vh 3vh;
        background-color: #ffffff;
        padding: 5vh 5vw;
    }
    
    .thumbnail
    {
        width: 100%;
    }
    
    .story-title
    {
        font-family: 'Roboto', sans-serif;
        font-size: 1.5vh;
        font-weight: normal;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.5;
        letter-spacing: normal;
        text-align: left;
        color: #000;
        text-transform: uppercase;
    }
    
   .preview p
    {
        font-family: 'Roboto', sans-serif;
        font-size: 2.25vh;
        font-weight: normal;
        font-stretch: normal;
        line-height: 1.43;
        letter-spacing: normal;
        text-align: left;
        color: #000;
        display: block;
        font-style: italic;
        padding: 1vh !important;
    }
    
    .story-title 
    {
        display: block;
        font-size: 2vh;
        margin: 1.8vh;
    }

    .story-title span
    {
        display: block;
        font-size: 2.5vh;
    }
    

    .hidden
    {
        display: none;
    }

    .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;
        margin: 0 8vw;
    }

    .notyet
    {
        text-align: center !important;
        color: #000;
        height: 100vh;
        width: 100vw;
        padding: 35vh 5vw 20vh 5vw;
        position: absolute;
        background-color: rgba(0,0,0,0.5);
        top: 0;
        
    }
    
    .card-panel
    {
        font-family: 'Bebas Neue', sans-serif;
        font-size: 3.5vh;
        font-weight: normal;
        font-stretch: normal;
        line-height: 1.13;
        letter-spacing: normal;
        text-align: center;
        color: #000;
        display: block;
        padding-top: 7vh;
        
        border-radius: 2vh;
    }
    
    .card-panel h1
    {
        font-size: 6vh;
        line-height: 0;
    }

    

    .side-nav li
    {
        text-transform: uppercase;
        margin: 1.5vh 0;
    }

    .side-nav li a
    {

        line-height: 2.5vh;
    }

    .modal-content
    {
        padding: 5vh 5vw !important;
        
    }
    
    .modal-content h3
    {
        font-family: 'Bebas Neue', sans-serif;
        font-size: 5vh;
        font-weight: 600;
        font-style: normal;
        font-stretch: normal;
        letter-spacing: normal;
        text-align: left;
        color: #000000;
        text-transform: uppercase; 
    }
    
    .modal-content p
    {
        font-family: 'Roboto', sans-serif;
        font-size: 2.3vh;
        font-weight: 300;
        font-style: normal;
        font-stretch: normal;
        line-height: 3.5vh;
        letter-spacing: normal;
        text-align: left;
        color: #000000;
    }
    
    .modal-footer
    {
        padding: 2vh 5vw 4vh 5vw !important;
        font-size: 2vh;
        color: #e000;
    }

   
    .modal-footer a
    {
        color: #e00;
    }

   
    .share
    {
        font-family: 'Roboto', sans-serif;
        font-size: 2.5vh;
        font-weight: normal;
        font-style: normal;
        font-stretch: normal;
        letter-spacing: normal;
        color: #000;
        text-align: center;
        margin-bottom: 3vh;
        margin-top: 4vh;
        padding: 0 7vw;
    }

    .share a
    {
        margin: 0 2vw;
        font-size: 4vh;
        color: #e00;
    }

    .socmed
    {
        margin-top: 3vh;
    }

}

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



@media only screen and (orientation:landscape){




    .layer1
    {
        z-index: 1;
    }

    .layer2
    {
        z-index: 2;
    }

    body
    {
        background-image: url(Assets/story-background-d.jpg);
        background-attachment:fixed;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 115%;
        margin: 0;
    }


    .button-collapse i
    {
        font-size: 3rem;
    }

    .button-collapse
    {
        position: fixed;
        right: 15vw;
        top: 5vh;
        font-size: 3rem;
        color: #e00;
        z-index: 105;
    }




    /* 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;
    }
    
    .icon
    {
        height: 100%;
    }
    
    .cta
    {
        height: 150%;
    }



    /* gif */

 .youtube-player-gif {
        position: relative;
        padding-bottom: 56.23%;
        /* Use 75% for 4:3 videos */
        height: 0;
        overflow: hidden;
        max-width: 100%;
        background: #000;
    }

    .youtube-player-gif iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 100;
        background: transparent;
    }

    .youtube-player-gif img {
        bottom: 0;
        display: block;
        left: 0;
        margin: auto;
        max-width: 100%;
        width: 100%;
        position: absolute;
        right: 0;
        top: 0;
        border: none;
        height: auto;
        cursor: pointer;
        -webkit-transition: .4s all;
        -moz-transition: .4s all;
        transition: .4s all;
    }

    .youtube-player-gif img:hover {
        -webkit-filter: brightness(75%);
    }

    .youtube-player-gif .play {
        height: 72px;
        width: 72px;
        left: 50%;
        top: 50%;
        margin-left: -36px;
        margin-top: -36px;
        position: absolute;
        background: url("//i.imgur.com/TxzC70f.png") no-repeat;
        cursor: pointer;
        z-index: 105;
    }

    

    .youtube-player {
        position: relative;
        padding-bottom: 56.23%;
        /* Use 75% for 4:3 videos */
        height: 0;
        overflow: hidden;
        max-width: 100%;
        background: #000;
        
    }

    .youtube-player iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 100;
        background: transparent;
    }

    .youtube-player img {
        bottom: 0;
        display: block;
        left: 0;
        margin: auto;
        max-width: 100%;
        width: 100%;
        position: absolute;
        right: 0;
        top: 0;
        border: none;
        height: auto;
        cursor: pointer;
        -webkit-transition: .4s all;
        -moz-transition: .4s all;
        transition: .4s all;
    }

    .youtube-player img:hover {
        -webkit-filter: brightness(75%);
    }

    .youtube-player .play {
        height: 72px;
        width: 72px;
        left: 50%;
        top: 50%;
        margin-left: -36px;
        margin-top: -36px;
        position: absolute;
        background: url("//i.imgur.com/TxzC70f.png") no-repeat;
        cursor: pointer;
    }

    .vid-description
    {
        text-align: center;
        padding: 0.5vh 0vw 2vh 0vw;
    }
    
    .chapter-header
    {
        width: 100vw; 
        height: 70vh;
        position: relative;
    }
    
    #header-1
    {
        background-image: url(Assets/chapter-1-thumbnail.jpg);
        background-position: top center;
        background-size: cover;
        padding: 25vh 21vw;
        text-align: center;
    }
    
    #header-2
    {
        background-image: url(Assets/chapter-2-thumbnail.jpg);
        background-position: top center;
        background-size: cover;
        padding: 25vh 25vw;
        text-align: center;
    }
    
    #header-3
    {
        background-image: url(Assets/chapter-3-thumbnail.jpg);
        background-position: center;
        background-size: cover;
        padding: 25vh 30vw;
        text-align: center;
    }
    
    #header-4
    {
        background-image: url(Assets/chapter-4-thumbnail.jpg);
        background-position: top left;
        background-size: cover;
        padding: 25vh 32vw;
        text-align: center;
    }
    
    #header-5
    {
        background-image: url(Assets/chapter-5-thumbnail.jpg);
        background-position: top center;
        background-size: cover;
        padding: 25vh 27vw;
        text-align: center;
    }
    
    #header-6
    {
        background-image: url(Assets/chapter-6-thumbnail.jpg);
        background-position: top center;
        background-size: cover;
        padding: 25vh 25vw;
        text-align: center;
    }
    
    .chapter-title
    {
        width: 80%;
    }
    
    .header-share
    {
        position: absolute;
        bottom: 3vh;
        right: 5vw;
    }
    
    .header-share img
    {
        margin: 1vh;
    }

    .story
    {
        font-family: 'Roboto', sans-serif;
        overflow-x: hidden;
        padding: 0 0 10vh 0;
    }


    .story .material-icons
    {
        position: sticky;
        top: 0;
        right: 3vw;
    }

    .story h1
    {
        font-family: 'Bebas Neue', sans-serif;
        font-size: 4vh;
        font-weight: 600;
        font-style: normal;
        font-stretch: normal;
        letter-spacing: normal;
        line-height: 0.5;
        text-align: center;
        color: #000000;
        margin-top: 1.2vh;
        text-transform: uppercase;
    }
    
    .story h2
    {
         font-family: 'Bebas Neue', sans-serif;
        font-size: 7.5vh;
        font-weight: 600;
        font-style: normal;
        font-stretch: normal;
        letter-spacing: normal;
        text-align: center;
        color: #000000;
        text-transform: uppercase;
        line-height: 5vh;
        margin-bottom: 8vh;
    }
    
    .story h3
    {
         font-family: 'Bebas Neue', sans-serif;
        font-size: 5.5vh;
        font-weight: 600;
        font-style: normal;
        font-stretch: normal;
        letter-spacing: normal;
        text-align: left;
        color: dimgrey;
        text-transform: uppercase;
        line-height: 5vh;
        margin-bottom: 1.3vh;
        margin-top: 7vh;
        padding: 0 28vw;
    }

    .story p
    {
       font-family: 'Roboto', sans-serif;
        font-size: 2.5vh;
        font-weight: 300;
        font-style: normal;
        font-stretch: normal;
        line-height: 3.7vh;
        letter-spacing: normal;
        text-align: left;
        color: #000000;
        padding: 1.5vh 28vw;
    }
    
    .story p i
    {
       font-family: 'Roboto', sans-serif;
        font-size: 2vh;
        font-weight: 300;
        font-style: italic;
        font-stretch: normal;
        line-height: 3.7vh;
        letter-spacing: normal;
        text-align: left;
        color: #000000;
    }
    
    .story .names
    {
        font-style: italic;
    }
    .image-banner-1
    {
        width: 100vw;
        position: relative;
        height: 45vh;
        margin: 1vh 0;
    }
    
    .image-banner-2
    {
        width: 100vw;
        position: relative;
        height: 60vh;
        margin: 2vh 0;
    }
    
    .photo-caption
    {
        font-family: 'Bebas Neue', sans-serif;
        font-size: 2.5vh;
        font-weight: normal;
        font-stretch: normal;
        line-height: 1.43;
        letter-spacing: normal;
        text-align: left;
        color: #000;
        display: block;
        padding: 1.5vh 28vw 5.5vh 28vw;
    }
    
    .image-banner-1 img
    {
        position: absolute;
    }
    
    .image-banner-2 img
    {
        position: absolute;
    }
    

    #pic1
    {
        width: 75vh;
         right: 17vw;
        top: 0vh;
    }
    
    #pic2
    {
        width: 60vh;
        bottom: 0vh;
        left: 20vw;
        transform: rotate(2.3deg);
    }
    
    
    #pic3
    {
        width: 37vw;
        left: 28vw;
        bottom: 0vh;
    }
    
    #pic4
    {
       width: 37vw;
        left: 28vw;
        bottom: 0vh;
    }
    
    
    #pic5
    {
        width: 37vw;
        left: 28vw;
        bottom: 0vh;
    }
    
    
    #pic6
    {
        width: 37vw;
        left: 28vw;
        bottom: 0vh;
    }
    
    
    
    #pic7
    {
        width: 37vw;
        left: 28vw;
        bottom: 0vh;
    }
    
    
    #pic8
    {
        width: 37vw;
        left: 28vw;
        bottom: 0vh;
    }
    
    
    #pic9
    {
        width: 37vw;
        left: 28vw;
        bottom: 0vh;
    }
    
    
    #pic10
    {
       width: 37vw;
        left: 28vw;
        bottom: 0vh;
    }
    
    
    #pic11
    {
        width: 37vw;
        left: 28vw;
        bottom: 0vh;
    }
    
    
    
    #pic12
    {
        width: 37vw;
        left: 28vw;
        bottom: 0vh;
    }
    
    
    
    .chapter
    {
        padding: 0 0;
    }

    .chapter .character
    {
        color: #000;
         border-bottom: 2px solid #e00;

    }
    
    .chapter .character:hover
    {
        color: #000;
         border-bottom: 5px solid #e00;
        font-weight: 600;

    }


    @-webkit-keyframes pulsate {
    0% {
        opacity: 0.5;
    }
    50% {
        opacity: 1.0;
    }
    100% {
        opacity: 0.5;
    }
}

    .preview
    {
        margin: 10vh 25vw 5vh 25vw;
        background-color: #fff;
        padding: 3vw;
    }
    
    .thumbnail
    {
        width: 100%;
    }
    
    .story-title
    {
        font-family: 'Roboto', sans-serif;
        font-size: 1.5vh;
        font-weight: normal;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.5;
        letter-spacing: normal;
        text-align: left;
        color: #000;
        text-transform: uppercase;
        
        margin: 5vh 0;
    }
    
   .preview p
    {
        font-family: 'Roboto', sans-serif;
        font-size: 2vh;
        font-weight: normal;
        font-stretch: normal;
        line-height: 1.43;
        letter-spacing: normal;
        text-align: left;
        color: #000;
        display: block;
        font-style: italic;
        padding: 0;
    }

    .story-title span
    {
        display: block;
        font-size: 2.2vh;
    }

    .hidden
    {
        display: none;
    }

    .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: 2.5vw;
        border-left: solid 1.25vw #e00000;
        margin-left: 30vw;
        margin-right: 30vw;
    }
    
    .blockquote span
    {
        font-style: italic;
        
    }

    .notyet
    {
        text-align: center !important;
        color: #000;
        height: 100vh;
        width: 100vw;
        padding: 45vh 0 10vh 0;
        position: absolute;
        background-color: rgba(0,0,0,0.5);
        top: 0;
        
    }
    
    .card-panel
    {
        font-family: 'Bebas Neue', sans-serif;
        font-size: 3.5vh;
        font-weight: normal;
        font-stretch: normal;
        line-height: 1.13;
        letter-spacing: normal;
        text-align: center;
        color: #000;
        display: block;
        padding-top: 7vh;
        
        border-radius: 2vh;
    }
    
    .card-panel h1
    {
        font-size: 6vh;
        line-height: 0;
    }
        
    
    .hint
    {
        margin: 0 20.5vw;
    }
    
    .prev
    {
        text-align: left;
    }
    
    .next
    {
        text-align: right;
    }
    
    .cntn
    {
        font-size: 2.3vh;
        font-weight: 600;
        color: #000;
         text-transform: uppercase;
    }

    .cntn i
    {
        font-size: 2.7vh;
        margin: 0 2vw;
    }


    .side-nav li
    {
        text-transform: uppercase;
        margin: 1.5vh 0;
    }

    .side-nav li a
    {

        line-height: 2.5vh;
    }
    
    .modal
    {
        width: 40vw;
    }

    .modal-content
    {
        padding: 3vh 2vw !important;
        
    }
    
    .modal-content h3
    {
        font-family: 'Bebas Neue', sans-serif;
        font-size: 5vh;
        font-weight: 600;
        font-style: normal;
        font-stretch: normal;
        letter-spacing: normal;
        text-align: left;
        color: #000000;
        text-transform: uppercase; 
    }
    
    .modal-content p
    {
        font-family: 'Roboto', sans-serif;
        font-size: 2.5vh;
        font-weight: 300;
        font-style: normal;
        font-stretch: normal;
        line-height: 3.7vh;
        letter-spacing: normal;
        text-align: left;
        color: #000000;
    }
    
    .modal-footer
    {
        padding: 2vh 2vw 4vh 2vw !important;
        font-size: 2vh;
        color: #e000;
    }

   
    .modal-footer a
    {
        color: #e00;
    }

   
    .share
    {
        font-family: 'Roboto', sans-serif;
        font-size: 2.5vh;
        font-weight: normal;
        font-style: normal;
        font-stretch: normal;
        letter-spacing: normal;
        color: #000;
        text-align: center;
        margin-bottom: 3vh;
        margin-top: 4vh;
        padding: 0 7vw;
    }

    .share a
    {
        margin: 0 2vw;
        font-size: 2.5vw;
        color: #e00;
    }
    
    .socmed
    {
        margin-top: 3vh;
    }


}