@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,regular,600,700);

@media only screen and (orientation:portrait) {
    #overlay {
        position: fixed; /* Sit on top of the page content */
        width: 100vw; /* Full width (cover the whole page) */
        height: 100vh; /* Full height (cover the whole page) */
        top: 0; 
        left: 0;
        right: 0;
        bottom: 0;
        background-image: url(../graphics/rotate-phone.png);
        background-size: contain;
        z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
    }

    .header {
        display: none;
    }
        
    .card {
        display: none;
    } 
}

@media only screen and (orientation:landscape) {

    #overlay { display: none; }

    html, body {
      position: relative;
      height: 100%;
    }
    
    body {
      background: #2a1f68;
      font-family: 'Source Sans Pro', sans-serif;
      font-weight: 400;
      font-style: normal;
      font-size: 14px;
      color:#FFF;
      margin: 0;
      padding: 0;
    }
    
    /*texts*/
    
    h1
    {
        font-family: 'Source Sans Pro', sans-serif;
        font-weight: 600;
        text-align: center;
        font-size: 3.5vw;
        line-height: 3.5vh;
        margin: 4.5vh 0;
    }
    
    .h1
    {
        font-family: 'Bebas Neue', sans-serif;
        font-style: normal;
        font-weight: 500;
        font-size: 5vw;
        padding-bottom: 1vh;
        color: #e00000;
    }
    
    .result .p {
        padding-left: 20vw;
        padding-right: 20vw;
        font-family: 'Source Sans Pro', sans-serif;
      font-weight: 400;
      font-style: normal;
    }
    
    .title p {
        padding-left: 20vw;
        padding-right: 20vw;
        font-family: 'Source Sans Pro', sans-serif;
      font-weight: 400;
      font-style: normal;
    }

    /*  */
    
    .header
    {
        height: 100vh;
        width: 100vw;
    }

    section
    {
        margin: 0;
    }
  
/* side menu */
    
#sidenav {
  position: fixed; /* Position them relative to the browser window */
  right: -13vw; /* Position them outside of the screen */
  transition: 0.3s; /* Add transition on hover */
  width: 19vw; /* Set a specific width */
  font-size: 3vh; /* Increase font size */
    z-index: 150;
    padding: 6vh 0 0 0;
    list-style-type:none;
}

#sidenav:hover {
  right: 0; /* On mouse-over, make the elements appear as they should */
    background-color: #000000;
}
    
#sidenav a
    {
        text-decoration: none;
         color: white; /* White text color */
    }
    
#sidenav a:hover
    {
        text-decoration: underline;
    }
    
#sidenav li
    {
        padding: 2vw 6vw;
    }

.bar
    {
width: 3vw;
  height: 5px;
  background-color: white;
  margin: 6px 6px 6px 1.8vw;
border-radius: 1px;
    }

    /* game */
    
    .swiper-container {
        width: 100vw;
        height: 100vh;
    }
    
    .swiper-slide {
        text-align: center;
        font-size: 1.8vw;
        color: #FFF;
        font-family: 'Source Sans Pro', sans-serif;
      font-weight: 400;
      font-style: normal;
        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;
    }
    
    .desc
    {
        height: 100vh;
        
    }
    
    .desc .p
    {
        padding: 25vh 8vw 0 8vw;
        text-align: left;
    }
    
    .red-area
    {
        background-color: rgba(230,20,20,0.45);
        height: 100vh;
        padding: 0;
        position: relative; 
        
    }
    
    .blue-area
    {
        background-color: #04083d;
        height: 100vh;
        padding: 0;
        position: relative; 
        
    }
    
    .w-options img
    {
        width: 45%;
        padding-top: 50vh;
    }
    
    .options
    {
        padding: 19vh 0 15vh 0;
        font-family: 'Bebas Neue', sans-serif;
        font-style: normal;
        font-weight: 500;
        text-align: left;
        line-height: 1.8vh;
        position: absolute;
        left: 0;
        width: calc((100vw/12)*4);
        height: 100vh;
    }
    
    .options .p
    {
        padding-left: 5vw;
        font-size: 2.08vw;
        letter-spacing: 0.2vw;
    }

    .options ul
    {
        padding: 0;
    }
    
    .options ul li
    {
        display: block;
        padding: 0 1vw;
        font-size: 2.6vw;
    }
    
    .options ul li i
    {
        color: #e00000;
        padding: 3vh 1vw;
    }
    
    .final-result ul a
    {
        color: #fff;
    }
    
    .options ul li:hover
    {
        display: block;
        background-color: #2a1f68;
        cursor: pointer;
        padding: 0 1vw;
        font-size: 2.6vw;
    }
    
    .graphics
    {
        padding: 18vh 0 20vh 0;
        position: absolute;
        height: inherit;
        width: calc((100vw/12)*4);
    }
    
    .graphics img
    {
        width: 60%;
        padding-bottom: 2vh;
        padding-top: 3vh;
    }
    
    .no-graphics .but-ton
    {
        margin-top: 73vh;
    }
    
    .no-graphics .but-ton:hover
    {
        margin-top: 73vh;
    }
    
    
    .pics
    {
        padding: 25vh 0 20vh 0;
    }
    
    .pics img
    {
        width: 80%;
        padding-bottom: 2vh;
    }
    
    .pics .p
    {
        font-size: 1vw;
        text-align: left;
        padding-left: 3vw;
        padding-right: 3vw;
    }    
    
    .pics .but-ton
    {
        margin-top: 13vh;
    }
    
    .pics .but-ton:hover
    {
        margin-top: 13vh;
    }
    
    .final-result
    {
        padding: 16vh 0 15vh 0;
        font-family: 'Bebas Neue', sans-serif;
        font-style: normal;
        font-weight: 500;
        text-align: left;
        line-height: 1.8vh;
        position: absolute;
        left: 0;
        width: calc((100vw/12)*4);
        height: 100vh;
    }
    
    
