@import url('https://fonts.googleapis.com/css2?family=Libre+Bodoni:ital,wght@0,400..700;1,400..700&display=swap');

.no-js #loader { display: none;  }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.loader {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: url(/img/loader.gif) center no-repeat #FFF;
}

@media only screen and (orientation:portrait){

    header
    {
        background-image: url(img/header.png);
        background-size: 150%;
        background-repeat: no-repeat;
        background-position: center -8vh;
        margin-bottom: 5vh;
        height: 100vh;

    }
    
    .title
    {
        margin: 30vh 18vw 5vh;
    }
    
    .stand
    {
        font-family: 'Lato', sans-serif;
        font-size: 2.7vh;
        font-weight: normal;
        font-style: normal;
        font-stretch: condensed;
        line-height: 1.5;
        letter-spacing: normal;
        text-align: center;
        color: #000000;
        margin: 0 8vw;
        padding: 0 4vw;
    }
    
    body
    {
        background-image: url(img/bg.png);
    }
    
     .map-background
    {
      
    }
    
    svg
    {
       margin: 0 5vw 7vh 5vw;
    }
    
    #mRex_Cinema ,#m2Rex_Cinema , #mjalan_Raja_Abdullah , #mJalan_Tun_Tan, #m2Jalan_Tun_Tan, #mJalan_Raja_Muda, #mKerinchi , #mPantai_Polis
    {
        opacity: 0.3;
    }
    
    .st0{fill:#FFFFFF;}
	.st1{fill:none;stroke:#AC241E;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;}
    
    .empty
    {
        height: 165vh;   
    }
    
    .story
    {
        
    }
    
    .breaker
    {
        position: sticky;
        top: 20vh;
    }

    .swiper-container {
      width: 100%;
      height: 100%;
        text-align: right;
    }
    
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      align-items: center;
    }
    
    .swiper-button-white
    {
       position: absolute;
        top: 35%;
    }
    
    .caption
    {
        padding: 3vh 5vw;
        font-size: 2.5vh;
        line-height: 4vh;
        color: #282828;
        text-align: left;
    }
    
    .series
    {
        width: 100%; 
    }
    
    .credit
    {
        font-style: italic;
        font-size: 2.3vh;
        color: dimgray;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    
    .breaker
    {
        margin-top: 8vh;
    }
    
    h1
    {
        font-family: 'Libre Bodoni', serif;
        font-size: 6vh;
        line-height: 7vh;
        padding: 1vh 5vw;
        margin: 0;
        color: #aa2829;
    }
    
    h2
    {
        font-family: 'Libre Bodoni', serif;
        font-size: 3.2vh;
        color: #aa2829;
        padding: 0vh 5vw 4vh 5vw;
        margin: 0;
        line-height: 1;
        font-style: italic;
    }
    
    p
    {
        padding: 2vh 5vw;
        font-family: 'Lato', sans-serif;
        font-size: 3vh;
        line-height: 5vh;
    }
    
    
    .youtube-player {
        position: relative;
        padding-bottom: 56.23%;
        /* Use 75% for 4:3 videos */
        height: 0;
        overflow: hidden;
        max-width: 100%;
        background: #000;
        margin: 8vh 0;
    }
    
    .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;
    }
    
    .share
    {
        font-family: 'Bebas Neue', sans-serif;
        font-size: 3.5vh;
        font-weight: 600;
        font-style: normal;
        font-stretch: normal;
        letter-spacing: normal;
        color: #aa2829;
        text-align: center;
        margin-bottom: 5vh;
        margin-top: 3vh;
    }
    
    .share h1
    {
        margin-top: 0;
    }

    .share a i
    {
        margin: 2vh 1.2vw 0 1.2vw;
        color: #aa2829;
        font-size: 3.5vh;
    }

    .branding
    {
       margin: 3vh 5vw;
    }

    .branding img
    {
        width: 95%;
        
    }

    .legal
    {
        font-family: 'Lato', sans-serif;
        font-size: 1.2vh;
        font-weight: normal;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.25;
        letter-spacing: normal;
        text-align: left;
        color: #939393;
        margin-bottom: 0.2vh;
    }

    .branding i
    {
        margin-right: 2vw;
        font-size: 2.5vh;
        color: #000;
    }

    .soc-med
    {
        text-align: right;
        padding: 0 !important;
    }

}

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



@media only screen and (orientation:landscape){    

    header
    {
        background-image: url(img/header.png);
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: center -35vh;
        height: 100vh;
    }
    
    .title
    {
        margin: 23vh 31vw 1vh;
    }
    
    .stand
    {
        font-family: 'Lato', sans-serif;
        font-size: 1.1vw;
        font-weight: normal;
        font-style: normal;
        font-stretch: condensed;
        line-height: 3.5vh;
        letter-spacing: normal;
        text-align: center;
        color: #000000;
        margin: 2vh 28vw;
        padding: 0 5.5vw;
    }
    
    body
    
    {
        background-image: url(img/bg.png);
    }
    
    .content
    {
        padding: 5vh 15vw 0vh 20vw;
        
    }
    
    h1
    {
        font-family: 'Libre Bodoni', serif;
        font-size: 3vw;
        color: #aa2829;
        margin-top: 2vh;
        margin-bottom: 1vh;
    }
    
    h2
    {
        font-family: 'Libre Bodoni', serif;
        font-size: 2vw;
        color: #aa2829;
        margin-top: 0;
        margin-bottom: 6.5vh;
        line-height: 0.5;
        font-style: italic;
    }
    
    p
    {
        padding: 1vh 3vw 1vh 0 ;
        font-family: 'Lato', sans-serif;
        font-size: 1.3vw;
        line-height: 2vw;
        font-weight: 300;
        font-style: normal;
        font-stretch: condensed;
        letter-spacing: normal;
        text-align: left;
        color: #000000;
    }
    
    
    .map
    {
        top: 5vh;
        right: 10vw;
       width: 50vh;
    }
    
    .map svg
    {
        width: 30vw;
       height: 88vh;
    }
    
    .st0{fill:#FFFFFF;}
	.st1{fill:none;stroke:#AC241E;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;}
    
    #Rex_Cinema , #jalan_Raja_Abdullah , #Jalan_Tun_Tan, #Jalan_Raja_Muda
    {
        opacity: 0.3;
    }
    
    .youtube-player {
        position: relative;
        padding-bottom: 56.23%;
        /* Use 75% for 4:3 videos */
        height: 0;
        overflow: hidden;
        max-width: 100%;
        background: #000;
        margin-top: 5vh;
        margin-bottom: 18vh;
    }
    
    .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;
    }

    
    .story
    {
        margin-right: 25vw;
    }
    
    .swiper-container {
      width: 100%;
      height: 50%;
    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      
      align-items: center;
    }
    
    .swiper-button-white
    {
       
    }
    
    .caption
    {
        padding: 2vh 2vw;
        font-size: 1vw;
        line-height: 1.5vw;
        color: #282828;
    }
    
    .series
    {
        width: 100%; 
    }
    
    .credit
    {
        font-style: italic;
        font-size: 1vw;
        color: dimgrey;
    }
    
    .empty
    {
        position: relative;
    }
    
    .empty svg
    {
        position: absolute;
        top: 0;
    }
    
    .share
    {
        font-weight: 600;
        font-style: normal;
        font-stretch: normal;
        letter-spacing: normal;
        color: #aa2829;
        text-align: center;
        margin-bottom: 15vh;
        margin-top: 3vh;
    }

    .share a i
    {
        margin: 0 1.2vw;
        color: #aa2829;
        font-size: 5vh;
        cursor: pointer;
        margin-top: 3vh;
    }

    .branding
    {
       margin: 1vh 20vw;
    }

    .branding img
    {
        width: 70%;
        padding-left: 2.5vw;
    }

    .legal
    {
        font-family: 'Lato', sans-serif;
        font-size: 2vh;
        font-weight: normal;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.25;
        letter-spacing: normal;
        text-align: left;
        color: #939393;
        margin-bottom: 2.2vh;
    }

    .branding i
    {
        margin-right: 2vw;
        font-size: 1.5vw;
        color: #000;
    }

    .soc-med
    {
        text-align: right;
        padding: 0 !important;
    }
    

}