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

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

.disabled
    {
        opacity: 0.3;
        -webkit-filter: grayscale(100%);
        filter: grayscale(100%);
    }

@media only screen and (orientation:portrait){

    body
    {
        background-color: #f9eed9;
        background-size: cover;
        overflow-x: hidden;
    }
    
    #header
    {
        height: 100vh;
        width: 100vw;
        font-family: 'Merriweather', serif;
        background: rgba(0,0,0,0.5);
        position: relative;
        overflow-x: hidden;
    }
    
    .header-bg
    {
        min-width: 100vw;
        height: 100vh;
        position: absolute;
        left: -55vw;
        opacity: 0.6;
    }
    
    .header-logo
    {
        width: 90vw;
        position: absolute;
        top: 15vh;
        left: 5vw;
    }
    
    .header-para
    {
         position: absolute;
        color: #fff;
        top: 35vh;
        font-size: 1.75vh;
        padding: 0 5vw;
        text-align: center;
        text-shadow: 1.5px 1.5px 1.5px rgba(0, 0, 0, 0.16);
    }
    
    .section-title
    {
        margin: 1vh 0;
        width: 50%;
    }
    
    .timeline-title
    {
        margin: 0;
        width: 70%;
    }
    
    .section
    {
        height: auto;
        width: 100vw;
        padding: 8vh 5vw;
    }
    
    button
    {
        width: 65vw;
        height: 6vh;
        border-radius: 10px;
        border: solid 1px #c89e51;
        background-color: #f9eed9;
        
        font-family: 'Playfair Display', serif;
        font-size: 2.3vh;
        font-weight: bold;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.1;
        letter-spacing: normal;
        text-align: center;
        color: #000000;
        margin: 1.5vw;
    }
    
    .section p
    {
        font-family: 'Merriweather', serif;
        font-size: 1.65vh;
        font-weight: normal;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.67;
        letter-spacing: normal;
        text-align: center;
        color: #000000;
    }
    
    #season3
    {
        
        text-align: center;
    }
    
    #season2
    {
        
        text-align: center;
    }
    
    #season1
    {
        
        text-align: center;
    }

    .season .swiper-container, #season1 .swiper-container {
      width: 100%;
      padding: 0 3vw 2vh 3vw;
        box-sizing: border-box;
        
    }
    .season .swiper-slide, #season1 .swiper-slide{
      background-position: center;
      background-size: cover;
      width: 80%;
      height: 53vh;
        padding: 2vh 2vw;
        background-color: #f9eed9;
    }
    
    .season .swiper-slide img, #season1 .swiper-slide img {
      width: 50%;
    }
    
    .season .swiper-slide h1, #season1 .swiper-container h1 {
        font-family: 'Playfair Display', serif;
        font-weight: bold;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.09;
        letter-spacing: normal;
        text-align: center;
        color: #000000;
        font-size: 3vh;
        margin: 0;
    }
    
    .season .swiper-slide h2, #season1 .swiper-container h2 {
        font-family: 'Playfair Display', serif;
        font-weight: normal;
        font-style: italic;
        font-stretch: normal;
        line-height: 1.3;
        letter-spacing: normal;
        text-align: center;
        color: #a50000;
        font-size: 2vh;
        margin: 0;
    }
    
    .season .swiper-slide p, #season1 .swiper-container p {
        font-family: 'Merriweather', serif;
        font-weight: normal;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.67;
        letter-spacing: normal;
        text-align: center;
        color: #000000;
        font-size: 1.65vh;
        margin: 1vh 0;
        padding: 0;
    }
    
    .swiper-button-next
    {
       margin-top: 30vh;
        margin-right: 3vw;
        background-image: url(gfx/arrow%20next@3x.png);
        background-size: contain;
        width: 20vw;
    }
    
    .swiper-button-prev
    {
       margin-top: 30vh;
        margin-left: 3vw;
        background-image: url(gfx/arrow%20back@3x.png);
        background-size: contain;
        width: 20vw;
    }
    
    #map
    {
        height: 100vh;
        width: 100vw;
        position: relative;
        overflow-x: hidden;
    }
    
    #map-svg
    {
        height: 100vh;
        position: absolute;
        left: -45vw;
        top: 0;
        z-index: 2;
    }
    
    .map-box
    {
        height: 42vh;
        width: 80vw;
        border: solid 0.5px #f2debd;
        background-color: #fcf7ec;
        padding: 5vh 3.5vw;
        text-align: center;
        
        position: absolute;
        z-index: 5;
        left: 10vw;
        top: 8vh;
    }
    
    .map-box h1
    {
        font-family: 'Playfair Display', serif;
        font-size: 2vh;
        font-weight: bold;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.1;
        letter-spacing: normal;
        text-align: center;
        color: #000000;
        margin-top: 0;
    }
    
    .map-box p
    {
        font-family: 'Merriweather', serif;
        font-size: 1.5vh;
        font-weight: normal;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.5;
        letter-spacing: normal;
        text-align: center;
        color: #000000;
    }
    
    .states
    {
        padding: 3vh 5vw;
        text-align: center;
        
        position: absolute;
        bottom: 10vw;
        z-index: 5;
    }
    
    .states a
    {
        padding: 1vh 5vw;
        border: solid 0.5px #000000;
        background-color: #fcf7ec;
        display: inline-block;
        color: #000;
        margin: 1vh 1vw;
        border-radius: 10px;
    }
    
    .states a:visited
    {
        background-color: #f2debd;
    }
    
    #timeline
    {
        background-image: url(gfx/TLS-web-BG.jpg);
        background-size: cover;
        text-align: center;
        z-index: 5;
        position: relative;
        
        height: 100vh;
        width: 100vw;
        padding: 8.5vh 0;
    }
    
    #timeline .swiper-container {
      width: 100%;
      height: 80vh;
        margin: 2vh 0;
        
    }
    
    #timeline .swiper-slide {     }
    
    #timeline .slide-content {
      text-align: center;
        height: 69vh;
        background-color: #fcf7ec;
        position: relative;
    }
    
    #timeline .swiper-slide .caption
    {
        position: absolute;
        left: 2vw;
        top: 31vh;
        text-align: left;
        color: #fff;
        
        text-shadow: 1.5px 1.5px 1.5px rgba(0, 0, 0, 0.16);
        font-family: 'Merriweather', serif;
        font-size: 1.25vh;
        font-weight: 900;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.54;
        letter-spacing: normal;
        text-align: left;
    }
    
    #timeline .swiper-slide .caption span
    {
        display: block;
    }
    
    #timeline .swiper-slide h2
    {
        font-family: 'Playfair Display', serif;
        font-size: 1.65vh;
        font-weight: bold;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.65;
        letter-spacing: normal;
        color: #000000;
        text-transform: uppercase;
        
        margin: 0 1vw;
    }
    
    #timeline .swiper-slide h1
    {
        font-family: 'Playfair Display', serif;
        font-size: 3vh;
        font-weight: normal;
        font-style: italic;
        font-stretch: normal;
        line-height: 1;
        letter-spacing: normal;
        color: #a50000;
        
        margin: 0;
    }
    
    #timeline .swiper-slide p
    {
        font-family: 'Merriweather', serif;
        font-weight: normal;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.65;
        letter-spacing: normal;
        color: #000000;
    }
    
    #timeline .swiper-slide img
    {
        width: 100%;   
    }
    
    #timeline .swiper-pagination
    {
        
    }
    
    #timeline .swiper-pagination-bullet-active 
    {
        background: #a50000;
    }
    
    .content-tl1
    {
       
        text-align: left;
        padding: 5vw;
        
    }
    
    
    .content-tl2
    {
        
        text-align: center;
        padding: 5vw;
    }
    
    #footer
    {
        height: 100vh;
        width: 100vw;
         padding: 15vh 5vw;
    }
    
    
     #credits
    {
        margin: 0;
        padding: 0 0 5vh 0;
    }
    
    #credits h1
    {
        font-family: 'Playfair Display', serif;
        font-size: 2vh;
        font-weight: 500;
        font-style: normal;
        text-decoration: underline;
        font-stretch: normal;
        line-height: 1.53;
        letter-spacing: normal;
        text-align: center;
        color: #000000;
        text-transform: uppercase;
         margin: 4vh;
    }
    
    #credits p
    {
        font-family: 'Playfair Display', serif;
        font-size: 2vh;
        font-weight: 500;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.53;
        letter-spacing: normal;
        text-align: center;
        color: #000000;
        text-transform: uppercase;
        margin: 1.5vh;
    }
    
    #credits p a
    {
 
        color: #000000;

    }
    
    #credits p span
    {
        font-family: 'Playfair Display', serif;
        font-size: 1.9vh;
        font-weight: 500;
        font-style: italic;
        font-stretch: normal;
        line-height: 1.53;
        letter-spacing: normal;
        text-align: center;
        color: #e00000;
        text-transform: capitalize;
        display: block;
    }
    
    
        .share
    {
        text-align: center;
        margin: 5vh;
    }
    
    .share b
    {
        font-family: 'Playfair Display', serif;
        font-size: 2.5vh;
        text-transform: uppercase;
        display: block;
        color: #000;
        margin-bottom: 3vh;
    }

    
    .share a
    {
        margin: 1vh 3.4vw;
        font-size: 3.5vh;
        color: #e00;
    }
    
    
    .legal
    {
        color: #000;
        font-size: 1.7vh;
        text-align: center;
    }
    
    .legal a
    {
        color: #000;
        font-size: 1.7vh;
    }
    
    .branding
    {
        margin-top: 1.85vh;
        text-align: center;
    }
    
    .branding img
    {
        width: 17%;
    }
    
    .branding a
    {
        margin-right: 4.5vw;
        font-size: 2.7vh;
        color: #000;
    }
    
    .modal
    {
        height: 85vh;
        background-color: #f9eed9;
    }
    
    .modal-content
    {
        height: 100%;
        
    }
    
    .modal .swiper-container {
      width: 100%;
      height: 100%;
      margin-left: auto;
      margin-right: auto;
        
    }
    .modal .swiper-slide {
      
      
    }
    
    .modal .swiper-content {
      
        padding: 1.5vh 2vw;
    }
    
    .modal .swiper-pagination-bullet-active 
    {
        background: #a50000;
    }
    
    .modal h1
    {
        font-family: 'Playfair Display', serif;
        font-size: 2.7vh;
        font-weight: normal;
        font-style: italic;
        font-stretch: normal;
        line-height: 1;
        letter-spacing: normal;
        text-align: left;
        color: #a50000;
    }
    
    .modal h1 span
    {
        
        font-size: 1.7vh;
        display: block;
    }
    
    .modal p
    {
        font-family: 'Merriweather', serif;
        font-weight: normal;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.7;
        letter-spacing: normal;
        text-align: left;
        color: #000000;
        font-size: 1.55vh;
    }
    
    .modal .potr
    {
        width: 50%;
        margin-right: 2vw;
    }
    
    .modal .land
    {
        width: 100%;
    }

}