.final-result ul
    {
        padding: 0;
    }
    
    .final-result ul li
    {
        display: block;
        padding: 0 1vw;
        font-size: 2.6vw;
    }
    
    .final-result li i
    {
        color: #e00000;
        padding: 3vh 1vw;
    }
    
    .final-result li:hover
    {
        display: block;
        background-color: #e00000;
        cursor: pointer;
        padding: 0 1vw;
        font-size: 2.6vw;
    }
    
.final-result li:hover i
    {
        color: #fff;
    }
   
    .stripe {
        width: 5vw;
        height: 100vh;
        position: fixed;
        right: 0;
        top: 0;
        z-index: 150;
        background-color: rgba(230,20,20,0);
    }
    
    .not-result {
        background: #2a1f68;
    }
    
    .result {
        background: #04083d;
    }
    
    .result p img {
        width: 30vw;
        margin-bottom: 2vh;
    }
    
    .title {
        background: #04083d;
    }
    
    .title img {
        width: 50vw;
    }
    
    .end
    {
        background-image: url(../graphics/bg-result-page.png);
    }
    
    
    
    .but-ton {
        position: relative;
        color: white;
        padding: 1.3vh 2vw;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-family: 'Bebas Neue', sans-serif;
        font-style: normal;
        font-weight: 400;
        cursor: pointer;
        -webkit-transition: ease-in-out 0.5s;
        transition: ease-in-out 0.5s;
        margin: 4vh;
    }
    
    .but-ton:hover {
        position: relative;
        color: white;
        padding: 1.3vh 2vw;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-family: 'Bebas Neue', sans-serif;
        font-style: normal;
        font-weight: 400;
        cursor: pointer;
        -webkit-transition: ease-in-out 0.5s;
        transition: ease-in-out 0.5s;
        margin: 4vh;
    }
    
    .but-ton i
    {
        padding: 0 1vw 0 0;
    }
    
    .btn-red
    {
        background-color: #e00000;
        border: 2px solid #e00000;
    }
    
    .btn-red:hover
    {
        background-color: #FFF;
        color: #e00000;
        border: 2px solid #FFF;
    }
    
    .btn-plain
    {
        background-color: transparent;
        border: 2px solid #fff;
    }
    
    .btn-plain:hover
    {
        background-color: #fff;
        color: #e00000;
        border: 2px solid #fff;
    }

    .btn-plain i
    {
        color: #e00000;
    }
    
    
    
    .day {

        
        height: 7.5vh;
        width: 20vw;
        background-image: url(../graphics/days.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center left;
        box-sizing: border-box;

        position: absolute;
        top 4vh;
        left: 28vw;
         opacity: 0;

        margin: 10vh 3vw;
        padding: 1vh 0 1vh 10vw;
        
        font-family: 'Bebas Neue', sans-serif;
        font-style: normal;
        font-weight: 500;
        font-size: 2vw;
        text-align: center;
   
    }
        
    .cost-main {
        
        height: 7.5vh;
        width: 20vw;
        background-image: url(../graphics/cost.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center left;
        box-sizing: border-box;
        
        position: absolute;
        top 4vh;
        left: 5.5vw;
        opacity: 0;

        margin: 10vh 3vw;
        padding: 1vh 0 1vh 10vw;

        font-family: 'Bebas Neue', sans-serif;
        font-style: normal;
        font-weight: 500;
        font-size: 2vw;
        text-align: center;
    }

    
    
    .back
    {
        
        height: 5vh;
        width: 10vw;
        z-index: -5;
        
        position: absolute;
        bottom: 22vh;
        left: 6vw;
        color: #fff;
        
        font-family: 'Bebas Neue', sans-serif;
        font-style: normal;
        font-weight: 500;
        font-size: 1.7vw;
        cursor: pointer;
    }
    
    .back i
    {
        margin: 0.8vw;
    }
        
    .back a
    {
        color: #fff;
    }
    
    .cover-back
    {
        
        height: 5vh;
        width: 10vw;
        
        background-color: #04083d;
        position: absolute;
        bottom: 22vh;
        left: 6vw;
        color: #fff;
        
        font-family: 'Bebas Neue', sans-serif;
        font-style: normal;
        font-weight: 500;
        font-size: 1.7vw;
    }

    .line {
        height: 12vh;
        width: 100vw;
        position: absolute;
        bottom: 0;
        border-top: 0.85px solid rgba( 255,255,255,0.35);
        z-index: 0;
    }
    
    
    .fa-circle {
        color: #e00000;
    }
    
    .dot {
        height: auto;
        width: auto;
        position: absolute;
        z-index: 2;
        text-align: center;
        padding: 0.75vw;
        font-size: 3vh;
      
      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;
    }
    
    
    .where {
        height: auto;
        width: auto;
        position: absolute;
        z-index: 1;
        text-align: center;
        padding: 0.5vw;
        font-size: 2vw;
        font-family: 'Bebas Neue', sans-serif;
        font-style: normal;
        font-weight: 300;
      
        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;
    }
    
    #where01 {
        bottom: 2vh;
        left: 19vw;
        background-color: #2a1f68;
    }

    #where02 {
        bottom: 2vh;
        left: 46vw;
        background-color: #2a1f68;
    }
    
    #where03 {
        bottom: 2vh;
        left: 46vw;
        background-color: #04083d;
    }
    
    
    
