.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;
    }

@keyframes pulse {
    
        from 
        {
            opacity: 1;
        }
        
        to 
        {
       
            opacity: 0.7;
        }
    }

@media only screen and (orientation:portrait){

    html
    {
        overflow-x: hidden;
    }
        
    body
    {
        overflow-x: hidden;
        background-color: #111419;
    }
    
    .main-header
    {
        background-image: url(img/header-bg.png);
        background-size: auto 100%;
         background-repeat: no-repeat;
        background-position: center;
        height: 100vh;
        width: 100vw;
        padding: 20vh 5vw;
    }
    
    .main-title
    {
        width: 70vw;
        margin: 2vh 10vw;
    }
    
    .stand-first
    {
        color: #ffffff;
        margin: 2vh;
        font-size: 2.3vh;
        text-align: center;
    }
    
    .pos-relative
    {
        position: relative;
    }
    
    #dots-lines
    {
        position: absolute;
    }
    
    .light-button
    {
        border-radius: 2.2vh;
        color: #000;
        background-color: #fff;
        border: solid 0.35vh #fff;
        text-transform: uppercase;
        
        font-family: 'Lato', sans-serif;
        font-size: 1.75vh;
        font-weight: bold;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.2;
        letter-spacing: normal;
        text-align: center;
    }
    
    .dark-button
    {
        border-radius: 2.2vh;
        color: #fff;
        background-color: #111419;
        border: solid 0.35vh #fff;
        text-transform: uppercase;
        
        font-family: 'Lato', sans-serif;
        font-size: 1.75vh;
        font-weight: bold;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.2;
        letter-spacing: normal;
        text-align: center;
    }
    
    #main-button
    {
        width: 75vw;
        height: 5vh;
        margin: 1vh 7.5vw;
    }
    
    h1
    {
        font-family: 'Spectral', serif;
        font-size: 3vh;
        font-weight: 500;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.27;
        letter-spacing: -0.7px;
        text-align: left;
    }
    
    p
    {
        font-family: 'Lato', sans-serif;
        font-size: 2.5vh;
        font-weight: normal;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.6;
        letter-spacing: normal;
        text-align: left;
    }
    
    .dark-section
    {
        background-color: #111419;
        color: #fff;
        padding: 3vh 5vw;
        margin: 0;
    }
    
    .dark-section .time-box
    {
        border: solid #fff 0.2vh;
        border-radius: 0.5vh;
        padding: 0.5vh 3.5vw 2vh 3.5vw;
        text-align: right;
         margin: 2vh 0;
    }
    
    .dark-section .time-box p
    {
        font-family: 'Spectral', serif;
        font-size: 2.2vh;
        font-weight: normal;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.6;
        letter-spacing: normal;
        text-align: right;
        margin-top: 0;
    }
    
    .dark-section .time-box h2
    {
        font-family: 'Spectral', serif;
        font-size: 4vh;
        font-weight: normal;
        font-style: normal;
        font-stretch: normal;
        letter-spacing: normal;
        text-align: right;
        color: #e00;
        margin-bottom: 0;
    }
    
    .light-section
    {
        background-color: #f0f0f0;
        color: #000;
        padding: 3vh 5vw;
        margin: 0;
    }
    
    .light-section .time-box
    {
        border: solid #000 0.2vh;
        border-radius: 0.5vh;
        padding: 0.5vh 3.5vw 2vh 3.5vw;
        text-align: right;
        margin: 2vh 0;
    }
    
    .light-section .time-box p
    {
        font-family: 'Spectral', serif;
        font-size: 2.2vh;
        font-weight: normal;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.6;
        letter-spacing: normal;
        text-align: right;
        margin-top: 0;
    }
    
    .light-section .time-box h2
    {
        font-family: 'Spectral', serif;
        font-size: 4vh;
        font-weight: normal;
        font-style: normal;
        font-stretch: normal;
        letter-spacing: normal;
        text-align: right;
        color: #e00;
         margin-bottom: 0;
    }
    
    .section-ill
    {
        width: 100%;
        margin: 3vh 0;
    }
    
    .sound-bites
    {
        padding: 2vh 0;
        position: relative;
    }
    
    .profile-shot
    {
        width: 120%;
        position: relative;
        right: 2vw;
        top: 1vh;
    }
    
    #pic-danh
    {
        clip-path: circle(50.0% at 50% 50%);
    }
    
    .quote
    {
        font-family: 'Spectral', serif;
        font-size: ;
        font-weight: 500;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.4;
        letter-spacing: normal;
        text-align: left;
        margin: 0;
    }
    
    .profile-name
    {
        font-family: 'Spectral', serif;
        font-size: 2.5vh;
        font-weight: 500;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.4;
        letter-spacing: normal;
        text-align: left;
        color: #e00000;
        margin: 0 0 2vh 0;
        text-transform: uppercase;
    }
    
    audio
    {
        width: 80vw;
        position: relative;
        left: -30vw;
        top: 2vh;
    }
    
    #section-5
    {
        background-image: url(img/map.svg);
        background-size: 185%;
        background-repeat: no-repeat;
        background-position: -60vw -1vh;
        background-color: #111419;
        height: 55vh;
        position: relative;
        
    }
    
    #section-5 a
    {        
        font-family: 'Lato', sans-serif;
        font-size: 1.5vh;
        font-weight: bold;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.2;
        letter-spacing: normal;
        text-align: center;
        
    }

    
    #tag-1
    {
        position: absolute;
        top: 27vh;
        left: 36vw;
        text-align: center;
        color: #000;
    }
    
    #tag-1 img
    {
        display: block;
        margin: 0 2vh;
        width: 2.5vh;
        animation: pulse 1s infinite ease-out;
    }
    
    #tag-3
    {
        position: absolute;
        top: 35vh;
        left: 46vw;
        text-align: center;
        color: #000;
    }
    
    #tag-3 img
    {
        display: block;
        margin: 0 2vh;
        width: 2.5vh;
        animation: pulse 1s infinite ease-out;
    }
    
    #tag-4
    {
        position: absolute;
        top: 17vh;
        left: 64vw;
        text-align: center;
        color: #000;
    }
    
    #tag-4 img
    {
        display: block;
        margin: 0 3.2vh;
        width: 2.5vh;
        animation: pulse 1s infinite ease-out;
    }
    
    #tag-5
    {
        position: absolute;
        top: 23vh;
        left: 82vw;
        text-align: center;
        color: #000;
    }
    
    #tag-5 img
    {
        display: block;
        margin: 0 2vh;
        width: 2.5vh;
        animation: pulse 1s infinite ease-out;
    }
    
    .slider .indicators .indicator-item.active {
  background-color: #E00;
}
    
    #section-end h1
    {
        font-family: 'Spectral', serif;
        font-size: 2.5vh;
        font-weight: 500;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.53;
        letter-spacing: normal;
        text-align: center;
        color: #ffffff;
        text-transform: uppercase;
    }
    
    #section-end p
    {
        text-align: center;
        color: #b9b9b9;
    }
    
    #video
    {
        margin: 5vh 0;
    }
    
    #submit-story
    {
        text-align: center;
        padding: 5vh 12vw;
        margin: 5vh 0;
    }
    
    #submit-btn
    {
        width: 40vw;
        height: 5vh;
        margin: 1vh 1vw;
    }
    
    #read-btn
    {
        width: 40vw;
        height: 5vh;
        margin: 1vh 1vw;
    }
    
    #credits
    {
        margin: 5vh 0;
        padding: 5vh 0;
    }
    
    #credits h1
    {
        font-family: 'Spectral', serif;
        font-size: 1.8vh;
        font-weight: 500;
        font-style: normal;
        text-decoration: underline;
        font-stretch: normal;
        line-height: 1.53;
        letter-spacing: normal;
        text-align: center;
        color: #ffffff;
        text-transform: uppercase;
         margin: 4vh;
    }
    
    #credits p
    {
        font-family: 'Spectral', serif;
        font-size: 1.7vh;
        font-weight: 500;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.53;
        letter-spacing: normal;
        text-align: center;
        color: #ffffff;
        text-transform: uppercase;
        margin: 1.5vh;
    }
    
    #credits p a
    {
 
        color: #ffffff;

    }
    
    #credits p span
    {
        font-family: 'Spectral', serif;
        font-size: 1.7vh;
        font-weight: 500;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.53;
        letter-spacing: normal;
        text-align: center;
        color: #e00000;
        text-transform: capitalize;
        display: block;
    }
    
    #share
    {
        text-align: center;
    }
    
    #share h1
    {
        margin-bottom: 0;
    }
    
    #share i
    {
        font-size: 4.5vh;
        color: #e00000;
        margin: 1.5vh 1.8vw;
    }
    
    .branding
    {
        padding: 5vh 1vw 0 1vw;
         color: #fff;
        font-size: 1.3vh;
    }
    
    .rage
    {
        padding-top: 0.5vw;
        width: 100%;
    }
    
    .branding a
    {
        color: #fff;
    }
    
    .branding .soc-med
    {
        text-align: right;
    }
    
    .branding .soc-med i
    {
        font-size: 2vh;
        margin: 1vh 1vw;
    }
    
    .modal
    {
        width: 85vw;
        height: 90vh;
        background-color: #29292F;
        color: #fff;
        padding: 2vw;
    }
    
    .modal h1
    {
        font-family: 'Spectral', serif;
        font-size: 3vh;
        font-weight: 500;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.27;
        letter-spacing: -0.7px;
        text-align: left;
        text-decoration: underline;
    }
    
    .modal p
    {
        font-family: 'Lato', sans-serif;
        font-size: 2vh;
        font-weight: normal;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.6;
        letter-spacing: normal;
        text-align: left;
    }
    
    .img-modal
    {
        width: 100%;
        margin-bottom: 5vh;
    }
    
    .slider .slides
    {
        height: 25vh !important;
    }
    
    .slider
    {
        height: 30vh !important;
    }

}

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



