@import url("../css/_default-banner-section.css");
@import url("../css/_episode-slider-section.css");
@import url("../css/_landing-win-section.css");

.home-wrapper-bg{background-color: var(--black); color: var(--white);}
.home-middle-section{z-index: 1;}
.home-middle-bg{position: absolute; z-index: -1;}
.landing-middle-paths{width: 1597px; height: 387px; position: absolute; z-index: -1;}

.home-middle-lists{padding: 53px 0 249px;}
.home-series-text .button{margin-top: 6px;}
.home-series-image{z-index: 1;}
.series-hocky-icon{opacity: 0.3; position: absolute; z-index: -1;}

.home-tour-text h2{margin-bottom: 18px;}
.home-tour-text .button{margin-top: 12px;}
.home-tour-image{z-index: 1;}
.landing-hocky-icon{right: -118px; bottom: 68px; opacity: 0.3; position: absolute; z-index: -1;}
.home-tour-icons{right: 248px; bottom: -50px; opacity: 0.3; width: 57px; position: absolute; z-index: -1;}

.landing-toque-path {top: 239px; position: absolute; z-index: -1; width: 100%; opacity: 0.3; }
.landing-toque-icon {bottom: 209px; position: absolute; left: -151px; width: 100%; max-width: 1300px; margin: 0 auto; right: 0; opacity: 0.2; z-index: -1; }
figure.toque-icon{width: 63px;}
.explore-jons-section{z-index: 1;}
.explore-jons-path{bottom: -108px; right: -140px; opacity: 0.3; position: absolute; z-index: -1;}
.explore-jons-main{padding: 90px 0 64px;}
.explore-jons-text h2{margin-bottom: 18px;}
.explore-jons-text .button{margin-top: 8px;}

.explore-map-icon{top: 20px; right: -48px; position: absolute; opacity: 0.2; z-index: -1;} 
.explore-leaf-icon{bottom: -69px; left: -60px; position: absolute; opacity: 0.2; z-index: -1;} 


