@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700&display=swap'); @import url('https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700&display=swap'); .animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both;}.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;}.animated.hinge{-webkit-animation-duration:2s;animation-duration:2s;}.animated.flipOutX,.animated.flipOutY,.animated.bounceIn,.animated.bounceOut{-webkit-animation-duration:.75s;animation-duration:.75s;}@-webkit-keyframes bounce{from,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0);}70%{-webkit-animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0);}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0);}}@keyframes bounce{from,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0);}70%{-webkit-animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0);}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0);}}.bounce{-webkit-animation-name:bounce;animation-name:bounce;-webkit-transform-origin:center bottom;transform-origin:center bottom;}@-webkit-keyframes flash{from,50%,to{opacity:1;}25%,75%{opacity:0;}}@keyframes flash{from,50%,to{opacity:1;}25%,75%{opacity:0;}}.flash{-webkit-animation-name:flash;animation-name:flash;}@-webkit-keyframes pulse{from{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1);}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05);}to{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1);}}@keyframes pulse{from{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1);}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05);}to{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1);}}.pulse{-webkit-animation-name:pulse;animation-name:pulse;}@-webkit-keyframes rubberBand{from{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1);}30%{-webkit-transform:scale3d(1.25,0.75,1);transform:scale3d(1.25,0.75,1);}40%{-webkit-transform:scale3d(0.75,1.25,1);transform:scale3d(0.75,1.25,1);}50%{-webkit-transform:scale3d(1.15,0.85,1);transform:scale3d(1.15,0.85,1);}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1);}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1);}to{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1);}}@keyframes rubberBand{from{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1);}30%{-webkit-transform:scale3d(1.25,0.75,1);transform:scale3d(1.25,0.75,1);}40%{-webkit-transform:scale3d(0.75,1.25,1);transform:scale3d(0.75,1.25,1);}50%{-webkit-transform:scale3d(1.15,0.85,1);transform:scale3d(1.15,0.85,1);}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1);}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1);}to{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1);}}.rubberBand{-webkit-animation-name:rubberBand;animation-name:rubberBand;}@-webkit-keyframes shake{from,to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0);}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0);}}@keyframes shake{from,to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0);}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0);}}.shake{-webkit-animation-name:shake;animation-name:shake;}@-webkit-keyframes headShake{0%{-webkit-transform:translateX(0);transform:translateX(0);}6.5% { -webkit-transform: translateX(-6px) rotateY(-9deg); transform: translateX(-6px) rotateY(-9deg); } 18.5% { -webkit-transform: translateX(5px) rotateY(7deg); transform: translateX(5px) rotateY(7deg); } 31.5% { -webkit-transform: translateX(-3px) rotateY(-5deg); transform: translateX(-3px) rotateY(-5deg); } 43.5% { -webkit-transform: translateX(2px) rotateY(3deg); transform: translateX(2px) rotateY(3deg); } 50% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes headShake { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 6.5% { -webkit-transform: translateX(-6px) rotateY(-9deg); transform: translateX(-6px) rotateY(-9deg); } 18.5% { -webkit-transform: translateX(5px) rotateY(7deg); transform: translateX(5px) rotateY(7deg); } 31.5% { -webkit-transform: translateX(-3px) rotateY(-5deg); transform: translateX(-3px) rotateY(-5deg); } 43.5% { -webkit-transform: translateX(2px) rotateY(3deg); transform: translateX(2px) rotateY(3deg); } 50% { -webkit-transform: translateX(0); transform: translateX(0); } } .headShake { -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-name: headShake; animation-name: headShake; } @-webkit-keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); } 40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); } 60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); } to { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } } @keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); } 40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); } 60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); } to { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } } .swing { -webkit-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing; } @-webkit-keyframes tada { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 10%, 20% { -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes tada { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 10%, 20% { -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .tada { -webkit-animation-name: tada; animation-name: tada; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes wobble { from { -webkit-transform: none; transform: none; } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } to { -webkit-transform: none; transform: none; } } @keyframes wobble { from { -webkit-transform: none; transform: none; } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } to { -webkit-transform: none; transform: none; } } .wobble { -webkit-animation-name: wobble; animation-name: wobble; } @-webkit-keyframes jello { from, 11.1%, to { -webkit-transform: none; transform: none; } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); transform: skewX(0.390625deg) skewY(0.390625deg); } 88.8% { -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); transform: skewX(-0.1953125deg) skewY(-0.1953125deg); } } @keyframes jello { from, 11.1%, to { -webkit-transform: none; transform: none; } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); transform: skewX(0.390625deg) skewY(0.390625deg); } 88.8% { -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); transform: skewX(-0.1953125deg) skewY(-0.1953125deg); } } .jello { -webkit-animation-name: jello; animation-name: jello; -webkit-transform-origin: center; transform-origin: center; } @-webkit-keyframes bounceIn { from, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(.97, .97, .97); transform: scale3d(.97, .97, .97); } to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes bounceIn { from, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(.97, .97, .97); transform: scale3d(.97, .97, .97); } to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .bounceIn { -webkit-animation-name: bounceIn; animation-name: bounceIn; } @-webkit-keyframes bounceInDown { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } to { -webkit-transform: none; transform: none; } } @keyframes bounceInDown { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } to { -webkit-transform: none; transform: none; } } .bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; } @-webkit-keyframes bounceInLeft { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0); } 75% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 90% { -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0); } to { -webkit-transform: none; transform: none; } } @keyframes bounceInLeft { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0); } 75% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 90% { -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0); } to { -webkit-transform: none; transform: none; } } .bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft; } @-webkit-keyframes bounceInRight { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } from { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0); } 75% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } 90% { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0); } to { -webkit-transform: none; transform: none; } } @keyframes bounceInRight { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } from { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0); } 75% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } 90% { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0); } to { -webkit-transform: none; transform: none; } } .bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; } @-webkit-keyframes bounceInUp { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } from { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 75% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 90% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes bounceInUp { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } from { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 75% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 90% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp; } @-webkit-keyframes bounceOut { 20% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } to { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } } @keyframes bounceOut { 20% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } to { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } } .bounceOut { -webkit-animation-name: bounceOut; animation-name: bounceOut; } @-webkit-keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } .bounceOutDown { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown; } @-webkit-keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } @keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } .bounceOutLeft { -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft; } @-webkit-keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } @keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } .bounceOutRight { -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight; } @-webkit-keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } .bounceOutUp { -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp; } @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeInDownBig { from { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInDownBig { from { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig; } @-webkit-keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes fadeInLeftBig { from { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInLeftBig { from { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } @-webkit-keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } @-webkit-keyframes fadeInRightBig { from { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInRightBig { from { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } @-webkit-keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInUpBig { from { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUpBig { from { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } @-webkit-keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeOutDown { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes fadeOutDown { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } .fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown; } @-webkit-keyframes fadeOutDownBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @keyframes fadeOutDownBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } .fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig; } @-webkit-keyframes fadeOutLeft { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes fadeOutLeft { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } @-webkit-keyframes fadeOutLeftBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } @keyframes fadeOutLeftBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } .fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig; } @-webkit-keyframes fadeOutRight { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes fadeOutRight { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight; } @-webkit-keyframes fadeOutRightBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } @keyframes fadeOutRightBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } .fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig; } @-webkit-keyframes fadeOutUp { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes fadeOutUp { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp; } @-webkit-keyframes fadeOutUpBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @keyframes fadeOutUpBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } .fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig; } @-webkit-keyframes flip { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) scale3d(.95, .95, .95); transform: perspective(400px) scale3d(.95, .95, .95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } to { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @keyframes flip { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) scale3d(.95, .95, .95); transform: perspective(400px) scale3d(.95, .95, .95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } to { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } .animated.flip { -webkit-backface-visibility: visible; backface-visibility: visible; -webkit-animation-name: flip; animation-name: flip; } @-webkit-keyframes flipInX { from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInX { from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } .flipInX { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; animation-name: flipInX; } @-webkit-keyframes flipInY { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInY { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } .flipInY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInY; animation-name: flipInY; } @-webkit-keyframes flipOutX { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } @keyframes flipOutX { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } .flipOutX { -webkit-animation-name: flipOutX; animation-name: flipOutX; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; } @-webkit-keyframes flipOutY { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } @keyframes flipOutY { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } .flipOutY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipOutY; animation-name: flipOutY; } @-webkit-keyframes lightSpeedIn { from { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); opacity: 1; } to { -webkit-transform: none; transform: none; opacity: 1; } } @keyframes lightSpeedIn { from { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); opacity: 1; } to { -webkit-transform: none; transform: none; opacity: 1; } } .lightSpeedIn { -webkit-animation-name: lightSpeedIn; animation-name: lightSpeedIn; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } @-webkit-keyframes lightSpeedOut { from { opacity: 1; } to { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } @keyframes lightSpeedOut { from { opacity: 1; } to { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } .lightSpeedOut { -webkit-animation-name: lightSpeedOut; animation-name: lightSpeedOut; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } @-webkit-keyframes rotateIn { from { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateIn { from { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: none; transform: none; opacity: 1; } } .rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn; } @-webkit-keyframes rotateInDownLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInDownLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; } @-webkit-keyframes rotateInDownRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInDownRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInDownRight { -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight; } @-webkit-keyframes rotateInUpLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInUpLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; } @-webkit-keyframes rotateInUpRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInUpRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInUpRight { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight; } @-webkit-keyframes rotateOut { from { -webkit-transform-origin: center; transform-origin: center; opacity: 1; } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } @keyframes rotateOut { from { -webkit-transform-origin: center; transform-origin: center; opacity: 1; } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } .rotateOut { -webkit-animation-name: rotateOut; animation-name: rotateOut; } @-webkit-keyframes rotateOutDownLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } } @keyframes rotateOutDownLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } } .rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft; } @-webkit-keyframes rotateOutDownRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } @keyframes rotateOutDownRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } .rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight; } @-webkit-keyframes rotateOutUpLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } @keyframes rotateOutUpLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } .rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft; } @-webkit-keyframes rotateOutUpRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); opacity: 0; } } @keyframes rotateOutUpRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); opacity: 0; } } .rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight; } @-webkit-keyframes hinge { 0% { -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate3d(0, 0, 1, 80deg); transform: rotate3d(0, 0, 1, 80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40%, 80% { -webkit-transform: rotate3d(0, 0, 1, 60deg); transform: rotate3d(0, 0, 1, 60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } to { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0; } } @keyframes hinge { 0% { -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate3d(0, 0, 1, 80deg); transform: rotate3d(0, 0, 1, 80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40%, 80% { -webkit-transform: rotate3d(0, 0, 1, 60deg); transform: rotate3d(0, 0, 1, 60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } to { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0; } } .hinge { -webkit-animation-name: hinge; animation-name: hinge; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollIn { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes rollIn { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } to { opacity: 1; -webkit-transform: none; transform: none; } } .rollIn { -webkit-animation-name: rollIn; animation-name: rollIn; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollOut { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } @keyframes rollOut { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } .rollOut { -webkit-animation-name: rollOut; animation-name: rollOut; } @-webkit-keyframes zoomIn { from { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } } @keyframes zoomIn { from { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } } .zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn; } @-webkit-keyframes zoomInDown { from { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomInDown { from { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomInDown { -webkit-animation-name: zoomInDown; animation-name: zoomInDown; } @-webkit-keyframes zoomInLeft { from { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomInLeft { from { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomInLeft { -webkit-animation-name: zoomInLeft; animation-name: zoomInLeft; } @-webkit-keyframes zoomInRight { from { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomInRight { from { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomInRight { -webkit-animation-name: zoomInRight; animation-name: zoomInRight; } @-webkit-keyframes zoomInUp { from { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomInUp { from { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomInUp { -webkit-animation-name: zoomInUp; animation-name: zoomInUp; } @-webkit-keyframes zoomOut { from { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } to { opacity: 0; } } @keyframes zoomOut { from { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } to { opacity: 0; } } .zoomOut { -webkit-animation-name: zoomOut; animation-name: zoomOut; } @-webkit-keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } to { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } to { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomOutDown { -webkit-animation-name: zoomOutDown; animation-name: zoomOutDown; } @-webkit-keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(.1) translate3d(-2000px, 0, 0); transform: scale(.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; transform-origin: left center; } } @keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(.1) translate3d(-2000px, 0, 0); transform: scale(.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; transform-origin: left center; } } .zoomOutLeft { -webkit-animation-name: zoomOutLeft; animation-name: zoomOutLeft; } @-webkit-keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(.1) translate3d(2000px, 0, 0); transform: scale(.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; transform-origin: right center; } } @keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(.1) translate3d(2000px, 0, 0); transform: scale(.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; transform-origin: right center; } } .zoomOutRight { -webkit-animation-name: zoomOutRight; animation-name: zoomOutRight; } @-webkit-keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } to { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } to { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomOutUp { -webkit-animation-name: zoomOutUp; animation-name: zoomOutUp; } @-webkit-keyframes slideInDown { from { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInDown { from { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown; } @-webkit-keyframes slideInLeft { from { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInLeft { from { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft; } @-webkit-keyframes slideInRight { from { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInRight { from { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight; } @-webkit-keyframes slideInUp { from { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInUp { from { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInUp { -webkit-animation-name: slideInUp; animation-name: slideInUp; } @-webkit-keyframes slideOutDown { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes slideOutDown { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } .slideOutDown { -webkit-animation-name: slideOutDown; animation-name: slideOutDown; } @-webkit-keyframes slideOutLeft { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes slideOutLeft { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .slideOutLeft { -webkit-animation-name: slideOutLeft; animation-name: slideOutLeft; } @-webkit-keyframes slideOutRight { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes slideOutRight { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .slideOutRight { -webkit-animation-name: slideOutRight; animation-name: slideOutRight; } @-webkit-keyframes slideOutUp { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes slideOutUp { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp; } a { color:#1AC8DB; } /* homemenu */ .homemenu #menubottom-fixed .item { width: 33.3333%; padding: 4px; border: none; } .homemenu #menubottom-fixed .item:hover { text-decoration: none; } .homemenu #menubottom-fixed .item > div { /* display: flex; */ /* justify-content: flex-start; */ /* align-items: center; */ /* background:#021b53; */ padding: 0 3px; text-align: center; } .homemenu #menubottom-fixed { background: url('/cms/mobile/images/Repeat-Grid.png') repeat; padding: 5px; } .homemenu #menubottom-fixed .item .logo-icon { display:inline-block; top:0; width: 35px; height: 35px; } .homemenu #menubottom-fixed .item .title { opacity: 1; /* margin-left: 10px; */ text-align: center; font-size: 12px; font-weight: bold; white-space: inherit; line-height: 19px; text-transform: uppercase; color: #fff; } .homemenu #menubottom-fixed .item .title span { display:inline-block; } #menubottom-fixed .item.logo-edisi,#menubottom-fixed .item.logo-promosi { display: none; } .homemenu #menubottom-fixed .item.logo-edisi, .homemenu #menubottom-fixed .item.logo-promosi{ display: block; } @media (max-width: 359px){ .homemenu #menubottom-fixed .item .title { font-size: 12px; } } @media (max-width: 600px){ .homemenu #menubottom-fixed .item .title span { display:block; } } .homemenu #menubottom-fixed.menu-icon-top .logo-bt > div { } .homemenu #menubottom-fixed.menu-icon-top .logo-slot > div { } .homemenu #menubottom-fixed.menu-icon-top .logo-casino > div { } .homemenu #menubottom-fixed.menu-icon-top .logo-vipcasino > div { } .homemenu #menubottom-fixed.menu-icon-top .logo-olahraga > div { } .homemenu #menubottom-fixed.menu-icon-top .logo-edisi > div, .homemenu #menubottom-fixed.menu-icon-top .logo-promosi > div{ } /* Start Custom */ body { font-family: 'Roboto', sans-serif; background:#041b3a; overflow-x: hidden; } .custom-page h1 { padding-bottom: 10px; border-bottom:1px solid #52c88d; color:#52c88d; font-size: 30px; font-weight: 300; } .logobnz { text-align:center; } .logobnz.beritanews { text-align:right; padding-right:8px; } .link-backto-bnz { float: left; margin-left: 10px; line-height: 16px; margin-top: 5px; position: relative; z-index:9999; color:#fee952; } .link-backto-bnz a { color:#fee952; } .link-backto-bnz i { color:#fee952; } #navbar-top .logobnz.beritanews #logo img { height: 30px; margin: 6px 0; top:0px; } .facebook { background:#3B5998; display: inline-block; margin-right: 10px; border-radius: 2px; text-align: center; color: #fff; padding: 3px 10px; width: 100px; font-weight: bold; text-transform: uppercase; } .fb-like { position: absolute !important; left: 140px; top: 10px; z-index: 1; } #wrapper { padding-bottom: 135px; } fieldset[disabled] .form-control { color:#ccc; } .custom-page a { color:#fff; } .custom-page a:hover { text-decoration: underline; } .download-button { text-align: center; } .download-button .dl-button { border-radius:4px; width: 200px; display:inline-block; padding:10px; background:#1ac8db; color:#09315c; font-weight: bold; font-size: 20px; text-transform: uppercase; } .download-item { display:inline-block; width:220px; margin-bottom:10px; margin-top:5px; } .android-download { background: #00C891 url(../images/android-download.png) no-repeat center center; background-size: contain; border:5px solid #00C891; } .bb-download { background: #00C891 url(../images/bb-download.png) no-repeat center center; background-size: contain; border:8px solid #00C891; } .custom-page a.howto-link { text-decoration:underline; color:#00C891; } /* login popup */ .loginpopupwindowclass .modal-dialog, .announcementpopupwindowclass .modal-dialog, .migrationpopupwindowclass .modal-dialog { margin: 0; height: 100vh; width: 100%; } .loginpopupwindowclass,.announcementpopupwindowclass, .migrationpopupwindowclass{ height: 100vh; background: #09315c; } .loginpopupwindowclass .botdetectimg img { height: 23px; } #field-captcha-model { border-top-right-radius: 0px; border-bottom-right-radius: 0px; } .loginpopupwindowclass .modal-body, .announcementpopupwindowclass .modal-body, .migrationpopupwindowclass .modal-body { padding: 15px 20px 25px; height: 100vh; padding-bottom: 60px; overflow-y: auto; } .loginpopupwindowclass .modal-body{ padding-bottom: 100px; } .loginpopupwindowclass .modal-top, .announcementpopupwindowclass .modal-top, .migrationpopupwindowclass .modal-top { text-align:center; } .bottom-popup-link {position: relative;bottom: 0;left: 0;right: 0;width: 100%;padding: 5px 0;/* background: #09315c; */} .bottom-popup-link a { color:#EED817; } .fa-eye { position: absolute; top: 8px; right: 49px; z-index: 15; cursor: pointer; opacity: 1; color: black; font-size: 26px; } .has-feedback.has-error .fa-eye, .has-feedback.has-success .fa-eye { right: 69px; } .p12 { font-size: 12px; } .fa-eye.show-pass { opacity: 0.5; color:#000; } .modal-top button { position: absolute; top: 21px; right: 15px; color:#1ac8db; opacity: 1; } .modal-top button i { color: #1ac8db; font-size: 24px; } .loginpopupwindowclass .loginpopuplogo, .announcementpopupwindowclass .loginpopuplogo, .migrationpopupwindowclass .loginpopuplogo { margin: 0 auto; display:inline-block; width:100px; margin-top:-60px; } .migrationpopupwindowclass .text-success { color:#0dff11; font-size: 18px; } .loginpopupwindowclass .buttons-area { border-top:0; text-align:center; margin-top: 30px; } .loginpopupwindowclass login-form .buttons-area { margin-top:0px; margin-bottom:0px; } .loginpopupwindowclass login-form .mandatory { display:none; } .loginpopupwindowclass .buttons-area button { width: 200px; } /* Input materialize */ .custom-materialize { position: relative; margin-bottom: 15px; margin-top: 25px; } .custom-materialize input { font-size:16px; padding: 10px 10px 10px 10px; display:block; width:100%; /* border:none; */ /* border-bottom: 0; */ height: auto; /* background:transparent; */ box-shadow: none; /* border-radius: 0; */ /* color:#fff; */ } #field-captcha .custom-materialize { margin-top: 10px; margin-bottom: 10px; } .loginpopupwindowclass .custom-materialize input { border-bottom:1px solid #1d3e5d; } /*.custom-materialize input[disabled] { background:transparent; color: transparent; }*/ .custom-materialize input[disabled] ~ label.control-label { color:#999; } /* .custom-materialize input:read-only { background: transparent; }*/ .custom-materialize input:focus { outline:none; box-shadow: none; } .custom-materialize label.control-label { color:#fff; font-size: 13px; font-weight: lighter; position:absolute; pointer-events:none; left:15px; top: -22px; transition:0.2s ease all; -moz-transition:0.2s ease all; -webkit-transition:0.2s ease all; } /*.custom-materialize input:focus ~ .control-label, .custom-materialize input:valid ~ .control-label, .custom-materialize input:valid ~ .control-label, .has-feedback.has-error .custom-materialize label { top:-10px; font-size:14px; color:#eee; }*/ /*.custom-materialize input:read-only ~ .control-label { top:-10px; font-size:14px; color:#eee; } .custom-materialize input:-moz-read-only ~ .control-label { top:-10px; font-size:14px; color:#eee; }*/ .custom-materialize .bar-custom { position:relative; display: none; width:100%; } .custom-materialize .bar-custom:before, .custom-materialize .bar-custom:after { content:''; height:2px; width:0; bottom:-1px; position:absolute; background:#fff; transition:0.2s ease all; -moz-transition:0.2s ease all; -webkit-transition:0.2s ease all; } .custom-materialize .bar-custom:before { left:50%; } .custom-materialize .bar-custom:after { right:50%; } .custom-materialize input:focus ~ .bar-custom:before, .custom-materialize input:focus ~ .bar-custom:after { width:50%; } .has-feedback .custom-materialize .form-control-feedback1.active .fa:before { content: "\f106"; } .has-feedback .custom-select .form-control-feedback1.active .fa:before { content: "\f106"; } .has-feedback.has-error .custom-materialize .form-control-feedback1 .fa:before { content: "\f05a"; } .has-feedback.has-error .custom-select .form-control-feedback1 .fa:before { content: "\f05a"; } .has-feedback.has-error.show-hint .custom-materialize .form-control-feedback1 .fa:before { content: "\f106"; } .has-feedback.has-error.show-hint .custom-select .form-control-feedback1 .fa:before { content: "\f106"; } .checkingdata-input { display: none; position: absolute; right: 45px; top: 7px; color: #000; font-size: 20px; } .has-loading .checkingdata-input { display: block; } .custom-materialize input::-webkit-input-placeholder { font-size: 14px; } .custom-materialize input::-moz-placeholder { font-size: 14px; } .custom-materialize input:-ms-input-placeholder { font-size: 14px; } .custom-materialize input:-moz-placeholder { font-size: 14px; } .custom-materialize input:focus::-webkit-input-placeholder, .has-feedback.has-error .custom-materialize input::-webkit-input-placeholder {color:#bbb;} .custom-materialize input:focus::-moz-placeholder, .has-feedback.has-error .custom-materialize input::-moz-placeholder {color:#bbb;} .custom-materialize input:focus:-ms-input-placeholder, .has-feedback.has-error .custom-materialize input:-ms-input-placeholder {color:#bbb;} .custom-materialize input:focus:-moz-placeholder, .has-feedback.has-error .custom-materialize input:-moz-placeholder {color:#bbb;} .custom-select-input input::-webkit-input-placeholder { color:#bbb; } .custom-select-input input::-moz-placeholder { color:#bbb; } .custom-select-input input:-ms-input-placeholder { color:#bbb; } .custom-select-input input:-moz-placeholder { color:#bbb; } .has-success .custom-materialize .form-control, .has-success .custom-materialize .form-control:focus, .has-error .custom-materialize .form-control:focus, .has-error .custom-materialize .form-control { box-shadow:none; } .has-feedback.has-error .custom-materialize label { color:#fff; } .custom-materialize .form-control-feedback i { font-size: 20px; position: relative; top: 6px; } .has-feedback.has-error .custom-materialize .help-block, .has-feedback.has-error .custom-select .help-block { margin-top:-3px; padding:10px; background: #f13856; color:#fff; text-align: center; margin-bottom: 0; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; border: 1px solid #f13856; border-top: 0px; } field .alert-info, field .has-feedback.has-error .alert-info, field .has-feedback.has-success .alert-info { margin-top:-3px; border-bottom-right-radius: 4px !important; border-bottom-left-radius: 4px !important; border: 1px solid #f13856; border-top: 0px; } #field-birth-date.has-feedback.has-error .custom-select .help-block, #field-birth-date.has-feedback.has-error .custom-select .alert-info { margin-top: 0px !important; } .has-feedback.has-error .custom-materialize .help-block p, .has-feedback.has-error .custom-select .help-block p { margin-bottom:0; font-size: 14px; } .form-group { margin-bottom:0; } .form-control-feedback1 { position: absolute; z-index: 2; display: block; text-align: center; pointer-events: none; width: 30px; height: 38px; line-height: 36px; top: 1px; right: 16px; pointer-events: auto; cursor: pointer; } .custom-select .form-control-feedback1 { right: 30px !important; top: 4px; } .custom-materialize .form-control-feedback1 { right: 16px; } .custom-select .form-control-feedback1 .fa { font-size: 20px; color: #000; } .custom-materialize .form-control-feedback1 i { font-size: 20px; position: relative; top: 6px; color: #000; } .has-feedback.has-error .custom-materialize .form-control-feedback1, .has-feedback.has-success .custom-materialize .form-control-feedback1, .has-feedback.has-error .custom-select .form-control-feedback1, .has-feedback.has-success .custom-select .form-control-feedback1{ right: 41px !important; } #field-registration-campaigns.has-feedback.has-error .form-control-feedback1, #field-registration-campaigns.has-feedback.has-success .form-control-feedback1 { right: 57px; } #field-registration-campaigns.has-feedback.has-error .form-control-feedback, #field-registration-campaigns.has-feedback.has-success .form-control-feedback { top:0px; } #field-registration-campaigns.has-feedback.has-error .form-control-feedback .fa, #field-registration-campaigns.has-feedback.has-success .form-control-feedback .fa { font-size: 20px; } #field-registration-campaigns.has-feedback .custom-select-input { margin-top:0px; margin-bottom:0px; } .has-feedback .form-control-feedback1 .fa:before { content: "\f05a"; } .form-control-feedback { } /* Custom select */ .custom-select { margin-bottom:15px; } .custom-select-label { font-size: 13px; font-weight: 300; padding-left: 15px; margin-bottom: 3px; } .custom-select select { font-size: 15px; /* background: transparent; */ border:0; /* color:#fff; */ /* border-radius: 0; */ /* border-bottom: 1px solid #33729b; */ box-shadow: none; /* padding-left: 1px; */ padding: 10px 10px 10px 7px; height: auto; } .custom-select select option { color:#000; } .has-success .custom-select .form-control { box-shadow: none; } .custom-select select:focus, .custom-select select:hover { box-shadow:none; } .has-feedback.has-error .custom-select-label { color:#fff; } /* Phonenumber Field */ .phonenumberfield { padding-left: 110px; } .phonenumberfield.custom-select select { position: absolute; left: 15px; width: 80px; padding-right:0; height: 43px; padding-left: 8px; top:0; } .custom-materialize.phonenumberfield label.control-label { left: 15px; } .custom-materialize.phonenumberfield .form-control-feedback1 { right: 16px !important; top: 1px; } /* Login popup */ .title-popup-custom { font-weight: bold; font-size: 20px; text-transform: uppercase; } .modal-top { margin-bottom: 15px; } .loginpopupwindowclass .modal-content { background: #09315c; /* position: relative; */ -webkit-background-clip: padding-box; background-clip: padding-box; border: 0; border-radius: 0; outline: 0; box-shadow: 0; height: 100vh; } /* Registerpopup */ .registerpopupwindowclass { background:#09315c; height: 100vh; } .registerpopupwindowclass .modal-dialog { border-radius:0; margin:0; width: 100%; height: 100vh; } .registertitle { font-size: 20px; font-weight: 300; } .registerpopupwindowclass .modal-body { padding-bottom:18px; height: 100vh; position: absolute; width: 100%; overflow-y: auto; padding-bottom: 140px; } .registerpopupwindowclass .modal-content { border:0; border-radius:0; height: 100vh; } .registerpopupwindowclass .registerpopuplogo { display:inline-block; } .registerpopupwindowclass .modal-top { text-align:center; } .registerpopupwindowclass h1 { font-size: 24px; margin-top:0px; margin-bottom: 5px; } .registerpopupwindowclass #field-registration-currency, .registerpopupwindowclass #field-country, .registerpopupwindowclass #field-age-checked { display:none; } .registerpopupwindowclass .fields-area { margin-top: 0px; } .registerpopupwindowclass .title-registration { font-size: 18px; margin-top:15px; text-transform: capitalize; text-decoration:underline; } #field-no-last-name { margin-bottom:15px; } #field-no-last-name .checkbox { padding-left: 5px; } .registerpopupwindowclass .buttons-area { border: 0; text-align:center; } .registerpopupwindowclass .buttons-area button { width: 200px; font-size: 18px; border-radius: 5px; font-weight: bold; } .registerchatbottom { background: rgb(66,156,139); /* Old browsers */ background: -moz-radial-gradient(top left, ellipse cover, rgba(66,156,139,1) 0%, rgba(33,65,128,1) 100%); /* FF3.6-15 */ background: -webkit-radial-gradient(top left, ellipse cover, rgba(66,156,139,1) 0%,rgba(33,65,128,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: radial-gradient(ellipse at top left, rgba(66,156,139,1) 0%,rgba(33,65,128,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ padding: 12px 10px 18px 10px; } .registerchatbottom > div { font-style: italic; } .registerchatbottom .titlechat { font-size: 22px; font-weight: bold; } .registerchatbottom .contentchat { font-size: 13px; } /* livechatbutton */ .livechatbutton { position: absolute; left: 15px; top: 16px; } .livechatbutton i { font-size: 20px; } .livechatbutton i:hover { opacity: 0.5; } /* override button */ .btn:hover, .btn:focus, .btn:active { color:#fff; box-shadow: none; background: #0988a7; } .modal-open .modal { z-index: 8998 !important; overflow-y: hidden; } /* announcement modal */ .announcementpopup { padding: 15px 20px 10px !important; } #announcement-modal-info { margin-bottom:0; padding-bottom:0; border: none; } .announcementpopupwindowclass #bank-details { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1c3a5d+0,142459+100 */ background: rgb(28,58,93); /* Old browsers */ background: -moz-radial-gradient(left top, ellipse cover, rgba(28,58,93,1) 0%, rgba(20,36,89,1) 100%); /* FF3.6-15 */ background: -webkit-radial-gradient(left top, ellipse cover, rgba(28,58,93,1) 0%,rgba(20,36,89,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: radial-gradient(ellipse at left top, rgba(28,58,93,1) 0%,rgba(20,36,89,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ padding: 20px; text-align:center; padding-bottom: 80px; } .announcementpopupwindowclass .modal-body { position: initial; height: auto; } .announcementpopupwindowclass { background: transparent !important; } .announcementpopupwindowclass .announcementpopup .btn { margin: 20px 0 0; font-size: 18px; padding: 6px 10px; position: absolute; bottom: 20px; left: 50%; width: 150px; margin-left: -75px; } .announcementpopupwindowclass #bank-details h2 { margin-top:0px; margin-bottom: 15px; text-transform: capitalize; } .announcementpopupwindowclass #bank-details p{ margin-bottom:4px; } .announcementpopupwindowclass #bank-details p:last-child { margin-bottom:0px; } #announcement-modal-info h3 { text-align:center; font-size: 28px; padding-bottom: 15px; margin-bottom:15px; text-transform: capitalize; border-bottom:1px solid #fff; } #announcement-modal-info .announcement-wrapper { max-height: 80vh; overflow: auto; } #announcement-modal-info .announcement-wrapper .text-danger { color:red; } #announcement-modal-info .announcement-wrapper ol { padding-left:20px; } .announcement-wrapper .notif{ color: green; font-weight: bold; } .announcement-wrapper .warning{ font-weight: bold; color:#fff !important; } /* search games box */ .search-games-box { /* margin-bottom:5px; */ position: absolute; right: 0; top: 3px; } .search-games-box #games-search-input { margin: 0; margin-right: -4px; } .search-games-box .custom-materialize label.control-label { left:0; } .search-games-box .custom-select { margin-bottom:0; padding-left:0; } .search-games-box .form-control-feedback-left i { font-size: 14px; } .search-games-box .custom-select select { font-size: 17px; height: 31px; padding: 0; margin-top: 15px; } .search-games-box .button-tools { display: inline-block; margin-left: 12px; position: relative; } .search-games-box .button-tools > i { color: #00c891; font-size: 19px; } .search-games-box .search-box > i { position: absolute; right:0px; top: 0px; } .search-games-box .filter-button, .search-games-box .toptenbutton{ position: relative; top: -6px; } .filter-button.active { background: #00c891; border-radius: 50%; height: 20px; width: 20px; text-align: center; top: -7px !important; } .filter-button.active i { font-size: 16px !important; position: relative; top: 2px; left: 0px; color: #053075 !important; } games-search #games-search-input > input { height: 22px; padding: 2px 23px 2px 9px; width: 120px; background: #1d387e; border-radius: 14px; border-color: #00c891; color: #82a0bf; margin-right: 0px; } games-search #games-search-input { width: 0%; overflow: hidden; } games-search #games-search-input.active { width: auto; border-radius: 14px; } games-search #games-search-input.is-filled .clear { z-index:99; } games-search #games-search-input.is-filled .form-control-feedback-left { display:none; } games-search .games .game .game-inner .game-content { padding-top:0px; margin-top:10px; position: relative; z-index: 10; } games-search .games .game .game-inner .game-provider { margin-bottom:0; padding:4px 25px 4px 7px; border-top:0; position: relative; color:#fff; background:transparent; } games-search .games .game:hover .game-inner .game-provider { color:#ddac49; } .game-desc { position: absolute; bottom: 0; z-index: 12; width: 100%; background: -moz-linear-gradient(top, rgba(0,0,0,0.04) 0%, rgba(0,0,0,0.83) 64%, rgba(0,0,0,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(0,0,0,0.04) 0%,rgba(0,0,0,0.83) 64%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(0,0,0,0.04) 0%,rgba(0,0,0,0.83) 64%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0a000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */ } .info-icon { position: absolute; right: 5px; top: -2px; color: #FFFF00; font-size: 21px; } .lantai-info { position: absolute; right: 8px; top: 4px; color:#ddac49; font-weight: bold; z-index: 12; padding: 0px 5px; background: rgba(0,0,0,0.4); color: #fff; font-size: 11px; border-radius: 5px; border: 1px solid #fff; width: 25px; text-align: center; } games-search .games .game.activehover .gamebutton { z-index:11; display:flex; touch-action:auto; } games-search #games-search-input .form-control-feedback { width: 20px; height: 20px; } games-search #games-search-input .form-control-feedback i { font-size: 16px; top: -7px; color: #00c891; right: 3px; font-size: 13px; } games-search .gamebutton { height: 100%; width:100%; display:flex; align-items:center; justify-content: center; position: absolute; top:0; background: rgba(0,0,0,0.8); z-index:0; display:none; touch-action:none; } games-search .gamebutton > a { border-radius: 50%; background:#00C891; color:#fff; height: 50px; width: 50px; text-align:center; display: flex; align-items:center; justify-content: center; margin:0 5px; } games-search .gamebutton > a.demo { background: transparent; border:2px solid #3a86a6 } .gamefav { width: 22px; height: 22px; background: url(/cms/mobile/images/new-icon/icon-favorite-blank3.png) no-repeat center center; background-size: contain; position: absolute; right: 9px; top: 23px; z-index: 15; } .gamefav.active , .gamefav.active2{ width: 22px; height: 22px; background: url(/cms/mobile/images/new-icon/icon-fave-filled.png) no-repeat center center; background-size:contain; position: absolute; right: 9px; top: 27px; z-index: 15; } .gamefav.nolantai { top: 9px !important; } .gamenew { position: absolute; left: 0; top: 0; width: 54px !important; height: 100%; } .gamenew { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .overlay-promosi-new-game { position: absolute; left: -2px; top: 0px; } .overlay-promosi-new-game > div { height: 24px; } #indexPage .overlay-promosi-new-game { left: 2px; } .gamenew.gamepromosi { width: auto; height: auto; position: relative; } .gamenew.gamebaru { width: auto; height: auto; position: relative; } .gamenew.gamerebate { width: auto; height: auto; position: relative; } .gamenew.gamebaru.no-promo { top: 0px; } .linktobutton-group-wrapper { text-align:center; margin-top: 15px !important; } .linktobutton-group-wrapper > a { display: inline-block; padding: 4px 10px; border: 1px solid #feff04; cursor: pointer; color: #fff; border-radius: 15px; text-transform: uppercase; } .game-popup { position: fixed; top:0px; left:0px; width: 100%; height: 100%; display: flex; align-items:center; justify-content: center; z-index:99999; } .overlay-game-popup { position: fixed; top:0px; left:0px; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index:99998; } .game-popup-container { width: 340px; position: relative; color:#fff; z-index:99999; /* border: 2px solid #ffff01; */ } .game-popup-container.landscape { height: auto; overflow: auto; } @media (max-height: 500px){ .game-popup-container.landscape { height: 100%; overflow: auto; } } .playbutton-popup-image { position: absolute; z-index: 123; top: 50%; left: 50%; } .playbutton-popup-image a { position: absolute; top: 50%; left: 50%; display: flex; text-align: center; border-radius: 50%; width: 80px; height: 80px; background: rgba(0, 11, 66, 0.6); font-size: 36px; margin-left: -40px; margin-top: -40px; justify-content: center; align-items: center; } .playbutton-popup-image a:hover { text-decoration: none; } .playbutton-popup-image a i { position: relative; left: 4px; color:#fff100; } .no-scroll { overflow: auto; } .vpn-thumb-icon { width: 22px; height: 22px; background: url(/cms/mobile/images/new-icon/icn-VPN-thumb-mobile.png) no-repeat center center; background-size: contain; position: absolute; right: 9px; top: 48px; z-index: 15; } .is-logged-out .vpn-thumb-icon { top: 50px; } .vpn-thumb-icon.nolantai { top: 35px; } .is-logged-out .vpn-thumb-icon.nolantai { top: 9px; } #indexPage { padding: 15px; } .viewtype2 .vpn-thumb-icon { top: 54px; right: 4px; } .viewtype2 .vpn-thumb-icon.nolantai { top: 36px; } .is-logged-out .viewtype2 .vpn-thumb-icon.nolantai { top: 12px; } .viewtype2 .box-list-wrapper.nowrap .vpn-thumb-icon { top: 50x; right: 1px; } .viewtype2 .box-list-wrapper .lantai-info { right: 4px; top: 4px; } .viewtype2 .provider-info { right: 4px; top: 29px; } .viewtype2 .box-list-wrapper.nowrap .provider-info { right: 1px; top: 25px; } .viewtype2 .box-list-wrapper .gamefav { top: 81px; right: 5px; } .viewtype2 .box-list-wrapper.nowrap .lantai-info { right: 1px; } .viewtype2 .gamefav.novpn { top: 54px !important; } .viewtype2 .box-list-wrapper.nowrap .gamefav { top: 78px; right: 4px; } .viewtype2 .box-list-wrapper.nowrap .gamefav.novpn { top: 52px !important; } .vpn-game-info { padding: 10px; margin: 0; color:#fff; border-radius: 3px; background: #f13857 url(/cms/mobile/images/new-icon/icn-VPN-mobile.png) 15px center no-repeat; padding-left: 75px; } .vpn-game-info a { color:#ffe24b; text-decoration: none; } .vpn-game-info a:hover { text-decoration: underline; } .wrapper-vpn { margin: -1px 0; padding: 0px 25px 20px; background:#09315c; } .vpn-info-ann-wrapper { display: flex; justify-content: center; align-items: center; padding: 20px 25px 0; } .vpn-info-ann { padding: 10px; margin: 0; color:#fff; border-radius: 3px; background: #f13857 url(/cms/mobile/images/new-icon/icn-VPN-mobile.png) 15px center no-repeat; padding-left: 75px; } .vpn-info-ann a { color:#ffe24b; text-decoration: none; } .vpn-info-ann a:hover { text-decoration: underline; } @media (max-width:414px) { .game-popup-container { width: 93%; position: relative; color:#fff; z-index:99999; } } .game-popup-header { background: #09315c; padding: 11px 53px 0px 15px; position: relative; color: #0156c6; } .game-popup-title { font-size: 18px; /* font-style: italic; */ font-weight: bold; color: #fff; } .game-popup-lantai-fav { position: absolute; right: 8px; top: 7px; } .game-popup-lantai-fav > div { float:left; } .game-popup-cancel-button { font-size: 22px; padding-right: 4px; position: relative; top: 1px; } .game-popup-fav { display: flex; justify-content: center; align-items: center; height: 35px; width: 35px; } .game-popup-fav .gamefav { width: 20px; height: 20px; position: relative; right: 5px; top: -2px; background: url(/cms/mobile/images/new-icon/icon-favorite-blank3.png) no-repeat center center; background-size: contain; } .game-popup-fav .gamefav.active { width: 20px; height: 20px; position: relative; right: auto; top: -2px; background: url(/cms/mobile/images/new-icon/icon-fave-filled.png) no-repeat center center; background-size: contain; } .game-popup-lantai { } .game-popup-thumb { position: relative; background: #09315c; padding: 15px 15px 0 15px; } .game-popup-thumb img.loading-popup { width: 70px; } .game-popup-thumb img.img-responsive { width: 100%; } .game-popup-content { padding: 13px 25px 0px 25px; background: #09315c; } .game-popup-fitur,.game-popup-tipe { margin-bottom: 10px; } .game-popup-fitur span,.game-popup-tipe span { font-size: 14px; font-weight: bold; text-transform: capitalize; } .game-popup-inner-content { font-weight: bold; } /* game popup promo*/ .game-popup-promo { margin-top: 10px; } .game-popup-promo a { color:#fdef01; font-weight: bold; text-decoration: underline; display: inline-block; } /* game popup minbet */ .game-popup-minbet { margin-top: 11px; /* margin-bottom: 10px; */ display: block; } .game-popup-minbet > div { display: inline-block; width: 49%; } .minbet-title { font-size: 15px; /* color: #fdef01; */ font-weight: 300; } .game-popup-minbet .minbet-val { font-size: 18px; font-weight: bold; /* margin-top: -5px; */ } .game-popup-button { font-size: 16px; padding: 0px 25px 15px; margin: 0 !important; background: #09315c; } .game-popup-button a { color: #f5fbfa; padding: 9px 0; font-size: 18px !important; font-weight: bold; } .game-popup-button > div { margin-bottom: 0px !important; } .game-popup-button a.game-popup-demo-button { border: 2px solid #016573; border-radius: 20px; text-align: center; width: 130px; font-size: 18px; padding: 1px 0 2px; color: #00c68f; background: #008685; font-style: normal; text-transform: capitalize; } .game-popup-play-button { border: 2px solid #00957d; border-radius: 20px; text-align:center; width: 130px; font-size: 18px; padding: 1px 0 1px; color:#fff; background: #00c891; font-style: normal; text-transform: capitalize; } .playreal i { font-size: 20px; position: relative; left: 2px; } #game-window-page { height: 100%; display: flex; justify-content: center; align-items: center; position: absolute; left: 0; right: 0; top:0; background:#041b3a; } #game-window-page p.gameloader { margin-bottom: 0; padding: 36px 10px 20px 10px; text-align: center; background: #041b3a; color: #fff; width: 100%; position: relative; } #game-window-page img.img-responsive { display: inline-block; } .gameloader i { margin: 15px 0; } .gameloader b { color:#1792c4; } #game-window-page notices { margin: 20px; } /* currencyappend */ .currencycontainer input { padding-left: 45px; } .currencyappend { position: absolute; top: 10px; left: 25px; font-size: 18px; font-weight: bold; color: #000; } .has-feedback.has-error .currencycontainer input:invalid ~ .currencyappend { display: inline-block; } /* live casino */ .link-live-casino a { display:block; width:50%; float:left; margin-bottom: 12px; padding:0 15px; margin-left:-7.5px; margin-right:-7.5px; } .link-live-casino a img { width: 100%; } /* Notice */ .alert-dismissable .close, .alert-dismissible .close { right: -27px; } /* Deposit FORM */ .payment-page h1 , .payment-page .payment-ann { text-align:center; } .payment-page h1 { font-size: 21px; margin-bottom:10px; } .payment-page .payment-ann-ann { margin-bottom:10px; } .payment-page .buttons-area { margin-top:10px; text-align:center; } .payment-page .btn-custom { display: inline-block; width: 200px; } /* Withdrawal page */ .saldo-cash { text-align:center; } .saldo-cash .saldo-cash-amount { color:#EED817; font-size: 16px; margin-left:5px; } .saldo-cash span { color:#fff; } .saldo-cash span + span { color:#fff; margin-left:5px; } .saldo-cash i { color:#0988A7; margin-left:5px; } .saldo-cash { position: relative; } .withinfobox .fa:hover + .alert.alert-info { display:block !important; visibility: visible !important; position: absolute; right: 0px; top:15px; text-align:left; z-index:20; font-size: 11px; } .title-deposit-form { margin-bottom: 5px; margin-top: 20px; } #withdrawal-page .buttons-area { margin-top:40px; } /* check password */ .checkpasswordwindowclass .modal-header { border:0; } .checkpasswordwindowclass .buttons-area { border:0; } .checkpasswordwindowclass .close { font-size:25px; } .checkpasswordwindowclass .buttons-area { text-align:center; } .checkpasswordwindowclass .buttons-area button:last-child { margin-bottom:0px; } /* homepage */ #homepage { margin: 0px -5px 0 -5px; } #homepage h1 { color:#fff; font-size: 15px; border-bottom:0; font-weight: bold; text-transform: uppercase; margin-bottom:0px; text-align: center; padding:10px; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#097e88+0,0a4181+100 */ background: rgb(9,126,136); /* Old browsers */ background: -moz-linear-gradient(left, rgba(9,126,136,1) 0%, rgba(10,65,129,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(9,126,136,1) 0%,rgba(10,65,129,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(9,126,136,1) 0%,rgba(10,65,129,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#097e88', endColorstr='#0a4181',GradientType=1 ); /* IE6-9 */ } .container-latest-news-index { background: #003557; padding: 10px; } .container-latest-news-index .item { padding-left: 45px; margin-bottom: 10px; min-height:35px; } .container-latest-news-index .item:last-child { margin-bottom:0px; } .container-latest-news-index .item.logo-bt { background: url("../images/logo/btlogogreen.png") left top no-repeat; background-size: 35px 35px; } .container-latest-news-index .item.logo-slot { background: url("../images/logo/slotlogogreen.png") left top no-repeat; background-size: 35px 35px; } .container-latest-news-index .item.logo-casino { background: url("../images/logo/lclogogreen.png") left top no-repeat; background-size: 35px 35px; } .container-latest-news-index .item.logo-vipcasino { background: url("../images/logo/viplogogreen.png") left top no-repeat; background-size: 35px 35px; } .container-latest-news-index .item.logo-olahraga { background: url("../images/logo/orlogogreen.png") left top no-repeat; background-size: 35px 35px; } .container-latest-news-index .item.logo-whatsnew { background: url("../images/logo/icn_Slot-green.png") left top no-repeat; background-size: 35px 35px; } .container-latest-news-index .item.logo-loyalty { background: url("../images/logo/icn_Loyalty-Bonanza88.png") left top no-repeat; background-size: 35px 35px; } .container-latest-news-index .news-item { } .container-latest-news-index .news-item a { color:#50a7b1; display:block; margin-bottom:3px; } .container-latest-news-index .news-item a:last-child { margin-bottom:0px; } /* promosi-list */ #promotions-page h1 { margin-bottom: 15px; } .promosi-list .promo-item { margin: 0 -15px 0 -15px; padding: 30px 15px; } .promo-item .wrapper-button-custom>div { margin-bottom: 0px; } .promo-item .islogin.wrapper-button-custom>div { width: 100%; } .promosi-list .promo-item:nth-child(even){ background:#09315c; } .promosi-list .promo-item:nth-child(odd){ background:transparent; } .promosi-list .promo-item:nth-child(1) { padding-top: 15px; } .promosi-list h2 { margin-top: 10px; font-size: 16px; color:#1ac8db; margin-bottom: 3px; font-weight: bold; } .promosi-list h2 a { color:#1ac8db; font-size: 16px; } .promosi-list .item-date { font-size: 12px; margin-bottom: 10px; } .promosi-list .item-img { margin: 5px 0; } .promosi-list .item-img img { width: 100%; } .promosi-list .item-content { font-size: 13px; } .promosi-list .item-content a { color:#EED817; } .promosi-list-details ul.nav-tabs.nav { display:flex; align-items: flex-end; justify-content: space-between; /* background: #5d7a93; */ border-bottom:2px solid #059dc0; } .promosi-list-details ul.nav-tabs.nav > li, .promosi-list-details ul.nav-tabs.nav > li > a { width: 100%; text-align:center; border-radius:0; background:transparent; border:0; display: flex; align-items: center; height: 52px; justify-content: center; } .promosi-list-details ul.nav-tabs.nav > li > a { border-top-right-radius: 4px; border-top-left-radius: 4px; } .promosi-list-details ul.nav-tabs.nav > li:last-child > a { margin-right: 0px; } .promosi-list .promostatus a.disabledbtn-promosi { color:#ccc; } .image-promosi .gamePage_main_btn { padding: 5px; background: #2e7bd3; text-align:center; display: block; text-transform: uppercase; font-weight: bold; } .image-promosi img, #menu-top img { width: 100%; } .promosi-list-details ul.nav-tabs.nav > li > a { /* padding-right: 1px; */ background: #5d7a93; } .for-desktop { display:none !important; } .wagering-requirement { display:none; } .header-title-promosi { padding-bottom:5px; border-bottom:1px solid #fff; font-weight:bold; } .title-border-promosi { font-size: 15px; font-weight: bold; padding: 5px 0; border-bottom: 1px solid #9dbfeb; text-transform: capitalize; } #promosi-modal-info { margin-bottom:10px; color:#fff; padding-bottom:5px; border-bottom:1px solid #fff; font-weight:bold; } .content-promotion-img { padding: 5px; background: #040a44; text-align:center; } .header-title-promosi { margin-bottom:5px; } .content-data-promosi .col-sm-3 { padding:0; } .tab-content a { color:#1AC8DB; } .promosi-list-details ul.nav-tabs.nav > li.active > a { color:#fff; background:#059dc0; } .promosi-list-details .tab-content { padding: 0; margin: 0 -15px; } .promosi-list-details .tab-content > div { padding: 15px; } .promosi-list-details .tab-content > div:nth-child(even) { background:#09315c; } .promosi-list-details ol { margin-left: 0px; padding: 0 0 0 20px; } .promosi-list-details h2 , .promosi-list-details h1, .promosi-list-details h3 { margin-top:0; color:#5d7a93; font-weight: bold; } #wrapper-faq-data .expand-toggle { float:right; margin-bottom:10px; font-size:17px; } #wrapper-faq-data .expand-toggle:hover { opacity:0.7; cursor:pointer; } #wrapper-faq-data .expand-toggle span { margin-right:8px; font-size:14px; } .table-promosi { border-collapse:collapse; border:2px solid #fff; } .table-responsive-custom { margin: 10px 0; } .table-promosi th { border:1px solid #fff; background:#f0f0f0; padding:5px 15px; color:#000; } .table-promosi td { padding:5px 15px; border:1px solid #fff; } .table-promosi td:nth-child(3) { width:150px; } .tab-pane .description-title { padding: 7px 15px; background: #b6cff0; color: #444; font-size: 16px; font-family: ubuntu; } .promotionspage .tab-pane .description-content { background:red; } .tab-pane .description-title.active { background: #2D5AA8; color: #fff; cursor: pointer; } .tab-pane .description-content { padding:0 10px 10px 10px; } .accordion-faq { position:relative; padding-right:30px !important; } .accordion-faq:after { content: "\f078"; font-family: FontAwesome; right:5px; position:absolute; top:50%; margin-top:-10px; } .accordion-faq.active:after { content: "\f077"; font-family: FontAwesome; right:5px; position:absolute; top:50%; margin-top:-10px; } @media (max-width: 479px){ .table-responsive-custom { width: 100%; margin-bottom: 15px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; } /*.table-responsive-custom table { white-space:nowrap; }*/ } /* forgot details */ .forgot-header { margin: -15px -15px 0 -15px; padding: 15px 15px 0 15px; border-bottom: 0; } .forgot-header h1 { color:#fff; border-bottom:0; padding-bottom:0; font-size: 20px; text-align: center; margin-bottom: 10px; } #forgot-details-page { margin: -15px; background: #09315c; padding: 15px; min-height: 77.4vh; } #forgot-details-page label.custom-radio { margin-top: 25px; font-weight: 300; } #forgot-details-page label.custom-radio:nth-child(1) { margin-top: 0px; } #forgot-details-page label.custom-radio.active { font-weight: bold; } #forgot-details-page .buttons-area { margin-top: 20px; } .all-success-forgot-details, .step-classes { padding-top: 20px; min-height: 59vh; display: flex; flex-flow: row wrap; justify-content: space-between; } .step-classes > div { align-self: flex-start; width: 100%; } .step-classes > div:nth-child(2) { align-self: flex-end; } .all-success-forgot-details > p { align-self: flex-start; } .all-success-forgot-details > .buttons-area { align-self: flex-end; width: 100%; } .note-warning { padding: 10px; color: #ffef34; font-size: 14px; font-weight: bold; width: 90%; margin: 15px auto; border-radius: 5px; border: 1px solid #5d7a93; } .notice-ann { background: #090D5F; text-align:center; padding: 5px; } .notice-ann a { color:#FFFF00; } #forgot-details-page .step-3 .custom-radio.disabled span { color: #808080; } #forgot-details-page .step-3 .custom-radio.disabled span:before { background:#808080 } #forgot-details-page .btn-custom, #forgot-details-page .btn-link { display: block; margin: 5px auto 10px; padding: 8px 30px 8px 30px; } #forgot-details-page .btn-link:hover, #forgot-details-page .btn-link:focus { text-decoration:underline; backgound:transparent; } #forgot-details-page .buttons-area .text-center { margin-top:20px; } .togglelivechat { color:#FFFF00; } /* BERITA PAGE */ .slider-berita { position: relative; margin: -15px -15px 0px -15px; } .slider-berita img { width: 100%; } .slider-berita .contentdata { position: absolute; bottom:0; padding: 5px 8px 5px 12px; width: 100%; background: rgba(0,0,0,0.7); } .slider-berita .contentdata a { color:#fff; } .slider-berita .contentdata h2 { margin: 0; font-size: 18px; } .slider-berita .contentdata small span { } .slider-berita .swiper-pagination { top: 10px; bottom: auto; } .latest-news { margin: 0 0px; } .article-latest-news { margin: 0px -15px -20px; padding: 0px 15px 20px 15px; background: #58595b; } .latest-news .item { padding: 7px 10px 7px 12px; position: relative; } .article-latest-news h2 { padding-top: 13px !important; padding-bottom: 10px !important; color:#fff !important; border-color:#fff !important; } .latest-news.article-latest-news .item:nth-child(even) { background:#231f20; } .latest-news.article-latest-news .item:nth-child(odd) { background:#404041; } .cat-title { text-transform: uppercase; font-weight: bold; } .art-date { color:#fff !important; font-style: italic; padding-left:5px; } .slider-berita .contentdata:after , .latest-news .item:after { content:""; width:4px; background:red; height: 100%; position: absolute; left:0px; top:0px; } #wrapper.beritapage { background:#231f20; } nav#navbar-top.beritapagetop { background:#191717; } .latest-news .item:nth-child(even){ background:rgba(88, 89, 91, 1) ; } .latest-news .item:nth-child(odd){ background:rgba(64, 64, 65, 1) ; } .latest-news h3 { margin: 0px 0 0; font-size: 14px; font-weight: bold; } .latest-news h3 a { color:#fff; } .art-body-content { padding-top: 10px; border-top:1px solid #00afbd; margin-top: 15px; } .latest-news h2 { margin-bottom: 10px; padding:0px 15px 15px 0px; border-bottom: 1px solid #00afbd; color:#00afbd; } .sosmedberita { text-align: center; font-size: 18px; color:#818386; border-bottom:1px solid #686b85; padding-bottom: 7px; } .sosmedberita > a { display: inline-block; margin: 0 5px; color:#818386; font-size: 22px; } .sosmedberita > span { display: inline-block; margin: 0 5px; color:#818386; font-size: 16px; position: relative; top:-2px; } .sosmedberita > span > a { color:#818386; } #copyright.beritapagecopy { color:#686b85; } #footer.beritapagefooter { background:#1a1618; } .sosmedberita > span.separator { position: relative; top:-2px; } .more-news { padding: 10px 0; } .copy-author { margin-top: 20px; font-style: italic; } .copy-author .item-author { color:#ccc; } /* today-tag */ .today-tag { margin: -15px; padding: 15px; margin-top: 15px; } .today-tag h2 { margin-bottom: 10px; padding:0px 0px 15px 0px; border-bottom: 1px solid #52c88d; color:#52c88d; margin-top:0; } .today-tag .tags-item { padding: 4px 7px; display: inline-block; border-radius: 10px; font-size: 12px; border: 1px solid #52c88d; margin-bottom: 5px; margin-right: 5px; } .today-tag .tags-item a { color:#52c88d; } .tag-list h2 { margin-top: 0; } /* ARTIKEL BERITA */ berita-article .fa-eye { position:relative; color: inherit; top: auto; right: auto; color: inherit; font-size: inherit; } berita-article .art-date { padding-left: 0px; margin-top: 15px; position: relative; } berita-article .viewsarticle { position: absolute; top: 13px; left: 27px; color: #fff; font-weight: 300; } .berita-article .latest-news h2 { padding: 0 0 15px 0; } .berita-article .cat-title { position: relative; padding-bottom: 10px; } .berita-article span.cat-title:after { content:""; width: 20px; height: 4px; position: absolute; bottom:0px; left:0px; } .berita-article .latest-news { margin: 0; } .berita-article h1.art-title { font-size: 21px; margin-bottom: 15px; margin-top:15px; } .berita-article .art-upperdeck { margin-top: 0px; color:#03c28f; margin-bottom:10px; } .berita-article .art-image { position: relative; } .berita-article .art-image img { width: 100%; } .art-body-content img { width: 100% !important; height: auto !important; } .berita-article .art-image .img-caption { position: absolute; bottom:0; width: 100%; color:#fff; padding:5px; font-size: 14px; background: rgba(0,0,0,0.6); } .berita-article .art-image .img-copy { position: absolute; top:0; right: 0; background: rgba(0,0,0,0.6); color:#fff; padding:5px 8px; font-size: 10px; width: auto; } @media (max-width: 768px){ .berita-article iframe { width:100% !important; height: auto !important; } } .berita-article .art-lead { margin-top: 10px; padding:10px; background:#090D5F; } .berita-article .art-lead p { margin-bottom:0; } /* article gallery */ .swiper-thumb-custom { margin-top: 7.5px; } .swiper-thumb-custom .swiper-thumb-content { margin: 0 -7.5px; } .swiper-thumb-custom .swiper-thumb-content .img-caption, .swiper-thumb-custom .swiper-thumb-content .img-copy { display:none; } .swiper-thumb-custom .swiper-thumb-content > div { float:left; width: 33.333%; padding: 7.5px; } .swiper-thumb-content .img-copy { display:none; } .swiper-thumb-content .thumbnail-item-swiper img { opacity: 0.7; } .swiper-thumb-content .thumbnail-item-swiper.active img { opacity: 1; } /* BERITA GROUP */ .pagination-custom { background:#000; padding:10px; position: relative; color:#fff; margin-top:-10px; margin-bottom:10px; } .pagination-custom a { color:#fff; } .pagination-custom .arrow-pagination { float:left; } .pagination-custom .pagination-number { float:right; } .pagination-custom .pagination-number .pagination-item, .pagination-custom .arrow-pagination a { float:left; padding: 2px 6px; background:#6D6E70; border-radius:2px; font-weight:bold; font-size: 14px; margin-left: 5px; } .pagination-custom .pagination-number .pagination-itema:first-child, .pagination-custom .arrow-pagination a:first-child { margin-left:0px; } .pagination-custom .pagination-number .pagination-item.active, .pagination-custom .pagination-number .pagination-item:hover { background:#12BB00; } .pagination-custom .title-pagination { margin-top:10px; } /* BERITA COLOR */ /* warna */ .colr-olahraga .cat-title, .colr-olahraga .art-date, .colr-olahraga .art-teaser { color:#00afbd; } #carousel li.colr-olahraga:hover .flex-caption, #carousel .colr-olahraga.flex-active-slide .flex-caption { background: rgba(0, 175, 189, 0.7); } #carousel li.colr-olahraga:hover, #carousel .colr-olahraga.flex-active-slide { background:#00afbd; } .colr-olahraga .cat-title:after, .colr-olahraga.artikel-default .art-lead:after, .colr-olahraga.artikel-default .tag-inner-artikel:after, .slider-berita .contentdata.colr-olahraga:after , .latest-news .item.colr-olahraga:after { background:#00afbd; } .colr-olahraga.item-terkait:after{ background:#00afbd; opacity: 0.7; } .colr-judi .cat-title, .colr-judi .art-date, .colr-judi .art-teaser { color:#f58548; } #carousel li.colr-judi:hover .flex-caption, #carousel .colr-judi.flex-active-slide .flex-caption { background: rgba(245, 133, 72, 0.7); } #carousel li.colr-judi:hover, #carousel .colr-judi.flex-active-slide { background:#f58548; } .colr-judi .cat-title:after, .colr-judi.artikel-default .art-lead:after, .colr-judi.artikel-default .tag-inner-artikel:after, .slider-berita .contentdata.colr-judi:after , .latest-news .item.colr-judi:after { background:#f58548; } .colr-judi.item-terkait:after{ background:#f58548; opacity: 0.7; } #carousel li.colr-tipsjudi:hover .flex-caption, #carousel .colr-tipsjudi.flex-active-slide .flex-caption { background: rgba(255, 72, 94, 0.7); } #carousel li.colr-tipsjudi:hover, #carousel .colr-tipsjudi.flex-active-slide { background:#ff485e; } .colr-tipsjudi .cat-title, .colr-tipsjudi .art-date, .colr-tipsjudi .art-teaser { color:#ff485e; } .colr-tipsjudi .cat-title:after, .colr-tipsjudi.artikel-default .art-lead:after, .colr-tipsjudi.artikel-default .tag-inner-artikel:after, .slider-berita .contentdata.colr-tipsjudi:after , .latest-news .item.colr-tipsjudi:after { background:#ff485e; } .colr-tipsjudi.item-terkait:after{ background:#ff485e; opacity: 0.7; } .colr-jadwalbola .cat-title, .colr-jadwalbola .art-date, .colr-jadwalbola .art-teaser { color:#3d61e9; } .colr-jadwalbola .cat-title:after, .colr-jadwalbola.artikel-default .art-lead:after, .colr-jadwalbola.artikel-default .tag-inner-artikel:after, .slider-berita .contentdata.colr-jadwalbola:after , .latest-news .item.colr-jadwalbola:after { background:#3d61e9; } .colr-jadwalbola.item-terkait:after{ background:#3d61e9; opacity: 0.7; } #carousel li.colr-jadwalbola:hover .flex-caption, #carousel .colr-jadwalbola.flex-active-slide .flex-caption { background: rgba(61, 97, 233, 0.7); } #carousel li.colr-jadwalbola:hover, #carousel .colr-jadwalbola.flex-active-slide { background:#3d61e9; } .colr-prediksibola .cat-title, .colr-prediksibola .art-date, .colr-prediksibola .art-teaser { color:#f559ce; } .colr-prediksibola .cat-title:after, .colr-prediksibola.artikel-default .art-lead:after, .colr-prediksibola.artikel-default .tag-inner-artikel:after, .slider-berita .contentdata.colr-prediksibola:after , .latest-news .item.colr-prediksibola:after { background:#f559ce; } .colr-prediksibola.item-terkait:after{ background:#f559ce; opacity: 0.7; } #carousel li.colr-prediksibola:hover .flex-caption, #carousel .colr-prediksibola.flex-active-slide .flex-caption { background: rgba(245, 89, 206, 0.71); } #carousel li.colr-prediksibola:hover, #carousel .colr-prediksibola.flex-active-slide { background:#f559ce; } .colr-allnews .cat-title, .colr-allnews .art-date, .colr-allnews .art-teaser { color:#808080; } .colr-allnews .cat-title:after, .colr-allnews.artikel-default .art-lead:after, .colr-allnews.artikel-default .tag-inner-artikel:after, .slider-berita .contentdata.colr-allnews:after , .latest-news .item.colr-allnews:after { background:#808080; } .colr-allnews.item-terkait:after{ background:#808080; opacity: 0.7; } #carousel li.colr-allnews:hover .flex-caption, #carousel .colr-allnews.flex-active-slide .flex-caption { background: rgba(128, 128, 128, 0.7); } #carousel li.colr-allnews:hover, #carousel .colr-allnews.flex-active-slide { background:#808080; } #sidebar .sidebar li.beritalinks a:before { content: ""; width:0px; border-left:7px solid transparent; position: absolute; left:0px; top:0px; height: 100%; } .allnews-border a:before {border-color:#808080 !important;} .olahraga-border a:before {border-color:#00afbd !important;} .judi-border a:before {border-color:#f58548 !important;} .tipsjudi-border a:before {border-color:#ff485e !important;} .jadwalbola-border a:before {border-color:#3d61e9 !important;} .prediksibola-border a:before {border-color:#f559ce !important;} .active.allnews-border a {color:#808080 !important;} .active.olahraga-border a {color:#00afbd !important;} .active.judi-border a {color:#f58548 !important;} .active.tipsjudi-border a {color:#ff485e !important;} .active.jadwalbola-border a {color:#3d61e9 !important;} .active.prediksibola-border a {color:#f559ce !important;} #sidebar .sidebar ul li#berita a { position:relative; } /*#sidebar .sidebar ul li#berita a:after { content: ""; position:absolute; left:104px; top:0px; width: 40px; height: 30px; background: url(/cms/images/baru.gif) no-repeat center center; background-size: contain; }*/ /*#sidebar .sidebar ul li#olahraga a:after { content: ""; position:absolute; left:96px; top:0px; width: 40px; height: 30px; background: url(/cms/images/baru.gif) no-repeat center center; background-size: contain; }*/ #sidebar .sidebar ul li#livestream a:after { content: ""; position:absolute; left:96px; top:0px; width: 40px; height: 30px; background: url(/cms/images/baru.gif) no-repeat center center; background-size: contain; } .homemenu #menubottom-fixed.menu-icon-top .item > div { position: relative; } /*.homemenu #menubottom-fixed.menu-icon-top .logo-olahraga > div:after, .homemenu #menubottom-fixed.menu-icon-top .logo-edisi > div:after { content: ""; position:absolute; right:0px; top:0px; width: 40px; height: 30px; background: url(/cms/images/baru.gif) no-repeat center center; background-size: contain; }*/ #sidebar .sidebar ul li#prediksibola-berita a:after { content: ""; position:absolute; right:119px; top:0px; width: 40px; height: 30px; background: url(../images/icn_segera.png) no-repeat center center; } #sidebar .sidebar ul li#olahraga-berita a:after { content: ""; position:absolute; right:141px; top:0px; width: 40px; height: 30px; background: url(../images/icn_segera.png) no-repeat center center; } #sidebar .sidebar ul li#jadawalbola-berita a:after { content: ""; position:absolute; right:125px; top:0px; width: 40px; height: 30px; background: url(../images/icn_segera.png) no-repeat center center; } /* bank status */ .bankstatus > div { display: flex; justify-content: space-between; align-items: center; padding: 10px 0px; } .bankstatus > div > div { width: 50%; } .bankstatus-status { text-align: right; } .bankstatus-status > div { padding: 2px 15px; border-radius: 4px; color:#fff; background: #ff0000; display: inline-block; font-weight: bold; font-size: 13px; } .bankstatus-status > div.active { background:#11e352; } #paymentmethod .title, #socialmedia .title { color:#008db2; border-bottom: 1px solid #2a4e72; font-weight: bold; margin-bottom: 5px; } .atm-bersamahardcoded { width: 110px; margin-top: 10px; } #socialmedia { padding: 15px; background: #041b3a; } .socialmedialist { display: flex; justify-content: space-evenly; align-items: center; text-align: center; flex-flow: row wrap; } .socialmedialist > div { width: 100%; text-align: left; } .socialmedialist a { display: inline-block; color:#1ac8db; font-size: 14px; padding: 5px 0 !important; } .socialmedialist a i { font-size: 22px; margin-right: 5px; width: 30px; text-align: center; } #sidebar .sidebar #paymentmethod { padding: 0px 15px 35px; margin-top: 0px; background: #041b3a; } /* Captcha */ bot-detect { display:block; position:relative; padding-right: 150px; } bot-detect label.control-label { display:none; } /*bot-detect field > div .alert-info, bot-detect field > div .help-block { margin-left: -160px; width: auto; }*/ .botdetectimg { /* display: block; */ position: absolute; right: 0px; top: 0; width: 150px; margin: 10px 0; padding: 10px; background: #0292b7; display: flex; align-items: center; border-top-right-radius: 4px; border-bottom-right-radius: 4px; } .botdetectimg img { display:block; width: 103px; float:left; height: 24px; } .botdetectimg a { /* display: inline-block; */ padding: 0px 1px; /* background: #00c891; */ color: #fff; /* float: left; */ width: 25px; text-align: center; /* height: 20px; */ padding-left: 10px; } /* verification-page */ .verification-page { position: relative; margin: -15px -15px 0; } .verification-page .verifikasi-status-box { padding-top: 10px; } .verification-page > div { padding: 15px; } .verification-page .text-success { color:#4ec550; } .verification-page .text-danger { color:#ff3e5d; } .verification-page .btn-danger { background: #d9534f; border: 0; box-shadow: none; border-radius: 20px; } .verification-page h1 { font-size: 20px; font-weight: 300; margin-bottom: 15px; } .verification-page h3 { margin-top:0; margin-bottom:10px; } .verification-hpemail-wrapper { margin: 25px 0 45px; } .note-hp-email { font-size: 13px; } .verification-hpemail { display: flex; justify-content: flex-start; align-items: center; margin: 25px 0; } .verification-hpemail > * { margin: 0 9px 0 0 !important; font-weight: 300; font-size: 16px; } .verification-hpemail i { display: none; } .verification-hpemail.verifieddata i { display: inline-block; } .verification-hpemail.verifieddata { color: #11E352; } .info-bnz { background:#5d7a93; padding:15px; color:#ffef34; margin-bottom: 15px; } .info-bnz .retries { margin-top:10px; } .verification-page .allverifiedicon { } .verification-page .allverifiedicon .allverified-item { display: inline-block; margin:5px 10px; height: 50px; width: 50px; position: relative; background:#00c891; border-radius: 5px; } .verification-page .allverifiedicon .allverified-item i { position: absolute; top:-10px; left:-10px; font-size: 22px; color:#fff; } .verification-page .allverifiedicon .allverified-item.bank-item:after { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f19c"; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; color: #fff; font-size: 28px; display: flex; justify-content: center; align-items: center; height: 50px; width: 50px; position: absolute; } .verification-page .allverifiedicon .allverified-item.hp-item:after { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f3cd"; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; color: #fff; font-size: 34px; display: flex; justify-content: center; align-items: center; height: 50px; width: 50px; position: absolute; } .verification-page .allverifiedicon .allverified-item.email-item:after { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f0e0"; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; color: #fff; font-size: 28px; display: flex; justify-content: center; align-items: center; height: 50px; width: 50px; position: absolute; } /* .button-group-bnz { position: absolute; left:0; right:0; bottom: 0px; } */ .button-group-bnz { margin-top:30px; } .button-group-bnz .btn-link { color:#1ac8db; } .button-group-bnz-horizontal { display: flex; justify-content: space-evenly; align-items: center; } .mtop-10 { margin-top:10px; } .button-group-bnz .btn { width: 300px; text-align:center; margin: 0 auto; display:block; font-size: 14px !important; padding: 10px 0; } .button-group-bnz .btn:last-child { margin-bottom:0; } .info-bnz .item-info-bnz .value-bnz { font-weight:bold; } .text-green { color: #11E352; } .custom-materialize input#field-bank-name-model[disabled] { color:#999; } .accountbank-details { background: #5d7a93; padding:10px; text-align:center; margin-bottom:10px; } .accountbank-details p { margin:0; padding:0; margin-top:10px; color:#ffef34; } .withdrawal-ann { padding: 15px; background: #5c7a94; color: #ffef06; font-size: 13px; margin: 25px 0; } /* gototop */ goto-top { position: fixed; bottom:10px; right: 32px; z-index: 15; display:none; } goto-top .gototop { font-size: 28px; opacity: 0.7; } /* navbar-top after fixed */ .menu-top-container.active { height: 74px; } .menu-top-container.active2 { height: 175px; } .menu-affix.menu-icon-top { padding:0; position: fixed; top:0px; z-index:2222; left: 47px; right: 43px; } .menu-affix.menu-icon-top .item .title { display:none; } .menu-affix.menu-icon-top .item .logo-icon { width: 30px; height: 30px; top:0; } .menu-affix.menu-icon-top .item { padding-bottom: 1px; } #menu-topfixed { display:none; } #menubottom-fixed { animation-duration: 0.5s; animation-delay: 0s; animation-iteration-count: 1; -webkit-animation-duration: 0.5s; -webkit-animation-delay: 0s; -webkit-animation-iteration-count: 1; -moz-animation-duration: 0.5s; -moz-animation-delay: 0s; -moz-animation-iteration-count: 1; } #menubottom-fixed.ng-hide { display:none !important; } .logobnz { animation-duration: 0.5s; animation-delay: 0s; animation-iteration-count: 1; -webkit-animation-duration: 0.5s; -webkit-animation-delay: 0s; -webkit-animation-iteration-count: 1; -moz-animation-duration: 0.5s; -moz-animation-delay: 0s; -moz-animation-iteration-count: 1; } #main-menu-icon { position: relative; z-index:9999; } /* Pusat Download */ .secondary-header { color: #ddb023 !important; text-transform: uppercase !important; font-weight: bold; background: transparent !important; font-size: 22px !important; font-weight: 800!important; border-bottom: 0 !important; margin: 0px !important; padding: 0 !important; margin-bottom: 10px !important; } /* BT page */ #bt-page h2 { color: #ddb023; text-transform: uppercase; font-weight: bold; margin-top:0px; border:0; } .icon-btpage { height: 24px; position: relative; top:-3px; margin-left:5px; } .list-ol { padding-left: 15px; } .list-ol li { margin-bottom:5px; } .list-ol li:last-child { margin-bottom:0px; } /* Olahraga Menu */ #betting-page.page { background: none; padding: 0px; } .olahraga-menu { background: #1D1D1D; border-top: 2px solid #0f255e; } .olahraga-menu .item-menu { float:left; width: 33.333333%; text-align: center; padding: 10px 0; border-top:2px solid transparent; color:#436d9d; font-weight: 800; position: relative; top: -1px; } .olahraga-menu .item-menu.active { border-color: #edd519; color: #edd519; } .olahraga-menu.active { position: fixed; top: 41px; width: 100%; z-index: 123; box-shadow: 0px 0px 3px 0px #fff; } #betsliptotalcount, #openbetsliptotalcount { position: absolute; top: 5px; right: 7px; font-size: 9px; padding: 3px 5px; color: #fff; background: #fb8f28; border-radius: 5px; } .has-navbar-top #game-window-page game-window, .has-navbar-top #betting-page game-window { top: 90px; } .swiper-pagination-bullet { width: 12px; height: 12px; background:#ddd; opacity: 0.8; } .swiper-pagination-bullet-active { background:#fff; opacity: 1; } /* VIP Casino */ #vipcasino-page h2 { color: #ddb023; text-transform: uppercase; font-weight: bold; margin-top:0px; border:0; } .link-gold { color:#EED817 !important; } /* Game preload */ .gameimagepreloader { background:#194d83; display: flex; justify-content: center; align-items:center; height: 115px; width: 100%; } #navbar-top #logo { position: relative; top: 2px; background:url(/cms/mobile/images/logo-smaller.png) no-repeat center center; width: 176px; height: 24px; display: inline-block; z-index: 12312; } #navbar-top .christmast #logo { position: relative; top: 0; background: url(/cms/mobile/images/logo-smaller-angpao.png) no-repeat center center; width: 252px; height: 50px; display: inline-block; z-index: 12312; background-size: contain; } #navbar-top .logobnz.active { width: 26px; height: 26px; right: 44px; left: auto; z-index: 9999; } #navbar-top .logobnz.christmast.active { width: 26px; height: 26px; right: 44px; left: auto; z-index: 9999; top: 11px; } #navbar-top .logobnz.active #logo { position: relative; top: 1px; background:url(/cms/mobile/images/iconlogocircle.png) no-repeat center center; background-size: contain; width: 26px; height: 26px; display: inline-block; z-index: 12312; } #footer #copyright { font-size: 11px; } .chat-bubble { position: relative; top:-2px; width: auto; height: 23px; } /* user balance */ user-balance { margin-bottom:0; float:left; width: 100%; } user-balance #user-balance-wrapper #user-balance-value { box-shadow: none; background: transparent; font-size: 18px; position: relative; padding-left: 15px; } user-balance #user-balance-wrapper #user-balance-value:after { content: "\f103"; font-family: FontAwesome; position: absolute; left:0px; top:5px; transition: transform 0.5s; font-size: 13px; } #navbar-user-detail #usernickname-navbar { font-size: 18px; width: 74%; text-overflow: ellipsis; overflow: hidden; } #user-loyalty { float:left; border-right: 3px solid #3789a5; display: inline-block; padding-right: 7px; margin-right: 7px; height: 24px; position: relative; } .loyalty-profile img { position: relative; top:-7px; } #user-loyalty img { width: 24px; height: 24px; } #loyaltydropdown { position: absolute; left: 0px; white-space: nowrap; background: rgb(66,156,139); background: -moz-radial-gradient(top left, ellipse cover, rgba(66,156,139,1) 0%, rgba(33,65,128,1) 100%); background: -webkit-radial-gradient(top left, ellipse cover, rgba(66,156,139,1) 0%,rgba(33,65,128,1) 100%); background: radial-gradient(ellipse at top left, rgba(66,156,139,1) 0%,rgba(33,65,128,1) 100%); color: #fff; border-radius: 4px; box-shadow: 1px 1px 11px #021b53; font-size: 14px; padding: 5px 8px; color:#fff; margin-top: 10px; z-index: 4; display: none; } #user-loyalty #loyaltydropdown.active { display: block } #loyaltydropdown a { color:#fff; } #user-balance-wrapper #balance-wrapper { left: 0; right: 0; background: transparent; border-radius: 0; border: 0; padding: 0 8px 0px 8px; } #user-balance-wrapper { position: initial; } #navbar-user-detail #totalamount-navbar > a { position: relative; right:auto; top: auto; float: right; margin-left: 10px; } #balance-wrapper .inner-user-balance { background: rgb(66,156,139); /* Old browsers */ background: -moz-radial-gradient(top left, ellipse cover, rgba(66,156,139,1) 0%, rgba(33,65,128,1) 100%); /* FF3.6-15 */ background: -webkit-radial-gradient(top left, ellipse cover, rgba(66,156,139,1) 0%,rgba(33,65,128,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: radial-gradient(ellipse at top left, rgba(66,156,139,1) 0%,rgba(33,65,128,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ color:#fff; border-radius: 4px; box-shadow: 1px 1px 11px #021b53; font-size: 14px; } #user-balance-wrapper #balance-wrapper > div { padding: 0px 8px; } #user-balance-wrapper #balance-wrapper .inner-user-balance > div { padding: 8px 0px; border-bottom: 1px solid #053561; } #user-balance-wrapper #balance-wrapper .inner-user-balance > div:last-child { border-bottom: 0px; } #user-balance-wrapper #balance-wrapper #total-balance { border-top: 0px; } #transfer-icon-link img { width: 35px; height: 35px; margin-right: 5px; } #transfer-icon-link { display: flex; justify-content:flex-start; align-items: center; color:#e3d034; font-weight: bold; } #navbar-user-detail #totalamount-navbar #transfer-icon-link a { position: relative; right: auto; top: auto; background: none; width: auto; height: auto; color:#e3d034 !important; } #navbar-user-detail #totalamount-navbar { padding-right: 0; position:initial; } /* maintenance page */ #maintenance-page { margin-top:-15px; } .mobilemaintenance { position: absolute; top:0px; left:0px; right:0px; width:100%; height:100%; border: 0; } .touch-area-left { width:100%; position: absolute; height:100%; right:0px; top:0px; z-index:1000 } #maintenance-page maintenance-form.authorization form { position:relative; z-index:1001; } #maintenanceForm { margin-top:10px; } #maintenanceForm .btn-custom-green { width:200px; display:block; margin: 0 auto; } user-balance #user-balance-wrapper.show-detailed-balance #user-balance-value { box-shadow: none; background:transparent; color: #fff; } user-balance #user-balance-wrapper.show-detailed-balance #user-balance-value:after { top:4px; transform: rotate(180deg); } /* footer */ #footer { padding: 15px; margin: 0px; border-top: 2px solid #1ac8db; } /* menu group */ .menu-group { padding: 0 15px 6px; border-bottom:1px solid #53a871; white-space: nowrap; overflow: auto; margin: 15px -15px 6px; } .menu-group:after, .filter-lantai-shortcut:after { content:''; position: absolute; right: -15px; height: 37px; width: 40px; z-index:1; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7db9e8+0,1b3179+100&0+0,1+100 */ background: -moz-linear-gradient(left, rgba(125,185,232,0) 0%, rgba(27,49,121,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(125,185,232,0) 0%,rgba(27,49,121,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(125,185,232,0) 0%,rgba(27,49,121,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#007db9e8', endColorstr='#1b3179',GradientType=1 ); /* IE6-9 */ } .menu-group:before, .filter-lantai-shortcut:before { content:''; position: absolute; left: -15px; height: 37px; width: 20px; z-index:1; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1b3179+0,7db9e8+100&1+0,0+100 */ background: -moz-linear-gradient(left, rgba(27,49,121,1) 0%, rgba(125,185,232,0) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(27,49,121,1) 0%,rgba(125,185,232,0) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(27,49,121,1) 0%,rgba(125,185,232,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1b3179', endColorstr='#007db9e8',GradientType=1 ); /* IE6-9 */ } .menu-group a { display: inline-block; padding: 5px 8px 5px 30px; border-radius: 5px; color:#82a0bf; margin-right: 5px; font-weight: bold; position: relative; text-transform: uppercase; } .menu-group a.active { /* background:#6ccc6f; */ color: #ffff01; } .menu-group a:last-child { margin-right: 0px; } .menu-group a:hover { text-decoration: none; } .menu-icon:after { content:''; width: 20px; height: 20px; background-position: center center; background-size: cover; background-repeat: no-repeat; position: absolute; left: 7px; top:5px; } .menu-icon.pilihan:after { background-image: url(../images/menu-icon/pilihan2off.png); } .menu-icon.pilihan.active:after { background-image: url(../images/menu-icon/pilihan1on.png); } .menu-icon.all:after { background-image: url(../images/menu-icon/semua2off.png); } .menu-icon.all.active:after { background-image: url(../images/menu-icon/semua1on.png); } .menu-icon.allnew:after { background-image: url(../images/menu-icon/terbaru2off.png); } .menu-icon.allnew.active:after { background-image: url(../images/menu-icon/terbaru1on.png); } .menu-icon.popular:after { background-image: url(../images/menu-icon/populer1off.png); } .menu-icon.popular.active:after { background-image: url(../images/menu-icon/populer1on.png); } .menu-icon.favorite:after { background-image: url(../images/menu-icon/favorit2off.png); } .menu-icon.favorite.active:after { background-image: url(../images/menu-icon/favorit1on.png); } .menu-icon.topten:after { background-image: url(../images/menu-icon/topTen2off.png); } .menu-icon.topten.active:after { background-image: url(../images/menu-icon/topTen1on.png); } .menu-icon.custom:after { background-image: url(../images/menu-icon/icon_7a.png); } .menu-icon.custom.active:after { background-image: url(../images/menu-icon/icon_7b.png); } /* filter shortcut lantai */ .filter-lantai-shortcut { margin-top: 10px; white-space: nowrap; overflow: auto; } .item-lantai { padding: 1px 12px; background:#688bb3; color:#254258; display: inline-block; border-radius: 4px; margin-right: 7px; font-size: 13px; margin-bottom: 0px; } .semua-lantai { padding: 1px 9px; } .item-lantai.active { background:#ffff01; color:#4788ba; } .item-lantai:last-child { margin-right: 30px; } /* filter-wrapper */ .filter-wrapper { position: fixed; top:0px; left:0px; width: 100%; height: 100%; background:#01142c; z-index:9999; } .filter-header { /* display: flex; */ /* justify-content: space-between; */ /* align-items: center; */ text-align: center; color:#fff; background: #01142c url(/cms/mobile/images/Repeat-Grid.png) repeat center center; padding: 15px 15px; z-index: 1; position: relative; } .filter-header h1 { display: inline-block; background: transparent; margin: 0px; padding: 0px; font-size: 15px; } .filter-header h1 i { margin-right: 5px; } .close-filter{ /* border:2px solid #fff; */ /* border-radius: 50%; */ /* width: 34px; */ /* height: 34px; */ position: absolute; right: 12px; top: 5px; font-size: 20px; color: #5d7a93; } .close-filter i { position: relative; top: 5px; } .close-filter:active { opacity: 0.7; } .filter-form { position: absolute; top: 0; left: 0; height: 100vh; width: 100%; overflow: auto; padding: 65px 15px 60px 15px; } .filter-group { padding-bottom: 7px; margin-bottom: 10px; /* border-bottom: 1px solid #6bcc6b; */ } .filter-group:last-child { margin-bottom: 0px; border:0; } .filter-group-title { font-weight: bold; text-transform: uppercase; font-size: 15px; margin-bottom: 10px; border-bottom: 1px solid #263d55; } .title-group { padding: 0 5px; font-weight: bold; font-size: 20px; text-transform: uppercase; margin-top: 10px; } .title-group i { color:#69cd6b; margin-left: 5px; } .gamegroup-wrapper > div.row { margin: 0; } games-search { position: relative; } /* filter bottom fix */ .filter-fixed { position: fixed; bottom: 120px; border-radius: 15px; background: rgba(255, 255, 255, 0.8); padding: 15px 10px; color: #1d397f; z-index: 12; left: 50%; margin-left: -15px; display: none; } .filter-fixed.active { display: block; } /* custom-winnerlist */ #games-search-page .swiper-container .swiper-arrow-left, #games-search-page .swiper-container .swiper-arrow-right { color:#fff; opacity: 1; } .custom-winnerlist-wrapper { position: relative; height: 69px; } .header-winnerlist { text-align:center; color: #20e7fe; font-size: 15px; font-weight: bold; position: relative; top: -5px; padding: 5px 0; z-index: 124; } .close-custom-winnerlist { position: absolute; top: -11px; left: 50%; font-size: 28px; color: #009ae3; z-index: 123; font-size: 14px; border-radius: 50%; width: 24px; height: 24px; display: flex; justify-content: center; align-items: center; font-weight: bold; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#15a7d6+0,23a4c2+100 */ background: #fcec04; /* Old browsers */ background: -moz-linear-gradient(top, rgba(21,167,214,1) 0%, rgba(35,164,194,1) 100%); /* FF3.6-15 */ /* background: -webkit-linear-gradient(top, rgba(21,167,214,1) 0%,rgba(35,164,194,1) 100%); */ /* Chrome10-25,Safari5.1-6 */ /* background: linear-gradient(to bottom, rgba(21,167,214,1) 0%,rgba(35,164,194,1) 100%); */ /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#15a7d6', endColorstr='#23a4c2',GradientType=0 ); /* IE6-9 */ border: 2px solid #fcec04; margin-left: -12px; padding-top: 2px; padding-left: 1px; } .close-custom-winnerlist i { /* text-shadow: 0px 1px 2px #000; */ } .home-winnerlist .custom-winnerlist-wrapper { margin: 0 -15px; } #games-search-page games-search #games-search-results { margin-bottom: 15px; } #games-search-page .secondary-header { color:#00c891 !important; } .custom-winnerlist { position: fixed; bottom: -71px; left:0px; width: 100%; padding: 5px 15px; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#009ee8+0,066aa2+100 */ background: rgb(0,158,232); /* Old browsers */ background: -moz-linear-gradient(top, rgba(0,158,232,1) 0%, rgba(6,106,162,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(0,158,232,1) 0%,rgba(6,106,162,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(0,158,232,1) 0%,rgba(6,106,162,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#009ee8', endColorstr='#066aa2',GradientType=0 ); /* IE6-9 */ z-index: 15; box-shadow: 0px -1px 7px 1px #000; } .custom-winnerlist .swiper { position: relative; z-index: 124; } .custom-winnerlist.active { bottom: 0px; } .custom-winnerlist.active .header-winnerlist { display: none; } .custom-winnerlist .close-custom-winnerlist { align-items: flex-start; } .custom-winnerlist.active .close-custom-winnerlist { align-items: center; } .custom-winnerlist.atthebottom { position: relative; bottom: 0px; box-shadow: none; } .custom-winnerlist.atthebottom .close-custom-winnerlist, .custom-winnerlist.atthebottom .header-winnerlist{ display: none; } .custom-winnerlist .img-winnerlist { width: 60px; } .custom-winnerlist .img-winnerlist img { width: 100%; } .custom-winnerlist .swiper-wrapper { display: flex; align-items: center; } .winnerlist-item { width: 100%; display: flex; justify-content: flex-start; align-items: center; height: 59px; } .content-winnerlist { padding-left: 10px; font-family: 'PT Sans Narrow', sans-serif; } .content-winnerlist > div:nth-child(1) { font-size: 16px; } .content-winnerlist > div:nth-child(2) { font-size: 14px; } .content-winnerlist a { color:#fbed09; font-weight: bold; /* text-decoration: underline; */ } .content-winnerlist > div > div { color:#2e3192; } .content-winnerlist span:nth-child(1) { font-weight: bold; } .custom-winnerlist .swiper-pagination, .custom-winnerlist .swiper-arrow-right, .custom-winnerlist .swiper-arrow-left{ display: none; } /* SQUARED THREE */ .squaredThree { display: inline-block; position: relative; padding-left: 4px; margin-bottom: 4px; } .squaredThree input { visibility: hidden; } .squaredThree label.checkstyle { cursor: pointer; position: absolute; width: 15px; height: 15px; left: 0px; top: 4px; border: 2px solid #fff; border-radius: 4px; /* -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,.4); */ -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,.4); /* box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,.4); */ } .squaredThree label.checkstyle:after { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; content: ''; position: absolute; width: 8px; height: 5px; background: transparent; top: 2px; left: 2px; border: 2px solid #2256ce; border-top: none; border-right: none; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); /* color: #fff; */ } .squaredThree label.checkstyle:focus::after, .squaredThree label.labelShowed:focus + label.checkstyle:after{ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); opacity: 0.5; } .squaredThree label.labelShowed { color: #fff; white-space: normal; font-size: 14px; font-weight: 300; } .squaredThree:focus label.labelShowed, .squaredThree input[type=checkbox]:checked + label.labelShowed { cursor: pointer; color:#fff; } .squaredThree input[type=checkbox]:checked + label.labelShowed + label.checkstyle:after { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; } .squaredThree:focus label.checkstyle, .squaredThree input[type=checkbox]:checked + label.labelShowed + label.checkstyle { background: #1ac8db; border: 2px solid #1ac8db; } .changetotwocolumns { column-count: 2; column-gap: 0; width: 100%; } .changetotwocolumns > div { display: inline-block; width: 92%; height: auto; white-space: nowrap; } /* Bnz Filter Minbet Slider */ .minbet-slider { margin-bottom: 15px; } .select-minbet-wrapper { position: relative; display: inline-block; } .select-minbet-wrapper:before { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f0d7"; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; position:absolute; right: -15px; top: 50%; margin-top: -7px; } .select-minbet-wrapper:after { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f0d8"; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; position:absolute; right: -15px; top: 50%; margin-top: -14px; } .selectMinbet { /* padding: 0px; */ /* background: transparent; */ /* border: 0; */ font-size: 19px; -webkit-appearance: none; -moz-appearance: none; text-indent: 0; text-overflow: ''; color: #000; height: auto; padding-left: 40px; text-align: right; position: relative; } .title-selectminbet { font-weight: bold; text-transform: uppercase; font-size: 15px; margin-bottom: 10px; border-bottom: 1px solid #263d55; } .currencyselectminbet { position: absolute; left: 10px; top: 50%; margin-top: -10px; color: #000; } .rzslider .rz-bubble { color:#fff; font-weight:bold; } .rzslider .rz-bubble.rz-limit { color:#3e765b; } .rzslider .rz-pointer { background-color:#69cd6b; border-radius: 9px; width: 10px; } .rzslider .rz-pointer:focus { outline: 0px; } .rzslider .rz-pointer:after { content: "\f142"; font-family: FontAwesome; font-style: normal; font-weight: normal; text-decoration: inherit; top: 5px; left: 3px; background-color: transparent !important; color: #040a44; font-size: 18px; border-radius: 0; width: auto; height: auto; } /* Reset filter */ .submit-reset { position:fixed; bottom: 0; text-align: center; width: 100%; left: 0; z-index: 12; padding: 20px 20px 10px; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.65+100 */ background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */ } .submit-reset a { margin-bottom: 0px !important; padding: 10px 0; font-size: 17px !important; } .reset-filter,.submit-filter { display: inline-block; padding: 5px 10px 7px; background:#00c891; border-radius: 20px; width: 100px; margin: 0 5px; font-size: 18px; } .reset-filter:active { color:#69cd6b; } /* topten group */ .topgame-group-wrapper { margin-bottom: 15px; } .topgame-group { margin-bottom: 10px; } .topgame-group.active { /* border:1px solid #fcf001; */ } .topgame-group-wrapper .topgame-group:last-child { margin-bottom: 0px; } .topgame-group .bottom-topgame-group { display: none; padding: 0px 5px 5px 5px; background: #0056c7; } .topgame-group.active .bottom-topgame-group { display: block; } .top-topgame-group { background: #0056c7; text-align: center; color:#fff; padding: 5px 25px; position: relative; } .top-topgame-group > div { display: none; } .top-topgame-group > div.open-close-topgame, .top-topgame-group > div.title-topgame, .top-topgame-group > div.subtitle-topgame { display: block; } .topgame-group.active .top-topgame-group > div.open-close-topgame, .topgame-group.active .top-topgame-group > div.title-topgame, .topgame-group.active .top-topgame-group > div.subtitle-topgame{ color:#fcf001; } .topgame-group.active .top-topgame-group > div.subtitle-topgame{ margin-bottom: 10px; } .topgame-group.active .top-topgame-group { background: #0056c7; } .topgame-group.active .top-topgame-group > div { display: block !important; } .close-button-bottom { text-align: center; font-size: 24px; color: #fefe00; margin-top: -2px; } .open-close-topgame { position: absolute; top: 5px; right: 8px; font-size: 20px; } .title-topgame { font-size: 20px; font-weight: bold; } .subtitle-topgame { font-size: 16px; font-weight: bold; line-height: 18px; } .topgame-description { line-height: 15px; } .submenu-topten { margin-top: 10px; margin-bottom: 5px; color: #fefe00; } .submenu-topten select { background: transparent; font-size: 16px; font-weight: bold; border: 0px; text-transform: capitalize; color: #fefe00; } .topgame-item { display: flex; justify-content: flex-start; align-items: flex-end; padding: 8px; } .topgame-item .topgame-image { position: relative; width: 35%; } .rank-num-topgame { position: absolute; top: 0px; left: 0px; padding: 2px 6px; background:#fefe00; color:#2d7ad1; font-weight: bold; font-size: 16px; } .topgame-title-fitur, .topgame-title-date { font-size: 12px; line-height: 14px; } .topgame-item .topgame-image img { width: 100%; } .topgame-item .topgame-data { /* width: 55%; */ padding-left: 8px; /* padding-bottom: 6px; */ color:#58595b; width: 65%; } .topgame-item:nth-child(even){ background:#efefef; } .topgame-item:nth-child(odd){ background:#fefefe; } .topgame-item .topgame-data .topgame-title-game { font-weight: bold; font-size: 14px; } .topgame-item .topgame-data .topgame-title-price { font-weight: bold; font-size: 15px; color:#3478d1; } @media (min-width: 768px) { .link-live-casino a { margin-left:0; margin-right:0; padding:0 7.5px; } .link-live-casino { margin-top: 10px; } } @media (max-width: 767px){ .link-live-casino a { width:100%; margin:0 0 15px 0; padding: 0; } } /* revamp css */ #view { z-index: 2; } #navbar-top #navbar-link-sidebar { background: transparent; color:#02c9dd; } #navbar-top #navbar-link-chat { background: transparent; position: relative; top:-1px; padding: 6px 12px 6px 6px; } #navbar-top #navbar-link-chat i { font-size: 19px; color:#1dc6d8; } .has-feedback.has-error .form-control-feedback .fa:before { content: "\f057"; } .has-feedback.has-success .form-control-feedback .fa:before { content: "\f058"; } .daftar-sidebar { text-align: center; padding: 15px 0; font-weight: bold; text-transform: uppercase; font-size: 18px; color:#09325d; background:#1ac6d9; } #sidebar { z-index: 1; background:#09305c; } #rightsidebar { z-index: 2; background:#031b3b; } .closerightsidebar { position: fixed; top: 13px; right: 15px; color: #1AC8DB; font-size: 20px; } #sidebar .sidebar ul li.has-dropdown .icon-dropdown-sidebar { position: absolute; top: 0; right: 0; font-size: 18px; padding: 11px 10px 10px 25px; } #sidebar .sidebar ul li.has-dropdown.is-opened > a { border-bottom: 1px solid #2a4e72; } #sidebar .sidebar ul li.has-dropdown.is-opened .icon-dropdown-sidebar { right: 2px; } #sidebar .panel-default { background: #09305c; } .group .nav-stacked > li { border-bottom: 1px solid #2a4e72; text-transform: uppercase; font-weight: bold; } .group .nav-stacked > li:last-child { border-bottom: 0px; } #sidebar .sidebar ul li:hover, #sidebar .sidebar ul li.active { border-color: #2a4e72; } #sidebar .sidebar ul li.active a { color: #fff; background: #041c3a; } #sidebar .sidebar ul li a:before { color:#1ac8db; } #sidebar .sidebar ul li a:hover { background-color: inherit; } .group .nav-stacked.dropdown-sidebar > li a { padding-left: 50px !important; background: #041c3a; } #navbar-top .wrapper-nav { background: #09315c url(/cms/mobile/images/Repeat-Grid.png) repeat; min-height: 50px; padding-top: 4px; box-shadow: 0px 1px 7px 1px #000; z-index: 3; position: relative; } #pageName { margin-top: 13px; color: #fff; text-transform: uppercase; display: inline-block; font-weight: bold; } #logindata { padding: 0; padding-bottom: 0px; padding-top: 0; background: #040a44; } #login-button .col-xs-6 { padding: 0px; } .btn-custom { border-radius: 0px; } #login-button .col-xs-6:nth-child(1) span { /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#1ac8db+0,059dc0+100 */ background: rgb(26,200,219); /* Old browsers */ background: -moz-linear-gradient(top, rgba(26,200,219,1) 0%, rgba(5,157,192,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(26,200,219,1) 0%,rgba(5,157,192,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(26,200,219,1) 0%,rgba(5,157,192,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1ac8db', endColorstr='#059dc0',GradientType=0 ); /* IE6-9 */ color:#fff; text-shadow: 1px 1px 1px #000; } #login-button .col-xs-6:nth-child(2) span { /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f03219+0,9b270c+100 */ background: rgb(240,50,25); /* Old browsers */ background: -moz-linear-gradient(top, rgba(240,50,25,1) 0%, rgba(155,39,12,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(240,50,25,1) 0%,rgba(155,39,12,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(240,50,25,1) 0%,rgba(155,39,12,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f03219', endColorstr='#9b270c',GradientType=0 ); /* IE6-9 */ color:#fff; text-shadow: 1px 1px 1px #000; } #login-button .col-xs-6 span { color:#09315c; padding: 10px 10px; font-weight: bold; text-transform: uppercase; font-size: 18px; } #menu-top { padding-top: 89px; } #menu-top.active { padding-top: 50px; } #navbar-top { min-height: 50px; /* padding-top: 4px; */ /* box-shadow: 0px 1px 7px 1px #000; */ } #navbar-top.sidebarisopen { box-shadow: none; } .logobnz { position: absolute; top: 11px; height: 24px; width: 176px; left: 50%; margin-left: -88px; } .logobnz.christmast { position: absolute; top: 0; height: 50px; width: 252px; left: 50%; margin-left: -126px; } #wrapper #main-content { margin-top: 0px; padding-top: 15px; } #view, #wrapper, #wrapper #main, .fixed-panel, #user-balance-wrapper #user-balance { background:#041b3a; } .bon-wrapper { margin-bottom: 20px; } .bon-wrapper:last-child { margin-bottom: 0px; } .communication-box { margin: 0 -15px 0px -15px; background: url(/cms/mobile/images/Repeat-Grid.png) repeat; padding: 5px 5px 10px 5px; } .communication-box .bon-top-wrapper { border:0; } .communication-box .bon-top-wrapper .bon-title { background:transparent; color: #1ac8db; } .bon-top-wrapper { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; border-bottom: 1px solid #0292b7; } .bon-title { color: #fff; font-weight: bold; text-transform: uppercase; background: #0292b7; padding: 2px 11px; border-top-left-radius: 4px; border-top-right-radius: 4px; font-size: 15px; } .bon-link { color:#fff; font-weight: bold; font-size: 11px; /* font-style: normal !important; */ text-transform: uppercase; } .bon-link i { font-style: normal; } .hubungin-wrapper { display: flex; justify-content: space-between; align-items: flex-start; text-align: center; padding-bottom: 10px; } .hubungin-wrapper .hubungin-item { width: 25%; } .hubungi-logo { font-size: 36px; color:#1ac8db; } .hubungi-title { text-align: center; color:#fff; line-height: 15px; } #field-birth-date select.form-control { padding: 10px 7px 10px 12px; } .wrapper-button-custom { display: flex; justify-content: center; align-items: center; margin-top: 15px; flex-flow: row wrap; } .wrapper-button-custom > div { width: 50%; padding-right: 5px; font-weight: bold; text-transform: uppercase; margin-bottom: 10px; } .wrapper-button-custom > div:last-child { padding: 0 0px; } .wrapper-button-custom > div:nth-child(2) { padding-left: 5px; padding-right: 0; } .wrapper-button-custom > div:nth-child(3) { width: 250px; } .wrapper-button-custom > div .btn { width: 100%; font-size: 18px; text-transform: uppercase; /*margin-bottom: 10px;*/ padding: 10px 0; } .wrapper-button-custom > div .btn-link { color:#1ac8db; } games-search2 .view-all { width: 100% !important; } games-search2.is-limited .view-all.nomoregamestoload { background:#5D7A93; color:#09315c; } .step-1-register .wrapper-button-custom { justify-content: space-evenly; } .btn-custom.btn-custom-green { border-radius: 6px; font-weight: bold; text-transform: uppercase; width: 165px; padding: 10px 15px; } .step-4 > div > .btn-custom.btn-custom-green, #email-veri-step .info-bnz .btn-custom.btn-custom-green, #hp-success-step .btn-custom.btn-custom-green, #email-success-step .btn-custom.btn-custom-green, #hp-veri-step .info-bnz .btn-custom.btn-custom-green{ width: auto !important; } #footer { background:#041b3a; } .footer-title { color:#19c6d9; margin-bottom: 5px; text-transform: uppercase; font-weight: bold; text-align: left; } .btn-custom.btn-custom-grey { border-radius: 6px; margin-bottom: 0; font-weight: bold; } .countdowntimer { display: flex; justify-content: space-evenly; align-items: center; padding: 10px 5px; border-radius: 8px; background:#30c3e6; color:#fff; text-transform: uppercase; text-align: center; border:1px solid #01142c; margin: 0 0 15px; position: relative; margin-top: 85px; } .countdowntimer:after { content:""; background: url(/cms/mobile/images/image-feature/img_hal_promosi-hadiah.png) no-repeat center center; width: 115px; height: 65px; position: absolute; top: -75px; left: 50%; margin-left: -57px; } .countdowntimer div > span { font-size: 24px; font-weight: bold; } .countdowntimer div > div { font-weight: bold; } .image-promosi { margin: -15px -15px 0; } #promotions-page hr { border-color:#02c9dd; } /* box-list game, promosi, link */ .box-list-wrapper { margin: 0 -1px; } .box-list-wrapper:after { content: ""; display: table; clear: both; } .box-list-wrapper .box-list-item { width: 50%; float:left; padding: 4px; position: relative; } .two-games-only .box-list-wrapper .box-list-item { padding: 0px 1px; } .one-games-only .box-list-wrapper .box-list-item { width: 100%; } .lihat-semua-box-item { padding-right: 16px !important; } .lihat-semua-box-item > div { background:#194a81 url(/cms/mobile/images/lihatsemuabg.png) no-repeat center center; background-size: cover; min-height: 100%; display: flex; justify-content: center; align-items: center; position: relative; overflow: hidden; } .lihat-semua-box-item > div:after { content:''; width: 20px; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#194a81+0,000000+100&0+0,0.53+100 */ background: -moz-linear-gradient(left, rgba(25,74,129,0) 0%, rgba(0,0,0,0.53) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(25,74,129,0) 0%,rgba(0,0,0,0.53) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(25,74,129,0) 0%,rgba(0,0,0,0.53) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00194a81', endColorstr='#87000000',GradientType=1 ); /* IE6-9 */ position: absolute; top:0px; right: -4px; min-height: 100%; height: 100%; } .lihat-semua-box-item > div > div { text-align: center; font-weight: bold; text-transform: uppercase; font-size: 12px; color:#11F2CB; } .totalgameshown { font-weight: 300; text-transform: capitalize; font-style: italic; } live-chat { font-size: 0; } .wrapper-no-wrap { margin: 0 -16px; padding: 0 16px; overflow-x: scroll; } .box-list-wrapper.nowrap { white-space: nowrap; /* overflow: hidden; overflow-x: scroll;*/ /* margin: 0 -5px; */ display: flex; } .box-list-wrapper.nowrap .box-list-item { float: none; display: inline-block; min-width: 50%; padding: 0 1px 8px; } .box-list-wrapper .lantai-info { top: 9px; } .box-list-wrapper.nowrap .lantai-info { top: 4px; } .box-list-wrapper .gamefav { top: 28px; } .box-list-wrapper.nowrap .gamefav { top: 24px; } .box-list-title { font-size: 13px; /* height: 30px; */ line-height: 15px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .box-list-title a { color:#fff; text-transform: uppercase; font-weight: bold; } .ticker-box a { color:#1ac8db; } .gametopten-title .box-list-title { position: relative; height: auto; } .gametopten-title .box-list-title > a { display: block; padding-left: 28px; height: 34px; overflow: hidden; } .gametopten-title .box-list-title > div { position: absolute; left: 0px; top: 0px; background:#1ac8db; border-radius: 4px; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-style: italic; color:#fff; } .home-winnerlist { display: block; /* margin-top: 10px; */ } .winner-list-topten { color:#ffef34; padding: 7px; font-weight: 300; border-radius: 4px; background:#5d7a93; font-size: 13px; margin-top: 10px; } .winner-price-topten { font-weight: bold; font-size: 15px; } .metadata-topten { font-size: 13px; color:#11F2CB; margin-top: 5px; font-weight: 300; } .metadata-topten b { color:#0292b7; font-weight: bold; width: 30px; font-family: 'Roboto', sans-serif; font-size: 13px; position: relative; top: 2px; } .metadata-topten span { font-family: 'PT Sans Narrow', sans-serif; font-size: 14px; position: relative; top: -2px; } .metadata-fitur, .metadata-tipe { display: flex; justify-content: flex-start; align-items: flex-start; } .metadata-fitur > div { height: 37px; overflow: hidden; } .metadata-fitur > div span:nth-child(1){ margin-left: 1px; } .metadata-fitur span:nth-child(2) { width: 4px; } .metadata-tipe span:nth-child(3) { margin-left: 1px; } .metadata-topten table { width: 100%; margin-top: 10px; } .metadata-topten table td { vertical-align: top; } .metadata-topten table td:nth-child(1){ width: 29px; font-weight: bold; font-size: 13px; } .metadata-topten table td:nth-child(2){ width: 6px; text-align: center; font-weight: bold; font-size: 13px; } .metadata-topten table td:nth-child(3){ padding-left: 3px; } .metadata-topten table tr:nth-child(2) td:nth-child(3) div { height: 37px; overflow: hidden; } .box-list-wrapper .box-list-item:last-child { margin-right: 0px; } .box-list-image { border-bottom: 1px solid #1ac8db; } .box-list-image img { width: 100%; } .box-list-content { padding: 9px 8px 9px 4px; background:#09315c; white-space: normal; } .promosi-index .box-list-title { /* height: 32px; */ line-height: 15px; } .img-fullwidth { width: 100%; } .floating-livechat { position: fixed; bottom: 60px; z-index: 8000; right: 11px; width: 60px; height: 60px; border-radius: 50%; background: rgb(31, 197, 255); opacity: 0.8; font-size: 13px; display: flex; justify-content: center; align-items: center; padding-top: 21px; color: #fff; text-decoration: none; outline: 0; } .livechatpopup { text-align: center; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#04a6be+0,025966+100 */ background: rgb(4,166,190); /* Old browsers */ background: -moz-linear-gradient(top, rgba(4,166,190,1) 0%, rgba(2,89,102,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(4,166,190,1) 0%,rgba(2,89,102,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(4,166,190,1) 0%,rgba(2,89,102,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#04a6be', endColorstr='#025966',GradientType=0 ); /* IE6-9 */ color:#fff; font-size: 16px; padding: 5px; position: fixed; bottom: 0px; left:0px; width: 100%; z-index:9000; opacity: 0.6; display: none; } .livechatpopup.active { display: block; } .livechatpopup > div { display: inline-block; } .livechatpopup i { margin-right: 2px; font-size: 20px; } .floating-livechat a { color:#fff; text-shadow: 1px 1px 1px #157ba2; } .floating-livechat.active { opacity: 1; } .floating-livechat a:after { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f086"; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; position: absolute; left: 50%; top: 1px; font-size: 25px; color: #fff; margin-left: -13px; text-shadow: 1px 1px 1px #157ba2; } #rightsidebarmenu { padding: 15px; padding-bottom: 50px; } #rightsidebarmenu:after, .box-rightsidebar:after, user-balance:after { content: ""; display: table; clear: both; } #rightsidebarmenu deposit-form notices, #rightsidebarmenu deposit-form form, #rightsidebarmenu deposit-form .accountbank-details > p { display: none; } #rightsidebarmenu deposit-form .accountbank-details { margin-bottom: 0px; } #rightsidebarmenu deposit-form .title-deposit-form { margin-top: 10px; } #my-details-page { padding-bottom: 10px; } #navbar-user-detail { padding: 0px; } #navbar-user-detail #totalamount-navbar { float: none; } .box-rightsidebar { padding-bottom: 5px; margin-bottom: 10px; } .top-rightsidebar { padding-bottom: 0px;margin: -15px -15px 15px -15px;padding: 15px; background:#09305c; } .rightmenu-wrapper { margin: -5px; } .rightmenu-item { float:left; width: 33.3333%; padding: 5px; font-size: 12px; font-weight: bold; } .rightmenu-item > a { display: block; background:#09305c; text-align: center; padding: 10px 0; color:#fff; } .signoutwrapper { position: fixed; right: 15px; bottom: 5px; } .signoutwrapper a { color:#fff; text-align: center; font-size: 12px; } .signoutwrapper a i { color:#30c3e6; display: block; font-size: 24px; margin-bottom: 2px; } .box-rightsidebar:last-child { border: 0; margin-bottom: 0px; } .link-rightsidebar { display: flex; justify-content: space-between; align-items: center; } .link-rightsidebar .icon-rightsidebar img { height: 40px; } .link-rightsidebar-item { padding: 0 3px; text-align: center; font-size: 13px; color:#fff; } .new-user-balance { color:#fff; margin-top: 15px; } .saldotitle { border-bottom: 2px solid #1ac8db; padding-bottom: 2px; font-weight: bold; font-size: 16px; position: relative; text-transform: uppercase; } /*.saldotitle:after { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f054"; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; position: absolute; right: 0px; }*/ /*.saldotitle.active:after { content: "\f077"; }*/ .saldo-detail table { width: 100%; } .saldo-detail table td { padding: 5px; font-size: 13px; } .saldo-detail table td:nth-child(2) { font-weight: bold; text-align: right; } .saldo-detail table td:nth-child(3) { font-size: 18px; font-weight: 300; text-align: right; } .saldo-detail { height: 100%; overflow: hidden; } .saldo-detail.active { height: 100%; } #rightsidebar deposit-form h1, #rightsidebar deposit-form .payment-ann { display: none; } #rightsidebar deposit-form .wrapper-button-custom > div { width: 100%; min-width: 100%; } #rightsidebar deposit-form .wrapper-button-custom { margin-top: 0px; margin-bottom: 0px; } #rightsidebar deposit-form .wrapper-button-custom > div { margin-bottom: 5px; } #rightsidebar deposit-form notices { margin-bottom: 5px; } #rightsidebar deposit-form .accountbank-details { background:#5d7a93; } #rightsidebar deposit-form .accountbank-details p { color:#ffef34; font-weight: bold; } deposit-form .title-deposit-form { color:#fff; background: #0292b7; margin-bottom: 0; padding: 4px; font-size: 17px; font-weight: bold; text-align: center; } /* dana page */ #dana-page .new-user-balance { margin-top: 0px; } .navdana { margin-top: 10px; display: flex; justify-content: space-evenly; align-items: center; border-bottom: 2px solid #059dc0; margin: 10px -5px 0; } .navdana > div { margin-right: 2px; width: 100%; /* margin: 0 -5px; */ } .navdana > div:last-child { margin-right: 0px; } .navdana a { color: #fff; padding: 0px 5px; text-align: center; display: inline-block; width: 100%; background: #5d7a93; border-top-left-radius: 4px; border-top-right-radius: 4px; font-weight: bold; height: 40px; line-height: 17px; display: flex; justify-content: center; align-items: center; } .navdana a.active, .navdana a:hover { background:#059dc0; text-decoration: none; } .danatab-wrapper { padding: 10px; } /* transfer dana olahraga 2 */ .wallet1,.wallet2 { } .wallet2 { margin-bottom: 15px; } .custom-field { margin-bottom: 0px; display: block; position:relative; } transfer-form .alert-info .close { display: none; } #transfer .control-label { font-size: 15px; } .switch-wallet-wrapper { text-align: center; display: flex; justify-content: center; padding: 7px 0px; } .switch-wallet-wrapper > div { display:inline-block; background: url("/cms/mobile/images/new-icon/icon-transferarrow.png") no-repeat center center; background-size: contain; width: 54px; height: 54px; position: relative; cursor: pointer; } .switch-wallet-wrapper > div:active { opacity: 0.7; } /* .switch-wallet-wrapper > div:after, .switch-wallet-wrapper > div:before { content: ""; width: 3px; height: 15px; position:absolute; top:-15px; left: 50%; margin-left: -1px; background:#090d5f; }*/ .switch-wallet-wrapper > div:before { top: auto; bottom: -15px; } .withdrawall-wrapper { margin-bottom: 20px; } .withdrawall-wrapper > label { position:relative; top:-1px; font-size: 15px; } .utamaBal , .olahragaBal { font-size: 18px; font-weight:bold; color:#e8d316; } .balance-wallet1,.balance-wallet2 { padding-left: 5px; } .transfer-button-iframe { position: absolute; right: 5px; top: 5px; background: #a16700; color: #490500; padding: 5px 8px 4px; border-radius: 4px; box-shadow: 0px 3px 5px #444; display: inline-block; background: #1ac8db; color: #09315c; } .olahraga1-state #gobackhistory .fa-arrow-left:before, .olahraga2-state #gobackhistory .fa-arrow-left:before, .lott #gobackhistory .fa-arrow-left:before{ content: "\f015"; } .olahraga1-state .wrapper-nav, .olahraga2-state .wrapper-nav, .lott-state .wrapper-nav, .olahraga1-state .seotext, .olahraga2-state .seotext, .lott-state .seotext{ display: none; } .olahraga1-state #betting-page game-window, .olahraga2-state #betting-page game-window, .lott-state #betting-page game-window{ top: 40px !important; z-index: 1; } .olahraga1-state #navbar-top, .olahraga2-state #navbar-top, .lott-state #navbar-top{ min-height: 40px; } .olahraga1-state #menu-top, .olahraga2-state #menu-top, .lott-state #menu-top{ padding-top: 40px; } /* Loyalty page */ .postlogin-box {} .postlogin-title { border-bottom: 2px solid #1ac8db; font-weight: bold; font-size: 16px; color:#fff; position: relative; text-transform: uppercase; } .postlogin-content:after { content: ""; display: table; clear: both; } .loyalty-details > tbody > tr:nth-child(odd) > td, .loyalty-details > tbody > tr:nth-child(odd) > th { background: transparent; } .loyalty-wrapper:after { content: ""; display: table; clear: both; } .loyalty-detail-item { float:left; width: 50%; padding: 6px 5px; } .loyalty-detail-item-label { font-size: 12px; } .loyalty-detail-item-value.its-number { font-size: 20px; font-weight: 300; } my-loyalty-progress { margin-top: 20px; display: block; } .loyalty-desc table { width: 100%; border: 1px solid #09315c; } .loyalty-desc table tr { border: 1px solid #09315c; } .loyalty-desc table tr:last-child { border: 0; } .loyalty-desc table th { padding: 6px 11px; background:#09315c; font-weight: bold; } .loyalty-desc table th:nth-child(2) { text-align: right; } .loyalty-desc table td { padding: 10px; } .loyalty-desc table td:nth-child(1) { font-size: 18px; font-weight: bold; } .loyalty-desc table td:nth-child(2) { font-weight: 300; font-size: 18px; text-align: right; } /* Akun Page */ .nickname-akun { font-size: 20px; text-transform: capitalize; } transfer-form #field-wallet1 .custom-materialize, transfer-form #field-wallet2 .custom-materialize { margin-bottom: 5px; } .dashboard-link-wrapper { margin-top: 15px; } .dashboard-link-wrapper:after { content: ""; display: table; clear: both; } .dashboard-link-item { float:left; width: 50%; padding: 7.5px; color:#fff; font-weight: bold; } .dashboard-link-item:hover, .dashboard-link-item:hover { text-decoration: none; } .dashboard-link-item > div { background:#09315c; padding: 40px; text-align: center; } /* Bank detail page */ #my-payment-details-page .field { float:left; width: 50%; } #my-payment-details-page .field.row { margin: 0px; } #my-payment-details-page .field .custom-materialize { padding: 0px; } #my-payment-details-page .field .custom-materialize .form-control-feedback { right: 0px; } #my-payment-details-page .field .custom-materialize .form-control-feedback1 { display: none; } #my-payment-details-page .field .custom-materialize label.control-label { left: 0px; color:#fff; } #my-payment-details-page .field .custom-materialize input { background: transparent; padding: 0px 0; border: 0px; color: #fff; } #my-payment-details-page .field .custom-materialize .form-control-feedback i { font-size: 17px; top: -5px; } #my-payment-details-page form { margin-top: 15px; } /* Transaction History Page */ .custom-tab-transaction { margin: 0px; padding: 0px; display: flex; align-items: center; justify-content: flex-start; border-bottom: 2px solid #059dc0; white-space: nowrap; overflow-x: auto; width: 100%; } .custom-tab-transaction > div { position: relative; margin-right: 2px; width: 100%; } .custom-tab-transaction > div:last-child {margin-right: 0px;} .custom-tab-transaction > div label { position: relative; padding: 10px 5px; background:#5d7a93; border-top-left-radius: 3px; border-top-right-radius: 3px; width: 100%; color:#fff; text-align: center; text-transform: capitalize; font-weight: normal; margin-bottom: 0px; } .custom-tab-transaction > div.active label { background:#059dc0; } .custom-tab-transaction > div input { position: absolute; left: 50%; top: 50%; width: 0px; height: 0px; } .datepicker-dropdown { color:#000; } .notes-transaksi { margin: 15px 0; font-size: 13px; font-weight: 300; padding: 0px 5px; } #my-transactions-form-filters { display: flex; justify-content: space-between; align-items: flex-start; flex-flow: row wrap; } #my-transactions-form-filters .field { padding: 0px 5px; } #my-transactions-form-filters .field.row { margin: 0px; width: 50%; } #my-transactions-form-filters .field .custom-materialize, #my-transactions-form-filters .field .custom-select { padding: 0px; } #my-transactions-form-filters .field .custom-materialize { margin-top: 19px; } #my-transactions-form-filters .field .custom-materialize .form-control-feedback, #my-transactions-form-filters .field .custom-select .form-control-feedback { right: 0px; } #my-transactions-form-filters .field .custom-materialize .form-control-feedback1, #my-transactions-form-filters .field .custom-materialize .form-control-feedback, #my-transactions-form-filters .field .custom-select .form-control-feedback1, #my-transactions-form-filters .field .custom-select .form-control-feedback { display: none; } #my-transactions-form-filters .field .custom-materialize label.control-label, #my-transactions-form-filters .field .custom-select-label{ left: 0px; color:#fff; padding: 0 } #my-transactions-form-filters .field .custom-materialize input, #my-transactions-form-filters .field .custom-select select { background: transparent; padding: 0px 0; border: 0px; border-radius: 0px; font-size: 13px; color: #fff; border-bottom: 1px solid #059dc0; padding-bottom: 3px; } #my-transactions-form-filters .field .custom-materialize .form-control-feedback i, #my-transactions-form-filters .field .custom-select .form-control-feedback i{ font-size: 17px; top: -5px; } #my-transactions-form-filters form { margin-top: 15px; } .custom-materialize .date-icon { position: absolute; right: 2px; top: 0; } #my-transactions-form-accordion { color:#000; margin-top: 0px; } #my-transactions-form-filters { margin-bottom: 15px; } #my-transactions-form-pagination li a { background:#5d7a93; color: #fff; } #my-transactions-form-pagination li.active a { background:#059dc0; } .laporan-result-wrapper { margin-bottom: 15px; } .laporan-result-item { padding: 15px; font-weight: 300; background:#07315d; border-radius: 4px; margin-bottom: 15px; } .laporan-result-item:last-child { margin-bottom: 0px; } .laporan-result-item:nth-child(even) { background:#194a81; } .laporan-result-item .postlogin-title { font-size: 15px; font-weight: 300; display: flex; justify-content: space-between; } .laporan-result-item .postlogin-content { display: flex; justify-content: space-between; align-items: flex-start; flex-flow: row wrap; } .laporan-detail-item { width: 50%; margin-top: 10px; padding-right: 10px; } .laporan-detail-item > div:nth-child(1){ font-weight: bold; font-size: 13px; } .laporan-detail-item > div:nth-child(2){ font-size: 15px; } .laporan-detail-content { position: relative; } .laporan-result-item .postlogin-title .btn { width: auto; min-width: auto; background: #059dc0; color: #041b3a; font-size: 11px !important; padding: 0 10px; border-radius: 5px; height: 16px; line-height: 15px; } .laporan-detail-content i { position:absolute; right: 0px; font-size: 17px; top: -1px; color:#02c9dd; } .laporan-detail-content i:hover, .laporan-detail-content i:focus { opacity: 0.7; } /* verified status component */ .verification-page notices { padding: 0 15px; } .verification-status-include { padding: 15px; } .verifikasi-status-box { display: flex; justify-content: flex-start; align-items: center; padding: 0px 0 10px; } .verifikasi-status-box > div { margin-right: 15px; } .verifikasi-status-box > div:nth-child(1) { margin-right: 24px; position: relative; padding-right: 43px; font-size: 30px; } .verifikasi-status-box > div:nth-child(1):after { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f3ed"; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; position: absolute; right: 0px; font-size: 36px; top:-6px; } .verifikasi-status-box > div:last-child { margin-right: 0; } .status-verified-40 { color:#ff0000; } .status-verified-60 { color:#ffa515; } .status-verified-80 { color:#ffef34; } .status-verified-100 { color:#11e352; } .profile-veri-stat { background:url(/cms/mobile/images/new-icon/icon-profile-red.png) no-repeat center center; } .profile-veri-stat.verified { background:url(/cms/mobile/images/new-icon/Icon-profile-green.png) no-repeat center center; } .bank-veri-stat { background:url(/cms/mobile/images/new-icon/Icon-banking-red.png) no-repeat center center; } .bank-veri-stat.verified { background:url(/cms/mobile/images/new-icon/Icon-Banking-green.png) no-repeat center center; } .email-veri-stat { background:url(/cms/mobile/images/new-icon/Icon-email-red.png) no-repeat center center; } .email-veri-stat.verified { background:url(/cms/mobile/images/new-icon/Icon-Email-green.png) no-repeat center center; } .phone-veri-stat { background:url(/cms/mobile/images/new-icon/Icon-handphone-red.png) no-repeat center center; } .phone-veri-stat.verified { background:url(/cms/mobile/images/new-icon/Icon-Handphone-green.png) no-repeat center center; } .iconveri { width: 24px; height: 24px; background-size: cover !important; } #banking-edit-step, #hp-email-step, #all-success-step { background:#09315c; min-height: 73.6vh; } .home-icon { position: fixed; right: 10px; top: 15px; opacity: 0.7; z-index: 1000000000000; } .saldo-detail a { position: relative !important; color:#fff !important; background: none !important; top: 0px !important; height: auto !important; width: 138px !important; overflow: hidden; display: block; text-overflow: ellipsis; } .freespin-table .saldo-detail table td:nth-child(2){ text-align: right; font-weight: 300; font-size: 18px; } .freespin-table .saldo-detail table td:nth-child(3) { width: 50px; white-space: nowrap; font-size: 13px; } .showhidefreespin { padding-top: 0px; } .labeltextfreespin { font-size: 12px; color:#17bad0; display: none; } .arrow-free { position: relative; top:-3px; } .freespin-table .saldo-detail { max-height: 105px; overflow: hidden; } .freespin-table.shown .saldo-detail { max-height: 100%; overflow: visible; } .freespin-table:not(.shown) .showhidefreespin > div:nth-child(1), .freespin-table:not(.shown) .showhidefreespin > div:nth-child(2) { display: block; } .freespin-table.shown .showhidefreespin > div:nth-child(3), .freespin-table.shown .showhidefreespin > div:nth-child(4) { display: block; } /*#home-icon:after { content: ""; position: absolute; background: url(/cms/mobile/images/icon-drag.gif) no-repeat; opacity: 0.6; width: 98px; height: 60px; top: 18px; background-size: contain; display: none; right: 0; }*/ #home-icon:after { content: "\f25a"; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; opacity: 0.7; font-size: 34px; top: 18px; background-size: contain; display: none; right: 3px; -webkit-animation: ease-in infinite; -webkit-animation-name: run; -webkit-animation-duration: 2.4s; } @-webkit-keyframes run { 0% { right: 3px; } 50% { right: 50px; } 51% { top: 15px; right: 3px; } 100% { top: 60px; right: 3px; } } #home-icon.removed:after { display: block; } /* Announcement Ticker */ /*@-webkit-keyframes ticker { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); visibility: visible; } 100% { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes ticker { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); visibility: visible; } 100% { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .ticker-wrap { width: 100%; overflow: hidden; padding-left: 100%; box-sizing: content-box; counter-reset: section; } .ticker-wrap .ticker { display: inline-block; white-space: nowrap; padding-right: 100%; box-sizing: content-box; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-name: ticker; animation-name: ticker; -webkit-animation-duration: 60s; animation-duration: 60s; margin-bottom: 0px; padding-left: 10px; } .ticker-wrap li { display: inline-block; padding: 0 2rem; font-size: 14px; color: white; } .ticker-wrap li:before { counter-increment: section; content: counter(section)". " }*/ .ticker-wrap { width: 100%; overflow: hidden; counter-reset: section; position: relative; box-sizing: content-box; } .ticker-wrap .ticker { display: none; white-space: nowrap; box-sizing: content-box; margin-bottom: 0px; padding-left: 10px; position: relative; } .ticker-wrap li { display: inline-block; padding: 0 2rem; font-size: 14px; color: white; } .ticker-wrap li:before { counter-increment: section; content: counter(section)". " } .announcement-ticker { padding: 10px; } .ticker-box { padding: 5px; border-radius: 8px; border: 1px solid #1ac8db; display: flex; align-items: center; justify-content: flex-start; overflow: hidden; } .ticker-box > div { width: 100%; } .ticker-box > div p { margin-bottom: 0px; } .ticker-icon { position: relative; top: -1px; } .ticker-icon img { width: 26px !important; height: 26px; } /* Announcement modal */ .announcementpopupwindowclass { } .announcementpopupwindowclass .modal-dialog { padding: 15px; display: flex; align-items: center; } .announcementpopupwindowclass .modal-content { background:#09315c; border-radius: 0; border: 0; } .ann-title-new { display: flex; align-items: center; justify-content: flex-start; padding-bottom: 10px; border-bottom: 2px solid #1ac8db; margin: 0px -20px; padding: 0 15px 10px; } .ann-title-new > div { text-transform: uppercase; font-weight: bold; font-size: 16px; } #announcement-modal-info h3 { display: none; } #announcement-modal-info { max-height: 70vh; overflow: scroll; } #announcement-modal-info ol { padding: 0 0 0 20px; } /* Edit profile page */ #my-details-page user-balance { float: none; } #my-details-page .verification-status-include { margin-top: 15px; padding: 0px; } #my-details-page .saldo-detail table td { padding: 5px 0; } #my-details-page .postlogin-box .postlogin-content { margin-top: 10px; } .static-item-wrapper { display: flex; justify-content: space-between; align-items: flex-start; font-size: 14px; flex-flow: row wrap; } .static-item { width: 50%; margin-bottom: 15px; } .static-item-title { font-weight: normal; } .static-item-content { position: relative; font-weight: 300; } .static-item-content a i { position: absolute; right: 10px; color:#5d7a93; font-size: 16px; top:0px; } .static-item-content a i.fa-check-circle{ color:#74b400; } .static-item-content a i.fa-times-circle{ color:#f13856; } .static-item-content a i:hover { opacity: 0.7; } .static-item.full-static-item { width: 100%; } .changepassprofile .static-item-content, .editprofiledata .static-item-content { margin: 0 -15px; padding: 15px; background:#09315c; } .ubahprofil { position: absolute; right: 0px; font-size: 13px; font-weight: 300; color:#1ac8db; text-transform: capitalize; } .changehpemailprofile { margin-bottom: 7px; position: relative; top: -6px; font-size: 13px; } .changehpemailprofile a { color:#1ac8db; } .custom-checkbox { margin-bottom: 10px; } /*[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak, .ng-hide:not(.ng-hide-animate) { display: block !important; }*/ /* New game page */ .game-toolbox { /* display: flex; */ /* align-items: center; */ /* justify-content: space-around; */ padding: 10px; background:url(/cms/mobile/images/Repeat-Grid.png) repeat; padding-right: 100px; position: relative; box-shadow: 0px 1px 7px 0px #000; } .game-toolbox > div { text-align: center; } .toolbox-icon { display: inline-block; border-radius: 4px; padding: 7px 7px; background: #5d7a93; color:#041b3a; width: 44%; margin-right: 10px; } .toolbox-icon:last-child { margin-right: 0px; } .grid-list-view { background: #1dc6d8; color: #fff; } .game-toolbox > div:nth-child(1) { width: 100%; /* padding-right: 10px; */ } .game-toolbox > div:nth-child(2) { width: 80px; text-align: center; display: flex; align-items: center; justify-content: flex-start; position: absolute; right: 10px; top: 10px; } .search-toolbox { color:#000; } .search-toolbox input { background:#b7b8b8; border: 0; } .search-toolbox .input-group-addon { background:#5d7a93; border: 0; } .search-toolbox .input-group-addon i { color:#041b3a; } .games-result-group { padding: 15px; } .games-result-group .box-list-image { position: relative; } .games-result-group .box-list-title { overflow: hidden; } .selectgamegroupwrapper { height: 31px; } .selectgamegroup { display: flex; align-items: center; justify-content: center; margin: 15px 0 5px; } .selectgamegroup.affix { top: 49px; width: 100%; box-shadow: 0px 5px 7px 0px #000; text-align: center; z-index: 16; margin-top: 0px; padding: 5px 0; background: #041b3a; } .selectgamegroup select { border: 0px; border-bottom: 1px solid #b7b8b8; font-weight: bold; color:#fff; background: #041b3a; padding: 5px 0; text-transform: uppercase; min-width: 100%; -webkit-appearance: none; -moz-appearance: none; } .selectgamegroup select:-ms-expand { display: none; } .selectgamegroup > div { position: relative; min-width: 50%; } .selectgamegroup > div:before { content:""; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #fff; position: absolute; right: 5px; top: 50%; margin-top: -2.5px; } .games-result-group.viewtype2 { margin-bottom: 47px; } /* ads-index */ .ads-index { padding: 10px 0; border:2px solid #0292b7; border-left: 0px; border-right: 0px; } .ads-index .bon-content img { width: 100%; height: auto; } .ads-index .bon-content { position: relative; } /* quick fix after deployment */ preloader.default,.preloaderbanner { position: fixed; top: 0; bottom: 0; right: 0; left: 0; z-index: 9000; background: url(/cms/mobile/images/new-icon/preloader.gif) no-repeat center center #041b3a; visibility: hidden; pointer-events: none; background-size: 64px 64px; } .preloaderbanner.showloader { visibility: visible; } #sidebar .sidebar li#home a:before { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f015"; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; font-size: 25px; } #sidebar.opened { height: 100vh; } .close { text-shadow: none; } .promosi-body { margin-top: 10px; } .is-filtered { background:#11e352; } my-limits-form .custom-select .form-control-feedback { display: none; } my-limits-form .has-feedback.has-success .custom-select .form-control-feedback1, my-limits-form .has-feedback.has-error .custom-select .form-control-feedback1{ right: 29px !important; } .navigation-back-wrapper { position: relative; text-align: center; background: #b7b8b8; padding: 11px 0px 3px; text-transform: uppercase; color: #0e3660; font-weight: bold; z-index: 1; } .navigation-back-wrapper .page-title-top { display: inline-block; width: 100%; text-align: center; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .navigation-back-wrapper.active #gobackhistory { font-size: 21px; position: fixed; left: 48px; top: 11px; z-index: 9999; color: #02c9dd; } .navigation-back-wrapper.active { position: absolute; text-align: center; background: transparent; padding: 10px 0px; text-transform: uppercase; color: #fff; font-weight: bold; /* width: 100%; */ top: 6px; z-index: 3; width: 60%; margin: 0 auto; left: 50%; margin-left: -30%; } #gobackhistory { font-size: 20px; position: absolute; left: 12px; top: 7px; z-index: 12; color: #07315d; } .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets { bottom: 0px; left: 0; width: 100%; } .announcement-wrapper a { color:#1ac8db; } /* .flexslider */ .flexslider { margin: 0; border: 0; background: #09315c; } .flex-control-nav { bottom: -3px; } .flex-control-paging li a { background: #ddd; opacity: 0.8; } .flex-control-paging li a.flex-active { background:#fff; opacity:1; } .flex-direction-nav a { height: 44px; margin-top: -23px; } .flex-direction-nav .flex-next, .flex-direction-nav .flex-prev{ opacity: 0.6; } .flex-direction-nav a:before { color:rgba(255, 255, 255, 0.8); } .flex-direction-nav a.flex-next:before { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f054"; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; font-size: 34px; } .flex-direction-nav a.flex-prev:before { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f053"; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; font-size: 34px; } .notready { visibility: hidden; } /* Promosi bisabuka */ #field-registration-campaigns { display: none; } /* Halaman promosi */ .promosi-list .promostatus a { width: 100%; } .promosi-list { margin-bottom: 10px; } .filter-promosi { display: flex; justify-content: space-evenly; align-items: flex-end; border-bottom: 2px solid #059dc0; } .filter-promosi > div { margin-right: 2px; width: 100%; } .filter-promosi > div:last-child { margin-right: 0px; } .filter-promosi > div.islast { margin-right: 0px; } .filter-promosi > div > div { padding: 10px 8px; background:#5d7a93; width: 100%; font-size: 13px; font-weight:bold; text-align: center; border-top-left-radius: 4px; border-top-right-radius: 4px; } .filter-promosi > div > div.active { background:#059dc0; } .promo-intro p { margin-bottom: 20px; } .promo-top-title { color:#009ec2; margin-bottom: 15px; font-size: 18px; font-weight: bold; } .promosi-login-register-button { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 2px solid #02c9dd; } .promosi-login-register-button > div { padding: 0 10px !important; } .promosi-login-register-button > div span { border-radius: 4px; } .pemisahpromosi { margin: 0; bottom: -31px; position: relative; border-width: 2px; border-color: #02c9dd; } .promosi-list .promo-item:last-child .pemisahpromosi { display: none; } .flexslider .slides>li { position: relative; } .body-promo { padding: 10px 0px 15px 0px !important; } /* alert */ .alert-warning { color:#5d4933; } .alert-success { color:#0b7c08; } #my-loyalty-page { padding-bottom: 15px; } /* Maintenance new */ .maintenance-body { margin-top: 15px; font-size: 16px; } .maintenance-body-title { margin-bottom: 5px; font-weight: bold; font-size: 18px; } .maintenance-body-content { margin-bottom: 10px; } .img-maintenance { margin: 30px 0; text-align: center; } .img-maintenance img { display: inline-block; max-width: 80%; } #main .maintenance-wrapper { padding: 20px; } .maintenancepopupwindowclass .modal-content { background:#033359; } .maintenance-overlay { position: absolute; top:0px; left: 0px; width: 100%; height: 100%; z-index: 16; padding: 0px 1px 8px 1px; } .gridview .maintenance-overlay { padding: 4px; } .winner-list-wrapper-outer { position: relative; z-index: 17; } .maintenance-overlay > div { width: 100%; height: 100%; background:rgba(0,0,0,0.7); border: 1px solid #18bdd1; display: flex; justify-content: center; align-items: center; flex-flow: row wrap; } .maintenance-overlay > div > div { white-space: normal; padding: 0 5px; text-align: center; font-weight: bold; text-transform: uppercase; } /* daftar-permainan */ .datarPermainan-state .game-toolbox > div:nth-child(2) { display: none; } .datarPermainan-state .game-toolbox { padding-right: 10px; } .datarPermainan-state .gameListTools { padding: 10px; text-align: center; color:#1ac8db; } .datarPermainan-state .gameListTools .input-group { width: 240px; margin: 0 auto; } .datarPermainan-state .tabgameList { padding: 20px 15px 0px 15px; background:#000; text-align: center; border-bottom: 2px solid #0292b7; } .datarPermainan-state .tabgameList > div { display: inline-block; text-align: center; width: 120px; padding: 12px 8px 10px; border-top-left-radius: 5px; border-top-right-radius: 5px; color:#fff; background:#5c7a92; font-weight: bold; margin: 0 3px; } .datarPermainan-state .tabgameList > div.active { background: #0292b7; } .maintenance-overlay > div > div > img { margin-bottom: 50px; } /* new related article on promosi */ .new-related-article ul { margin: 0; padding: 0; padding-left: 15px; } .new-related-article ul li { margin-bottom: 10px; } .new-related-article ul li:last-child { margin-bottom: 0; } .new-related-article ul li a { font-size: 16px; } .promotionsDetail-state #wrapper { padding-bottom: 150px; } @media (min-width: 480px) { .box-list-wrapper.nowrap .box-list-item { min-width: 33.3333%; } .box-list-wrapper .box-list-item { width: 33.3333%; } .two-games-only .box-lisgrunt severt-wrapper .box-list-item { width: 50%; } } @media (min-width: 959px) { .box-list-wrapper.nowrap .box-list-item { min-width: 25%; } .box-list-wrapper .box-list-item { width: 25%; } .two-games-only .box-list-wrapper .box-list-item { width: 50%; } } @media (min-width: 1025px) { .box-list-wrapper.nowrap .box-list-item { min-width: 20%; } .box-list-wrapper .box-list-item { width: 20%; } .two-games-only .box-list-wrapper .box-list-item { width: 50%; } } .form-group .bootstrap-select { background: transparent; border-bottom: 1px solid #059dc0 !important; border-radius: 0; } .bs-searchbox .form-control { border-color: #059dc0 !important; } .bootstrap-select > .dropdown-toggle.bs-placeholder, .bootstrap-select > .dropdown-toggle.bs-placeholder:hover { background-color: transparent; border-color: transparent; border-radius: 0; } .dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus { color:#fff; } .bootstrap-select > .dropdown-toggle { background: transparent !important; padding: 1px 3px; color: #fff !important; padding-right: 5px; border-radius: 0; outline: 0; } .bootstrap-select > .dropdown-toggle:focus { outline: 0 !important; border: 0 !important; } .bootstrap-select .dropdown-toggle .caret { right: 5px; } #main-content { padding: 0 !important; } .lantai-info { border: 0px; right: 0px; top: 0px; border-radius: 0; background: #00c4ff; padding: 5px 5px; height: 25px; } .box-list-wrapper.nowrap .lantai-info { top: 0px; } .provider-info { position: absolute; top: 25px; right: 0px; } .provider-info img { width: 25px; height: auto; } .vpn-thumb-icon { top: 50px; right: 0px; } .vpn-thumb-icon { width: 25px; height: 25px; background: url(/cms/images/provider/icn-vpn.png) no-repeat center center; } .box-list-wrapper.nowrap .gamefav { top: 77px; right: 2px; } .gamefav.novpn { top: 51px !important; } .gamefav.nolantai { top: 9px !important; } /* hapus ini kl mau live onebook */ /*#dana ul li:nth-child(3) { display: none; } #olahraga ul li:nth-child(1) { display: none; } .navdana div:nth-child(3) { display: none; } .navdana div:nth-child(2) { margin-right: 0; } .saldo-detail tbody tr:nth-child(3) { display: none; } .custom-tab-transaction > div:nth-child(5) { display: none; } .custom-tab-transaction > div:nth-child(4) { margin-right: 0; } .rightmenu-wrapper .rightmenu-item:nth-child(6) { display: none; }*/ /* CNY 2021 */ /*#login-button .col-xs-6:nth-child(1) span, .loginpopupwindowclass .buttons-area button, .livechatpopup, #rightsidebarmenu deposit-form .title-deposit-form, .games-result-group.viewtype2 .btn-custom.btn-custom-green, .game-popup-button .btn-custom-green, .casino-box .btn-custom-green, #bt-page .btn-custom-green, .download-button .dl-button, .promosi-list .promostatus a, .submit-reset.wrapper-button-custom > div .btn { !* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#fadc22+0,dc9310+100 *! background: rgb(250,220,34); !* Old browsers *! background: -moz-linear-gradient(top, rgba(250,220,34,1) 0%, rgba(220,147,16,1) 100%); !* FF3.6-15 *! background: -webkit-linear-gradient(top, rgba(250,220,34,1) 0%,rgba(220,147,16,1) 100%); !* Chrome10-25,Safari5.1-6 *! background: linear-gradient(to bottom, rgba(250,220,34,1) 0%,rgba(220,147,16,1) 100%); !* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ *! filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fadc22', endColorstr='#dc9310',GradientType=0 ); !* IE6-9 *! color:#fff; } #login-button .col-xs-6:nth-child(2) span, .daftar-sidebar { color:#fff; !* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#9c0000+0,de0000+100 *! background: rgb(156,0,0); !* Old browsers *! background: -moz-linear-gradient(top, rgba(156,0,0,1) 0%, rgba(222,0,0,1) 100%); !* FF3.6-15 *! background: -webkit-linear-gradient(top, rgba(156,0,0,1) 0%,rgba(222,0,0,1) 100%); !* Chrome10-25,Safari5.1-6 *! background: linear-gradient(to bottom, rgba(156,0,0,1) 0%,rgba(222,0,0,1) 100%); !* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ *! filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9c0000', endColorstr='#de0000',GradientType=0 ); !* IE6-9 *! } .filter-wrapper { background:#430000; } .game-popup-button .btn-custom-grey { !* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#a46807+0,d3911f+100 *! background: rgb(164,104,7); !* Old browsers *! background: -moz-linear-gradient(top, rgba(164,104,7,1) 0%, rgba(211,145,31,1) 100%); !* FF3.6-15 *! background: -webkit-linear-gradient(top, rgba(164,104,7,1) 0%,rgba(211,145,31,1) 100%); !* Chrome10-25,Safari5.1-6 *! background: linear-gradient(to bottom, rgba(164,104,7,1) 0%,rgba(211,145,31,1) 100%); !* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ *! filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a46807', endColorstr='#d3911f',GradientType=0 ); !* IE6-9 *! color:#9c4c01; } body, #view, .home-state, .home-state #main, .home-state #footer, .home-state #wrapper, .home-state #wrapper #main, .games-state, .games-state #main, .games-state #footer, .games-state #wrapper, .games-state #wrapper #main, .casino-state, .casino-state #main, .casino-state #footer, .casino-state #wrapper, .casino-state #wrapper #main, .olahraga-state, .olahraga-state #main, .olahraga-state #footer, .olahraga-state #wrapper, .olahraga-state #wrapper #main, .pusatdownload-state #footer, .bola-tangkas-state #footer, .promotions-state #footer { background:#430000 !important; } .home-state #footer, .home-state .footer-title, .games-state #footer, .games-state .footer-title, .casino-state #footer, .casino-state .footer-title, .olahraga-state #footer, .olahraga-state .footer-title, .pusatdownload-state #footer, .pusatdownload-state .footer-title, .bola-tangkas-state #footer, .bola-tangkas-state .footer-title, .promotions-state #footer, .promotions-state .footer-title{ color:#e5b100; } .home-state #footer, .games-state #footer, .casino-state #footer, .olahraga-state #footer, .pusatdownload-state #footer, .bola-tangkas-state #footer, .promotions-state #footer{ border-top: 2px solid #e5b100; } #sidebar .panel-default { background:#430000; } #socialmedia, #sidebar .sidebar #paymentmethod { background:#000; } .bon-title, .custom-winnerlist{ !* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#9c0000+0,de0000+100 *! background: rgb(156,0,0); !* Old browsers *! background: -moz-linear-gradient(top, rgba(156,0,0,1) 0%, rgba(222,0,0,1) 100%); !* FF3.6-15 *! background: -webkit-linear-gradient(top, rgba(156,0,0,1) 0%,rgba(222,0,0,1) 100%); !* Chrome10-25,Safari5.1-6 *! background: linear-gradient(to bottom, rgba(156,0,0,1) 0%,rgba(222,0,0,1) 100%); !* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ *! filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9c0000', endColorstr='#de0000',GradientType=0 ); !* IE6-9 *! } .header-winnerlist { color:#fff; } .close-custom-winnerlist { top:-13px; background: rgb(250,220,34); !* Old browsers *! background: -moz-linear-gradient(top, rgba(250,220,34,1) 0%, rgba(220,147,16,1) 100%); !* FF3.6-15 *! background: -webkit-linear-gradient(top, rgba(250,220,34,1) 0%,rgba(220,147,16,1) 100%); !* Chrome10-25,Safari5.1-6 *! background: linear-gradient(to bottom, rgba(250,220,34,1) 0%,rgba(220,147,16,1) 100%); !* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ *! filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fadc22', endColorstr='#dc9310',GradientType=0 ); !* IE6-9 *! color:#de0000; border: 0px; } .custom-winnerlist .close-custom-winnerlist i { position: relative; top:0px; } .floating-livechat { background:#e5b100; } .bon-top-wrapper { border-bottom: 1px solid #de0000; } .box-list-image { border-bottom: 1px solid #e5b100; } .box-list-content { background:#000; } .ads-index { border: 2px solid #de0000; border-left: 0px; border-right: 0px; } .game-popup-header, .game-popup-thumb, .game-popup-content, .game-popup-button { background:#000; } .hubungin-item i, .game-popup-cancel-button i, #navbar-top #navbar-link-chat i, #navbar-link-sidebar i, .socialmedialist a i, #sidebar .sidebar ul li a:before, .loginpopup .fa-times, .signoutwrapper a i, .closerightsidebar i, .navigation-back-wrapper.active #gobackhistory, .announcementpopup .fa-times, .cny21-close i, .close-filter i{ background: -webkit-linear-gradient(#fadc22, #dc9310); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .communication-box .bon-top-wrapper .bon-title { color:#e5b100; } .ticker-box { border-color:#fadc22; } .socialmedialist a { color:#fff; } #paymentmethod .title, #socialmedia .title { color: #e5b100; border-bottom: 1px solid #333; } #sidebar .sidebar ul li.active a { background:#000; } .announcementpopupwindowclass .modal-content { background:#000; } .ann-title-new { border-color:#b79472; } .gameimagepreloader { background: #dc9310; color: #fff; } .modal-backdrop.in { background: rgb(128 30 30 / 50%); } preloader, .preloaderbanner { background-color:#430000 !important; } .customsidebarnav.nav-stacked > li, #sidebar .sidebar ul li:hover, #sidebar .sidebar ul li.active { border-bottom: 1px solid #5b2426; } .loginpopupwindowclass .modal-content { background:#000; } .botdetectimg { background:#dc9310; } .top-rightsidebar { background:#000; } #rightsidebarmenu .saldotitle { border-color:#731214; } .register-login-popup, .forgot-login-popup, .register-login-popup a, .forgot-login-popup a{ color:#e5b100; } #sidebar .border-bottom { border-bottom: 0; } .group .nav-stacked.dropdown-sidebar > li a { background: #2f0101; } .dropdown-sidebar.nav-stacked > li { border-bottom: 1px solid #5b2426 !important; } #sidebar .sidebar ul li.has-dropdown.is-opened > a { border-bottom: 1px solid #5b2426 !important; } .rightmenu-item > a, #rightsidebar deposit-form .accountbank-details { background:#000; } #rightsidebar { background:#430000; } .selectgamegroup select, .selectgamegroup.affix { background:#430000; outline: 0; } #gobackhistory,.navigation-back-wrapper{ color:#430000; } .toolbox-icon, .search-toolbox .input-group-addon{ background:#dc9310; color:#000; } .grid-list-view { background:#e5b100; color:#fff; } .maintenance-overlay > div { border: 1px solid #de0000; } .horizontalcasino > hr { border-color:#b01115 !important; } .casino-state .vipcas { background:#000; } .olahraga-state .vipcas { background: transparent !important; } #sidebar .sidebar li#dana > a:before { content: ""; background: url(/cms/mobile/images/cny21cssicon/ic-dana.png) no-repeat center center; background-size: contain; } #sidebar .sidebar li#akun > a:before { content: ""; background: url(/cms/mobile/images/cny21cssicon/ic-akun.png) no-repeat center center; background-size: contain; } #sidebar .sidebar li#bolatangkas > a:before { content: ""; background: url(/cms/mobile/images/cny21cssicon/ic-bola_tangkas.png) no-repeat center center; background-size: contain; } #sidebar .sidebar li#mesinslot > a:before { content: ""; background: url(/cms/mobile/images/cny21cssicon/ic-slot.png) no-repeat center center; background-size: contain; } #sidebar .sidebar li#casino > a:before { content: ""; background: url(/cms/mobile/images/cny21cssicon/ic-casino.png) no-repeat center center; background-size: contain; } #sidebar .sidebar li#olahraga > a:before { content: ""; background: url(/cms/mobile/images/cny21cssicon/ic-olahraga-1.png) no-repeat center center; background-size: contain; } #sidebar .sidebar li#promotions > a:before { content: ""; background: url(/cms/mobile/images/cny21cssicon/ic-promosi.png) no-repeat center center; background-size: contain; } #sidebar .sidebar li#edisi88 > a:before { content: ""; background: url(/cms/mobile/images/cny21cssicon/ic-edisi.png) no-repeat center center !important; background-size: contain !important; } #sidebar .sidebar li#pusat-download > a:before { content: ""; background: url(/cms/mobile/images/cny21cssicon/ic-download.png) no-repeat center center; background-size: contain; } #sidebar .sidebar li#pusat-bantuan > a:before { content: ""; background: url(/cms/mobile/images/cny21cssicon/ic-bantuan.png) no-repeat center center; background-size: contain; } #sidebar .sidebar li#informasi-bon > a:before { content: ""; background: url(/cms/mobile/images/cny21cssicon/ic-informasi.png) no-repeat center center !important; background-size: contain !important; } .menu-icon-top .logo-bt .logo-icon { background: url(/cms/mobile/images/cny21cssicon/ic-bola_tangkas.png) center center no-repeat; background-size: contain; } .menu-icon-top .logo-slot .logo-icon { background: url(/cms/mobile/images/cny21cssicon/ic-slot.png) center center no-repeat; background-size: contain; } .menu-icon-top .logo-casino .logo-icon { background: url(/cms/mobile/images/cny21cssicon/ic-casino.png) center center no-repeat; background-size: contain; } .menu-icon-top .logo-olahraga .logo-icon { background: url(/cms/mobile/images/cny21cssicon/ic-olahraga-1.png) center center no-repeat; background-size: contain; } .menu-icon-top .logo-promosi .logo-icon { background: url(/cms/mobile/images/cny21cssicon/ic-promosi.png) center center no-repeat; background-size: contain; } .menu-icon-top .logo-download .logo-icon { background: url(/cms/mobile/images/cny21cssicon/ic-download.png) center center no-repeat; background-size: contain; } #navbar-top .logobnz.active #logo { background: url(/cms/mobile/images/cny21cssicon/ic-logo_compact.png) no-repeat center center; background-size: contain; left: 0; } .homemenu #menubottom-fixed, .communication-box, .game-toolbox{ background: url(/cms/mobile/images/cny21cssicon/bg-darkpattern-imlek.jpg) repeat; } #navbar-top #logo { position: relative; top: -11px; background: url(/cms/mobile/images/cny21cssicon/header-pattern-imlek.png) no-repeat center center; background-size: cover; width: 200px; height: 50px; display: inline-block; z-index: 12312; left: -9px; } #navbar-top .wrapper-nav, .filter-header { background: #430000 url(/cms/mobile/images/cny21cssicon/bg-header_pattern-imlek.jpg) repeat; } .box-list-wrapper .box-list-item { padding: 0.5px; } .games-result-group.viewtype2 .box-list-content{ padding: 9px 8px 9px 8px; } preloader.default, .preloaderbanner { background: url(/cms/mobile/images/cny21cssicon/Preloader-static-CNY2.png) no-repeat center center #041b3a; background-size: 240px 180px; } .flexslider { background:#430000; } #logindata,#navbar-top { background:#430000; }*/