.card {
        color:#000;
        background-color: #FFF;
        height: auto;
        width: 100vw;
        z-index: 100;
        margin: 0;
        padding: 5% 17%;
        text-align: center;
    }
    
.listing {
        margin: 2.7%;
        width: 18vw;
    border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
    }
    
.listing:hover
    {
        opacity: 0.7;
    }
    
.card p
    {
        font-size: 1.25vw;
        margin: 7.5vh 0;
    }
    
.inforgram {
        position: absolute;
        bottom: 0;
        width: 50vw;
        padding-left: 15%;
    }
    
    .youtube-player {
        position: relative;
        padding-bottom: 56.23%;
        /* Use 75% for 4:3 videos */
        height: 0;
        overflow: hidden;
        max-width: 100%;
        background: #000;
        margin: 5px;
    }
    
    .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;
        z-index: 5;
        -webkit-filter: brightness(55%);
    }
    
    .youtube-player img:hover {
        -webkit-filter: brightness(100%);
    }
    
.vid-overlay {
  position: absolute;
  bottom: 0;
  left: 8%;
  right: 0;
  height: 70%;
  width: 90%;
  opacity: 1;
  transition: .3s ease;
    background-image: url(../graphics/caption-360-1.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;

}
    
    
.vid-overlay-2 {
  position: absolute;
  bottom: 0;
  left: 8%;
  right: 0;
  height: 70%;
  width: 90%;
  opacity: 1;
  transition: .3s ease;
    background-image: url(../graphics/overlay-2-360.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;

}
    
    
.youtube-player .play {
        height: 72px;
        width: 72px;
        left: 50%;
        top: 50%;
        margin-left: -36px;
        margin-top: -36px;
        position: absolute;
        background: url(../graphics/icon-360.png) no-repeat;
    background-position: center;
    background-size: contain;
        cursor: pointer;
    z-index: 6;
    }

    

/* The Modal (background) */
.modal {
    width: 100vw; /* Full width */
  height: 100vh; /* Full height */ 
min-width: 100vw; /* Full width */
min-height: 100vh; /* Full height */ 
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 300; /* Sit on top */
  left: 0;
  top: 0; 
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (Image) */
.modal-content {
  margin: auto;
    margin-top: 10vh;
  display: block;
  width: 70vw;
}


/* The Close Button */
.close {
  position: absolute;
  top: 8vh;
  right: 10vw;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}
    
.vid-play
    {
        cursor: pointer;
        transition: 0.3s;
        width: 62vw;
    }
    
.vid-play:hover
    {
        opacity: 0.7;
    }
    
.video-view
    {
        margin-top: 10vh;
    }
    
    .trademark {
    z-index: 5;
    background-color: transparent;
    height: 10vh;
    width: 100vw;
    position: relative;
    font-size: 1.11vw;
    text-align: center; 
    color: #FFF;}
    .trademark a {
      text-decoration: none;
        font-weight: bold;
      color: white; }
    
}