/*------------------------Landscape desktop-----------------------------*/



@media only screen and (orientation:landscape) and (min-width : 800px){    
    body
    {
        background-image: url(gfx/TLS-web-BG.jpg);
        background-size: cover;
        overflow-x: hidden;
        
    }
    
 .section
    {
        height: 100vh;
        width: 100vw;
        padding: 7.8vh 15vw;
    }
    
    .season p, #season1 p
    {
        font-family: 'Merriweather', serif;
        font-size: 0.75vw;
        font-weight: normal;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.67;
        letter-spacing: normal;
        text-align: center;
        color: #000000;
        
        padding: 0 17vw;
    }
    
    button
    {
        width: 15vw;
        height: 6vh;
        border-radius: 10px;
        border: solid 1px #c89e51;
        background-color: #f9eed9;
        
        font-family: 'Playfair Display', serif;
        font-size: 1vw;
        font-weight: bold;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.1;
        letter-spacing: normal;
        text-align: center;
        color: #000000;
        margin: 2vh;
    }
    
    #header
    {
        height: 100vh;
        width: 100vw;
        font-family: 'Merriweather', serif;
        position: relative;
        background: rgba(0,0,0,0.5);
    }
    
    .header-bg
    {
        min-width: 100vw;
        height: 100vh;
        opacity: 0.6;
    }
    
    .header-logo
    {
        width: 30vw;
        position: absolute;
        bottom: 3vh;
        right: 3vw;
    }
    
    .header-para
    {
        width: 35vw;
        font-size: 0.9vw;
        line-height: 1.7;
        position: absolute;
        top: 5vh;
        left: 3.5vw;
        color: #fff;
        font-weight: 100;
        text-shadow: 1.5px 1.5px 1.5px rgba(0, 0, 0, 0.16);
    }
    
    .section-title
    {
        margin: 1vh 0;
        height: 2.5vh;
    }

    #season3
    {
        background-image: url(gfx/TLS-season-3.jpg);
        background-size: cover;
        text-align: center;
    }
    
    .season .swiper-container {
      width: 100%;
      height: 65%;
        margin-top: 3vh;
        margin-bottom: 2vh;
    }
    
    .season .swiper-slide {
      text-align: center;
    }
    
    .season .swiper-slide img {
      width: 100%;
    }
    
    .season .swiper-slide h1 {
        font-family: 'Playfair Display', serif;
        font-weight: bold;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.09;
        letter-spacing: normal;
        text-align: center;
        color: #000000;
        font-size: 1vw;
        margin: 0;
    }
    
    .season .swiper-slide h2 {
        font-family: 'Playfair Display', serif;
        font-weight: normal;
        font-style: italic;
        font-stretch: normal;
        line-height: 1.3;
        letter-spacing: normal;
        text-align: center;
        color: #a50000;
        font-size: 0.7vw;
        margin: 0;
    }
    
    .season .swiper-slide p {
        font-family: 'Merriweather', serif;
        font-weight: normal;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.67;
        letter-spacing: normal;
        text-align: center;
        color: #000000;
        font-size: 0.63vw;
        margin: 1vh 0;
        padding: 0;
    }
    
    
    #season2
    {
        background-image: url(gfx/TLS-season-2.jpg);
        background-size: cover;
        text-align: center;
    }
    
    #season1 .swiper-container {
      width: 100%;
      height: 60%;
        margin-top: 5vh;
        margin-bottom: 3vh;
    }
    
    #season1 .swiper-slide {
      text-align: center;
    }
    
    #season1 .swiper-slide img {
      width: 100%;
    }
    
    #season1 .swiper-slide h1 {
        font-family: 'Playfair Display', serif;
        font-weight: bold;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.09;
        letter-spacing: normal;
        text-align: center;
        color: #000000;
        font-size: 1vw;
        margin: 0;
    }
    
    #season1 .swiper-slide h2 {
        font-family: 'Playfair Display', serif;
        font-weight: normal;
        font-style: italic;
        font-stretch: normal;
        line-height: 1.3;
        letter-spacing: normal;
        text-align: center;
        color: #a50000;
        font-size: 0.7vw;
        margin: 0;
    }
    
    #season1 .swiper-slide p {
        font-family: 'Merriweather', serif;
        font-weight: normal;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.67;
        letter-spacing: normal;
        text-align: center;
        color: #000000;
        font-size: 0.63vw;
        margin: 1vh 0;
        padding: 0;
    }
    
    #season1
    {
        background-image: url(gfx/TLS-season-1.jpg);
        background-size: cover;
        text-align: center;
        z-index: 5;
        position: relative;
        padding: 7.8vh 20vw;
    }
    
    #map
    {
        height: 100vh;
        width: 100vw;
        position: relative;
    }
    
    #map-svg
    {
        min-width: 100vw;
        min-height: 100vh;
        z-index: 2;
        position: relative;
    }
    
    #map svg
    {
       z-index: 5;
        position: absolute;
    }
    
    .map-box
    {
        height: 42vh;
        width: 22vw;
        border: solid 0.5px #f2debd;
        background-color: #fcf7ec;
        padding: 1.5vh 1.8vw;
        text-align: center;
        
        position: absolute;
        z-index: 8;
        left: 39vw;
        top: 5vh;
    }
    
    .map-box h1
    {
        font-family: 'Playfair Display', serif;
        font-size: 2vh;
        font-weight: bold;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.1;
        letter-spacing: normal;
        text-align: center;
        color: #000000;
    }
    
    .map-box p
    {
        font-family: 'Merriweather', serif;
        font-size: 1.5vh;
        font-weight: normal;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.5;
        letter-spacing: normal;
        text-align: center;
        color: #000000;
    }
    
    #timeline
    {
        background-image: url(gfx/TLS-web-BG.jpg);
        background-size: cover;
        text-align: center;
        z-index: 5;
        position: relative;
        
        height: 100vh;
        width: 100vw;
        padding: 8.5vh 15vw;
    }

    
    #timeline .swiper-container {
      width: 100%;
      height: 65vh;
        margin: 5vh 0;
    }
    
    #timeline .swiper-slide {}
    
    #timeline .slide-content {
      text-align: center;
      background: #fcf7ec;
        height: 55vh;
        position: relative;
        
      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
    
    #timeline .swiper-slide .caption
    {
        position: absolute;
        left: 1vw;
        bottom: 0vh;
        text-align: left;
        color: #fff;
        
        text-shadow: 1.5px 1.5px 1.5px rgba(0, 0, 0, 0.16);
        font-family: 'Merriweather', serif;
        font-size: 1.25vh;
        font-weight: 900;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.54;
        letter-spacing: normal;
        text-align: left;
    }
    
    #timeline .swiper-slide .caption span
    {
        display: block;
    }
    
    #timeline .swiper-slide h2
    {
        font-family: 'Playfair Display', serif;
        font-size: 1vw;
        font-weight: bold;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.65;
        letter-spacing: normal;
        color: #000000;
        text-transform: uppercase;
        
        margin: 0 1vw;
    }
    
    #timeline .swiper-slide h1
    {
        font-family: 'Playfair Display', serif;
        font-size: 3vw;
        font-weight: normal;
        font-style: italic;
        font-stretch: normal;
        line-height: 1;
        letter-spacing: normal;
        color: #a50000;
        
        margin: 0;
    }
    
    #timeline .swiper-slide p
    {
        font-family: 'Merriweather', serif;
        font-weight: normal;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.65;
        letter-spacing: normal;
        color: #000000;
    }
    
    #timeline .swiper-pagination
    {
        
    }
    
    #timeline .swiper-pagination-bullet-active 
    {
        background: #a50000;
    }
    
    .swiper-button-next
    {
       margin-top: 25vh;
        margin-left: 1vw;
        background-image: url(gfx/arrow%20next@3x.png);
        background-size: contain;
        width: 7vw;
    }
    
    .swiper-button-prev
    {
       margin-top: 25vh;
        margin-right: 1vw;
        background-image: url(gfx/arrow%20back@3x.png);
        background-size: contain;
        width: 7vw;
    }
    
    .content-tl1
    {
        padding: 0 2.5vw;
        text-align: left;
    }
    
    .img-tl
    {
        max-width: 55%;
        height: 100%;
    }
    
    .content-tl2
    {
        padding: 0 15vw;
        text-align: center;
    }
    
    #footer
    {
        background-image: url(gfx/TLS-web-BG.jpg);
        background-size: cover;
        text-align: center;
        height: 100vh;
        width: 100vw;
        padding: 5vh 15vw;
    }

    
     #credits
    {
        
    }
    
    #credits h1
    {
        font-family: 'Playfair Display', serif;
        font-size: 1vw;
        font-weight: 500;
        font-style: normal;
        text-decoration: underline;
        font-stretch: normal;
        line-height: 1.53;
        letter-spacing: normal;
        text-align: center;
        color: #000000;
        text-transform: uppercase;
         margin: 4vh;
    }
    
    #credits p
    {
        font-family: 'Playfair Display', serif;
        font-size: 1vw;
        font-weight: 500;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.53;
        letter-spacing: normal;
        text-align: center;
        color: #000000;
        text-transform: uppercase;
        margin: 3.5vh;
    }
    
    
    #credits p span
    {
        font-family: 'Playfair Display', serif;
        font-size: 1vw;
        font-weight: 500;
        font-style: italic;
        font-stretch: normal;
        line-height: 1.53;
        letter-spacing: normal;
        text-align: center;
        color: #a50000;
        text-transform: capitalize;
        display: block;
    }
    
    
    .share
    {
        text-align: center;
        margin: 8vh;
    }
    
    .share b
    {
        font-family: 'Playfair Display', serif;
        display: block;
        color: #000;
        font-size: 1.5vw;
        margin-bottom: 3vh;
        text-transform: uppercase;
    }

    
    .share a i
    {
        height: 4vh;
        width: 4vh;
        padding: 1vh;
        margin: 1vh 1vw;
        font-size: 2vh;
        color: #fff;
        background-color: #a50000;
        border-radius: 3vh;
    }
    
    
    .legal
    {
        color: #000;
        font-size: 1.7vh;
        text-align: center;
    }
    
    .legal a
    {
        color: #000;
        font-size: 1.7vh;
    }
    
    .branding
    {
        margin-top: 1.85vh;
        text-align: center;
    }
    
    .branding a
    {
        margin-right: 2.25vw;
        margin-left: 2.25vw;
        font-size: 2.5vh;
        color: #000;
    }
    
    .branding img
    {
        width: 6vw;
    }
    
    .modal
    {
        height: 85vh;
        background-color: #f9eed9;
    }
    
    .modal-content
    {
        height: 100%;
        
    }
    
    .modal .swiper-container {
      width: 100%;
      height: 100%;
      margin-left: auto;
      margin-right: auto;
        
    }
    .modal .swiper-slide {
      
      
    }
    
    .modal .swiper-content {
      
        padding: 3vh 5vw;
    }
    
    .modal .swiper-pagination-bullet-active 
    {
        background: #a50000;
    }
    
    .modal h1
    {
        font-family: 'Playfair Display', serif;
        font-size: 2.7vw;
        font-weight: normal;
        font-style: italic;
        font-stretch: normal;
        line-height: 1.11;
        letter-spacing: normal;
        text-align: left;
        color: #a50000;
    }
    
    .modal h1 span
    {
        
        font-size: 1.7vw;
        display: block;
    }
    
    .modal p
    {
        font-family: 'Merriweather', serif;
        font-weight: normal;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.8;
        letter-spacing: normal;
        text-align: left;
        color: #000000;
    }
    
    .modal .potr
    {
        width: 40%;
        float: left;
        margin-right: 2vw;
    }
    
    .modal .land
    {
        width: 50%;
    }



}


/*------------------------Landscape mobile-----------------------------*/



@media only screen and (orientation:landscape) and (max-width : 800px){    
body
    {
        display: none;
    }

}