/*-- media css starts here --*/
@media only screen and (min-width: 1024px){
    .default-banner-section{min-height: 850px;}
    .default-banner-section picture.landing-banner-bg{height: 850px;}
    .default-banner-text{padding-top: 301px;padding-bottom: 50px;}

    .home-middle-bg{width: 1664px; height: 1932px; top: 0; left: -160px; right: 0; margin: 0 auto;}
    .landing-middle-paths{bottom: -80px; left: 0;}
    /*-- new map icon css starts here --*/
    .map-icons {width: 1664px; height: 1932px; top: 0; left: -160px; right: 0; margin: 0 auto; position: absolute; z-index: 20;}
    .map-marker{position: absolute;}
    .map-marker.one{top: 752px; left: 188px;}
    .map-marker.two{top: 712px; left: 288px;}
    .map-marker.three{top: 664px; left: 474px;}
    .map-marker.four{top: 712px; left: 731px;}
    .map-marker.five{top: 911px; left: 1030px;}
    .map-marker.six{top: 751px; left: 1137px;}
    .map-marker.seven{top: 702px; left: 1269px;}

    .map-location-details.one{top: -271px; left: -90px;}
    .map-location-details.two{top: 70px;}
    .map-location-details.three{top: -271px;}
    .map-location-details.four{top: 70px;}
    .map-location-details.five{top: -271px; left: -160px;}
    .map-location-details.six{top: 70px;}
    .map-location-details.seven{top: -271px;}

    .map-number{width: 60px; height: 60px; cursor: pointer; font-size: 24px; line-height: normal; font-weight: 900; background-image: url("../images/marker-icon.svg"); background-repeat: no-repeat; background-size: contain; background-position: center; font-family: 'acumin-pro-condensed', sans-serif; color: #000;}
    .map-number span{position: relative; top: -2px;}
    .map-location-details{display: none; padding:8px 10px 10px; width: 380px; background-color: var(--black); box-shadow: 0 0 4px #373737; border: 1px solid #373737; position: absolute; z-index: 10; }
    .map-location-details a{width: 100%; height: 100%; display: block;}
    .map-location-details a:hover{color: var(--white);}
    .map-location-image img{transition: transform 0.6s cubic-bezier(0.35, 0, 0, 1) 0s, opacity 0.2s ease-in 0s, transform 0.6s cubic-bezier(0.35, 0, 0, 1) 0s;}
    .map-location-details:hover .map-location-image img{transform: scale(1.065);}
    .map-pin-text{margin-top: 10px; text-transform: uppercase;}
    /*-- new map icon css ends here --*/

    .home-series-main{margin-bottom: 189px;}
    .home-series-text{width: 486px; margin-right: 234px; padding-top: 47px;}
    .home-series-image{width: calc(100% - 720px);}
    .home-series-thumb{min-width: 730px;}

    .home-tour-text{width: 680px; margin-left: auto; margin-top: 350px; left: -94px; float: right; position: relative; z-index: 30;}
    .home-tour-image{width: calc(100% - 680px); float: left;}
    .home-tour-thumb{min-width: 820px; margin-left: -150px;}

    .episode-slider-section{margin-top: -263px; z-index: 2;}

    .explore-jons-image{width: calc(100% - 488px); margin-top: 10px;}
    .explore-jons-text{width: 392px; margin-left: 96px;}
}
@media only screen and (min-width: 1600px){
    .explore-jons-path{bottom: -108px; right: 0;}
    .home-middle-bg{left: -10px;}
     .map-icons{left: -10px;}
}
@media only screen and (max-width: 1299px) and (min-width: 1024px){
    .home-middle-bg {width: 100%; height: 100%; top: 135px; left: 0; right: auto; margin: 0; max-width: 1024px; }
    .map-number {width: 48px; height: 48px; font-size: 20px; }
    .map-marker.one {top: 735px; left: 165px; }
    .map-marker.two {top: 695px; left: 248px; }
    .map-marker.three {top: 662px; left: 390px; }
    .map-marker.four {top: 685px; left: 585px; }
    .map-marker.five {top: 852px; left: 828px; }
    .map-marker.six {top: 730px; left: 910px; }
    .map-marker.seven {top: 688px; left: 1023px; }
    .map-location-details{width: 315px;}


    .home-series-text {width: 470px; margin-right: 84px; padding-top: 47px; }
    .home-series-image {width: calc(100% - 554px); }
    .home-tour-thumb{min-width: 554px;}
    .home-tour-text {margin-top: 230px; left: 0; }
    .home-tour-icons{right: 85px;}

    .explore-jons-path{bottom: -160px;}
    .explore-leaf-icon{left: 0; bottom: -120px;}
}
@media only screen and (max-width: 1023px) and (min-width: 768px){
    .explore-jons-main{padding: 90px 0 4px; display: block;}
    .explore-jons-image{margin-bottom: 48px;}

    .home-middle-bg{width: 1664px; height: 1932px; top: 140px; left: -10px; }
    .landing-middle-paths{bottom: -160px; left: 0;}
    .map-icons{display: none;}

    .home-middle-section .container{padding: 0;}
    .home-series-main{display: block; margin-bottom: 38px;}
    .home-series-text{padding: 0 30px 203px;}
    .home-series-image {width: calc(100% + 2px); left: -1px; margin-bottom: 40px;} 
    .series-hocky-icon{right: 18px; bottom: 48px;}

    .home-tour-image{margin-bottom: 40px;}
    .home-tour-icons {right: 80px; bottom: 65px; }
    .home-tour-text{padding: 23px 30px 39px;}
    .contest-nobo{left: auto;}
    .explore-jons-path{bottom: -260px;}
    .explore-map-icon {top: -110px; right: 48px; }
    .explore-leaf-icon{left: 50%; bottom: -95px;}
}
@media only screen and (max-width: 767px) and (min-width: 200px){
    .default-banner-main{width: 100%; height: 100%; display: flex; flex-wrap: wrap; align-items: flex-end;}
    .default-banner-text{padding-top: 115px; padding-bottom: 232px;}
    .episode-slider-section{margin-top: -192px; z-index: 2;}

    .home-middle-bg{left: -238px; top: 415px; width: 1655px; height: 1614px;}
    .landing-middle-paths {width: 100%;height: 273px;bottom: -315px;}
    .map-icons{display: none;}
    .home-middle-section .container{padding: 0;}
    .home-middle-lists{padding: 53px 0 0;}
    
    .home-series-main{display: block;}
    .home-series-image {width: calc(100% + 2px); left: -1px; } 
    .home-series-text{padding: 0 20px 203px;}
    .home-series-text h2{margin-bottom: 7px; letter-spacing: -0.34px;}
    .home-series-text p{margin-bottom: 19px;}
    .home-series-text .button{margin-top: 0;}
    .series-hocky-icon{width: 57px; right: 34px; bottom: -25px;} 

    .home-tour-text{padding: 23px 20px 19px;}
    .home-tour-text h2{letter-spacing: -0.34px; max-width: 300px;}
    .home-tour-text .button{margin-top: 2px;}
    .home-tour-icons{bottom: 13px; right: 24px; width: 69px;}

    .explore-jons-section .container{padding: 0;}
    .explore-jons-main{padding: 10px 0 74px;}
    .explore-jons-text{padding: 27px 20px 20px;}
    .explore-jons-text h2{margin-bottom: 17px;}
    .explore-jons-text .button{margin-top: 0;}
    .explore-map-icon{top: -35px; right: 22px;}
    .explore-leaf-icon{bottom: -70px; left: 49%; width: 37px; opacity: 0.3;}
    .explore-jons-path{bottom: -363px; left: 0; right: auto;}
}