@media only screen and (orientation:landscape){    

    body
    {
        overflow-x: hidden;
        background-color: #111419;
    }
    
    .main-header
    {
        background-image: url(img/header-bg.png);
        background-size: 100%;
         background-repeat: no-repeat;
        background-color: #111419;
        background-position: right -5vh;
        height: 108vh;
        width: 100vw;
        padding: 18vh 35vw;
    }
    
    .main-title
    {
        width: 30vw;
        margin-bottom: 0;
    }
    
    .stand-first
    {
        color: #ffffff;
        margin-bottom: 2vh;
        font-size: 2vh;
        text-align: center;
    }
    
    .pos-relative
    {
        position: relative;
    }
    
    #dots-lines
    {
        position: absolute;
    }
    
    .light-button
    {
        border-radius: 2.2vh;
        color: #000;
        background-color: #fff;
        border: solid 0.35vh #fff;
        text-transform: uppercase;
        
        font-family: 'Lato', sans-serif;
        font-size: 1.15vw;
        font-weight: bold;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.2;
        letter-spacing: normal;
        text-align: center;
    }
    
    .light-button:hover
    {
        color: #fff;
        background-color: #111419;
        border: solid 0.35vh #fff;
    }
    
    .dark-button
    {
        border-radius: 2.2vh;
        color: #fff;
        background-color: #111419;
        border: solid 0.35vh #fff;
        text-transform: uppercase;
        
        font-family: 'Lato', sans-serif;
        font-size: 1.15vw;
        font-weight: bold;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.2;
        letter-spacing: normal;
        text-align: center;
    }
    
    .dark-button:hover
    {
        color: #000;
        background-color: #fff;
        border: solid 0.35vh #fff;
    }
    
    #main-button
    {
        width: 25vw;
        height: 5vh;
        margin: 1vh 2.5vw;
    }
    
    h1
    {
        font-family: 'Spectral', serif;
        font-size: 3vw;
        font-weight: 500;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.27;
        letter-spacing: -0.7px;
        text-align: left;
    }
    
    p
    {
        font-family: 'Lato', sans-serif;
        font-size: 1.2vw;
        font-weight: normal;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.6;
        letter-spacing: normal;
        text-align: left;
    }
    
    
    
    .dark-section
    {
        background-color: #111419;
        color: #fff;
        padding: 5vh 15vw;
         margin: 0;
    }
    
    .dark-section .time-box
    {
        border: solid #fff 0.2vh;
        border-radius: 0.5vh;
        padding: 0.5vh 2vw 2vh 2vw;
        text-align: right;
    }
    
    .dark-section .time-box p
    {
        font-family: 'Spectral', serif;
        font-size: 2vh;
        font-weight: normal;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.6;
        letter-spacing: normal;
        text-align: right;
        margin-top: 0;
    }
    
    .dark-section .time-box h2
    {
        font-family: 'Spectral', serif;
        font-size: 4vh;
        font-weight: normal;
        font-style: normal;
        font-stretch: normal;
        letter-spacing: normal;
        text-align: right;
        color: #e00;
        margin-bottom: 0;
    }
    
    .light-section
    {
        background-color: #f0f0f0;
        color: #000;
        padding: 5vh 15vw;
        margin: 0;
    }
    
    .light-section .time-box
    {
        border: solid #000 0.2vh;
        border-radius: 0.5vh;
        padding: 0.5vh 2vw 2vh 2vw;
        text-align: right;
    }
    
    .light-section .time-box p
    {
        font-family: 'Spectral', serif;
        font-size: 2vh;
        font-weight: normal;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.6;
        letter-spacing: normal;
        text-align: right;
        margin-top: 0;
    }
    
    .light-section .time-box h2
    {
        font-family: 'Spectral', serif;
        font-size: 4vh;
        font-weight: normal;
        font-style: normal;
        font-stretch: normal;
        letter-spacing: normal;
        text-align: right;
        color: #e00;
         margin-bottom: 0;
    }
    
    .section-ill
    {
        width: 70%;
        margin: 3.5vh 0;
    }
    
    .sound-bites
    {
        padding: 2vw;
    }
    
    .profile-shot
    {
        width: 100%;
    }
    
    .quote
    {
        font-family: 'Spectral', serif;
        font-size: ;
        font-weight: 500;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.4;
        letter-spacing: normal;
        text-align: left;
        margin: 0 0 2vh 0;
    }
    
    .profile-name
    {
        font-family: 'Spectral', serif;
        font-size: 1.5vw;
        font-weight: 500;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.4;
        letter-spacing: normal;
        text-align: left;
        color: #e00000;
        margin: 2vh 0;
        text-transform: uppercase;
    }
    
    audio
    {
        width: 100%;
    }
    
    #section-5
    {
        background-image: url(img/map.svg);
        background-size: 102vw;
        background-position: center -5vh;
        background-color: #111419;
        background-repeat: no-repeat;
        height: 102vh;
        position: relative;
    }
    
    #section-5 a
    {
        font-family: 'Lato', sans-serif;
        font-size: 0.8vw;
        font-weight: bold;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.1;
        letter-spacing: normal;
        text-align: center;
    }

    
    #tag-1
    {
        position: absolute;
        top: 45vh;
        left: 48vw;
        text-align: center;
        color: #000;
    }
    
    #tag-1 img
    {
        display: block;
        margin: 0 2vh;
        animation: pulse 1s infinite ease-out;
    }

    
    #tag-3
    {
        position: absolute;
        top: 65vh;
        left: 58vw;
        text-align: center;
        color: #000;
    }
    
    #tag-3 img
    {
        display: block;
        margin: 0 2vh;
        animation: pulse 1s infinite ease-out;
    }
    
    #tag-4
    {
        position: absolute;
        top: 36vh;
        left: 69vw;
        text-align: center;
        color: #000;
    }
    
    #tag-4 img
    {
        display: block;
        margin: 0 4vh;
        animation: pulse 1s infinite ease-out;
    }
    
    #tag-5
    {
        position: absolute;
        top: 25vh;
        left: 78vw;
        text-align: center;
        color: #000;
    }
    
    #tag-5 img
    {
        display: block;
        margin: 0 2vh;
        animation: pulse 1s infinite ease-out;
    }
    
     .slider .indicators .indicator-item.active {
  background-color: #E00;
}
    
    #section-end h1
    {
        font-family: 'Spectral', serif;
        font-size: 2vw;
        font-weight: 500;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.53;
        letter-spacing: normal;
        text-align: center;
        color: #ffffff;
        text-transform: uppercase;
    }
    
    #section-end p
    {
        text-align: center;
        color: #b9b9b9;
    }
    
    #video
    {
        padding: 8vh 8vw;
        margin: 5vh 0;
    }
    
    #submit-story
    {
        text-align: center;
        padding: 5vh 12vw;
        margin: 5vh 0;
    }
    
    #submit-btn
    {
        width: 20vw;
        height: 5vh;
        margin: 1vh 1vw;
    }
    
    #read-btn
    {
        width: 20vw;
        height: 5vh;
        margin: 1vh 1vw;
    }
    
    #credits
    {
        margin: 5vh 0;
        padding: 5vh 0;
    }
    
    #credits h1
    {
        font-family: 'Spectral', serif;
        font-size: 1.2vw;
        font-weight: 500;
        font-style: normal;
        text-decoration: underline;
        font-stretch: normal;
        line-height: 1.53;
        letter-spacing: normal;
        text-align: center;
        color: #ffffff;
        text-transform: uppercase;
         margin: 4vh;
    }
    
    #credits p
    {
        font-family: 'Spectral', serif;
        font-size: 1.2vw;
        font-weight: 500;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.53;
        letter-spacing: normal;
        text-align: center;
        color: #ffffff;
        text-transform: uppercase;
        margin: 3.5vh;
    }
    
    #credits p a
    {
 
        color: #ffffff;

    }
    
    #credits p span
    {
        font-family: 'Spectral', serif;
        font-size: 1.2vw;
        font-weight: 500;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.53;
        letter-spacing: normal;
        text-align: center;
        color: #e00000;
        text-transform: capitalize;
        display: block;
    }
    
    #share
    {
        text-align: center;
    }
    
    #share i
    {
        font-size: 5vh;
        color: #e00000;
        margin: 1.5vh 1.8vw;
    }
    
    .branding
    {
        padding: 5vh 20vw 0 20vw;
         color: #fff;
    }
    
    .rage
    {
        padding-left: 3.5vw;
        width: 90%;
    }
    
    .branding a
    {
        color: #fff;
    }
    
    .branding .soc-med
    {
        text-align: right;
    }
    
    .branding .soc-med i
    {
        font-size: 1.2vw;
        margin: 0 1vw;
    }
    
    .modal
    {
        width: 70vw;
        height: 90vh !important;
        background-color: #29292F;
        color: #fff;
        padding: 5vh;
    }
    
    .modal h1
    {
        font-family: 'Spectral', serif;
        font-size: 3vw;
        font-weight: 500;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.27;
        letter-spacing: -0.7px;
        text-align: left;
    }
    
    .modal p
    {
        font-family: 'Lato', sans-serif;
        font-size: 1.2vw;
        font-weight: normal;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.6;
        letter-spacing: normal;
        text-align: left;
    }
    
    .img-modal
    {
        width: 100%;
        margin-bottom: 5vh;
    }

    
    .slider .slides
    {
        height: 70vh !important;
    }
    
    .slider
    {
        height: 75vh !important;
    }

}