/* ######################################################################################################### */ /* --------------------------------------------------------------------------------------------------------- */ /* */ /* L A N D S C A P E */ /* */ /* --------------------------------------------------------------------------------------------------------- */ /* ######################################################################################################### */ /* -- Info Button Close -- */ .info-parts-landscape .btn-close {top: 585px; left: calc(50% - 160px);} /* ######################################################################################################### */ /* --------------------------------------------------------------------------------------------------------- */ /* */ /* D E S K T O P */ /* */ /* --------------------------------------------------------------------------------------------------------- */ /* ######################################################################################################### */ /* -- Info Button Close -- */ .info-parts-desktop .btn-close {top: 585px; left: 474px;} /* ######################################################################################################### */ /* --------------------------------------------------------------------------------------------------------- */ /* */ /* Group H // iPad Mini / iPad 1 / iPad 2 / ipad 3 / iPad 4 / Kindle Fire */ /* */ /* --------------------------------------------------------------------------------------------------------- */ /* ######################################################################################################### */ /* -- L A N D S C A P E -- */ @media screen and (max-width: 768px) and (max-height:1024px) and (orientation:landscape){ } /* -- P O R T R A I T -- */ @media screen and (max-width: 768px) and (max-height:1024px) and (orientation:portrait) { /*.site-content-portrait{background:#fbaf5d;}*/ /* -------------------------------------------------------------------------------------------------------- */ /* */ /* _ __ _ _____ _____ ____ */ /* | | \ | | |____| | | */ /* | | \_| | | \ |____| */ /* */ /* */ /* -------------------------------------------------------------------------------------------------------- */ /* -- logo -- */ .intro-portrait #layer_02 {transform: scale(0.75); top: -8%;} /* -- game -- */ .intro-portrait #layer_03 {transform: scale(0.85); top: 20%;} /* -- arrow --*/ .intro-portrait #layer_04 {transform: scale(0.6); top: 64%;} /* -- extra -- */ .intro-portrait #layer_05 {transform: scale(0.7); top: -10%; left: 34%;} /* -- reels -- */ .intro-portrait #layer_06 {transform: scale(0.625); top: 82%;} /* -- paylines -- */ .intro-portrait #layer_07 {transform: scale(0.625); bottom: -21%;} /* -- pink background -- */ .intro-portrait #layer_08 {transform: scale(1); bottom: 0%;} /* -- Bottom Holder -- */ .intro-portrait #intro-bottom-holder{margin-top: 884px; height: 154px;} /* -- Play Button -- */ .intro-portrait #btn-play{transform:scale(1);} /* -- Invisible Press -- */ .intro-portrait .collider{width: 318px; height: 109px; bottom: -273px; left: 482px;} /* -- Skip message -- */ .intro-portrait #intro-skip{font-size: 26px;} /* -- Check Box -- */ .intro-portrait .intro-check {width: 24px;height: 24px;} /* ######################################################################################################### */ /* PRELOADER */ /* ######################################################################################################### */ /* -- Preloader Back -- */ .intro-portrait .preloader-back{left: calc(640px - 250px); top: 924px;} /* -- Preloader Bar -- */ .intro-portrait .preloader-bar{left: calc(640px - 197px); top: 916px;} /* -------------------------------------------------------------------------------------------------------- */ /* */ /* _____ ____ __ _ ____ _ */ /* |____| |____| | \ | |___ | */ /* | | | | \_| |____ |____ */ /* */ /* */ /* -------------------------------------------------------------------------------------------------------- */ /* ######################################################################################################### */ /* 2. GAME LOGO */ /* ######################################################################################################### */ /* -- Game Logo --*/ .gameLogo{margin-top: -40px; transform: scale(0.8);} /* -------------------------------------------------------------------------------------------------------- */ /* */ /* _ __ _ _____ ____ _____ ____ ____ ____ ____ */ /* | | \ | |___ | | |____| |____| | __ |___ |___ */ /* | | \_| | |____| | | | |____| |____ ____| */ /* */ /* */ /* -------------------------------------------------------------------------------------------------------- */ /* ######################################################################################################### */ /* MAIN HOLDER */ /* ######################################################################################################### */ /* -- Page Title -- */ .info-parts-portrait .info-title{margin-top: 20px;} /* --Info Content -- */ .site-content-portrait .info-holder{/*background:green;*/ width:calc(100% - 100px);} /* ######################################################################################################### */ /* PAGES TITLE */ /* ######################################################################################################### */ /* -- Page Title Holder -- */ .info-parts-portrait .title-holder{width: 100%; height: 40px; -ms-transform: scale(0.80); /* IE 9 */ -webkit-transform: scale(0.80); /* Safari */ transform: scale(0.80);} /* ######################################################################################################### */ /* NAVIGATION BUTTONS */ /* ######################################################################################################### */ /* -- Next Button -- */ .info-parts-portrait .info-btn-next {bottom: -20px; right: 20px; -ms-transform: scale(0.4); /* IE 9 */ -webkit-transform: scale(0.4); /* Safari */ transform: scale(0.4);} /* -- Previous Button -- */ .info-parts-portrait .info-btn-prev {bottom: -20px; left: 20px; -ms-transform: scale(0.4); /* IE 9 */ -webkit-transform: scale(0.4); /* Safari */ transform: scale(0.4);} /* ######################################################################################################### */ /* PAGE SLIDER */ /* ######################################################################################################### */ /* -- Slider Container -- */ .info-parts-portrait .info-page-footer {bottom: 10px;} /* -- Dot -- */ .dot{width:10px; height:10px; margin-right:6px; margin-left:6px;} /* -- Selected Dot -- */ .dot-selected{width:10px; height:10px; margin-right:6px; margin-left:6px;} /* ######################################################################################################### */ /* CLOSE BUTTON */ /* ######################################################################################################### */ /* -- Close Info Button -- */ .info-parts-portrait .btn-close {bottom: 24px; transform: scale(0.56); transform-origin: 12px 113px;} /* ######################################################################################################### */ /* INFO PAGES */ /* ######################################################################################################### */ /* -------------------- */ /* #### INFO FONTS #### */ /* -------------------- */ /* -- Info Font 1 -- */ /*fd*/ .site-content-portrait .info-font-1{font-size: 16px; line-height: 18px; margin-bottom: 10px; margin-top:10px;} /* -- Info Font 2 -- */ .site-content-portrait .info-font-2{font-size: 16px; line-height: 18px; margin-bottom: 10px; margin-top: 0px;} /* -- Info Font 3 -- */ /*DL*/ .site-content-portrait .info-font-3{font-size: 14px; line-height: 16px; margin-bottom: 10px; margin-top:0px;} /* -- Info Font 4 -- */ /*fd*/ .site-content-portrait .info-font-4{font-size: 16px; line-height: 18px; margin-bottom: 12px; margin-top: -10px;} /* -- Info Font 5 -- */ .site-content-portrait .info-font-5{font-size: 14px; line-height: 16px; margin-bottom: 10px; margin-top: -20px;} /* --------------------------- */ /* #### INFO MARKED FONTS #### */ /* --------------------------- */ /* -- Info Font 1 Marked -- */ .site-content-portrait .info-font-1 .marked{font-size: 21px;} /* -- Info Font 2 Marked -- */ .site-content-portrait .info-font-2 .marked{font-size: 19px;} /* -- Info Font 3 Marked -- */ .site-content-portrait .info-font-3 .marked{font-size: 18px;} /* -- Info Font 4 Marked -- */ /*fd*/ .site-content-portrait .info-font-4 .marked{font-size: 21px;} /* -- Info Font 5 Marked -- */ .site-content-portrait .info-font-5 .marked{font-size: 21px;} /* --------------------- */ /* #### INFO TITLES #### */ /* --------------------- */ /* -- Info Title 1 -- */ .site-content-portrait .info-title-1{transform: scale(0.8); transform-origin: top left;} /* -- Info Title 1 Holder -- */ .site-content-portrait .info-title-1-holder{margin: auto; width: 163px; height: 44px;} /* -- Info Title 2 -- */ .site-content-portrait .info-title-2{transform: scale(0.8); transform-origin: top left;} /* -- Info Title 2 Holder -- */ .site-content-portrait .info-title-2-holder{margin: auto; width: 307px; height: 40px;} /* ------------------- */ /* #### INFO PICS #### */ /* ------------------- */ /* -- Info Image 1 (Features 01) -- */ .site-content-portrait .info-pic-1{transform: scale(0.9); transform-origin: top left; margin:auto; margin-bottom:20px;} /* -- Info Image 1 Holder (Features 01) -- */ .site-content-portrait .info-pic-1-holder{width:316px; height:198px; margin:auto; /*margin-top:-25px;*/} /* -- Info Image 2 (Features 02)-- */ .site-content-portrait .info-pic-2{transform: scale(1.13); transform-origin: top 10px; margin:auto; margin-bottom:20px;} /* -- Info Image 2 Holder (Features 02) -- */ .site-content-portrait .info-pic-2-holder{width: 224px; height: 212px; margin: auto; /*margin-top: -20px;*/} /* -- Info Image 3 Holder (Features 01) -- */ /*DL*/ .site-content-portrait .info-pic-3-holder{/*background: red; */width:232px; height:110px; margin:auto; margin-top:-17px;} /* -- Info Image 4 (Features 01)-- */ .site-content-portrait .info-pic-4{transform: scale(0.9); transform-origin: 10px -30px; margin:auto; margin-bottom:20px;} /* -- Info Image 4 Holder (Features 01) -- */ .site-content-portrait .info-pic-4-holder{/* background: red; */ width:289px; height:173px; margin:auto;} /* -- Info Image 2 (Gamble) -- */ /*fd*/ .site-content-portrait .info-pic-gamble{transform: scale(0.82); transform-origin: top left;} /* -- Info Image 2 Holder (Gamble) --*/ /*fd*/ .site-content-portrait .info-pic-gamble-holder{margin:auto; width:442px; height:213px; margin-bottom:20px;} /* ------------------------- */ /* ### INFO BACK STYLES #### */ /* ------------------------- */ /* -- Info Back Style 0 -- */ .site-content-portrait .back-style-0{/*background: red;*/ width:404px; margin: auto;} /* -- Info Back Style 1 (Feature 02) -- */ /*fd*/ .site-content-portrait .back-style-1{width: 384px; margin: auto; margin-top: 15px; /*height: 140px;*/ margin-bottom:20px; padding: 0 10px 0 10px; border-top: 1px solid yellow; border-bottom: 1px solid yellow;} /* -- Info Back Style 2 -- */ /*DL*/ .site-content-portrait .back-style-2{width: 328px; /*height: 157px;*/ padding: 0 10px 0 10px; margin: auto; margin-bottom:20px; border-top: 1px solid yellow; border-bottom: 1px solid yellow;} /* -- Info Back Style 3 (Rules) -- */ /*fd*/ .site-content-portrait .back-style-3{width: 424px; margin: auto; /*height: 432px;*/ padding: 0 10px 0 10px; border-top: 1px solid yellow; border-bottom: 1px solid yellow;} /* -- Info Back Style 4 (Gamble) -- */ /*fd*/ .site-content-portrait .back-style-4{width: 424px; margin: auto; /*height: 186px;*/ padding: 0 10px 0 10px; border-top: 1px solid yellow; border-bottom: 1px solid yellow;} /* -- Info Back Style 5 (Feature 02) -- */ .site-content-portrait .back-style-5{width: 384px; margin: auto; margin-top:10px; margin-bottom:20px; /*height: 180px;*/ padding: 0 10px 0 10px; border-top: 1px solid yellow; border-bottom: 1px solid yellow;} /* -- Info Back Style 6 (Feature 02) -- */ .site-content-portrait .back-style-6{width: 384px; margin: auto; margin-top: 10px; /*height: 150px;*/ margin-bottom:20px; padding: 0 10px 0 10px; border-top: 1px solid yellow; border-bottom: 1px solid yellow;} /* #### PAYTABLE LABELS #### */ /* -- Scatter Label Holder -- */ .site-content-portrait .pay-scatter-holder{margin-left: 51%; width: 49%; height: 19px; margin-top:-222px;} /* -- Scatter Label -- */ .site-content-portrait .pay-scatter{transform: scale(0.44); transform-origin: top left;} /* -- Wild Label Holder -- */ .site-content-portrait .pay-wild-holder{margin-left: 51%; width: 49%; height: 19px; margin-top:-222px;} /* -- Wild Label -- */ .site-content-portrait .pay-wild{transform: scale(0.44); transform-origin:top left;} /* -- font colors -- */ .colorYellow{color:#fdcb32;} /* ######################################################################################################### */ /* PAGE PAYLINES */ /* ######################################################################################################### */ /* -- Paylines Pic Holder -- */ .site-content-portrait .paylines-holder {height:510px;} /* -- Paylines Pic -- */ .site-content-portrait .paylines-pic {transform: scale(0.73); transform-origin: -26px 0px;} /* ######################################################################################################### */ /* WIN WAYS */ /* ######################################################################################################### */ /* -- Way Box -- */ .site-content-portrait .way-box{width:50%; height:139px;} /* -- Ways Reels Holder -- */ .site-content-portrait .ways-reels-holder{/*background:#336699;*/ margin:auto; width:76px;} /* -- Ways Grid Holder -- */ .site-content-portrait .grid-ways{padding-top:4px; padding-bottom:4px; width:100px; margin-top:10px;} /* -- Ways Info Text -- */ .site-content-portrait .ways-info{font-size:12px; line-height:12px; margin-top:13px;} /* ######################################################################################################### */ /* PAGE PAYOUTS */ /* ######################################################################################################### */ /* -- Image Scale -- */ .site-content-portrait .sym-img-scale{ transform: scale(0.87); margin-top: -50px; margin-left: -23px;} /* -- Each Pay -- */ .site-content-portrait .sym-pays{font-size: 20px; line-height: 20px;} /* -- Symbol Container -- */ .site-content-portrait .sym-holder{height: 109px; margin-top: 20px; margin-bottom: 20px;} /* -- Pay Holder -- */ .site-content-portrait .sym-pay-holder{width: 50%; top: -200px;} /* -- Paytable Container -- */ #paytable-list{height:100%;} /* -- Each Pay -- */ .site-content-portrait .sym-pays{font-size: 18px; line-height: 18px;} .site-content-portrait .mpp-label{float:left;width:20px;height:19px;padding:0px;} .site-content-portrait .mpp-value{float:left;width:113px;height:19px; margin-left:2px; padding:0px;} } /* ######################################################################################################### */ /* --------------------------------------------------------------------------------------------------------- */ /* */ /* Group G // iPhone X */ /* */ /* --------------------------------------------------------------------------------------------------------- */ /* ######################################################################################################### */ @media only screen and (device-width : 375px) and (device-height : 812px) and (-webkit-device-pixel-ratio : 3) and (orientation : portrait) { /* -------------------------------------------------------------------------------------------------------- */ /* */ /* _ __ _ _____ _____ ____ */ /* | | \ | | |____| | | */ /* | | \_| | | \ |____| */ /* */ /* */ /* -------------------------------------------------------------------------------------------------------- */ /* -- logo -- */ .intro-portrait #layer_02 {transform: scale(1); top: -36%;} /* -- game -- */ .intro-portrait #layer_03 {transform: scale(1); top: 26%;} /* -- arrow --*/ .intro-portrait #layer_04 {transform: scale(0.8); top: 85%;} /* -- extra -- */ .intro-portrait #layer_05 {transform: scale(1); top: -25%; left:37%;} /* -- reels -- */ .intro-portrait #layer_06 {transform: scale(0.9); top: 113%;} /* -- paylines -- */ .intro-portrait #layer_07 {transform: scale(0.9); bottom: -59%;} /* -- pink background -- */ .intro-portrait #layer_08 {transform: scale(1); bottom: -12%;} /* -- Bottom Holder -- */ .intro-portrait #intro-bottom-holder{margin-top: 1187px; height:176px;} /* -- Play Button -- */ .intro-portrait #btn-play{transform:scale(1.5);} /* -- Invisible Press -- */ .intro-portrait .collider{width: 320px; height: 110px; bottom: -576px; left: 480px;} /* -- Skip message -- */ .intro-portrait #intro-skip{font-size: 30px;} /* -- Check Box -- */ .intro-portrait .intro-check {width: 26px;height: 26px;} /* ######################################################################################################### */ /* PRELOADER */ /* ######################################################################################################### */ /* -- Preloader Back -- */ .intro-portrait .preloader-back{left: calc(640px - 250px); top: 1214px;} /* -- Preloader Bar -- */ .intro-portrait .preloader-bar{left: calc(640px - 197px); top: 1206px;} /* -------------------------------------------------------------------------------------------------------- */ /* */ /* _____ ____ __ _ ____ _ */ /* |____| |____| | \ | |___ | */ /* | | | | \_| |____ |____ */ /* */ /* */ /* -------------------------------------------------------------------------------------------------------- */ /* ######################################################################################################### */ /* 2. GAME LOGO */ /* ######################################################################################################### */ /* -- Game Logo --*/ .gameLogo{margin-top: -40px; transform: scale(0.5);} /* -------------------------------------------------------------------------------------------------------- */ /* */ /* _ __ _ _____ ____ _____ ____ ____ ____ ____ */ /* | | \ | |___ | | |____| |____| | __ |___ |___ */ /* | | \_| | |____| | | | |____| |____ ____| */ /* */ /* */ /* -------------------------------------------------------------------------------------------------------- */ /* ######################################################################################################### */ /* MAIN HOLDER */ /* ######################################################################################################### */ /* -- Page Title -- */ .info-parts-portrait .info-title{margin-top: 20px;} /* --Info Content -- */ .site-content-portrait .info-holder{/*background:green;*/ width:calc(100% - 40px);} /* ######################################################################################################### */ /* PAGES TITLE */ /* ######################################################################################################### */ /* -- Page Title Holder -- */ .info-parts-portrait .title-holder{width: 100%; height: 40px; -ms-transform: scale(0.80); /* IE 9 */ -webkit-transform: scale(0.80); /* Safari */ transform: scale(0.80);} /* ######################################################################################################### */ /* NAVIGATION BUTTONS */ /* ######################################################################################################### */ /* -- Next Button -- */ .info-parts-portrait .info-btn-next {bottom: -20px; right: -10px; -ms-transform: scale(0.4); /* IE 9 */ -webkit-transform: scale(0.4); /* Safari */ transform: scale(0.4);} /* -- Previous Button -- */ .info-parts-portrait .info-btn-prev {bottom: -20px; left: -10px; -ms-transform: scale(0.4); /* IE 9 */ -webkit-transform: scale(0.4); /* Safari */ transform: scale(0.4);} /* ######################################################################################################### */ /* PAGE SLIDER */ /* ######################################################################################################### */ /* -- Slider Container -- */ .info-parts-portrait .info-page-footer {bottom: 10px;} /* -- Dot -- */ .dot{width:10px; height:10px; margin-right:6px; margin-left:6px;} /* -- Selected Dot -- */ .dot-selected{width:10px; height:10px; margin-right:6px; margin-left:6px;} /* ######################################################################################################### */ /* CLOSE BUTTON */ /* ######################################################################################################### */ /* -- Close Info Button -- */ .info-parts-portrait .btn-close {bottom:24px; transform: scale(0.5); transform-origin: 30px 110px;} /* ######################################################################################################### */ /* INFO PAGES */ /* ######################################################################################################### */ /* -------------------- */ /* #### INFO FONTS #### */ /* -------------------- */ /* -- Info Font 1 -- */ /*fd*/ .site-content-portrait .info-font-1{font-size: 11px; line-height: 14px; margin-bottom: 10px; margin-top:10px;} /* -- Info Font 2 -- */ .site-content-portrait .info-font-2{font-size: 11px; line-height: 12px; margin-bottom: 6px; margin-top: 0px;} /* -- Info Font 3 -- */ /*DL*/ .site-content-portrait .info-font-3{font-size: 11px; line-height: 14px; margin-bottom: 9px; margin-top:0px;} /* -- Info Font 4 -- */ /*fd*/ .site-content-portrait .info-font-4{font-size: 12px; line-height: 16px; margin-bottom: 12px; margin-top: -10px;} /* -- Info Font 5 -- */ .site-content-portrait .info-font-5{font-size: 11px; line-height: 12px; margin-bottom: 10px; margin-top: -00px;} /* --------------------------- */ /* #### INFO MARKED FONTS #### */ /* --------------------------- */ /* -- Info Font 1 Marked -- */ .site-content-portrait .info-font-1 .marked{font-size: 17px;} /* -- Info Font 2 Marked -- */ .site-content-portrait .info-font-2 .marked{font-size: 14px;} /* -- Info Font 3 Marked -- */ .site-content-portrait .info-font-3 .marked{font-size: 16px;} /* -- Info Font 4 Marked -- */ /*fd*/ .site-content-portrait .info-font-4 .marked{font-size: 17px;} /* -- Info Font 5 Marked -- */ .site-content-portrait .info-font-5 .marked{font-size: 14px;} /* --------------------- */ /* #### INFO TITLES #### */ /* --------------------- */ /* -- Info Title 1 -- */ .site-content-portrait .info-title-1{transform: scale(0.5); transform-origin: top left;} /* -- Info Title 1 Holder -- */ .site-content-portrait .info-title-1-holder{margin: auto; width: 100px; height: 27px;} /* -- Info Title 2 -- */ .site-content-portrait .info-title-2{transform: scale(0.5); transform-origin: top left;} /* -- Info Title 2 Holder -- */ .site-content-portrait .info-title-2-holder{margin: auto; width: 189px; height: 27px;} /* ------------------- */ /* #### INFO PICS #### */ /* ------------------- */ /* -- Info Image 1 (Features 01) -- */ .site-content-portrait .info-pic-1{transform: scale(0.5); transform-origin: top left; margin:auto; margin-bottom:20px;} /* -- Info Image 1 Holder (Features 01) -- */ .site-content-portrait .info-pic-1-holder{width:175px; height:110px; margin:auto; /*margin-top:-20px;*/} /* -- Info Image 2 (Features 02)-- */ .site-content-portrait .info-pic-2{transform: scale(0.62); transform-origin: top left; margin:auto; margin-bottom:20px;} /* -- Info Image 2 Holder (Features 02) -- */ .site-content-portrait .info-pic-2-holder{width: 124px; height: 124px; margin: auto; /*margin-top: -20px;*/} /* -- Info Image 3 (Features 01)-- */ /*DL*/ .site-content-portrait .info-pic-3{transform:scale(0.5); transform-origin:top left; margin:auto; margin-bottom:20px;} /* -- Info Image 3 Holder (Features 01) -- */ /*DL*/ .site-content-portrait .info-pic-3-holder{/*background: red; */width:130px; height:62px; margin:auto; margin-top:-17px;} /* -- Info Image 4 (Features 01)-- */ .site-content-portrait .info-pic-4{transform: scale(0.6); transform-origin: 10px -30px; margin:auto; margin-bottom:20px;} /* -- Info Image 4 Holder (Features 01) -- */ .site-content-portrait .info-pic-4-holder{/* background: red; */ width:189px; height:103px; margin:auto;} /* -- Info Image 2 (Gamble) -- */ /*fd*/ .site-content-portrait .info-pic-gamble{transform: scale(0.54); transform-origin: top left;} /* -- Info Image 2 Holder (Gamble) --*/ /*fd*/ .site-content-portrait .info-pic-gamble-holder{margin:auto; width:292px; height:140px; margin-bottom:20px;} /* ------------------------- */ /* ### INFO BACK STYLES #### */ /* ------------------------- */ /* -- Info Back Style 0 -- */ .site-content-portrait .back-style-0{/*background: red;*/ width:294px; margin: auto;} /* -- Info Back Style 1 (Feature 02) -- */ /*fd*/ .site-content-portrait .back-style-1{width: 274px; margin: auto; margin-top: 20px; /*height: 140px;*/ margin-bottom:20px; padding: 0 10px 0 10px; border-top: 1px solid yellow; border-bottom: 1px solid yellow;} /* -- Info Back Style 2 -- */ /*DL*/ .site-content-portrait .back-style-2{width: 228px; /*height: 157px;*/ padding: 0 10px 0 10px; margin: auto; margin-bottom:20px; border-top: 1px solid yellow; border-bottom: 1px solid yellow;} /* -- Info Back Style 3 (Rules) -- */ /*fd*/ .site-content-portrait .back-style-3{width: 274px; margin: auto; /*height: 432px;*/ padding: 0 10px 0 10px; border-top: 1px solid yellow; border-bottom: 1px solid yellow;} /* -- Info Back Style 4 (Gamble) -- */ /*fd*/ .site-content-portrait .back-style-4{width: 274px; margin: auto; /*height: 186px;*/ padding: 0 10px 0 10px; border-top: 1px solid yellow; border-bottom: 1px solid yellow;} /* -- Info Back Style 5 (Feature 02) -- */ .site-content-portrait .back-style-5{width: 274px; margin: auto; margin-top:10px; margin-bottom:10px; /*height: 180px;*/ padding: 0 10px 0 10px; border-top: 1px solid yellow; border-bottom: 1px solid yellow;} /* -- Info Back Style 6 (Feature 02) -- */ .site-content-portrait .back-style-6{width: 274px; margin: auto; margin-top: 10px; /*height: 150px;*/ margin-bottom:20px; padding: 0 10px 0 10px; border-top: 1px solid yellow; border-bottom: 1px solid yellow;} /* #### PAYTABLE LABELS #### */ /* -- Scatter Label Holder -- */ .site-content-portrait .pay-scatter-holder{width:45%; height: 13px; margin-top:-186px; margin-left:57%;} /* -- Scatter Label -- */ .site-content-portrait .pay-scatter{transform: scale(0.28); transform-origin: top left;} /* -- Wild Label Holder -- */ .site-content-portrait .pay-wild-holder{width:45%; height: 13px; margin-top:-186px; margin-left:57%;} /* -- Wild Label -- */ .site-content-portrait .pay-wild{transform: scale(0.28); transform-origin: top left;} /* -- font colors -- */ .colorYellow{color:#fdcb32;} /* ######################################################################################################### */ /* PAGE PAYLINES */ /* ######################################################################################################### */ /* -- Paylines Pic Holder -- */ .site-content-portrait .paylines-holder {height:350px;} /* -- Paylines Pic -- */ .site-content-portrait .paylines-pic {transform: scale(0.5); transform-origin: -26px 0px;} /* ######################################################################################################### */ /* WIN WAYS */ /* ######################################################################################################### */ /* -- Way Box -- */ .site-content-portrait .way-box{width:50%; height:169px;} /* -- Ways Reels Holder -- */ .site-content-portrait .ways-reels-holder{/*background:#336699;*/ margin:auto; width:85px;} /* -- Ways Title -- */ .site-content-portrait .ways-title {/*background: green;*/ font-size: 16px;} /* -- Ways Grid Holder -- */ .site-content-portrait .grid-ways{padding-top:4px; padding-bottom:4px; width:100px; margin-top:10px;} /* -- Ways Grid Cell -- */ .site-content-portrait .grid-ways-cell{float: left; width: 13px; height: 13px; border: 1px solid #ffcc00; margin: 1px;} /* -- Ways Info Text -- */ .site-content-portrait .ways-info{font-size:11px; line-height:14px; margin-top:20px;} /* -- Ways Reels Numbers Holder -- */ .site-content-portrait .ways-reels{/*background:orange;*/font-size:14px; line-height:14px;} /* -- Ways Reel Number -- */ .site-content-portrait .ways-reel{float:left; width:17px;} /* -- Ways Positions Holder -- */ .site-content-portrait .ways-positions{/*background:black;*/font-size:14px;} /* -- Ways Position -- */ .site-content-portrait .ways-pos{/*background:blue;*/ float:left; width:17px; text-align:left;} /* -- Ways Total -- */ .site-content-portrait .ways-total{/*background:black;*/ font-size:14px; width:100%; text-align:center; margin-top:6px; } /* ######################################################################################################### */ /* PAGE PAYOUTS */ /* ######################################################################################################### */ /* -- Image Scale -- */ .site-content-portrait .sym-img-scale{ transform: scale(0.45); margin-top: -79px; margin-left: -70px;} /* -- Each Pay -- */ .site-content-portrait .sym-pays{font-size: 11px; line-height: 12px;} /* -- Symbol Container -- */ .site-content-portrait .sym-holder{height: 70px; margin-top: 5px; margin-bottom: 5px; border-top: 1px solid yellow; border-bottom: 1px solid yellow;} /* -- Pay Holder -- */ .site-content-portrait .sym-pay-holder{width: 45%; top: -171px;} #paytable-list{height:100%;} /* -- Each Pay -- */ .site-content-portrait .sym-pays{font-size: 21px; line-height: 21px;} .site-content-portrait .mpp-label{float:left;width:10px;height:11px;padding:0px;} .site-content-portrait .mpp-value{float:left;width:48px;height:11px; margin-left:2px; padding:0px;} } /* ######################################################################################################### */ /* --------------------------------------------------------------------------------------------------------- */ /* */ /* Group F // pixel 2 XL / Samsung Galaxy Note8 / Note9 / S9+ / Xiaomi Pocophone F1 */ /* */ /* --------------------------------------------------------------------------------------------------------- */ /* ######################################################################################################### */ @media screen and (min-width: 393px) and (max-width: 414px) and (min-height: 798px) and (max-height: 850px) and (orientation:portrait) and (-webkit-min-device-pixel-ratio: 2.6){ /* -------------------------------------------------------------------------------------------------------- */ /* */ /* _ __ _ _____ _____ ____ */ /* | | \ | | |____| | | */ /* | | \_| | | \ |____| */ /* */ /* */ /* -------------------------------------------------------------------------------------------------------- */ /* -- logo -- */ .intro-portrait #layer_02 {transform: scale(0.9); top: -37%;} /* -- game -- */ .intro-portrait #layer_03 {transform: scale(1); top: 23%;} /* -- arrow --*/ .intro-portrait #layer_04 {transform: scale(0.8); top: 85%;} /* -- extra -- */ .intro-portrait #layer_05 {transform: scale(0.9); top: -27%; left:35%;} /* -- reels -- */ .intro-portrait #layer_06 {transform: scale(0.88); top: 113%;} /* -- paylines -- */ .intro-portrait #layer_07 {transform: scale(0.88); bottom: -59%;} /* -- pink background -- */ .intro-portrait #layer_08 {transform: scale(1); bottom: -12%;} /* -- Bottom Holder -- */ .intro-portrait #intro-bottom-holder{margin-top: 1183px; height: 176px;} /* -- Play Button -- */ .intro-portrait #btn-play{transform:scale(1.5);} /* -- Invisible Press -- */ .intro-portrait .collider{width: 350px; height: 111px; bottom: -572px; left: 468px;} /* -- Skip message -- */ .intro-portrait #intro-skip{font-size: 30px;} /* -- Check Box -- */ .intro-portrait .intro-check {width: 26px;height: 26px;} /* ######################################################################################################### */ /* PRELOADER */ /* ######################################################################################################### */ /* -- Preloader Back -- */ .intro-portrait .preloader-back{left: calc(640px - 250px); top: 1214px;} /* -- Preloader Bar -- */ .intro-portrait .preloader-bar{left: calc(640px - 197px); top: 1206px;} /* -------------------------------------------------------------------------------------------------------- */ /* */ /* _____ ____ __ _ ____ _ */ /* |____| |____| | \ | |___ | */ /* | | | | \_| |____ |____ */ /* */ /* */ /* -------------------------------------------------------------------------------------------------------- */ /* ######################################################################################################### */ /* 2. GAME LOGO */ /* ######################################################################################################### */ /* -- Game Logo --*/ .gameLogo{margin-top: -40px; transform: scale(0.5);} /* -------------------------------------------------------------------------------------------------------- */ /* */ /* _ __ _ _____ ____ _____ ____ ____ ____ ____ */ /* | | \ | |___ | | |____| |____| | __ |___ |___ */ /* | | \_| | |____| | | | |____| |____ ____| */ /* */ /* */ /* -------------------------------------------------------------------------------------------------------- */ /* ######################################################################################################### */ /* MAIN HOLDER */ /* ######################################################################################################### */ /* -- Page Title -- */ .info-parts-portrait .info-title{margin-top: 20px;} /* --Info Content -- */ .site-content-portrait .info-holder{/*background:green;*/ width:calc(100% - 40px);} /* ######################################################################################################### */ /* PAGES TITLE */ /* ######################################################################################################### */ /* -- Page Title Holder -- */ .info-parts-portrait .title-holder{width: 100%; height: 40px; -ms-transform: scale(0.80); /* IE 9 */ -webkit-transform: scale(0.80); /* Safari */ transform: scale(0.80);} /* ######################################################################################################### */ /* NAVIGATION BUTTONS */ /* ######################################################################################################### */ /* -- Next Button -- */ .info-parts-portrait .info-btn-next {bottom: -20px; right: -10px; -ms-transform: scale(0.4); /* IE 9 */ -webkit-transform: scale(0.4); /* Safari */ transform: scale(0.4);} /* -- Previous Button -- */ .info-parts-portrait .info-btn-prev {bottom: -20px; left: -10px; -ms-transform: scale(0.4); /* IE 9 */ -webkit-transform: scale(0.4); /* Safari */ transform: scale(0.4);} /* ######################################################################################################### */ /* PAGE SLIDER */ /* ######################################################################################################### */ /* -- Slider Container -- */ .info-parts-portrait .info-page-footer {bottom: 10px;} /* -- Dot -- */ .dot{width:10px; height:10px; margin-right:6px; margin-left:6px;} /* -- Selected Dot -- */ .dot-selected{width:10px; height:10px; margin-right:6px; margin-left:6px;} /* ######################################################################################################### */ /* CLOSE BUTTON */ /* ######################################################################################################### */ /* -- Close Info Button -- */ .info-parts-portrait .btn-close {bottom: 24px; transform: scale(0.5); transform-origin: 30px 110px;} /* ######################################################################################################### */ /* INFO PAGES */ /* ######################################################################################################### */ /* -------------------- */ /* #### INFO FONTS #### */ /* -------------------- */ /* -- Info Font 1 -- */ /*fd*/ .site-content-portrait .info-font-1{font-size: 11px; line-height: 14px; margin-bottom: 10px; margin-top:10px;} /* -- Info Font 2 -- */ .site-content-portrait .info-font-2{font-size: 11px; line-height: 12px; margin-bottom: 6px; margin-top: 0px;} /* -- Info Font 3 -- */ /*DL*/ .site-content-portrait .info-font-3{font-size: 11px; line-height: 14px; margin-bottom: 9px; margin-top:0px;} /* -- Info Font 4 -- */ /*fd*/ .site-content-portrait .info-font-4{font-size: 12px; line-height: 16px; margin-bottom: 12px; margin-top: -10px;} /* -- Info Font 5 -- */ .site-content-portrait .info-font-5{font-size: 11px; line-height: 12px; margin-bottom: 10px; margin-top: -00px;} /* --------------------------- */ /* #### INFO MARKED FONTS #### */ /* --------------------------- */ /* -- Info Font 1 Marked -- */ .site-content-portrait .info-font-1 .marked{font-size: 17px;} /* -- Info Font 2 Marked -- */ .site-content-portrait .info-font-2 .marked{font-size: 14px;} /* -- Info Font 3 Marked -- */ .site-content-portrait .info-font-3 .marked{font-size: 16px;} /* -- Info Font 4 Marked -- */ /*fd*/ .site-content-portrait .info-font-4 .marked{font-size: 17px;} /* -- Info Font 5 Marked -- */ .site-content-portrait .info-font-5 .marked{font-size: 14px;} /* --------------------- */ /* #### INFO TITLES #### */ /* --------------------- */ /* -- Info Title 1 -- */ .site-content-portrait .info-title-1{transform: scale(0.5); transform-origin: top left;} /* -- Info Title 1 Holder -- */ .site-content-portrait .info-title-1-holder{margin: auto; width: 100px; height: 27px;} /* -- Info Title 2 -- */ .site-content-portrait .info-title-2{transform: scale(0.5); transform-origin: top left;} /* -- Info Title 2 Holder -- */ .site-content-portrait .info-title-2-holder{margin: auto; width: 189px; height: 27px;} /* ------------------- */ /* #### INFO PICS #### */ /* ------------------- */ /* -- Info Image 1 (Features 01) -- */ .site-content-portrait .info-pic-1{transform: scale(0.5); transform-origin: top left; margin:auto; margin-bottom:20px;} /* -- Info Image 1 Holder (Features 01) -- */ .site-content-portrait .info-pic-1-holder{width:175px; height:110px; margin:auto; /*margin-top:-20px;*/} /* -- Info Image 2 (Features 02)-- */ .site-content-portrait .info-pic-2{transform: scale(0.62); transform-origin: top left; margin:auto; margin-bottom:20px;} /* -- Info Image 2 Holder (Features 02) -- */ .site-content-portrait .info-pic-2-holder{width: 124px; height: 124px; margin: auto; /*margin-top: -20px;*/} /* -- Info Image 3 (Features 01)-- */ /*DL*/ .site-content-portrait .info-pic-3{transform:scale(0.5); transform-origin:top left; margin:auto; margin-bottom:20px;} /* -- Info Image 3 Holder (Features 01) -- */ /*DL*/ .site-content-portrait .info-pic-3-holder{/*background: red; */width:130px; height:62px; margin:auto; margin-top:-17px;} /* -- Info Image 4 (Features 01)-- */ .site-content-portrait .info-pic-4{transform: scale(0.6); transform-origin: 10px -30px; margin:auto; margin-bottom:20px;} /* -- Info Image 4 Holder (Features 01) -- */ .site-content-portrait .info-pic-4-holder{/* background: red; */ width:189px; height:103px; margin:auto;} /* -- Info Image 2 (Gamble) -- */ /*fd*/ .site-content-portrait .info-pic-gamble{transform: scale(0.54); transform-origin: top left;} /* -- Info Image 2 Holder (Gamble) --*/ /*fd*/ .site-content-portrait .info-pic-gamble-holder{margin:auto; width:292px; height:140px; margin-bottom:20px;} /* ------------------------- */ /* ### INFO BACK STYLES #### */ /* ------------------------- */ /* -- Info Back Style 0 -- */ .site-content-portrait .back-style-0{/*background: red;*/ width:294px; margin: auto;} /* -- Info Back Style 1 (Feature 02) -- */ /*fd*/ .site-content-portrait .back-style-1{width: 274px; margin: auto; margin-top: 20px; /*height: 140px;*/ margin-bottom:20px; padding: 0 10px 0 10px; border-top: 1px solid yellow; border-bottom: 1px solid yellow;} /* -- Info Back Style 2 -- */ /*DL*/ .site-content-portrait .back-style-2{width: 228px; /*height: 157px;*/ padding: 0 10px 0 10px; margin: auto; margin-bottom:20px; border-top: 1px solid yellow; border-bottom: 1px solid yellow;} /* -- Info Back Style 3 (Rules) -- */ /*fd*/ .site-content-portrait .back-style-3{width: 274px; margin: auto; /*height: 432px;*/ padding: 0 10px 0 10px; border-top: 1px solid yellow; border-bottom: 1px solid yellow;} /* -- Info Back Style 4 (Gamble) -- */ /*fd*/ .site-content-portrait .back-style-4{width: 274px; margin: auto; /*height: 186px;*/ padding: 0 10px 0 10px; border-top: 1px solid yellow; border-bottom: 1px solid yellow;} /* -- Info Back Style 5 (Feature 02) -- */ .site-content-portrait .back-style-5{width: 274px; margin: auto; margin-top:10px; margin-bottom:10px; /*height: 180px;*/ padding: 0 10px 0 10px; border-top: 1px solid yellow; border-bottom: 1px solid yellow;} /* -- Info Back Style 6 (Feature 02) -- */ .site-content-portrait .back-style-6{width: 274px; margin: auto; margin-top: 10px; /*height: 150px;*/ margin-bottom:20px; padding: 0 10px 0 10px; border-top: 1px solid yellow; border-bottom: 1px solid yellow;} /* #### PAYTABLE LABELS #### */ /* -- Scatter Label Holder -- */ .site-content-portrait .pay-scatter-holder{width:45%; height: 13px; margin-top:-186px; margin-left:56%;} /* -- Scatter Label -- */ .site-content-portrait .pay-scatter{transform: scale(0.28); transform-origin: top left;} /* -- Wild Label Holder -- */ .site-content-portrait .pay-wild-holder{width:45%; height: 13px; margin-top:-186px; margin-left:56%;} /* -- Wild Label -- */ .site-content-portrait .pay-wild{transform: scale(0.28); transform-origin: top left;} /* -- font colors -- */ .colorYellow{color:#fdcb32;} /* ######################################################################################################### */ /* PAGE PAYLINES */ /* ######################################################################################################### */ /* -- Paylines Pic Holder -- */ .site-content-portrait .paylines-holder {height:350px;} /* -- Paylines Pic -- */ .site-content-portrait .paylines-pic {transform: scale(0.5); transform-origin: -26px 0px;} /* ######################################################################################################### */ /* WIN WAYS */ /* ######################################################################################################### */ /* -- Way Box -- */ .site-content-portrait .way-box{width:50%; height:169px;} /* -- Ways Reels Holder -- */ .site-content-portrait .ways-reels-holder{/*background:#336699;*/ margin:auto; width:85px;} /* -- Ways Title -- */ .site-content-portrait .ways-title {/*background: green;*/ font-size: 16px;} /* -- Ways Grid Holder -- */ .site-content-portrait .grid-ways{padding-top:4px; padding-bottom:4px; width:100px; margin-top:10px;} /* -- Ways Grid Cell -- */ .site-content-portrait .grid-ways-cell{float: left; width: 13px; height: 13px; border: 1px solid #ffcc00; margin: 1px;} /* -- Ways Info Text -- */ .site-content-portrait .ways-info{font-size:11px; line-height:14px; margin-top:20px;} /* -- Ways Reels Numbers Holder -- */ .site-content-portrait .ways-reels{/*background:orange;*/font-size:14px; line-height:14px;} /* -- Ways Reel Number -- */ .site-content-portrait .ways-reel{float:left; width:17px;} /* -- Ways Positions Holder -- */ .site-content-portrait .ways-positions{/*background:black;*/font-size:14px;} /* -- Ways Position -- */ .site-content-portrait .ways-pos{/*background:blue;*/ float:left; width:17px; text-align:left;} /* -- Ways Total -- */ .site-content-portrait .ways-total{/*background:black;*/ font-size:14px; width:100%; text-align:center; margin-top:6px; } /* ######################################################################################################### */ /* PAGE PAYOUTS */ /* ######################################################################################################### */ /* -- Image Scale -- */ .site-content-portrait .sym-img-scale{ transform: scale(0.45); margin-top: -79px; margin-left: -70px;} /* -- Each Pay -- */ .site-content-portrait .sym-pays{font-size: 11px; line-height: 12px;} /* -- Symbol Container -- */ .site-content-portrait .sym-holder{height: 70px; margin-top: 5px; margin-bottom: 5px; border-top: 1px solid yellow; border-bottom: 1px solid yellow;} /* -- Pay Holder -- */ .site-content-portrait .sym-pay-holder{width: 48%; top: -171px;} #paytable-list{height:100%;} /* -- Each Pay -- */ .site-content-portrait .sym-pays{font-size: 20px; line-height: 20px;} .site-content-portrait .mpp-label{float:left;width:11px;height:12px;padding:0px;} .site-content-portrait .mpp-value{float:left;width:55px;height:12px; margin-left:2px; padding:0px;} } /* ######################################################################################################### */ /* --------------------------------------------------------------------------------------------------------- */ /* */ /* Group E // iPhone 6 / iPhone 6 Plus */ /* */ /* --------------------------------------------------------------------------------------------------------- */ /* ######################################################################################################### */ /* -- L A N D S C A P E -- */ @media screen and (max-height: 360px),(max-height:414px) and (max-width: 640px),(max-width: 736px) and (orientation:landscape){ } /* -- P O R T R A I T -- */ @media screen and (max-width: 360px),(max-width:414px) and (max-height: 640px),(max-height: 736px) and (orientation:portrait){ /*.site-content-portrait{background:#fbaf5d;}*/ /* -------------------------------------------------------------------------------------------------------- */ /* */ /* _ __ _ _____ _____ ____ */ /* | | \ | | |____| | | */ /* | | \_| | | \ |____| */ /* */ /* */ /* -------------------------------------------------------------------------------------------------------- */ /* -- logo -- */ .intro-portrait #layer_02 {transform: scale(0.9); top: -28%;} /* -- game -- */ .intro-portrait #layer_03 {transform: scale(1); top: 19%;} /* -- arrow --*/ .intro-portrait #layer_04 {transform: scale(0.7); top: 74%;} /* -- extra -- */ .intro-portrait #layer_05 {transform: scale(0.9); top: -25%; left:35%;} /* -- reels -- */ .intro-portrait #layer_06 {transform: scale(0.75); top: 99%;} /* -- paylines -- */ .intro-portrait #layer_07 {transform: scale(0.75); bottom: -42%;} /* -- pink background -- */ .intro-portrait #layer_08 {transform: scale(1); bottom: -9%;} /* -- Bottom Holder -- */ .intro-portrait #intro-bottom-holder{margin-top: 1048px; height: 176px;} /* -- Play Button -- */ .intro-portrait #btn-play{transform:scale(1.5);} /* -- Invisible Press -- */ .intro-portrait .collider{width: 330px; height: 113px; bottom: -438px; left: 476px;} /* -- Skip message -- */ .intro-portrait #intro-skip{font-size: 30px;} /* -- Check Box -- */ .intro-portrait .intro-check {width: 26px;height: 26px;} /* ######################################################################################################### */ /* PRELOADER */ /* ######################################################################################################### */ /* -- Preloader Back -- */ .intro-portrait .preloader-back{left: calc(640px - 250px); top: 1094px;} /* -- Preloader Bar -- */ .intro-portrait .preloader-bar{left: calc(640px - 197px); top: 1086px;} /* -------------------------------------------------------------------------------------------------------- */ /* */ /* _____ ____ __ _ ____ _ */ /* |____| |____| | \ | |___ | */ /* | | | | \_| |____ |____ */ /* */ /* */ /* -------------------------------------------------------------------------------------------------------- */ /* ######################################################################################################### */ /* 2. GAME LOGO */ /* ######################################################################################################### */ /* -- Game Logo --*/ .gameLogo{margin-top: -40px; transform: scale(0.5);} /* -------------------------------------------------------------------------------------------------------- */ /* */ /* _ __ _ _____ ____ _____ ____ ____ ____ ____ */ /* | | \ | |___ | | |____| |____| | __ |___ |___ */ /* | | \_| | |____| | | | |____| |____ ____| */ /* */ /* */ /* -------------------------------------------------------------------------------------------------------- */ /* ######################################################################################################### */ /* MAIN HOLDER */ /* ######################################################################################################### */ /* -- Page Title -- */ .info-parts-portrait .info-title{margin-top: 20px;} /* --Info Content -- */ .site-content-portrait .info-holder{/*background:green;*/ width:calc(100% - 40px);} /* ######################################################################################################### */ /* PAGES TITLE */ /* ######################################################################################################### */ /* -- Page Title Holder -- */ .info-parts-portrait .title-holder{width: 100%; height: 40px; -ms-transform: scale(0.80); /* IE 9 */ -webkit-transform: scale(0.80); /* Safari */ transform: scale(0.80);} /* ######################################################################################################### */ /* NAVIGATION BUTTONS */ /* ######################################################################################################### */ /* -- Next Button -- */ .info-parts-portrait .info-btn-next {bottom: -20px; right: -10px; -ms-transform: scale(0.4); /* IE 9 */ -webkit-transform: scale(0.4); /* Safari */ transform: scale(0.4);} /* -- Previous Button -- */ .info-parts-portrait .info-btn-prev {bottom: -20px; left: -10px; -ms-transform: scale(0.4); /* IE 9 */ -webkit-transform: scale(0.4); /* Safari */ transform: scale(0.4);} /* ######################################################################################################### */ /* PAGE SLIDER */ /* ######################################################################################################### */ /* -- Slider Container -- */ .info-parts-portrait .info-page-footer {bottom: 10px;} /* -- Dot -- */ .dot{width:10px; height:10px; margin-right:6px; margin-left:6px;} /* -- Selected Dot -- */ .dot-selected{width:10px; height:10px; margin-right:6px; margin-left:6px;} /* ######################################################################################################### */ /* CLOSE BUTTON */ /* ######################################################################################################### */ /* -- Close Info Button -- */ .info-parts-portrait .btn-close{bottom: 24px; transform: scale(0.5); transform-origin: 30px 110px;} /* ######################################################################################################### */ /* INFO PAGES */ /* ######################################################################################################### */ /* -------------------- */ /* #### INFO FONTS #### */ /* -------------------- */ /* -- Info Font 1 -- */ /*fd*/ .site-content-portrait .info-font-1{font-size: 11px; line-height: 14px; margin-bottom: 10px; margin-top:10px;} /* -- Info Font 2 -- */ .site-content-portrait .info-font-2{font-size: 11px; line-height: 12px; margin-bottom: 6px; margin-top: 0px;} /* -- Info Font 3 -- */ /*DL*/ .site-content-portrait .info-font-3{font-size: 11px; line-height: 14px; margin-bottom: 9px; margin-top:0px;} /* -- Info Font 4 -- */ /*fd*/ .site-content-portrait .info-font-4{font-size: 12px; line-height: 16px; margin-bottom: 12px; margin-top: -10px;} /* -- Info Font 5 -- */ .site-content-portrait .info-font-5{font-size: 11px; line-height: 12px; margin-bottom: 10px; margin-top: -00px;} /* --------------------------- */ /* #### INFO MARKED FONTS #### */ /* --------------------------- */ /* -- Info Font 1 Marked -- */ .site-content-portrait .info-font-1 .marked{font-size: 17px;} /* -- Info Font 2 Marked -- */ .site-content-portrait .info-font-2 .marked{font-size: 14px;} /* -- Info Font 3 Marked -- */ .site-content-portrait .info-font-3 .marked{font-size: 16px;} /* -- Info Font 4 Marked -- */ /*fd*/ .site-content-portrait .info-font-4 .marked{font-size: 17px;} /* -- Info Font 5 Marked -- */ .site-content-portrait .info-font-5 .marked{font-size: 14px;} /* --------------------- */ /* #### INFO TITLES #### */ /* --------------------- */ /* -- Info Title 1 -- */ .site-content-portrait .info-title-1{transform: scale(0.5); transform-origin: top left;} /* -- Info Title 1 Holder -- */ .site-content-portrait .info-title-1-holder{margin: auto; width: 100px; height: 27px;} /* -- Info Title 2 -- */ .site-content-portrait .info-title-2{transform: scale(0.5); transform-origin: top left;} /* -- Info Title 2 Holder -- */ .site-content-portrait .info-title-2-holder{margin: auto; width: 189px; height: 27px;} /* ------------------- */ /* #### INFO PICS #### */ /* ------------------- */ /* -- Info Image 1 (Features 01) -- */ .site-content-portrait .info-pic-1{transform: scale(0.5); transform-origin: top left; margin:auto; margin-bottom:20px;} /* -- Info Image 1 Holder (Features 01) -- */ .site-content-portrait .info-pic-1-holder{width:175px; height:110px; margin:auto; /*margin-top:-20px;*/} /* -- Info Image 2 (Features 02)-- */ .site-content-portrait .info-pic-2{transform: scale(0.62); transform-origin: top left; margin:auto; margin-bottom:20px;} /* -- Info Image 2 Holder (Features 02) -- */ .site-content-portrait .info-pic-2-holder{width: 124px; height: 124px; margin: auto; /*margin-top: -20px;*/} /* -- Info Image 3 (Features 01)-- */ /*DL*/ .site-content-portrait .info-pic-3{transform:scale(0.5); transform-origin:top left; margin:auto; margin-bottom:20px;} /* -- Info Image 3 Holder (Features 01) -- */ /*DL*/ .site-content-portrait .info-pic-3-holder{/*background: red; */width:130px; height:62px; margin:auto; margin-top:-17px;} /* -- Info Image 4 (Features 01)-- */ .site-content-portrait .info-pic-4{transform: scale(0.6); transform-origin: 10px -30px; margin:auto; margin-bottom:20px;} /* -- Info Image 4 Holder (Features 01) -- */ .site-content-portrait .info-pic-4-holder{/* background: red; */ width:189px; height:103px; margin:auto;} /* -- Info Image 2 (Gamble) -- */ /*fd*/ .site-content-portrait .info-pic-gamble{transform: scale(0.54); transform-origin: top left;} /* -- Info Image 2 Holder (Gamble) --*/ /*fd*/ .site-content-portrait .info-pic-gamble-holder{margin:auto; width:292px; height:140px; margin-bottom:20px;} /* ------------------------- */ /* ### INFO BACK STYLES #### */ /* ------------------------- */ /* -- Info Back Style 0 -- */ .site-content-portrait .back-style-0{/*background: red;*/ width:294px; margin: auto;} /* -- Info Back Style 1 (Feature 02) -- */ /*fd*/ .site-content-portrait .back-style-1{width: 274px; margin: auto; margin-top: 20px; /*height: 140px;*/ margin-bottom:20px; padding: 0 10px 0 10px; border-top: 1px solid yellow; border-bottom: 1px solid yellow;} /* -- Info Back Style 2 -- */ /*DL*/ .site-content-portrait .back-style-2{width: 228px; /*height: 157px;*/ padding: 0 10px 0 10px; margin: auto; margin-bottom:20px; border-top: 1px solid yellow; border-bottom: 1px solid yellow;} /* -- Info Back Style 3 (Rules) -- */ /*fd*/ .site-content-portrait .back-style-3{width: 274px; margin: auto; /*height: 432px;*/ padding: 0 10px 0 10px; border-top: 1px solid yellow; border-bottom: 1px solid yellow;} /* -- Info Back Style 4 (Gamble) -- */ /*fd*/ .site-content-portrait .back-style-4{width: 274px; margin: auto; /*height: 186px;*/ padding: 0 10px 0 10px; border-top: 1px solid yellow; border-bottom: 1px solid yellow;} /* -- Info Back Style 5 (Feature 02) -- */ .site-content-portrait .back-style-5{width: 274px; margin: auto; margin-top:10px; margin-bottom:10px; /*height: 180px;*/ padding: 0 10px 0 10px; border-top: 1px solid yellow; border-bottom: 1px solid yellow;} /* -- Info Back Style 6 (Feature 02) -- */ .site-content-portrait .back-style-6{width: 274px; margin: auto; margin-top: 10px; /*height: 150px;*/ margin-bottom:20px; padding: 0 10px 0 10px; border-top: 1px solid yellow; border-bottom: 1px solid yellow;} /* #### PAYTABLE LABELS #### */ /* -- Scatter Label Holder -- */ .site-content-portrait .pay-scatter-holder{width:45%; height: 13px; margin-top:-185px; margin-left:58%;} /* -- Scatter Label -- */ .site-content-portrait .pay-scatter{transform: scale(0.28); transform-origin: top left;} /* -- Wild Label Holder -- */ .site-content-portrait .pay-wild-holder{width:45%; height: 13px; margin-top:-185px; margin-left:58%;} /* -- Wild Label -- */ .site-content-portrait .pay-wild{transform: scale(0.28); transform-origin: top left;} /* -- font colors -- */ .colorYellow{color:#fdcb32;} /* ######################################################################################################### */ /* PAGE PAYLINES */ /* ######################################################################################################### */ /* -- Paylines Pic Holder -- */ .site-content-portrait .paylines-holder {height:350px;} /* -- Paylines Pic -- */ .site-content-portrait .paylines-pic {transform: scale(0.5); transform-origin: -26px 0px;} /* ######################################################################################################### */ /* WIN WAYS */ /* ######################################################################################################### */ /* -- Way Box -- */ .site-content-portrait .way-box{width:50%; height:139px;} /* -- Ways Reels Holder -- */ .site-content-portrait .ways-reels-holder{/*background:#336699;*/ margin:auto; width:76px;} /* -- Ways Grid Holder -- */ .site-content-portrait .grid-ways{padding-top:4px; padding-bottom:4px; width:100px; margin-top:10px;} /* -- Ways Info Text -- */ .site-content-portrait .ways-info{font-size:12px; line-height:12px; margin-top:13px;} /* ######################################################################################################### */ /* PAGE PAYOUTS */ /* ######################################################################################################### */ /* -- Image Scale -- */ .site-content-portrait .sym-img-scale{ transform: scale(0.45); margin-top: -79px; margin-left: -70px;} /* -- Each Pay -- */ .site-content-portrait .sym-pays{font-size: 11px; line-height: 12px;} .site-content-portrait .sym-pays-holder{padding-left:0px;} /* -- Symbol Container -- */ .site-content-portrait .sym-holder{height: 70px; margin-top: 5px; margin-bottom: 5px; border-top: 1px solid yellow; border-bottom: 1px solid yellow;} /* -- Pay Holder -- */ .site-content-portrait .sym-pay-holder{width: 45%; top: -171px;} #paytable-list{height:100%;} /* -- Each Pay -- */ .site-content-portrait .sym-pays{font-size: 21px; line-height: 21px;} .site-content-portrait .mpp-label{float:left;width:10px;height:12px;padding:0px;} .site-content-portrait .mpp-value{float:left;width:44px;height:12px; margin-left:2px; padding:0px;} } /* ######################################################################################################### */ /* --------------------------------------------------------------------------------------------------------- */ /* */ /* Group D // iPhone 5 / Galaxy S3, S4, S5, S6, S6 Edge, HTC One X, BlackBerry Z10 / LG G5 */ /* */ /* --------------------------------------------------------------------------------------------------------- */ /* ######################################################################################################### */ /* -- L A N D S C A P E -- */ @media screen and (max-width: 320px) and (max-height: 568px),(max-height: 640px) and (orientation:landscape){ } /* -- P O R T R A I T -- */ @media screen and (max-width: 320px) and (max-height: 568px),(max-height: 640px) and (orientation:portrait){ /*.site-content-portrait{background:blue;}*/ /* -------------------------------------------------------------------------------------------------------- */ /* */ /* _ __ _ _____ _____ ____ */ /* | | \ | | |____| | | */ /* | | \_| | | \ |____| */ /* */ /* */ /* -------------------------------------------------------------------------------------------------------- */ /* -- logo -- */ .intro-portrait #layer_02 {transform: scale(0.8); top: -19%;} /* -- game -- */ .intro-portrait #layer_03 {transform: scale(0.95); top: 32%;} /* -- arrow --*/ .intro-portrait #layer_04 {transform: scale(0.6); top: 83%;} /* -- extra -- */ .intro-portrait #layer_05 {transform: scale(0.9); top:-12%;} /* -- reels -- */ .intro-portrait #layer_06 {transform: scale(0.68); top: 106%;} /* -- paylines -- */ .intro-portrait #layer_07 {transform: scale(0.7); bottom: -47%;} /* -- pink background -- */ .intro-portrait #layer_08 {transform: scale(1); bottom: -21%;} /* -- Bottom Holder -- */ .intro-portrait #intro-bottom-holder{margin-top: 1088px; height: 175px;} /* -- Play Button -- */ .intro-portrait #btn-play{transform:scale(1.5);} /* -- Invisible Press -- */ .intro-portrait .collider{width: 330px; height: 108px; bottom: -475px; left: 475px;} /* -- Skip message -- */ .intro-portrait #intro-skip{font-size: 30px;} /* -- Check Box -- */ .intro-portrait .intro-check {width: 28px;height: 28px;} /* ######################################################################################################### */ /* PRELOADER */ /* ######################################################################################################### */ /* -- Preloader Back -- */ .intro-portrait .preloader-back{left: calc(640px - 250px); top: 1114px;} /* -- Preloader Bar -- */ .intro-portrait .preloader-bar{left: calc(640px - 197px); top: 1106px;} /* -------------------------------------------------------------------------------------------------------- */ /* */ /* _____ ____ __ _ ____ _ */ /* |____| |____| | \ | |___ | */ /* | | | | \_| |____ |____ */ /* */ /* */ /* -------------------------------------------------------------------------------------------------------- */ /* ######################################################################################################### */ /* 2. GAME LOGO */ /* ######################################################################################################### */ /* -- Game Logo --*/ .gameLogo{margin-top: -30px; transform: scale(0.4);} /* -------------------------------------------------------------------------------------------------------- */ /* */ /* _ __ _ _____ ____ _____ ____ ____ ____ ____ */ /* | | \ | |___ | | |____| |____| | __ |___ |___ */ /* | | \_| | |____| | | | |____| |____ ____| */ /* */ /* */ /* -------------------------------------------------------------------------------------------------------- */ /* ######################################################################################################### */ /* MAIN HOLDER */ /* ######################################################################################################### */ /* --Info Content -- */ .site-content-portrait .info-holder{/*background:#ff007b;*/ width:calc(100% - 20px);} /* ######################################################################################################### */ /* PAGES TITLE */ /* ######################################################################################################### */ /* -- Page Title -- */ .info-parts-portrait .info-title{margin-top: 20px;} /* -- Page Title Holder -- */ .info-parts-portrait .title-holder{width: 100%; height: 40px; -ms-transform: scale(0.65); /* IE 9 */ -webkit-transform: scale(0.65); /* Safari */ transform: scale(0.65);} /* ######################################################################################################### */ /* NAVIGATION BUTTONS */ /* ######################################################################################################### */ /* -- Next Button -- */ .info-parts-portrait .info-btn-next {bottom: -22px; right: -10px; -ms-transform: scale(0.33); /* IE 9 */ -webkit-transform: scale(0.33); /* Safari */ transform: scale(0.33);} /* -- Previous Button -- */ .info-parts-portrait .info-btn-prev {bottom: -22px; left: -10px; -ms-transform: scale(0.33); /* IE 9 */ -webkit-transform: scale(0.33); /* Safari */ transform: scale(0.33);} /* ######################################################################################################### */ /* PAGE SLIDER */ /* ######################################################################################################### */ /* -- Slider Container -- */ .info-parts-portrait .info-page-footer {bottom: 10px;} /* -- Dot -- */ .dot{width:9px; height:9px; margin-left:5px; margin-right:5px;} /* -- Selected Dot -- */ .dot-selected{width:9px; height:9px; margin-left:5px; margin-right:5px;} /* ######################################################################################################### */ /* CLOSE BUTTON */ /* ######################################################################################################### */ /* -- Close Info Button -- */ .info-parts-portrait .btn-close {bottom: 20px; transform: scale(0.44); transform-origin: 45px 100px;} /* ######################################################################################################### */ /* INFO PAGES */ /* ######################################################################################################### */ /* -------------------- */ /* #### INFO FONTS #### */ /* -------------------- */ /* -- Info Font 1 -- */ /*fd*/ .site-content-portrait .info-font-1{font-size: 10px; line-height: 12px; margin-bottom: 5px; margin-top:5px;} /* -- Info Font 2 -- */ .site-content-portrait .info-font-2{font-size: 9px; line-height: 11px; margin-bottom: 4px; margin-top: 0px;} /* -- Info Font 3 -- */ /*DL*/ .site-content-portrait .info-font-3{font-size: 10px; line-height: 12px; margin-bottom: 9px; margin-top:0px;} /* -- Info Font 4 -- */ /*fd*/ .site-content-portrait .info-font-4{font-size: 10px; line-height: 12px; margin-bottom: 12px; margin-top: 0px;} /* -- Info Font 5 -- */ .site-content-portrait .info-font-5{font-size: 10px; line-height: 11px; margin-bottom: 10px; margin-top: 0px;} /* --------------------------- */ /* #### INFO MARKED FONTS #### */ /* --------------------------- */ /* -- Info Font 1 Marked -- */ .site-content-portrait .info-font-1 .marked{font-size: 14px;} /* -- Info Font 2 Marked -- */ .site-content-portrait .info-font-2 .marked{font-size: 11px;} /* -- Info Font 3 Marked -- */ .site-content-portrait .info-font-3 .marked{font-size: 13px;} /* -- Info Font 4 Marked -- */ /*fd*/ .site-content-portrait .info-font-4 .marked{font-size: 14px;} /* -- Info Font 5 Marked -- */ .site-content-portrait .info-font-5 .marked{font-size: 14px;} /* --------------------- */ /* #### INFO TITLES #### */ /* --------------------- */ /* -- Info Title 1 -- */ .site-content-portrait .info-title-1{transform: scale(0.4); transform-origin: top left;} /* -- Info Title 1 Holder -- */ .site-content-portrait .info-title-1-holder{margin: auto; width: 81px; height: 22px;} /* -- Info Title 2 -- */ .site-content-portrait .info-title-2{transform: scale(0.4); transform-origin: top left;} /* -- Info Title 2 Holder -- */ .site-content-portrait .info-title-2-holder{margin: auto; width: 152px; height: 20px;} /* ------------------- */ /* #### INFO PICS #### */ /* ------------------- */ /* -- Info Image 1 (Features 01) -- */ .site-content-portrait .info-pic-1{transform: scale(0.4); transform-origin: top left; margin:auto; margin-bottom:20px;} /* -- Info Image 1 Holder (Features 01) -- */ .site-content-portrait .info-pic-1-holder{width:141px; height:88px; margin:auto; /*margin-top:-15px;*/} /* -- Info Image 2 (Features 02)-- */ .site-content-portrait .info-pic-2{transform: scale(0.5); transform-origin: top left; margin:auto; margin-bottom:20px;} /* -- Info Image 2 Holder (Features 02) -- */ .site-content-portrait .info-pic-2-holder{width: 99px; height: 100px; margin: auto; /*margin-top: -15px;*/} /* -- Info Image 3 (Features 01)-- */ /*DL*/ .site-content-portrait .info-pic-3{transform:scale(0.42); transform-origin:top left; margin:auto; margin-bottom:20px;} /* -- Info Image 3 Holder (Features 01) -- */ /*DL*/ .site-content-portrait .info-pic-3-holder{/*background: red; */width:108px; height:52px; margin:auto; margin-top:-17px;} /* -- Info Image 4 (Features 01)-- */ .site-content-portrait .info-pic-4{transform: scale(0.52); transform-origin: 10px -30px; margin:auto; margin-bottom:20px;} /* -- Info Image 4 Holder (Features 01) -- */ .site-content-portrait .info-pic-4-holder{/* background: red; */ width:171px; height:88px; margin:auto;} /* -- Info Image 2 (Gamble) -- */ /*fd*/ .site-content-portrait .info-pic-gamble{transform: scale(0.46); transform-origin: top left;} /* -- Info Image 2 Holder (Gamble) --*/ /*fd*/ .site-content-portrait .info-pic-gamble-holder{margin:auto; width:249px; height:119px; margin-bottom:20px;} /* ------------------------- */ /* ### INFO BACK STYLES #### */ /* ------------------------- */ /* -- Info Back Style 0 -- */ .site-content-portrait .back-style-0{/*background: red;*/ width:224px; margin: auto; margin-top:-10px;} /* -- Info Back Style 1 (Feature 02) -- */ /*fd*/ .site-content-portrait .back-style-1{width: 204px; margin: auto; margin-top: 15px; margin-bottom:15px; padding: 0 10px 0 10px; border-top: 1px solid yellow; border-bottom: 1px solid yellow;} /* -- Info Back Style 2 -- */ /*DL*/ .site-content-portrait .back-style-2{width: 204px; /*height: 157px;*/ padding: 0 10px 0 10px; margin: auto; margin-bottom:20px; border-top: 1px solid yellow; border-bottom: 1px solid yellow;} /* -- Info Back Style 3 (Rules) -- */ /*fd*/ .site-content-portrait .back-style-3{width: 230px; margin: auto; /*height: 432px;*/ padding: 0 10px 0 10px; border-top: 1px solid yellow; border-bottom: 1px solid yellow;} /* -- Info Back Style 4 (Gamble) -- */ /*fd*/ .site-content-portrait .back-style-4{width: 230px; margin: auto; /*height: 186px;*/ padding: 0 10px 0 10px; border-top: 1px solid yellow; border-bottom: 1px solid yellow;} /* -- Info Back Style 5 (Feature 02) -- */ .site-content-portrait .back-style-5{width: 274px; margin: auto; margin-top:10px; margin-bottom:10px; /*height: 180px;*/ padding: 0 10px 0 10px; border-top: 1px solid yellow; border-bottom: 1px solid yellow;} /* -- Info Back Style 6 (Feature 02) -- */ .site-content-portrait .back-style-6{width: 204px; margin: auto; margin-top: 10px; /*height: 150px;*/ margin-bottom:15px; padding: 0 10px 0 10px; border-top: 1px solid yellow; border-bottom: 1px solid yellow;} /* #### PAYTABLE LABELS #### */ /* -- Scatter Label Holder -- */ .site-content-portrait .pay-scatter-holder{width: 45%; height: 10px; margin-top: -174px; margin-left: 55%;} /* -- Scatter Label -- */ .site-content-portrait .pay-scatter{transform: scale(0.24); transform-origin: -3px -2px;} /* -- Wild Label Holder -- */ .site-content-portrait .pay-wild-holder{width: 45%; height: 10px; margin-top: -174px; margin-left: 55%;} /* -- Wild Label -- */ .site-content-portrait .pay-wild{transform: scale(0.24); transform-origin: -3px -2px;} /* -- font colors -- */ .colorYellow{color:#fdcb32;} /* ######################################################################################################### */ /* PAGE PAYLINES */ /* ######################################################################################################### */ /* -- Paylines Pic Holder -- */ .site-content-portrait .paylines-holder {height:300px;} /* -- Paylines Pic -- */ .site-content-portrait .paylines-pic {transform: scale(0.43); transform-origin: -25px 0px;} /* ######################################################################################################### */ /* WIN WAYS */ /* ######################################################################################################### */ /* -- Way Box -- */ .site-content-portrait .way-box{width:50%; height:155px;} /* -- Ways Reels Holder -- */ .site-content-portrait .ways-reels-holder{/*background:#336699;*/ margin:auto; width:76px; /*height:70px;*/} /* -- Ways Grid Holder -- */ .site-content-portrait .grid-ways{padding-top:4px; padding-bottom:4px; width:100px; margin-top:10px;} /* -- Ways Info Text -- */ .site-content-portrait .ways-info{font-size:12px; line-height:12px; margin-top:13px;} /* ######################################################################################################### */ /* PAGE PAYOUTS */ /* ######################################################################################################### */ /* -- Image Scale -- */ .site-content-portrait .sym-img-scale{ transform: scale(0.41); margin-top: -87px; margin-left: -76px;} /* -- Each Pay -- */ .site-content-portrait .sym-pays{font-size: 10px; line-height: 10px;} /* -- Symbol Container -- */ .site-content-portrait .sym-holder{height: 56px;/* margin-top: 15px; margin-bottom: 15px;*/} /* -- Pays Holder -- */ .site-content-portrait .sym-pays-holder{padding-left: 6px;} /* -- Pay Holder -- */ .site-content-portrait .sym-pay-holder{width: 50%; top: -162px;} #paytable-list{height:97%;} /* -- Each Pay -- */ .site-content-portrait .sym-pays{font-size: 27px; line-height: 27px;} .site-content-portrait .mpp-label{float:left;width:10px;height:13px;padding:0px;} .site-content-portrait .mpp-value{float:left;width:46px;height:13px; margin-left:2px; padding:0px;} } /* ######################################################################################################### */ /* --------------------------------------------------------------------------------------------------------- */ /* */ /* Group C // iPhone 4 */ /* */ /* --------------------------------------------------------------------------------------------------------- */ /* ######################################################################################################### */ /* -- L A N D S C A P E -- */ @media screen and (max-width: 320px) and (max-height:480px) and (orientation:landscape) { } /* -- P O R T R A I T -- */ @media screen and (max-width: 320px) and (max-height:480px) and (orientation:portrait) { /*.site-content-portrait{background:brown;}*/ /* -------------------------------------------------------------------------------------------------------- */ /* */ /* _ __ _ _____ _____ ____ */ /* | | \ | | |____| | | */ /* | | \_| | | \ |____| */ /* */ /* */ /* -------------------------------------------------------------------------------------------------------- */ /* -- logo -- */ .intro-portrait #layer_02 {transform: scale(0.87); top: -7%;} /* -- game -- */ .intro-portrait #layer_03 {transform: scale(1); top: 36%;} /* -- arrow --*/ .intro-portrait #layer_04 {transform: scale(0.6); top: 85%;} /* -- extra -- */ .intro-portrait #layer_05 {transform: scale(0.8); top: -2%;} /* -- reels -- */ .intro-portrait #layer_06 {transform: scale(0.625); top: 105%;} /* -- paylines -- */ .intro-portrait #layer_07 {transform: scale(0.7); bottom: -45%;} /* -- Bottom Holder -- */ .intro-portrait #intro-bottom-holder{margin-top: 1070px; height:168px;} /* -- Play Button -- */ .intro-portrait #btn-play{transform:scale(1.5);} /* -- Invisible Press -- */ .intro-portrait .collider{width: 342px; height: 118px; bottom: -465px; left: 470px;} /* -- Skip message -- */ .intro-portrait #intro-skip{font-size: 34px;} /* -- Check Box -- */ .intro-portrait .intro-check {width: 28px;height: 28px;} /* ######################################################################################################### */ /* PRELOADER */ /* ######################################################################################################### */ /* -- Preloader Back -- */ .intro-portrait .preloader-back{left: calc(640px - 250px); top: 1104px;} /* -- Preloader Bar -- */ .intro-portrait .preloader-bar{left: calc(640px - 197px); top: 1096px;} /* -------------------------------------------------------------------------------------------------------- */ /* */ /* _____ ____ __ _ ____ _ */ /* |____| |____| | \ | |___ | */ /* | | | | \_| |____ |____ */ /* */ /* */ /* -------------------------------------------------------------------------------------------------------- */ /* ######################################################################################################### */ /* 2. GAME LOGO */ /* ######################################################################################################### */ /* -- Game Logo --*/ .gameLogo{margin-top: -20px; transform: scale(0.32);} /* -------------------------------------------------------------------------------------------------------- */ /* */ /* _ __ _ _____ ____ _____ ____ ____ ____ ____ */ /* | | \ | |___ | | |____| |____| | __ |___ |___ */ /* | | \_| | |____| | | | |____| |____ ____| */ /* */ /* */ /* -------------------------------------------------------------------------------------------------------- */ /* ######################################################################################################### */ /* MAIN HOLDER */ /* ######################################################################################################### */ /* --Info Content -- */ .site-content-portrait .info-holder{/*background:#ff007b;*/ width:calc(100% - 20px);} /* ######################################################################################################### */ /* PAGES TITLE */ /* ######################################################################################################### */ /* -- Page Title -- */ .info-parts-portrait .info-title{margin-top: 10px;} /* -- Page Title Holder -- */ .info-parts-portrait .title-holder{width: 100%; height: 40px; -ms-transform: scale(0.6); /* IE 9 */ -webkit-transform: scale(0.6); /* Safari */ transform: scale(0.6);} /* ######################################################################################################### */ /* NAVIGATION BUTTONS */ /* ######################################################################################################### */ /* -- Next Button -- */ .info-parts-portrait .info-btn-next {bottom: -34px; right: 0px; -ms-transform: scale(0.28); /* IE 9 */ -webkit-transform: scale(0.28); /* Safari */ transform: scale(0.28);} /* -- Previous Button -- */ .info-parts-portrait .info-btn-prev {bottom: -34px; left: 0px; -ms-transform: scale(0.28); /* IE 9 */ -webkit-transform: scale(0.28); /* Safari */ transform: scale(0.28);} /* ######################################################################################################### */ /* PAGE SLIDER */ /* ######################################################################################################### */ /* -- Slider Container -- */ .info-parts-portrait .info-page-footer {bottom: 7px;} /* -- Dot -- */ .dot{width:8px; height:8px; margin-left:5px; margin-right:5px;} /* -- Selected Dot -- */ .dot-selected{width:8px; height:8px; margin-left:5px; margin-right:5px;} /* ######################################################################################################### */ /* CLOSE BUTTON */ /* ######################################################################################################### */ /* -- Close Info Button -- */ .info-parts-portrait .btn-close {bottom: 10px; transform: scale(0.38); transform-origin: 56px 99px;} /* ######################################################################################################### */ /* INFO PAGES */ /* ######################################################################################################### */ /* -------------------- */ /* #### INFO FONTS #### */ /* -------------------- */ /* -- Info Font 1 -- */ /*fd*/ .site-content-portrait .info-font-1{font-size: 10px; line-height: 11px; margin-bottom: 5px; margin-top:5px;} /* -- Info Font 2 -- */ .site-content-portrait .info-font-2{font-size: 9px; line-height: 10px; margin-bottom: 4px; margin-top: 0px;} /* -- Info Font 3 -- */ /*DL*/ .site-content-portrait .info-font-3{font-size: 9px; line-height: 11px; margin-bottom: 6px; margin-top:0px;} /* -- Info Font 4 -- */ /*fd*/ .site-content-portrait .info-font-4{font-size: 10px; line-height: 11px; margin-bottom: 6px; margin-top: -10px;} /* -- Info Font 5 -- */ .site-content-portrait .info-font-5{font-size: 9px; line-height: 9px; margin-bottom: 6px; margin-top: -22px;} /* --------------------------- */ /* #### INFO MARKED FONTS #### */ /* --------------------------- */ /* -- Info Font 1 Marked -- */ .site-content-portrait .info-font-1 .marked{font-size: 13px;} /* -- Info Font 2 Marked -- */ .site-content-portrait .info-font-2 .marked{font-size: 11px;} /* -- Info Font 3 Marked -- */ .site-content-portrait .info-font-3 .marked{font-size: 13px;} /* -- Info Font 4 Marked -- */ /*fd*/ .site-content-portrait .info-font-4 .marked{font-size: 13px;} /* -- Info Font 5 Marked -- */ .site-content-portrait .info-font-5 .marked{font-size: 14px;} /* --------------------- */ /* #### INFO TITLES #### */ /* --------------------- */ /* -- Info Title 1 -- */ .site-content-portrait .info-title-1{transform: scale(0.4); transform-origin: top left;} /* -- Info Title 1 Holder -- */ .site-content-portrait .info-title-1-holder{margin: auto; width: 81px; height: 22px;} /* -- Info Title 2 -- */ .site-content-portrait .info-title-2{transform: scale(0.4); transform-origin: top left;} /* -- Info Title 2 Holder -- */ .site-content-portrait .info-title-2-holder{margin: auto; width: 152px; height: 20px;} /* ------------------- */ /* #### INFO PICS #### */ /* ------------------- */ /* -- Info Image 1 (Features 01) -- */ .site-content-portrait .info-pic-1{transform: scale(0.34); transform-origin: top left; margin:auto; margin-bottom:20px;} /* -- Info Image 1 Holder (Features 01) -- */ .site-content-portrait .info-pic-1-holder{width:120px; height:75px; margin:auto; /*margin-top:-10px;*/} /* -- Info Image 2 (Features 02)-- */ .site-content-portrait .info-pic-2{transform: scale(0.42); transform-origin: top left; margin:auto; margin-bottom:20px;} /* -- Info Image 2 Holder (Features 02) -- */ .site-content-portrait .info-pic-2-holder{width: 84px; height: 84px; margin: auto; /*margin-top: -20px;*/} /* -- Info Image 3 (Features 01)-- */ /*DL*/ .site-content-portrait .info-pic-3{transform:scale(0.36); transform-origin:top left; margin:auto; margin-bottom:20px;} /* -- Info Image 3 Holder (Features 01) -- */ /*DL*/ .site-content-portrait .info-pic-3-holder{/*background: red; */width:93px; height:43px; margin:auto; margin-top:-16px;} /* -- Info Image 4 (Features 01)-- */ .site-content-portrait .info-pic-4{transform: scale(0.44); transform-origin: 10px -30px; margin:auto; margin-bottom:20px;} /* -- Info Image 4 Holder (Features 01) -- */ .site-content-portrait .info-pic-4-holder{/* background: red; */ width:154px; height:70px; margin:auto;} /* -- Info Image 2 (Gamble) -- */ /*fd*/ .site-content-portrait .info-pic-gamble{transform: scale(0.46); transform-origin: top left;} /* -- Info Image 2 Holder (Gamble) --*/ /*fd*/ .site-content-portrait .info-pic-gamble-holder{margin:auto; width:249px; height:119px; margin-bottom:20px;} /* ------------------------- */ /* ### INFO BACK STYLES #### */ /* ------------------------- */ /* -- Info Back Style 0 -- */ .site-content-portrait .back-style-0{/*background: red;*/ width:224px; margin: auto; margin-top:-8px;} /* -- Info Back Style 1 (Feature 02) -- */ /*fd*/ .site-content-portrait .back-style-1{width: 204px; margin: auto; margin-top: 10px; margin-bottom:10px; padding: 0 10px 0 10px; border-top: 1px solid yellow; border-bottom: 1px solid yellow;} /* -- Info Back Style 2 -- */ /*DL*/ .site-content-portrait .back-style-2{width: 204px; /*height: 157px;*/ padding: 0 10px 0 10px; margin: auto; margin-bottom:15px; border-top: 1px solid yellow; border-bottom: 1px solid yellow;} /* -- Info Back Style 3 (Rules) -- */ /*fd*/ .site-content-portrait .back-style-3{width: 230px; margin: auto; /*height: 432px;*/ padding: 0 10px 0 10px; border-top: 1px solid yellow; border-bottom: 1px solid yellow;} /* -- Info Back Style 4 (Gamble) -- */ /*fd*/ .site-content-portrait .back-style-4{width: 230px; margin: auto; /*height: 186px;*/ padding: 0 10px 0 10px; border-top: 1px solid yellow; border-bottom: 1px solid yellow;} /* -- Info Back Style 5 (Feature 02) -- */ .site-content-portrait .back-style-5{width: 274px; margin: auto; margin-top:10px; margin-bottom:10px; /*height: 180px;*/ padding: 0 10px 0 10px; border-top: 1px solid yellow; border-bottom: 1px solid yellow;} /* -- Info Back Style 6 (Feature 02) -- */ .site-content-portrait .back-style-6{width: 204px; margin: auto; margin-top: 10px; /*height: 150px;*/ margin-bottom:6px; padding: 0 10px 0 10px; border-top: 1px solid yellow; border-bottom: 1px solid yellow;} /* #### PAYTABLE LABELS #### */ /* -- Scatter Label Holder -- */ .site-content-portrait .pay-scatter-holder{width: 50%; height: 9px; margin-top: -168px; margin-left: 50%;} /* -- Scatter Label -- */ .site-content-portrait .pay-scatter{transform: scale(0.18); transform-origin: 0px 0px;} /* -- Wild Label Holder -- */ .site-content-portrait .pay-wild-holder{width: 50%; height: 9px; margin-top: -168px; margin-left: 50%;} /* -- Wild Label -- */ .site-content-portrait .pay-wild{transform: scale(0.18); transform-origin: 0px 0px;} /* -- font colors -- */ .colorYellow{color:#fdcb32;} /* ######################################################################################################### */ /* PAGE PAYLINES */ /* ######################################################################################################### */ /* -- Paylines Pic Holder -- */ .site-content-portrait .paylines-holder {height:300px;} /* -- Paylines Pic -- */ .site-content-portrait .paylines-pic {transform: scale(0.43); transform-origin: -25px 0px;} /* ######################################################################################################### */ /* WIN WAYS */ /* ######################################################################################################### */ /* -- Way Box -- */ .site-content-portrait .way-box{width:50%; height:155px;} /* -- Ways Reels Holder -- */ .site-content-portrait .ways-reels-holder{/*background:#336699;*/ margin:auto; width:76px; /*height:70px;*/} /* -- Ways Grid Holder -- */ .site-content-portrait .grid-ways{padding-top:4px; padding-bottom:4px; width:100px; margin-top:10px;} /* -- Ways Info Text -- */ .site-content-portrait .ways-info{font-size:12px; line-height:12px; margin-top:13px;} /* ######################################################################################################### */ /* PAGE PAYOUTS */ /* ######################################################################################################### */ /* -- Image Scale -- */ .site-content-portrait .sym-img-scale{ transform: scale(0.37); margin-top: -92px; margin-left: -81px;} /* -- Each Pay -- */ .site-content-portrait .sym-pays{font-size: 9px; line-height: 9px;} /* -- Symbol Container -- */ .site-content-portrait .sym-holder{height: 48px; margin-top: 10px; margin-bottom: 10px;} /* -- Pay Holder -- */ .site-content-portrait .sym-pay-holder{width: 55%; top: -158px;} /* -- Paytable Container -- */ #paytable-list{height:97%;} /* -- Each Pay -- */ .site-content-portrait .sym-pays{font-size: 21px; line-height: 21px;} .site-content-portrait .mpp-label{float:left;width:10px;height:8px;padding:0px;} .site-content-portrait .mpp-value{float:left;width:50px;height:8px; margin-left:2px; padding:0px;} } /* ######################################################################################################### */ /* --------------------------------------------------------------------------------------------------------- */ /* */ /* Group B // Huawei T3 */ /* */ /* --------------------------------------------------------------------------------------------------------- */ /* ######################################################################################################### */ @media screen and (max-width: 800px) and (max-height: 1280px) and (-webkit-min-device-pixel-ratio: 1.33) and (-webkit-max-device-pixel-ratio: 1.34) and (orientation:portrait){ /*.site-content-portrait{background:red;}*/ /* -------------------------------------------------------------------------------------------------------- */ /* */ /* _ __ _ _____ _____ ____ */ /* | | \ | | |____| | | */ /* | | \_| | | \ |____| */ /* */ /* */ /* -------------------------------------------------------------------------------------------------------- */ /* -- logo -- */ .intro-portrait #layer_02 {transform: scale(0.78); top: -20%;} /* -- game -- */ .intro-portrait #layer_03 {transform: scale(0.9); top: 10%;} /* -- arrow --*/ .intro-portrait #layer_04 {transform: scale(0.6); top: 62%;} /* -- extra -- */ .intro-portrait #layer_05 {transform: scale(0.7); top: -28%; left:34%;} /* -- reels -- */ .intro-portrait #layer_06 {transform: scale(0.625); top: 82%;} /* -- paylines -- */ .intro-portrait #layer_07 {transform: scale(0.625); bottom: -21%;} /* -- Bottom Holder -- */ .intro-portrait #intro-bottom-holder{margin-top: 886px; height: 154px;} /* -- Play Button -- */ .intro-portrait #btn-play{transform:scale(1);} /* -- Invisible Press -- */ .intro-portrait .collider{width: 318px; height: 109px; bottom: -276px; left: 482px;} /* -- Skip message -- */ .intro-portrait #intro-skip{font-size: 26px;} /* -- Check Box -- */ .intro-portrait .intro-check {width: 24px;height: 24px;} /* ######################################################################################################### */ /* PRELOADER */ /* ######################################################################################################### */ /* -- Preloader Back -- */ .intro-portrait .preloader-back{left: calc(640px - 250px); top: 914px;} /* -- Preloader Bar -- */ .intro-portrait .preloader-bar{left: calc(640px - 197px); top: 906px;} /* -------------------------------------------------------------------------------------------------------- */ /* */ /* _____ ____ __ _ ____ _ */ /* |____| |____| | \ | |___ | */ /* | | | | \_| |____ |____ */ /* */ /* */ /* -------------------------------------------------------------------------------------------------------- */ /* ######################################################################################################### */ /* 2. GAME LOGO */ /* ######################################################################################################### */ /* -- Game Logo --*/ .gameLogo{margin-top: -50px; transform: scale(0.7);} /* -------------------------------------------------------------------------------------------------------- */ /* */ /* _ __ _ _____ ____ _____ ____ ____ ____ ____ */ /* | | \ | |___ | | |____| |____| | __ |___ |___ */ /* | | \_| | |____| | | | |____| |____ ____| */ /* */ /* */ /* -------------------------------------------------------------------------------------------------------- */ /* ######################################################################################################### */ /* MAIN HOLDER */ /* ######################################################################################################### */ /* -- Page Title -- */ .info-parts-portrait .info-title{margin-top: 20px;} /* --Info Content -- */ .site-content-portrait .info-holder{/*background:green;*/ width:calc(100% - 100px);} /* ######################################################################################################### */ /* PAGES TITLE */ /* ######################################################################################################### */ /* -- Page Title Holder -- */ .info-parts-portrait .title-holder{width: 100%; height: 40px; -ms-transform: scale(0.80); /* IE 9 */ -webkit-transform: scale(0.80); /* Safari */ transform: scale(0.80);} /* ######################################################################################################### */ /* NAVIGATION BUTTONS */ /* ######################################################################################################### */ /* -- Next Button -- */ .info-parts-portrait .info-btn-next {bottom: -20px; right: 20px; -ms-transform: scale(0.4); /* IE 9 */ -webkit-transform: scale(0.4); /* Safari */ transform: scale(0.4);} /* -- Previous Button -- */ .info-parts-portrait .info-btn-prev {bottom: -20px; left: 20px; -ms-transform: scale(0.4); /* IE 9 */ -webkit-transform: scale(0.4); /* Safari */ transform: scale(0.4);} /* ######################################################################################################### */ /* PAGE SLIDER */ /* ######################################################################################################### */ /* -- Slider Container -- */ .info-parts-portrait .info-page-footer {bottom: 10px;} /* -- Dot -- */ .dot{width:10px; height:10px; margin-right:6px; margin-left:6px;} /* -- Selected Dot -- */ .dot-selected{width:10px; height:10px; margin-right:6px; margin-left:6px;} /* ######################################################################################################### */ /* CLOSE BUTTON */ /* ######################################################################################################### */ /* -- Close Info Button -- */ .info-parts-portrait .btn-close {bottom: 24px; transform: scale(0.56); transform-origin: 12px 113px;} /* ######################################################################################################### */ /* INFO PAGES */ /* ######################################################################################################### */ /* -------------------- */ /* #### INFO FONTS #### */ /* -------------------- */ /* -- Info Font 1 -- */ /*fd*/ .site-content-portrait .info-font-1{font-size: 16px; line-height: 18px; margin-bottom: 10px; margin-top:10px;} /* -- Info Font 2 -- */ .site-content-portrait .info-font-2{font-size: 16px; line-height: 18px; margin-bottom: 10px; margin-top: 0px;} /* -- Info Font 3 -- */ /*DL*/ .site-content-portrait .info-font-3{font-size: 14px; line-height: 16px; margin-bottom: 10px; margin-top:0px;} /* -- Info Font 4 -- */ /*fd*/ .site-content-portrait .info-font-4{font-size: 16px; line-height: 18px; margin-bottom: 12px; margin-top: -10px;} /* -- Info Font 5 -- */ .site-content-portrait .info-font-5{font-size: 14px; line-height: 16px; margin-bottom: 10px; margin-top: -20px;} /* --------------------------- */ /* #### INFO MARKED FONTS #### */ /* --------------------------- */ /* -- Info Font 1 Marked -- */ .site-content-portrait .info-font-1 .marked{font-size: 21px;} /* -- Info Font 2 Marked -- */ .site-content-portrait .info-font-2 .marked{font-size: 19px;} /* -- Info Font 3 Marked -- */ .site-content-portrait .info-font-3 .marked{font-size: 18px;} /* -- Info Font 4 Marked -- */ /*fd*/ .site-content-portrait .info-font-4 .marked{font-size: 21px;} /* -- Info Font 5 Marked -- */ .site-content-portrait .info-font-5 .marked{font-size: 21px;} /* --------------------- */ /* #### INFO TITLES #### */ /* --------------------- */ /* -- Info Title 1 -- */ .site-content-portrait .info-title-1{transform: scale(0.8); transform-origin: top left;} /* -- Info Title 1 Holder -- */ .site-content-portrait .info-title-1-holder{margin: auto; width: 163px; height: 44px;} /* -- Info Title 2 -- */ .site-content-portrait .info-title-2{transform: scale(0.8); transform-origin: top left;} /* -- Info Title 2 Holder -- */ .site-content-portrait .info-title-2-holder{margin: auto; width: 307px; height: 40px;} /* ------------------- */ /* #### INFO PICS #### */ /* ------------------- */ /* -- Info Image 1 (Features 01) -- */ .site-content-portrait .info-pic-1{transform: scale(0.9); transform-origin: top left; margin:auto; margin-bottom:20px;} /* -- Info Image 1 Holder (Features 01) -- */ .site-content-portrait .info-pic-1-holder{width:316px; height:198px; margin:auto; /*margin-top:-25px;*/} /* -- Info Image 2 (Features 02)-- */ .site-content-portrait .info-pic-2{transform: scale(1.13); transform-origin: top 10px; margin:auto; margin-bottom:20px;} /* -- Info Image 2 Holder (Features 02) -- */ .site-content-portrait .info-pic-2-holder{width: 224px; height: 212px; margin: auto; /*margin-top: -20px;*/} /* -- Info Image 3 Holder (Features 01) -- */ /*DL*/ .site-content-portrait .info-pic-3-holder{/*background: red; */width:232px; height:110px; margin:auto; margin-top:-17px;} /* -- Info Image 4 (Features 01)-- */ .site-content-portrait .info-pic-4{transform: scale(0.9); transform-origin: 10px -30px; margin:auto; margin-bottom:20px;} /* -- Info Image 4 Holder (Features 01) -- */ .site-content-portrait .info-pic-4-holder{/* background: red; */ width:289px; height:173px; margin:auto;} /* -- Info Image 2 (Gamble) -- */ /*fd*/ .site-content-portrait .info-pic-gamble{transform: scale(0.82); transform-origin: top left;} /* -- Info Image 2 Holder (Gamble) --*/ /*fd*/ .site-content-portrait .info-pic-gamble-holder{margin:auto; width:442px; height:213px; margin-bottom:20px;} /* ------------------------- */ /* ### INFO BACK STYLES #### */ /* ------------------------- */ /* -- Info Back Style 0 -- */ .site-content-portrait .back-style-0{/*background: red;*/ width:404px; margin: auto;} /* -- Info Back Style 1 (Feature 02) -- */ /*fd*/ .site-content-portrait .back-style-1{width: 384px; margin: auto; margin-top: 15px; /*height: 140px;*/ margin-bottom:20px; padding: 0 10px 0 10px; border-top: 1px solid yellow; border-bottom: 1px solid yellow;} /* -- Info Back Style 2 -- */ /*DL*/ .site-content-portrait .back-style-2{width: 328px; /*height: 157px;*/ padding: 0 10px 0 10px; margin: auto; margin-bottom:20px; border-top: 1px solid yellow; border-bottom: 1px solid yellow;} /* -- Info Back Style 3 (Rules) -- */ /*fd*/ .site-content-portrait .back-style-3{width: 424px; margin: auto; /*height: 432px;*/ padding: 0 10px 0 10px; border-top: 1px solid yellow; border-bottom: 1px solid yellow;} /* -- Info Back Style 4 (Gamble) -- */ /*fd*/ .site-content-portrait .back-style-4{width: 424px; margin: auto; /*height: 186px;*/ padding: 0 10px 0 10px; border-top: 1px solid yellow; border-bottom: 1px solid yellow;} /* -- Info Back Style 5 (Feature 02) -- */ .site-content-portrait .back-style-5{width: 384px; margin: auto; margin-top:10px; margin-bottom:20px; /*height: 180px;*/ padding: 0 10px 0 10px; border-top: 1px solid yellow; border-bottom: 1px solid yellow;} /* -- Info Back Style 6 (Feature 02) -- */ .site-content-portrait .back-style-6{width: 384px; margin: auto; margin-top: 10px; /*height: 150px;*/ margin-bottom:20px; padding: 0 10px 0 10px; border-top: 1px solid yellow; border-bottom: 1px solid yellow;} /* #### PAYTABLE LABELS #### */ /* -- Scatter Label Holder -- */ .site-content-portrait .pay-scatter-holder{margin-left: 50%; width: 50%; height: 22px; margin-top:-224px;} /* -- Scatter Label -- */ .site-content-portrait .pay-scatter{transform: scale(0.5); transform-origin: top left;} /* -- Wild Label Holder -- */ .site-content-portrait .pay-wild-holder{margin-left: 50%; width: 50%; height: 22px; margin-top:-224px;} /* -- Wild Label -- */ .site-content-portrait .pay-wild{transform: scale(0.5); transform-origin:top left;} /* -- font colors -- */ .colorYellow{color:#fdcb32;} /* ######################################################################################################### */ /* PAGE PAYLINES */ /* ######################################################################################################### */ /* -- Paylines Pic Holder -- */ .site-content-portrait .paylines-holder {height:510px;} /* -- Paylines Pic -- */ .site-content-portrait .paylines-pic {transform: scale(0.73); transform-origin: -26px 0px;} /* ######################################################################################################### */ /* WIN WAYS */ /* ######################################################################################################### */ /* -- Way Box -- */ .site-content-portrait .way-box{width:50%; height:139px;} /* -- Ways Reels Holder -- */ .site-content-portrait .ways-reels-holder{/*background:#336699;*/ margin:auto; width:76px;} /* -- Ways Grid Holder -- */ .site-content-portrait .grid-ways{padding-top:4px; padding-bottom:4px; width:100px; margin-top:10px;} /* -- Ways Info Text -- */ .site-content-portrait .ways-info{font-size:12px; line-height:12px; margin-top:13px;} /* ######################################################################################################### */ /* PAGE PAYOUTS */ /* ######################################################################################################### */ /* -- Image Scale -- */ .site-content-portrait .sym-img-scale{ transform: scale(0.66); margin-top: -50px; margin-left: -43px;} /* -- Each Pay -- */ .site-content-portrait .sym-pays{font-size: 20px; line-height: 20px;} /* -- Symbol Container -- */ .site-content-portrait .sym-holder{height: 109px; margin-top: 13px; margin-bottom: 13px;} /* -- Pay Holder -- */ .site-content-portrait .sym-pay-holder{width: 50%; top: -200px;} /* -- Paytable Container -- */ #paytable-list{height:100%;} /* -- Each Pay -- */ .site-content-portrait .sym-pays{font-size: 23px; line-height: 23px;} .site-content-portrait .mpp-label{float:left;width:18px;height:19px;padding:0px;} .site-content-portrait .mpp-value{float:left;width:85px;height:19px; margin-left:2px; padding:0px;} } /* ######################################################################################################### */ /* --------------------------------------------------------------------------------------------------------- */ /* */ /* Group A // iPad Pro / iPad Mini 2-4 */ /* */ /* --------------------------------------------------------------------------------------------------------- */ /* ######################################################################################################### */ /* Portrait */ @media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1.5) { /*.site-content-portrait{background:purple;}*/ /* -------------------------------------------------------------------------------------------------------- */ /* */ /* _ __ _ _____ _____ ____ */ /* | | \ | | |____| | | */ /* | | \_| | | \ |____| */ /* */ /* */ /* -------------------------------------------------------------------------------------------------------- */ /* -- logo -- */ .intro-portrait #layer_02 {transform: scale(0.78); top: -17%;} /* -- game -- */ .intro-portrait #layer_03 {transform: scale(0.9); top: 17%;} /* -- arrow --*/ .intro-portrait #layer_04 {transform: scale(0.6); top: 64%;} /* -- extra -- */ .intro-portrait #layer_05 {transform: scale(0.7); top: -19%; left: 34%;} /* -- reels -- */ .intro-portrait #layer_06 {transform: scale(0.625); top: 82%;} /* -- paylines -- */ .intro-portrait #layer_07 {transform: scale(0.625); bottom: -21%;} /* -- pink background -- */ .intro-portrait #layer_08 {transform: scale(1); bottom: -1%;} /* -- Bottom Holder -- */ .intro-portrait #intro-bottom-holder{margin-top: 886px; height: 154px;} /* -- Play Button -- */ .intro-portrait #btn-play{transform:scale(1);} /* -- Invisible Press -- */ .intro-portrait .collider{width: 318px; height: 109px; bottom: -276px; left: 482px;} /* -- Skip message -- */ .intro-portrait #intro-skip{font-size: 26px;} /* -- Check Box -- */ .intro-portrait .intro-check {width: 24px;height: 24px;} /* ######################################################################################################### */ /* PRELOADER */ /* ######################################################################################################### */ /* -- Preloader Back -- */ .intro-portrait .preloader-back{left: calc(640px - 250px); top: 914px;} /* -- Preloader Bar -- */ .intro-portrait .preloader-bar{left: calc(640px - 197px); top: 906px;} /* -------------------------------------------------------------------------------------------------------- */ /* */ /* _____ ____ __ _ ____ _ */ /* |____| |____| | \ | |___ | */ /* | | | | \_| |____ |____ */ /* */ /* */ /* -------------------------------------------------------------------------------------------------------- */ /* ######################################################################################################### */ /* 2. GAME LOGO */ /* ######################################################################################################### */ /* -- Game Logo --*/ .gameLogo{margin-top: -50px; transform: scale(1.1);} /* -------------------------------------------------------------------------------------------------------- */ /* */ /* _ __ _ _____ ____ _____ ____ ____ ____ ____ */ /* | | \ | |___ | | |____| |____| | __ |___ |___ */ /* | | \_| | |____| | | | |____| |____ ____| */ /* */ /* */ /* -------------------------------------------------------------------------------------------------------- */ /* ######################################################################################################### */ /* MAIN HOLDER */ /* ######################################################################################################### */ /* -- Page Title -- */ .info-parts-portrait .info-title{margin-top: 20px;} /* --Info Content -- */ .site-content-portrait .info-holder{/*background:green;*/ width:calc(100% - 100px);} /* ######################################################################################################### */ /* PAGES TITLE */ /* ######################################################################################################### */ /* -- Page Title Holder -- */ .info-parts-portrait .title-holder{width: 100%; height: 51px; -ms-transform: scale(1); /* IE 9 */ -webkit-transform: scale(1); /* Safari */ transform: scale(1);} /* ######################################################################################################### */ /* NAVIGATION BUTTONS */ /* ######################################################################################################### */ /* -- Next Button -- */ .info-parts-portrait .info-btn-next {bottom: -12px; right: 20px; -ms-transform: scale(0.7); /* IE 9 */ -webkit-transform: scale(0.7); /* Safari */ transform: scale(0.7);} /* -- Previous Button -- */ .info-parts-portrait .info-btn-prev {bottom: -12px; left: 20px; -ms-transform: scale(0.7); /* IE 9 */ -webkit-transform: scale(0.7); /* Safari */ transform: scale(0.7);} /* ######################################################################################################### */ /* PAGE PAYLINES */ /* ######################################################################################################### */ /* -- Paylines Pic Holder -- */ .site-content-portrait .paylines-holder {height:700px;} /* -- Paylines Pic -- */ .site-content-portrait .paylines-pic {transform: scale(1); transform-origin: -26px 0px;} /* ######################################################################################################### */ /* CLOSE BUTTON */ /* ######################################################################################################### */ /* -- Close Info Button -- */ .info-parts-portrait .btn-close {bottom: 24px; transform: scale(0.8); transform-origin: 11px 113px; left: calc(50% - 128px);} /* ######################################################################################################### */ /* INFO PAGES */ /* ######################################################################################################### */ /* -------------------- */ /* #### INFO FONTS #### */ /* -------------------- */ /* -- Info Font 1 -- */ /*fd*/ .site-content-portrait .info-font-1{font-size: 26px; line-height: 28px; margin-bottom: 10px; margin-top:10px;} /* -- Info Font 2 -- */ .site-content-portrait .info-font-2{font-size: 22px; line-height: 26px; margin-bottom: 10px; margin-top: 10px;} /* -- Info Font 3 -- */ /*DL*/ .site-content-portrait .info-font-3{font-size: 22px; line-height: 24px; margin-bottom: 10px; margin-top:0px;} /* -- Info Font 4 -- */ /*fd*/ .site-content-portrait .info-font-4{font-size: 26px; line-height: 28px; margin-bottom: 12px; margin-top: 0px;} /* -- Info Font 5 -- */ .site-content-portrait .info-font-5{font-size: 20px; line-height: 22px; margin-bottom: 10px; margin-top: -20px;} /* --------------------------- */ /* #### INFO MARKED FONTS #### */ /* --------------------------- */ /* -- Info Font 1 Marked -- */ .site-content-portrait .info-font-1 .marked{font-size: 31px;} /* -- Info Font 2 Marked -- */ .site-content-portrait .info-font-2 .marked{font-size: 28px;} /* -- Info Font 3 Marked -- */ .site-content-portrait .info-font-3 .marked{font-size: 28px;} /* -- Info Font 4 Marked -- */ .site-content-portrait .info-font-4 .marked{font-size: 31px;} /* -- Info Font 5 Marked -- */ .site-content-portrait .info-font-5 .marked{font-size: 31px;} /* --------------------- */ /* #### INFO TITLES #### */ /* --------------------- */ /* -- Info Title 1 -- */ .site-content-portrait .info-title-1{transform: scale(1); transform-origin: top left;} /* -- Info Title 1 Holder -- */ .site-content-portrait .info-title-1-holder{margin: auto; width: 202px; height: 49px;} /* -- Info Title 2 Holder -- */ .site-content-portrait .info-title-2-holder{margin:auto; width: 390px; height:54px;} /* -- Info Title 2 -- */ .site-content-portrait .info-title-2{transform: scale(1); transform-origin: top left;} /* ------------------- */ /* #### INFO PICS #### */ /* ------------------- */ /* -- Info Image 1 (Features 01) -- */ .site-content-portrait .info-pic-1{transform: scale(1); transform-origin: top left; margin:auto; margin-bottom:20px;} /* -- Info Image 1 Holder (Features 01) -- */ .site-content-portrait .info-pic-1-holder{width:352px; height:221px; margin:auto; /*margin-top:-25px;*/} /* -- Info Image 2 (Features 02)-- */ .site-content-portrait .info-pic-2{transform: scale(1.24); transform-origin: top 10px; margin:auto; margin-bottom:20px;} /* -- Info Image 2 Holder (Features 02) -- */ .site-content-portrait .info-pic-2-holder{width: 250px; height: 223px; margin: auto; /*margin-top: -20px;*/} /* -- Info Image 3 (Features 01)-- */ /*DL*/ .site-content-portrait .info-pic-3{transform:scale(1); transform-origin:top left; margin:auto; margin-bottom:20px;} /* -- Info Image 3 Holder (Features 01) -- */ /*DL*/ .site-content-portrait .info-pic-3-holder{/*background: red; */width:256px; height:120px; margin:auto; margin-top:-17px;} /* -- Info Image 4 (Features 01)-- */ .site-content-portrait .info-pic-4{transform: scale(1); transform-origin: 10px -30px; margin:auto; margin-bottom:20px;} /* -- Info Image 4 Holder (Features 01) -- */ .site-content-portrait .info-pic-4-holder{/* background: red; */ width:319px; height:200px; margin:auto;} /* -- Info Image 2 Holder (Gamble) --*/ /*fd*/ .site-content-portrait .info-pic-gamble-holder{margin:auto; width:539px; height:255px; margin-bottom:20px;} /* -- Info Image 2 (Gamble) -- */ /*fd*/ .site-content-portrait .info-pic-gamble{transform: scale(1); transform-origin: top left;} /* ------------------------- */ /* ### INFO BACK STYLES #### */ /* ------------------------- */ /* -- Info Back Style 0 -- */ .site-content-portrait .back-style-0{/*background: red;*/ width:604px; margin: auto;} /* -- Info Back Style 1 (Feature 02) -- */ /*fd*/ .site-content-portrait .back-style-1{width: 604px; margin: auto; margin-top: 15px; /*height: 140px;*/ margin-bottom:20px; padding: 0 10px 0 10px; border-top: 1px solid yellow; border-bottom: 1px solid yellow;} /* -- Info Back Style 2 -- */ /*DL*/ .site-content-portrait .back-style-2{width: 604px; /*height: 157px;*/ padding: 0 10px 0 10px; margin: auto; margin-bottom:20px; border-top: 1px solid yellow; border-bottom: 1px solid yellow;} /* -- Info Back Style 3 (Rules) -- */ /*fd*/ .site-content-portrait .back-style-3{width: 604px; margin: auto; /*height: 432px;*/ padding: 0 10px 0 10px; border-top: 1px solid yellow; border-bottom: 1px solid yellow;} /* -- Info Back Style 4 (Gamble) -- */ /*fd*/ .site-content-portrait .back-style-4{width: 604px; margin: auto; /*height: 186px;*/ padding: 0 10px 0 10px; border-top: 1px solid yellow; border-bottom: 1px solid yellow;} /* -- Info Back Style 5 (Feature 02) -- */ .site-content-portrait .back-style-5{width: 604px; margin: auto; margin-top:10px; margin-bottom:20px; /*height: 180px;*/ padding: 0 10px 0 10px; border-top: 1px solid yellow; border-bottom: 1px solid yellow;} /* -- Info Back Style 6 (Feature 02) -- */ .site-content-portrait .back-style-6{width: 604px; margin: auto; margin-top: 10px; /*height: 150px;*/ margin-bottom:20px; padding: 0 10px 0 10px; border-top: 1px solid yellow; border-bottom: 1px solid yellow;} /* ------------------------- */ /* #### PAYTABLE LABELS #### */ /* ------------------------- */ /* -- Scatter Label Holder -- */ .site-content-portrait .pay-scatter-holder{margin-left: 51%; width: 49%; height: 23px; margin-top:-242px;} /* -- Scatter Label -- */ .site-content-portrait .pay-scatter{transform: scale(0.52); transform-origin: top left;} /* -- Wild Label Holder -- */ .site-content-portrait .pay-wild-holder{margin-left: 51%; width: 49%; height: 23px; margin-top:-242px;} /* -- Wild Label -- */ .site-content-portrait .pay-wild{transform: scale(0.52); transform-origin:top left;} /* -- font colors -- */ .colorYellow{color:#fdcb32;} /* ######################################################################################################### */ /* PAGE PAYLINES */ /* ######################################################################################################### */ /* -- Paylines Pic Holder -- */ .site-content-portrait .paylines-holder {height:700px;} /* -- Paylines Pic -- */ .site-content-portrait .paylines-pic {transform: scale(1); transform-origin: -26px 0px;} /* ######################################################################################################### */ /* WIN WAYS */ /* ######################################################################################################### */ /* -- Way Box -- */ .site-content-portrait .way-box{width:50%; height:240px;} /* -- Ways Reels Holder -- */ .site-content-portrait .ways-reels-holder{/*background:#336699;*/ margin:auto; width:110px;} /* -- Ways Title -- */ .site-content-portrait .ways-title {/*background: green;*/ font-size: 30px;} /* -- Ways Grid Holder -- */ .site-content-portrait .grid-ways{padding-top:4px; padding-bottom:4px; width:240px; margin-top:10px;} /* -- Ways Grid Cell -- */ .site-content-portrait .grid-ways-cell{float: left; width: 18px; height: 18px; border: 1px solid #ffcc00; margin: 1px;} /* -- Ways Info Text -- */ .site-content-portrait .ways-info{font-size:26px; line-height:28px; margin-top:20px;} /* -- Ways Reels Numbers Holder -- */ .site-content-portrait .ways-reels{/*background:orange;*/font-size:21px; line-height:21px;} /* -- Ways Reel Number -- */ .site-content-portrait .ways-reel{float:left; width:22px;} /* -- Ways Positions Holder -- */ .site-content-portrait .ways-positions{/*background:black;*/font-size:21px;} /* -- Ways Position -- */ .site-content-portrait .ways-pos{/*background:blue;*/ float:left; width:22px; text-align:left;} /* -- Ways Total -- */ .site-content-portrait .ways-total{/*background:black;*/ font-size:30px; width:100%; text-align:center; margin-top:6px; } /* ######################################################################################################### */ /* PAGE PAYOUTS */ /* ######################################################################################################### */ /* -- Image Scale -- */ .site-content-portrait .sym-img-scale{ transform: scale(1); margin-top: -33px; margin-left: 0px;} /* -- Each Pay -- */ .site-content-portrait .sym-pays{font-size: 26px; line-height: 26px;} /* -- Symbol Container -- */ .site-content-portrait .sym-holder{height: 139px; margin-top: 30px; margin-bottom: 30px; margin-left:10px; margin-right:10px; width:440px;} /* -- Pay Holder -- */ .site-content-portrait .sym-pay-holder{width: 50%; top: -216px;} /* -- Paytable Container -- */ #paytable-list{height:100%;} /* -- Each Pay -- */ .site-content-portrait .sym-pays{font-size: 21px; line-height: 21px;} .site-content-portrait .mpp-label{float:left;width:24px;height:22px;padding:0px;} .site-content-portrait .mpp-value{float:left;width:176px;height:22px; margin-left:2px; padding:0px;} }