html,
legend {
box-sizing: border-box
}
/* montserrat-100 - latin */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 100;
src: url('../fonts/montserrat-v15-latin-100.eot');
/* IE9 Compat Modes */
src: local(''),
url('../fonts/montserrat-v15-latin-100.eot?#iefix') format('embedded-opentype'),
/* IE6-IE8 */
url('../fonts/montserrat-v15-latin-100.woff2') format('woff2'),
/* Super Modern Browsers */
url('../fonts/montserrat-v15-latin-100.woff') format('woff'),
/* Modern Browsers */
url('../fonts/montserrat-v15-latin-100.ttf') format('truetype'),
/* Safari, Android, iOS */
url('../fonts/montserrat-v15-latin-100.svg#Montserrat') format('svg');
/* Legacy iOS */
}
/* montserrat-200 - latin */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 200;
src: url('../fonts/montserrat-v15-latin-200.eot');
/* IE9 Compat Modes */
src: local(''),
url('../fonts/montserrat-v15-latin-200.eot?#iefix') format('embedded-opentype'),
/* IE6-IE8 */
url('../fonts/montserrat-v15-latin-200.woff2') format('woff2'),
/* Super Modern Browsers */
url('../fonts/montserrat-v15-latin-200.woff') format('woff'),
/* Modern Browsers */
url('../fonts/montserrat-v15-latin-200.ttf') format('truetype'),
/* Safari, Android, iOS */
url('../fonts/montserrat-v15-latin-200.svg#Montserrat') format('svg');
/* Legacy iOS */
}
/* montserrat-300 - latin */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 300;
src: url('../fonts/montserrat-v15-latin-300.eot');
/* IE9 Compat Modes */
src: local(''),
url('../fonts/montserrat-v15-latin-300.eot?#iefix') format('embedded-opentype'),
/* IE6-IE8 */
url('../fonts/montserrat-v15-latin-300.woff2') format('woff2'),
/* Super Modern Browsers */
url('../fonts/montserrat-v15-latin-300.woff') format('woff'),
/* Modern Browsers */
url('../fonts/montserrat-v15-latin-300.ttf') format('truetype'),
/* Safari, Android, iOS */
url('../fonts/montserrat-v15-latin-300.svg#Montserrat') format('svg');
/* Legacy iOS */
}
/* montserrat-regular - latin */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
src: url('../fonts/montserrat-v15-latin-regular.eot');
/* IE9 Compat Modes */
src: local(''),
url('../fonts/montserrat-v15-latin-regular.eot?#iefix') format('embedded-opentype'),
/* IE6-IE8 */
url('../fonts/montserrat-v15-latin-regular.woff2') format('woff2'),
/* Super Modern Browsers */
url('../fonts/montserrat-v15-latin-regular.woff') format('woff'),
/* Modern Browsers */
url('../fonts/montserrat-v15-latin-regular.ttf') format('truetype'),
/* Safari, Android, iOS */
url('../fonts/montserrat-v15-latin-regular.svg#Montserrat') format('svg');
/* Legacy iOS */
}
/* montserrat-500 - latin */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
src: url('../fonts/montserrat-v15-latin-500.eot');
/* IE9 Compat Modes */
src: local(''),
url('../fonts/montserrat-v15-latin-500.eot?#iefix') format('embedded-opentype'),
/* IE6-IE8 */
url('../fonts/montserrat-v15-latin-500.woff2') format('woff2'),
/* Super Modern Browsers */
url('../fonts/montserrat-v15-latin-500.woff') format('woff'),
/* Modern Browsers */
url('../fonts/montserrat-v15-latin-500.ttf') format('truetype'),
/* Safari, Android, iOS */
url('../fonts/montserrat-v15-latin-500.svg#Montserrat') format('svg');
/* Legacy iOS */
}
/* montserrat-600 - latin */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 600;
src: url('../fonts/montserrat-v15-latin-600.eot');
/* IE9 Compat Modes */
src: local(''),
url('../fonts/montserrat-v15-latin-600.eot?#iefix') format('embedded-opentype'),
/* IE6-IE8 */
url('../fonts/montserrat-v15-latin-600.woff2') format('woff2'),
/* Super Modern Browsers */
url('../fonts/montserrat-v15-latin-600.woff') format('woff'),
/* Modern Browsers */
url('../fonts/montserrat-v15-latin-600.ttf') format('truetype'),
/* Safari, Android, iOS */
url('../fonts/montserrat-v15-latin-600.svg#Montserrat') format('svg');
/* Legacy iOS */
}
/* montserrat-700 - latin */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 700;
src: url('../fonts/montserrat-v15-latin-700.eot');
/* IE9 Compat Modes */
src: local(''),
url('../fonts/montserrat-v15-latin-700.eot?#iefix') format('embedded-opentype'),
/* IE6-IE8 */
url('../fonts/montserrat-v15-latin-700.woff2') format('woff2'),
/* Super Modern Browsers */
url('../fonts/montserrat-v15-latin-700.woff') format('woff'),
/* Modern Browsers */
url('../fonts/montserrat-v15-latin-700.ttf') format('truetype'),
/* Safari, Android, iOS */
url('../fonts/montserrat-v15-latin-700.svg#Montserrat') format('svg');
/* Legacy iOS */
}
/* montserrat-800 - latin */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 800;
src: url('../fonts/montserrat-v15-latin-800.eot');
/* IE9 Compat Modes */
src: local(''),
url('../fonts/montserrat-v15-latin-800.eot?#iefix') format('embedded-opentype'),
/* IE6-IE8 */
url('../fonts/montserrat-v15-latin-800.woff2') format('woff2'),
/* Super Modern Browsers */
url('../fonts/montserrat-v15-latin-800.woff') format('woff'),
/* Modern Browsers */
url('../fonts/montserrat-v15-latin-800.ttf') format('truetype'),
/* Safari, Android, iOS */
url('../fonts/montserrat-v15-latin-800.svg#Montserrat') format('svg');
/* Legacy iOS */
}
/* montserrat-900 - latin */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 900;
src: url('../fonts/montserrat-v15-latin-900.eot');
/* IE9 Compat Modes */
src: local(''),
url('../fonts/montserrat-v15-latin-900.eot?#iefix') format('embedded-opentype'),
/* IE6-IE8 */
url('../fonts/montserrat-v15-latin-900.woff2') format('woff2'),
/* Super Modern Browsers */
url('../fonts/montserrat-v15-latin-900.woff') format('woff'),
/* Modern Browsers */
url('../fonts/montserrat-v15-latin-900.ttf') format('truetype'),
/* Safari, Android, iOS */
url('../fonts/montserrat-v15-latin-900.svg#Montserrat') format('svg');
/* Legacy iOS */
}
.modal--zero-balance .modal__header img.hidden_modal_logo {
bottom: -60px;
}
ul.alter_flow_list {
list-style-type: circle;
margin-top: 5px;
}
.alter_flow_list li {
font-size: 11px;
}
p.top_disclaimer_extra {
font-size: 11px;
color: #ffffff;
}
a.alter_flow_link {
color: #8dc63f;
}
p.bottom_disclaimer_extra {
font-size: 11px;
color: #fff;
}
.col,
legend {
max-width: 100%
}
.accordion,
.progress,
ul {
list-style: none
}
.owl-carousel,
.owl-carousel .owl-item {
-webkit-tap-highlight-color: transparent;
position: relative
}
.owl-carousel {
display: none;
width: 100%;
z-index: 1
}
.owl-carousel .owl-stage {
position: relative;
-ms-touch-action: pan-Y;
touch-action: manipulation;
-moz-backface-visibility: hidden
}
.owl-carousel .owl-stage:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0
}
.owl-carousel .owl-stage-outer {
position: relative;
overflow: hidden;
-webkit-transform: translate3d(0, 0, 0)
}
button,
hr,
input {
overflow: visible
}
.owl-carousel .owl-item,
.owl-carousel .owl-wrapper {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0)
}
.owl-carousel .owl-item {
min-height: 1px;
float: left;
-webkit-backface-visibility: hidden;
-webkit-touch-callout: none
}
.owl-carousel .owl-item img {
display: block;
width: 100%
}
.owl-carousel .owl-dots.disabled,
.owl-carousel .owl-nav.disabled {
display: none
}
.no-js .owl-carousel,
.owl-carousel.owl-loaded {
display: block
}
.owl-carousel .owl-dot,
.owl-carousel .owl-nav .owl-next,
.owl-carousel .owl-nav .owl-prev {
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
.owl-carousel .owl-nav button.owl-next,
.owl-carousel .owl-nav button.owl-prev,
.owl-carousel button.owl-dot {
background: 0 0;
color: inherit;
border: none;
padding: 0 !important;
font: inherit
}
.owl-carousel.owl-loading {
opacity: 0;
display: block
}
.owl-carousel.owl-hidden {
opacity: 0
}
.owl-carousel.owl-refresh .owl-item {
visibility: hidden
}
.owl-carousel.owl-drag .owl-item {
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
.carousel__dots .owl-dot,
.generic-carousel .owl-drag .owl-item,
.onoffswitch {
-moz-user-select: none;
-ms-user-select: none
}
.owl-carousel.owl-grab {
cursor: move;
cursor: -webkit-grab;
cursor: grab
}
.owl-carousel.owl-rtl {
direction: rtl
}
.owl-carousel.owl-rtl .owl-item {
float: right
}
.owl-carousel .animated {
animation-duration: 1s;
animation-fill-mode: both
}
.owl-carousel .owl-animated-in {
z-index: 0
}
.owl-carousel .owl-animated-out {
z-index: 1
}
.owl-carousel .fadeOut {
animation-name: fadeOut
}
@keyframes fadeOut {
0% {
opacity: 1
}
100% {
opacity: 0
}
}
.owl-height {
transition: height .5s ease-in-out
}
.owl-carousel .owl-item .owl-lazy {
opacity: 0;
transition: opacity .4s ease
}
.owl-carousel .owl-item .owl-lazy:not([src]),
.owl-carousel .owl-item .owl-lazy[src^=""] {
max-height: 0
}
.owl-carousel .owl-item img.owl-lazy {
transform-style: preserve-3d
}
.owl-carousel .owl-video-wrapper {
position: relative;
height: 100%;
background: #000
}
.owl-carousel .owl-video-play-icon {
position: absolute;
height: 80px;
width: 80px;
left: 50%;
top: 50%;
margin-left: -40px;
margin-top: -40px;
background: url(owl.video.play.png) no-repeat;
cursor: pointer;
z-index: 1;
-webkit-backface-visibility: hidden;
transition: transform .1s ease
}
.owl-carousel .owl-video-play-icon:hover {
-ms-transform: scale(1.3, 1.3);
transform: scale(1.3, 1.3)
}
.owl-carousel .owl-video-playing .owl-video-play-icon,
.owl-carousel .owl-video-playing .owl-video-tn {
display: none
}
.owl-carousel .owl-video-tn {
opacity: 0;
height: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
transition: opacity .4s ease
}
.owl-carousel .owl-video-frame {
position: relative;
z-index: 1;
height: 100%;
width: 100%
}
@font-face {
font-family: Gudea;
font-style: italic;
font-weight: 400;
src: local('Gudea Italic'), local('Gudea-Italic'), url(https://fonts.gstatic.com/s/gudea/v8/neILzCqgsI0mp9CNzoKmNg.ttf) format('truetype')
}
@font-face {
font-family: Gudea;
font-style: normal;
font-weight: 400;
src: local('Gudea'), url(https://fonts.gstatic.com/s/gudea/v8/neIFzCqgsI0mp9CI_oU.ttf) format('truetype')
}
@font-face {
font-family: Gudea;
font-style: normal;
font-weight: 700;
src: local('Gudea Bold'), local('Gudea-Bold'), url(https://fonts.gstatic.com/s/gudea/v8/neIIzCqgsI0mp9gz25WBFqk.ttf) format('truetype')
}
@media (max-width: 1025px) {
.hidden-tb-down {
display: none !important
}
}
@media (min-width: 1025px) {
.hidden-tb-up {
display: none !important
}
}
audio,
canvas,
progress,
video {
display: inline-block
}
/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
html {
font-family: sans-serif;
line-height: 1.15;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%
}
details,
figcaption,
figure,
main,
menu {
display: block
}
hr {
box-sizing: content-box
}
a {
background-color: transparent;
-webkit-text-decoration-skip: objects
}
a:active,
a:hover {
outline-width: 0
}
abbr[title] {
text-decoration: underline;
text-decoration: underline dotted
}
dfn {
font-style: italic
}
mark {
background-color: #ff0;
color: #000
}
audio:not([controls]) {
display: none;
height: 0
}
svg:not(:root) {
overflow: hidden
}
button,
input,
optgroup,
select,
textarea {
font-family: sans-serif;
font-size: 100%;
line-height: 1.15;
margin: 0
}
button,
select {
text-transform: none
}
[type=submit],
[type=reset],
button,
html [type=button] {
-webkit-appearance: button
}
[type=submit]::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
button::-moz-focus-inner {
border-style: none;
padding: 0
}
[type=submit]:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
button:-moz-focusring {
outline: ButtonText dotted 1px
}
legend {
color: inherit;
display: table;
white-space: normal
}
/* progress {
vertical-align: baseline
} */
textarea {
overflow: auto
}
[type=checkbox],
[type=radio] {
box-sizing: border-box;
padding: 0
}
.container,
.container-fluid {
margin-left: auto;
margin-right: auto;
padding-right: 15px;
padding-left: 15px;
position: relative
}
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
height: auto
}
[type=search] {
-webkit-appearance: textfield;
outline-offset: -2px
}
.btn,
.btn2,
.fb_btn,
.goto-top,
.nav__toggle:focus,
a,
a:focus,
a:visited {
outline: 0
}
[type=search]::-webkit-search-cancel-button,
[type=search]::-webkit-search-decoration {
-webkit-appearance: none
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit
}
[hidden],
template {
display: none
}
@media (min-width: 576px) {
.container {
padding-right: 15px;
padding-left: 15px;
/* width: 540px; */
max-width: 100%
}
.container-fluid {
padding-right: 15px;
padding-left: 15px
}
}
@media (min-width: 992px) {
.container {
padding-right: 15px;
padding-left: 15px;
/* width: 720px; */
max-width: 100%
}
.container-fluid {
padding-right: 15px;
padding-left: 15px
}
}
@media (min-width: 1025px) {
.container {
padding-right: 15px;
padding-left: 15px;
width: 960px;
max-width: 100%
}
.container-fluid {
padding-right: 15px;
padding-left: 15px
}
}
.row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px
}
@media (min-width: 576px) {
.row {
margin-right: -15px;
margin-left: -15px
}
}
@media (min-width: 992px) {
.row {
margin-right: -15px;
margin-left: -15px
}
}
@media (min-width: 1025px) {
.row {
margin-right: -15px;
margin-left: -15px
}
}
@media (min-width: 1200px) {
.container {
padding-right: 15px;
padding-left: 15px;
width: 1140px;
max-width: 100%
}
.container-fluid {
padding-right: 15px;
padding-left: 15px
}
.row {
margin-right: -15px;
margin-left: -15px
}
}
.no-gutters {
margin-right: 0;
margin-left: 0
}
.no-gutters>.col,
.no-gutters>[class*=col-] {
padding-right: 0;
padding-left: 0
}
.col,
.col-1,
.col-10,
.col-11,
.col-12,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-lg,
.col-lg-1,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-md,
.col-md-1,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-sm,
.col-sm-1,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-xl,
.col-xl-1,
.col-xl-10,
.col-xl-11,
.col-xl-12,
.col-xl-2,
.col-xl-3,
.col-xl-4,
.col-xl-5,
.col-xl-6,
.col-xl-7,
.col-xl-8,
.col-xl-9 {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px
}
.col {
-ms-flex-preferred-size: 0;
flex-basis: 0;
-ms-flex-positive: 1;
flex-grow: 1
}
.col-auto {
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: auto
}
.col-1 {
-ms-flex: 0 0 8.33333%;
flex: 0 0 8.33333%;
max-width: 8.33333%
}
.col-2 {
-ms-flex: 0 0 16.66667%;
flex: 0 0 16.66667%;
max-width: 16.66667%
}
.col-3 {
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%
}
.col-4 {
-ms-flex: 0 0 33.33333%;
flex: 0 0 33.33333%;
max-width: 33.33333%
}
.col-5 {
-ms-flex: 0 0 41.66667%;
flex: 0 0 41.66667%;
max-width: 41.66667%
}
.col-6 {
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%
}
.col-7 {
-ms-flex: 0 0 58.33333%;
flex: 0 0 58.33333%;
max-width: 58.33333%
}
.col-8 {
-ms-flex: 0 0 66.66667%;
flex: 0 0 66.66667%;
max-width: 66.66667%
}
.col-9 {
-ms-flex: 0 0 75%;
flex: 0 0 75%;
max-width: 75%
}
.col-10 {
-ms-flex: 0 0 83.33333%;
flex: 0 0 83.33333%;
max-width: 83.33333%
}
.col-11 {
-ms-flex: 0 0 91.66667%;
flex: 0 0 91.66667%;
max-width: 91.66667%
}
.col-12 {
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%
}
.pull-0 {
right: auto
}
.pull-1 {
right: 8.33333%
}
.pull-2 {
right: 16.66667%
}
.pull-3 {
right: 25%
}
.pull-4 {
right: 33.33333%
}
.pull-5 {
right: 41.66667%
}
.pull-6 {
right: 50%
}
.pull-7 {
right: 58.33333%
}
.pull-8 {
right: 66.66667%
}
.pull-9 {
right: 75%
}
.pull-10 {
right: 83.33333%
}
.pull-11 {
right: 91.66667%
}
.pull-12 {
right: 100%
}
.push-0 {
left: auto
}
.push-1 {
left: 8.33333%
}
.push-2 {
left: 16.66667%
}
.push-3 {
left: 25%
}
.push-4 {
left: 33.33333%
}
.push-5 {
left: 41.66667%
}
.push-6 {
left: 50%
}
.push-7 {
left: 58.33333%
}
.push-8 {
left: 66.66667%
}
.push-9 {
left: 75%
}
.push-10 {
left: 83.33333%
}
.push-11 {
left: 91.66667%
}
.push-12 {
left: 100%
}
.offset-1 {
margin-left: 8.33333%
}
.offset-2 {
margin-left: 16.66667%
}
.offset-3 {
margin-left: 25%
}
.offset-4 {
margin-left: 33.33333%
}
.offset-5 {
margin-left: 41.66667%
}
.offset-6 {
margin-left: 50%
}
.offset-7 {
margin-left: 58.33333%
}
.offset-8 {
margin-left: 66.66667%
}
.offset-9 {
margin-left: 75%
}
.offset-10 {
margin-left: 83.33333%
}
.offset-11 {
margin-left: 91.66667%
}
@media (min-width: 576px) {
.col,
.col-1,
.col-10,
.col-11,
.col-12,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-lg,
.col-lg-1,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-md,
.col-md-1,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-sm,
.col-sm-1,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-xl,
.col-xl-1,
.col-xl-10,
.col-xl-11,
.col-xl-12,
.col-xl-2,
.col-xl-3,
.col-xl-4,
.col-xl-5,
.col-xl-6,
.col-xl-7,
.col-xl-8,
.col-xl-9 {
padding-right: 15px;
padding-left: 15px
}
.col-sm {
-ms-flex-preferred-size: 0;
flex-basis: 0;
-ms-flex-positive: 1;
flex-grow: 1;
max-width: 100%
}
.col-sm-auto {
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: auto
}
.col-sm-1 {
-ms-flex: 0 0 8.33333%;
flex: 0 0 8.33333%;
max-width: 8.33333%
}
.col-sm-2 {
-ms-flex: 0 0 16.66667%;
flex: 0 0 16.66667%;
max-width: 16.66667%
}
.col-sm-3 {
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%
}
.col-sm-4 {
-ms-flex: 0 0 33.33333%;
flex: 0 0 33.33333%;
max-width: 33.33333%
}
.col-sm-5 {
-ms-flex: 0 0 41.66667%;
flex: 0 0 41.66667%;
max-width: 41.66667%
}
.col-sm-6 {
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%
}
.col-sm-7 {
-ms-flex: 0 0 58.33333%;
flex: 0 0 58.33333%;
max-width: 58.33333%
}
.col-sm-8 {
-ms-flex: 0 0 66.66667%;
flex: 0 0 66.66667%;
max-width: 66.66667%
}
.col-sm-9 {
-ms-flex: 0 0 75%;
flex: 0 0 75%;
max-width: 75%
}
.col-sm-10 {
-ms-flex: 0 0 83.33333%;
flex: 0 0 83.33333%;
max-width: 83.33333%
}
.col-sm-11 {
-ms-flex: 0 0 91.66667%;
flex: 0 0 91.66667%;
max-width: 91.66667%
}
.col-sm-12 {
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%
}
.pull-sm-0 {
right: auto
}
.pull-sm-1 {
right: 8.33333%
}
.pull-sm-2 {
right: 16.66667%
}
.pull-sm-3 {
right: 25%
}
.pull-sm-4 {
right: 33.33333%
}
.pull-sm-5 {
right: 41.66667%
}
.pull-sm-6 {
right: 50%
}
.pull-sm-7 {
right: 58.33333%
}
.pull-sm-8 {
right: 66.66667%
}
.pull-sm-9 {
right: 75%
}
.pull-sm-10 {
right: 83.33333%
}
.pull-sm-11 {
right: 91.66667%
}
.pull-sm-12 {
right: 100%
}
.push-sm-0 {
left: auto
}
.push-sm-1 {
left: 8.33333%
}
.push-sm-2 {
left: 16.66667%
}
.push-sm-3 {
left: 25%
}
.push-sm-4 {
left: 33.33333%
}
.push-sm-5 {
left: 41.66667%
}
.push-sm-6 {
left: 50%
}
.push-sm-7 {
left: 58.33333%
}
.push-sm-8 {
left: 66.66667%
}
.push-sm-9 {
left: 75%
}
.push-sm-10 {
left: 83.33333%
}
.push-sm-11 {
left: 91.66667%
}
.push-sm-12 {
left: 100%
}
.offset-sm-0 {
margin-left: 0
}
.offset-sm-1 {
margin-left: 8.33333%
}
.offset-sm-2 {
margin-left: 16.66667%
}
.offset-sm-3 {
margin-left: 25%
}
.offset-sm-4 {
margin-left: 33.33333%
}
.offset-sm-5 {
margin-left: 41.66667%
}
.offset-sm-6 {
margin-left: 50%
}
.offset-sm-7 {
margin-left: 58.33333%
}
.offset-sm-8 {
margin-left: 66.66667%
}
.offset-sm-9 {
margin-left: 75%
}
.offset-sm-10 {
margin-left: 83.33333%
}
.offset-sm-11 {
margin-left: 91.66667%
}
}
@media (min-width: 992px) {
.col,
.col-1,
.col-10,
.col-11,
.col-12,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-lg,
.col-lg-1,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-md,
.col-md-1,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-sm,
.col-sm-1,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-xl,
.col-xl-1,
.col-xl-10,
.col-xl-11,
.col-xl-12,
.col-xl-2,
.col-xl-3,
.col-xl-4,
.col-xl-5,
.col-xl-6,
.col-xl-7,
.col-xl-8,
.col-xl-9 {
padding-right: 15px;
padding-left: 15px
}
.col-md {
-ms-flex-preferred-size: 0;
flex-basis: 0;
-ms-flex-positive: 1;
flex-grow: 1;
max-width: 100%
}
.col-md-auto {
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: auto
}
.col-md-1 {
-ms-flex: 0 0 8.33333%;
flex: 0 0 8.33333%;
max-width: 8.33333%
}
.col-md-2 {
-ms-flex: 0 0 16.66667%;
flex: 0 0 16.66667%;
max-width: 16.66667%
}
.col-md-3 {
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%
}
.col-md-4 {
-ms-flex: 0 0 33.33333%;
flex: 0 0 33.33333%;
max-width: 33.33333%
}
.col-md-5 {
-ms-flex: 0 0 41.66667%;
flex: 0 0 41.66667%;
max-width: 41.66667%
}
.col-md-6 {
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%
}
.col-md-7 {
-ms-flex: 0 0 58.33333%;
flex: 0 0 58.33333%;
max-width: 58.33333%
}
.col-md-8 {
-ms-flex: 0 0 66.66667%;
flex: 0 0 66.66667%;
max-width: 66.66667%
}
.col-md-9 {
-ms-flex: 0 0 75%;
flex: 0 0 75%;
max-width: 75%
}
.col-md-10 {
-ms-flex: 0 0 83.33333%;
flex: 0 0 83.33333%;
max-width: 83.33333%
}
.col-md-11 {
-ms-flex: 0 0 91.66667%;
flex: 0 0 91.66667%;
max-width: 91.66667%
}
.col-md-12 {
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%
}
.pull-md-0 {
right: auto
}
.pull-md-1 {
right: 8.33333%
}
.pull-md-2 {
right: 16.66667%
}
.pull-md-3 {
right: 25%
}
.pull-md-4 {
right: 33.33333%
}
.pull-md-5 {
right: 41.66667%
}
.pull-md-6 {
right: 50%
}
.pull-md-7 {
right: 58.33333%
}
.pull-md-8 {
right: 66.66667%
}
.pull-md-9 {
right: 75%
}
.pull-md-10 {
right: 83.33333%
}
.pull-md-11 {
right: 91.66667%
}
.pull-md-12 {
right: 100%
}
.push-md-0 {
left: auto
}
.push-md-1 {
left: 8.33333%
}
.push-md-2 {
left: 16.66667%
}
.push-md-3 {
left: 25%
}
.push-md-4 {
left: 33.33333%
}
.push-md-5 {
left: 41.66667%
}
.push-md-6 {
left: 50%
}
.push-md-7 {
left: 58.33333%
}
.push-md-8 {
left: 66.66667%
}
.push-md-9 {
left: 75%
}
.push-md-10 {
left: 83.33333%
}
.push-md-11 {
left: 91.66667%
}
.push-md-12 {
left: 100%
}
.offset-md-0 {
margin-left: 0
}
.offset-md-1 {
margin-left: 8.33333%
}
.offset-md-2 {
margin-left: 16.66667%
}
.offset-md-3 {
margin-left: 25%
}
.offset-md-4 {
margin-left: 33.33333%
}
.offset-md-5 {
margin-left: 41.66667%
}
.offset-md-6 {
margin-left: 50%
}
.offset-md-7 {
margin-left: 58.33333%
}
.offset-md-8 {
margin-left: 66.66667%
}
.offset-md-9 {
margin-left: 75%
}
.offset-md-10 {
margin-left: 83.33333%
}
.offset-md-11 {
margin-left: 91.66667%
}
}
@media (min-width: 1025px) {
.col,
.col-1,
.col-10,
.col-11,
.col-12,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-lg,
.col-lg-1,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-md,
.col-md-1,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-sm,
.col-sm-1,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-xl,
.col-xl-1,
.col-xl-10,
.col-xl-11,
.col-xl-12,
.col-xl-2,
.col-xl-3,
.col-xl-4,
.col-xl-5,
.col-xl-6,
.col-xl-7,
.col-xl-8,
.col-xl-9 {
padding-right: 15px;
padding-left: 15px
}
.col-lg {
-ms-flex-preferred-size: 0;
flex-basis: 0;
-ms-flex-positive: 1;
flex-grow: 1;
max-width: 100%
}
.col-lg-auto {
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: auto
}
.col-lg-1 {
-ms-flex: 0 0 8.33333%;
flex: 0 0 8.33333%;
max-width: 8.33333%
}
.col-lg-2 {
-ms-flex: 0 0 16.66667%;
flex: 0 0 16.66667%;
max-width: 16.66667%
}
.col-lg-3 {
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%
}
.col-lg-4 {
-ms-flex: 0 0 33.33333%;
flex: 0 0 33.33333%;
max-width: 33.33333%
}
.col-lg-5 {
-ms-flex: 0 0 41.66667%;
flex: 0 0 41.66667%;
max-width: 41.66667%
}
.col-lg-6 {
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%
}
.col-lg-7 {
-ms-flex: 0 0 58.33333%;
flex: 0 0 58.33333%;
max-width: 58.33333%
}
.col-lg-8 {
-ms-flex: 0 0 66.66667%;
flex: 0 0 66.66667%;
max-width: 66.66667%
}
.col-lg-9 {
-ms-flex: 0 0 75%;
flex: 0 0 75%;
max-width: 75%
}
.col-lg-10 {
-ms-flex: 0 0 83.33333%;
flex: 0 0 83.33333%;
max-width: 83.33333%
}
.col-lg-11 {
-ms-flex: 0 0 91.66667%;
flex: 0 0 91.66667%;
max-width: 91.66667%
}
.col-lg-12 {
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%
}
.pull-lg-0 {
right: auto
}
.pull-lg-1 {
right: 8.33333%
}
.pull-lg-2 {
right: 16.66667%
}
.pull-lg-3 {
right: 25%
}
.pull-lg-4 {
right: 33.33333%
}
.pull-lg-5 {
right: 41.66667%
}
.pull-lg-6 {
right: 50%
}
.pull-lg-7 {
right: 58.33333%
}
.pull-lg-8 {
right: 66.66667%
}
.pull-lg-9 {
right: 75%
}
.pull-lg-10 {
right: 83.33333%
}
.pull-lg-11 {
right: 91.66667%
}
.pull-lg-12 {
right: 100%
}
.push-lg-0 {
left: auto
}
.push-lg-1 {
left: 8.33333%
}
.push-lg-2 {
left: 16.66667%
}
.push-lg-3 {
left: 25%
}
.push-lg-4 {
left: 33.33333%
}
.push-lg-5 {
left: 41.66667%
}
.push-lg-6 {
left: 50%
}
.push-lg-7 {
left: 58.33333%
}
.push-lg-8 {
left: 66.66667%
}
.push-lg-9 {
left: 75%
}
.push-lg-10 {
left: 83.33333%
}
.push-lg-11 {
left: 91.66667%
}
.push-lg-12 {
left: 100%
}
.offset-lg-0 {
margin-left: 0
}
.offset-lg-1 {
margin-left: 8.33333%
}
.offset-lg-2 {
margin-left: 16.66667%
}
.offset-lg-3 {
margin-left: 25%
}
.offset-lg-4 {
margin-left: 33.33333%
}
.offset-lg-5 {
margin-left: 41.66667%
}
.offset-lg-6 {
margin-left: 50%
}
.offset-lg-7 {
margin-left: 58.33333%
}
.offset-lg-8 {
margin-left: 66.66667%
}
.offset-lg-9 {
margin-left: 75%
}
.offset-lg-10 {
margin-left: 83.33333%
}
.offset-lg-11 {
margin-left: 91.66667%
}
}
@media (min-width: 1200px) {
.col,
.col-1,
.col-10,
.col-11,
.col-12,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-lg,
.col-lg-1,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-md,
.col-md-1,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-sm,
.col-sm-1,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-xl,
.col-xl-1,
.col-xl-10,
.col-xl-11,
.col-xl-12,
.col-xl-2,
.col-xl-3,
.col-xl-4,
.col-xl-5,
.col-xl-6,
.col-xl-7,
.col-xl-8,
.col-xl-9 {
padding-right: 15px;
padding-left: 15px
}
.col-xl {
-ms-flex-preferred-size: 0;
flex-basis: 0;
-ms-flex-positive: 1;
flex-grow: 1;
max-width: 100%
}
.col-xl-auto {
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: auto
}
.col-xl-1 {
-ms-flex: 0 0 8.33333%;
flex: 0 0 8.33333%;
max-width: 8.33333%
}
.col-xl-2 {
-ms-flex: 0 0 16.66667%;
flex: 0 0 16.66667%;
max-width: 16.66667%
}
.col-xl-3 {
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%
}
.col-xl-4 {
-ms-flex: 0 0 33.33333%;
flex: 0 0 33.33333%;
max-width: 33.33333%
}
.col-xl-5 {
-ms-flex: 0 0 41.66667%;
flex: 0 0 41.66667%;
max-width: 41.66667%
}
.col-xl-6 {
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%
}
.col-xl-7 {
-ms-flex: 0 0 58.33333%;
flex: 0 0 58.33333%;
max-width: 58.33333%
}
.col-xl-8 {
-ms-flex: 0 0 66.66667%;
flex: 0 0 66.66667%;
max-width: 66.66667%
}
.col-xl-9 {
-ms-flex: 0 0 75%;
flex: 0 0 75%;
max-width: 75%
}
.col-xl-10 {
-ms-flex: 0 0 83.33333%;
flex: 0 0 83.33333%;
max-width: 83.33333%
}
.col-xl-11 {
-ms-flex: 0 0 91.66667%;
flex: 0 0 91.66667%;
max-width: 91.66667%
}
.col-xl-12 {
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%
}
.pull-xl-0 {
right: auto
}
.pull-xl-1 {
right: 8.33333%
}
.pull-xl-2 {
right: 16.66667%
}
.pull-xl-3 {
right: 25%
}
.pull-xl-4 {
right: 33.33333%
}
.pull-xl-5 {
right: 41.66667%
}
.pull-xl-6 {
right: 50%
}
.pull-xl-7 {
right: 58.33333%
}
.pull-xl-8 {
right: 66.66667%
}
.pull-xl-9 {
right: 75%
}
.pull-xl-10 {
right: 83.33333%
}
.pull-xl-11 {
right: 91.66667%
}
.pull-xl-12 {
right: 100%
}
.push-xl-0 {
left: auto
}
.push-xl-1 {
left: 8.33333%
}
.push-xl-2 {
left: 16.66667%
}
.push-xl-3 {
left: 25%
}
.push-xl-4 {
left: 33.33333%
}
.push-xl-5 {
left: 41.66667%
}
.push-xl-6 {
left: 50%
}
.push-xl-7 {
left: 58.33333%
}
.push-xl-8 {
left: 66.66667%
}
.push-xl-9 {
left: 75%
}
.push-xl-10 {
left: 83.33333%
}
.push-xl-11 {
left: 91.66667%
}
.push-xl-12 {
left: 100%
}
.offset-xl-0 {
margin-left: 0
}
.offset-xl-1 {
margin-left: 8.33333%
}
.offset-xl-2 {
margin-left: 16.66667%
}
.offset-xl-3 {
margin-left: 25%
}
.offset-xl-4 {
margin-left: 33.33333%
}
.offset-xl-5 {
margin-left: 41.66667%
}
.offset-xl-6 {
margin-left: 50%
}
.offset-xl-7 {
margin-left: 58.33333%
}
.offset-xl-8 {
margin-left: 66.66667%
}
.offset-xl-9 {
margin-left: 75%
}
.offset-xl-10 {
margin-left: 83.33333%
}
.offset-xl-11 {
margin-left: 91.66667%
}
}
.fixed-bottom,
.fixed-top {
position: fixed;
right: 0;
z-index: 1030
}
.align-baseline {
vertical-align: baseline !important
}
.align-top {
vertical-align: top !important
}
.align-middle {
vertical-align: middle !important
}
.align-bottom {
vertical-align: bottom !important
}
.align-text-bottom {
vertical-align: text-bottom !important
}
.align-text-top {
vertical-align: text-top !important
}
.bg-faded {
background-color: #f7f7f7
}
.bg-primary {
background-color: #0275d8 !important
}
a.bg-primary:focus,
a.bg-primary:hover {
background-color: #025aa5 !important
}
.bg-success {
background-color: #5cb85c !important
}
a.bg-success:focus,
a.bg-success:hover {
background-color: #449d44 !important
}
.bg-info {
background-color: #5bc0de !important
}
a.bg-info:focus,
a.bg-info:hover {
background-color: #31b0d5 !important
}
.bg-warning {
background-color: #f0ad4e !important
}
a.bg-warning:focus,
a.bg-warning:hover {
background-color: #ec971f !important
}
.bg-danger {
background-color: #d9534f !important
}
a.bg-danger:focus,
a.bg-danger:hover {
background-color: #c9302c !important
}
.bg-inverse {
background-color: #292b2c !important
}
a.bg-inverse:focus,
a.bg-inverse:hover {
background-color: #101112 !important
}
.border-0 {
border: 0 !important
}
.rounded-right,
.rounded-top {
border-top-right-radius: .25rem
}
.rounded-bottom,
.rounded-right {
border-bottom-right-radius: .25rem
}
.rounded-bottom,
.rounded-left {
border-bottom-left-radius: .25rem
}
.rounded-left,
.rounded-top {
border-top-left-radius: .25rem
}
.border-top-0 {
border-top: 0 !important
}
.border-right-0 {
border-right: 0 !important
}
.border-bottom-0 {
border-bottom: 0 !important
}
.border-left-0 {
border-left: 0 !important
}
.rounded {
border-radius: .25rem
}
.rounded-circle {
border-radius: 50%
}
.rounded-0 {
border-radius: 0
}
.clearfix::after {
display: block;
content: "";
clear: both
}
.d-none {
display: none !important
}
.d-inline {
display: inline !important
}
.d-inline-block {
display: inline-block !important
}
.d-block {
display: block !important
}
.d-table {
display: table !important
}
.d-table-cell {
display: table-cell !important
}
.d-flex {
display: -ms-flexbox !important;
display: flex !important
}
.d-inline-flex {
display: -ms-inline-flexbox !important;
display: inline-flex !important
}
@media (min-width: 576px) {
.d-sm-none {
display: none !important
}
.d-sm-inline {
display: inline !important
}
.d-sm-inline-block {
display: inline-block !important
}
.d-sm-block {
display: block !important
}
.d-sm-table {
display: table !important
}
.d-sm-table-cell {
display: table-cell !important
}
.d-sm-flex {
display: -ms-flexbox !important;
display: flex !important
}
.d-sm-inline-flex {
display: -ms-inline-flexbox !important;
display: inline-flex !important
}
}
@media (min-width: 992px) {
.d-md-none {
display: none !important
}
.d-md-inline {
display: inline !important
}
.d-md-inline-block {
display: inline-block !important
}
.d-md-block {
display: block !important
}
.d-md-table {
display: table !important
}
.d-md-table-cell {
display: table-cell !important
}
.d-md-flex {
display: -ms-flexbox !important;
display: flex !important
}
.d-md-inline-flex {
display: -ms-inline-flexbox !important;
display: inline-flex !important
}
}
@media (min-width: 1025px) {
.d-lg-none {
display: none !important
}
.d-lg-inline {
display: inline !important
}
.d-lg-inline-block {
display: inline-block !important
}
.d-lg-block {
display: block !important
}
.d-lg-table {
display: table !important
}
.d-lg-table-cell {
display: table-cell !important
}
.d-lg-flex {
display: -ms-flexbox !important;
display: flex !important
}
.d-lg-inline-flex {
display: -ms-inline-flexbox !important;
display: inline-flex !important
}
}
@media (min-width: 1200px) {
.d-xl-none {
display: none !important
}
.d-xl-inline {
display: inline !important
}
.d-xl-inline-block {
display: inline-block !important
}
.d-xl-block {
display: block !important
}
.d-xl-table {
display: table !important
}
.d-xl-table-cell {
display: table-cell !important
}
.d-xl-flex {
display: -ms-flexbox !important;
display: flex !important
}
.d-xl-inline-flex {
display: -ms-inline-flexbox !important;
display: inline-flex !important
}
}
.hidden-xl-down,
.hidden-xs-up,
.visible-print-block {
display: none !important
}
.flex-first {
-ms-flex-order: -1;
order: -1
}
.flex-last {
-ms-flex-order: 1;
order: 1
}
.flex-unordered {
-ms-flex-order: 0;
order: 0
}
.flex-row {
-ms-flex-direction: row !important;
flex-direction: row !important
}
.flex-column {
-ms-flex-direction: column !important;
flex-direction: column !important
}
.flex-row-reverse {
-ms-flex-direction: row-reverse !important;
flex-direction: row-reverse !important
}
.flex-column-reverse {
-ms-flex-direction: column-reverse !important;
flex-direction: column-reverse !important
}
.flex-wrap {
-ms-flex-wrap: wrap !important;
flex-wrap: wrap !important
}
.flex-nowrap {
-ms-flex-wrap: nowrap !important;
flex-wrap: nowrap !important
}
.flex-wrap-reverse {
-ms-flex-wrap: wrap-reverse !important;
flex-wrap: wrap-reverse !important
}
.justify-content-start {
-ms-flex-pack: start !important;
justify-content: flex-start !important
}
.justify-content-end {
-ms-flex-pack: end !important;
justify-content: flex-end !important
}
.justify-content-center {
-ms-flex-pack: center !important;
justify-content: center !important
}
.justify-content-between {
-ms-flex-pack: justify !important;
justify-content: space-between !important
}
.justify-content-around {
-ms-flex-pack: distribute !important;
justify-content: space-around !important
}
.align-items-start {
-ms-flex-align: start !important;
align-items: flex-start !important
}
.align-items-end {
-ms-flex-align: end !important;
align-items: flex-end !important
}
.align-items-center {
-ms-flex-align: center !important;
align-items: center !important
}
.align-items-baseline {
-ms-flex-align: baseline !important;
align-items: baseline !important
}
.align-items-stretch {
-ms-flex-align: stretch !important;
align-items: stretch !important
}
.align-content-start {
-ms-flex-line-pack: start !important;
align-content: flex-start !important
}
.align-content-end {
-ms-flex-line-pack: end !important;
align-content: flex-end !important
}
.align-content-center {
-ms-flex-line-pack: center !important;
align-content: center !important
}
.align-content-between {
-ms-flex-line-pack: justify !important;
align-content: space-between !important
}
.align-content-around {
-ms-flex-line-pack: distribute !important;
align-content: space-around !important
}
.align-content-stretch {
-ms-flex-line-pack: stretch !important;
align-content: stretch !important
}
.align-self-auto {
-ms-flex-item-align: auto !important;
-ms-grid-row-align: auto !important;
align-self: auto !important
}
.align-self-start {
-ms-flex-item-align: start !important;
align-self: flex-start !important
}
.align-self-end {
-ms-flex-item-align: end !important;
align-self: flex-end !important
}
.align-self-center {
-ms-flex-item-align: center !important;
-ms-grid-row-align: center !important;
align-self: center !important
}
.align-self-baseline {
-ms-flex-item-align: baseline !important;
align-self: baseline !important
}
.align-self-stretch {
-ms-flex-item-align: stretch !important;
-ms-grid-row-align: stretch !important;
align-self: stretch !important
}
@media (min-width: 576px) {
.flex-sm-first {
-ms-flex-order: -1;
order: -1
}
.flex-sm-last {
-ms-flex-order: 1;
order: 1
}
.flex-sm-unordered {
-ms-flex-order: 0;
order: 0
}
.flex-sm-row {
-ms-flex-direction: row !important;
flex-direction: row !important
}
.flex-sm-column {
-ms-flex-direction: column !important;
flex-direction: column !important
}
.flex-sm-row-reverse {
-ms-flex-direction: row-reverse !important;
flex-direction: row-reverse !important
}
.flex-sm-column-reverse {
-ms-flex-direction: column-reverse !important;
flex-direction: column-reverse !important
}
.flex-sm-wrap {
-ms-flex-wrap: wrap !important;
flex-wrap: wrap !important
}
.flex-sm-nowrap {
-ms-flex-wrap: nowrap !important;
flex-wrap: nowrap !important
}
.flex-sm-wrap-reverse {
-ms-flex-wrap: wrap-reverse !important;
flex-wrap: wrap-reverse !important
}
.justify-content-sm-start {
-ms-flex-pack: start !important;
justify-content: flex-start !important
}
.justify-content-sm-end {
-ms-flex-pack: end !important;
justify-content: flex-end !important
}
.justify-content-sm-center {
-ms-flex-pack: center !important;
justify-content: center !important
}
.justify-content-sm-between {
-ms-flex-pack: justify !important;
justify-content: space-between !important
}
.justify-content-sm-around {
-ms-flex-pack: distribute !important;
justify-content: space-around !important
}
.align-items-sm-start {
-ms-flex-align: start !important;
align-items: flex-start !important
}
.align-items-sm-end {
-ms-flex-align: end !important;
align-items: flex-end !important
}
.align-items-sm-center {
-ms-flex-align: center !important;
align-items: center !important
}
.align-items-sm-baseline {
-ms-flex-align: baseline !important;
align-items: baseline !important
}
.align-items-sm-stretch {
-ms-flex-align: stretch !important;
align-items: stretch !important
}
.align-content-sm-start {
-ms-flex-line-pack: start !important;
align-content: flex-start !important
}
.align-content-sm-end {
-ms-flex-line-pack: end !important;
align-content: flex-end !important
}
.align-content-sm-center {
-ms-flex-line-pack: center !important;
align-content: center !important
}
.align-content-sm-between {
-ms-flex-line-pack: justify !important;
align-content: space-between !important
}
.align-content-sm-around {
-ms-flex-line-pack: distribute !important;
align-content: space-around !important
}
.align-content-sm-stretch {
-ms-flex-line-pack: stretch !important;
align-content: stretch !important
}
.align-self-sm-auto {
-ms-flex-item-align: auto !important;
-ms-grid-row-align: auto !important;
align-self: auto !important
}
.align-self-sm-start {
-ms-flex-item-align: start !important;
align-self: flex-start !important
}
.align-self-sm-end {
-ms-flex-item-align: end !important;
align-self: flex-end !important
}
.align-self-sm-center {
-ms-flex-item-align: center !important;
-ms-grid-row-align: center !important;
align-self: center !important
}
.align-self-sm-baseline {
-ms-flex-item-align: baseline !important;
align-self: baseline !important
}
.align-self-sm-stretch {
-ms-flex-item-align: stretch !important;
-ms-grid-row-align: stretch !important;
align-self: stretch !important
}
}
@media (min-width: 992px) {
.flex-md-first {
-ms-flex-order: -1;
order: -1
}
.flex-md-last {
-ms-flex-order: 1;
order: 1
}
.flex-md-unordered {
-ms-flex-order: 0;
order: 0
}
.flex-md-row {
-ms-flex-direction: row !important;
flex-direction: row !important
}
.flex-md-column {
-ms-flex-direction: column !important;
flex-direction: column !important
}
.flex-md-row-reverse {
-ms-flex-direction: row-reverse !important;
flex-direction: row-reverse !important
}
.flex-md-column-reverse {
-ms-flex-direction: column-reverse !important;
flex-direction: column-reverse !important
}
.flex-md-wrap {
-ms-flex-wrap: wrap !important;
flex-wrap: wrap !important
}
.flex-md-nowrap {
-ms-flex-wrap: nowrap !important;
flex-wrap: nowrap !important
}
.flex-md-wrap-reverse {
-ms-flex-wrap: wrap-reverse !important;
flex-wrap: wrap-reverse !important
}
.justify-content-md-start {
-ms-flex-pack: start !important;
justify-content: flex-start !important
}
.justify-content-md-end {
-ms-flex-pack: end !important;
justify-content: flex-end !important
}
.justify-content-md-center {
-ms-flex-pack: center !important;
justify-content: center !important
}
.justify-content-md-between {
-ms-flex-pack: justify !important;
justify-content: space-between !important
}
.justify-content-md-around {
-ms-flex-pack: distribute !important;
justify-content: space-around !important
}
.align-items-md-start {
-ms-flex-align: start !important;
align-items: flex-start !important
}
.align-items-md-end {
-ms-flex-align: end !important;
align-items: flex-end !important
}
.align-items-md-center {
-ms-flex-align: center !important;
align-items: center !important
}
.align-items-md-baseline {
-ms-flex-align: baseline !important;
align-items: baseline !important
}
.align-items-md-stretch {
-ms-flex-align: stretch !important;
align-items: stretch !important
}
.align-content-md-start {
-ms-flex-line-pack: start !important;
align-content: flex-start !important
}
.align-content-md-end {
-ms-flex-line-pack: end !important;
align-content: flex-end !important
}
.align-content-md-center {
-ms-flex-line-pack: center !important;
align-content: center !important
}
.align-content-md-between {
-ms-flex-line-pack: justify !important;
align-content: space-between !important
}
.align-content-md-around {
-ms-flex-line-pack: distribute !important;
align-content: space-around !important
}
.align-content-md-stretch {
-ms-flex-line-pack: stretch !important;
align-content: stretch !important
}
.align-self-md-auto {
-ms-flex-item-align: auto !important;
-ms-grid-row-align: auto !important;
align-self: auto !important
}
.align-self-md-start {
-ms-flex-item-align: start !important;
align-self: flex-start !important
}
.align-self-md-end {
-ms-flex-item-align: end !important;
align-self: flex-end !important
}
.align-self-md-center {
-ms-flex-item-align: center !important;
-ms-grid-row-align: center !important;
align-self: center !important
}
.align-self-md-baseline {
-ms-flex-item-align: baseline !important;
align-self: baseline !important
}
.align-self-md-stretch {
-ms-flex-item-align: stretch !important;
-ms-grid-row-align: stretch !important;
align-self: stretch !important
}
}
@media (min-width: 1025px) {
.flex-lg-first {
-ms-flex-order: -1;
order: -1
}
.flex-lg-last {
-ms-flex-order: 1;
order: 1
}
.flex-lg-unordered {
-ms-flex-order: 0;
order: 0
}
.flex-lg-row {
-ms-flex-direction: row !important;
flex-direction: row !important
}
.flex-lg-column {
-ms-flex-direction: column !important;
flex-direction: column !important
}
.flex-lg-row-reverse {
-ms-flex-direction: row-reverse !important;
flex-direction: row-reverse !important
}
.flex-lg-column-reverse {
-ms-flex-direction: column-reverse !important;
flex-direction: column-reverse !important
}
.flex-lg-wrap {
-ms-flex-wrap: wrap !important;
flex-wrap: wrap !important
}
.flex-lg-nowrap {
-ms-flex-wrap: nowrap !important;
flex-wrap: nowrap !important
}
.flex-lg-wrap-reverse {
-ms-flex-wrap: wrap-reverse !important;
flex-wrap: wrap-reverse !important
}
.justify-content-lg-start {
-ms-flex-pack: start !important;
justify-content: flex-start !important
}
.justify-content-lg-end {
-ms-flex-pack: end !important;
justify-content: flex-end !important
}
.justify-content-lg-center {
-ms-flex-pack: center !important;
justify-content: center !important
}
.justify-content-lg-between {
-ms-flex-pack: justify !important;
justify-content: space-between !important
}
.justify-content-lg-around {
-ms-flex-pack: distribute !important;
justify-content: space-around !important
}
.align-items-lg-start {
-ms-flex-align: start !important;
align-items: flex-start !important
}
.align-items-lg-end {
-ms-flex-align: end !important;
align-items: flex-end !important
}
.align-items-lg-center {
-ms-flex-align: center !important;
align-items: center !important
}
.align-items-lg-baseline {
-ms-flex-align: baseline !important;
align-items: baseline !important
}
.align-items-lg-stretch {
-ms-flex-align: stretch !important;
align-items: stretch !important
}
.align-content-lg-start {
-ms-flex-line-pack: start !important;
align-content: flex-start !important
}
.align-content-lg-end {
-ms-flex-line-pack: end !important;
align-content: flex-end !important
}
.align-content-lg-center {
-ms-flex-line-pack: center !important;
align-content: center !important
}
.align-content-lg-between {
-ms-flex-line-pack: justify !important;
align-content: space-between !important
}
.align-content-lg-around {
-ms-flex-line-pack: distribute !important;
align-content: space-around !important
}
.align-content-lg-stretch {
-ms-flex-line-pack: stretch !important;
align-content: stretch !important
}
.align-self-lg-auto {
-ms-flex-item-align: auto !important;
-ms-grid-row-align: auto !important;
align-self: auto !important
}
.align-self-lg-start {
-ms-flex-item-align: start !important;
align-self: flex-start !important
}
.align-self-lg-end {
-ms-flex-item-align: end !important;
align-self: flex-end !important
}
.align-self-lg-center {
-ms-flex-item-align: center !important;
-ms-grid-row-align: center !important;
align-self: center !important
}
.align-self-lg-baseline {
-ms-flex-item-align: baseline !important;
align-self: baseline !important
}
.align-self-lg-stretch {
-ms-flex-item-align: stretch !important;
-ms-grid-row-align: stretch !important;
align-self: stretch !important
}
}
.float-left {
float: left !important
}
.float-right {
float: right !important
}
.float-none {
float: none !important
}
@media (min-width: 576px) {
.float-sm-left {
float: left !important
}
.float-sm-right {
float: right !important
}
.float-sm-none {
float: none !important
}
}
@media (min-width: 992px) {
.float-md-left {
float: left !important
}
.float-md-right {
float: right !important
}
.float-md-none {
float: none !important
}
}
@media (min-width: 1025px) {
.float-lg-left {
float: left !important
}
.float-lg-right {
float: right !important
}
.float-lg-none {
float: none !important
}
}
.fixed-top {
top: 0;
left: 0
}
.fixed-bottom {
bottom: 0;
left: 0
}
.sticky-top {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 1030
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0
}
.pr-0,
.px-0 {
padding-right: 0 !important
}
.pl-0,
.px-0 {
padding-left: 0 !important
}
.pt-0,
.py-0 {
padding-top: 0 !important
}
.pb-0,
.py-0 {
padding-bottom: 0 !important
}
.sr-only-focusable:active,
.sr-only-focusable:focus {
position: static;
width: auto;
height: auto;
margin: 0;
overflow: visible;
clip: auto
}
.mr-0,
.mx-0 {
margin-right: 0 !important
}
.ml-0,
.mx-0 {
margin-left: 0 !important
}
.mt-0,
.my-0 {
margin-top: 0 !important
}
.mb-0,
.my-0 {
margin-bottom: 0 !important
}
.w-25 {
width: 25% !important
}
.w-50 {
width: 50% !important
}
.w-75 {
width: 75% !important
}
.w-100 {
width: 100% !important
}
.h-25 {
height: 25% !important
}
.h-50 {
height: 50% !important
}
.h-75 {
height: 75% !important
}
.h-100 {
height: 100% !important
}
.mw-100 {
max-width: 100% !important
}
.mh-100 {
max-height: 100% !important
}
.m-0 {
margin: 0 !important
}
.mr-1,
.mx-1 {
margin-right: .25rem !important
}
.ml-1,
.mx-1 {
margin-left: .25rem !important
}
.mt-1,
.my-1 {
margin-top: .25rem !important
}
.mb-1,
.my-1 {
margin-bottom: .25rem !important
}
.m-1 {
margin: .25rem !important
}
.mr-2,
.mx-2 {
margin-right: .5rem !important
}
.ml-2,
.mx-2 {
margin-left: .5rem !important
}
.mt-2,
.my-2 {
margin-top: .5rem !important
}
.mb-2,
.my-2 {
margin-bottom: .5rem !important
}
.m-2 {
margin: .5rem !important
}
.mr-3,
.mx-3 {
margin-right: 1rem !important
}
.ml-3,
.mx-3 {
margin-left: 1rem !important
}
.mt-3,
.my-3 {
margin-top: 1rem !important
}
.mb-3,
.my-3 {
margin-bottom: 1rem !important
}
.m-3 {
margin: 1rem !important
}
.mr-4,
.mx-4 {
margin-right: 1.5rem !important
}
.ml-4,
.mx-4 {
margin-left: 1.5rem !important
}
.mt-4,
.my-4 {
margin-top: 1.5rem !important
}
.mb-4,
.my-4 {
margin-bottom: 1.5rem !important
}
.m-4 {
margin: 1.5rem !important
}
.mr-5,
.mx-5 {
margin-right: 3rem !important
}
.ml-5,
.mx-5 {
margin-left: 3rem !important
}
.mt-5,
.my-5 {
margin-top: 3rem !important
}
.mb-5,
.my-5 {
margin-bottom: 3rem !important
}
.m-5 {
margin: 3rem !important
}
.mr-auto,
.mx-auto {
margin-right: auto !important
}
.ml-auto,
.mx-auto {
margin-left: auto !important
}
.mt-auto,
.my-auto {
margin-top: auto !important
}
.mb-auto,
.my-auto {
margin-bottom: auto !important
}
.p-0 {
padding: 0 !important
}
.pr-1,
.px-1 {
padding-right: .25rem !important
}
.pl-1,
.px-1 {
padding-left: .25rem !important
}
.pt-1,
.py-1 {
padding-top: .25rem !important
}
.pb-1,
.py-1 {
padding-bottom: .25rem !important
}
.p-1 {
padding: .25rem !important
}
.pr-2,
.px-2 {
padding-right: .5rem !important
}
.pl-2,
.px-2 {
padding-left: .5rem !important
}
.pt-2,
.py-2 {
padding-top: .5rem !important
}
.pb-2,
.py-2 {
padding-bottom: .5rem !important
}
.p-2 {
padding: .5rem !important
}
.pr-3,
.px-3 {
padding-right: 1rem !important
}
.pl-3,
.px-3 {
padding-left: 1rem !important
}
.pt-3,
.py-3 {
padding-top: 1rem !important
}
.pb-3,
.py-3 {
padding-bottom: 1rem !important
}
.p-3 {
padding: 1rem !important
}
.pr-4,
.px-4 {
padding-right: 1.5rem !important
}
.pl-4,
.px-4 {
padding-left: 1.5rem !important
}
.pt-4,
.py-4 {
padding-top: 1.5rem !important
}
.pb-4,
.py-4 {
padding-bottom: 1.5rem !important
}
.p-4 {
padding: 1.5rem !important
}
.pr-5,
.px-5 {
padding-right: 3rem !important
}
.pl-5,
.px-5 {
padding-left: 3rem !important
}
.pt-5,
.py-5 {
padding-top: 3rem !important
}
.pb-5,
.py-5 {
padding-bottom: 3rem !important
}
.p-5 {
padding: 3rem !important
}
.m-auto {
margin: auto !important
}
@media (min-width: 576px) {
.mr-sm-0,
.mx-sm-0 {
margin-right: 0 !important
}
.ml-sm-0,
.mx-sm-0 {
margin-left: 0 !important
}
.mt-sm-0,
.my-sm-0 {
margin-top: 0 !important
}
.mb-sm-0,
.my-sm-0 {
margin-bottom: 0 !important
}
.pr-sm-0,
.px-sm-0 {
padding-right: 0 !important
}
.pl-sm-0,
.px-sm-0 {
padding-left: 0 !important
}
.pt-sm-0,
.py-sm-0 {
padding-top: 0 !important
}
.pb-sm-0,
.py-sm-0 {
padding-bottom: 0 !important
}
.m-sm-0 {
margin: 0 !important
}
.mr-sm-1,
.mx-sm-1 {
margin-right: .25rem !important
}
.ml-sm-1,
.mx-sm-1 {
margin-left: .25rem !important
}
.mt-sm-1,
.my-sm-1 {
margin-top: .25rem !important
}
.mb-sm-1,
.my-sm-1 {
margin-bottom: .25rem !important
}
.m-sm-1 {
margin: .25rem !important
}
.mr-sm-2,
.mx-sm-2 {
margin-right: .5rem !important
}
.ml-sm-2,
.mx-sm-2 {
margin-left: .5rem !important
}
.mt-sm-2,
.my-sm-2 {
margin-top: .5rem !important
}
.mb-sm-2,
.my-sm-2 {
margin-bottom: .5rem !important
}
.m-sm-2 {
margin: .5rem !important
}
.mr-sm-3,
.mx-sm-3 {
margin-right: 1rem !important
}
.ml-sm-3,
.mx-sm-3 {
margin-left: 1rem !important
}
.mt-sm-3,
.my-sm-3 {
margin-top: 1rem !important
}
.mb-sm-3,
.my-sm-3 {
margin-bottom: 1rem !important
}
.m-sm-3 {
margin: 1rem !important
}
.mr-sm-4,
.mx-sm-4 {
margin-right: 1.5rem !important
}
.ml-sm-4,
.mx-sm-4 {
margin-left: 1.5rem !important
}
.mt-sm-4,
.my-sm-4 {
margin-top: 1.5rem !important
}
.mb-sm-4,
.my-sm-4 {
margin-bottom: 1.5rem !important
}
.m-sm-4 {
margin: 1.5rem !important
}
.mr-sm-5,
.mx-sm-5 {
margin-right: 3rem !important
}
.ml-sm-5,
.mx-sm-5 {
margin-left: 3rem !important
}
.mt-sm-5,
.my-sm-5 {
margin-top: 3rem !important
}
.mb-sm-5,
.my-sm-5 {
margin-bottom: 3rem !important
}
.m-sm-5 {
margin: 3rem !important
}
.mr-sm-auto,
.mx-sm-auto {
margin-right: auto !important
}
.ml-sm-auto,
.mx-sm-auto {
margin-left: auto !important
}
.mt-sm-auto,
.my-sm-auto {
margin-top: auto !important
}
.mb-sm-auto,
.my-sm-auto {
margin-bottom: auto !important
}
.p-sm-0 {
padding: 0 !important
}
.pr-sm-1,
.px-sm-1 {
padding-right: .25rem !important
}
.pl-sm-1,
.px-sm-1 {
padding-left: .25rem !important
}
.pt-sm-1,
.py-sm-1 {
padding-top: .25rem !important
}
.pb-sm-1,
.py-sm-1 {
padding-bottom: .25rem !important
}
.p-sm-1 {
padding: .25rem !important
}
.pr-sm-2,
.px-sm-2 {
padding-right: .5rem !important
}
.pl-sm-2,
.px-sm-2 {
padding-left: .5rem !important
}
.pt-sm-2,
.py-sm-2 {
padding-top: .5rem !important
}
.pb-sm-2,
.py-sm-2 {
padding-bottom: .5rem !important
}
.p-sm-2 {
padding: .5rem !important
}
.pr-sm-3,
.px-sm-3 {
padding-right: 1rem !important
}
.pl-sm-3,
.px-sm-3 {
padding-left: 1rem !important
}
.pt-sm-3,
.py-sm-3 {
padding-top: 1rem !important
}
.pb-sm-3,
.py-sm-3 {
padding-bottom: 1rem !important
}
.p-sm-3 {
padding: 1rem !important
}
.pr-sm-4,
.px-sm-4 {
padding-right: 1.5rem !important
}
.pl-sm-4,
.px-sm-4 {
padding-left: 1.5rem !important
}
.pt-sm-4,
.py-sm-4 {
padding-top: 1.5rem !important
}
.pb-sm-4,
.py-sm-4 {
padding-bottom: 1.5rem !important
}
.p-sm-4 {
padding: 1.5rem !important
}
.pr-sm-5,
.px-sm-5 {
padding-right: 3rem !important
}
.pl-sm-5,
.px-sm-5 {
padding-left: 3rem !important
}
.pt-sm-5,
.py-sm-5 {
padding-top: 3rem !important
}
.pb-sm-5,
.py-sm-5 {
padding-bottom: 3rem !important
}
.p-sm-5 {
padding: 3rem !important
}
.m-sm-auto {
margin: auto !important
}
}
@media (min-width: 992px) {
.mr-md-0,
.mx-md-0 {
margin-right: 0 !important
}
.ml-md-0,
.mx-md-0 {
margin-left: 0 !important
}
.mt-md-0,
.my-md-0 {
margin-top: 0 !important
}
.mb-md-0,
.my-md-0 {
margin-bottom: 0 !important
}
.pr-md-0,
.px-md-0 {
padding-right: 0 !important
}
.pl-md-0,
.px-md-0 {
padding-left: 0 !important
}
.pt-md-0,
.py-md-0 {
padding-top: 0 !important
}
.pb-md-0,
.py-md-0 {
padding-bottom: 0 !important
}
.m-md-0 {
margin: 0 !important
}
.mr-md-1,
.mx-md-1 {
margin-right: .25rem !important
}
.ml-md-1,
.mx-md-1 {
margin-left: .25rem !important
}
.mt-md-1,
.my-md-1 {
margin-top: .25rem !important
}
.mb-md-1,
.my-md-1 {
margin-bottom: .25rem !important
}
.m-md-1 {
margin: .25rem !important
}
.mr-md-2,
.mx-md-2 {
margin-right: .5rem !important
}
.ml-md-2,
.mx-md-2 {
margin-left: .5rem !important
}
.mt-md-2,
.my-md-2 {
margin-top: .5rem !important
}
.mb-md-2,
.my-md-2 {
margin-bottom: .5rem !important
}
.m-md-2 {
margin: .5rem !important
}
.mr-md-3,
.mx-md-3 {
margin-right: 1rem !important
}
.ml-md-3,
.mx-md-3 {
margin-left: 1rem !important
}
.mt-md-3,
.my-md-3 {
margin-top: 1rem !important
}
.mb-md-3,
.my-md-3 {
margin-bottom: 1rem !important
}
.m-md-3 {
margin: 1rem !important
}
.mr-md-4,
.mx-md-4 {
margin-right: 1.5rem !important
}
.ml-md-4,
.mx-md-4 {
margin-left: 1.5rem !important
}
.mt-md-4,
.my-md-4 {
margin-top: 1.5rem !important
}
.mb-md-4,
.my-md-4 {
margin-bottom: 1.5rem !important
}
.m-md-4 {
margin: 1.5rem !important
}
.mr-md-5,
.mx-md-5 {
margin-right: 3rem !important
}
.ml-md-5,
.mx-md-5 {
margin-left: 3rem !important
}
.mt-md-5,
.my-md-5 {
margin-top: 3rem !important
}
.mb-md-5,
.my-md-5 {
margin-bottom: 3rem !important
}
.m-md-5 {
margin: 3rem !important
}
.mr-md-auto,
.mx-md-auto {
margin-right: auto !important
}
.ml-md-auto,
.mx-md-auto {
margin-left: auto !important
}
.mt-md-auto,
.my-md-auto {
margin-top: auto !important
}
.mb-md-auto,
.my-md-auto {
margin-bottom: auto !important
}
.p-md-0 {
padding: 0 !important
}
.pr-md-1,
.px-md-1 {
padding-right: .25rem !important
}
.pl-md-1,
.px-md-1 {
padding-left: .25rem !important
}
.pt-md-1,
.py-md-1 {
padding-top: .25rem !important
}
.pb-md-1,
.py-md-1 {
padding-bottom: .25rem !important
}
.p-md-1 {
padding: .25rem !important
}
.pr-md-2,
.px-md-2 {
padding-right: .5rem !important
}
.pl-md-2,
.px-md-2 {
padding-left: .5rem !important
}
.pt-md-2,
.py-md-2 {
padding-top: .5rem !important
}
.pb-md-2,
.py-md-2 {
padding-bottom: .5rem !important
}
.p-md-2 {
padding: .5rem !important
}
.pr-md-3,
.px-md-3 {
padding-right: 1rem !important
}
.pl-md-3,
.px-md-3 {
padding-left: 1rem !important
}
.pt-md-3,
.py-md-3 {
padding-top: 1rem !important
}
.pb-md-3,
.py-md-3 {
padding-bottom: 1rem !important
}
.p-md-3 {
padding: 1rem !important
}
.pr-md-4,
.px-md-4 {
padding-right: 1.5rem !important
}
.pl-md-4,
.px-md-4 {
padding-left: 1.5rem !important
}
.pt-md-4,
.py-md-4 {
padding-top: 1.5rem !important
}
.pb-md-4,
.py-md-4 {
padding-bottom: 1.5rem !important
}
.p-md-4 {
padding: 1.5rem !important
}
.pr-md-5,
.px-md-5 {
padding-right: 3rem !important
}
.pl-md-5,
.px-md-5 {
padding-left: 3rem !important
}
.pt-md-5,
.py-md-5 {
padding-top: 3rem !important
}
.pb-md-5,
.py-md-5 {
padding-bottom: 3rem !important
}
.p-md-5 {
padding: 3rem !important
}
.m-md-auto {
margin: auto !important
}
}
@media (min-width: 1025px) {
.mr-lg-0,
.mx-lg-0 {
margin-right: 0 !important
}
.ml-lg-0,
.mx-lg-0 {
margin-left: 0 !important
}
.mt-lg-0,
.my-lg-0 {
margin-top: 0 !important
}
.mb-lg-0,
.my-lg-0 {
margin-bottom: 0 !important
}
.pr-lg-0,
.px-lg-0 {
padding-right: 0 !important
}
.pl-lg-0,
.px-lg-0 {
padding-left: 0 !important
}
.pt-lg-0,
.py-lg-0 {
padding-top: 0 !important
}
.pb-lg-0,
.py-lg-0 {
padding-bottom: 0 !important
}
.m-lg-0 {
margin: 0 !important
}
.mr-lg-1,
.mx-lg-1 {
margin-right: .25rem !important
}
.ml-lg-1,
.mx-lg-1 {
margin-left: .25rem !important
}
.mt-lg-1,
.my-lg-1 {
margin-top: .25rem !important
}
.mb-lg-1,
.my-lg-1 {
margin-bottom: .25rem !important
}
.m-lg-1 {
margin: .25rem !important
}
.mr-lg-2,
.mx-lg-2 {
margin-right: .5rem !important
}
.ml-lg-2,
.mx-lg-2 {
margin-left: .5rem !important
}
.mt-lg-2,
.my-lg-2 {
margin-top: .5rem !important
}
.mb-lg-2,
.my-lg-2 {
margin-bottom: .5rem !important
}
.m-lg-2 {
margin: .5rem !important
}
.mr-lg-3,
.mx-lg-3 {
margin-right: 1rem !important
}
.ml-lg-3,
.mx-lg-3 {
margin-left: 1rem !important
}
.mt-lg-3,
.my-lg-3 {
margin-top: 1rem !important
}
.mb-lg-3,
.my-lg-3 {
margin-bottom: 1rem !important
}
.m-lg-3 {
margin: 1rem !important
}
.mr-lg-4,
.mx-lg-4 {
margin-right: 1.5rem !important
}
.ml-lg-4,
.mx-lg-4 {
margin-left: 1.5rem !important
}
.mt-lg-4,
.my-lg-4 {
margin-top: 1.5rem !important
}
.mb-lg-4,
.my-lg-4 {
margin-bottom: 1.5rem !important
}
.m-lg-4 {
margin: 1.5rem !important
}
.mr-lg-5,
.mx-lg-5 {
margin-right: 3rem !important
}
.ml-lg-5,
.mx-lg-5 {
margin-left: 3rem !important
}
.mt-lg-5,
.my-lg-5 {
margin-top: 3rem !important
}
.mb-lg-5,
.my-lg-5 {
margin-bottom: 3rem !important
}
.m-lg-5 {
margin: 3rem !important
}
.mr-lg-auto,
.mx-lg-auto {
margin-right: auto !important
}
.ml-lg-auto,
.mx-lg-auto {
margin-left: auto !important
}
.mt-lg-auto,
.my-lg-auto {
margin-top: auto !important
}
.mb-lg-auto,
.my-lg-auto {
margin-bottom: auto !important
}
.p-lg-0 {
padding: 0 !important
}
.pr-lg-1,
.px-lg-1 {
padding-right: .25rem !important
}
.pl-lg-1,
.px-lg-1 {
padding-left: .25rem !important
}
.pt-lg-1,
.py-lg-1 {
padding-top: .25rem !important
}
.pb-lg-1,
.py-lg-1 {
padding-bottom: .25rem !important
}
.p-lg-1 {
padding: .25rem !important
}
.pr-lg-2,
.px-lg-2 {
padding-right: .5rem !important
}
.pl-lg-2,
.px-lg-2 {
padding-left: .5rem !important
}
.pt-lg-2,
.py-lg-2 {
padding-top: .5rem !important
}
.pb-lg-2,
.py-lg-2 {
padding-bottom: .5rem !important
}
.p-lg-2 {
padding: .5rem !important
}
.pr-lg-3,
.px-lg-3 {
padding-right: 1rem !important
}
.pl-lg-3,
.px-lg-3 {
padding-left: 1rem !important
}
.pt-lg-3,
.py-lg-3 {
padding-top: 1rem !important
}
.pb-lg-3,
.py-lg-3 {
padding-bottom: 1rem !important
}
.p-lg-3 {
padding: 1rem !important
}
.pr-lg-4,
.px-lg-4 {
padding-right: 1.5rem !important
}
.pl-lg-4,
.px-lg-4 {
padding-left: 1.5rem !important
}
.pt-lg-4,
.py-lg-4 {
padding-top: 1.5rem !important
}
.pb-lg-4,
.py-lg-4 {
padding-bottom: 1.5rem !important
}
.p-lg-4 {
padding: 1.5rem !important
}
.pr-lg-5,
.px-lg-5 {
padding-right: 3rem !important
}
.pl-lg-5,
.px-lg-5 {
padding-left: 3rem !important
}
.pt-lg-5,
.py-lg-5 {
padding-top: 3rem !important
}
.pb-lg-5,
.py-lg-5 {
padding-bottom: 3rem !important
}
.p-lg-5 {
padding: 3rem !important
}
.m-lg-auto {
margin: auto !important
}
}
@media (min-width: 1200px) {
.flex-xl-first {
-ms-flex-order: -1;
order: -1
}
.flex-xl-last {
-ms-flex-order: 1;
order: 1
}
.flex-xl-unordered {
-ms-flex-order: 0;
order: 0
}
.flex-xl-row {
-ms-flex-direction: row !important;
flex-direction: row !important
}
.flex-xl-column {
-ms-flex-direction: column !important;
flex-direction: column !important
}
.flex-xl-row-reverse {
-ms-flex-direction: row-reverse !important;
flex-direction: row-reverse !important
}
.flex-xl-column-reverse {
-ms-flex-direction: column-reverse !important;
flex-direction: column-reverse !important
}
.flex-xl-wrap {
-ms-flex-wrap: wrap !important;
flex-wrap: wrap !important
}
.flex-xl-nowrap {
-ms-flex-wrap: nowrap !important;
flex-wrap: nowrap !important
}
.flex-xl-wrap-reverse {
-ms-flex-wrap: wrap-reverse !important;
flex-wrap: wrap-reverse !important
}
.justify-content-xl-start {
-ms-flex-pack: start !important;
justify-content: flex-start !important
}
.justify-content-xl-end {
-ms-flex-pack: end !important;
justify-content: flex-end !important
}
.justify-content-xl-center {
-ms-flex-pack: center !important;
justify-content: center !important
}
.justify-content-xl-between {
-ms-flex-pack: justify !important;
justify-content: space-between !important
}
.justify-content-xl-around {
-ms-flex-pack: distribute !important;
justify-content: space-around !important
}
.align-items-xl-start {
-ms-flex-align: start !important;
align-items: flex-start !important
}
.align-items-xl-end {
-ms-flex-align: end !important;
align-items: flex-end !important
}
.align-items-xl-center {
-ms-flex-align: center !important;
align-items: center !important
}
.align-items-xl-baseline {
-ms-flex-align: baseline !important;
align-items: baseline !important
}
.align-items-xl-stretch {
-ms-flex-align: stretch !important;
align-items: stretch !important
}
.align-content-xl-start {
-ms-flex-line-pack: start !important;
align-content: flex-start !important
}
.align-content-xl-end {
-ms-flex-line-pack: end !important;
align-content: flex-end !important
}
.align-content-xl-center {
-ms-flex-line-pack: center !important;
align-content: center !important
}
.align-content-xl-between {
-ms-flex-line-pack: justify !important;
align-content: space-between !important
}
.align-content-xl-around {
-ms-flex-line-pack: distribute !important;
align-content: space-around !important
}
.align-content-xl-stretch {
-ms-flex-line-pack: stretch !important;
align-content: stretch !important
}
.align-self-xl-auto {
-ms-flex-item-align: auto !important;
-ms-grid-row-align: auto !important;
align-self: auto !important
}
.align-self-xl-start {
-ms-flex-item-align: start !important;
align-self: flex-start !important
}
.align-self-xl-end {
-ms-flex-item-align: end !important;
align-self: flex-end !important
}
.align-self-xl-center {
-ms-flex-item-align: center !important;
-ms-grid-row-align: center !important;
align-self: center !important
}
.align-self-xl-baseline {
-ms-flex-item-align: baseline !important;
align-self: baseline !important
}
.align-self-xl-stretch {
-ms-flex-item-align: stretch !important;
-ms-grid-row-align: stretch !important;
align-self: stretch !important
}
.float-xl-left {
float: left !important
}
.float-xl-right {
float: right !important
}
.float-xl-none {
float: none !important
}
.mr-xl-0,
.mx-xl-0 {
margin-right: 0 !important
}
.ml-xl-0,
.mx-xl-0 {
margin-left: 0 !important
}
.mt-xl-0,
.my-xl-0 {
margin-top: 0 !important
}
.mb-xl-0,
.my-xl-0 {
margin-bottom: 0 !important
}
.pr-xl-0,
.px-xl-0 {
padding-right: 0 !important
}
.pl-xl-0,
.px-xl-0 {
padding-left: 0 !important
}
.pt-xl-0,
.py-xl-0 {
padding-top: 0 !important
}
.pb-xl-0,
.py-xl-0 {
padding-bottom: 0 !important
}
.m-xl-0 {
margin: 0 !important
}
.mr-xl-1,
.mx-xl-1 {
margin-right: .25rem !important
}
.ml-xl-1,
.mx-xl-1 {
margin-left: .25rem !important
}
.mt-xl-1,
.my-xl-1 {
margin-top: .25rem !important
}
.mb-xl-1,
.my-xl-1 {
margin-bottom: .25rem !important
}
.m-xl-1 {
margin: .25rem !important
}
.mr-xl-2,
.mx-xl-2 {
margin-right: .5rem !important
}
.ml-xl-2,
.mx-xl-2 {
margin-left: .5rem !important
}
.mt-xl-2,
.my-xl-2 {
margin-top: .5rem !important
}
.mb-xl-2,
.my-xl-2 {
margin-bottom: .5rem !important
}
.m-xl-2 {
margin: .5rem !important
}
.mr-xl-3,
.mx-xl-3 {
margin-right: 1rem !important
}
.ml-xl-3,
.mx-xl-3 {
margin-left: 1rem !important
}
.mt-xl-3,
.my-xl-3 {
margin-top: 1rem !important
}
.mb-xl-3,
.my-xl-3 {
margin-bottom: 1rem !important
}
.m-xl-3 {
margin: 1rem !important
}
.mr-xl-4,
.mx-xl-4 {
margin-right: 1.5rem !important
}
.ml-xl-4,
.mx-xl-4 {
margin-left: 1.5rem !important
}
.mt-xl-4,
.my-xl-4 {
margin-top: 1.5rem !important
}
.mb-xl-4,
.my-xl-4 {
margin-bottom: 1.5rem !important
}
.m-xl-4 {
margin: 1.5rem !important
}
.mr-xl-5,
.mx-xl-5 {
margin-right: 3rem !important
}
.ml-xl-5,
.mx-xl-5 {
margin-left: 3rem !important
}
.mt-xl-5,
.my-xl-5 {
margin-top: 3rem !important
}
.mb-xl-5,
.my-xl-5 {
margin-bottom: 3rem !important
}
.m-xl-5 {
margin: 3rem !important
}
.mr-xl-auto,
.mx-xl-auto {
margin-right: auto !important
}
.ml-xl-auto,
.mx-xl-auto {
margin-left: auto !important
}
.mt-xl-auto,
.my-xl-auto {
margin-top: auto !important
}
.mb-xl-auto,
.my-xl-auto {
margin-bottom: auto !important
}
.p-xl-0 {
padding: 0 !important
}
.pr-xl-1,
.px-xl-1 {
padding-right: .25rem !important
}
.pl-xl-1,
.px-xl-1 {
padding-left: .25rem !important
}
.pt-xl-1,
.py-xl-1 {
padding-top: .25rem !important
}
.pb-xl-1,
.py-xl-1 {
padding-bottom: .25rem !important
}
.p-xl-1 {
padding: .25rem !important
}
.pr-xl-2,
.px-xl-2 {
padding-right: .5rem !important
}
.pl-xl-2,
.px-xl-2 {
padding-left: .5rem !important
}
.pt-xl-2,
.py-xl-2 {
padding-top: .5rem !important
}
.pb-xl-2,
.py-xl-2 {
padding-bottom: .5rem !important
}
.p-xl-2 {
padding: .5rem !important
}
.pr-xl-3,
.px-xl-3 {
padding-right: 1rem !important
}
.pl-xl-3,
.px-xl-3 {
padding-left: 1rem !important
}
.pt-xl-3,
.py-xl-3 {
padding-top: 1rem !important
}
.pb-xl-3,
.py-xl-3 {
padding-bottom: 1rem !important
}
.p-xl-3 {
padding: 1rem !important
}
.pr-xl-4,
.px-xl-4 {
padding-right: 1.5rem !important
}
.pl-xl-4,
.px-xl-4 {
padding-left: 1.5rem !important
}
.pt-xl-4,
.py-xl-4 {
padding-top: 1.5rem !important
}
.pb-xl-4,
.py-xl-4 {
padding-bottom: 1.5rem !important
}
.p-xl-4 {
padding: 1.5rem !important
}
.pr-xl-5,
.px-xl-5 {
padding-right: 3rem !important
}
.pl-xl-5,
.px-xl-5 {
padding-left: 3rem !important
}
.pt-xl-5,
.py-xl-5 {
padding-top: 3rem !important
}
.pb-xl-5,
.py-xl-5 {
padding-bottom: 3rem !important
}
.p-xl-5 {
padding: 3rem !important
}
.m-xl-auto {
margin: auto !important
}
}
a,
hr {
padding: 0
}
a,
button,
input,
select,
textarea {
margin: 0
}
.text-justify {
text-align: justify !important
}
.text-nowrap {
white-space: nowrap !important
}
.text-truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
.text-left {
text-align: left !important
}
.text-right {
text-align: right !important
}
.text-center {
text-align: center !important
}
@media (min-width: 576px) {
.text-sm-left {
text-align: left !important
}
.text-sm-right {
text-align: right !important
}
.text-sm-center {
text-align: center !important
}
.hidden-sm-up {
display: none !important
}
}
@media (min-width: 992px) {
.text-md-left {
text-align: left !important
}
.text-md-right {
text-align: right !important
}
.text-md-center {
text-align: center !important
}
.hidden-md-up {
display: none !important
}
}
@media (min-width: 1025px) {
.text-lg-left {
text-align: left !important
}
.text-lg-right {
text-align: right !important
}
.text-lg-center {
text-align: center !important
}
.hidden-lg-up {
display: none !important
}
}
.text-lowercase {
text-transform: lowercase !important
}
.text-uppercase {
text-transform: uppercase !important
}
.text-capitalize {
text-transform: capitalize !important
}
.font-weight-normal {
font-weight: 400
}
.font-weight-bold {
font-weight: 700
}
.font-italic {
font-style: italic
}
.text-white {
color: #fff !important
}
.text-muted {
color: #636c72 !important
}
a.text-muted:focus,
a.text-muted:hover {
color: #4b5257 !important
}
.text-primary {
color: #0275d8 !important
}
a.text-primary:focus,
a.text-primary:hover {
color: #025aa5 !important
}
.text-success {
color: #5cb85c !important
}
a.text-success:focus,
a.text-success:hover {
color: #449d44 !important
}
.text-info {
color: #5bc0de !important
}
a.text-info:focus,
a.text-info:hover {
color: #31b0d5 !important
}
.text-warning {
color: #f0ad4e !important
}
a.text-warning:focus,
a.text-warning:hover {
color: #ec971f !important
}
.text-danger {
color: #d9534f !important
}
a.text-danger:focus,
a.text-danger:hover {
color: #c9302c !important
}
.text-gray-dark {
color: #292b2c !important
}
a.text-gray-dark:focus,
a.text-gray-dark:hover {
color: #101112 !important
}
.text-hide {
font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0
}
.invisible {
visibility: hidden !important
}
@media (max-width: 575px) {
.hidden-xs-down {
display: none !important
}
}
@media (max-width: 991px) {
.hidden-sm-down {
display: none !important
}
}
@media (max-width: 1024px) {
.hidden-md-down {
display: none !important
}
}
@media (max-width: 1199px) {
.hidden-lg-down {
display: none !important
}
}
@media (min-width: 1200px) {
.text-xl-left {
text-align: left !important
}
.text-xl-right {
text-align: right !important
}
.text-xl-center {
text-align: center !important
}
.hidden-xl-up {
display: none !important
}
}
@media print {
.visible-print-block {
display: block !important
}
}
.visible-print-inline {
display: none !important
}
@media print {
.visible-print-inline {
display: inline !important
}
}
.visible-print-inline-block {
display: none !important
}
@media print {
.visible-print-inline-block {
display: inline-block !important
}
.hidden-print {
display: none !important
}
}
.clearfix:after,
article,
aside,
details,
figure,
footer,
header,
hr,
nav,
section,
summary {
display: block
}
abbr,
address,
article,
aside,
audio,
b,
blockquote,
body,
body div,
caption,
cite,
code,
dd,
del,
details,
dfn,
dl,
dt,
em,
fieldset,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
p,
pre,
q,
samp,
section,
small,
span,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
ul,
var,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font-weight: 400;
vertical-align: baseline;
background: 0 0
}
input[type=checkbox],
th {
vertical-align: bottom
}
a,
a:focus,
a:visited {
text-decoration: inherit
}
*,
:after,
:before {
box-sizing: inherit
}
.btn,
.fb_btn,
.form-group__textfield {
box-sizing: border-box
}
embed,
img,
object {
max-width: 100%
}
blockquote,
q {
quotes: none
}
blockquote:after,
blockquote:before,
q:after,
q:before {
content: '';
content: none
}
a {
font-size: 100%;
vertical-align: baseline;
background: 0 0
}
del {
text-decoration: line-through
}
abbr[title],
dfn[title] {
border-bottom: 1px dotted #000;
cursor: help
}
th {
font-weight: 700
}
td {
font-weight: 400;
vertical-align: top
}
hr {
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0
}
input,
select {
vertical-align: middle
}
pre {
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
word-wrap: break-word
}
input[type=radio] {
vertical-align: text-bottom
}
.ie7 input[type=checkbox] {
vertical-align: baseline
}
.ie6 input {
vertical-align: text-bottom
}
input,
select,
textarea {
font: 99% sans-serif
}
table {
border-collapse: separate;
border-spacing: 0;
font: 100%
}
small {
font-size: 85%
}
strong {
font-weight: 700
}
td,
td img {
vertical-align: top
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative
}
sup {
top: -.5em
}
sub {
bottom: -.25em
}
code,
kbd,
pre,
samp {
font-family: monospace, sans-serif
}
.clickable,
button,
input[type=button],
input[type=file],
input[type=submit],
label {
cursor: pointer
}
button,
input[type=button] {
width: auto;
overflow: visible
}
.ie7 img {
-ms-interpolation-mode: bicubic
}
.clearfix:after {
content: " ";
clear: both
}
footer.footer-main {
position: fixed;
width: 100%;
bottom: 0;
left: 0;
background-color: #ffffff;
height: 42.86px;
color: #666666;
line-height: 60px;
z-index: 9999;
padding: 0 15px;
border-top: 2px solid #CCCCCC;
}
footer.footer-main .container {
height: 100%
}
.distributed {
min-height: 60px;
padding-bottom: 5px
}
.distributed span {
display: block;
font-size: 13px;
font-weight: 300;
text-align: center;
letter-spacing: .08em
}
.btn2,
.fb_btn {
display: inline-block
}
.distributed span img {
max-width: 47px;
margin: 7px 2px 0
}
@media (max-width: 480px) {
.distributed {
min-height: 50px
}
.distributed span {
font-size: 11px
}
.distributed span img {
max-width: 38px;
margin: 5px 2px 0
}
}
@font-face {
font-family: DUEL;
src: url(../fonts/DUEL.eot);
src: url(../fonts/DUEL.eot?#iefix) format("embedded-opentype"), url(../fonts/DUEL.woff) format("woff"), url(../fonts/DUEL.ttf) format("truetype"), url(../fonts/DUEL.svg#DUEL) format("svg");
font-weight: 400;
font-style: normal
}
[class*=icon-]:before {
display: inline-block;
font-family: DUEL;
font-style: normal;
font-weight: 400;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
.icon-profile:before {
content: '\0041'
}
.icon-arrow-left:before {
content: '\0042'
}
.icon-arrow-right:before {
content: '\0043'
}
.icon-arrow-up:before {
content: '\0044'
}
.icon-arrow-down:before {
content: '\0045'
}
.icon-lock:before {
content: '\0046'
}
.icon-checked:before {
content: '\0047'
}
.icon-square:before {
content: '\0048'
}
.icon-bell:before {
content: '\0049'
}
.icon-home:before {
content: '\004a'
}
.icon-speech:before {
content: '\004b'
}
.icon-store:before {
content: '\004c'
}
.icon-carret-down:before {
content: '\004d'
}
.icon-carret-up:before {
content: '\004e'
}
.icon-radio_checked:before {
content: '\004f'
}
.icon-radio:before {
content: '\0050'
}
.icon-geography:before {
content: '\0051'
}
.icon-dice:before {
content: '\0052'
}
.icon-magic:before {
content: '\0053'
}
.icon-close:before {
content: '';
background: url(../images/icon-close.svg) no-repeat;
display: inline-block;
width: 32px;
height: 32px;
background-size: 24px;
background-position: center;
}
.icon-planet:before {
content: '\0055'
}
.icon-facebook:before {
content: '\0056'
}
.btn {
border: none;
background: 0 0;
border-radius: 6px;
line-height: 1em;
transition: all .2s linear;
min-width: 195px;
}
.btn--small {
padding: 8px 20px
}
.btn--medium {
padding: 14px 22px;
font-size: 1.2em
}
.btn--large {
font-size: 1.4em;
font-weight: 800;
padding: 17px 48px
}
.btn--white {
background: #8dc63f;
color: #ffffff
}
.btn--main,
.btn--white:hover {
background: #071b1b;
color: #fff
}
.btn--white:hover {
background: #fff;
color: #071b1b;
}
.btn--main {
border: 1px solid #39BF93;
background-color: #39BF93;
font-weight: 700;
border-radius: 16px;
}
.btn--main:hover {
background: #36B389;
box-shadow: 0px 6px 12px #39BF934D;
color: #ffffff;
}
.btn--main:active {
background: #32A67F;
}
.btn--outline {
color: #fff;
border: 1px solid #fff
}
.btn--outline:hover {
background: #fff;
color: #071b1b
}
.btn--icon {
position: relative;
padding-left: 50px;
padding-right: 15px
}
.btn--icon i {
position: absolute;
font-size: 1.2em;
vertical-align: middle;
left: 10px;
top: 5px
}
.btn2 {
background: 0 0;
border-radius: 5px;
font-weight: 700
}
.btn2--std {
background: #8dc63f;
color: #0a2828;
border: 2px solid transparent;
-webkit-box-shadow: 3px 3px 3px 0 rgba(0, 0, 0, .75);
-moz-box-shadow: 3px 3px 3px 0 rgba(0, 0, 0, .75);
box-shadow: 3px 3px 3px 0 rgba(0, 0, 0, .75);
}
.btn2--outline {
color: #fff;
border: 1px solid #fff;
}
.btn2--medium {
padding: 12px 20px;
font-size: 1.2em
}
.btn2--small {
padding: 9px 17px 10px;
font-size: .9em
}
.btn2--large {
padding: 15px 20px;
font-size: 1.6em;
margin: 15px;
}
.btn2--fixed {
padding-left: 0;
padding-right: 0;
width: 120px
}
.btn2--green {
background: #071b1b
}
.fb_btn {
border: 1px solid #2699FB;
border-radius: 24px;
color: #2699FB;
font-weight: 700;
text-decoration: inherit
}
.fb_btn:hover {
background: #fff;
border: 1px solid #4267b2;
color: #4267b2
}
.deactivated {
cursor: default;
pointer-events: none;
opacity: .5
}
.form-group {
position: relative;
color: #ffffff;
text-align: left;
margin-bottom: 25px
}
@media (max-width: 1025px) {
.form-group {
margin-bottom: 20px
}
}
.form-group__label {
display: block
}
.form-group__textfield {
font-family: 'Montserrat', sans-serif;
display: inline-block;
position: relative;
outline: 0;
border: none;
background: 0 0;
width: 100%;
padding: 12px 0 12px 0;
color: #666666;
border: 1px solid #39BF93;
border-radius: 24px;
margin-top: 15px;
text-align: center;
transition: all .3s cubic-bezier(.64, .09, .08, 1)
}
.mobile.form-group__textfield:hover, .password.form-group__textfield:hover, .username.form-group__textfield:hover, .edit_prof_input input:hover, .edit_prof_input.user input:hover {background-color:#f3f3f3;}
.form-group__textfield:active,
.form-group__textfield:focus {}
input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */
input:focus::-moz-placeholder { color:transparent; } /* FF 19+ */
input:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */
@media (min-width: 320px) {
.form-group__textfield {
font-size: 0.7em
}
}
.form-group--icon i {
position: absolute;
top: 2px;
left: 0;
font-size: 2em
}
.form-group--checkbox label:before,
.form-group--radio label:before {
text-align: center;
vertical-align: middle;
}
.form-group--icon>input {
margin: 0 auto;
width: 100%;
display: block;
max-width: 315px;
}
.form-group--icon .form-group__feedback {
margin-left: 45px
}
.form-group--checkbox input,
.form-group--checkbox label {
vertical-align: middle
}
.form-group--checkbox label {
padding-left: 6px;
color: #666666;
font-weight: 500;
font-size: 0.9em;
}
.form-group--checkbox label:before {
content: '';
background: url(../images/icon-unchecked.svg) no-repeat;
display: inline-block;
width: 30px;
height: 33px;
margin-right: 5px;
}
.form-group--checkbox input {
display: none
}
.form-group--checkbox input:checked+label:before {
content: '';
background: url(../images/icon-rememberme.svg) no-repeat;
}
.form-group--or {
/* margin: 5vh 0; */
width: 100%;
display: block
}
.form-group--or div {
text-align: center
}
.form-group--or div span {
font-weight: 700;
color: #39BF93;
text-align: center;
display: inline-block;
width: 100%;
position: relative;
z-index: 2;
}
.form-group--or div span::before,
.form-group--or div span::after {
display: inline-block;
content: "";
border-top: 1px solid #39BF93;
width: 30%;
margin: 0 11px;
transform: translateY(-0.4rem);
padding: 0;
}
.form-group--radio input,
.form-group--radio label {
vertical-align: middle
}
.form-group--radio label {
margin-left: -2px
}
.form-group--radio label:before {
content: '\0050';
display: inline-block;
width: 22px;
height: 25px;
margin-right: 10px
}
.form-group--radio input {
display: none
}
.form-group--radio input:checked+label:before {
content: '\004f'
}
.form-group__feedback {
display: block;
padding-top: 8px
}
.form-group__code {
display: block;
padding-top: 30px;
font-size: 14px;
font-style: italic
}
.form-group__code a {
font-style: normal;
font-weight: 700;
color: #7f8c8d;
text-decoration: underline
}
.form-feedback.warning,
.form-group.has-warning .form-group__feedback,
form.has-warning .form-feedback {
color: #FF0000;
font-size: 0.8em;
font-weight: 500;
text-align: center;
margin-left: 0;
}
.form-group__suggestion {
margin-top: 10px;
margin-left: 45px
}
.form-group__suggestion .form-group {
margin-bottom: 0
}
.form-group.has-warning {
margin-bottom: 15px
}
.form-group.has-warning .form-group__textfield {
border: 2px solid #FF0000;
background-color: #FFF2F2;
}
.form-group.has-success .form-group__textfield {
border-bottom: 2px solid #7f8c8d
}
.form-group .reg_notice {
font-size: 12px;
line-height: 14px;
font-weight: 400;
padding-top: 0;
margin-top: 25px
}
form .form-feedback {
display: block;
text-align: left
}
form .fb_span {
display: block;
text-align: left;
margin-bottom: 20px;
font-weight: 600
}
.fb_login .fb_btn,
.form-help {
text-align: center
}
.fb_login .fb_btn {
margin: 20px auto;
display: block;
max-width: 66%;
height: 45px;
border: 1px solid #2699FB;
border-radius: 24px;
}
@media (max-width: 485px) {
.fb_login .fb_btn {
max-width: 80%
}
}
.fb_login .fb_btn span {
font-size: 1em;
line-height: 45px;
font-weight: 700;
}
@media (max-width: 410px) {
.fb_login .fb_btn span {
font-size: 105%;
line-height: 2.4em
}
}
@media (max-width: 385px) {
.fb_login .fb_btn {
max-width: 85%
}
.fb_login .fb_btn span {
font-size: 110%;
line-height: 2.5em;
width: 115%;
display: inline-block;
text-align: center;
min-width: 186px;
position: relative;
left: -15px
}
}
@media (max-width: 340px) {
.fb_login .fb_btn span {
font-size: 105%
}
}
.fb_login .fb_btn .icon-facebook {
font-size: 1.6em;
top: 8px;
left: 5%
}
@media (max-width: 320px) {
.fb_login .fb_btn .icon-facebook {
left: 2.5%
}
}
.form-help span {
font-weight: 700;
font-size: 1em
}
.form-help__icon {
width: auto !important;
height: 125px;
margin: 25px 0
}
.form-lang-container {
border-bottom: 2px solid #bdc3c7;
height: 37px;
width: 100%;
display: inline-block;
position: relative;
cursor: pointer
}
.form-lang-container ul li.active,
.onoffswitch-checkbox {
display: none
}
.form-lang-container:after {
font-family: DUEL;
content: '\004d';
position: absolute;
margin-top: 10px
}
@media (max-width: 576px) {
.form-lang-container:after {
right: 0
}
}
.form-lang-container.active:after {
content: '\004e'
}
.form-lang-container .flag {
margin-top: 5px;
width: 40px;
float: left
}
.form-lang-container ul {
position: absolute;
display: none;
top: 40px;
padding: 5px 5px 0;
width: 100%;
text-align: center;
border: 2px solid #071b1b;
background: #ecf0f1
}
.align-right,
.main-nav {
text-align: right
}
.form-lang-container ul li {
cursor: pointer;
padding-bottom: 10px
}
.form-lang-container ul li img {
margin-right: 5px;
width: 40px;
vertical-align: middle
}
.form-footer {
margin-top: 45px
}
.signup-form .form-footer {
margin-top: 15px;
margin-bottom: 15px
}
.form-feedback.success {
color: #071b1b
}
.onoffswitch {
position: relative;
width: 5.62em;
-webkit-user-select: none
}
.onoffswitch-label {
display: block;
overflow: hidden;
cursor: pointer;
height: 2em;
padding: 0;
line-height: 2em;
border-radius: 2em;
background-color: #071b1b;
transition: all .3s ease-in
}
.onoffswitch-label:before {
content: "";
display: block;
width: 1.62em;
height: 1.62em;
margin: 0;
background: #FFF;
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
bottom: 0;
right: 3.81em;
border-radius: 1.62em;
transition: all .3s ease-in 0s
}
.onoffswitch-label span:after,
.onoffswitch-label span:before {
position: absolute;
color: #fff;
margin-top: 0;
font-size: 1.3em;
font-weight: 500;
right: .8em;
transition: opacity .15s ease-in-out .15s
}
.black-overlay,
header.header-main {
position: fixed;
top: 0;
width: 100%;
left: 0
}
.ios ul li a.active,
.main-nav__lang li a.active,
.main-nav__lang li a:hover,
.main-nav__lang li.dropdown.open>a,
.main-nav__list li a.active,
.main-nav__list li a:hover,
.main-nav__list li.dropdown.open>a,
.nav-dropdown li a.active,
.nav-dropdown li a:hover {
font-weight: 800
}
.onoffswitch-label span:after {
content: "OFF";
opacity: 1
}
.onoffswitch-label span:before {
content: "ON";
right: 2.1em;
opacity: 0
}
.onoffswitch-checkbox:checked+.onoffswitch-label {
background-color: #8dc63f
}
.onoffswitch-checkbox:checked+.onoffswitch-label span:after {
opacity: 0
}
.onoffswitch-checkbox:checked+.onoffswitch-label span:before {
opacity: 1
}
.onoffswitch-checkbox:checked+.onoffswitch-label,
.onoffswitch-checkbox:checked+.onoffswitch-label:before {
border-color: #8dc63f
}
.onoffswitch-checkbox:checked+.onoffswitch-label:before {
right: 3px
}
@keyframes switch_txt {
0% {
opacity: 0
}
100% {
opacity: 1
}
}
.black-overlay {
height: 100%;
background: #000;
opacity: .5;
z-index: 999;
display: none;
}
header.header-main {
background-color: #071b1b;
height: 60px;
color: #fff;
line-height: 60px;
z-index: 9000;
padding: 0 15px
}
header.header-main .container {
height: 100%
}
header.header-main .logo-header img {
position: absolute;
display: block;
top: 50%;
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
max-height: 35px
}
@media (max-width: 1025px) {
header.header-main .logo-header img {
max-width: 140px
}
}
@media (max-width: 767px) {
header.header-main .logo-header img {
max-width: 120px
}
}
header.header-main .loghide {
display: none
}
.main-nav {
font-size: 1.1em;
width: 100%;
float: right;
}
.main-nav__lang,
.main-nav__list {
display: inline-block
}
.main-nav__lang>li:hover>a:after,
.main-nav__list>li:hover>a:after {
height: 3px
}
.main-nav__lang li,
.main-nav__list li {
display: inline-block;
padding: 0 13px
}
.main-nav__lang li a,
.main-nav__list li a {
color: #292966;
display: block;
position: relative;
top: -2px
}
.main-nav__lang li.dropdown i,
.main-nav__lang li.dropdown.open i,
.main-nav__list li.dropdown i,
.main-nav__list li.dropdown.open i {
top: 3px;
position: relative
}
.main-nav__lang li a:after,
.main-nav__list li a:after {
color: #fff;
position: absolute;
content: "";
bottom: 4px;
width: 100%;
left: 0;
height: 0;
background-color: #fff;
transition: height .2s ease-in-out
}
.main-nav__lang li a.active:after,
.main-nav__lang li a:hover:after,
.main-nav__lang li.dropdown.open>a:after,
.main-nav__list li a.active:after,
.main-nav__list li a:hover:after,
.main-nav__list li.dropdown.open>a:after {
height: 3px
}
.main-nav__lang li.dropdown,
.main-nav__list li.dropdown {
position: relative;
z-index: 0;
}
@media (max-width: 1025px) {
.main-nav__lang li.dropdown,
.main-nav__list li.dropdown {
padding-right: 8px;
}
}
.main-nav__lang li.dropdown.open ul,
.main-nav__list li.dropdown.open ul {
display: block
}
.main-nav__lang li.dropdown.open i:before,
.main-nav__list li.dropdown.open i:before {
-ms-transform: scale(1, -1);
transform: scale(1, -1)
}
.main-nav__lang li.dropdown i:before,
.main-nav__list li.dropdown i:before {
transition: transform .2s linear
}
.main-nav__lang li.dropdown .icon-planet,
.main-nav__list li.dropdown .icon-planet {
font-size: 22px !important
}
.main-nav__lang li.dropdown .icon-arrow-down,
.main-nav__list li.dropdown .icon-arrow-down {
margin-left: 10px !important
}
.main-nav__lang li.dropdown ul,
.main-nav__list li.dropdown ul {
position: absolute;
background-color: #ffffff;
padding: 8px 0;
left: 0px;
margin-top: 0;
width: 55px;
display: none;
border-radius: 0 0 20px 20px;
box-shadow: 8px 14px 15px #0404044D;
}
.main-nav__lang li.dropdown ul li,
.main-nav__list li.dropdown ul li {
display: block;
line-height: 1.2em;
padding: 4px 12px
}
.main-nav__lang ul>li a {
text-align: center
}
.main-nav__lang ul>li a:after {
display: none
}
@media (min-width: 1025px) {
.main-nav__list {
display: inline-block !important
}
}
@media (max-width: 1025px) {
.main-nav__list {
display: none;
position: fixed;
top: 60px;
height: auto;
width: 100%;
left: 0;
text-align: left;
background-color: #071b1b;
z-index: 1000;
border-top: 1px solid #ababab
}
.main-nav__list>li {
display: block;
width: 100%;
padding: 0 0 1px
}
.main-nav__list>li a {
padding-left: 10px;
line-height: 2.2em
}
.main-nav__list>li a.active:after,
.main-nav__list>li a:hover:after {
height: 1px
}
}
.main-nav__list__buttons {
margin: 20px 10px 15px;
padding: 0 20px 0 0 !important
}
@media (min-width: 1025px) {
.main-nav__list__buttons {
display: none !important
}
}
.main-nav__list__buttons a {
padding: 8px 20px !important;
line-height: 1em !important
}
.main-nav__list__buttons a:first-child {
float: left
}
.main-nav__list__buttons a:nth-child(2) {
float: right
}
.main-nav__list__buttons a:after {
display: none
}
.main-nav__list__buttons a.btn--white {
color: #071b1b
}
.main-nav .btn {
display: inline-block;
vertical-align: middle;
height: 33px
}
.main-nav .btn:last-child {
margin-left: 18px
}
.main-nav .login-btn-nav {
margin-right: 10px
}
.main-nav--home .main-nav__list li {
padding: 0
}
@media (max-width: 1025px) {
.main-nav .login-btn-nav {
margin-right: 0;
border: none;
border-radius: 0;
border-left: 2px solid #fff;
font-size: 1.2em;
height: 45px
}
.main-nav .login-btn-nav i {
top: 11px
}
.main-nav .login-btn-nav:hover {
background: 0 0;
color: inherit
}
.main-nav .login-btn-nav span {
display: none
}
.main-nav--home .main-nav__list {
display: block;
text-align: center;
height: 60px
}
.main-nav--home .main-nav__list li {
display: inline-block;
margin-left: -5px;
width: 20%
}
}
@media (min-width: 1025px) {
.main-nav--home .main-nav__list li {
margin: 0 5px
}
}
.main-nav--home .main-nav__list li:nth-child(5) {
margin: 0
}
.main-nav--home .main-nav__list li a {
font-size: 2.1em;
padding: 0 10px;
line-height: 60px
}
@media (max-width: 500px) {
.main-nav--home .main-nav__list li a {
font-size: 1.8em
}
}
@media (max-width: 1025px) {
.main-nav--home .main-nav__list li a {
line-height: 59px
}
.main-nav--home .main-nav__list li a.active:after,
.main-nav--home .main-nav__list li a:hover:after {
height: 3px
}
}
.main-nav--home .main-nav__list li a img {
height: 32px;
vertical-align: middle;
margin-top: -5px
}
@media (max-width: 992px) {
.main-nav--home .main-nav__list li a img {
height: 35px;
margin-top: -7px
}
}
.main-nav--home .main-nav__list li a.icon-bubble {
position: relative
}
.main-nav--home .main-nav__list li a.icon-bubble>div {
position: relative;
max-width: 50px;
margin: 0 auto
}
.main-nav--home .main-nav__list li a.icon-bubble span {
position: absolute;
font-size: .4em;
border: 1px solid #fff;
height: 25px;
width: 25px;
top: 7px;
right: 1px;
line-height: 23px;
border-radius: 25px;
text-align: center;
background: #071b1b
}
.main-nav--home .main-nav__list li a.avatar,
.nav__toggle {
position: relative
}
@media (max-width: 1024px) {
.main-nav--home .main-nav__list li a.icon-bubble span {
left: 50%;
right: auto
}
}
@media (min-width: 1025px) {
.main-nav--home .main-nav__list li a.avatar {
text-align: left
}
}
.main-nav--home .main-nav__list li a.avatar img {
display: inline-block;
border-radius: 50%;
width: 40px;
height: 40px;
vertical-align: middle;
margin-top: -9px
}
@media (max-width: 1025px) {
.main-nav--home .main-nav__list li a.avatar img {
margin-top: -5px;
width: 40px;
height: 40px
}
}
.main-nav--home .main-nav__list li a.avatar span {
position: relative;
font-size: .4em;
vertical-align: middle;
line-height: 1;
margin-top: -7px;
display: inline-block;
margin-left: 25px
}
.main-nav--home .nav_nostore li.store_hide,
.nav__toggle {
display: none
}
@media (max-width: 1025px) {
.main-nav--home .nav_nostore li {
width: 24%;
margin-left: -3px
}
.nav__toggle {
display: inline-block
}
}
.nav__toggle {
vertical-align: middle;
width: 24px;
height: 20px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
cursor: pointer;
background: 0 0;
padding: 0
}
.nav__toggle span {
display: block;
position: absolute;
left: 0;
right: 0;
height: 2px;
background: #fff
}
.nav__toggle span:after,
.nav__toggle span:before {
position: absolute;
display: block;
left: 0;
width: 100%;
height: 2px;
background-color: #fff;
content: "";
transition-duration: .3s, .3s;
transition-delay: .3s, 0s
}
.footer-nav__list li a.active:after,
.footer-nav__list li a:hover:after,
.footer-nav__list>li:hover>a:after {
height: 3px
}
.nav__toggle span:before {
transition-property: top, transform;
top: -9px
}
.nav__toggle span:after {
transition-property: bottom, transform;
bottom: -9px
}
.nav__toggle.active span {
background: 0 0 !important
}
.ios,
.nav-dropdown {
background: #071b1b;
right: 15px;
text-align: left
}
.nav__toggle.active span:after,
.nav__toggle.active span:before {
transition-delay: 0s, .3s
}
.nav__toggle.active span:before {
top: 0;
-ms-transform: rotate(45deg);
transform: rotate(45deg)
}
.nav__toggle.active span:after {
bottom: 0;
-ms-transform: rotate(-45deg);
transform: rotate(-45deg)
}
.ios ul li a:after,
.nav-dropdown li a:after {
content: "";
bottom: -12px;
border-bottom: 2px solid #fff;
left: 0
}
.nav__toggle--home {
display: inline-block;
margin-top: -20px;
margin-left: 16px
}
.nav-dropdown {
position: absolute;
display: none;
top: 60px;
width: 450px;
padding: 10px 0 0
}
@media (max-width: 1025px) {
.nav__toggle--home {
margin-top: 0
}
.nav-dropdown {
top: 120px
}
}
@media (max-width: 500px) {
.nav-dropdown {
width: 100%;
margin: 0 -15px
}
}
.nav-dropdown--small {
width: auto
}
.nav-dropdown .dp-buttons {
padding: 0 15px
}
.nav-dropdown__buttons {
padding: 15px
}
.nav-dropdown__buttons a:first-child {
float: left
}
.nav-dropdown__buttons a:nth-child(2) {
float: right
}
.nav-dropdown li {
line-height: 1;
padding: 12px 0
}
.nav-dropdown li a {
color: #fff;
position: relative;
width: 100%;
display: block;
padding: 0 20px
}
.nav-dropdown li a:after {
position: absolute;
width: 100%;
display: none
}
.nav-dropdown li a.active:after,
.nav-dropdown li a:hover:after {
display: block
}
.ios {
position: absolute;
display: none;
top: 60px;
width: 450px;
padding: 10px 0 0
}
.ios ul li a,
.ios ul li a.active:after {
display: block
}
.get-started,
.get-started .tablet,
.get-started-mobile,
.get-started-mobile .tablet {
background-repeat: no-repeat
}
@media (max-width: 500px) {
.ios {
width: 100%;
margin: 0 -15px
}
}
.ios--small {
width: auto
}
.ios .dp-buttons {
padding: 0 15px
}
.ios ul li {
line-height: 1;
padding: 12px 0
}
.ios ul li a {
color: #fff;
position: relative;
width: 100%;
padding: 0 20px
}
.ios ul li a:after {
position: absolute;
width: 100%;
display: none
}
.footer-nav__list,
.footer-nav__list li {
display: inline-block
}
.footer-nav {
text-align: center;
font-size: 80%
}
.footer-nav__list li {
padding: 0 6px
}
.footer-nav__list li a {
color: #666666;
display: block;
position: relative;
bottom: 6px;
font-weight: 600;
}
.footer-nav__list li a.active,
.footer-nav__list li a:hover {
font-weight: 700
}
.get-started {
min-height: 100vh;
height: 100%;
background: #F6CF46;
background: repeating-linear-gradient(#F6CF46, #F6CF46 49.9%, #f2f2f2 50.1%, #f2f2f2 100%);
background: no-repeat center right/20%, repeating-linear-gradient(#F6CF46, #F6CF46 69%, #f2f2f2 50.1%, #f2f2f2 100%);
background-position: left center, center center;
background-repeat: repeat;
color: #666666;
padding-top: 60px;
overflow: hidden
}
@media (max-width: 1025px) {
.ios {
top: 120px
}
}
@media (min-width: 2200px) {
.get-started .prize-img img {
min-width: 135%
}
}
.get-started .prize-img {
display: block;
max-width: 592px;
min-height: 35vh;
width: 100%;
height: auto;
margin: 8% auto 0;
text-align: center
}
@media (min-width: 1919px) {
.get-started .prize-img {
min-height: 32vh;
position: relative;
right: 5%
}
}
@media (max-width: 1681px) {
.get-started .prize-img {
margin-top: 0
}
}
@media (max-width: 1366px) and (max-height:680px) and (orientation:landscape) {
.get-started .prize-img {
max-width: 440px;
min-height: 35vh;
margin-top: -3%
}
}
@media (max-width: 1280px) and (min-height:801px) and (orientation:landscape) {
.get-started .prize-img {
margin-top: 13%;
min-height: 28vh
}
}
@media (min-height: 1023px) and (max-width:1366px) and (orientation:landscape) {
.get-started .prize-img {
min-height: 30vh;
margin: 13% auto 0
}
}
.get-started .prize-img img {
display: block;
margin: 0 auto
}
@media (max-width: 1440px) {
.get-started .prize-img img {
width: 96%
}
}
@media (max-width: 1366px) {
.get-started .prize-img img {
width: 92%
}
}
.get-started .tablet {
background-image: url(../images/Get-Started_tablet.png);
height: 100%;
min-height: 66.5vh;
background-size: contain;
background-position: center bottom;
width: 100%;
overflow-y: hidden
}
@media (max-width: 1366px) and (max-height:730px) and (orientation:landscape) {
.get-started .tablet {
min-height: 59.9vh !important
}
}
@media (max-height: 1000px) {
.get-started .tablet {
min-height: 64.5vh
}
}
@media (max-height: 850px) {
.get-started .tablet {
min-height: 62.5vh
}
}
.get-started .button {
display: block;
margin: 40px auto
}
.get-started .button a {
padding: 17px 80px;
border-radius: 11px;
letter-spacing: 1px
}
@media (min-width: 1919px) {
.get-started .prize-img img {
min-width: 120%
}
.get-started .button a {
font-size: 2.2em
}
}
@media (max-width: 1366px) {
.get-started .button a {
padding: 15px 60px
}
}
@media (max-width: 1280px) {
.get-started .button a {
padding: 15px 50px
}
}
.get-started__free_trial {
position: fixed;
right: 0;
bottom: calc(8vh - 40px);
width: 100%;
max-width: 255px;
z-index: 5
}
@media (max-width: 1921px) {
.get-started__free_trial {
bottom: calc(8vh - 48px)
}
}
@media (max-width: 1921px) and (min-height:1100px) {
.get-started__free_trial {
bottom: calc(8vh - 53px)
}
}
@media (max-width: 1681px) {
.get-started__free_trial {
bottom: calc(8vh - 30px)
}
}
@media (max-width: 1440px) {
.get-started__free_trial {
bottom: calc(8vh - 29px)
}
}
@media (max-width: 1367px) {
.get-started__free_trial {
max-width: 215px;
bottom: calc(6vh - 4px)
}
}
@media (max-width: 1281px) {
.get-started__free_trial {
bottom: calc(6vh - 5px)
}
}
@media (max-width: 1280px) and (min-height:801px) {
.get-started .button a {
font-size: 2em
}
.get-started__free_trial {
bottom: calc(6vh - 20px)
}
}
@media (max-width: 1025px) {
.get-started__free_trial {
bottom: calc(7vh - 20px);
max-width: 200px
}
}
@media (min-height: 1024px) and (max-height:1366px) and (orientation:portrait) {
.get-started__free_trial {
bottom: calc(7vh - 95px)
}
}
@media (min-height: 1024px) and (max-height:1366px) and (max-width:801px) and (orientation:portrait) {
.get-started__free_trial {
bottom: calc(7vh - 53px)
}
}
@media (min-height: 1023px) and (max-width:1366px) and (orientation:landscape) {
.get-started__free_trial {
bottom: calc(6vh - 20px)
}
}
@media (min-height: 1365px) and (max-width:1024px) and (orientation:portrait) {
.get-started__free_trial {
bottom: calc(6vh - 42px)
}
}
@media (max-width: 768px) and (max-height:1024px) and (orientation:portrait) {
.get-started__free_trial {
bottom: calc(7vh - 35px)
}
}
@media (max-width: 600px) {
.get-started__free_trial {
bottom: calc(7vh - 29px);
max-width: 200px
}
}
@media (max-width: 450px) {
.get-started__free_trial {
bottom: calc(7vh - 9px);
max-width: 140px
}
}
@media (max-width: 450px) and (min-height:822px) {
.get-started__free_trial {
bottom: calc(7vh - 17px);
max-width: 140px
}
}
@media (max-width: 385px) {
.get-started__free_trial {
bottom: calc(7vh - 2px);
max-width: 120px
}
}
@media (max-width: 375px) {
.get-started__free_trial {
bottom: calc(7vh - 4px);
max-width: 120px
}
}
@media (max-width: 375px) and (min-height:812px) {
.get-started__free_trial {
bottom: calc(7vh - 15px);
max-width: 140px
}
}
@media (max-height: 480px) {
.get-started__free_trial {
bottom: calc(7vh + 1px)
}
}
@media (max-width: 320px) {
.get-started__free_trial {
bottom: calc(7vh + 5px)
}
}
@media (max-width: 320px) and (min-height:481px) {
.get-started__free_trial {
bottom: calc(7vh + 3px)
}
}
.get-started .free_off {
display: none
}
.get-started-mobile {
background-image: url(../images/get_started_bg.jpg);
background-size: cover;
background-position: 50% 100%;
width: 100%;
height: 100vh;
padding-top: 75px;
overflow: hidden
}
@media (min-width: 1025px) {
.get-started-mobile {
display: none
}
}
@media (max-width: 1024px) and (min-width:1023px) and (max-height:768px) {
.get-started-mobile {
overflow-y: visible;
padding-bottom: 75px
}
}
@media (max-height: 767px) {
.get-started-mobile {
overflow: hidden
}
}
.get-started-mobile .title {
display: block;
margin: 0 auto;
max-width: 90%;
text-align: center;
padding-top: 2%
}
@media (max-width: 400px) {
.get-started-mobile .title {
padding-top: 0
}
}
.get-started-mobile h1 {
color: #fff;
font-size: 3em;
line-height: 1em;
display: inline-block;
margin: 0 auto;
text-align: left;
min-height: 5vh
}
@media (max-width: 801px) {
.get-started-mobile h1 {
font-size: 2.7em
}
}
@media (max-width: 500px) {
.get-started-mobile h1 {
font-size: 1.8em
}
}
@media (max-width: 450px) and (min-height:822px) {
.get-started-mobile h1 {
padding: 3% 0
}
}
@media (max-width: 400px) {
.get-started-mobile h1 {
font-size: 1.5em
}
}
@media (max-width: 375px) and (min-height:812px) {
.get-started-mobile h1 {
padding-top: 3%
}
}
@media (max-width: 340px) {
.get-started-mobile h1 {
font-size: 1.3em
}
}
.get-started-mobile .prize-img {
display: block;
max-width: 592px;
min-height: 30vh;
margin: 2% auto 0;
width: 100%;
height: auto;
padding-top: 10px;
text-align: center
}
@media (max-width: 801px) {
.get-started-mobile .prize-img {
min-height: 25vh
}
}
@media (max-width: 500px) {
.get-started-mobile .prize-img {
min-height: 23vh;
margin-top: 0
}
}
@media (max-width: 400px) {
.get-started-mobile .prize-img {
min-height: 21vh
}
}
.get-started-mobile .prize-img img {
max-width: 592px;
width: 100%
}
@media (min-height: 1025px) and (max-height:1366px) and (orientation:portrait) {
.get-started-mobile .prize-img img {
width: 115%;
position: relative;
left: -8%;
max-width: none !important
}
}
@media (max-width: 700px) {
.get-started-mobile .prize-img img {
width: 80%
}
}
@media (max-width: 565px) {
.get-started-mobile .prize-img img {
width: 78%
}
}
@media (max-width: 375px) and (min-height:812px) {
.get-started-mobile .prize-img {
margin-top: 4%
}
.get-started-mobile .prize-img img {
width: 94%
}
}
@media (max-width: 360px) {
.get-started-mobile .prize-img img {
width: 73%
}
}
@media (max-width: 320px) and (max-height:480px) {
.get-started-mobile .prize-img img {
width: 67%
}
}
.get-started-mobile .tablet {
background-image: url(../images/Get-Started_tablet.png);
height: 100%;
min-height: 40vh;
background-size: contain;
background-position: center bottom;
width: 100%;
overflow-y: hidden
}
.get-started-mobile .tablet img {
max-width: 201px;
width: 100%;
visibility: hidden
}
@media (max-width: 320px) {
.get-started-mobile .prize-img {
margin-top: 0
}
.get-started-mobile .tablet {
margin-top: -10px
}
.get-started-mobile .tablet img {
max-width: 150px
}
}
.get-started-mobile .button {
display: block;
margin: 0 auto
}
.get-started-mobile .button a {
display: block;
margin: 4% auto;
max-width: 43%;
min-width: 305px;
text-align: center;
padding: 20px 10px;
border-radius: 11px;
letter-spacing: 1px;
font-size: 2.1em
}
@media (max-width: 1024px) and (min-height:760px) and (orientation:landscape) {
.get-started-mobile .button a {
max-width: 37%
}
}
@media (max-width: 801px) {
.get-started-mobile .tablet {
min-height: 36vh
}
.get-started-mobile .button a {
margin: 3% auto
}
}
@media (max-width: 600px) {
.get-started-mobile .button a {
font-size: 1.8em
}
}
@media (max-width: 500px) {
.get-started-mobile .tablet {
min-height: 32vh
}
.get-started-mobile .button a {
min-width: 280px;
font-size: 1.3em
}
}
@media (max-width: 400px) {
.get-started-mobile .button a {
min-width: 230px;
margin: 10px auto;
padding: 11px 13px;
font-size: 1em
}
}
@media (max-width: 375px) and (min-height:812px) {
.get-started-mobile .button a {
font-size: 1.2em;
margin: 5% auto
}
}
.get-started-mobile .free_off {
display: none
}
.login-page,
.signup-page {
min-height: 100vh;
height: 100%;
background: #F6CF46;
background: repeating-linear-gradient(#F6CF46, #F6CF46 49.9%, #E6E6E6 50.1%, #E6E6E6 100%);
background: no-repeat center right/30%, repeating-linear-gradient(#F6CF46, #F6CF46 49.9%, #E6E6E6 50.1%, #E6E6E6 100%);
background-position: left center, center center;
background-repeat: repeat;
color: #666666;
padding-top: 60px
}
@media (max-width: 992px) {
.login-page,
.signup-page {
padding-top: 70px
}
}
.login-page--right,
.signup-page--right {
position: relative;
margin: 0 auto;
padding: 30px 0 60px;
max-width: 450px;
text-align: center
}
@media (max-width: 767px) {
.login-page--right,
.signup-page--right {
padding: 10px 0 60px
}
}
@media (max-width: 340px) {
.get-started-mobile .button a {
min-width: 180px
}
.login-page--right,
.signup-page--right {
padding: 0 0 60px
}
}
.login-page--right img,
.signup-page--right img {
max-width: 250px;
width: 100%
}
.login-page__create-account,
.signup-page__create-account {
font-size: 1.1em
}
.login-page__create-account span,
.signup-page__create-account span {
margin-right: 5px
}
.login-graphic {
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 100%;
background-image: url(../images/Login_desktop.jpg)
}
@media (max-width: 1366px) and (max-height:715px) and (orientation:landscape) {
.login-graphic {
background-size: 100% 130%;
background-position: 50% 83%
}
}
.login-graphic h1 {
text-transform: uppercase;
font-size: 3.2em;
color: #fff;
text-align: center;
padding: 30px 50px
}
.login-graphic .login-page--left {
position: absolute;
bottom: 42.86px;
left: 0;
z-index: 2;
width: 100%;
min-height: 64vh;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: end;
justify-content: flex-end
}
.login-graphic .login-page--left .left-img {
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
width: 85%
}
@media (max-height: 800px) {
.login-graphic .login-page--left .left-img {
width: 66%
}
}
@media (max-height: 637px) {
.login-graphic .login-page--left .left-img {
width: 60%
}
}
.login-form {
margin-top: 20px
}
.login-form__forgot-password {
text-align: right;
line-height: 30px;
display: flex;
flex-direction: column;
}
.login-form__forgot-password a {
font-size: 0.9em;
font-weight: 500;
color: #0055FF;
vertical-align: middle
}
@media (max-width: 767px) {
.login-form {
margin-top: 25px
}
.login-form .form-group--checkbox,
.login-form__forgot-password a {
font-size: .8em
}
}
.login-form .btn {
margin-top: 25px;
margin-bottom: 35px
}
.login_create_account {
margin-bottom: 20px;
}
.login-form .login-bottom {
padding-top: 25px
}
.signup-form .btn {
margin-top: 10px
}
.two_step_reg .signup-form {
margin-top: 30px
}
.two_step_reg .form-help span {
font-size: 120%
}
.operators_radio {
margin-bottom: 7px;
color: #39BF93;
font-size: 15px;
position: relative
}
.operators_radio_inline {
display: inline-block
}
.operators_radio_inline+.operators_radio_inline {
margin-left: 10px
}
.operators_radio span {
position: relative;
padding-left: 20px;
display: inline-block
}
.operators_radio span:after {
content: '';
width: 22px;
height: 22px;
border: 1px solid;
position: absolute;
left: 0;
top: -20px;
border-radius: 100%;
-ms-border-radius: 100%;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
box-sizing: border-box;
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
display: inline-block
}
.operators_radio input[type=radio] {
cursor: pointer;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0;
filter: alpha(opacity=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"
}
.operators_radio input[type=radio]:checked+span {
color: #39BF93
}
.operators_radio input[type=radio]:checked+span:before {
content: '';
width: 12px;
height: 12px;
position: absolute;
background: #39BF93;
left: 5px;
top: -15px;
border-radius: 100%;
-ms-border-radius: 100%;
-moz-border-radius: 100%;
display: inline-block
}
.operators_icon {
width: auto !important;
height: 50px;
margin: 25px 0 0;
max-width: 80px
}
.operators_selection_wrap p {
text-align: left;
color: #666666;
font-size: 0.9em;
font-weight: 500;
}
.operators_error_msg {
color: #e74c3c;
text-align: left
}
.progressbar-container {
width: 100%;
margin: 30px auto
}
/* .progress {
margin: 0;
padding: 0;
display: -ms-flexbox;
display: flex;
width: 100%;
-ms-flex-pack: justify;
justify-content: space-between;
color: #fff
} */
.progress>li {
position: relative;
text-align: center;
font-size: 1.2em;
width: calc(100%/3)
}
.progress.twoStepList>li {
width: calc(100%/2);
}
.progress>li:before {
content: attr(data-step);
display: block;
margin: 0 auto .25em;
background: #3c6749;
width: 36px;
height: 36px;
text-align: center;
line-height: 36px;
border-radius: 100%;
position: relative;
z-index: 1000;
font-weight: 700
}
.progress>li:after {
content: '';
position: absolute;
display: block;
background: #3c6749;
width: 135%;
height: 3px;
top: 18px;
left: 50%;
z-index: 0
}
.progress.twoStepList>li:after {
width: 170%;
}
.game-history:before,
.game-main__category span,
.modal--welcome .daily-prizes li:before,
.modal--welcome .modal__body:before {
content: ""
}
.game-history:before,
.game-history__avatars {
z-index: 1;
left: 0;
width: 100%;
position: absolute
}
.progress>li:first-child:before {
margin-left: 0
}
.progress>li:first-child:after {
left: 15%
}
.progress>li:last-child:before {
margin-right: 0
}
.progress>li:last-child:after {
display: none
}
.progress>li.is-complete {
color: #071b1b
}
.progress>li.is-complete:after,
.progress>li.is-complete:before {
color: #0f3d3d;
background: #8dc63f;
}
.progress>li.is-active {
color: #3498DB
}
.progress>li.is-active:before {
border: 2px solid #8dc63f;
color: #fff;
background: #3c6749;
line-height: 32px
}
.home {
margin-top: 60px;
background: #eef2f3
}
@media (max-width: 1025px) {
.home {
margin-top: calc(60px *2)
}
}
@media (max-width: 767px) {
.home .carousel__nav {
display: none
}
}
.play-btn {
position: relative;
max-width: 1140px;
margin: 40px auto 40px;
text-align: center;
padding: 25px 15px 0;
border-radius: 15px;
background: #325f40;
overflow: hidden;
max-height: 200px;
}
@media (max-width: 768px) {
.play-btn {
height: 115px;
width: 90%;
margin: 40px;
}
}
@media (min-width: 768px) {
.play-btn {
height: 200px;
}
}
.play-btn .games-left {
position: absolute;
width: 334px;
height: 334px;
font-size: 1.5em;
background: #5e7d34;
padding: 5% 0;
top: -10%;
left: -5%;
border-radius: 50%;
}
@media (min-width: 1025px) {
.play-btn .games-left {}
}
@media (max-width: 768px) {
.play-btn .games-left {
font-size: 16px;
padding: 14% 0;
position: absolute;
width: 289px;
height: 289px;
background: #5e7d34;
top: -57%;
left: -5%;
border-radius: 50%;
}
}
@media (min-width: 768px) and (max-width: 768px) {
.play-btn .games-left {
font-size: 16px;
padding: 14% 0;
position: absolute;
width: 289px;
height: 289px;
background: #5e7d34;
top: -20%;
left: -5%;
border-radius: 50%;
}
}
@media (max-width: 576px) {
.play-btn .games-left {
font-size: 15px;
top: -41%;
left: -13%;
}
}
@media (max-width: 480px) {
.play-btn .games-left {
font-size: 15px;
top: -28%;
left: -21%;
}
}
.play-btn .games-left__num {
font-size: 2.4em;
display: block;
color: #fff;
font-weight: 700;
position: relative;
}
@media (max-width: 768px) {
.play-btn .games-left__num {}
}
.play-btn .games-left--zero .games-left__num {
color: #e74c3c
}
.play-btn .games-left__text {
color: #fff;
font-weight: bold;
display: inline-table;
text-align: right;
position: relative;
right: 10px;
}
.play-btn .home-avatar {
width: 49%;
display: inline-block
}
@media (max-width: 1024px) {
.play-btn .home-avatar {
width: 24%
}
}
@media (max-width: 465px) {
.play-btn .home-avatar {
width: 20%
}
}
.play-btn .home-avatar img {
position: absolute;
bottom: 0;
left: 33%;
width: 100%;
max-width: 190px
}
@media (max-width: 1300px) {
.play-btn .home-avatar img {
left: 30%
}
}
@media (max-width: 1024px) {
.play-btn .home-avatar img {
left: 24%
}
}
@media (max-width: 767px) {
.play-btn .home-avatar img {
max-width: 170px;
left: 15%
}
}
@media (max-width: 576px) {
.play-btn .home-avatar img {
max-width: 145px;
left: 12%
}
.play-btn .home-avatar img {
max-width: 115px;
left: 10%
}
.play-btn .home-avatar img {
max-width: 85px;
left: 16%
}
}
@media (max-width: 355px) {
.play-btn .home-avatar img {
max-width: 74px;
left: 12%
}
}
@media (min-width: 769px) {
.play-btn .home-playbtn {
position: relative;
top: 20%;
transform: translateY(-20%);
}
}
@media (max-width: 768px) {
.play-btn .home-playbtn {
position: relative;
top: 6%;
transform: translateY(-6%);
}
}
.play-btn .home-playbtn a {
display: inline-block;
float: right;
background: #8dc63f;
border-radius: 15px;
color: #fff;
width: 40%;
line-height: 50px;
border: 2px solid #fff;
-webkit-box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.75);
box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.75);
}
@media (max-width: 768px) {
.play-btn .home-playbtn a {
width: 150px;
}
}
.play-btn .home-playbtn h1 {
display: block;
font-size: 2.65em;
font-weight: 700;
margin: 0 auto;
font-weight: bold;
padding: 10px 15px;
}
@media (max-width: 1300px) {
.play-btn .home-playbtn h1 {
padding: 10px 15px;
}
}
@media (max-width: 1024px) {
.play-btn .home-playbtn h1 {
font-size: 2.1em;
padding: 10px 15px;
}
}
@media (max-width: 767px) {
.play-btn .home-playbtn h1 {
font-size: 1.9em;
padding: 5px 15px;
}
}
@media (max-width: 576px) {
.play-btn .home-playbtn h1 {
font-size: 1.6em;
}
}
@media (max-width: 480px) {
.play-btn .home-playbtn h1 {
font-size: 1.4em;
}
}
@media (max-width: 400px) {
.play-btn .home-playbtn h1 {
font-size: 1.2em;
}
}
.game-history {
background: #82ac48;
position: relative;
overflow: hidden;
margin-top: -4px
}
.game-history:before {
top: 0;
height: 100%;
background: url(../images/game_history_bg.svg) top repeat;
background-size: 84% auto;
opacity: 0.52;
}
.game-history__avatars {
bottom: -30px
}
.game-history__avatars img {
display: block;
position: absolute;
bottom: 0;
width: 30%
}
.game-history__avatars img:first-child {
left: 0;
max-width: 300px
}
.game-history__avatars img:last-child {
right: 0;
width: 36%;
max-width: 360px
}
.game-history-list {
background: url(../images/dotted.png) repeat-x;
padding: 4px 0;
max-width: 1140px;
margin: 40px auto 0;
z-index: 2;
position: relative;
}
@media (max-width: 1139px) {
.game-history-list {
margin: 40px
}
.play-btn {
width: auto;
margin: 40px;
}
}
@media (max-width: 767px) {
.game-history-list {
font-size: 13px
}
}
@media (max-width: 567px) {
.game-history-list {
margin: 20px
}
.play-btn {
margin: 20px;
}
}
.game-history-list-empty-img-holder {
margin: 0;
padding: 0;
background-color: #eef2f3;
}
.game-history-list h2 {
text-align: center;
font-size: 2em;
color: #7f8c8d;
font-weight: 700;
background-color: #eef2f3;
padding: 10px 0;
}
@media (max-width: 768px) {
.game-history-list h2 {
font-size: 1.8em
}
}
@media (max-width: 568px) {
.game-history-list h2 {
font-size: 1.6em
}
}
@media (max-width: 400px) {
.game-history-list h2 {
font-size: 1.4em
}
}
.game-history-list .list-item {
border-bottom: 1px solid #ccc;
padding: 10px 10px 15px;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
color: #7f8c8d;
font-size: 1.3em;
background-color: #eef2f3;
}
.game-history-list .list-item:last-child {
border-bottom: 0;
margin-bottom: 0;
padding-bottom: 20px
}
.game-history-list .list-item__avatar {
-ms-flex: 0 0 10%;
flex: 0 0 10%;
max-width: 10%
}
@media (max-width: 767px) {
.game-history-list .list-item__avatar {
-ms-flex: 0 0 20%;
flex: 0 0 20%;
max-width: 20%;
padding-right: 10px
}
}
.game-history-list .list-item__avatar img {
border-radius: 75px;
width: 70px
}
.game-history-list .list-item__info {
-ms-flex: 0 0 75%;
flex: 0 0 75%;
max-width: 75%
}
@media (max-width: 767px) {
.game-history-list .list-item__info {
-ms-flex: 0 0 70%;
flex: 0 0 70%;
max-width: 70%
}
}
.game-history-list .list-item__info span {
display: block
}
.game-history-list .list-item__info__name {
font-weight: 700
}
.game-history-list .list-item.win .list-item__info__result,
.game-history-list .list-item.win .list-item__score {
color: #00ac49
}
.game-history-list .list-item.loose .list-item__info__result,
.game-history-list .list-item.loose .list-item__score {
color: #e74c3c
}
.game-history-list .list-item__score {
-ms-flex: 0 0 15%;
flex: 0 0 15%;
max-width: 15%;
font-weight: 700
}
@media (max-width: 321px) {
.game-history-list .list-item__score {
font-size: 15px
}
}
.home_empty {
padding-bottom: 5%
}
@media (max-width: 767px) {
.game-history-list .list-item__score {
-ms-flex: 0 0 10%;
flex: 0 0 10%;
max-width: 10%
}
.home_empty {
padding-bottom: 20%
}
}
.home_empty img {
display: block;
margin: 0 auto;
max-width: 12.5em;
padding-top: 10px;
padding-bottom: 10px;
}
.home_empty p {
color: #7f8c8d;
line-height: 1.15;
font-size: 1.2em;
font-weight: 400;
text-align: center;
display: block;
background-color: #eef2f3;
padding-bottom: 10%;
}
.arrow_empty {
position: absolute;
display: block;
right: 33%;
top: 70%;
height: 35vh;
z-index: 10
}
.carousel,
.carousel__item {
position: relative
}
@media (max-width: 1700px) {
.arrow_empty {
top: 82%
}
}
@media (max-width: 1600px) {
.arrow_empty {
top: 80%;
height: 30vh
}
}
@media (max-width: 1300px) {
.arrow_empty {
top: 63%;
right: 28%
}
}
@media (max-width: 1024px) {
.arrow_empty {
top: 51%;
right: 15%
}
}
@media (max-height: 800px) {
.arrow_empty {
top: 85%;
height: 35vh
}
}
@media (max-width: 767px) {
.arrow_empty {
top: 47%;
right: 16%;
height: 20vh
}
}
@media (max-width: 600px) {
.arrow_empty {
top: 62%;
right: 9%;
height: 30vh
}
}
@media (max-width: 420px) {
.arrow_empty {
top: 75%;
right: 6%;
height: 36vh
}
}
@media (max-width: 340px) {
.arrow_empty {
top: 98%;
right: 1%;
height: 50vh
}
}
@media (max-height: 569px) {
.arrow_empty {
top: 81%;
right: 1%;
height: 44vh
}
}
@media (max-height: 490px) {
.arrow_empty {
top: 98%;
right: 1%;
height: 50vh
}
}
.carousel__item {
font-size: 15px;
background-image: url(../images/Prize_Banner_Home_Desktop.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
height: 25vw;
min-height: 420px
}
@media (max-width: 1400px) {
.carousel__item {
min-height: 300px;
font-size: 13px;
height: 20vw
}
}
@media (max-width: 1025px) {
.carousel__item {
font-size: 12px;
height: 25vw
}
.carousel__item__content {
padding: 0 10%
}
}
@media (max-width: 768px) {
.carousel__item {
min-height: 230px
}
}
.carousel__item img {
display: block;
width: 100%
}
.carousel__item__content {
color: #fff;
padding: 0 10%;
max-width: 1600px;
margin: 0 auto
}
@media (max-width: 576px) {
.carousel__item {
background-position: 0 50%;
min-height: 200px;
font-size: 10px
}
.carousel__item__content {
padding: 0
}
}
.carousel__item__content h1 {
font-size: 4em;
line-height: 1em;
max-width: 60%;
padding-top: 40px;
margin-left: 45px
}
@media (max-width: 1540px) {
.carousel__item__content h1 {
max-width: 56%
}
}
@media (max-width: 1350px) {
.carousel__item__content h1 {
font-size: 3.4em
}
}
@media (max-width: 1220px) {
.carousel__item__content h1 {
max-width: 54%
}
}
@media (max-width: 1024px) {
.carousel__item__content h1 {
margin-left: 0
}
}
@media (max-width: 768px) {
.carousel__item__content h1 {
font-size: 2.6em;
padding-top: 20px;
margin-left: 0
}
}
@media (max-width: 576px) {
.carousel__item__content h1 {
font-size: 2.1em;
padding-left: 85px;
max-width: 100%;
padding-top: 15px
}
}
.carousel__item__content .prize-icon {
position: absolute;
bottom: 10%;
margin-left: 45px;
display: inline-block;
padding: 1em 2.3em
}
@media (max-width: 1025px) {
.carousel__item__content .prize-icon {
font-size: 7px;
bottom: 5%
}
}
.carousel__item__content .prize-icon img {
vertical-align: middle;
float: left;
width: 4em
}
@media (max-width: 576px) {
.carousel__item__content .prize-icon {
bottom: 10px;
font-size: 5px;
border: none
}
.carousel__item__content .prize-icon img {
float: none
}
}
.carousel__item__content .prize-icon span {
display: block;
font-size: 2.65em;
font-weight: 700;
line-height: 1;
padding-left: 2.3em
}
.carousel__item__content img.prize-image {
position: absolute;
width: 25%;
max-width: 465px;
right: 12%;
bottom: 0
}
@media (max-width: 1400px) {
.carousel__item__content img.prize-image {
max-width: 395px;
right: 12%;
width: 25%
}
}
@media (max-width: 1024px) {
.carousel__item__content .prize-icon {
margin-left: 0
}
.carousel__item__content img.prize-image {
width: 37%
}
}
@media (max-width: 768px) {
.carousel__item__content img.prize-image {
max-width: 280px;
width: 50%;
right: 12%
}
}
@media (max-width: 576px) {
.carousel__item__content .prize-icon span {
padding-left: 0;
padding-top: 10px
}
.carousel__item__content img.prize-image {
width: 44%;
right: 14%;
}
}
@media (max-width: 400px) {
.carousel__item__content img.prize-image {
width: 48%
}
}
@media (max-width: 320px) {
.carousel__item__content img.prize-image {
width: 56%;
right: 10%
}
}
.carousel__nav {
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
color: #fff;
z-index: 101;
width: 100%;
font-size: 2.5em;
padding: 0 30px
}
.carousel__nav>div {
cursor: pointer
}
.carousel__nav .owl-prev {
float: left
}
.carousel__nav .owl-next {
float: right
}
.carousel__dots {
position: absolute;
left: 50%;
-ms-transform: translateX(-50%);
transform: translateX(-50%);
bottom: 0;
z-index: 1
}
.carousel__dots .owl-dot {
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
user-select: none
}
.carousel__dots .owl-dot span {
width: 20px;
height: 20px;
margin: 15px 7px;
background: #9baaaa;
display: block;
-webkit-backface-visibility: visible;
transition: opacity .2s ease;
border-radius: 20px
}
@media (max-width: 767px) {
.carousel__nav {
padding: 0 5px;
font-size: 2em
}
.carousel__dots .owl-dot span {
margin: 10px 7px;
width: 10px;
height: 10px
}
}
.carousel__dots .owl-dot.active span {
background: #fff
}
.generic-carousel {
width: 100%;
z-index: 100;
-webkit-tap-highlight-color: transparent;
position: relative
}
.generic-carousel .owl-stage-outer {
position: relative;
overflow: hidden;
-webkit-transform: translate3d(0, 0, 0)
}
.generic-carousel .owl-stage {
position: relative;
-ms-touch-action: pan-Y
}
.generic-carousel .owl-drag .owl-item {
-webkit-user-select: none;
user-select: none
}
.generic-carousel .owl-item {
min-height: 1px;
float: left;
-webkit-backface-visibility: hidden;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent;
position: relative
}
.game-screen header {
font-size: 15px;
background-color: #071b1b;
height: 10em
}
@media (max-width: 992px) {
.game-screen header {
font-size: 12px
}
}
@media (max-width: 767px) {
.game-screen header {
font-size: 9px
}
}
@media (max-width: 500px) {
.game-screen header {
font-size: 7px
}
}
@media (max-width: 400px) {
.game-screen header {
font-size: 6px;
height: 12em
}
}
@media (min-width: 1024px) and (max-height:700px) {
.game-screen header {
font-size: 12px
}
}
.game-screen header .header-content {
max-width: 1140px;
margin: 0 auto;
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
height: 100%;
background-color: #071b1b;
}
@media (max-width: 1160px) {
.game-screen header .header-content {
padding: 0 1.3em
}
}
.game-screen header .header-content .player {
display: -ms-flexbox;
display: flex;
-ms-flex: 0 0 40%;
flex: 0 0 40%;
max-width: 40%;
-ms-flex-align: center;
align-items: center
}
.game-screen header .header-content .player .profile-image {
width: 30%;
height: 100%
}
.game-screen header .header-content .player .profile-image img {
border-radius: 50%;
border-style: solid;
width: 7em
}
.game-screen header .header-content .player--one {
color: #ffffff
}
.game-screen header .header-content .player--one img {
border-color: #e67e22;
margin-right: 1.4em
}
@media (max-width: 400px) {
.game-screen header .header-content .player .profile-image img {
height: auto;
width: 42px
}
.game-screen header .header-content .player--one img {
margin-right: 0
}
}
.game-screen header .header-content .player--one li.correct {
background: url(../images/score_indication_correct.png) 0 0/cover;
}
.game-screen header .header-content .player--one li.wrong {
background: url(../images/score_indication_wrong.png) 0 0/cover;
}
.game-screen header .header-content .player--one .player__info {
padding-left: 8px
}
.game-screen header .header-content .player--two {
-ms-flex-pack: end;
justify-content: flex-end
}
.game-screen header .header-content .player--two .player__info__name {
text-align: right;
color: #fff;
}
.game-screen header .header-content .player--two img {
margin-left: 1.4em;
float: right
}
@media (max-width: 414px) {
.game-screen header .header-content .player--two img {
margin-left: 0
}
}
.game-screen header .header-content .player--two ul {
float: right
}
.game-screen header .header-content .player--two li.correct {
background: url(../images/score_indication_correct.png) 0 0/cover;
}
.game-screen header .header-content .player--two li.wrong {
background: url(../images/score_indication_wrong.png) 0 0/cover;
}
.game-screen header .header-content .player--two li:last-child {
margin-right: 0
}
.game-screen header .header-content .player--two .player__info {
padding-right: 8px
}
.game-screen header .header-content .player__info {
width: 70%;
position: relative
}
.game-screen header .header-content .player__info__name {
font-weight: 700;
font-size: 2.1em;
white-space: nowrap;
overflow: hidden;
text-overflow: clip
}
.game-screen header .header-content .player__info__score {
padding-top: 10px
}
.game-screen header .header-content .player__info__score ul li {
display: inline-block;
width: 2em;
height: 2em;
background: #bac7d0;
border-radius: 30px;
margin-right: .67em
}
@media (max-width: 576px) {
.game-screen header .header-content .player__info__score ul li {
border-width: 2px !important
}
}
.game-screen header .header-content .game-timer {
-ms-flex: 0 0 20%;
flex: 0 0 20%;
max-width: 20%;
text-align: center;
-ms-flex-align: center;
align-items: center
}
.game-screen header .header-content .game-timer__circle {
position: relative;
margin: 0 auto;
width: 6em
}
@media (max-width: 400px) {
.game-screen header .header-content .game-timer__circle {
width: 7em
}
}
.game-screen header .header-content .game-timer__circle svg {
width: 100%
}
.game-screen header .header-content .game-timer__circle svg path {
opacity: 1;
transition: fill 8s ease-in, opacity .5s linear;
fill: #00ac49
}
.game-screen header .header-content .game-timer__circle svg path.show {
opacity: 1
}
.game-screen header .header-content .game-timer__circle svg.hurry path {
transition: fill 8s ease-in, opacity .5s linear;
fill: #E64C3B
}
.game-screen header .header-content .game-timer__circle svg.start path {
transition: none;
fill: #00ac49
}
.game-screen header .header-content .game-timer__time {
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: #fff;
font-size: 1.8em;
line-height: 1.8em
}
.game-screen header .header-content .game-timer__score {
color: #fff;
font-size: 2em;
padding-top: 5px;
font-weight: 700
}
@media (max-width: 500px) {
.game-screen header .header-content .player__info__score {
padding-top: 5px
}
.game-screen header .header-content .game-timer__score {
padding-top: 0;
font-size: 2.1em
}
}
.game-screen header .header-content .game-timer__score span {
font-weight: 700
}
.game-screen header .header-content .game-timer__score span:first-child {
padding-right: .7em
}
.game-screen header .header-content .game-timer__score span:last-child {
padding-left: .7em
}
@media (min-width: 1024px) {
.game-main {
background: url(../images/Prize_Banner_Home_Desktop.jpg) no-repeat center center;
background-size: cover;
}
}
.game-main {
background: url(../images/Prize_Banner_Home_Desktop.jpg) no-repeat center center;
background-size: cover;
}
.game-main .rejected {
opacity: .3;
cursor: default
}
.game-main .game-q-container {
height: calc(100vh - 254px);
min-height: 400px;
max-width: 1140px;
margin: 0 auto
}
@media (max-width: 1024px) {
.game-main .game-q-container {
font-size: 19px
}
}
@media (max-width: 992px) {
.game-main .game-q-container {
height: calc(100vh - 198px);
font-size: 17px
}
}
@media (max-width: 768px) {
.game-main .game-q-container {
font-size: 16px;
height: calc(100vh - 185px)
}
}
@media (max-width: 767px) {
.game-main .game-q-container {
font-size: 16px;
height: calc(100vh - 155px)
}
}
@media (max-width: 500px) {
.game-main .game-q-container {
font-size: 11px;
height: calc(100vh - 121px)
}
}
@media (min-width: 1024px) and (max-height:700px) {
.game-main .game-q-container {
font-size: 14px;
height: calc(100vh - 211px)
}
}
.game-main__category {
width: 100%;
text-align: center;
height: 6.5em;
line-height: 6.5em;
position: relative
}
@media (max-height: 700px) {
.game-main__category {
font-size: 14px
}
}
@media (max-width: 992px) {
.game-main__category {
font-size: 12px
}
}
@media (max-width: 768px) {
.game-main__category {
font-size: 10px
}
}
.game-main__category span {
position: absolute;
display: block;
width: 100%;
left: 0;
top: 3.25em;
border-top: 3px solid #071b1b;
z-index: -1
}
.game-main__category .category-icon,
.game-main__category .category-icon img {
display: inline-block;
vertical-align: middle
}
@media (max-width: 500px) {
.game-main__category {
font-size: 8px
}
.game-main__category span {
border-top: 2px solid #071b1b;
top: 3.4em
}
}
.game-main__category .category-icon {
color: #3498db;
position: relative;
font-size: 3.2em;
background: #fff;
z-index: 2;
width: 1.6em;
height: 1.6em;
line-height: 1.3em
}
.game-main__question {
text-align: center;
color: #7f8c8d;
height: 55%;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
padding: 0 30px;
background-image: url(../images/Prize_Banner_Home_Desktop.jpg);
background-size: cover;
}
@media (min-height: 470px) and (max-width:321px) {
.game-main__question {
height: 45%
}
}
@media (min-width: 992px) {
.game-main__question {
max-width: 1060px;
margin: 0 auto
}
}
@media (min-width: 1024px) {
.game-main__question {
background: none;
}
}
@media (max-width: 992px) {
.game-main__question {
padding: 0 15px
}
}
.game-main__question__text {
padding: 8px 0 15px;
color: #fff;
margin-top: -40px;
}
.game-main__question__text p {
font-size: 1.5em;
font-weight: 700
}
.game-main__question__image {
-ms-flex: 1;
flex: 1;
background-repeat: no-repeat;
background-size: contain;
background-position: 50%;
margin-bottom: 25px
}
.game-main__answers {
height: 33%;
padding: 0 30px;
background-color: #0f3d3d;
}
@media (max-width: 992px) {
.game-main__answers {
padding: 0 30px
}
}
@media (max-width: 767px) {
.game-main__answers {
padding: 0 15px
}
}
@media (min-width: 992px) {
.game-main__answers {
max-width: 1060px;
margin: 0 auto
}
}
.game-main__answers__row {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between;
height: 50%
}
.game-main__answers__row .btn {
position: relative;
display: block;
width: 45%;
max-width: 420px;
font-size: 2.8vh;
border: 1px solid #fff;
color: #7f8c8d;
padding: 0 25px;
margin-bottom: 30px;
line-height: .9em;
box-shadow: 2px 2px 14px #000;
}
@media (max-width: 768px) {
.game-main__answers__row .btn {
font-size: 22px;
margin-bottom: 30px;
padding: 0 5px;
}
.game-main__answers__row .btn.correct {
border: 3px solid #00ac49
}
}
@media (max-width: 500px) {
.game-main__answers__row .btn {
font-size: 14px;
margin-bottom: 20px
}
}
@media (max-height: 400px) {
.game-main__answers__row .btn {
font-size: 19px;
margin-bottom: 15px
}
}
@media (max-height: 768px) and (min-width:1024px) {
.game-main__answers__row .btn {
font-size: 19px;
margin-bottom: 20px
}
}
.game-main__answers__row .btn span {
font-weight: 700;
line-height: normal
}
.game-main__answers__row .btn.correct {
border: 3px solid #00ac49;
background: #00ac49;
color: #fff;
box-shadow: none;
}
.game-main__answers__row .btn img {
display: block;
position: absolute;
width: 60px;
height: 60px;
top: -25px;
border-radius: 30px;
}
@media (max-width: 767px) {
.game-main__answers__row .btn img {
width: 34px;
height: 34px;
top: -20px;
border-radius: 17px;
}
}
.game-main__answers__row .btn .p1 {
left: -25px
}
.game-main__answers__row .btn .p2 {
right: -25px
}
@media (max-width: 768px) {
.game-main__answers__row .btn .p1 {
left: -15px
}
.game-main__answers__row .btn .p2 {
right: -15px
}
}
.game-main__bottom {
width: 100%;
height: 12%;
}
@media (min-width: 1025px) {
.game-main__bottom {
position: unset;
}
}
.game-main__bottom .btn {
display: block;
float: left;
border: none;
border-radius: 0;
width: 40%;
height: 100%;
color: #fff;
font-size: 1.3em;
font-weight: 700;
position: relative;
overflow: hidden;
line-height: 1;
padding-top: 7px;
vertical-align: middle;
margin: 0 5%;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
.game-main__bottom .btn i {
display: inline-block;
vertical-align: middle;
}
.game-tut .game-main__answers__row .p1,
.game-tut .game-main__answers__row .p2,
.modal {
display: none
}
.game-main__bottom .btn.inactive {
opacity: .5;
cursor: default
}
.game-main__bottom .cheat-btn {
background: #da1f47
}
.game-main__bottom .cheat-btn i {
font-size: 3.3em;
font-size: 7.5vh;
margin-left: 25px
}
.game-main__bottom .cheat-btn i img {
max-width: 56px;
}
@media (max-height: 670px) {
.game-main__bottom .cheat-btn i {
font-size: 35px;
margin-left: 15px
}
}
.game-main__bottom .fifty-btn {
background: #fcc312
}
.game-main__bottom .fifty-btn i {
font-size: 7.5vh;
margin-right: 25px
}
.game-main__bottom .fifty-btn i img {
max-width: 56px;
}
@media (max-width: 321px) {
.game-main__bottom .cheat-btn i img {
max-width: 35px;
}
.game-main__bottom .fifty-btn i img {
max-width: 35px;
}
}
@media (max-height: 670px) {
.game-main__bottom .fifty-btn i {
font-size: 35px;
margin-right: 15px
}
}
.game-tut .game-main__answers__row .select_answer {
z-index: 99999;
background-color: #fff;
color: #7f8c8d;
border: 3px solid #34495e;
cursor: default
}
button.btn.select_answer:focus {
box-shadow: none;
}
.game-tut .game-main__answers__row .rejected {
opacity: 1
}
.cheat_tut .btn {
z-index: 99999;
cursor: default
}
.cheat_tut .inactive {
opacity: 1 !important;
z-index: 99999
}
.tutcheat_overlay {
background-image: url(../images/tutorial_guy.png);
background-size: contain;
background-repeat: no-repeat;
width: 100%;
max-width: 105px;
position: absolute;
bottom: 80px;
left: 20%;
min-height: 170px;
z-index: 10000
}
@media (max-width: 350px) {
.tutcheat_overlay {
left: -17px
}
}
.progressbar-text {
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: #fff !important;
font-size: 1.8em;
line-height: 1.8em
}
.modal {
position: fixed;
/* max-width: 380px; */
/* width: 100%; */
padding: 0 15px;
top: 50%;
left: 50%;
z-index: 9999;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%)
}
@media (max-height: 400px) {
.modal {
-ms-transform: translate(-50%, -30%);
transform: translate(-50%, -30%)
}
}
@media (max-width: 767px) {
.modal {
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
top: 5%
}
}
.modal__content {
position: relative;
text-align: center;
width: 100%;
background: #ffffff;
border-radius: 10px;
max-width: 380px;
}
.modal__body {
padding-bottom: 15px;
}
img.modal_icon_alert {
width: 80px;
height: 80px;
margin: 0 auto;
}
.modal__body p {
font-size: 16px;
color: #666666;
line-height: 19px;
margin: 24px auto 20px;
width: 90%;
}
.modal .modal-close {
position: absolute;
right: 5px;
top: 5px;
width: 32px;
height: 32px;
background: #FFFFFF;
box-shadow: 0px 0px 12px #2929664D;
font-size: .9em;
text-align: center;
line-height: 29px;
z-index: 1;
border-radius: 50%;
min-width: 0;
}
.modal .modal-close i {
position: absolute;
top: 0;
left: 0;
}
.modal__header {
color: #292966;
padding: 15px 10px;
border-radius: 10px 10px 0 0;
border-bottom: none;
}
.modal__header h1 {
font-weight: 700;
padding-bottom: 10px;
font-size: 1em
}
.modal__header h2 {
font-size: .9em
}
.modal__footer {
color: #7f8c8d;
padding: 0 15px 15px;
line-height: 1.2em
}
.modal__footer .terms {
padding-top: 15px;
font-weight: 500;
display: inline-block;
font-size: .8em;
color: #666666
}
.modal__footer .terms a {
color: #0055FF
}
.modal--welcome .modal__content {
background-image: url(../images/stars_bg.svg);
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: 0 10px
}
.simple-confirm-modal p {
margin-top: 15px;
color: #fff;
}
.simple-confirm-modal p a {
color: #00acdf;
}
.modal--welcome .modal__body {
position: relative;
margin: 25px 25px 15px;
padding: 49px 0 5px;
box-shadow: 0 3px 6px rgba(0, 0, 0, .16), 0 3px 6px rgba(0, 0, 0, .23);
background: #f6f7e8;
border-bottom: 20px solid #f9c652
}
@media (max-width: 400px) {
.modal--welcome .modal__body {
padding: 39px 0 5px
}
}
.modal--welcome .modal__body:before {
position: absolute;
background-image: url(../images/calendar_top.svg);
background-repeat: no-repeat;
background-size: fixed;
top: -10px;
left: 0;
width: 100%;
height: 55px
}
.modal--welcome .daily-prizes {
text-align: left;
padding: 0 5px
}
.modal--welcome .daily-prizes li {
position: relative;
text-align: center;
display: inline-block;
height: 0;
width: 25%;
padding: 7px 7px 23%;
float: left;
z-index: 1
}
.modal--welcome .daily-prizes li:before {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: linear-gradient(#071b1b, #15977e);
padding: 7px;
background-clip: content-box;
border-radius: 15px;
z-index: -1
}
.modal--welcome .daily-prizes li:after {
content: '\0046';
font-family: DUEL;
position: absolute;
right: 10px;
bottom: 10px;
color: #fff;
font-size: .68em;
display: none
}
.modal--welcome .daily-prizes li span {
font-size: .9em;
color: #fff;
font-weight: 700
}
.modal--welcome .daily-prizes li span.credits {
position: absolute;
display: block;
width: 100%;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%)
}
.modal--welcome .daily-prizes li span.count {
position: absolute;
top: 11px;
right: 11px;
font-size: .65em
}
.modal--welcome .daily-prizes li svg {
width: 14px;
position: absolute;
bottom: 10px;
right: 10px;
fill: #fff
}
.modal--welcome .daily-prizes li svg polyline {
stroke-dasharray: 400;
stroke-dashoffset: 400;
animation: dash .6s 1s linear forwards
}
.modal--welcome .daily-prizes li.disabled {
opacity: .7
}
.modal--welcome .daily-prizes li.disabled:after {
display: block
}
.modal--welcome .daily-prizes li.disabled svg {
display: none
}
.modal--welcomeback .modal__header {
padding: 15px 10px;
border-radius: 10px 10px 0 0;
border-bottom: none;
position: relative
}
.modal--welcomeback .modal__header img,
.modal--welcomeback .modal__header svg {
position: absolute;
margin-top: 17px;
left: 50%;
-ms-transform: translateX(-50%);
transform: translateX(-50%);
display: block;
max-width: 172px
}
.modal--welcomeback .modal__header img.usericon,
.modal--welcomeback .modal__header svg.usericon {
margin-top: 15px
}
.modal--welcomeback .modal__header img.pinicon,
.modal--welcomeback .modal__header svg.pinicon {
max-height: 122px;
width: auto;
margin-top: -10px
}
.modal--welcomeback .modal__body {
padding: 15px 10px;
color: #ffffff;
font-weight: 400;
font-size: .9em
}
.modal--welcomeback .modal__body .operators_selection_wrap p {
text-align: center;
}
.modal--welcomeback .modal__body .operators_error_msg {
text-align: center;
}
.modal--welcomeback .modal__body .terms {
padding-top: 15px;
font-weight: 500;
display: inline-block;
font-size: .9em;
color: #666666
}
.modal--welcomeback .modal__body .terms a {
color: #0055FF;
font-weight: 500;
}
.modal--welcomeback .modal__body p {
font-weight: 500;
font-size: 1em;
line-height: 1.2em;
display: block;
margin-bottom: 6px
}
.modal--welcomeback .modal__body .modal_strong {
font-weight: 700
}
.modal--welcomeback .welcone_pad {
padding-bottom: 30px
}
.modal--welcomeback .modal__footer {
padding: 10px 15px 15px
}
.modal--welcomeback .modal__footer.two-btn {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between
}
.modal--welcomeback .modal__footer.two-btn a {
min-width: 120px;
width: 45%;
font-size: .9em
}
.modal--diff_devices .modal__header {
padding-bottom: 50px;
margin-bottom: 80px;
position: relative
}
.modal--diff_devices .modal__header img {
position: absolute;
margin-top: 17px;
left: 50%;
-ms-transform: translateX(-50%);
transform: translateX(-50%);
display: block;
width: 100%;
max-width: 200px
}
.modal--diff_devices .modal__body {
padding: 15px 10px 25px;
color: #ffffff;
font-weight: 400;
font-size: .9em
}
.modal--unsubscribe h1 {
padding-bottom: 0
}
.modal--unsubscribe .modal__body {
font-weight: 300
}
.modal--unsubscribe .modal__footer a {
width: 40%;
margin: 0 10px
}
@media (max-width: 360px) {
.modal--unsubscribe .modal__footer a {
width: 48%;
margin: 0 1px
}
}
.modal--unsubscribe-conf .modal__header h1 {
margin: 10px 0 8px
}
.modal--unsubscribe-conf .modal__header img {
width: 90px
}
.modal--unsubscribe-conf .modal__body {
font-weight: 300;
padding: 12px 15px
}
.modal--levelup .modal__header {
padding: 35px 0 32px
}
.modal--levelup .modal__header h1 {
padding: 0;
font-size: 1.2em
}
.modal--levelup .modal__body {
height: 350px
}
.modal--levelup .modal__body svg {
width: 100%;
display: block;
position: absolute;
bottom: 0;
border-radius: 10px;
z-index: 0
}
.modal--tutorial_select_theme .modal-close,
.modal--tutorial_select_theme .modal__header {
background-color: #071b1b;
border: 3px solid #ecf0f1
}
.modal--levelup .modal__body svg #rocket {
animation: rocket_animation .5s cubic-bezier(.9, .16, .715, .9) .8s forwards
}
.modal--levelup .modal__body .level-info {
text-align: left;
padding: 30px 25px 0
}
.modal--levelup .modal__body .level-info__item {
margin-bottom: 20px;
opacity: 0
}
@media (max-width: 320px) {
.modal--levelup .modal__body {
height: 300px
}
.modal--levelup .modal__body .level-info {
padding-top: 15px
}
.modal--levelup .modal__body .level-info__item {
margin-bottom: 15px
}
}
.modal--levelup .modal__body .level-info__item:first-child {
animation: fadeIn .7s linear 1.5s forwards
}
.modal--levelup .modal__body .level-info__item:last-child {
animation: fadeIn .7s linear 2s forwards
}
.modal--levelup .modal__body .level-info__item .desc {
width: 80px;
color: #ffffff
}
.modal--levelup .modal__body .level-info__item span {
vertical-align: middle;
font-weight: 700;
font-size: .9em;
line-height: 1.1;
display: inline-block
}
.modal--levelup .modal__body .level-info__item .score-lbl {
margin-left: 10px
}
.modal--levelup .modal__body .share_text {
font-weight: 400;
font-size: 13px;
text-align: left;
padding: 5px 25px 15px;
max-width: 190px;
display: block;
opacity: 0;
color: #ffffff;
animation: fadeIn .7s linear 3s forwards
}
@media (max-width: 320px) {
.modal--levelup .modal__body .share_text {
padding-top: 5px
}
}
.modal--levelup .modal__body .fb_btn {
height: 32px;
display: block;
max-width: 100px;
margin-left: 25px;
opacity: 0;
animation: fadeIn .7s linear 4s forwards;
z-index: 1
}
.modal--levelup .modal__body .fb_btn .icon-facebook {
font-size: 18px;
vertical-align: middle;
left: 8px;
top: 5px;
position: absolute
}
.modal--levelup .modal__body .fb_btn span {
font-weight: 600;
font-size: 15px;
line-height: 30px;
position: relative;
left: -10px
}
.modal--levelup .fb_error_msg {
font-weight: 400;
position: relative;
top: -33px;
font-size: 12px;
text-align: left;
width: 100%;
display: block;
color: #e71010;
min-width: 270px;
margin: 0 auto
}
.modal--tutorial_cheat_game .modal__tut_overlay,
.modal--tutorial_play_game .modal__tut_overlay,
.modal--tutorial_select_theme .modal__tut_overlay {
background-size: cover;
background-repeat: no-repeat;
width: 111px;
bottom: -4px;
min-height: 125px;
z-index: 10000;
position: relative
}
@media (max-width: 767px) {
.modal--levelup .fb_error_msg {
font-size: 11px;
top: -29px
}
}
.modal--tutorial_select_theme {
top: 40%
}
@media (max-width: 767px) {
.modal--tutorial_select_theme {
top: 25%
}
}
.modal--tutorial_select_theme .modal__tut_overlay {
background-image: url(../images/tutorial-header3.png);
left: -17px
}
.modal--tutorial_select_theme .modal__header {
background-image: none;
border-radius: 10px;
padding: 25px 8px 15px
}
.modal--tutorial_play_game .modal-close,
.modal--tutorial_play_game .modal__header {
background-color: #071b1b;
border: 3px solid #ecf0f1
}
.modal--tutorial_select_theme .modal__header h1 {
font-size: 2vh;
font-weight: 400;
text-align: justify
}
@media (max-width: 400px) {
.modal--tutorial_select_theme .modal__header h1 {
font-size: 2.5vh
}
}
.modal--tutorial_play_game {
top: 40%
}
@media (max-width: 767px) {
.modal--tutorial_play_game {
top: 13%
}
}
.modal--tutorial_play_game .modal__tut_overlay {
background-image: url(../images/tutorial-header3.png);
left: -17px
}
@media (max-width: 350px) {
.modal--tutorial_play_game .modal__tut_overlay,
.modal--tutorial_select_theme .modal__tut_overlay {
left: -17px
}
}
.modal--tutorial_play_game .modal__header {
background-image: none;
border-radius: 10px;
padding: 25px 8px 15px
}
.modal--tutorial_cheat_game .modal-close,
.modal--tutorial_cheat_game .modal__header {
background-color: #071b1b;
border: 3px solid #ecf0f1
}
.modal--tutorial_play_game .modal__header h1 {
font-size: 2vh;
font-weight: 400;
text-align: justify
}
@media (max-width: 400px) {
.modal--tutorial_play_game .modal__header h1 {
font-size: 2.5vh
}
}
.modal--tutorial_cheat_game {
top: 72%;
left: 30%
}
@media (max-width: 767px) {
.modal--tutorial_cheat_game {
top: 48%;
left: 50%
}
}
.modal--tutorial_cheat_game .modal__tut_overlay {
background-image: url(../images/tutorial-header3.png);
left: -17px
}
@media (max-width: 350px) {
.modal--tutorial_cheat_game .modal__tut_overlay {
left: -17px
}
}
.modal--tutorial_cheat_game .modal__header {
background-image: none;
border-radius: 10px;
padding: 25px 8px 15px
}
.modal--tutorial_cheat_game .modal__header h1 {
font-size: 2vh;
font-weight: 400;
text-align: justify
}
@media (max-width: 400px) {
.modal--tutorial_cheat_game .modal__header h1 {
font-size: 2.5vh
}
}
.modal--highest_level .modal__header {
padding: 35px 0 32px
}
.modal--highest_level .modal__header h1 {
padding: 0;
font-size: 1.2em
}
.modal--highest_level .modal__header p {
margin-top: 20px
}
.modal--highest_level .modal__body {
height: 303px
}
@media (max-width: 320px) {
.modal--highest_level .modal__body {
height: 300px
}
}
.modal--highest_level .modal__body .level-info {
text-align: left;
padding: 20px 15px
}
.modal--highest_level .modal__body .level-info__item {
margin-bottom: 30px;
opacity: 0;
display: inline-block;
width: 50%;
max-width: 135px
}
.modal--highest_level .modal__body .level-info__item:first-child {
animation: fadeIn .7s linear 1.5s forwards
}
.modal--highest_level .modal__body .level-info__item:last-child {
animation: fadeIn .7s linear 2s forwards;
margin-left: 40px
}
@media (max-width: 375px) {
.modal--highest_level .modal__body .level-info__item {
width: 128px
}
.modal--highest_level .modal__body .level-info__item:last-child {
margin-left: 0
}
}
.modal--highest_level .modal__body .level-info__item .desc {
width: 65px;
color: #ffffff
}
@media (max-width: 375px) {
.modal--highest_level .modal__body .level-info__item .desc {
width: 58px
}
}
.modal--highest_level .modal__body .level-info__item span {
vertical-align: middle;
font-weight: 700;
font-size: .8em;
line-height: 1.1;
display: inline-block
}
.modal--highest_level .modal__body .level-info__item .score-lbl {
margin-left: 5px
}
.modal--highest_level .modal__body img {
position: relative;
bottom: 17px
}
@media (max-width: 340px) {
.modal--tutorial_cheat_game {
top: 39%
}
.modal--highest_level .modal__body img {
bottom: 7px;
max-width: 269px
}
}
.modal--postgame .info_align {
text-align: right
}
.modal--postgame .modal__header {
position: relative;
padding: 20px 0 70px
}
@media (max-width: 359px) {
.modal--postgame .modal__header {
padding: 15px 0 55px
}
}
.modal--postgame .modal__header:after {
content: "";
position: absolute;
bottom: 0;
height: 2px;
width: 50%;
z-index: 1
}
.modal--postgame .modal__header h1 {
padding: 0;
font-size: 1.2em
}
.modal--postgame .modal__header ul {
position: absolute;
bottom: -100px;
width: 100%;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center
}
.modal--postgame .modal__header ul li {
display: inline-block;
width: 30%;
padding: 12px;
z-index: 2
}
.modal--postgame .modal__header ul li.trophy {
width: 40%;
padding-top: 25px
}
@media (max-width: 359px) {
.modal--postgame .modal__header ul {
bottom: -88px
}
.modal--postgame .modal__header ul li.trophy {
padding-top: 20px
}
}
.modal--postgame .modal__header ul li.trophy img {
margin-bottom: 5px;
border-radius: 100%;
border: 3px solid #000
}
.modal--postgame .modal__header ul li.trophy .score {
color: #ffffff;
font-weight: 700;
font-size: 1.5em
}
.modal--postgame .modal__header ul li.trophy span {
font-weight: 700
}
.modal--postgame .modal__header ul li.trophy span:first-child {
color: #ffffff;
padding-right: 6px
}
.modal--postgame .modal__header ul li.trophy span:last-child {
color: #ffffff;
padding-left: 6px
}
.modal--postgame .modal__header ul li img {
width: 100%;
display: block;
border: 3px solid #000;
border-radius: 100%
}
.modal--postgame .modal__header ul li:last-child {
color: #dd2b2b
}
.modal--postgame .modal__header ul li:last-child img {
border-color: #dd2b2b
}
.modal--postgame .modal__header ul li:first-child {
color: #8dc63f
}
.modal--postgame .modal__header ul li:first-child img {
border-color: #8dc63f
}
.modal--postgame .modal__header ul li .name {
font-size: .85em;
font-weight: 700
}
.modal--postgame.player1 .trophy img {
border-color: #8dc63f !important
}
.modal--postgame.player1 .modal__header:after {
background: #8dc63f;
left: 20px
}
.modal--postgame.player2 .trophy img {
border-color: #dd2b2b !important
}
.modal--postgame.player2 .modal__header:after {
background: #dd2b2b;
right: 20px
}
.modal--postgame .modal__body {
padding-top: 92px
}
.modal--postgame .modal__body.bottom-padding {
padding-bottom: 20px
}
.modal--postgame .modal__body h3 {
color: #ffffff;
font-size: 1.1em;
font-weight: 700;
padding-bottom: 10px
}
.modal--postgame .modal__body .buttons {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding-bottom: 5px
}
.modal--postgame .modal__body .buttons li {
width: 33.333333%;
text-align: center;
padding: 0 14px
}
@media (max-width: 359px) {
.modal--postgame .modal__body .buttons li {
padding: 0 10px
}
}
.modal--postgame .modal__body .buttons li span {
display: inline-block;
padding: 7px 0;
font-size: .9em;
max-width: 60px;
width: 100%;
}
.modal--postgame .modal__body .buttons li span.title {
padding-top: 5px;
font-size: .7em;
color: #ffffff;
min-height: 36px
}
.modal--postgame .modal__body .rounds_score {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
margin: 0 10px 15px;
-ms-flex-pack: distribute;
justify-content: space-around
}
.modal--postgame .modal__body .rounds_score li {
min-width: 40px;
margin: 5px
}
.modal--postgame .modal__body .rounds_score li span {
display: block;
font-weight: 700;
color: #00ac49
}
.modal--postgame .modal__body .rounds_score li.red span {
color: #e74c3c
}
.modal--postfreegame .info_align {
text-align: right
}
.modal--postfreegame .modal__header {
position: relative;
padding: 20px 0 70px
}
@media (max-width: 359px) {
.modal--postfreegame .modal__header {
padding: 15px 0 55px
}
}
.modal--postfreegame .modal__header:after {
content: "";
position: absolute;
bottom: 0;
height: 2px;
width: 50%;
z-index: 1
}
.modal--postfreegame .modal__header h1 {
padding: 0;
font-size: 1.2em
}
.modal--postfreegame .modal__header ul {
position: absolute;
bottom: -100px;
width: 100%;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center
}
.modal--postfreegame .modal__header ul li {
display: inline-block;
width: 30%;
padding: 12px;
z-index: 2
}
.modal--postfreegame .modal__header ul li.trophy {
width: 40%;
padding-top: 25px
}
@media (max-width: 359px) {
.modal--postfreegame .modal__header ul {
bottom: -88px
}
.modal--postfreegame .modal__header ul li.trophy {
padding-top: 20px
}
}
.modal--postfreegame .modal__header ul li.trophy img {
margin-bottom: 5px;
border-radius: 100%;
border: 3px solid #000
}
.modal--postfreegame .modal__header ul li.trophy .score {
color: #ffffff;
font-weight: 700;
font-size: 1.5em
}
.modal--postfreegame .modal__header ul li.trophy span {
font-weight: 700
}
.modal--postfreegame .modal__header ul li.trophy span:first-child {
color: #ffffff;
padding-right: 6px
}
.modal--postfreegame .modal__header ul li.trophy span:last-child {
color: #ffffff;
padding-left: 6px
}
.modal--postfreegame .modal__header ul li img {
width: 100%;
display: block;
border: 3px solid #000;
border-radius: 100%
}
.modal--postfreegame .modal__header ul li:last-child {
color: #dd2b2b
}
.modal--postfreegame .modal__header ul li:last-child img {
border-color: #dd2b2b
}
.modal--postfreegame .modal__header ul li:first-child {
color: #8dc63f
}
.modal--postfreegame .modal__header ul li:first-child img {
border-color: #8dc63f
}
.modal--postfreegame .modal__header ul li .name {
font-size: .85em;
font-weight: 700
}
.modal--postfreegame.player1 .trophy img {
border-color: #8dc63f !important
}
.modal--postfreegame.player1 .modal__header:after {
background: #8dc63f;
left: 20px
}
.modal--postfreegame.player2 .trophy img {
border-color: #dd2b2b !important
}
.modal--postfreegame.player2 .modal__header:after {
background: #dd2b2b;
right: 20px
}
.modal--postfreegame .modal__body {
padding-top: 92px
}
.modal--postfreegame .modal__body.bottom-padding {
padding-bottom: 20px
}
.modal--postfreegame .modal__body h3 {
color: #ffffff;
font-size: 1.1em;
font-weight: 700;
padding-bottom: 10px
}
.modal--postfreegame .modal__body .buttons {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding-bottom: 5px
}
.modal--postfreegame .modal__body .buttons li {
width: 33.33333%;
text-align: center;
padding: 0 14px
}
@media (max-width: 359px) {
.modal--postfreegame .modal__body .buttons li {
padding: 0 10px
}
}
.modal--postfreegame .modal__body .buttons li span {
display: inline-block;
padding: 7px 0;
font-size: .9em;
max-width: 60px;
width: 100%
}
.modal--postfreegame .modal__body .buttons li span.title {
padding-top: 5px;
font-size: .7em;
color: #ffffff;
min-height: 36px
}
.modal--postfreegame .modal__footer {
padding: 10px 15px 15px
}
@media (min-width: 360px) and (max-width:766px) {
.modal--postfreegame,
.modal--postgame {
top: 12%
}
}
.modal--roundended .modal__content {
background-image: url(../images/round_ended_bg.png);
background-position: 47% 50%;
background-repeat: no-repeat;
background-size: cover;
min-height: 320px
}
.modal--roundended .modal__content .modal__header {
background: 0 0;
height: 225px;
position: relative;
padding: 32px 10px 0;
font-size: 1.6em
}
@media (max-width: 380px) {
.modal--roundended .modal__content .modal__header {
padding: 38px 10px 0
}
}
.modal--roundended .modal__content .modal__header .score {
position: absolute;
width: 100%;
bottom: -4px;
color: #0b2c2c;
margin-left: -8px;
font-size: 1.3em;
font-weight: 700
}
.modal--roundended .modal__content .modal__header .score span {
font-weight: 700
}
.modal--roundended .modal__content .modal__header .score span:first-child {
color: #8dc63f;
padding-right: 2px
}
.modal--roundended .modal__content .modal__header .score span:last-child {
color: #dd2b2b;
padding-left: 2px
}
.modal--roundended .modal__content .modal__body {
position: relative
}
.modal--roundended .modal__content .modal__body h2 {
padding-top: 40px;
font-size: 1.5em;
font-weight: 700;
color: #ffffff
}
.modal--roundended .modal__content .player_score {
position: absolute;
width: 50%;
top: 10px
}
.modal--roundended .modal__content .player_score li {
display: inline-block;
width: 15px;
height: 15px;
border-radius: 20px
}
.modal--roundended .modal__content .player_score.player1 {
left: 30px;
text-align: left
}
.modal--roundended .modal__content .player_score.player1 .correct {
background: url(../images/score_indication_correct.png) 0 0/cover;
}
.modal--roundended .modal__content .player_score.player1 .wrong {
background: url(../images/score_indication_wrong.png) 0 0/cover;
}
.modal--roundended .modal__content .player_score.player2 {
right: 30px;
text-align: right
}
@media (max-width: 380px) {
.modal--roundended .modal__content .player_score.player1 {
left: 15px
}
.modal--roundended .modal__content .player_score.player2 {
right: 15px
}
}
.modal--roundended .modal__content .player_score.player2 .correct {
background: url(../images/score_indication_correct.png) 0 0/cover;
}
.modal--roundended .modal__content .player_score.player2 .wrong {
background: url(../images/score_indication_wrong.png) 0 0/cover;
}
.modal--roundended .modal__content .avatars {
position: absolute;
width: 100%;
bottom: 10px;
left: 0;
text-align: left
}
.modal--roundended .modal__content .avatars .avatar {
text-align: left;
width: 75px
}
.modal--roundended .modal__content .avatars .avatar--player1 {
margin-left: 25px;
float: left
}
.modal--roundended .modal__content .avatars .avatar--player2 {
margin-right: 25px;
float: right
}
@media (max-width: 380px) {
.modal--roundended .modal__content .avatars .avatar--player1 {
margin-left: 10px
}
.modal--roundended .modal__content .avatars .avatar--player2 {
margin-right: 10px
}
}
.modal--roundended .modal__content .avatars .avatar img {
width: 100%;
border-radius: 100%
}
.modal--roundended .modal__content .avatars .avatar span {
display: block;
font-size: .5em;
text-align: center;
font-weight: 700
}
.modal--resume_game .modal__content .modal__header {
background-image: url(../images/resume_game_bg.jpg);
background-size: 100% 100%;
height: 230px;
font-size: 1.1em;
position: relative
}
.modal--resume_game .modal__content .modal__header h2 {
font-size: .8em;
padding-top: 10px
}
.modal--resume_game .modal__content .modal__header .avatars {
font-size: 1.6rem;
position: absolute;
width: 100%;
bottom: 6px;
left: 0;
text-align: left
}
.modal--resume_game .modal__content .modal__header .avatars .avatar {
text-align: left;
width: 85px
}
.modal--resume_game .modal__content .modal__header .avatars .avatar--player1 {
margin-left: 20px;
float: left
}
.modal--resume_game .modal__content .modal__header .avatars .avatar--player2 {
margin-right: 20px;
float: right
}
@media (max-width: 380px) {
.modal--resume_game .modal__content .modal__header .avatars .avatar--player1 {
margin-left: 10px
}
.modal--resume_game .modal__content .modal__header .avatars .avatar--player2 {
margin-right: 10px
}
}
.modal--resume_game .modal__content .modal__header .avatars .avatar img {
width: 100%;
border-radius: 100%
}
.modal--resume_game .modal__content .modal__header .avatars .avatar span {
display: block;
font-size: .5em;
text-align: center;
font-weight: 700
}
.modal--resume_game .modal__content .modal__body {
padding: 20px 0
}
.modal--prize-details .modal__header h1,
.modal--prize-details .modal__header h2 {
font-size: 1.6em;
font-weight: 700;
padding: 0
}
.modal--prize-details .modal__header h1 {
padding-top: 20px
}
.modal--prize-details .modal__body img {
max-height: 160px;
display: block;
margin: 0 auto;
padding: 10px 0 5px
}
.modal--prize-details .modal__body .prize-text {
font-size: 1.1em;
color: #ffffff;
font-weight: 700;
display: inline-block;
padding-bottom: 15px
}
.modal--prize-details .modal__body .spin-lost {
font-size: 1.1em;
color: #ffffff;
font-weight: 700;
display: inline-block;
padding-bottom: 15px
}
.modal--prize-details .modal__body .spin-win {
font-size: 1.1em;
color: #ffffff;
font-weight: 700;
display: inline-block;
padding-bottom: 15px
}
.win.hide {
display: none;
}
.lost.hide {
display: none;
}
.modal--prize-details .modal__body .modal-section {
padding: 0 5px
}
.modal--prize-won .modal__header {
font-size: 17px;
position: relative;
padding-bottom: 75px
}
.modal--prize-won .avatar-cont {
position: absolute;
bottom: -35px;
left: 50%;
-ms-transform: translateX(-50%);
transform: translateX(-50%)
}
.modal--prize-won .avatar-cont .avatar {
width: 70px
}
.modal--prize-won .avatar-cont__wrapper {
position: relative
}
.modal--prize-won .avatar-cont .crown {
position: absolute;
top: -24px;
width: 55px;
right: -20px;
-ms-transform: rotate(10deg);
transform: rotate(10deg)
}
.modal--prize-won .modal__body {
padding-top: 40px;
background-image: url(../images/stars_bg.svg);
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: 0 -80px
}
.modal--prize-won .modal__body img {
max-height: 150px;
display: block;
margin: 0 auto;
padding: 10px 0 5px
}
.modal--prize-won .modal__body .prize-text {
font-size: 1em;
color: #34495e;
font-weight: 700;
display: inline-block;
padding-bottom: 15px
}
.modal--prize-won .modal__body p {
color: #34495e;
font-size: .89em;
padding: 5px 0 25px
}
.modal--zero-balance .modal__header h1 {
margin: 10px 0 8px
}
.modal--zero-balance .modal__header img {
width: 118px
}
.modal--zero-balance .modal__body {
font-weight: 300;
padding: 30px 15px 12px
}
.modal--zero-balance .modal__body form {
margin: 15px auto;
max-width: 87%
}
.modal--zero-balance .modal__body form .form-group__textfield {
text-align: center
}
.modal--zero-balance .modal__body form .form-group__textfield:active,
.modal--zero-balance .modal__body form .form-group__textfield:focus,
.modal--zero-balance .modal__body form .form-group__textfield:hover {
background-color:#f3f3f3;
/* border-bottom: 2px solid #8dc63f */
}
.modal--zero-balance .modal__body form .form-group__textfield:focus placeholder {
display: none
}
.modal--zero-balance .modal__body form input[type=submit] {
width: auto;
margin-top: 10px
}
.modal--achievements-succeed .avatar-cont-border {
position: absolute;
left: 50%;
-ms-transform: translateX(-50%);
transform: translateX(-50%);
display: block;
max-width: 170px
}
.modal--achievements-succeed .avatar-cont-border .img-border {
width: 90px;
height: 90px;
background: #ecf0f1;
border-radius: 100%;
padding: 18px
}
.modal--achievements-succeed .avatar-cont-border span {
color: #34495e;
font-weight: 700
}
.modal--achievements-succeed .modal__header {
padding-bottom: 50px;
position: relative
}
.modal--achievements-succeed .modal__header h1 {
margin: 10px 0 8px
}
.modal--achievements-succeed .modal__body {
background-image: url(../images/stars_bg.svg);
background-repeat: no-repeat;
background-size: cover;
background-position: 0 -200px;
margin-bottom: 10px;
padding: 70px 10px 15px;
color: #34495e;
font-size: .9em
}
.modal--achievements-succeed .modal__footer {
position: relative;
color: #ecf0f1;
background: #34495e;
font-size: .9em;
font-weight: 700;
padding: 12px 0;
border: 3px solid #ecf0f1;
border-radius: 0 0 10px 10px
}
.modal--achievements-succeed .modal__footer:before {
content: "";
position: absolute;
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid #34495e;
left: 50%;
top: -13px;
-ms-transform: translateX(-50%);
transform: translateX(-50%)
}
.modal--achievements-succeed .modal__footer h5 {
font-weight: 700
}
.modal--achievements-succeed .modal__footer__stats {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
margin: 10px 0
}
.modal--achievements-succeed .modal__footer__stats__item {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: center;
align-items: center;
padding: 0 10px;
margin: 0 15px
}
@media (max-width: 380px) {
.modal--achievements-succeed .modal__footer__stats__item {
margin: 0
}
}
.modal--achievements-succeed .modal__footer__stats h6 {
display: inline-block;
font-weight: 700;
text-align: left;
line-height: 1
}
.modal--achievements-succeed .modal__footer__stats .score-lbl {
margin-left: 25px;
font-size: 1.2em;
min-width: 55px;
display: inline-block
}
@media (max-width: 380px) {
.modal--achievements-succeed .modal__footer__stats .score-lbl {
margin-left: 15px
}
}
.modal--achievements-accomplished .modal__header h1 {
font-size: 1.2em;
padding: 15px 0
}
.modal--achievements-accomplished .modal__body {
color: #34495e;
font-size: .9em;
padding: 0 20px
}
.modal--achievements-accomplished .modal__body .avatar-cont {
width: 100%;
text-align: center;
padding: 15px 0
}
.modal--achievements-accomplished .modal__body .avatar-cont img {
width: 80px;
display: inline-block
}
.modal--achievements-accomplished .modal__body .avatar-cont span {
color: #34495e;
font-weight: 700;
display: block;
width: 100%;
font-size: 1.2rem
}
.modal--achievements-accomplished .modal__footer {
position: relative;
color: #34495e;
font-size: .9em;
font-weight: 700;
padding: 0;
border: 3px solid #ecf0f1;
border-radius: 0 0 10px 10px
}
.modal--achievements-accomplished .modal__footer__stats {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
margin: 12px 0
}
.modal--achievements-accomplished .modal__footer__stats__item {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: center;
align-items: center;
padding: 0 10px;
margin: 0 15px
}
@media (max-width: 380px) {
.modal--achievements-accomplished .modal__footer__stats__item {
margin: 0
}
}
.modal--achievements-accomplished .modal__footer__stats h6 {
display: inline-block;
font-weight: 700;
text-align: left;
line-height: 1
}
.modal--achievements-accomplished .modal__footer__stats .score-lbl {
margin-left: 25px;
font-size: 1.2em;
min-width: 55px;
display: inline-block
}
@media (max-width: 380px) {
.modal--achievements-accomplished .modal__footer__stats .score-lbl {
margin-left: 15px
}
}
.modal--achievements-notaccomplished .avatar-cont,
.modal--achievements-notaccomplished .score-lbl {
opacity: .5
}
.modal--achievements-notaccomplished .progressbar {
width: 60px;
margin: 0 auto 15px
}
.modal--purchase .modal__body {
padding: 30px 40px 20px
}
.modal--ranking .modal__header h1 {
margin: 10px 0 0
}
.modal--ranking .modal__header img {
width: 90px
}
.modal--ranking .modal__header p {
margin-bottom: 10px
}
.modal--ranking .modal__body {
font-weight: 300;
padding: 25px 15px 35px
}
.modal--ranking .modal__body .ranking_prize {
display: inline-block;
margin-bottom: 20px
}
.modal--maintenance .modal__body {
padding: 40px 5px 30px
}
.modal--resub_steps,
.modal--unsub_steps {
top: 25%
}
@media (max-width: 480px) {
.modal--resub_steps,
.modal--unsub_steps {
top: 15%
}
}
@media (max-width: 420px) {
.modal--resub_steps,
.modal--unsub_steps {
top: 10%
}
}
@media (max-width: 360px) {
.modal--resub_steps,
.modal--unsub_steps {
top: 5%
}
}
@media (max-width: 320px) {
.modal--resub_steps,
.modal--unsub_steps {
top: 2%
}
}
.modal--resub_steps .modal__header,
.modal--unsub_steps .modal__header {
background: 0 0;
border: none;
padding: 0
}
.modal--resub_steps .modal__body,
.modal--unsub_steps .modal__body {
position: relative;
padding: 0
}
.modal--resub_steps .step-container,
.modal--unsub_steps .step-container {
width: 100%;
max-width: 350px;
margin: 0 auto;
position: relative
}
.modal--resub_steps .step-container:after,
.modal--unsub_steps .step-container:after {
content: "";
display: table;
clear: both
}
.modal--resub_steps .step-container .step-content,
.modal--unsub_steps .step-container .step-content {
display: none;
background-image: url(../images/multi_bg.jpg);
background-color: #ecf0f1;
background-position: top center;
background-repeat: no-repeat;
border: 3px solid #ecf0f1;
border-radius: 10px;
position: absolute;
padding-top: 10px;
top: 0;
min-height: 340px
}
.modal--resub_steps .step-container .step-content .text,
.modal--unsub_steps .step-container .step-content .text {
padding: 15px 7px;
min-width: 350px
}
@media (max-width: 375px) {
.modal--resub_steps .step-container .step-content .text,
.modal--unsub_steps .step-container .step-content .text {
min-width: 300px
}
}
.modal--resub_steps .step-container .step-content .text h1,
.modal--unsub_steps .step-container .step-content .text h1 {
margin-bottom: 20px;
font-weight: 700;
font-size: 1em;
color: #ecf0f1
}
.modal--resub_steps .step-container .step-content .text img,
.modal--unsub_steps .step-container .step-content .text img {
width: 100%;
max-width: 230px
}
.modal--resub_steps .step-container .step-content .text p,
.modal--unsub_steps .step-container .step-content .text p {
margin-top: 5px;
display: inline-block;
padding: 0 2px;
color: #34495e;
font-size: .9em;
font-weight: 300
}
.modal--resub_steps .step-container .step-content .text .form-group,
.modal--unsub_steps .step-container .step-content .text .form-group {
margin: 15px auto;
max-width: 80%;
color: #34495e;
font-size: .9em;
font-weight: 300
}
.modal--resub_steps .step-container .step-content .text .form-group__textfield,
.modal--unsub_steps .step-container .step-content .text .form-group__textfield {
text-align: center
}
@media (max-width: 320px) {
.modal--resub_steps .step-container .step-content .text,
.modal--unsub_steps .step-container .step-content .text {
min-width: 280px
}
.modal--resub_steps .step-container .step-content .text .form-group,
.modal--unsub_steps .step-container .step-content .text .form-group {
margin-bottom: 0
}
}
.modal--resub_steps .step-container .step-content .text .form-group__textfield:focus,
.modal--unsub_steps .step-container .step-content .text .form-group__textfield:focus {
border-bottom: 2px solid #34495e
}
.modal--resub_steps .step-container .step-content .text .sm_width,
.modal--unsub_steps .step-container .step-content .text .sm_width {
max-width: 115px
}
.modal--resub_steps .step-container .step-content .text a,
.modal--unsub_steps .step-container .step-content .text a {
margin: 35px auto 15px;
font-size: 1em;
font-weight: 500;
padding: 10px 30px;
display: block;
max-width: 115px
}
.modal--resub_steps .step-container .step-content .step_terms,
.modal--unsub_steps .step-container .step-content .step_terms {
padding-bottom: 20px;
font-weight: 400;
font-size: .8em;
color: #7f8c8d
}
.modal--resub_steps .step-container .step-content .step_terms a,
.modal--unsub_steps .step-container .step-content .step_terms a {
color: #34495e
}
.modal--resub_steps .step-container .step-dot,
.modal--unsub_steps .step-container .step-dot {
display: none;
float: left;
width: 33.333%;
text-align: center;
padding-top: 40px;
position: relative
}
.modal--resub_steps .step-container .step-dot:after,
.modal--unsub_steps .step-container .step-dot:after {
content: "";
width: 30px;
height: 30px;
background: #7f8c8d;
color: #fff;
display: block;
border-radius: 50%;
border: 2px solid #7f8c8d;
padding-top: 5px;
position: absolute;
top: 0;
left: 41%;
z-index: 99;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .3);
transition: .1s ease-in
}
.modal--resub_steps .step-container .step-dot.one:after,
.modal--unsub_steps .step-container .step-dot.one:after {
content: "1"
}
.modal--resub_steps .step-container .step-dot.two:after,
.modal--unsub_steps .step-container .step-dot.two:after {
content: "2"
}
.modal--resub_steps .step-container .step-dot.three:after,
.modal--unsub_steps .step-container .step-dot.three:after {
content: "3"
}
.modal--resub_steps .step-container .step-dot.one:before,
.modal--unsub_steps .step-container .step-dot.one:before {
display: none
}
.modal--resub_steps .step-container .step-dot:before,
.modal--unsub_steps .step-container .step-dot:before {
content: "";
width: 100%;
height: 4px;
background: #7f8c8d;
display: block;
position: absolute;
top: 12px;
left: -41%;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .3);
transition: .1s ease-in
}
.modal-overlay,
.square-loader {
height: 100%;
position: fixed;
top: 0;
left: 0
}
.modal--resub_steps .step-container label,
.modal--unsub_steps .step-container label {
cursor: pointer;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-user-select: none;
font-size: .9em;
padding: 12px 17px;
margin-bottom: 20px
}
@media (max-width: 320px) {
.modal--resub_steps .step-container label[for=step-3],
.modal--unsub_steps .step-container label[for=step-3] {
margin-bottom: 35px
}
}
.modal--resub_steps .step-container input[name=toggler],
.modal--unsub_steps .step-container input[name=toggler] {
display: none
}
.modal--resub_steps .step-container input[name=toggler]:checked+.step-dot+.step-content,
.modal--unsub_steps .step-container input[name=toggler]:checked+.step-dot+.step-content {
display: block
}
.modal--resub_steps .step-container input[name=toggler]:checked+.step-dot:after,
.modal--unsub_steps .step-container input[name=toggler]:checked+.step-dot:after {
background: #071b1b;
color: #fff;
border: 2px solid #071b1b
}
.modal--resub_steps .step-container input[name=toggler]:checked+.step-dot:before,
.modal--unsub_steps .step-container input[name=toggler]:checked+.step-dot:before {
background: #fff;
color: #071b1b
}
.modal--resub_steps .step-container input[name=toggler]:checked~input:checked+.step-dot:before,
.modal--unsub_steps .step-container input[name=toggler]:checked~input:checked+.step-dot:before {
background: #071b1b;
z-index: 1
}
.modal--resub_steps .step-container input[name=toggler]:checked~input:not(:checked)+.step-dot:after,
.modal--unsub_steps .step-container input[name=toggler]:checked~input:not(:checked)+.step-dot:after {
background: #7f8c8d;
color: #fff;
border: 2px solid #071b1b
}
.modal-overlay,
.modal-section__title,
.square-loader {
width: 100%;
background: #3D3D99;
}
.modal-overlay {
z-index: 9998;
opacity: .8;
display: none;
-webkit-transition: all 0.6s ease;
transition: all 0.6s ease;
-webkit-filter: blur(10px);
filter: blur(10px);
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='10');
}
@keyframes dash {
to {
stroke-dashoffset: 0
}
}
@keyframes rocket_animation {
0% {
transform: translateY(0)
}
100% {
transform: translateY(-38px)
}
}
@keyframes fadeIn {
from {
opacity: 0
}
to {
opacity: 1
}
}
.modal-section__title {
color: #fff;
text-align: center;
display: inline-block;
padding: 4px;
font-size: .9em;
font-weight: 700;
background-color: transparent;
}
.modal-section__body {
font-size: .8em;
color: #ffffff;
padding: 15px
}
.opponent-found,
.selected-category {
width: 100%;
background-size: cover;
background-position: 50% 50%;
background-image: url(../images/opponent_found_bg.jpg);
background-repeat: no-repeat
}
.square-loader svg rect {
fill: transparent;
stroke: #8dc63f;
stroke-width: 10
}
.square-loader.start svg rect {
animation: dash 20s linear .5s 1 normal forwards
}
@keyframes dash {
100% {
stroke-dashoffset: 0
}
}
.searching-opponent {
position: relative;
width: 100%;
min-height: 100vh;
color: #fff;
z-index: 1
}
.searching-opponent__content {
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
max-width: 500px;
min-width: 500px;
text-align: center;
padding: 10px
}
@media (max-width: 767px),
(max-height:700px) {
.searching-opponent__content {
position: relative;
text-align: center;
left: auto;
top: auto;
-ms-transform: translate(0, 0);
transform: translate(0, 0);
width: 100%;
margin: 0 auto;
padding-top: 50px;
min-width: auto
}
}
.searching-opponent__content h1 {
font-size: 1.7em;
font-weight: 700;
padding-bottom: 45px
}
@media (max-width: 1366px) and (max-height:715px) and (orientation:landscape) {
.searching-opponent__content {
padding-top: 10px
}
.searching-opponent__content h1 {
padding-bottom: 10px
}
}
@media (max-width: 767px) {
.searching-opponent__content h1 {
font-size: 1.3em;
padding-bottom: 40px
}
}
.searching-opponent__content__avatars {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
.searching-opponent__content__avatars .avatar-item {
opacity: .5;
-ms-flex: 0 0 25%;
flex: 0 0 25%;
padding: 15px 7px;
transition: opacity .2s linear, transform .2s linear
}
.searching-opponent__content__avatars .avatar-item img {
border-radius: 50%;
display: block
}
.searching-opponent__content__avatars .avatar-item.active {
opacity: 1;
-ms-transform: scale(1.1);
transform: scale(1.1);
transition-delay: 0ms
}
.played {
opacity: .1 !important;
-ms-transform: scale(1) !important;
transform: scale(1) !important
}
.cat-item-auto.active {
opacity: 1;
-ms-transform: scale(1.1);
transform: scale(1.1);
transition-delay: 0ms
}
.select-category {
position: relative;
width: 100%;
min-height: 90vh;
color: #fff;
z-index: 100
}
@media (max-width: 576px) {
.select-category {
margin-top: 7%
}
}
.select-category--waiting .cat-item {
opacity: .5
}
.select-category--waiting .cat-item a {
cursor: default;
pointer-events: none
}
.select-category--waiting .cat-item-auto {
opacity: 1
}
.select-category__content {
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
max-width: 500px;
min-width: 500px;
text-align: center;
width: 100%;
padding: 10px
}
@media (min-width: 1023px) and (max-width:1025px) {
.select-category__content {
max-width: 650px;
min-width: 650px
}
}
@media (max-width: 767px),
(max-height:700px) {
.select-category__content {
position: relative;
text-align: center;
left: auto;
top: auto;
-ms-transform: translate(0, 0);
transform: translate(0, 0);
width: 100%;
margin: 0 auto;
padding-top: 50px;
min-width: auto
}
}
.opponent-found__vs,
.selected-category__content {
-ms-transform: translate(-50%, -50%);
text-align: center
}
.select-category__content h1 {
font-size: 1.7em;
font-weight: 700;
padding-bottom: 45px
}
@media (max-width: 1366px) and (max-height:740px) and (orientation:landscape) {
.select-category__content {
padding-top: 10px
}
.select-category__content h1 {
padding-bottom: 5px;
font-size: 1.5em
}
}
@media (max-width: 767px) {
.select-category__content h1 {
font-size: 1.3em;
padding-bottom: 40px
}
}
.select-category__content__icons {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
@media (max-width: 400px) {
.select-category__content {
padding-top: 25px
}
.select-category__content h1 {
padding-bottom: 20px
}
.select-category__content__icons {
-ms-flex-pack: distribute;
justify-content: space-around
}
}
.select-category__content__icons .cat-item {
-ms-flex: 0 0 33.33%;
flex: 0 0 33.33%;
transition: opacity .4s linear, transform .4s linear;
transition-delay: .2s
}
@media (max-width: 400px) {
.select-category__content__icons .cat-item {
-ms-flex: 0 0 30%;
flex: 0 0 30%
}
}
.select-category__content__icons .cat-item a {
padding: 20px;
display: block
}
@media (max-width: 576px) {
.select-category__content__icons .cat-item a {
padding: 10px 10px 20px
}
}
.select-category__content__icons .cat-item img {
width: 100%;
display: block;
padding-bottom: 8px
}
.select-category__content__icons .cat-item__name {
color: #fff;
font-weight: 700;
font-size: 1.2em
}
@media (max-width: 375px) {
.select-category__content__icons .cat-item__name {
font-size: .8em
}
}
.selected-category {
position: relative;
min-height: 100vh;
background-color: #34495e;
background: #0f3d3d url(../images/generic_bg.svg);
color: #fff
}
.selected-category__content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 500px;
min-width: 500px;
padding: 10px
}
@media (max-width: 767px),
(max-height:700px) {
.selected-category__content {
min-width: auto;
width: 100%
}
}
@media (max-height: 550px) {
.selected-category__content {
position: relative;
text-align: center;
left: auto;
top: auto;
-ms-transform: translate(0, 0);
transform: translate(0, 0);
width: 100%;
margin: 0 auto;
padding-top: 50px;
min-width: auto
}
}
.opponent-found__vs,
.opponent-found__vs span {
left: 50%;
top: 50%;
font-weight: 800;
position: absolute
}
.selected-category__content h1 {
font-size: 3.5em;
font-weight: 700;
padding-bottom: 100px
}
@media (max-width: 767px) {
.selected-category__content h1 {
font-size: 2.5em;
padding-bottom: 100px
}
}
.selected-category__content__icon img {
max-width: 200px;
margin-bottom: 10px;
border: 5px solid #34495e;
border-radius: 50%
}
.selected-category__content__icon__name {
display: block;
font-weight: 700;
font-size: 2.3em;
padding-bottom: 100px
}
@media (max-width: 576px) {
.selected-category__content__icon img {
max-width: 120px
}
.selected-category__content__icon__name {
font-size: 1.9em
}
}
.opponent-found {
position: relative;
height: 100vh;
min-height: 390px;
}
.opponent-found__vs {
display: block;
width: calc(100vw/4);
height: calc(100vw/4);
border-radius: 100%;
min-width: 90px;
min-height: 90px;
max-width: 190px;
max-height: 190px;
color: #fff;
background: #204f3f;
transform: translate(-50%, -50%)
}
.network-problem,
.notifications {
min-height: 100vh;
background: #0f3d3d url(../images/generic_bg.svg);
}
@media (max-width: 801px) {
.opponent-found__vs {
max-width: 155px;
max-height: 155px
}
}
@media (max-width: 768px) {
.square-loader svg rect {
stroke-width: 8
}
.opponent-found__vs {
max-width: 140px;
max-height: 140px
}
}
@media (max-width: 767px) {
.opponent-found__vs {
max-width: 125px;
max-height: 125px
}
}
@media (max-width: 576px) {
.opponent-found__vs {
max-width: 110px;
max-height: 110px
}
}
.opponent-found__vs span {
display: block;
width: 100%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%)
}
.opponent-found__item {
font-size: calc(1vw/1.7 + 4px);
position: absolute;
max-width: 240px;
width: 18em;
text-align: center;
color: #fff
}
@media (min-width: 1360px) {
.opponent-found__item {
font-size: 12px
}
}
.opponent-found__item--left {
left: 25%;
margin-left: -10.5em;
bottom: 60vh;
}
.opponent-found__item--right {
right: 25%;
margin-right: -10.5em;
bottom: 10vh
}
@media (max-width: 576px) {
.opponent-found__item--right {
bottom: 6vh
}
}
.opponent-found__item__avatar {
width: 100%;
margin-bottom: 15px;
border-radius: 100%
}
.opponent-found__item__name {
font-size: 3.2em;
font-weight: 800
}
.opponent-found__item__level {
font-size: 2.7em
}
.opponent-found__item span {
display: block
}
body,
html {
margin: 0
}
.donut-chart {
position: relative;
padding: 0 0 10px
}
.donut-chart__info {
position: absolute;
width: 50px;
font-size: .7em;
text-align: left;
font-weight: 700
}
.donut-chart__info .num {
font-weight: 700;
display: block;
font-size: 1.4em
}
.donut-chart__info.games-left {
top: 5px;
left: 50%;
margin-left: -100px;
color: #ffffff
}
.donut-chart__info.games-played {
top: 5px;
right: 50%;
margin-right: -100px;
color: #ffffff
}
.donut-chart--speed {
padding: 15px 0 10px
}
.donut-chart--speed .donut-size {
font-size: 7.5em
}
.donut-chart--speed .pie-wrapper .label {
font-size: .1em;
padding: 9px
}
.donut-chart--speed .pie-wrapper .label span {
color: #ffffff;
font-weight: 700
}
.donut-chart--speed .donut-chart__info {
font-size: 1.1em
}
.donut-chart--speed .pie-wrapper .half-circle {
border-color: #8dc63f
}
.donut-chart--speed .pie-wrapper .shadow {
border-color: #0f3d3d
}
.donut-chart--speed .games-left {
top: 50%;
color: #ffffff;
margin-left: -6.7em;
margin-top: -10px
}
.donut-chart--speed .games-played {
top: 50%;
margin-top: -10px;
color: #ffffff;
margin-right: -7em
}
.donut-size {
font-size: 5em
}
.pie-wrapper {
position: relative;
width: 1em;
height: 1em;
margin: 0 auto;
-webkit-box-shadow: 3px 3px 3px 0 rgba(0, 0, 0, .75);
-moz-box-shadow: 3px 3px 3px 0 rgba(0, 0, 0, .75);
box-shadow: 3px 3px 3px 0 rgba(0, 0, 0, .75);
border-radius: 50%;
}
.pie-wrapper .pie {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
clip: rect(0, 1em, 1em, .5em)
}
.pie-wrapper .half-circle {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: .2em solid #8dc63f;
border-radius: 50%;
clip: rect(0, .5em, 1em, 0);
transition: all .2s linear
}
.pie-wrapper .right-side {
-ms-transform: rotate(0);
transform: rotate(0);
transition: all .2s linear
}
.pie-wrapper .label {
position: absolute;
font-size: .12em;
width: 100%;
top: 0;
left: 0;
text-align: center
}
.pie-wrapper .smaller {
text-align: center;
color: #ffffff;
display: inline-block;
width: 100%;
padding: 32px 6px 0
}
.pie-wrapper .num {
width: 100%;
color: #ffffff;
font-size: 1.4em;
font-weight: 700;
display: inline-block
}
.pie-wrapper .shadow {
width: 100%;
height: 100%;
border: .2em solid #0f3d3d;
border-radius: 50%
}
.network-problem {
position: relative;
width: 100%;
height: 100%
}
.network-problem__content {
width: 100%;
padding: 0 25px;
max-width: 470px;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%)
}
@media (min-width: 724px) and (max-width:1024px) {
.network-problem__content {
max-width: 600px;
font-size: 23px
}
}
@media (max-height: 460px) {
.network-problem__content {
position: relative;
margin: 0 auto;
top: 0;
left: 0;
-ms-transform: none;
transform: none;
padding: 50px 0
}
}
.network-problem__content h1 {
color: #ffffff;
font-size: 1.5em;
font-weight: 700
}
.network-problem__content img {
padding-top: 40px;
max-width: 150px
}
@media (min-width: 724px) and (max-width:1024px) {
.network-problem__content img {
max-width: 200px
}
}
.network-problem__content p {
color: #ffffff;
padding: 30px 0;
font-size: 1em
}
.notifications {
position: relative;
width: 100%;
height: 100%;
padding-top: 90px;
padding-bottom: 40px;
font-size: 22px
}
@media (max-width: 992px) {
.notifications {
font-size: 20px
}
}
@media (max-width: 768px) {
.notifications {
font-size: 16px
}
}
@media (max-width: 576px) {
.notifications {
font-size: 16px
}
}
@media (max-width: 500px) {
.notifications {
font-size: 13px
}
}
@media (max-width: 1024px) {
.notifications {
padding-top: 130px
}
}
.notifications__content {
width: 100%;
padding-top: 20px;
max-width: 1024px;
text-align: center;
margin: 0 auto
}
.notifications__header {
position: relative;
color: #ffffff;
font-size: 1.3em;
font-weight: 700;
padding-bottom: 20px
}
.notifications__header h1 {
font-weight: 700
}
.notifications__header a {
position: absolute;
top: -15px;
right: 15px
}
.notifications__list ul li {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-align: center;
align-items: center;
border-bottom: 2px solid #8dc63f;
margin-bottom: 10px;
padding: 0 10px 10px
}
@media (min-width: 1024px) {
.notifications__list ul li {
padding: 0 20px 20px;
margin-bottom: 20px
}
}
.notifications__list ul li.read {
border-bottom: 2px solid #bdc3c7
}
.notifications__list__icon {
width: 7%
}
@media (max-width: 1024px) {
.notifications__list__icon {
width: 6%
}
}
@media (max-width: 767px) {
.notifications__list__icon {
width: 10%
}
}
@media (max-width: 500px) {
.notifications__list__icon {
width: 10%
}
}
@media (max-width: 400px) {
.notifications__list__icon {
width: 13%
}
}
.notifications__list__icon img {
width: 100%;
vertical-align: middle
}
.notifications__list__text {
width: 78%;
padding-left: 10px;
color: #ffffff;
text-align: left
}
@media (max-width: 1024px) {
.notifications__list__text {
width: 79%
}
}
@media (max-width: 767px) {
.notifications__list__text {
width: 75%
}
}
@media (max-width: 500px) {
.notifications__list__text {
width: 70%;
font-size: 13px
}
}
@media (max-width: 400px) {
.notifications__list__text {
font-size: 12px;
width: 62%
}
}
@media (min-width: 1024px) {
.notifications__list__text {
padding-left: 20px
}
}
.notifications__list__text span {
display: block;
font-size: .8em;
padding-top: 5px
}
.notifications__list__button {
width: 15%
}
.notifications__list__button .btn2 {
padding: 9px 0 10px;
width: 100%
}
@media (max-width: 1024px) {
.notifications__list__button {
width: 15%
}
}
@media (max-width: 500px) {
.notifications__list__button {
width: 20%
}
}
@media (max-width: 400px) {
.notifications__list__button {
width: 25%
}
.notifications__list__button .btn2 {
padding: 8px 0 9px
}
}
@media (max-width: 320px) {
.notifications__list__button .btn2 {
padding: 7px 0 8px
}
}
.notifications__list .bonus .notifications__list__text {
width: 89%
}
.notifications__list .bonus .notifications__list__button {
display: none
}
.notifications__list__seperator {
text-align: left;
background: #071b1b;
margin-top: 20px;
color: #ffffff;
padding: 8px 19px;
margin-bottom: 10px;
font-weight: 700
}
.notifications--empty {
font-size: 22px
}
.notifications--empty .notifications__content {
position: absolute;
max-width: 350px;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%)
}
@media (max-width: 1024px) {
.notifications--empty .notifications__content {
padding-top: 30px
}
}
@media (max-height: 640px) {
.notifications--empty .notifications__content {
position: relative;
margin: 0 auto;
top: 0;
left: 0;
padding-top: 30px;
-ms-transform: none;
transform: none
}
}
.notifications--empty img {
max-width: 180px;
padding-bottom: 20px
}
@media (max-width: 767px) {
.notifications--empty {
font-size: 18px;
padding-left: 25px;
padding-right: 25px
}
.notifications--empty img {
max-width: 120px
}
}
.notifications--empty h1 {
font-weight: 700;
color: #7f8c8d;
padding-bottom: 30px
}
.notifications--empty p {
color: #7f8c8d;
font-size: .8em;
padding-bottom: 30px
}
.notifications--empty a {
font-size: 18px
}
@media (max-width: 767px) {
.notifications--empty a {
font-size: 15px
}
}
.load-more {
margin-top: 15px;
font-size: 29px;
font-weight: 700;
line-height: .1;
padding: 8px 0 11px 0;
background-color: #EF853B;
border-radius: 20px;
color: #fff;
box-shadow: none;
width: 48px;
text-align: center;
}
.profile {
padding-top: 60px;
height: 100vh;
background: #0f3d3d url(../images/generic_bg.svg);
font-size: 15px
}
@media (max-width: 1025px) {
.profile {
padding-top: 100px
}
}
.profile__header {
position: relative;
width: 100%;
min-height: 360px;
background: #82ac48 url(../images/game_history_bg.svg) top repeat;
background-size: 70%;
color: #fff
}
@media (max-width: 600px) {
.profile__header {
min-height: 180px
}
}
.profile__header__content {
position: relative;
margin: 0 auto;
width: 100%;
max-width: 768px;
height: 100%;
min-height: 360px
}
.profile__header__content__center {
position: relative;
text-align: center;
margin: 0 auto;
padding-top: 80px
}
.profile__header__content__avatar {
position: relative;
font-size: 16px
}
@media (max-width: 600px) {
.profile__header__content {
min-height: 180px
}
.profile__header__content__center {
padding-top: 50px
}
.profile__header__content__avatar {
font-size: 8px
}
}
.profile__header__content__avatar img.avatar {
background: #dbdbdb;
padding: 1.3em;
width: 12em;
height: 12em;
border-radius: 50%
}
.profile__header__content__avatar a.edit-icon {
position: absolute;
background: #325f40;
padding: 1em;
border-radius: 50%;
left: 50%;
margin-left: 2em;
top: -1.3em
}
.profile__header__content__avatar a.edit-icon img {
width: 2.7em;
height: 2.4em
}
.profile__header__content__avatar span.name {
position: absolute;
bottom: -.8em;
display: inline-block;
left: 50%;
-ms-transform: translateX(-50%);
transform: translateX(-50%);
background: #0f3d3d;
min-width: 9.5em;
padding: .4em .4em .5em;
font-size: 1.8em;
font-weight: 700;
border: 2px solid #fff;
-webkit-box-shadow: 3px 3px 3px 0 rgba(0, 0, 0, .75);
-moz-box-shadow: 3px 3px 3px 0 rgba(0, 0, 0, .75);
box-shadow: 3px 3px 3px 0 rgba(0, 0, 0, .75);
border-radius: .4em
}
.profile__header__content__data {
position: absolute;
height: 100%;
top: 0;
padding-top: 70px
}
.profile__header__content__data--left {
left: 0
}
.profile__header__content__data--left .data-block__score {
border-top-right-radius: 50px;
border-bottom-right-radius: 50px
}
.profile__header__content__data--right {
right: 0
}
.profile__header__content__data--right .data-block__score {
border-top-left-radius: 50px;
border-bottom-left-radius: 50px
}
.profile__header__content__data .data-block {
color: #fff;
font-size: 15px;
margin-bottom: 2.6em
}
@media (max-width: 600px) {
.profile__header__content__data {
padding-top: 40px
}
.profile__header__content__data .data-block {
font-size: 9px;
margin-bottom: 1.6em
}
}
.profile__header__content__data .data-block__score {
background: #34495e;
width: 5em;
text-align: center;
font-size: 1.7em;
font-weight: 700;
padding: .4em;
margin-bottom: .3em
}
@media (max-width: 400px) {
.profile__header__content__data .data-block__score {
width: 4.5em
}
}
.profile__header__content__data .data-block__level {
width: 6.4em;
text-align: center;
font-size: 1.3em
}
@media (max-width: 400px) {
.profile__header__content__data .data-block__level {
width: 5.9em
}
}
.profile__block {
background: #0f3d3d url(../images/generic_bg.svg);
}
.profile__block__header {
background-color: #071b1b;
text-align: center;
color: #fff;
padding: 10px 0
}
.profile__block__header h2 {
font-weight: 700;
font-size: 1.6em
}
@media (max-width: 600px) {
.profile__block__header {
font-size: .8em;
padding: 7px 0
}
}
@media (max-width: 321px) {
.profile__block__header {
font-size: .6em;
padding: 7px 0
}
}
.profile__block__header--withaction .centered {
position: relative;
max-width: 768px;
width: 100%;
text-align: center;
margin: 0 auto
}
.profile__block__header--withaction .centered .action {
position: absolute;
right: 0;
top: 3px
}
.profile__block__header--withaction .centered .action a {
color: #fff;
font-size: 1.2em;
vertical-align: middle;
display: inline-block;
line-height: 1em;
position: relative;
padding-right: 40px
}
@media (max-width: 600px) {
.profile__block__header--withaction .centered .action {
top: 4px
}
.profile__block__header--withaction .centered .action a {
padding-right: 30px
}
}
.profile__block__header--withaction .centered .action a:after {
content: '\0043';
display: inline-block;
font-family: DUEL;
font-style: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
letter-spacing: 2px;
position: absolute;
right: 0;
font-size: 1.6em;
font-weight: 700;
top: -5px
}
.profile__block__content {
position: relative;
margin: 0 auto;
width: 100%;
max-width: 1024px
}
.profile__block__content--your-performance {
display: -ms-flexbox;
display: flex
}
.profile__block__content--fb_section {
background-color: #4267b2;
text-align: center;
color: #fff;
height: 90px;
line-height: 6em
}
@media (max-width: 600px) {
.profile__block__header--withaction .centered .action a:after {
top: -4px
}
.profile__block__content--fb_section {
display: -ms-flexbox;
display: flex;
line-height: 1.5em;
text-align: left;
height: 60px;
padding: 1.6% 7%
}
}
@media (max-width: 385px) {
.profile__block__content--fb_section {
line-height: 1.2em;
height: 45px;
padding: 1.6% 4%
}
}
.profile__block__content--fb_section h2 {
font-size: 1.2em;
display: inline-block;
font-weight: 400
}
@media (max-width: 480px) {
.profile__block__content--fb_section h2 {
font-size: 1em
}
}
@media (max-width: 420px) {
.profile__block__content--fb_section h2 {
font-size: .97em
}
}
@media (max-width: 375px) {
.profile__block__content--fb_section h2 {
font-size: .95em
}
}
@media (max-width: 360px) {
.profile__block__content--fb_section h2 {
font-size: .9em
}
}
@media (max-width: 320px) {
.profile__block__content--fb_section h2 {
font-size: .8em
}
}
.profile__block__content--fb_section img {
width: 50px;
max-width: 6em;
display: inline-block;
margin-right: 2%;
position: relative;
top: 20%
}
@media (max-width: 600px) {
.profile__block__content--fb_section img {
max-width: 2.5em;
top: 0;
margin-right: 5%
}
}
@media (max-width: 360px) {
.profile__block__content--fb_section img {
max-width: 2em
}
}
.profile__block__content__stats {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: 100%;
padding: 25px 0
}
@media (max-width: 400px) {
.profile__block__content__stats {
padding: 15px 0
}
}
.profile__block__content__stats li {
padding: 12px 0;
text-align: center;
width: 33%;
border-right: 2px solid #ffffff;
color: #ffffff;
font-weight: 700;
font-size: 1.5em
}
@media (max-width: 400px) {
.profile__block__content__stats li {
font-size: 1em;
padding: 6px 0;
border-right: 1px solid #7f8c8d
}
}
.profile__block__content__stats li:last-child {
border: none
}
.profile__block__content__stats li span {
display: block;
font-weight: 400;
font-size: .9em
}
.profile__block__content .avatar-cont {
-ms-flex: 1 1 40%;
flex: 1 1 40%;
text-align: center;
display: -ms-flexbox;
display: flex
}
@media (max-width: 576px) {
.profile__block__content .avatar-cont {
-ms-flex: 1 1 35%;
flex: 1 1 35%
}
.profile__block__content .avatar-cont img {
padding: 0 15px
}
}
.profile__block__content .avatar-cont img {
max-width: 180px;
width: 100%;
-ms-flex-item-align: end;
align-self: flex-end;
margin: 0 auto
}
@media (max-width: 321px) {
.profile__block__content .avatar-cont img {
padding: 0 15px
}
}
.profile__block__content .stats-cont {
-ms-flex: 1 1 60%;
flex: 1 1 60%;
padding: 4% 12%;
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center
}
@media (max-width: 768px) {
.profile__block__content .stats-cont {
padding: 20px 40px;
font-size: 14px
}
}
@media (max-width: 576px) {
.profile__block__content .stats-cont {
padding: 20px 30px;
font-size: 11px;
-ms-flex: 1 1 65%;
flex: 1 1 65%
}
}
@media (max-width: 321px) {
.profile__block__content .stats-cont {
padding: 10px 15px;
font-size: 9px
}
}
.profile__block__content .stats-cont__item {
margin-bottom: 2em
}
@media (max-width: 576px) {
.profile__block__content .stats-cont__item {
margin-bottom: 1em
}
}
.profile__block__content .stats-cont__item:last-child {
margin-bottom: 0
}
.profile__block__content .stats-cont__item h4 {
color: #ffffff;
font-size: 1.5em;
font-weight: 700
}
.profile__block__content .stats-cont__item p {
color: #ffffff;
font-size: 1.3em
}
.profile__block__content .stats-cont__item .progressbar {
margin: 7px 0
}
@media (max-width: 576px) {
.profile__block__content .stats-cont__item .progressbar {
margin: 5px 0
}
}
.profile__block__content--achievements,
.profile__block__content--theme-performance {
padding: 1.6em 0
}
.profile__block__content .theme-cont {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
.profile__block__content .theme-cont__icon {
-ms-flex: 0 0 25%;
flex: 0 0 25%;
text-align: center;
margin-bottom: 1.6em
}
@media (max-width: 567px) {
.profile__block__content--achievements,
.profile__block__content--theme-performance {
font-size: 11px
}
.profile__block__content .theme-cont {
padding: 0 20px
}
.profile__block__content .theme-cont__icon {
margin-bottom: 0
}
}
.profile__block__content .theme-cont__icon img {
width: 100%;
display: inline-block;
padding-bottom: .3em;
max-width: 6em
}
@media (max-width: 321px) {
.profile__block__content .theme-cont__icon img {
max-width: 4.5em
}
}
.profile__block__content .theme-cont__icon span {
font-weight: 700;
font-size: 1.3em;
display: block
}
.profile__block__content .theme-cont--achievements {
color: #7f8c8d
}
.profile__block__content .theme-cont--achievements .theme-cont__icon h5 {
font-size: 1.3em;
font-weight: 700;
padding-bottom: 5px
}
.profile__block__content .theme-cont--achievements .theme-cont__icon__desc {
font-size: 1em;
font-weight: 700
}
.profile__block__content .theme-cont--achievements .theme-cont__icon__desc span {
font-size: 1em
}
.profile__block__content .carousel__nav {
color: #828f90
}
@media (min-width: 576px) {
.profile__block__content .theme-cont .owl-stage {
-ms-transform: none !important;
transform: none !important;
width: 100% !important
}
.profile__block__content .theme-cont .owl-item.cloned {
display: none !important
}
.profile__block__content .carousel__nav {
display: none
}
}
@media (max-width: 767px) {
.profile__block__content .carousel__nav {
padding: 0
}
}
.profile__block__content--empty-state {
text-align: center;
padding: 2.5em 0;
color: #ffffff
}
.profile__block__content--empty-state img {
max-width: 12.5em
}
@media (max-width: 400px) {
.profile__block__content--empty-state {
font-size: 12px;
padding: 1.5em 0
}
.profile__block__content--empty-state img {
max-width: 8.5em
}
}
.profile__block__content--empty-state h1 {
font-size: 1.6em;
font-weight: 700;
padding: .5em 0
}
.profile__block__content--empty-state p {
font-size: 1.3em
}
.profile__block__content--empty-state a {
margin-top: 1.5em;
display: inline-block;
font-weight: 700
}
@media (max-width: 768px) {
.profile__block__content--edit-avatar {
font-size: 13px
}
}
@media (max-width: 576px) {
.profile__block__content--edit-avatar {
font-size: 9px
}
}
.avatar-studio__head ul .avatar-option,
.avatar-studio__main__nav,
.tab-header a {
font-size: 1.8em;
font-weight: 700
}
.profile__block__content--edit-avatar .select-edit-avatar {
display: -ms-flexbox;
display: flex;
text-align: center;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 40px 0
}
.profile__block__content--edit-avatar .select-edit-avatar .avatar {
-ms-flex: 1;
flex: 1
}
.profile__block__content--edit-avatar .select-edit-avatar .avatar span {
font-size: 1.8em;
color: #ffffff;
font-weight: 700;
padding-bottom: 10px;
display: inline-block
}
.profile__block__content--edit-avatar .select-edit-avatar .avatar img {
max-width: 50%;
display: block;
margin: 0 auto;
border-radius: 50%
}
.profile__block__content--edit-avatar .select-edit-avatar .avatar.active img {
border: .32em solid #8dc63f
}
.settings__group,
.settings__group h2 {
border-bottom: 3px solid #fff;
color: #fff;
}
.profile__block__content--edit-avatar .select-edit-avatar .facebook_active .fb_hide,
.profile__block__content--edit-avatar .select-edit-avatar .facebook_inactive .fb_show {
display: none
}
.profile__block__content--password {
padding: 40px 15px;
max-width: 600px;
width: 100%;
margin: 0 auto
}
.profile__block__content--password form a {
display: block;
width: 100%;
text-align: right;
margin-bottom: 15px
}
.profile__block__content--password form button {
font-weight: 700;
display: block;
margin: 40px auto
}
.fb_on {
display: none !important
}
.fb_error_fixed,
.fb_error_msg {
color: #ffffff;
display: block;
text-align: center
}
.fb_error_msg {
max-width: 70%;
margin: 0 auto;
padding: 1% 0
}
.fb_error_fixed {
position: relative;
bottom: 1px;
width: 100%;
padding: 5px;
background-color: #fff
}
.fb_pad_off {
padding-bottom: 90px
}
@media (max-width: 600px) {
.fb_pad_off {
padding-bottom: 60px
}
}
@media (max-width: 360px) {
.fb_pad_off {
padding-bottom: 45px
}
}
.progressbar {
width: 100%;
background: #e74c3c;
border-radius: 11px;
overflow: hidden
}
.progressbar__bar {
background: #00ac49;
height: 2.4em;
width: 0%;
transition: width 2s ease-in-out
}
.progressbar--small {
background: #bdc3c7
}
.progressbar--small .progressbar__bar {
height: 10px
}
@media (max-width: 576px) {
.progressbar--small .progressbar__bar {
height: 6px
}
}
.tab-header {
width: 100%;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between;
text-align: center
}
.tab-header a {
display: inline-block;
-ms-flex: 1;
flex: 1;
padding: 10px 0;
color: #ffffff;
position: relative;
transition: all .2s linear
}
.tab-header a:after {
content: "";
position: absolute;
height: 0;
bottom: -2px;
left: 0;
width: 100%;
background: #8dc63f;
transition: height .2s linear
}
.tab-header a.active,
.tab-header a:hover {
color: #8dc63f
}
.tab-header a.active:after {
height: 5px
}
.tab-container__item {
display: none
}
.tab-container__item.active {
display: block
}
.avatar-studio {
display: none;
padding-top: 40px;
text-align: center
}
@media (max-width: 768px) {
.avatar-studio__head {
padding: 0 15px
}
}
.avatar-studio__head ul {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between
}
.avatar-studio__head ul .avatar-option a {
color: #7f8c8d
}
.avatar-studio__head ul .avatar-option.active a,
.avatar-studio__head ul .avatar-option:hover a {
color: #071b1b
}
.avatar-studio__main {
margin-top: 15px
}
.avatar-studio__main .avatar-options {
display: none
}
.avatar-studio__main .canvas_avatar {
position: relative;
display: block;
margin: 0 auto;
border-radius: 130px;
}
.avatar-studio__main__nav {
position: absolute;
left: 50%;
top: 54%;
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
width: 320px
}
.prizes__carousel,
.settings__group__content>ul>li .settings-right.icon {
position: relative
}
.avatar-studio__main__nav i:before {
font-weight: 700
}
.avatar-studio__main__nav .prev {
float: left
}
.avatar-studio__main__nav .next {
float: right
}
.avatar-studio .save-btn {
display: inline-block;
margin: 20px auto;
font-size: 18px;
font-weight: 700
}
.settings {
padding-top: 60px;
background: #0f3d3d url(../images/generic_bg.svg);
min-height: 100vh
}
@media (max-width: 567px) {
.settings .onoffswitch {
font-size: 13px
}
}
.settings__content {
width: 100%;
max-width: 1024px;
margin: 0 auto;
background-color: #0f3d3d;
padding-bottom: 50px
}
.settings__group {
width: 100%;
border-top: 0
}
@media (min-width: 1024px) {
.settings__group {}
}
@media (max-width: 1024px) {
.settings {
padding-top: 120px
}
.settings__content {
max-width: 100%
}
.settings__group {
font-size: 15px
}
}
@media (max-width: 768px) {
.settings__group {
font-size: 13px
}
}
@media (max-width: 567px) {
.settings__group {
font-size: 11px
}
}
.settings__group h2,
.settings__group__content>ul>li h3 {
font-size: 1.3em;
font-weight: 700
}
.settings__group h2 {
display: block;
width: 100%;
text-align: center;
background: #8dc63f;
padding: 1em 0
}
@media (max-width: 1024px) {
.settings__group h2 {
text-align: left;
padding: 17px 25px
}
}
@media (max-width: 768px) {
.settings__group h2 {
padding: 13px 25px
}
}
@media (max-width: 576px) {
.settings__group h2 {
padding: 11px 15px
}
}
.settings__group__content {}
.settings__group__content>ul {
padding: 0 25px
}
@media (max-width: 576px) {
.settings__group__content>ul {
padding: 0 15px
}
}
.settings__group__content>ul>li {
display: block;
border-bottom: 2px solid #ffffff;
height: 3.7em;
line-height: 3.7em
}
.settings__group__content>ul>li:after {
content: '';
display: block;
clear: both
}
.settings__group__content>ul>li:last-child {
border: 0
}
.settings__group__content>ul>li a {
color: #ffffff
}
.settings__group__content>ul>li a:after {
content: '';
display: block;
clear: both
}
.settings__group__content>ul>li .settings-left {
float: left
}
.settings__group__content>ul>li .settings-right {
float: right
}
.settings__group__content>ul>li .settings-right .onoffswitch {
margin-top: 13px
}
@media (max-width: 768px) {
.settings__group__content>ul>li .settings-right .onoffswitch {
margin-top: 10px
}
}
@media (max-width: 567px) {
.settings__group__content>ul>li .settings-right .onoffswitch {
margin-top: 7px
}
}
.prizes__content,
.prizes__wrapper {
max-width: 1024px;
margin: 0 auto
}
.settings__group__content>ul>li .settings-right.lang ul li {
border: none;
display: inline-block;
padding-left: 15px
}
.settings__group__content>ul>li .settings-right.lang ul li a {
color: #ffffff;
font-weight: 700
}
.settings__group__content>ul>li .settings-right.lang ul li a.active,
.settings__group__content>ul>li .settings-right.lang ul li a:hover {
color: #8dc63f
}
.settings__group__content>ul>li .settings-right.icon a {
display: inline-block
}
.settings__group__content>ul>li .settings-right.icon i {
color: #ffffff;
font-size: 1.2em;
line-height: 1
}
.settings__group__content>ul>li .settings-right.icon i:before {
vertical-align: middle;
font-weight: 700
}
.prizes {
padding-top: 60px;
min-height: 100vh;
overflow: hidden
}
.prizes__content {
width: 100%;
padding-bottom: 50px
}
@media (max-width: 1024px) {
.prizes {
padding-top: 120px
}
.prizes--visitor {
padding-top: 60px
}
.prizes__content {
max-width: 100%
}
}
.prizes .tab-header a {
font-size: 1.7em
}
@media (max-width: 768px) {
.prizes .tab-header a {
font-size: 1.5em;
word-spacing: 30000px;
}
}
@media (max-width: 576px) {
.prizes .tab-header a {
font-size: 1.2em
}
.prizes .tab-header a.active:after {
height: 3px
}
}
@media (max-width: 400px) {
.prizes .tab-header a {
font-size: 1em
}
}
.prizes .tab_off {
display: none
}
.prizes .small_font {
font-size: 1.7em
}
@media (max-width: 435px) {
.prizes .small_font {
font-size: .8em !important
}
}
.prizes__carousel {
text-align: center;
margin: 20px auto;
max-width: 700px
}
@media (max-width: 576px) {
.prizes__carousel {
margin: 10px auto
}
}
.prizes__carousel .prizes-carousel {
max-width: 250px;
position: relative;
margin: 0 auto
}
.prizes__carousel .prizes-carousel .item {
color: #95a5a6
}
.prizes__carousel .prizes-carousel .item span {
padding-top: 10px;
display: block;
font-size: 1.5em;
font-weight: 700
}
@media (max-width: 576px) {
.prizes__carousel .prizes-carousel {
max-width: 120px
}
.prizes__carousel .prizes-carousel .item span {
font-size: .8em;
padding-top: 5px
}
}
.prizes__carousel .prizes-carousel .item img {
width: 100%
}
.prizes__carousel .carousel__nav {
color: #ffffff;
margin-top: 10px
}
.prizes__carousel .carousel__nav i:before {
font-weight: 700;
font-size: .7em
}
.prizes__carousel__dots {
font-size: 16px;
text-align: center;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: distribute;
justify-content: space-around;
margin: 0 0 20px
}
@media (max-width: 1024px) {
.prizes__carousel__dots {
margin: 30px 0 20px;
font-size: 15px
}
}
@media (max-width: 992px) {
.prizes__carousel__dots {
font-size: 14px
}
}
@media (max-width: 768px) {
.prizes__carousel__dots {
font-size: 12px
}
}
@media (max-width: 576px) {
.prizes__carousel__dots {
margin: 20px 0;
font-size: 10px
}
}
@media (max-width: 400px) {
.prizes__carousel__dots {
font-size: 9px
}
}
.prizes__carousel__dots:before {
content: "";
position: absolute;
height: 4px;
/* background: #ffffff; */
width: 100%;
width: 100vw;
margin-left: -50vw;
left: 50%;
top: .875em
}
@media (max-width: 768px) {
.prizes__carousel__dots:before {
height: 3px
}
}
.prizes__carousel__dots .owl-dot {
cursor: pointer;
text-align: center;
z-index: 1
}
.prizes__carousel__dots .owl-dot span {
display: inline-block;
background: #ffffff;
height: 2em;
width: 2em;
border-radius: 2em
}
.prizes__carousel__dots .owl-dot.active span {
background: #8dc63f
}
.prizes__carousel__dots .owl-dot .desc {
padding-top: 8px;
font-size: 1.5em;
font-weight: 700;
color: #ffffff
}
.prizes__carousel__dots .owl-dot.active .desc {
color: #8dc63f
}
.prizes .tab-container__item {
position: relative
}
.prizes__rank {
color: #fff;
background-color: #071b1b;
padding: 12px 0;
margin-top: 30px
}
@media (max-width: 576px) {
.prizes__rank {
margin-top: 0
}
}
@media (max-width: 767px) {
.prizes__rank {
font-size: 14px
}
}
@media (max-width: 400px) {
.prizes__rank {
font-size: 12px
}
}
.prizes__rank__cont {
max-width: 700px;
margin: 0 auto;
display: -ms-flexbox;
display: flex
}
.prizes__rank__cont__item {
width: 33%;
font-size: 1.4em;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-direction: column;
flex-direction: column;
text-align: center
}
.prizes__rank__cont__item--center {
display: block;
font-size: 1.2em
}
.prizes__rank__cont__item--center h1,
.prizes__rank__cont__item--center h2 {
font-weight: 700
}
.prizes__rank__cont__item--center h1 {
font-size: 1.5em
}
@media (max-width: 576px) {
.prizes__rank__cont__item--center h1 {
font-size: 1.2em
}
}
.prizes__rank__cont__item--center img {
max-width: 90px;
display: block;
margin: 0 auto;
padding: 10px 0
}
@media (max-width: 767px) {
.prizes__rank__cont__item--center img {
max-width: 70px
}
}
.prizes__rank__cont__item--center .rank_update {
margin: 2.5vh auto 0;
font-size: 15px
}
@media (max-width: 575px) {
.prizes__rank__cont__item--center .rank_update {
font-size: 12px
}
}
@media (max-height: 1024px) {
.prizes__rank__cont__item--center .rank_update {
margin: 2.5vh auto 0
}
}
@media (max-height: 640px) {
.prizes__rank__cont__item--center .rank_update {
margin: 2vh auto 1vh
}
}
@media (max-height: 568px) {
.prizes__rank__cont__item--center .rank_update {
margin: 1.5vh auto;
font-size: 11px
}
}
.prizes .facebook_share {
background-image: url(../images/share_bg.jpg);
background-size: cover;
background-repeat: no-repeat;
min-height: 100px
}
.prizes .facebook_share .fb_text {
min-height: 40px;
background-color: #4267b2;
text-align: center;
line-height: 5.8vh
}
@media (max-width: 400px) {
.prizes__rank__cont__item--center img {
max-width: 55px
}
.prizes .facebook_share .fb_text {
line-height: 3.8vh
}
}
@media (max-width: 360px) {
.prizes .facebook_share .fb_text {
line-height: 3.5vh
}
}
@media (max-width: 320px) {
.prizes .facebook_share .fb_text {
line-height: 4.5vh
}
}
.prizes .facebook_share .fb_text span {
color: #fff;
font-weight: 700;
font-size: 1.5em
}
@media (max-width: 576px) {
.prizes .facebook_share .fb_text span {
font-size: 1.2em
}
}
@media (max-width: 400px) {
.prizes .facebook_share .fb_text span {
font-size: 1em;
display: inline-block;
margin: 2.5% 0
}
}
.prizes .facebook_share .fb_button {
text-align: center;
padding: 3vh 0
}
.prizes .facebook_share .fb_button .fb_btn {
max-width: 130px;
min-width: 110px;
width: 100%;
padding: 8px 22px;
font-size: 1.3em;
line-height: 1.4em;
text-align: right
}
@media (max-width: 480px) {
.prizes .facebook_share .fb_button .fb_btn {
font-size: 1em;
line-height: 1.1em;
max-width: 110px
}
}
.prizes .facebook_share .fb_button .fb_btn .icon-facebook {
font-size: 1.3em;
vertical-align: middle;
left: 7%;
top: .3em;
position: absolute
}
.prizes .facebook_share .fb_button .fb_btn span {
display: inline-block;
margin-left: 24%;
font-weight: 700
}
.prizes .facebook_share .fb_error_msg {
max-width: 100%;
background-color: #e71010;
margin: 0 auto;
text-align: center;
padding: 1% 3%
}
@media (max-width: 767px) {
.prizes .facebook_share .fb_error_msg {
text-align: left
}
.prizes__rank-list {
font-size: 13px
}
}
.prizes__rank-list ul {
width: 100%;
position: relative;
background: #fff
}
.prizes__rank-list ul li {
display: -ms-flexbox;
display: flex;
padding: 15px 50px;
border-top: 2px solid #bdc3c7;
border-bottom: 2px solid #bdc3c7;
margin-top: -2px
}
@media (max-width: 767px) {
.prizes__rank-list ul li {
padding: 15px 20px
}
}
@media (max-width: 400px) {
.prizes__rank-list {
font-size: 10px
}
.prizes__rank-list ul li {
padding: 10px 15px
}
}
.prizes__rank-list ul li.active,
.prizes__rank-list ul li.active+li {
border-top: 2px solid #8dc63f
}
.prizes__rank-list ul li.active span {
color: #071b1b;
font-weight: 700
}
.prizes__rank-list ul li:first-child {
border-top: 0;
margin-top: 0
}
.prizes__rank-list ul li:last-child {
border-bottom: 0
}
.prizes__rank-list ul li>div {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center
}
.prizes__rank-list ul li>div span {
display: block;
color: #7f8c8d;
font-size: 1.4em
}
.prizes__rank-list ul li .avatar {
width: 80%
}
.prizes__rank-list ul li .avatar img {
max-width: 70px;
margin: 0 25px
}
@media (max-width: 767px) {
.prizes__rank-list ul li .avatar img {
margin: 0 10px;
max-width: 50px
}
}
@media (max-width: 400px) {
.prizes__rank-list ul li .avatar img {
margin: 0 10px;
max-width: 40px
}
}
.prizes__rank-list ul li .score {
text-align: right;
width: 20%
}
.prizes__rank-list ul li .score span {
width: 100%;
text-align: right
}
.achievements {
padding-top: 60px;
padding-bottom: 60px;
background: #ecf0f1;
min-height: 100vh
}
@media (max-width: 1024px) {
.achievements {
padding-top: 120px
}
}
.achievements__header {
position: relative;
display: inline-block;
width: 100%;
min-height: 140px
}
.achievements__header:after {
padding-top: 29.25%;
display: block;
content: ''
}
.achievements__header__content {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
background-image: url(../images/header_achievements.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%
}
@media (max-width: 600px) {
.achievements__header__content {
background-image: url(../images/header_achievements_mobile.jpg)
}
}
.achievements__header__content h1 {
color: #fff;
position: absolute;
font-size: calc(1.7vw + .8em);
font-weight: 700;
padding-left: 150px;
padding-top: 20px
}
@media (max-width: 992px) {
.achievements__header__content h1 {
padding-left: 100px
}
}
@media (max-width: 768px) {
.achievements__header__content h1 {
padding-left: 10px;
padding-top: 10px
}
}
.achievements__category {
margin-top: -3px
}
.achievements__category__head {
width: 100%;
text-align: center;
background: #071b1b;
color: #fff;
padding: 10px 0
}
.achievements__category__head h2 {
font-weight: 700;
font-size: 1.6em
}
@media (max-width: 992px) {
.achievements__category__head h2 {
font-size: 1.5em
}
}
@media (max-width: 767px) {
.achievements__category__head {
padding: 5px 0
}
.achievements__category__head h2 {
font-size: 1.2em
}
}
.achievements__category__body {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
max-width: 1024px;
margin: 0 auto;
padding: 40px 0 35px
}
@media (max-width: 992px) {
.achievements__category__body {
padding: 30px 0 25px
}
}
@media (max-width: 767px) {
.achievements__category__body {
padding: 20px 0 15px
}
}
.achievements__category__icon {
width: 12.5%;
padding: 0 1.4em;
text-align: center;
margin-bottom: 20px
}
@media (max-width: 992px) {
.achievements__category__icon {
width: 16.5%;
font-size: 15px
}
}
@media (max-width: 767px) {
.achievements__category__icon {
width: 20%
}
}
@media (max-width: 576px) {
.achievements__category__icon {
width: 25%;
font-size: 11px;
padding: 0 1.1em
}
}
.achievements__category__icon img {
width: 100%;
padding-bottom: 2px
}
.achievements__category__icon h3 {
color: #7f8c8d;
font-weight: 700;
font-size: 1.2em;
padding-bottom: 11px
}
@media (max-width: 576px) {
.achievements__category__icon h3 {
padding-bottom: 8px
}
}
.achievements__category__icon--inactive {
opacity: .3
}
.prizes {
background: #0f3d3d url(../images/generic_bg.svg);
padding-bottom: 40px
}
.prizes__item {
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
padding: 60px 0;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-bottom: 20px;
min-height: 195px;
color: #fff
}
.prizes_light,
.winners {
background: #0f3d3d url(../images/generic_bg.svg);
}
@media (max-width: 992px) {
.prizes__item {
padding: 40px 0
}
}
@media (max-width: 567px) {
.prizes__item {
padding: 30px 0;
margin-bottom: 10px
}
}
.prizes__item:last-child {
margin-bottom: 0
}
.prizes__item__wrapper {
width: 100%;
display: -ms-flexbox;
display: flex;
margin: 0 auto;
max-width: 1024px
}
.prizes__item__cont {
width: 50%;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center
}
.prizes__item__cont__inner {
display: block;
max-width: 320px;
margin: 0 auto;
padding: 0 15px;
min-width: 320px;
}
.prizes__item__cont__inner h2 {
font-size: 2.8em;
font-weight: 700;
padding: 20px 0
}
.prizes__item__cont__inner h3 {
font-size: 1.8em;
font-weight: 700;
width: 100%;
text-align: center
}
.prizes__item__cont__inner img {
width: 100%;
display: block;
margin: 0 auto
}
.prizes__item__cont__inner p {
font-size: 1.4em
}
@media (max-width: 992px) {
.prizes__item__cont__inner {
font-size: 15px;
}
}
@media (max-width: 768px) {
.prizes__item__cont__inner {
font-size: 14px
}
.prizes__item__cont__inner img {
max-width: 200px
}
.prizes__item__cont__inner h2 {
padding-bottom: 20px
}
}
@media (max-width: 567px) {
.prizes__item__cont__inner {
font-size: 9px;
min-width: auto;
margin: initial;
}
.prizes__item__cont__inner h2 {
padding-bottom: 15px
}
.prizes__item__cont__inner p {
font-size: 1.8em
}
}
@media (max-width: 374px) {
.prizes__item__cont__inner {
font-size: 7px
}
}
.prizes__prize_off {
display: none
}
.winners {
background: #0f3d3d url(../images/generic_bg.svg);
padding-top: 60px;
padding-bottom: 70px;
min-height: 100vh
}
.winners__header {
position: relative;
min-height: 280px
}
.winners__header__content {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
background-image: url(../images/header_winners.jpg);
background-color: #34495e;
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%
}
@media (max-width: 568px) {
.winners__header {
min-height: 120px
}
.winners__header__content {
background-size: 150%;
background-image: url(../images/header_winners_mobile.jpg);
background-position: bottom center
}
}
.winners__header__content h1 {
color: #fff;
position: absolute;
font-size: calc(1.7vw + .8em);
font-weight: 700;
padding-left: 150px;
padding-top: 20px
}
.winners__table,
.winners__table__user .avatar-cont {
position: relative
}
@media (max-width: 992px) {
.winners__header__content h1 {
padding-left: 100px
}
}
@media (max-width: 768px) {
.winners__header__content h1 {
padding-left: 10px;
padding-top: 10px
}
}
.winners__heading {
width: 100%;
text-align: center;
background: #071b1b;
color: #fff;
padding: 10px 0
}
.winners__heading h2 {
font-weight: 700;
font-size: 1.5em
}
@media (max-width: 768px) {
.winners__heading h2 {
font-size: 1.3em
}
}
@media (max-width: 568px) {
.winners__heading h2 {
font-size: 1.1em
}
}
@media (max-width: 400px) {
.winners__heading h2 {
font-size: 1em
}
}
.winners__table {
width: 100%;
max-width: 1024px;
margin: 0 auto;
text-align: center
}
.winners__table .no_winners_state {
display: block;
margin: 5% auto;
padding: 0 5%;
text-align: center;
font-size: 2em;
color: #7f8c8d;
font-weight: 700
}
@media (max-width: 768px) {
.winners__table .no_winners_state {
font-size: 1.8em
}
}
@media (max-width: 568px) {
.winners__table .no_winners_state {
font-size: 1.6em
}
}
@media (max-width: 400px) {
.winners__table .no_winners_state {
font-size: 1.4em
}
}
.winners__table .winners_empty,
.winners__table .winners_full {
display: none
}
.winners__table ul {
text-align: left;
margin-bottom: 15px
}
.winners__table ul li {
display: flex;
display: -moz-flex;
display: -ms-flexbox;
display: -o-flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-align: center;
align-items: center;
border-bottom: 2px solid #ffffff;
padding: 20px 50px;
color: #ffffff;
font-size: 1.5em
}
@media (max-width: 767px) {
.winners__table ul li {
font-size: 1.3em;
padding: 20px 30px
}
}
@media (max-width: 568px) {
.winners__table ul li {
font-size: 1em;
padding: 20px
}
}
@media (max-width: 400px) {
.winners__table ul li {
font-size: .8em;
padding: 10px
}
}
.winners__table__date {
-ms-flex: 0 0 15%;
flex: 0 0 15%
}
.winners__table__user {
display: flex;
display: -moz-flex;
display: -ms-flexbox;
display: -o-flex;
-ms-flex-align: center;
align-items: center;
-ms-flex: 0 0 53%;
flex: 0 0 53%;
padding-left: 10%
}
@media screen and (-ms-high-contrast:active),
(-ms-high-contrast:none) {
.winners__table__user {
padding-left: 7%
}
}
.winners__table__user .avatar-cont img {
display: block;
padding-right: 20px;
padding-top: 20px;
width: 80px;
height: auto
}
@media (max-width: 568px) {
.winners__table__user .avatar-cont img {
width: 60px;
padding-right: 10px;
padding-top: 10px
}
}
@media (max-width: 400px) {
.winners__table__user .avatar-cont img {
width: 35px;
padding-right: 10px;
padding-top: 5px
}
}
.winners__table__user .avatar-cont:after {
content: "";
position: absolute;
top: -3px;
right: 8px;
background-image: url(../images/crown.svg);
background-repeat: no-repeat;
width: 48px;
height: 48px;
-ms-transform: rotate(5deg);
transform: rotate(5deg)
}
@media (max-width: 568px) {
.winners__table__user .avatar-cont:after {
width: 32px;
height: 32px;
top: -5px;
right: 3px
}
}
@media (max-width: 400px) {
.winners__table__user .avatar-cont:after {
width: 18px;
height: 18px;
top: -2px;
right: 3px
}
}
.winners__table__user span {
display: block;
width: 80%
}
.winners__table__prize {
-ms-flex: 0 0 25%;
flex: 0 0 25%
}
.winners__table__prize h3 {
font-weight: 700;
padding-bottom: 5px
}
@media (max-width: 1024px) {
.wloggedin {
padding-top: 120px
}
}
@media (max-width: 400px) {
.winners__table__prize h3 {
padding-bottom: 0
}
}
.store {
padding-top: 60px;
padding-bottom: 60px;
background: #0f3d3d url(../images/generic_bg.svg);
min-height: 100vh
}
@media (max-width: 1024px) {
.store {
padding-top: 120px
}
}
.store__header {
position: relative;
display: inline-block;
width: 100%;
min-height: 170px
}
.store__header:after {
padding-top: 31.25%;
display: block;
content: ''
}
.store__header__content {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
background-image: url(../images/store_image_desktop.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%
}
@media (max-width: 600px) {
.store__header__content {
background-image: url(../images/store_mobile.jpg)
}
}
.store__header__content h1 {
color: #fff;
position: absolute;
font-size: calc(1.7vw + .8em);
font-weight: 700;
padding-left: 150px;
padding-top: 20px
}
@media (max-width: 992px) {
.store__header__content h1 {
padding-left: 100px
}
}
@media (max-width: 768px) {
.store__header__content h1 {
padding-left: 10px;
padding-top: 10px
}
}
.store__content {
margin-top: -3px
}
.store__content__head {
width: 100%;
text-align: center;
background: #071b1b;
color: #fff;
padding: 10px 0
}
@media (max-width: 767px) {
.store__content__head {
padding: 5px 0
}
}
.store__content__head h2 {
font-weight: 700;
font-size: 1.5em
}
@media (max-width: 768px) {
.store__content__head h2 {
font-size: 1.3em
}
}
@media (max-width: 568px) {
.store__content__head h2 {
font-size: 1.1em
}
}
@media (max-width: 400px) {
.store__content__head h2 {
font-size: 1em
}
}
.store__content__list {
width: 100%;
max-width: 1024px;
margin: 0 auto;
text-align: center
}
.store__content__list .empty_msg {
display: none
}
.store__content__list ul {
text-align: left;
margin-bottom: 15px
}
.store__content__list ul li {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-ms-flex-pack: space-evenly;
justify-content: space-evenly;
-ms-flex-align: center;
align-items: center;
border-bottom: 2px solid #ffffff;
padding: 20px 50px;
color: #ffffff;
font-size: 1.4em
}
@media (max-width: 767px) {
.store__content__list ul li {
font-size: 1.3em;
padding: 20px 30px
}
}
@media (max-width: 568px) {
.store__content__list ul li {
font-size: 1.2em;
padding: 20px
}
}
.store__content__list ul li:last-child {
border-bottom: 0
}
.store__content__list ul li div {
-ms-flex-positive: 1.3;
flex-grow: 1.3
}
.store__content__list ul li div span {
color: #ffffff;
font-weight: 300
}
.store__content__list ul li .btn2 {
padding: 3px 17px 5px;
-ms-flex-positive: 0;
flex-grow: 0
}
.store__content__list ul li .fb_btn {
min-width: 84px;
max-width: 92px;
-ms-flex-positive: 0;
flex-grow: 0;
padding: 3px 13px 5px;
font-size: .9em;
-ms-flex-pack: end;
justify-content: flex-end;
z-index: 1;
text-align: right
}
.store__content__list ul li .fb_btn span {
font-size: .9em;
font-weight: 700
}
.store__content__list ul li .fb_btn .icon-facebook {
position: relative;
font-size: .9em;
left: -8px;
top: 2px
}
.store__content__list ul .fb_share img {
-ms-transform: none;
transform: none
}
.store__content__list .fb_error_msg {
padding-bottom: 25px
}
.store__content .store_note {
color: #ffffff;
font-family: inherit;
font-weight: 400;
display: block;
margin: 0 auto;
width: 100%;
max-width: 1024px;
text-align: center;
padding: 0 5px
}
.loader-cont__wrapper .loader_text,
body {
font-family: 'Montserrat', sans-serif;
}
.store__content .store_empty .empty_msg {
display: block;
margin: 5% auto;
padding: 0 5%;
text-align: center;
font-size: 2em;
color: #7f8c8d;
font-weight: 700
}
@media (max-width: 768px) {
.store__content .store_empty .empty_msg {
font-size: 1.8em
}
}
@media (max-width: 568px) {
.store__content .store_empty .empty_msg {
font-size: 1.6em
}
}
@media (max-width: 400px) {
.store__content .store_empty .empty_msg {
font-size: 1.4em
}
}
.store__content .store_empty .store_note,
.store__content .store_empty span,
.store__content .store_empty ul {
display: none
}
.boldspan {
color: #ffffff !important;
font-weight: 700 !important
}
.terms {
padding-top: 60px
}
.terms__header {
width: 100%;
min-height: 375px;
padding: 80px 25px 75px;
background: #0f3d3d url(../images/generic_bg.svg);
text-align: center
}
@media (max-width: 992px) {
.terms__header {
font-size: 13px
}
}
@media (max-width: 578px) {
.terms__header {
font-size: 7px;
padding: 40px 25px 30px;
min-height: 175px
}
}
.terms__header h1 {
font-size: 3em;
font-weight: 700;
margin-bottom: 60px;
color: #fff;
text-transform: uppercase
}
@media (max-width: 578px) {
.terms__header h1 {
margin-bottom: 15px
}
}
.terms__header p {
font-size: 1.9em;
color: #fff;
max-width: 1000px;
margin: 0 auto
}
@media (max-width: 768px) {
.terms__header p {
font-size: 2.5em
}
}
.terms__content {
max-width: 1000px;
margin: 60px auto;
padding: 0 25px
}
.terms__content__item {
margin-bottom: 60px
}
.terms__content__item h2 {
color: #071b1b;
font-size: 1.5em;
font-weight: 700;
margin-bottom: 30px
}
.terms__content__item p {
color: #071b1b;
font-size: 1.1em;
margin-bottom: 25px
}
@media (max-width: 1024px) {
.tloggedin {
padding-top: 120px
}
}
.accordion {
padding: 0
}
.accordion .inner {
overflow: hidden;
display: none
}
.accordion li {
margin: .5em 0
}
.accordion li a.toggle-accordion {
width: 100%;
display: block;
color: #7f8c8d
}
.how-it-works {
padding-top: 60px
}
.how-it-works__header {
width: 100%;
padding: 85px 25px 80px;
background: #0f3d3d url(../images/generic_bg.svg);
text-align: center
}
@media (max-width: 768px) {
.how-it-works__header {
padding: 55px 25px 50px
}
}
@media (max-width: 992px) {
.how-it-works__header {
font-size: 13px
}
}
@media (max-width: 578px) {
.how-it-works__header {
font-size: 7px;
padding: 40px 15px 30px
}
}
.how-it-works__header h1 {
font-size: 3em;
font-weight: 700;
color: #fff
}
.how-it-works__header p {
font-size: 1.9em;
color: #fff;
max-width: 1000px;
margin: 0 auto
}
.how-it-works__item {
width: 100%
}
.how-it-works__item--green {
background: #071b1b
}
.how-it-works__item--blue {
background: #0f3d3d url(../images/generic_bg.svg);
}
.how-it-works__item__content {
max-width: 1024px;
width: 100%;
margin: 0 auto;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
color: #eceeef;
padding: 55px 20px 45px;
-ms-flex-pack: justify;
justify-content: space-between
}
@media (max-width: 768px) {
.how-it-works__header p {
font-size: 1.6em
}
.how-it-works__item__content {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
text-align: center;
-ms-flex-flow: column;
flex-flow: column
}
}
.how-it-works__item__content h2 {
font-size: 1.8em;
font-weight: 700;
margin-bottom: 25px
}
.how-it-works__item__content p {
font-size: 1em;
font-weight: 700;
padding-bottom: 15px
}
.how-it-works__item__content p a {
color: #eceeef
}
.how-it-works__item__text {
-ms-flex: 0 0 45%;
flex: 0 0 45%
}
@media (max-width: 768px) {
.how-it-works__item__text {
-ms-flex: 0 0 100%;
flex: 0 0 100%;
-ms-flex-order: 2;
order: 2
}
}
.how-it-works__item__image {
-ms-flex: 0 0 40%;
flex: 0 0 40%
}
.how-it-works__item__image img {
max-height: 250px
}
.faq__header {
text-align: center;
background: #071b1b;
padding: 80px 25px 70px
}
@media (max-width: 768px) {
.how-it-works__item__image {
-ms-flex: 0 0 100%;
flex: 0 0 100%;
-ms-flex-order: 1;
order: 1;
margin-bottom: 25px
}
.faq__header {
padding: 40px 15px 30px;
font-size: 6px
}
}
.faq__header h3 {
font-size: 3em;
font-weight: 700;
color: #fff
}
.faq__container {
text-align: left;
max-width: 1024px;
margin: 0 auto;
padding: 50px 15px
}
.faq__container li {
margin-bottom: 45px
}
@media (max-width: 768px) {
.faq__container {
font-size: 9px
}
.faq__container li {
margin-bottom: 25px
}
}
.faq__container a.toggle-accordion {
position: relative;
display: block;
color: #7f8c8d;
font-size: 1.8em;
padding-left: 66px
}
.faq__container a.toggle-accordion:before {
position: absolute;
content: url(../images/plus_icon.svg);
left: 0;
width: 35px;
height: 35px
}
@media (max-width: 768px) {
.faq__container a.toggle-accordion {
padding-left: 45px
}
.faq__container a.toggle-accordion:before {
width: 30px;
height: 30px;
top: -5px
}
}
@media (max-width: 385px) {
.faq__container a.toggle-accordion:before {
top: -4px
}
}
.faq__container a.toggle-accordion.show:before {
content: url(../images/minus_icon.svg)
}
.faq__container .inner {
padding-left: 65px;
padding-top: 45px;
font-size: 1.6em;
color: #7f8c8d
}
@media (max-width: 768px) {
.faq__container .inner {
padding-left: 45px;
padding-top: 20px
}
}
.faq__container .inner ul {
list-style-type: disc
}
.round_ended {
position: relative;
background: url(../images/round_ended_desktop.jpg) 50% 50%;
background-size: 100% 100%;
height: 100vh
}
@media (max-width: 1024px) {
.hloggedin {
padding-top: 120px
}
.round_ended {
background-size: 140% 100%
}
}
.round_ended__head {
display: -ms-flexbox;
display: flex;
width: 100%;
height: 50%;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: center;
align-items: center
}
.round_ended__head__top {
width: 100%;
text-align: center;
height: 42%;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center
}
.round_ended__head__top h1 {
text-align: center;
width: 100%;
font-size: 3.3em;
color: #fff;
font-weight: 700
}
@media (max-width: 650px) {
.round_ended__head__top h1 {
font-size: 2.8em
}
}
.round_ended__head__bottom {
width: 100%;
height: 58%;
display: -ms-flexbox;
display: flex;
-ms-flex-align: end;
align-items: flex-end;
-ms-flex-pack: center;
justify-content: center;
padding: 40px 0
}
@media (max-width: 600px) {
.round_ended {
background: url(../images/round_ended_mobile.jpg);
background-size: 100% 100%
}
.round_ended__head__top h1 {
font-size: 2em
}
.round_ended__head__bottom {
-ms-flex-pack: distribute;
justify-content: space-around;
padding: 50px 0 40px
}
}
@media (max-width: 370px) {
.round_ended__head__top h1 {
font-size: 1.7em
}
.round_ended__head__bottom {
padding: 40px 0 30px
}
}
.round_ended__head__bottom__player {
position: relative;
text-align: center;
height: 100%
}
.round_ended__head__bottom__player img {
display: block;
height: 100%;
width: auto;
padding-bottom: 10px;
margin: 0 auto;
border-radius: 100%
}
.round_ended__head__bottom__player span {
color: #fff;
font-weight: 700;
font-size: 1.5em
}
.round_ended__head__bottom__player--p1 {
margin-right: 150px
}
@media (max-width: 650px) {
.round_ended__head__bottom__player--p1 {
margin-right: 100px
}
}
.round_ended__head__bottom__player--p1 .player_score li.correct {
background: url(../images/score_indication_correct.png) 0 0/cover;
}
.round_ended__head__bottom__player--p1 .player_score li.wrong {
background: url(../images/score_indication_wrong.png) 0 0/cover;
}
.round_ended__head__bottom__player--p2 {
margin-left: 150px
}
@media (max-width: 650px) {
.round_ended__head__bottom__player--p2 {
margin-left: 100px
}
}
@media (max-width: 600px) {
.round_ended__head__bottom__player--p1,
.round_ended__head__bottom__player--p2 {
margin-right: 0
}
}
.round_ended__head__bottom__player--p2 .player_score li.correct {
background: url(../images/score_indication_correct.png) 0 0/cover;
}
.round_ended__head__bottom__player--p2 .player_score li.wrong {
background: url(../images/score_indication_wrong.png) 0 0/cover;
}
.round_ended__head__bottom__player .player_score {
position: absolute;
width: 100%;
text-align: cetner;
bottom: -90px
}
@media (max-width: 1366px) and (max-height:730px) and (orientation:landscape) {
.round_ended__head__bottom__player .player_score {
width: 112px;
bottom: -80px
}
}
@media (min-width: 601px) and (max-width:1024px) {
.round_ended__head__bottom__player .player_score {
min-width: 112px
}
}
@media (max-width: 500px) {
.round_ended__head__bottom__player span {
font-size: 1.2em
}
.round_ended__head__bottom__player .player_score {
bottom: -80px;
min-width: 108%;
left: -4%
}
}
@media (max-width: 370px) {
.round_ended__head__bottom__player span {
font-size: 1em
}
.round_ended__head__bottom__player .player_score {
bottom: -60px;
left: -10%;
min-width: 122%
}
}
.round_ended__head__bottom__player .player_score li {
font-size: 24px;
display: inline-block;
width: 1em;
height: 1em;
border-radius: 20px
}
.round_ended__bottom {
padding-top: 110px;
width: 100%;
text-align: center
}
@media (max-width: 1366px) and (max-height:730px) and (orientation:landscape) {
.round_ended__bottom {
padding-top: 90px
}
}
@media (max-width: 500px) {
.round_ended__head__bottom__player .player_score li {
font-size: 15px
}
.round_ended__bottom {
padding-top: 80px
}
}
@media (max-width: 370px) {
.round_ended__head__bottom__player .player_score li {
font-size: 13px
}
.round_ended__bottom {
padding-top: 60px
}
}
@media (max-width: 320px) {
.round_ended__head__bottom__player .player_score li {
font-size: 11px
}
}
.round_ended__bottom h2 {
font-size: 2.5em;
color: #ffffff;
font-weight: 700;
padding-bottom: 30px
}
@media (max-width: 1366px) and (max-height:730px) and (orientation:landscape) {
.round_ended__bottom h2 {
padding-bottom: 3px
}
}
@media (max-width: 500px) {
.round_ended__bottom h2 {
font-size: 2em;
padding-bottom: 10px
}
}
@media (max-width: 370px) {
.round_ended__bottom h2 {
font-size: 1.7em;
padding-bottom: 5px
}
}
.round_ended__bottom .donut-chart {
display: table;
margin: 0 auto;
font-size: 22px
}
@media (max-width: 1366px) and (max-height:730px) and (orientation:landscape) {
.round_ended__bottom .donut-chart {
padding: 0
}
}
@media (max-width: 500px) {
.round_ended__bottom .donut-chart {
font-size: 18px
}
}
@media (max-width: 370px) {
.round_ended__bottom .donut-chart {
font-size: 15px
}
}
.round_ended__bottom .pie-wrapper .label {
font-size: .18em
}
.round_ended__bottom .pie-wrapper .smaller {
padding-top: 1.8em
}
.round_ended__bottom .donut-chart--speed .games-played {
top: 0;
position: relative;
vertical-align: middle;
display: table-cell;
left: 0;
margin: 0;
text-align: right;
width: 80px
}
@media (max-width: 500px) {
.round_ended__bottom .donut-chart--speed .games-played {
width: 80px;
margin-right: -8.3em
}
}
@media (max-width: 370px) {
.round_ended__bottom .donut-chart--speed .games-played {
margin-right: -8.9em
}
}
.round_ended__bottom .donut-chart--speed .games-left {
top: 0;
position: relative;
vertical-align: middle;
display: table-cell;
left: 0;
margin: 0;
width: 80px
}
.round_ended__center-score {
font-size: 20px;
position: absolute;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
width: 9em;
height: 9em;
line-height: 9em;
text-align: center;
background: #ffffff;
border-radius: 50%;
border: 3px solid #0c2b2d
}
@media (max-width: 650px) {
.round_ended__center-score {
font-size: 15px
}
}
@media (max-width: 500px) {
.round_ended__center-score {
font-size: 13px
}
}
@media (max-width: 370px) {
.round_ended__center-score {
font-size: 10px
}
}
.round_ended__center-score p {
font-size: 2.7em;
color: #0b2c2c;
font-weight: 700
}
.round_ended__center-score p span {
color: #dd2b2b;
padding: 0 5px;
font-weight: 700
}
.round_ended__center-score p span.p1 {
color: #8dc672
}
@media (max-width: 767px) {
.right_player {
min-width: 112px !important
}
}
@media (max-width: 400px) {
.right_player {
min-width: 92px !important
}
}
@media (max-width: 320px) {
.right_player {
min-width: 72px !important
}
}
@media (max-width: 767px) {
.left_player {
min-width: 112px !important
}
}
@media (max-width: 400px) {
.left_player {
min-width: 92px !important
}
}
@media (max-width: 320px) {
.left_player {
min-width: 72px !important
}
}
.loader-cont {
background: #071b1b;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99999
}
.loader-cont__wrapper {
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%)
}
.loader-cont__wrapper .loader_text {
display: block;
position: absolute;
top: 150px;
left: -115px;
min-width: 300px;
color: #fff;
font-weight: 700;
text-align: center;
font-size: 28px
}
.loader,
.row-full {
position: relative
}
@media (max-width: 1025px) {
.loader-cont__wrapper .loader_text {
font-size: calc(1.7vw + .8em)
}
}
.loader {
color: #fff;
font-size: 90px;
text-indent: -9999em;
overflow: hidden;
width: 1em;
height: 1em;
border-radius: 50%;
-ms-transform: translateZ(0);
transform: translateZ(0);
animation: load6 1.7s infinite ease, round 1.7s infinite ease
}
@media (max-width: 767px) {
.loader {
font-size: 60px
}
}
@keyframes load6 {
0%,
100%,
5%,
95% {
box-shadow: 0 -.83em 0 -.4em, 0 -.83em 0 -.42em, 0 -.83em 0 -.44em, 0 -.83em 0 -.46em, 0 -.83em 0 -.477em
}
10%,
59% {
box-shadow: 0 -.83em 0 -.4em, -.087em -.825em 0 -.42em, -.173em -.812em 0 -.44em, -.256em -.789em 0 -.46em, -.297em -.775em 0 -.477em
}
20% {
box-shadow: 0 -.83em 0 -.4em, -.338em -.758em 0 -.42em, -.555em -.617em 0 -.44em, -.671em -.488em 0 -.46em, -.749em -.34em 0 -.477em
}
38% {
box-shadow: 0 -.83em 0 -.4em, -.377em -.74em 0 -.42em, -.645em -.522em 0 -.44em, -.775em -.297em 0 -.46em, -.82em -.09em 0 -.477em
}
}
@keyframes round {
0% {
transform: rotate(0)
}
100% {
transform: rotate(360deg)
}
}
body {
font-size: 16px;
-webkit-font-smoothing: antialiased
}
body,
html {
height: auto
}
a {
color: #0055FF;
}
.no-padding-right {
padding-right: 0
}
.center {
text-align: center !important
}
.score-lbl {
background: #0f3d3d;
color: #fff;
line-height: 1;
padding: 7px 0;
min-width: 55px;
text-align: center;
border-radius: 8px;
font-size: 1.04em;
margin-top: -1px;
font-weight: 700
}
.row-full {
width: 100vw;
margin-left: -50vw;
left: 50%
}
.goto-top {
border: none;
background: 0 0;
width: 65px;
position: fixed;
bottom: 45px;
right: 20px;
opacity: .8;
transition: opacity .2s linear;
z-index: 3
}
.credits__title {
background-color: #071b1b;
}
.credits__title h2 {
margin-bottom: 30px;
text-align: center;
padding: 10px;
color: #ffffff;
font-size: 1.5em;
font-weight: 700;
text-transform: uppercase;
}
.goto-top:hover {
opacity: 1
}
/* SPINNINNG WHEEL CUSTOMIZATION */
@font-face {
font-family: 'wheelspin';
src: url('../fonts/wheelspin.eot');
src: url('../fonts/wheelspin.eot?#iefix') format('embedded-opentype'),
url('../fonts/wheelspin.woff') format('woff'),
url('../fonts/wheelspin.ttf') format('truetype'),
url('../fonts/wheelspin.svg#wheelspin') format('svg');
font-weight: normal;
font-style: normal;
}
[class*='fa icon-']:before {
display: inline-block;
font-family: 'wheelspin';
font-style: normal;
font-weight: normal;
line-height: 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
/*WRAPPER*/
#wrapper {
margin: 40px auto;
width: 250px;
position: relative;
}
#txt {
color: #eaeaea;
}
/*ANIMATION END */
/* SPINNINNG WHEEL CUSTOMIZATION END */
/* MSISDN ADDITION - PROFILE PAGE */
span.name.msisdn_num {
bottom: -2em;
padding: 2px 3%;
letter-spacing: 2px;
min-width: unset;
font-size: 1.5em;
border-radius: .4em;
display: block;
width: 50%
}
/* MSISDN ADDITION - PROFILE PAGE END */
.signup-form .one_time {
margin-top: 10px;
max-width: 270px;
width: 100%;
}
.form-group__feedback.one_time_reg {
font-size: 16px;
line-height: 14px;
font-weight: 700;
padding-top: 0;
margin-top: 25px;
text-align: center;
max-width: 340px;
margin: 0 auto;
line-height: normal;
}
/* new css */
/* menu starts here */
header.header-main_v2 .logo-header img {
width: 100%;
max-height: 35px;
max-width: 140px;
}
@media (max-width: 1025px) {
header.header-main_v2 .logo-header img {
max-width: 140px;
}
}
@media (max-width: 767px) {
header.header-main_v2 .logo-header img {
max-width: 120px;
}
}
header.header-main_v2 {
position: fixed;
top: 0;
width: 100%;
left: 0;
background-color: #1abc9c;
color: #fff;
line-height: 60px;
z-index: 9000;
padding: 0 15px;
}
.divider {
border-left: 2px solid #c1c1c1;
height: 15px;
}
.menu_v2_contains {
width: 100%;
display: flex;
margin-right: 5px;
}
.menu_v2_contains .back_btn {
display: flex;
justify-content: center;
align-items: center;
position: relative;
margin-right: 5px;
}
.menu_v2_contains .back_btn a.back_btn_action {
display: flex;
justify-content: center;
align-items: center;
width: auto;
position: relative;
}
.menu_v2_contains .back_btn a.back_btn_action img {
width: 11px;
}
.menu_v2_contains .logo {
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.menu_v2_contains .logo a.logo-header {
display: flex;
justify-content: center;
align-items: center;
width: auto;
position: relative;
}
.menu_v2_contains .items {
display: flex;
max-width: 80px;
flex: 1;
margin-left: auto;
justify-content: right;
}
.menu_v2_contains .items a {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
position: relative;
}
.menu_v2_contains .items a img {
max-width: 35px;
}
.menu_v2_contains .items .chat_menu_item {
width: 100%;
float: left;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.menu_v2_contains .items .chat_menu_item:hover {
background-color: #1bb093;
}
.menu_v2_contains .items .notifications_menu_item {
width: 100%;
float: right;
}
.menu_v2_contains .items .notifications_menu_item:hover {
background-color: #1bb093;
}
.menu_v2_contains .items .notifications_menu_item .icon-bubble {
position: relative;
}
.menu_v2_contains .items .notifications_menu_item .icon-bubble img {
max-width: 30px;
height: 32px;
vertical-align: middle;
margin-top: -5px;
}
.menu_v2_contains .items .notifications_menu_item a.icon-bubble span {
position: absolute;
font-size: 1em;
border: 1px solid #fff;
height: 25px;
width: 25px;
top: 7px;
right: -6px;
line-height: 23px;
border-radius: 25px;
text-align: center;
background: #1abc9c;
color: #ffffff;
}
.menu_v2_contains .items .language_menu_item {
width: 100%;
float: right;
}
.menu_v2_contains .items .language_menu_item:hover {}
.menu_v2_contains .items .language_menu_item .icon-globe {
position: relative;
}
.main-nav__lang li a .icon-globe {
display: table;
}
.main-nav__lang li a .icon-globe img {
vertical-align: middle;
border-radius: 50%;
-webkit-transition: -webkit-transform .8s ease-in-out;
transition: transform .8s ease-in-out;
}
.main-nav__lang li a .icon-globe img:hover {
transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
/* IE 9 */
-webkit-transform: rotateY(-180deg);
/* Safari and Chrome */
}
.menu_v2_contains .items .language_menu_item a.icon-globe span {
position: absolute;
font-size: 1em;
border: 1px solid #fff;
height: 25px;
width: 25px;
top: 7px;
right: -6px;
line-height: 23px;
border-radius: 25px;
text-align: center;
background: #1abc9c;
color: #ffffff;
}
.mobile-menu {
position: fixed;
display: flex;
align-items: center;
justify-content: flex-end;
padding: 0px 16px;
top: 0;
background-color: #ffffff;
left: 0;
right: 0;
height: 60px;
z-index: 9999999;
-webkit-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.27);
-moz-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.27);
box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.27);
}
.mobile-menu__btn {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 35px;
height: 30px;
cursor: pointer;
transition: .4s;
}
.mobile-menu__icon {
/* display: block;
position: relative; */
/* background: #292966; */
/* width: 90%;
height: 2px;
transition: .4s; */
width: 32px;
height: 25px;
/* position: absolute; */
/* right: 25px; */
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
.mobile-menu__icon span {
display: block;
position: absolute;
height: 3px;
width: 100%;
background: #292966;
border-radius: 100px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
.mobile-menu__icon span:nth-child(1) {
top: 0px;
}
.mobile-menu__icon span:nth-child(2),
.nav-icon span:nth-child(3) {
top: 11px;
}
.mobile-menu__icon span:nth-child(4) {
top: 22px;
}
.mobile-menu__icon.open span:nth-child(1) {
top: 18px;
width: 0%;
left: 50%;
}
.mobile-menu__icon.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top: 11px;
}
.mobile-menu__icon.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 10px;
}
.mobile-menu__icon.open span:nth-child(4) {
top: 18px;
width: 0%;
left: 50%;
}
.mobile-menu__container {
background: #F6CF46;
background-size: cover;
border-top: 2px solid #292966;
position: fixed;
text-align: center;
/* display: flex; */
/* align-items: center; */
/* justify-content: center; */
top: 60px;
left: 0;
right: 0;
z-index: 999;
height: 0;
opacity: 1;
transition: .5s;
transition-delay: .2s;
overflow-x: hidden;
overflow-y: auto;
}
.mobile-menu__list {
transition: .5s;
transition-delay: .5s;
list-style: none;
padding-left: 0;
/* height: 100%; */
overflow: auto;
width: 100%;
/* display: flex;
flex-direction: column;
justify-content: center; */
margin-top: 50px;
margin-bottom: 10vh;
}
.mobile-menu__item {
font-size: 1.2em;
}
.mobile-menu__item a {
display: flex;
align-items: center;
justify-content: center;
padding: 0 10px;
font-weight: 700;
background-color: rgba(255, 255, 255, 0.6);
border-radius: 15px;
box-shadow: 0px 3px 8px -1px rgba(0,0,0,0.3);
-webkit-box-shadow: 0px 3px 8px -1px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 3px 8px -1px rgba(0,0,0,0.3);
margin: 30px auto 10px auto;
width: 100%;
max-width: 400px;
transition: 0.2s;
}
.mobile-menu__item a:hover {
background-color: rgba(255, 255, 255, 1);
}
.mobile-menu__item a.logout {
display: flex;
align-items: center;
justify-content: center;
padding: 0 0px;
font-weight: 700;
background-color: transparent;
border-radius: 0px;
box-shadow: none;
margin-top: 30px;
transition: 0.2s;
width: auto;
margin-top: 50px;
color: #ffffff;
/* margin-bottom: 8vh; */
}
.mobile-menu__item a.logout:hover {
color: #2D8DAB;
}
/* .mobile-menu__item .mobile-menu__item a.logout {
width: fit-content;
margin: auto;
} */
.mobile-menu__item.last a img {
max-width: 30px;
width: 100%;
margin-right: 12px;
}
.mobile-menu__link {
text-decoration: none;
color: #2D8DAB;
}
.mobile-menu__checkbox {
display: none;
}
.mobile-menu__checkbox:checked~.mobile-menu__nav {
opacity: 1;
transition-delay: 0s;
}
/* .mobile-menu__checkbox:checked ~ .mobile-menu__container {
height: 100%;
transition-delay: 0s;
} */
.mobile-menu__container.open {
height: 90%;
transition-delay: 0s;
}
/* .mobile-menu__checkbox:checked ~ .mobile-menu__btn .mobile-menu__icon {
background: transparent;
}
.mobile-menu__checkbox:checked ~ .mobile-menu__btn .mobile-menu__icon::before, .mobile-menu__checkbox:checked ~ .mobile-menu__btn .mobile-menu__icon::after {
top: 0;
}
.mobile-menu__checkbox:checked ~ .mobile-menu__btn .mobile-menu__icon::after {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.mobile-menu__checkbox:checked ~ .mobile-menu__btn .mobile-menu__icon::before {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
} */
/* .blurred_bg {
-webkit-transition: all 0.6s ease;
transition: all 0.6s ease;
-webkit-filter: blur(10px);
filter: blur(10px);
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='10');
} */
.home_v2 {
margin-top: 60px;
background: #eef2f3;
}
@media (max-width: 1025px) {
.home_v2 {
margin-top: calc(30px * 2);
}
}
@media (max-width: 767px) {
.home_v2 .carousel__nav {
display: none;
}
}
.whiteandround {
background: #ffffff;
padding: 18px;
border-radius: 20px;
backdrop-filter: blur(30px);
-webkit-backdrop-filter: blur(30px);
margin-top: 3%;
box-shadow: 0px 5px 15px #3D3D994D;
-moz-box-shadow: 0px 5px 15px #3D3D994D;
-webkit-box-shadow: 0px 5px 15px #3D3D994D;
margin-bottom: 40px;
padding-bottom: 20px;
}
.logo_form {
/* border-bottom: 2px solid #39BF93; */
width: 255px;
margin: 0 auto;
}
.logo_form img {
max-width: 200px;
}
.form_title h1 {
margin-top: 32px;
margin-bottom: 20px;
}
.form_title h1 {
font-weight: 700;
font-size: 1.2em;
color: #292966;
}
.fb_login .fb_btn img {
max-width: 16px;
}
a .facebook_connect {
display: table;
padding: 3%;
border: 1px solid #2699FB;
border-radius: 24px;
margin: 32px auto 0 auto;
width: 100%;
max-width: 300px;
height: 45px;
transition: 0.3s;
}
a:hover .facebook_connect {
background: #FFFFFFCC 0% 0% no-repeat padding-box;
box-shadow: 0px 6px 12px #2699FB4D;
}
a:active .facebook_connect {
background-color: #2699FB;
box-shadow: 0px 3px 6px #2699FB4D;
}
.facebook_inside {
vertical-align: middle;
display: table-cell;
}
.facebook_connect_icon {
float: left;
width: 12%;
}
.facebook_connect_icon img {
display: block;
width: 18px;
margin: 0 auto;
}
a:active .facebook_connect_icon img {
-webkit-filter: brightness(0) invert(1);
filter: brightness(0) invert(1);
}
.facebook_connect_text {
width: 100%;
}
.facebook_connect_text p {
color: #2699FB;
font-size: 1em;
font-weight: 700;
}
a:hover .facebook_connect_text p {
color: #2699FB;
}
a:active .facebook_connect_text p {
color: #ffffff;
}
.username.form-group__textfield {
background: #fff url(../images/icon-mini-profile.svg) no-repeat 25px;
background-position: 9px;
}
.mobile.form-group__textfield {
background: #fff url(../images/icon-mini-mobile.svg) no-repeat 25px;
background-position: 9px;
}
.password.form-group__textfield {
background: #fff url(../images/icon-mini-passward.svg) no-repeat 25px;
background-position: 9px;
}
.login-form__forgot-password img.info_icon {
margin: 0 auto -10px;
max-width: 30px;
}
.footer-nav__list li .divider {
border-left: 1px solid #666666;
height: 20px;
padding: 0;
}
.circle_background_mob {
display: none;
}
.modal__body p a {
color: #0055FF;
font-weight: 700;
}
.modal.alert_modal {
position: fixed;
/* max-width: auto; */
/* width: 100%; */
padding: 0 15px;
/* bottom: -2%; */
z-index: 9999;
/* left: 0; */
/* right: 0; */
margin-left: auto;
margin-right: auto;
/* top: unset; */
/* transform: none; */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.modal.alert_modal .modal__body {
padding-bottom: 60px;
}
.form-help p {
color: #666666;
font-size: 0.9em;
font-weight: 500;
}
.form-help h1 {
color: #666666;
font-weight: 700;
}
.StandardRegSteps_Container {
max-width: 225px;
margin: 15px auto;
width: 100%;
height: 26px;
border-radius: 5px;
margin-bottom: 10px;
background-color: #F3F3F3;
}
.StandardRegSteps_step {
width: 31%;
float: left;
padding: 3px;
background-color: #39BF93;
margin: 2px;
border-radius: 5px;
color: #fff;
font-size: 14px;
position: relative;
animation: pulse 2s infinite;
}
.StandardRegSteps_step:after {
content: " ";
border-right: 1px solid #39BF93;
position: absolute;
right: -3px;
width: 5px;
height: 80%;
top: 2px
}
.StandardRegSteps_step:nth-child(2):after {
right: -2px;
}
.StandardRegSteps_step:last-child:after {
border: none
}
.StandardRegSteps_step.inactive {
background-color: transparent;
color: #39BF93;
opacity: 0.5;
animation: pulse 0s infinite;
}
.StandardRegSteps_step.step_done {
opacity: .5;
animation: pulse 0s infinite;
}
.extra_padng {
margin: 20px 0;
}
.form-help.extra_padng img {
max-width: 42px;
margin: 0 0 10px;
height: 100px;
}
img.info_icon {
margin: 0 auto;
max-width: 30px;
}
form p {
color: #666666;
font-size: 0.9em;
font-weight: 500;
}
.touch_bottom {
display: block;
}
.twoStepRegSteps_Container {
margin-top: 15px;
height: 26px;
border-radius: 5px;
margin-bottom: 10px;
background-color: #F3F3F3;
max-width: 225px;
margin: 15px auto;
width: 100%;
}
.twoStepRegSteps_step {
width: 48%;
float: left;
padding: 3px;
background-color: #39BF93;
margin: 2px;
border-radius: 5px;
color: #fff;
font-size: 14px;
animation: pulse 2s infinite;
}
.twoStepRegSteps_step:first-child:after {
content: " ";
border-right: 1px solid #39BF93;
position: absolute;
left: calc(50% - 5px);
width: 5px;
height: 80%;
top: 2px
}
.twoStepRegSteps_step.inactive {
background-color: transparent;
color: #00e0c2;
animation: pulse 0s infinite;
}
.twoStepRegSteps_step.step_done {
opacity: .5;
animation: pulse 0s infinite;
}
.form-footer-text {
font-size: 9px;
margin-top: 15px;
}
.operators_selection_wrap,
.signup-form form {
margin-top: 20px;
}
img.operator_register_promo_logo {
margin: 20px auto;
max-width: 180px;
width: 100%;
}
.no_marg_btm {
margin-bottom: 0;
}
.modal__body h1 {
padding-bottom: 10px;
font-weight: 700;
font-size: 1.5em;
color: #292966;
max-width: 290px;
text-align: center;
margin: 0 auto;
}
img.modal_icon_main {
width: 100%;
margin: 0 auto;
max-width: 255px;
}
.modal__content a.ti_btn--main {
border: 1px solid #39BF93;
background-color: #39BF93;
font-weight: 700;
border-radius: 16px;
min-width: 230px;
padding: 14px 22px;
color: #fff;
font-size: 1.2em;
display: inline-block;
transition: 0.3s;
}
.modal__content a.ti_btn--main:hover {
background: #36B389 0 0 no-repeat padding-box;
box-shadow: 0 6px 12px #39BF934D;
border: 1px solid #36B389;
border-radius: 16px;
opacity: 1
}
.modal__content a.ti_btn--main:active {
background: #32A67F 0 0 no-repeat padding-box;
border: 1px solid #32A67F;
border-radius: 16px;
opacity: 1
}
.modal__content a.ti_btn--second {
background: none;
transition: 0.3s;
border: 1px solid #39BF93;
font-weight: 700;
border-radius: 16px;
min-width: 230px;
padding: 14px 22px;
color: #39BF93;
font-size: 1.2em;
display: inline-block;
transition: 0.3s;
}
.modal__content a.ti_btn--second:hover {
background: #DFEDE8 0% 0% no-repeat padding-box;
border: 1px solid #39BF93;
border-radius: 16px;
color: #39BF93;
opacity: 1
}
.modal__content a.ti_btn--second:active {
background: #CDE8DF 0% 0% no-repeat padding-box;
border: 1px solid #39BF93;
border-radius: 16px;
color: #39BF93;
opacity: 1
}
.modal__content .ti_btn--main {
border: 1px solid #39BF93;
background-color: #39BF93;
font-weight: 700;
border-radius: 16px;
min-width: 230px;
padding: 14px 22px;
color: #fff;
font-size: 1.2em;
display: inline-block;
transition: 0.3s;
}
.modal__content .ti_btn--main:hover {
background: #36B389 0 0 no-repeat padding-box;
box-shadow: 0 6px 12px #39BF934D;
border: 1px solid #36B389;
border-radius: 16px;
opacity: 1
}
.modal__content .ti_btn--main:active {
background: #32A67F 0 0 no-repeat padding-box;
border: 1px solid #32A67F;
border-radius: 16px;
opacity: 1
}
.modal_two_btns {
margin: 8px 0;
}
span.make_it_bold {
font-weight: 700;
font-size: 1.1em;
}
.modal_middle_title h1 {
margin-top: 24px;
padding-bottom: 0px;
font-weight: 700;
font-size: 1.4em;
color: #292966;
}
.modal__body .logo_form {
/* border-bottom: 2px solid #39BF93; */
width: 255px;
margin: 0 auto;
margin-bottom: 32px;
}
.modal__body .logo_form img {
max-width: 226px;
width: 100%;
}
.modal__body p.upper_section_modal {
font-weight: 500;
font-size: 1em;
line-height: 1.2em;
display: block;
margin: 24px auto;
}
/* get_started carousel starts */
.prizes__carousel .prizes-carousel {
max-width: 185px;
position: relative;
margin: 0 auto
}
.prizes__carousel .prizes-carousel .item {
color: #4a4d4e
}
.prizes__carousel .prizes-carousel .item span {
padding-top: 10px;
display: block;
font-size: 1.5em;
font-weight: 700
}
@media (max-width:576px) {
.prizes__carousel .prizes-carousel {
max-width: 240px
}
.prizes__carousel .prizes-carousel .item span {
font-size: .8em;
padding-top: 5px
}
}
.prizes__carousel .prizes-carousel .item img {
width: 100%
}
.prizes__carousel .carousel__nav {
color: #95a5a6;
margin-top: 10px
}
.prizes__carousel .carousel__nav i:before {
font-weight: 700;
font-size: .7em
}
.prizes__carousel__dots {
font-size: 16px;
text-align: center;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: distribute;
justify-content: space-around;
margin: 20px auto;
width: 300px
}
@media (max-width:1024px) {
.prizes__carousel__dots {
margin: 30px auto 20px;
font-size: 15px
}
}
@media (max-width:992px) {
.prizes__carousel__dots {
font-size: 14px
}
}
@media (max-width:768px) {
.prizes__carousel__dots {
font-size: 12px
}
}
@media (max-width:576px) {
.prizes__carousel__dots {
margin: 20px auto;
font-size: 10px;
max-width: 120px
}
}
@media (max-width:400px) {
.prizes__carousel__dots {
font-size: 9px
}
}
.prizes__carousel__dots .owl-dot {
cursor: pointer;
text-align: center;
z-index: 1
}
.prizes__carousel__dots .owl-dot span {
display: inline-block;
background: #bdc3c7;
height: 2em;
width: 2em;
border-radius: 2em
}
.prizes__carousel__dots .owl-dot.active span {
background: #5d5d5d
}
.prizes__carousel__dots .owl-dot .desc {
padding-top: 8px;
font-size: 1.5em;
font-weight: 700;
color: #95a5a6
}
.prizes__carousel__dots .owl-dot.active .desc {
color: #3eb080
}
.get-started-main_carousel {
margin: 20px auto 40px;
overflow-x: hidden;
max-width: 555px;
padding-top: 10px
}
.ui_index .generic-carousel .owl-item {
padding: 10px;
}
.ui_index .generic-carousel .owl-item.active {
opacity: 1
}
.ui_index .generic-carousel .owl-stage-outer {
overflow: unset
}
.prizes__carousel .prizes-carousel .item {
color: #3c5cc4;
margin: 10px;
background: #ffffff;
border-radius: 10px;
padding: 10px 10px;
font-size: 20px;
text-align: center;
height: 200px;
display: table-cell;
vertical-align: middle;
}
@media (min-width:430px) {
.ui_prizes .carousel__nav {
padding: 0 0;
left: calc(50% - 210px);
max-width: 420px
}
}
.prizes_carousel_row {
margin: -35px auto 0;
max-width: 100%
}
.ui_prizes .prizes__carousel .prizes-carousel {
max-width: unset;
width: 90%;
max-width: 315px;
}
.ui_prizes .prizes__carousel .prizes-carousel .item {
color: #3c5cc4;
margin: 10px;
background: transparent linear-gradient(180deg, #35ebd2 0, #f2f2f2 100%) 0 0 no-repeat padding-box;
box-shadow: 0 6px 12px #00404299;
border-radius: 10px;
padding: 20px 10px;
font-size: 20px;
text-align: center
}
/* get_started carousel starts end */
.get-started-main {
margin: 60px auto 0px;
overflow-x: hidden;
padding-top: 10px;
/* z-index: 999999; */
/* position: relative; */
}
.main_section_get_started .logo {
/* border-bottom: 2px solid #39BF93; */
width: 255px;
margin: 0 auto;
}
.main_section_get_started .logo img {
max-width: 254px;
width: 100%;
display: block;
margin: 0 auto;
margin-bottom: 16px;
}
.main_section_get_started .title {
margin-top: 16px;
}
.main_section_get_started .title h1 {
font-weight: 400;
font-size: 1.2em;
color: #000000;
line-height: unset;
display: block;
margin-left: 0;
text-align: center;
min-height: auto;
padding-top: 0;
}
.main_section_get_started .title h1 span {
font-weight: 700;
}
.carousel_prize_info h1 {
font-weight: 700;
font-size: 0.8em;
color: #1298B3;
}
.carousel_prize_info p {
font-weight: 500;
font-size: 0.7em;
color: #666666;
}
a.ti_btn--main {
background: rgb(239,136,55);
background: linear-gradient(0deg, rgba(239,136,55,1) 0%, rgba(248,172,23,1) 38%, rgba(246,162,32,1) 74%, rgba(239,136,55,1) 100%);
font-weight: 700;
border-radius: 16px;
min-width: 230px;
padding: 14px 22px;
color: #fff;
font-size: 1.2em;
display: inline-block;
transition: 0.3s;
text-align: center;
box-shadow: 0px 5px 3px 0px rgba(202,202,202,1);
-webkit-box-shadow: 0px 5px 3px 0px rgba(202,202,202,1);
-moz-box-shadow: 0px 5px 3px 0px rgba(202,202,202,1);
transition: 0.2s;
}
a.ti_btn--main:hover,
a.ti_btn--main:active,
a.ti_btn--main:focus {
-webkit-transform: translateY(2px);
-moz-transform: translateY(2px);
-ms-transform: translateY(2px);
-o-transform: translateY(2px);
transform: translateY(2px);
box-shadow: 0px 2px 3px 0px rgba(202,202,202,1);
-webkit-box-shadow: 0px 2px 3px 0px rgba(202,202,202,1);
-moz-box-shadow: 0px 2px 3px 0px rgba(202,202,202,1);
}
.modal__content a.ti_btn--main:active {
background: #32A67F 0 0 no-repeat padding-box;
border: 1px solid #32A67F;
border-radius: 16px;
opacity: 1
}
a.ti_btn--second {
background: #FFFFFF 0% 0% no-repeat padding-box;
transition: 0.3s;
border: 1px solid #F18F33;
font-weight: 700;
border-radius: 16px;
min-width: 230px;
padding: 14px 22px;
color: #000000;
font-size: 1.2em;
display: inline-block;
transition: 0.3s;
text-align: center;
box-shadow: 0px 5px 3px 0px rgba(202,202,202,1);
-webkit-box-shadow: 0px 5px 3px 0px rgba(202,202,202,1);
-moz-box-shadow: 0px 5px 3px 0px rgba(202,202,202,1);
transition: 0.2s;
}
a.ti_btn--second:hover,
a.ti_btn--second:active,
a.ti_btn--second:focus {
-webkit-transform: translateY(2px);
-moz-transform: translateY(2px);
-ms-transform: translateY(2px);
-o-transform: translateY(2px);
transform: translateY(2px);
box-shadow: 0px 2px 3px 0px rgba(202,202,202,1);
-webkit-box-shadow: 0px 2px 3px 0px rgba(202,202,202,1);
-moz-box-shadow: 0px 2px 3px 0px rgba(202,202,202,1);
}
.main_buttons_get_started .two_btns {
display: table;
margin: 16px auto;
}
.get_started_info_section h1 {
font-weight: 400;
font-size: 1.2em;
color: #2D8DAB;
line-height: unset;
display: block;
margin-left: 0;
text-align: center;
min-height: auto;
padding: 8px 0;
}
.get_started_info_section p {
font-weight: 400;
font-size: 1em;
color: #666666;
line-height: unset;
display: block;
margin-left: 0;
text-align: center;
min-height: auto;
padding-top: 0;
}
.get_started_info_section {
max-width: 435px;
text-align: center;
display: block;
margin: 0 auto;
}
.get_started_info_section.for_free_play {
max-width: 435px;
text-align: center;
display: block;
margin: 0 auto;
margin-top: 50px;
}
span.make_bold {
font-weight: 700;
}
.half_background {
position: absolute;
height: 30%;
background: #3D3D99;
background-position: left center, center center;
background-repeat: repeat;
width: 100%;
top: 0;
display: block;
}
.half_background_rest {
position: absolute;
height: 70%;
background: #f2f2f2;
background-position: left center, center center;
background-repeat: repeat;
width: 100%;
bottom: 0;
display: block;
}
.circle_background {
background: #f2f2f2;
background-position: left center, center center;
background-repeat: repeat;
width: 100%;
height: 100%;
bottom: 0;
display: block;
background-size: 20%;
padding-bottom: 1px;
padding-top: 1px;
}
.fixed_page {
margin-left: auto;
margin-right: auto;
position: relative;
padding-bottom: 20px;
}
.filter {
text-align: center;
margin: 10px auto;
position: relative;
display: flex;
justify-content: center;
}
.filter a {
text-align: center;
/* padding: .7em 1em; */
background: #DAECF2 0% 0% no-repeat padding-box;
color: #666666;
text-decoration: none;
border-radius: 12px;
font-weight: 500;
font-size: 0.9em;
margin-left: 3px;
margin-right: 3px;
width: 100%;
max-width: 90px;
min-height: 32px;
display: flex;
align-self: center;
justify-content: center;
align-items: center;
}
.filter a.current {
background: #F8AC17 0% 0% no-repeat padding-box;
color: #ffffff;
}
.filter_list {
padding: 15px 0;
}
.get_started_list_section {
background: #FFFFFF 0% 0% no-repeat padding-box;
border-radius: 24px;
max-width: 450px;
margin: 45px auto 20px auto;
}
.get_started_list_section .main_title {
padding: 16px 0;
}
.get_started_list_section .main_title h1 {
font-weight: 700;
font-size: 1.6em;
color: #2D8DAB;
text-align: center;
}
.winners_list_outer {
display: table;
width: 100%;
max-width: 420px;
margin: 0 auto;
padding: 10px;
border-bottom: 1px solid #CCC;
position: relative;
}
.winners_list_outer .avatar {
display: table-cell;
vertical-align: middle;
}
.winners_list_outer .avatar img {
max-width: 60px;
width: 100%;
display: block;
margin: 0 auto;
}
.winners_list_outer .winners_list_info {
width: 80%;
display: table-cell;
vertical-align: middle;
}
.winners_list_outer .winners_list_info .name {}
.winners_list_outer .winners_list_info .name h1 {
font-weight: 700;
font-size: 1.2em;
color: #292966;
text-align: left;
}
.winners_list_outer .winners_list_info .prize_outer {
margin-top: 8px;
}
.winners_list_outer .winners_list_info .prize_outer .prize_category h1 {
font-weight: 700;
font-size: 0.9em;
color: #2D8DAB;
text-align: left;
}
.winners_list_outer .winners_list_info .prize_inner {
display: flex;
width: 100%;
flex-direction: row;
justify-content: space-between;
}
.winners_list_outer .winners_list_info .prize_inner .prize_info {
/* display: table-cell; */
vertical-align: middle;
max-width: 160px;
width: 100%;
}
.winners_list_outer .winners_list_info .prize_inner .prize_info p {
font-weight: 500;
font-size: 0.9em;
color: #666666;
}
.winners_list_outer .winners_list_info .prize_inner .prize_date {
float: right;
/* width: 100%; */
/* max-width: 55px; */
text-align: right;
/* border-left: 3px solid #1298B3; */
}
.winners_list_outer .winners_list_info .prize_inner .prize_date p {
font-weight: 500;
font-size: 0.9em;
color: #666666;
border-left: 3px solid #1298B3;
padding-left: 5px;
}
.load_more_btn {
display: table;
margin: 0 auto;
}
.circle_background .main_buttons_get_started {
position: relative;
height: auto;
top: -20px;
}
/* ====================================== */
/* ============ Home Page =============== */
/* ====================================== */
.home_stats_box {
width: 490px;
min-width: 490px;
height: auto;
border-radius: 24px;
background-color: #ffffff;
margin: 40px auto 0px auto;
position: relative;
padding: 15px;
}
.home_edit_icon {
margin: auto;
width: 25px;
height: 25px;
}
.home_edit_icon_bg {
background-color: #FFFFFF;
width: 45px;
height: 45px;
display: flex;
border-radius: 25px;
border: 3px solid #F7CF47;
position: absolute;
right: -12px;
top: -12px;
cursor: pointer;
}
.avatar_home {
width: 60px;
height: 60px;
}
.home_row {
display: flex;
flex-direction: row;
}
.home_column {
display: flex;
flex-direction: column;
}
.home_user_info {
margin-left: 15px;
}
.home_user_info h4 {
color: #1298B3;
font-size: 18px;
font-weight: bold;
}
.home_user_info p {
color: #666666;
font-size: 12px;
}
.home_user_info p:nth-child(2) {
margin-top: 8px;
}
.home_user_info span {
font-weight: bold;
}
.home_stats_row {
display: flex;
flex-direction: row;
justify-content: center;
justify-content: space-around;
margin: 5px auto 10px auto;
padding-bottom: 12px;
border-bottom: 1px solid #e3e3e3;
text-align: center;
}
.home_stats {
display: flex;
flex-direction: column;
}
.vertical_line_home {
border-left: 1px solid #666666;
height: auto;
}
.home_stats p {
color: #292966;
font-weight: bold;
font-size: 12px;
}
.home_stats label {
color: #666666;
margin-top: 5px;
font-size: 12px;
cursor: default;
}
.fb_bg {
width: 405px;
height: 40px;
min-height: 40px;
background-color: #1877F2;
border-radius: 0px 12px 12px 12px;
display: flex;
align-items: center;
align-self: center;
padding-left: 8px;
padding-right: 8px;
border: none;
font-family: 'Montserrat';
transition: 0.2s;
}
.fb_bg:hover {
-webkit-box-shadow: 0px 7px 24px -12px rgba(24, 119, 242, 1);
-moz-box-shadow: 0px 7px 24px -12px rgba(24, 119, 242, 1);
box-shadow: 0px 7px 24px -12px rgba(24, 119, 242, 1);
}
.fb_bg:focus,
.fb_bg:active {
outline: none;
}
.home_stats_box .fb_bg {
width: 462px;
}
.fb_bg p {
margin-left: 8px;
font-size: 12px;
line-height: 15px;
color: #ffffff;
font-weight: 500;
text-align: left;
}
.games_left_row {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-top: 16px;
}
.games_left_row p {
color: #292966;
font-size: 14px;
}
.games_left_row span {
font-weight: bold;
}
.games_left_row a {
color: #1298B3;
text-decoration: underline;
font-weight: bold;
font-size: 12px;
}
.home_select_game {
/* position: absolute; */
width: 100%;
display: flex;
justify-content: center;
}
.select_game_title {
/* color: #FFFFFF;
font-weight: bold;
left: 0;
right: 0;
position: absolute;
text-align: center;
width: 100%;
font-size: 25px;
top: 280px; */
color: #FFFFFF;
font-weight: bold;
position: relative;
text-align: center;
width: 100%;
font-size: 25px;
margin-top: -125px;
margin-bottom: 110px;
}
.desktop_games {
display: flex;
flex-direction: row;
margin-top: -80px;
max-width: 585px;
justify-content: space-around;
width: 585px;
}
.game_box {
min-width: 120px;
min-height: 120px;
border-radius: 12px;
margin: 10px auto;
/* padding: 15px 30px 10px 30px; */
cursor: pointer;
}
.game_box p {
text-align: center;
color: #ffffff;
font-size: 16px;
font-weight: bold;
margin-top: 12px;
}
.game_box img {
margin: 15px auto auto auto;
display: block;
}
.game_box.logic {
background-color: #39BF93;
-webkit-box-shadow: 0px 8px 0px 0px rgba(42, 140, 108, 1);
-moz-box-shadow: 0px 8px 0px 0px rgba(42, 140, 108, 1);
box-shadow: 0px 8px 0px 0px rgba(42, 140, 108, 1);
}
/* .game_box.logic:active,
.game_box.logic:focus {
-webkit-transform: translateY(4px);
-moz-transform: translateY(4px);
-ms-transform: translateY(4px);
-o-transform: translateY(4px);
transform: translateY(4px);
-webkit-box-shadow: 0px 3px 0px 0px rgba(42,140,108,1);
-moz-box-shadow: 0px 3px 0px 0px rgba(42,140,108,1);
box-shadow: 0px 3px 0px 0px rgba(42,140,108,1);
outline: none;
} */
.game_box.logic.selected_game_mode {
-webkit-transform: translateY(4px);
-moz-transform: translateY(4px);
-ms-transform: translateY(4px);
-o-transform: translateY(4px);
transform: translateY(4px);
-webkit-box-shadow: 0px 3px 0px 0px rgba(42, 140, 108, 1);
-moz-box-shadow: 0px 3px 0px 0px rgba(42, 140, 108, 1);
box-shadow: 0px 3px 0px 0px rgba(42, 140, 108, 1);
outline: none;
}
.game_box.memory {
background-color: #F24973;
-webkit-box-shadow: 0px 8px 0px 0px rgba(191, 57, 91, 1);
-moz-box-shadow: 0px 8px 0px 0px rgba(191, 57, 91, 1);
box-shadow: 0px 8px 0px 0px rgba(191, 57, 91, 1);
}
/* .game_box.memory:active,
.game_box.memory:focus {
-webkit-transform: translateY(4px);
-moz-transform: translateY(4px);
-ms-transform: translateY(4px);
-o-transform: translateY(4px);
transform: translateY(4px);
-webkit-box-shadow: 0px 3px 0px 0px rgba(191,57,91,1);
-moz-box-shadow: 0px 3px 0px 0px rgba(191,57,91,1);
box-shadow: 0px 3px 0px 0px rgba(191,57,91,1);
outline: none;
} */
.game_box.memory.selected_game_mode {
-webkit-transform: translateY(4px);
-moz-transform: translateY(4px);
-ms-transform: translateY(4px);
-o-transform: translateY(4px);
transform: translateY(4px);
-webkit-box-shadow: 0px 3px 0px 0px rgba(191, 57, 91, 1);
-moz-box-shadow: 0px 3px 0px 0px rgba(191, 57, 91, 1);
box-shadow: 0px 3px 0px 0px rgba(191, 57, 91, 1);
outline: none;
}
.game_box.attention {
background-color: #FF9933;
-webkit-box-shadow: 0px 8px 0px 0px rgba(204, 122, 41, 1);
-moz-box-shadow: 0px 8px 0px 0px rgba(204, 122, 41, 1);
box-shadow: 0px 8px 0px 0px rgba(204, 122, 41, 1);
}
/* .game_box.attention:active,
.game_box.attention:focus {
-webkit-transform: translateY(4px);
-moz-transform: translateY(4px);
-ms-transform: translateY(4px);
-o-transform: translateY(4px);
transform: translateY(4px);
-webkit-box-shadow: 0px 3px 0px 0px rgba(204,122,41,1);
-moz-box-shadow: 0px 3px 0px 0px rgba(204,122,41,1);
box-shadow: 0px 3px 0px 0px rgba(204,122,41,1);
outline: none;
} */
.game_box.attention.selected_game_mode {
-webkit-transform: translateY(4px);
-moz-transform: translateY(4px);
-ms-transform: translateY(4px);
-o-transform: translateY(4px);
transform: translateY(4px);
-webkit-box-shadow: 0px 3px 0px 0px rgba(204, 122, 41, 1);
-moz-box-shadow: 0px 3px 0px 0px rgba(204, 122, 41, 1);
box-shadow: 0px 3px 0px 0px rgba(204, 122, 41, 1);
outline: none;
}
.game_box.mixed {
background-color: #A65398;
-webkit-box-shadow: 0px 8px 0px 0px rgba(115, 57, 105, 1);
-moz-box-shadow: 0px 8px 0px 0px rgba(115, 57, 105, 1);
box-shadow: 0px 8px 0px 0px rgba(115, 57, 105, 1);
}
/* .game_box.mixed:active,
.game_box.mixed:focus {
-webkit-transform: translateY(4px);
-moz-transform: translateY(4px);
-ms-transform: translateY(4px);
-o-transform: translateY(4px);
transform: translateY(4px);
-webkit-box-shadow: 0px 3px 0px 0px rgba(115,57,105,1);
-moz-box-shadow: 0px 3px 0px 0px rgba(115,57,105,1);
box-shadow: 0px 3px 0px 0px rgba(115,57,105,1);
outline: none;
} */
.game_box.mixed.selected_game_mode {
-webkit-transform: translateY(4px);
-moz-transform: translateY(4px);
-ms-transform: translateY(4px);
-o-transform: translateY(4px);
transform: translateY(4px);
-webkit-box-shadow: 0px 3px 0px 0px rgba(115, 57, 105, 1);
-moz-box-shadow: 0px 3px 0px 0px rgba(115, 57, 105, 1);
box-shadow: 0px 3px 0px 0px rgba(115, 57, 105, 1);
outline: none;
}
.swiper-games-container {
position: absolute;
top: -90px;
}
.swiper {
width: 100%;
height: 100%;
z-index: 0;
}
.swiper-slide {
text-align: center;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.mobile_games {
display: none;
}
.swiper_prizes_carousel {
padding-top: 50px;
padding-bottom: 50px;
}
.home_prizes_section h1 {
font-weight: 400;
font-size: 1.2em;
color: #2D8DAB;
line-height: unset;
display: block;
margin-left: 0;
text-align: center;
min-height: auto;
padding: 8px 0;
}
.home_prizes_section h1:nth-child(1) {
margin-top: 32px;
}
.home_prizes_section p {
font-weight: 400;
font-size: 1em;
color: #666666;
line-height: unset;
display: block;
margin-left: 0;
text-align: center;
min-height: auto;
padding-top: 7px;
}
.home_prizes_section {
max-width: 500px;
text-align: center;
display: block;
margin: 40px auto 10px auto;
}
.prizes_carousel {
max-width: 490px;
display: block;
margin: 10px auto 40px auto;
height: 210px;
}
.carousel_prize_container {
background-color: #ffffff;
width: 160px;
height: 100%;
min-height: 160px;
border-radius: 10px;
text-align: center;
padding: 5px;
-webkit-box-shadow: 0px 16px 16px -15px rgba(41, 41, 102, 1);
-moz-box-shadow: 0px 16px 16px -15px rgba(41, 41, 102, 1);
box-shadow: 0px 16px 16px -15px rgba(41, 41, 102, 1);
}
.carousel_prize_container img {
border-radius: 10px;
}
.carousel_prize_container h1 {
color: #3198B3;
font-size: 13px;
font-weight: bold;
margin-top: 5px;
}
.carousel_prize_container p {
color: #666666;
font-size: 14px;
font-weight: 400;
margin-top: 5px;
}
.achievements_section {
max-width: 490px;
}
.prizes_home_title {
font-size: 32px;
}
.achievement_row {
border-radius: 12px 24px 24px 12px;
width: 405px;
height: 48px;
margin: 8px auto;
display: flex;
flex-direction: row;
position: relative;
}
.achievement_row.logic {
background: transparent linear-gradient(90deg, #36B389 0%, #0D6C80 100%) 0% 0% no-repeat padding-box;
}
.achievement_row.attention {
background: transparent linear-gradient(90deg, #FF9933 0%, #995C1F 100%) 0% 0% no-repeat padding-box;
}
.achievement_row.mixed {
background: transparent linear-gradient(90deg, #A65398 0%, #40203A 100%) 0% 0% no-repeat padding-box;
}
.achievement_row.memory {
background: transparent linear-gradient(90deg, #F24973 0%, #8C2A43 100%) 0% 0% no-repeat padding-box;
}
.img_logic {
width: 48px;
height: 48px;
border-radius: 12px;
background-color: rgba(255, 255, 255, 0.5);
display: flex;
justify-content: center;
align-self: center;
align-items: center;
}
.img_logic img {
width: 32px;
height: 32px;
}
.achievement_col {
display: flex;
flex-direction: column;
align-self: center;
margin-left: 13px;
}
.achievement_col h1 {
color: #ffffff !important;
font-size: 14px !important;
font-weight: bold !important;
margin: 0 !important;
text-align: left !important;
}
.achievement_col p {
color: #ffffff;
font-size: 12px;
}
.small .progress {
display: block;
margin: 0 auto;
overflow: hidden;
transform: rotate(-90deg) rotateX(180deg) scale(0.25);
margin-top: -65px;
}
.small .progress circle {
transition: stroke-dashoffset 1.2s ease;
stroke: rgba(255, 255, 255, 0.25) !important;
stroke-width: 16px;
}
.small .progress .bar {
stroke: #ffffff !important;
stroke-linecap: round;
stroke-dashoffset: 502.4;
}
.progressdiv.small {
position: absolute;
right: -65px;
width: auto !important;
}
.small.progressdiv:after {
position: absolute;
top: 23px;
left: 90px;
font-size: 13px;
content: attr(data-percent) "%";
color: #ffffff;
font-weight: 400;
}
.small.complete.progressdiv:after {
content: url("../images/home/icon-check.svg");
top: 25px;
}
/* BONUS SECTION */
.home_bonus_box {
border-radius: 24px;
display: flex;
flex-direction: row;
max-width: 490px;
margin: 0 auto;
justify-content: center;
position: relative;
min-height: 75px;
align-items: center;
}
.home_bonus_box.midnight_bonus_box {
background-color: #39BF93;
margin-top: -10px;
}
.home_bonus_box img {
position: absolute;
left: 25px;
top: 4px;
}
.bonus_col {
display: flex;
flex-direction: column;
align-items: center;
}
.bonus_col .store_countdown {
margin: 0;
background-color: rgba(255, 255, 255, 0.8);
}
.bonus_col h2 {
font-size: 18px;
color: #ffffff;
font-weight: 800;
margin-bottom: 5px;
}
.home_bonus_box.discount_bonus_box {
background-color: #3D3D99;
margin-top: 10px;
}
.mobile_only {
display: none;
}
.desktop_only {
display: block;
}
/* ====================================== */
/* ========== End Home Page ============= */
/* ====================================== */
/* ============================================ */
/* ========== Prizes & Leaderboards =========== */
/* ============================================ */
.lead_prizes_section {
max-width: 435px;
margin: 25px auto 100px auto;
}
.lead_prizes_section a {
margin-top: 0px;
margin-bottom: 10px
}
.lead_prizes_section .filter {
/* height: 64px; */
width: 100%;
/* background-color: rgba(57,191,147,0.1); */
border-radius: 12px 12px 0px 0px;
}
.lead_prize_box {
text-align: center;
}
.lead_prize_box img {
margin: 0 auto;
display: block;
}
.lead_prize_box h1 {
color: #3198B3;
font-size: 15px;
font-weight: bold;
margin-top: 12px;
}
.lead_prize_box p {
color: #3B3E3E;
font-size: 17px;
margin-top: 6px;
font-weight: 500;
}
.leaderboard_user_info {
width: 100%;
display: flex;
justify-content: center;
}
.leaderboard_stats_box {
width: 435px;
min-width: 435px;
height: 195px;
border-radius: 24px;
background-color: #ffffff;
margin: -60px auto 0px auto;
position: relative;
padding: 15px;
}
.leaderboard_stats_container {
max-width: 271px;
margin-left: auto;
margin-right: auto;
}
.leaderboard_stats_container img {
width: 60px;
height: 60px;
}
.leaderboard_stats_row {
display: flex;
flex-direction: row;
justify-content: center;
justify-content: space-around;
padding-bottom: 12px;
text-align: center;
margin-left: 20px;
}
.leaderboard_stats {
display: flex;
flex-direction: column;
}
.vertical_line_home {
border-left: 1px solid #666666;
height: auto;
}
.leaderboard_stats p {
color: #292966;
font-weight: bold;
font-size: 12px;
}
.leaderboard_stats label {
color: #666666;
margin-top: 5px;
font-size: 12px;
cursor: default;
}
.leaderboard_stats_container h1 {
color: #1298B3;
font-size: 18px;
font-weight: bold;
}
.vertical_line_leaderboard {
border-left: 1px solid #666666;
height: 30px;
margin-left: 25px;
margin-right: 25px;
}
.points_leaderboard {
margin-top: 10px;
}
.border_line {
border-bottom: 1px solid #e3e3e3;
margin: 5px auto 10px auto;
}
.fb_label.leaderboard {
text-align: center;
font-size: 13px;
margin: 20px auto;
}
.share_points_btn {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
border: none;
min-width: 109px;
min-height: 32px;
border-radius: 8px;
color: #ffffff;
background-color: #1877F2;
font-weight: bold;
font-size: 14px;
margin: 13px auto 0 auto;
transition: 0.2s;
}
.share_points_btn p {
font-weight: bold;
font-size: 14px;
font-family: 'Montserrat';
}
.share_points_btn:hover {
box-shadow: 0px 6px 12px #1877F233;
}
.share_points_btn:active,
.share_points_btn:focus {
outline: none;
}
.leaderboard_rank_box {
width: 435px;
background-color: #ffffff;
border-radius: 24px;
/* padding: 16px; */
margin: 20px auto 20px auto;
display: flow-root;
overflow: hidden;
position: relative;
}
.leaderboard_rank_box h1 {
color: #292966;
font-size: 24px;
text-align: center;
font-weight: bold;
margin: 32px auto 30px auto;
}
.rank_row {
display: flex;
flex-direction: row;
align-items: center;
align-self: center;
padding-top: 7px;
padding-bottom: 7px;
cursor: pointer;
/* background-color: red; */
/* padding-top: 10px; */
}
.rank_clicked {
background-color: #EBF8F4;
}
.rank_border {
border-bottom: 1px solid #e3e3e3;
margin: 8px auto;
max-width: 404px;
}
.rank_row img {
width: 60px;
height: 60px;
margin-left: 16px;
}
.rank_row h2 {
color: #1298B3;
font-size: 18px;
font-weight: bold;
margin-left: 9px;
}
.rank_points {
position: absolute;
right: 25px;
text-align: left;
}
.rank_points p {
color: #666666;
font-size: 12px;
line-height: 16px;
}
.rank_points label {
color: #292966;
font-weight: bold;
font-size: 12px;
line-height: 16px;
}
.rank_col {
display: flex;
flex-direction: column;
}
.load_more_btn.rank {
margin-bottom: 16px;
}
.vertical_line_rank {
border-left: 2px solid #1298B3;
height: 30px;
position: absolute;
right: 105px;
}
.lead_prizes_section .filter_list {
padding: 5px 0 25px 0;
}
.select_rank {
max-width: 435px;
background-color: #ffffff;
border-radius: 12px;
padding: 4px;
margin: 20px auto 0 auto;
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
.select_rank a {
color: #666666;
font-size: 12px;
min-width: 210px;
min-height: 32px;
border-radius: 10px;
background-color: transparent;
text-decoration: none;
display: flex;
justify-content: center;
align-items: center;
}
.select_rank a.selected_rank {
background-color: #39BF93;
color: #ffffff;
font-weight: bold;
}
.per_skill_section .filter_list h1 {
margin-top: 22px;
}
.performance_box.leaderboard {
min-width: 435px;
width: 435px;
border-radius: 24px;
background-color: #ffffff;
margin: 20px auto 20px auto;
padding: 15px;
}
/* ============================================ */
/* ======== End Prizes & Leaderboards ========= */
/* ============================================ */
/* ============================================ */
/* ================== STORE =================== */
/* ============================================ */
button {
font-family: 'Montserrat';
}
.get-started.popup_bg {
min-height: 100vh;
height: 100%;
background: #F6CF46;
background: repeating-linear-gradient(#F6CF46, #F6CF46 49.9%, #f2f2f2 50.1%, #f2f2f2 100%);
background: no-repeat center right/20%, repeating-linear-gradient(#F6CF46, #F6CF46 53%, #f2f2f2 53%, #f2f2f2 100%);
background-position: left center, center center;
background-repeat: repeat;
color: #666666;
padding-top: 60px;
overflow: hidden;
}
.top_bg_size {
background: transparent;
border-radius: 24px;
height: 600px;
margin: 0px auto;
position: relative;
}
.store_box {
width: 435px;
max-width: 435px;
background: #FFFFFF 0% 0% no-repeat padding-box;
border-radius: 24px;
margin: 40px auto;
position: relative;
left: 0;
right: 0;
padding-bottom: 1px;
z-index: 1;
}
.store_box h1 {
font-size: 18px;
color: #3D3D99;
text-align: center;
margin: 24px auto 15px auto;
font-weight: bold;
}
.store_box p {
color: #666666;
font-size: 14px;
text-align: center;
}
.store_countdown {
height: 32px;
width: 195px;
background-color: #EBEBF5;
border-radius: 16px;
display: flex;
justify-content: center;
align-items: center;
margin: 15px auto 24px auto;
}
.store_countdown p {
color: #3D3D99;
font-size: 24px;
font-weight: bold;
}
.store_container {
margin: 5px auto;
padding-right: 15px;
padding-left: 15px;
}
.store_container.no_bonus {
margin: 26px auto 5px auto;
}
.store_row {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.store_col {
display: flex;
flex-direction: column;
align-items: center;
}
.store_col p {
text-decoration: line-through;
color: #666666;
font-size: 14px;
}
.store_col h6 {
color: #1298B3;
font-size: 14px;
font-weight: bold;
}
.store_vertical_border {
border-right: 2px solid #1298B3;
height: 32px;
position: absolute;
right: 120px;
}
.store_row button {
min-height: 32px;
min-width: 90px;
background-color: #39BF93;
border-radius: 12px;
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
font-weight: bold;
border: none;
color: #ffffff;
transition: 0.2s;
padding: 0 2px;
}
@supports (-webkit-touch-callout: none) {
.store_row button {
min-height: 32px;
min-width: 90px;
background-color: #39BF93;
border-radius: 12px;
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
font-weight: bold;
border: none;
color: #ffffff;
transition: 0.2s;
padding: 0 2px;
}
}
.store_row button:hover {
box-shadow: 0px 6px 12px #39BF934D;
}
.store_row button:focus,
.store_row button:active {
background-color: #32A67F;
outline: none;
}
.store_horizontal_border {
border-bottom: 1px solid #e3e3e3;
margin: 15px auto;
}
.store_col.invite p {
color: #666666;
font-size: 12px;
text-align: left;
text-decoration: none;
}
.load_more_btn.store_load {
margin: 10px auto 16px auto;
}
.store_load .load-more {
margin: 0;
}
.vat_box {
height: 40px;
width: 100%;
padding: 5px;
background-color: rgba(57, 191, 147, 0.1);
margin: 16px auto 24px auto;
}
.vat_box p {
font-size: 12px;
color: #666666;
text-align: center;
}
/* STORE INVITATION POPUP */
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background-color: rgba(0, 0, 0, 0.5);
}
.store_popup_box {
width: 315px;
max-width: 315px;
text-align: center;
box-shadow: 0px 5px 15px #3D3D994D;
background-color: #ffffff;
border-radius: 10px;
margin: auto;
padding: 1px;
padding-left: 15px;
padding-right: 15px;
position: relative;
z-index: 1;
}
.store_popup_box h1 {
color: #292966;
font-size: 18px;
margin-top: 56px;
font-weight: bold;
}
.store_popup_box p {
max-width: 290px;
font-size: 14px;
color: #666666;
margin: 24px auto auto;
}
.store_input {
display: flex;
flex-direction: column;
margin-top: 25px;
}
.store_input label {
text-align: center;
font-size: 14px;
color: #666666;
cursor: default;
font-weight: bold;
}
.store_input input {
/* padding-left: 40px; */
border: 1px solid #39BF93;
border-radius: 12px;
height: 36px;
margin-top: 5px;
font-family: 'Montserrat';
font-size: 12px;
text-align: center;
}
.store_input.sms_input input {
background: url("../images/store/icon-mini-mobile.svg") #ffffff no-repeat scroll 10px;
}
input::placeholder {
font-size: 12px;
font-family: 'Montserrat';
text-align: center;
}
input:focus,
input:active {
outline: none;
}
.sms_invite_btn {
font-size: 18px;
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
background-color: #36B389;
border-radius: 12px;
transition: 0.2s;
border: none;
min-width: 109px;
min-height: 32px;
margin: 20px auto auto;
}
.sms_invite_btn:hover {
box-shadow: 0px 6px 12px #39BF934D;
}
.sms_invite_btn:active,
.sms_invite_btn:focus {
outline: none;
background-color: #32A67F;
}
.inactive {
background-color: #39BF934D;
cursor: no-drop;
}
.inactive:hover {
box-shadow: none;
}
.inactive:active,
.inactive:focus {
background-color: #39BF934D;
}
.store_input.email_input input {
background: url("../images/store/icon-mini-mail.svg") #ffffff no-repeat scroll 10px;
}
.store_popup_box h6 {
color: #666666;
font-size: 14px;
text-align: center;
margin-top: 26px;
font-weight: bold;
}
.invite_friends_btn {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
border: none;
min-width: 109px;
min-height: 32px;
border-radius: 8px;
color: #ffffff;
background-color: #1877F2;
font-weight: bold;
font-size: 14px;
margin: 16px auto 32px auto;
transition: 0.2s;
}
.invite_friends_btn p {
font-weight: bold;
font-size: 14px;
font-family: 'Montserrat';
color: #ffffff !important;
margin: 0 !important;
}
.invite_friends_btn:hover {
box-shadow: 0px 6px 12px #1877F233;
}
.invite_friends_btn:active,
.invite_friends_btn:focus {
outline: none;
}
.btn_close {
position: absolute;
top: -10px;
cursor: pointer;
right: -10px;
}
.success_sent_text {
font-size: 10px;
color: #2A8C6C;
text-align: right;
margin-top: 5px;
}
.success_sent {
background-color: #F2FFFF !important;
color: #2A8C6C !important;
}
.failed_sent_text {
font-size: 10px;
color: #FF0000;
text-align: right;
margin-top: 5px;
}
.failed_sent {
background-color: #FFF2F2 !important;
color: #FF0000 !important;
border: 1px solid #FF0000 !important;
}
/* END STORE INVITATION POPUP */
/* STORE CONFIRM PURCHASE POPUP */
.purchase_img {
margin: 24px auto 16px auto;
}
.store_popup_box h2 {
color: #292966;
font-size: 18px;
text-align: center;
font-weight: bold;
}
.purchase p {
font-size: 14px;
color: #666666;
max-width: 285px;
margin-top: 10px;
}
.purchase button {
font-size: 18px;
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
background-color: #36B389;
border-radius: 16px;
transition: 0.2s;
border: none;
min-width: 241px;
min-height: 40px;
margin: 70px auto;
/* margin: 60px auto 0 auto;
padding: 1px;
position: relative; */
}
.purchase button:hover {
box-shadow: 0px 6px 12px #39BF934D;
}
.purchase button:active,
.purchase button:focus {
outline: none;
background-color: #32A67F;
}
/* END STORE CONFIRM PURCHASE POPUP */
/* STORE PURCHASE SUCCESS POPUP */
.purchase_success h2 {
color: #00BFAA;
}
.purchase_success button {
min-width: 176px;
}
/* END STORE PURCHASE SUCCESS POPUP */
/* STORE PURCHASE FAILED POPUP */
.purchase_failed h2 {
color: #FF6A68;
}
.purchase_failed p {
margin-bottom: 148px;
}
/* END STORE PURCHASE FAILED POPUP */
/* ============================================ */
/* ================ END STORE ================= */
/* ============================================ */
/* =============================================== */
/* ================ OTHER POPUPS ================= */
/* =============================================== */
.modal-open {
overflow: hidden;
}
.modal_fixed {
position: fixed !important;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* width: 435px; */
z-index: 2 !important;
}
.popup_box {
width: 345px;
max-width: 345px;
text-align: center;
box-shadow: 0px 5px 15px #3D3D994D;
background-color: #ffffff;
border-radius: 10px;
margin: auto;
padding: 1px;
padding-left: 15px;
padding-right: 15px;
position: relative;
z-index: 1;
padding-left: 15px;
padding-right: 15px;
}
.desk_icon_btn {
width: 135px;
height: 135px;
margin: 135px auto 48px auto;
cursor: pointer;
}
.desk_icon_popup p {
font-size: 14px;
text-align: center;
/* max-width: 315px; */
color: #292966;
}
.desk_icon_popup p span {
font-weight: bold;
}
.show_message_row {
display: flex;
flex-direction: row-reverse;
justify-content: center;
margin: 150px auto 25px auto;
}
.show_message_row input {
padding: 0;
height: initial;
width: initial;
margin-bottom: 0;
display: none;
cursor: pointer;
}
.show_message_row label {
position: relative;
cursor: pointer;
font-size: 12px;
color: #666666;
margin-left: 10px;
}
.show_message_row label:before {
content: '';
-webkit-appearance: none;
background-color: transparent;
border-bottom: 2px solid #292966;
border-left: 2px solid #292966;
border-top: 2px solid #292966;
border-radius: 5px;
/* box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05); */
padding: 10px;
display: inline-block;
position: relative;
vertical-align: middle;
cursor: pointer;
margin-right: 20px;
}
.show_message_row input:checked+label:after {
content: '';
display: block;
position: absolute;
top: 0px;
left: 10px;
width: 10px;
height: 19px;
border: solid #292966;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.popup_box h1 {
margin-top: 56px;
font-size: 18px;
font-weight: bold;
color: #292966;
text-align: center;
max-width: 315px;
}
.popup_box .zero_bal_img {
margin: 52px auto 10px auto;
}
.popup_box p {
/* max-width: 315px; */
color: #666666;
font-size: 14px;
}
.popup_box button {
font-size: 18px;
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
background-color: #36B389;
border-radius: 16px;
transition: 0.2s;
border: none;
min-width: 192px;
min-height: 48px;
margin: 100px auto 47px auto;
}
.popup_box button:hover {
box-shadow: 0px 6px 12px #39BF934D;
}
.popup_box button:active,
.popup_box button:focus {
outline: none;
background-color: #32A67F;
}
.popup_box.new_game_popup .newGame_btn:hover {
box-shadow: none;
}
.popup_box.ungame_balance_popup h6 {
color: #666666;
font-size: 14px;
/* max-width: 315px; */
margin-top: 56px;
}
.ungame_bal_img {
margin: 18px auto 24px auto;
width: 100%;
max-width: 200px;
}
.popup_box.ungame_balance_popup button {
margin: 32px auto 47px auto;
}
.popup_box.ungame_balance_popup span {
font-weight: bold;
}
.popup_box.new_game_popup h1 {
margin: 21px auto auto;
}
.popup_box.new_game_popup p {
color: #666666;
font-size: 14px;
margin-top: 5px;
}
.popup_box.new_game_popup h2 {
margin-top: 12px;
font-size: 18px;
color: #292966;
margin: 12px auto auto;
font-weight: bold;
}
.popup_box.new_game_popup .games_selection_container {
margin-top: 10px;
}
.popup_box.new_game_popup .games_selection_row {
display: flex;
flex-direction: row;
margin-right: 20px;
margin-left: 20px;
}
.popup_box.new_game_popup .games_selection_row img {
margin-top: 17px;
}
.popup_box.new_game_popup .games_selection_row p {
color: #ffffff;
margin-top: 13px;
}
.popup_box.new_game_popup .newGame_buttons {
display: flex;
flex-direction: row;
max-width: 250px;
margin: 0 auto;
}
.popup_box.new_game_popup .newGame_buttons .newGame_btn {
min-width: 100px;
min-height: 100px;
border: 1px solid #707070;
border-radius: 10px;
margin-top: 20px;
cursor: pointer;
transition: 0.2s;
position: relative;
background-color: #ffffff;
}
.popup_box.new_game_popup .newGame_buttons .newGame_btn img {
width: 65px;
height: 65px;
margin-top: -15px;
}
/* .popup_box.new_game_popup .newGame_buttons .newGame_btn:hover {
background-color: #CDE8DF;
box-shadow: none;
}
.popup_box.new_game_popup .newGame_buttons .newGame_btn:active,
.popup_box.new_game_popup .newGame_buttons .newGame_btn:focus {
border: 2px solid #36B389;
outline: none;
} */
.selected_dif_btn {
background-color: #CDE8DF !important;
box-shadow: none !important;
border: 2px solid #36B389 !important;
outline: none !important;
}
.newGame_btn p {
color: #666666;
font-size: 12px;
position: absolute;
left: 0;
right: 0;
text-align: center;
bottom: 12px;
}
.popup_box.new_game_popup button {
margin: 20px auto;
}
/* =================================================== */
/* ================ END OTHER POPUPS ================= */
/* =================================================== */
/* =============================================== */
/* =================== PROFILE =================== */
/* =============================================== */
.profile_stats_box {
margin: 40px auto 30px auto;
}
.avatar_profile {
width: 96px;
height: 96px;
}
.profile_user_info h4 {
color: #1298B3;
font-size: 18px;
font-weight: bold;
margin-left: 15px;
}
.profile_row {
display: flex;
flex-direction: row;
align-items: center;
}
.profile_edit_icon {
margin: auto;
width: 25px;
height: 25px;
}
.profile_edit_icon_bg {
background-color: #FFFFFF;
width: 45px;
height: 45px;
display: flex;
border-radius: 25px;
border: 3px solid #F7CF47;
position: absolute;
right: -12px;
top: -12px;
cursor: pointer;
}
.profile_stats_row {
display: flex;
flex-direction: row;
justify-content: center;
justify-content: space-around;
margin: 10px auto;
text-align: center;
}
.info_horizontal_line {
border-bottom: 1px solid #c9c9c9;
margin: 10px auto;
}
.profile_stats_box .home_stats {
width: 85px;
}
.profile_stats_container {
background-color: #EBEBF5;
border-bottom-left-radius: 24px;
border-bottom-right-radius: 24px;
margin-top: 24px;
margin-left: -15px;
margin-right: -15px;
margin-bottom: -25px;
padding-bottom: 15px;
padding-top: 10px;
}
.profile_stats_container h1 {
font-size: 24px;
color: #292966;
margin: 7px auto 12px auto;
font-weight: bold;
text-align: center;
}
.performance_box {
min-width: 490px;
width: 490px;
border-radius: 24px;
background-color: #ffffff;
margin: 15px auto 30px auto;
padding: 15px;
}
.performance_box.prof {
margin: 150px auto 30px auto;
}
.performance_box h1 {
font-size: 24px;
margin: 10px auto 15px auto;
color: #292966;
font-weight: bold;
text-align: center;
}
.progressbar {
width: 100%;
background: #F2F2F2;
/* border: 1px solid #39BF934D; */
border-radius: 11px;
overflow: hidden;
border-radius: 6px;
}
.progressbar__bar {
background: #39BF93;
height: 12px;
width: 0%;
border-radius: 6px;
transition: width 2s ease-in-out;
}
.performance_row_title h2 {
font-size: 14px;
color: #1298B3;
font-weight: bold;
}
.performance_row_text {
display: flex;
flex-direction: row;
justify-content: space-between;
margin: 8px auto;
}
.performance_row_text p {
color: #666666;
font-size: 12px;
}
.performance_row_text p span {
font-weight: bold;
}
.performance_bg {
margin-left: -15px;
margin-right: -15px;
padding-left: 15px;
padding-right: 15px;
padding-top: 10px;
padding-bottom: 10px;
cursor: pointer;
}
.performance_bg.selected {
background-color: #EBF8F4;
}
.perf_horizontal_line {
border-bottom: 1px solid #c9c9c9;
margin: 5px auto;
}
.performance_row {
display: flex;
flex-direction: row;
justify-content: space-around;
}
.performance_col {
display: flex;
flex-direction: column;
align-items: center;
}
.progress {
display: block;
margin: -20px auto;
overflow: hidden;
transform: rotate(-90deg) rotateX(180deg) scale(0.6);
margin-left: -33px;
}
.progress circle {
transition: stroke-dashoffset 1.2s ease;
stroke: rgba(255, 255, 255, 0.25);
stroke-width: 13px;
}
.progress .bar {
stroke: #000000;
stroke-linecap: round;
stroke-dashoffset: 502.4;
}
.progressdiv.profile_progr {
position: relative;
width: 117px;
}
.progressdiv:after {
position: absolute;
top: 50%;
left: 50%;
font-size: 19px;
font-weight: bold;
transform: translate(-50%, -50%);
content: attr(data-percent) "%";
}
.progressdiv.profile_progr::after {
content: attr(data-percent) "";
}
/* .content {display: none;} */
.performance_col h3 {
font-size: 16px;
font-weight: bold;
text-align: center;
}
/* LOGIC */
.logic .progress circle {
stroke: rgba(57, 191, 147, 0.25);
}
.logic .progress .bar {
stroke: #39BF93;
}
.logic.progressdiv:after {
color: #39BF93;
}
.performance_col h3.logic {
color: #39BF93;
}
/* ATTENTION */
.attention .progress circle {
stroke: rgba(255, 153, 51, 0.25);
}
.attention .progress .bar {
stroke: #FF9933;
}
.attention.progressdiv:after {
color: #FF9933
}
.performance_col h3.attention {
color: #FF9933;
}
/* MEMORY */
.memory .progress circle {
stroke: rgba(242, 73, 115, 0.25);
}
.memory .progress .bar {
stroke: #F24973;
}
.memory.progressdiv:after {
color: #F24973
}
.performance_col h3.memory {
color: #F24973
}
/* MIXED */
.mixed .progress circle {
stroke: rgba(166, 83, 152, 0.25);
}
.mixed .progress .bar {
stroke: #A65398;
}
.mixed.progressdiv:after {
color: #A65398;
}
.performance_col h3.mixed {
color: #A65398
}
.performance_bg .slide p {
font-size: 13px;
color: #666666;
margin: 30px auto 10px auto;
text-align: center;
}
.performance_bg .slide span {
font-weight: bold;
}
.mobile_perf_carousel {
display: none;
}
.desktop_perf_block {
display: block;
}
/* =============================================== */
/* ================ END PROFILE ================== */
/* =============================================== */
/* =============================================== */
/* =============== EMPTY PROFILE ================= */
/* =============================================== */
.performance_box.empty h1 {
font-size: 24px;
margin: 10px auto 15px auto;
color: #292966;
font-weight: bold;
text-align: center;
}
.performance_box.empty img {
margin: 10px auto;
display: block;
}
.performance_box.empty p {
color: #666666;
font-size: 14px;
text-align: center;
margin: 10px auto 15px auto;
}
/* =============================================== */
/* ============= END EMPTY PROFILE =============== */
/* =============================================== */
/* =============================================== */
/* ================= EDIT PROFILE ================ */
/* =============================================== */
.profile_edit_box {
width: 490px;
min-width: 490px;
height: auto;
border-radius: 24px;
background-color: #ffffff;
margin: 40px auto 155px auto;
position: relative;
padding: 15px;
}
.profile_edit_box img {
display: block;
margin: 10px auto 15px auto;
width: 160px;
height: 160px;
}
.profile_edit_box h1 {
color: #1298B3;
text-align: center;
font-size: 18px;
margin: 10px auto 5px auto;
font-weight: bold;
}
.personalize_prof {
/* position: absolute;
left: 0;
right: 0;
top: 250px;
max-width: 600px;
margin: 0 auto; */
}
.personalize_prof .swiper-button-prev,
.personalize_prof .swiper-button-next {
color: #F7A61E;
}
.personalize_prof .swiper-button-next {
right: 2px;
left: auto;
top: 40%;
}
.personalize_prof .swiper-button-prev {
left: 2px;
right: auto;
top: 40%;
}
.personalize_prof h1 {
color: #292966;
font-size: 24px;
font-weight: bold;
margin-top: 0px;
text-align: center;
}
.personalize_prof_carousel img {
max-width: 75px;
max-height: 75px;
cursor: pointer;
}
.personalize_prof_carousel {
max-width: 500px;
margin: 30px auto 5px auto;
padding-left: 7px;
padding-bottom: 13px;
}
.personalize_prof_carousel img.selected {
border: 3px solid #F7A61E;
border-radius: 75px;
}
.profile_fb_img {
position: absolute;
top: 0;
left: 8px;
}
.personalize_prof_carousel label {
cursor: default;
position: absolute;
min-width: 76px;
min-height: 15px;
border-radius: 8px;
top: 68px;
display: flex;
justify-content: center;
align-items: center;
background-color: #ffffff;
font-size: 12px;
color: #666666;
}
.personalize_prof_carousel .swiper-slide {
display: flex;
flex-direction: column;
justify-content: center;
}
.personalize_prof_carousel button {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
border: none;
min-width: 87px;
min-height: 28px;
border-radius: 8px;
color: #ffffff;
background-color: #1877F2;
font-weight: bold;
font-size: 14px;
margin: 13px auto 0 auto;
transition: 0.2s;
}
.personalize_prof_carousel button p {
font-weight: bold;
font-size: 12px;
font-family: 'Montserrat';
}
.personalize_prof_carousel button img {
max-width: 20px;
max-height: 20px;
}
.personalize_prof_carousel button:hover {
box-shadow: 0px 6px 12px #1877F233;
}
.personalize_prof_carousel button:active,
.personalize_prof_carousel button:focus {
outline: none;
}
.btn_select_profile {
margin: 5px auto 0px auto;
display: flex;
justify-content: center;
align-items: center;
border-radius: 16px;
background-color: #39BF93;
color: #ffffff;
font-family: 'Montserrat';
font-size: 18px;
font-weight: bold;
transition: 0.2s;
min-width: 192px;
min-height: 48px;
border: none;
}
.btn_select_profile:hover {
-webkit-box-shadow: 0px 6px 12px #39bf934d;
-moz-box-shadow: 0px 6px 12px #39BF934D;
box-shadow: 0px 6px 12px #39bf934d;
}
.btn_select_profile:active,
.btn_select_profile:focus {
background-color: #2A8C6C;
outline: none;
}
.settings_box {
min-width: 490px;
width: 490px;
border-radius: 24px;
background-color: #ffffff;
margin: 145px auto 30px auto;
padding: 15px;
}
.settings_box h1 {
font-size: 24px;
text-align: center;
color: #292966;
font-weight: bold;
}
.settings_box h2 {
font-size: 14px;
text-align: center;
color: #292966;
font-weight: bold;
margin: 25px auto 15px auto;
}
.settings_row {
background-color: #F2F2F2;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
box-shadow: 0px 3px 6px #3D3D9926;
border-radius: 10px;
padding: 15px;
margin: 10px auto;
}
.settings_row p {
color: #666666;
font-size: 14px;
font-weight: 500;
}
.settings_row img {
cursor: pointer;
}
.lang_row {
display: flex;
justify-content: center;
}
.lang_row a {
margin: auto 5px;
font-size: 14px;
color: rgba(102, 102, 102, .4);
font-weight: bold;
}
.lang_row a:active,
.lang_row a:focus {
color: #292966;
}
.switch {
visibility: hidden;
position: absolute;
}
.switch+label {
display: block;
position: relative;
cursor: pointer;
outline: none;
user-select: none;
}
.switch--shadow+label {
padding: 2px;
width: 46px;
height: 24px;
background-color: #dddddd;
border-radius: 60px;
}
.switch--shadow+label:before,
.switch--shadow+label:after {
display: block;
position: absolute;
top: 1px;
left: 1px;
bottom: 1px;
content: "";
}
.switch--shadow+label:before {
right: 1px;
background-color: #CCCCCC;
border-radius: 60px;
transition: 0.4s;
}
.switch--shadow+label:after {
width: 18px;
height: 18px;
top: 3px;
left: 2px;
background-color: #fff;
border-radius: 100%;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
transition: all 0.4s;
}
.switch--shadow:checked+label:before {
background-color: #39BF93;
}
.switch--shadow:checked+label:after {
transform: translateX(24px);
}
/* CHANGE PIN POPUP */
.prof_edit_opt_box {
width: 315px;
max-width: 315px;
min-height: 580px;
text-align: center;
box-shadow: 0px 5px 15px #3D3D994D;
background-color: #ffffff;
border-radius: 10px;
margin: auto;
padding: 1px;
padding-left: 15px;
padding-right: 15px;
position: relative;
z-index: 1;
}
.prof_edit_opt_box h1 {
color: #292966;
font-size: 18px;
margin: 60px auto 85px auto;
font-weight: bold;
text-align: center;
}
.edit_prof_input {
display: flex;
flex-direction: column;
}
.edit_prof_input input {
border: 1px solid #39BF93;
border-radius: 24px;
height: 42px;
margin-top: 16px;
font-family: 'Montserrat';
font-size: 12px;
text-align: center;
}
.edit_prof_input input {
background: url("../images/profile/icon-mini-passward.svg") #ffffff no-repeat scroll 10px;
}
.forgot_pin {
font-size: 12px;
justify-content: flex-end;
display: flex;
margin-top: 8px;
color: #0055FF;
}
.prof_edit_opt_box button {
font-size: 18px;
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
background-color: #36B389;
border-radius: 16px;
transition: 0.2s;
border: none;
min-width: 195px;
min-height: 40px;
margin: 70px auto auto;
}
.prof_edit_opt_box button:hover {
box-shadow: 0px 6px 12px #39BF934D;
}
.prof_edit_opt_box button:active,
.prof_edit_opt_box button:focus {
outline: none;
background-color: #32A67F;
}
.success_update {
color: #39BF93;
font-size: 14px;
font-weight: bold;
text-align: center;
margin-top: 25px;
}
/* END CHANGE PIN POPUP */
/* CHANGE USERNAME POPUP */
.edit_prof_input.user input {
background: url("../images/profile/icon-mini-profile.svg") #ffffff no-repeat scroll 10px;
}
.info_symbol {
color: #39BF93;
font-weight: 900;
font-size: 25px;
margin-top: 29px;
}
.info_text {
font-size: 12px;
color: #666666;
margin-top: 12px;
}
/* END CHANGE USERNAME POPUP */
/* INVITE FRIENDS POPUP */
.prof_invite_box {
/* position: relative;
margin: 24px auto;
padding-left: 50px;
padding-right: 50px;
max-width: 450px;
text-align: center;
z-index: 1;
border-radius: 10px !important; */
width: 100%;
}
.invite_logo {
width: 100%;
max-width: 300px;
margin: 10px auto 0 auto;
padding-bottom: 10px;
}
.prof_invite_box h1 {
color: #2D8DAB;
margin-top: 10px;
font-weight: bold;
font-size: 20px;
}
.prof_invite_box p {
color: #666666;
margin: 20px auto 10px auto;
font-size: 14px;
width: 100%;
max-width: 310px;
}
.prof_invite_box h2 {
color: #292966;
font-size: 14px;
margin-top: 32px;
font-weight: bold;
}
.edit_prof_input.invite input {
background: url("../images/icon-mini-mobile.svg") #ffffff no-repeat scroll 10px;
}
.prof_invite_box .type_name {
margin-top: 50px;
}
.edit_prof_input.invite_name input {
border: 1px solid #CCCCCC;
background: #ffffff no-repeat scroll 10px;
margin-top: 7px;
}
.invite_border {
border-bottom: 2px solid #39BF93;
width: 100%;
margin-top: 20px;
}
.edit_prof_input.email input {
background: url("../images/store/icon-mini-mail.svg") #ffffff no-repeat scroll 10px;
}
.invite_friends_btn p {
color: #ffffff;
margin: 0;
}
/* END INVITE FRIENDS POPUP */
/* =============================================== */
/* ============== END EDIT PROFILE =============== */
/* =============================================== */
/* ================================================= */
/* ================ NOTIFICATIONS ================== */
/* ================================================= */
.notifications_box_outer {
width: 430px;
max-width: 430px;
background: #FFFFFF 0% 0% no-repeat padding-box;
margin: 40px auto;
border-radius: 24px;
position: relative;
z-index: 1;
padding-top: 1px;
min-height: 300px;
padding-bottom: 25px;
}
.notifications_box {
width: 405px;
max-width: 405px;
background: #FFFFFF 0% 0% no-repeat padding-box;
padding-right: 30px;
padding-left: 35px;
max-height: 600px;
overflow-y: hidden;
}
.notifications_box:hover,
.notifications_box.hovered {
overflow-y: scroll;
}
.notifications_box_outer h1 {
color: #3D3D99;
font-size: 24px;
font-weight: bold;
margin-top: 20px;
text-align: center;
margin-bottom: 30px;
}
.notification_content {
margin: 20px auto 10px auto;
position: relative;
}
.notification_content .date {
font-size: 14px;
color: #666666;
border-left: 2px solid #3D3D99;
padding-left: 20px;
}
.notification_row {
display: flex;
flex-direction: row;
align-items: center;
margin-top: 12px;
}
.notification_row img {
max-width: 60px;
max-height: 60px;
}
.notification_row p {
font-size: 12px;
color: #666666;
margin-left: 15px;
}
.notification_row span {
color: #3D3D99;
font-weight: bold;
}
.notification_content a {
font-size: 12px;
color: #3D3D99;
text-decoration: underline;
text-align: right;
display: flex;
justify-content: flex-end;
}
.noti_horizontal_line {
border-bottom: 1px solid #c9c9c9;
margin: 10px auto;
}
.clear_notifications {
display: flex;
justify-content: center;
color: #3D3D99;
font-weight: bold;
margin-top: 20px;
font-size: 15px;
}
/* ================================================= */
/* ============== END NOTIFICATIONS ================ */
/* ================================================= */
/* ================================================= */
/* ================= ACHIEVEMENTS ================== */
/* ================================================= */
.achievements_box {
width: 100%;
max-width: 490px;
height: auto;
border-radius: 24px;
background-color: #ffffff;
margin: 40px auto -30px auto;
position: relative;
padding: 15px;
text-align: center;
z-index: 1;
}
.achievements_box h1 {
color: #3D3D99;
font-size: 18px;
margin-top: 24px;
font-weight: bold;
}
.achievements_box p {
color: #666666;
font-size: 14px;
margin-top: 12px;
}
.achievements_section.achievements_main {
max-width: 490px;
margin: 50px auto 20px auto;
padding: 15px;
}
.achievements_section.achievements_main .filter {
background-color: #EBF8F4;
padding: 15px 0;
border-radius: 24px 24px 0px 0px;
margin: -15px;
}
.achievements_section a {
/* font-size: 12px; */
}
.achievements_section.achievements_main h1 {
color: #292966;
font-size: 18px;
font-weight: bold;
text-align: center;
margin: 35px auto 15px auto;
}
.achievements_row {
display: flex;
flex-direction: row;
border-bottom: 1px solid #CCCCCC;
padding-bottom: 12px;
padding-top: 12px;
}
.achievements_col {
display: flex;
flex-direction: column;
justify-content: left;
}
.achievements_col img {
max-width: 60px;
max-height: 60px;
}
.achievements_col.content h1 {
margin: 0;
color: #1298B3;
font-size: 14px;
}
.achievements_col.content h1 {
text-align: left;
}
.achievements_col p {
color: #666666;
font-size: 12px;
font-weight: bold;
margin-top: 6px;
}
.achievements_col.content {
margin-left: 10px;
width: 100%;
}
.achievements_col button {
margin: 13px auto 0px 0;
display: flex;
justify-content: center;
align-items: center;
border-radius: 16px;
background-color: #39BF93;
color: #ffffff;
font-family: 'Montserrat';
font-size: 18px;
font-weight: bold;
transition: 0.2s;
min-width: 90px;
min-height: 32px;
border: none;
}
.achievements_col button:hover {
-webkit-box-shadow: 0px 6px 12px #39bf934d;
-moz-box-shadow: 0px 6px 12px #39BF934D;
box-shadow: 0px 6px 12px #39bf934d;
}
.achievements_col button:active,
.achievements_col button:focus {
background-color: #2A8C6C;
outline: none;
}
.achievements_col.content .progressbar {
margin-top: 12px;
}
.completed {
display: flex;
flex-direction: row;
align-items: center;
}
.completed p {
font-size: 18px;
color: #39BF93;
font-weight: bold;
margin-top: 10px;
}
.completed img {
margin-left: 7px;
margin-top: 5px;
}
/* MODAL NEW ACHIEVEMENT */
.new_achievement_box {
width: 315px;
max-width: 315px;
text-align: center;
box-shadow: 0px 5px 15px #3D3D994D;
background-color: #ffffff;
border-radius: 10px;
margin: auto;
padding: 1px;
padding-left: 15px;
padding-right: 15px;
position: relative;
z-index: 1;
}
.new_achievement_box h1 {
color: #292966;
font-size: 18px;
font-weight: bold;
margin: 56px auto auto;
word-break: break-word;
}
.new_achievement_box p {
margin: 56px auto auto;
color: #666666;
font-size: 14px;
max-width: 280px;
}
.new_achievement_box .icon_achievement {
margin: 16px auto;
max-width: 135px;
max-height: 135px;
}
.new_achievement_box h2 {
color: #292966;
font-size: 14px;
font-weight: bold;
}
.icons_achievement_row {
display: flex;
flex-direction: row;
max-width: 210px;
justify-content: space-around;
margin: 10px auto 24px auto;
}
.reward_points {
position: relative;
}
.reward_label {
width: 65px;
height: 15px;
background: transparent linear-gradient(180deg, #FF0000 0%, #CC0000 100%) 0% 0% no-repeat padding-box;
border-radius: 8px;
position: absolute;
bottom: 7px;
font-size: 12px;
font-weight: 600;
color: #ffffff;
left: 13px;
}
.icons_achievement_row img {
width: 100%;
max-width: 90px;
max-height: 90px;
}
.achievement_share_fb {
font-size: 14px;
color: #666666;
margin-top: 0 !important;
}
/* END MODAL NEW ACHIEVEMENT */
/* MODAL PRIZE SPIN */
.prize_spin_img {
max-width: 165px;
max-height: 165px;
margin: 80px auto;
}
.new_achievement_box .claim_prize {
font-size: 18px;
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
background-color: #36B389;
border-radius: 16px;
transition: 0.2s;
border: none;
min-width: 195px;
min-height: 40px;
margin: 0 auto 50px auto;
}
.new_achievement_box .claim_prize:hover {
box-shadow: 0px 6px 12px #39BF934D;
}
.new_achievement_box .claim_prize:active,
.new_achievement_box .claim_prize:focus {
outline: none;
background-color: #32A67F;
}
/* END MODAL PRIZE SPIN */
/* MODAL TEXT */
.new_achievement_box.wheel_text p {
margin: 56px auto 77px auto;
text-align: left;
}
/* END MODAL TEXT */
/* MODAL PROGRESS */
.progress_bg {
background-color: #DDEBEF;
margin: 0px -15px 28px -15px;
padding: 7px 15px;
}
.progress_bg .progress_text {
text-align: left;
font-size: 12px;
font-weight: bold;
margin-bottom: 4px;
}
/* END MODAL PROGRESS */
/* MODAL LOCKED ACHIEVEMENT */
.locked_achievement h2 {
margin-top: 80px;
}
/* END MODAL LOCKED ACHIEVEMENT */
/* SPINNING WHEEL */
/*WRAPPER*/
#wrapper {
margin: 40px auto;
/* width:266px; */
position: relative;
}
#txt {
color: #eaeaea;
}
/*WHEEL*/
#wheel {
width: 250px;
height: 250px;
border-radius: 50%;
position: relative;
overflow: hidden;
box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 10px, rgba(0, 0, 0, 0.05) 0px 3px 0px;
transform: rotate(0deg);
}
#inner-wheel {
width: 100%;
height: 100%;
-webkit-transition: all 6s cubic-bezier(0, .99, .44, .99);
-moz-transition: all 6 cubic-bezier(0, .99, .44, .99);
-o-transition: all 6s cubic-bezier(0, .99, .44, .99);
-ms-transition: all 6s cubic-bezier(0, .99, .44, .99);
transition: all 6s cubic-bezier(0, .99, .44, .99);
}
#wheel div.sec {
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 130px 75px 0;
border-color: #19c transparent;
transform-origin: 75px 129px;
left: 50px;
top: -4px;
opacity: 1;
}
#wheel div.sec:nth-child(1) {
transform: rotate(60deg);
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-o-transform: rotate(60deg);
-ms-transform: rotate(60deg);
border-color: #CEE2EC transparent;
}
#wheel div.sec:nth-child(2) {
transform: rotate(120deg);
-webkit-transform: rotate(120deg);
-moz-transform: rotate(120deg);
-o-transform: rotate(120deg);
-ms-transform: rotate(120deg);
border-color: #4E4EA5 transparent;
}
#wheel div.sec:nth-child(3) {
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
border-color: #CEE2EC transparent;
}
#wheel div.sec:nth-child(4) {
transform: rotate(240deg);
-webkit-transform: rotate(240deg);
-moz-transform: rotate(240deg);
-o-transform: rotate(240deg);
-ms-transform: rotate(240deg);
border-color: #4E4EA5 transparent;
}
#wheel div.sec:nth-child(5) {
transform: rotate(300deg);
-webkit-transform: rotate(300deg);
-moz-transform: rotate(300deg);
-o-transform: rotate(300deg);
-ms-transform: rotate(300deg);
border-color: #CEE2EC transparent;
}
#wheel div.sec:nth-child(6) {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
border-color: #4E4EA5 transparent;
}
#wheel div.sec .fa {
margin-top: -107px;
position: relative;
z-index: 10000000;
display: block;
text-align: center;
margin-left: -45px;
margin-right: -45px;
}
#spin {
width: 68px;
height: 68px;
position: absolute;
top: 50%;
left: 50%;
margin: -34px 0 0 -34px;
z-index: 1000;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
#wheel div.sec .fa img {
box-shadow: 0px 0px 8px #005B804D;
border-radius: 10px;
width: 100%;
max-width: 50px;
}
#inner-spin {
width: 54px;
height: 54px;
position: absolute;
top: 50%;
left: 50%;
margin: -27px 0 0 -27px;
border-radius: 50%;
background: red;
z-index: 999;
box-shadow: rgba(255, 255, 255, 1) 0px -2px 0px inset, rgba(255, 255, 255, 1) 0px 2px 0px inset, rgba(0, 0, 0, 0.4) 0px 0px 5px;
background: rgb(255, 255, 255);
/* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 1) 0%, rgba(234, 234, 234, 1) 100%);
/* FF3.6+ */
/* background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(234,234,234,1))); Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 1) 0%, rgba(234, 234, 234, 1) 100%);
/* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 1) 0%, rgba(234, 234, 234, 1) 100%);
/* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 1) 0%, rgba(234, 234, 234, 1) 100%);
/* IE10+ */
background: radial-gradient(ellipse at center, rgba(255, 255, 255, 1) 0%, rgba(234, 234, 234, 1) 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eaeaea', GradientType=1);
/* IE6-9 fallback on horizontal gradient */
}
#spin:active #inner-spin {
box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 5px inset;
}
#spin:active:after {
font-size: 15px;
}
#shine {
width: 250px;
height: 250px;
position: absolute;
top: 0;
left: 0;
background: -moz-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.99) 1%, rgba(255, 255, 255, 0.91) 9%, rgba(255, 255, 255, 0) 100%);
/* FF3.6+ */
/* background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(1%,rgba(255,255,255,0.99)), color-stop(9%,rgba(255,255,255,0.91)), color-stop(100%,rgba(255,255,255,0))); Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.99) 1%, rgba(255, 255, 255, 0.91) 9%, rgba(255, 255, 255, 0) 100%);
/* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.99) 1%, rgba(255, 255, 255, 0.91) 9%, rgba(255, 255, 255, 0) 100%);
/* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.99) 1%, rgba(255, 255, 255, 0.91) 9%, rgba(255, 255, 255, 0) 100%);
/* IE10+ */
background: radial-gradient(ellipse at center, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.99) 1%, rgba(255, 255, 255, 0.91) 9%, rgba(255, 255, 255, 0) 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=1);
/* IE6-9 fallback on horizontal gradient */
opacity: 0.4;
}
.spin {
-webkit-animation: hh 0.6s;
/* Chrome, Safari, Opera */
animation: hh 0.6s;
}
/*ANIMATION*/
@-webkit-keyframes hh {
0%,
100% {
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
50% {
transform: rotate(7deg);
-webkit-transform: rotate(7deg);
}
}
@keyframes hh {
0%,
100% {
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
50% {
transform: rotate(7deg);
-webkit-transform: rotate(7deg);
}
}
/* END SPINNING WHEEL */
.claim_prize.new_ach_btn {
margin: 0 auto 40px auto;
min-width: 185px;
}
/* ================================================= */
/* =============== END ACHIEVEMENTS ================ */
/* ================================================= */
/* ============================================================= */
/* ================= OTHER PAGES VISITOR AREA ================== */
/* ============================================================= */
.prizes_box,
.grand_prizes_box {
width: 490px;
max-width: 490px;
height: auto;
border-radius: 24px;
background-color: #ffffff;
margin: 40px auto 20px auto;
position: relative;
padding: 15px;
text-align: center;
}
.grand_prizes_box {
margin: 0px auto 10px auto;
}
.prizes_box h1 {
color: #3D3D99;
font-size: 24px;
margin-top: 10px;
font-weight: bold;
}
.prizes_box img {
margin: 17px auto 10px auto;
width: 100%;
max-width: 300px;
}
.prizes_box p {
color: #3D3D99;
font-size: 14px;
margin: 0px auto 5px auto;
}
.prizes_box p span {
font-weight: bold;
}
.grand_prizes_box h1 {
color: #1298B3;
font-weight: bold;
font-size: 24px;
}
.grand_prizes_box h2 {
color: #3B3E3E;
font-size: 18px;
font-weight: 500;
margin-top: 10px;
}
.grand_prizes_box img {
margin-top: 10px;
}
.info_row {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.info_row p {
color: #666666;
font-size: 11px;
margin-right: 5px;
font-weight: bold;
}
.info_row a {
color: #39BF93;
font-size: 13px;
}
.grand_prizes_box.monthly {
margin-top: 10px;
}
.monthly .prizes_carousel,
.instant .prizes_carousel {
max-width: 490px;
display: block;
margin: 5px auto 0px auto;
height: 210px;
}
.monthly .prizes_carousel p,
.instant .prizes_carousel p {
color: #3B3E3E;
}
.monthly .carousel_prize_container,
.instant .carousel_prize_container {
width: 150px;
height: 100%;
min-height: 150px;
-webkit-box-shadow: 0px 5px 10 10px #EBF8F4;
-moz-box-shadow: 0px 5px 10px #EBF8F4;
box-shadow: 0px 5px 10px #EBF8F4;
}
.grand_prizes_box.instant {
margin-top: 20px;
}
/* ============================================================= */
/* =============== END OTHER PAGES VISITOR AREA ================ */
/* ============================================================= */
/* =============================================== */
/* ================= HOW TO WIN ================== */
/* =============================================== */
.how_to_win_box {
width: 345px;
max-width: 345px;
text-align: center;
box-shadow: 0px 5px 15px #3D3D994D;
background-color: #ffffff;
border-radius: 10px;
margin: auto;
padding: 1px;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 25px;
position: relative;
z-index: 1;
}
.how_to_win_box h1 {
color: #1298B3;
margin-top: 24px;
font-weight: bold;
font-size: 24px;
}
.win_box_img {
margin-top: 22px;
margin-bottom: -15px;
}
.how_to_win_box h2 {
margin-top: 25px;
font-size: 18px;
font-weight: bold;
color: #1298B3;
}
.how_to_win_box p {
color: #666666;
margin-top: 15px;
font-size: 14px;
}
/* =============================================== */
/* =============== END HOW TO WIN ================ */
/* =============================================== */
/* ================================================ */
/* ================ HOW IT WORKS ================= */
/* ================================================ */
.how_it_works_box {
width: 490px;
max-width: 490px;
text-align: center;
box-shadow: 0px 5px 15px #3D3D994D;
background-color: #ffffff;
border-radius: 10px;
margin: 50px auto 30px auto;
padding: 1px;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 25px;
position: relative;
z-index: 1;
}
.how_it_works_box.second {
margin-top: 10px;
}
.how_it_works_box h1 {
color: #3D3D99;
margin: 20px auto;
font-weight: bold;
font-size: 24px;
}
.how_it_works_box p {
margin: 20px auto 5px auto;
color: #666666;
font-size: 14px;
}
.how_works_title {
font-size: 40px;
color: #ffffff;
font-weight: bold;
text-align: center;
margin: 40px auto 35px auto;
}
/* ================================================ */
/* ============== END HOW IT WORKS ================ */
/* ================================================ */
/* ==================================================== */
/* ================= WINNERS UPDATED ================== */
/* ==================================================== */
.winners_upd_box,
.winners_upd_grand {
background: #FFFFFF 0% 0% no-repeat padding-box;
border-radius: 24px;
width: 435px;
max-width: 435px;
text-align: center;
padding: 1px;
padding-left: 15px;
padding-right: 15px;
display: flow-root;
overflow: hidden;
position: relative;
}
.winners_upd_box {
margin: 40px auto 15px auto;
}
.winners_upd_box h1 {
font-size: 24px;
color: #3D3D99;
font-weight: bold;
margin-top: 20px;
}
.winners_upd_box img {
margin: 10px auto;
width: 100%;
max-width: 300px;
}
.winners_upd_box p {
font-size: 14px;
color: #3D3D99;
margin-bottom: 20px;
}
.winners_upd_box span,
.winners_upd_grand span,
.upd_prize_bottom span {
font-weight: bold;
}
.winners_upd_grand {
margin: 15px auto 100px auto;
}
.winners_upd_grand h1 {
font-size: 24px;
color: #3D3D99;
font-weight: bold;
margin-top: 9px;
}
.winners_upd_grand p {
margin: 14px auto 20px auto;
font-size: 14px;
color: #3D3D99;
}
.rank_points p {
margin:0;
}
.winners_upd_monthly {
margin: -85px auto 30px auto;
}
.upd_prize_col {
display: flex;
flex-direction: column;
}
.upd_prize_col p {
color: #3B3E3E;
font-size: 14px;
margin: 0 0 0 9px;
}
.upd_prize_bottom {
font-size: 14px;
color: #3D3D99;
margin: 20px auto;
text-align: center;
max-width: 350px;
}
.last_upt p {
font-size: 12px;
color: #3D3D99;
margin: -5px auto 20px auto;
text-align: center;
max-width: 350px;
}
.last_upt span {
font-weight: bold;
}
.winners_upd_instant {
margin: -15px auto 30px auto;
}
/* ==================================================== */
/* =============== END WINNERS UPDATED ================ */
/* ==================================================== */
/* ==================================================== */
/* =================== BONUS PHASES =================== */
/* ==================================================== */
/* DAILY BONUS */
.daily_bg_size {
background: transparent;
border-radius: 24px;
/* height: 691px; */
margin: 0px auto;
position: relative;
}
.bonus_phase_box {
width: 435px;
text-align: center;
box-shadow: 0px 5px 15px #3D3D994D;
border-radius: 10px;
margin: auto;
padding: 1px;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 25px;
position: relative;
z-index: 1;
background: #ffffff center no-repeat;
background-size: cover;
}
.bonus_phase_box.daily_bonus {
padding-left: 80px;
padding-right: 80px;
background-image: linear-gradient(to bottom, rgba(223, 223, 250, 0.9) 0%, rgba(255, 255, 255, 0.9) 100%), url('../images/daily_bonus/bg-glow-green.svg');
}
.bonus_phase_box h1 {
color: #292966;
margin-top: 55px;
font-size: 18px;
font-weight: bold;
margin-bottom: 25px;
}
.bonus_phase_box .bonus_img {
margin: 30px auto 15px auto;
}
.daily_bonus h2 {
color: #666666;
font-size: 14px;
margin-bottom: 21px;
}
.daily_bonus_row {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-top: 16px;
}
.daily_bonus_col {
display: flex;
flex-direction: column;
}
.daily_bonus_col p {
font-size: 12px;
color: #3D3D99;
margin-top: 5px;
font-weight: 800;
}
.daily_bonus_col img {
cursor: pointer;
}
/* END DAILY BONUS */
/* MIDNIGHT BONUS */
.bonus_phase_box.midnight_bonus {
background-image: linear-gradient(to bottom, rgba(223, 223, 250, 0.96) 0%, rgba(255, 255, 255, 0.96) 100%), url('../images/daily_bonus/bg-glow-blue.svg');
}
.double_points_bg {
background: rgba(57, 191, 147, 0.1) 0% 0% no-repeat padding-box;
margin-left: -15px;
margin-right: -15px;
padding: 1px;
}
.double_points_bg h2 {
color: #3D3D99;
font-weight: 800;
margin-top: 8px;
font-size: 18px;
}
.double_points_bg h3 {
color: #666666;
font-size: 14px;
margin-top: 5px;
}
.double_points_bg .store_countdown {
height: 32px;
width: 195px;
background: rgba(61, 61, 153, 0.1) 0% 0% no-repeat padding-box;
border-radius: 16px;
display: flex;
justify-content: center;
align-items: center;
margin: 8px auto;
}
.midnight_bonus h4 {
color: #666666;
font-size: 14px;
margin: auto;
margin-top: 17px;
max-width: 260px;
}
.midnight_bonus h5 {
color: #666666;
font-size: 14px;
font-weight: 800;
margin: 12px auto 32px auto;
max-width: 260px;
}
.bonus_phase_box button {
min-width: 192px;
min-height: 48px;
border-radius: 16px;
color: #ffffff;
font-size: 18px;
font-weight: bold;
border: none;
background-color: #39BF93;
transition: 0.2s;
}
.bonus_phase_box button:active,
.bonus_phase_box button:focus {
background-color: #2A8C6C;
outline: none;
}
.bonus_phase_box button:hover {
-webkit-box-shadow: 0px 6px 12px #39BF934D;
-moz-box-shadow: 0px 6px 12px #39BF934D;
box-shadow: 0px 6px 12px #39BF934D;
}
/* END MIDNIGHT BONUS */
/* CLAIM PRIZE */
.bonus_phase_box.claim_prize_box {
background-image: linear-gradient(to bottom, rgba(223, 223, 250, 0.96) 0%, rgba(255, 255, 255, 0.96) 100%), url('../images/daily_bonus/bg-glow-blue.svg');
}
.claim_prize_section {
display: flex;
height: 85px;
width: 100%;
justify-content: center;
}
.claim_prize_img {
display: block;
margin: 0 auto;
position: absolute;
top: 170px;
width: 30px;
height: 30px;
}
.claim_prize_box p {
color: #666666;
margin: 10px auto 40px auto;
font-weight: 800;
font-size: 14px;
}
.small {
width: 10px;
height: 10px;
}
.large {
width: 80px;
height: 80px;
}
/* BONUS CLAIM PRIZE */
/* ==================================================== */
/* ================= END BONUS PHASES ================= */
/* ==================================================== */
.per_prize_section .swiper .swiper-pagination {
top: 0;
bottom: auto;
}
.per_prize_section .swiper-slide {
margin-top: 65px;
}
.per_prize_section .swiper-pagination-bullet {
margin-left: 30px !important;
margin-right: 30px !important;
width: 15px;
height: 15px;
background: #DAECF2;
opacity: 0.7;
}
.per_prize_section .swiper-pagination-bullet-active {
background: #7AB1CC;
}
.per_prize_section .swiper-pagination-bullet::after {
display: flex;
justify-content: center;
margin-top: 20px;
white-space: pre-line;
font-weight: 500;
font-size: 14px;
}
.per_prize_section .swiper-pagination-bullet-active::after {
color: #000000;
}
.per_prize_section .swiper-button-next:after,
.per_prize_section .swiper-button-prev:after {
font-size: 40px;
}
.per_prize_section .grand .swiper-pagination-bullet:nth-child(1)::after {
content: 'Today 31/3';
}
.per_prize_section .grand .swiper-pagination-bullet:nth-child(2)::after {
content: 'Mon 4/4';
}
.per_prize_section .grand .swiper-pagination-bullet:nth-child(3)::after {
content: 'Wed 6/4';
}
.per_prize_section .monthly .swiper-pagination-bullet:nth-child(1)::after {
content: 'Today 31/3';
}
.per_prize_section .monthly .swiper-pagination-bullet:nth-child(2)::after {
content: 'Mon 4/4';
}
.per_prize_section .monthly .swiper-pagination-bullet:nth-child(3)::after {
content: 'Wed 6/4';
}
.per_prize_section .weekly .swiper-pagination-bullet:nth-child(1)::after {
content: 'Today 31/3';
}
.per_prize_section .weekly .swiper-pagination-bullet:nth-child(2)::after {
content: 'Mon 4/4';
}
.per_prize_section .weekly .swiper-pagination-bullet:nth-child(3)::after {
content: 'Wed 6/4';
}
.per_prize_section .swiper-button-next,
.per_prize_section .swiper-button-prev {
color: #7AB1CC;
}
/* Extra Popups */
.popup_box.op_down .op_down_img {
margin: 40px auto;
}
.popup_box.op_down p {
margin-bottom: 10px;
}
.popup_box.op_down b {
font-weight: 800;
color: #292966;
}
.popup_box.op_down {
padding-bottom: 55px;
}
.popup_box.op_down button {
margin: 45px auto 0 auto;
}
/* ======================= */
/* ====== New Swipo ====== */
/* ======================= */
.graph {
color: #F29031;
font-weight: 700;
font-size: 18px;
text-align: center;
margin: 10px auto 0 auto;
}
.ui_index .generic-carousel .owl-item {
opacity: 0.8;
}
.ui_index .generic-carousel .owl-item .item {
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
}
.how_it_works_box img {
width: 100%;
max-width: 200px;
}
.get-started-main_carousel.gs_free {
padding-top: 0px;
margin-top: 10px;
}
.gs_free_btn a.ti_btn--main {
box-shadow: 0px 5px 3px 0px rgba(0,0,0,.3);
-webkit-box-shadow: 0px 5px 3px 0px rgba(0,0,0,.3);
-moz-box-shadow: 0px 5px 3px 0px rgba(0,0,0,.3);
}
.gs_free_btn a.ti_btn--main:hover,
.gs_free_btn a.ti_btn--main:active,
.gs_free_btn a.ti_btn--main:focus {
box-shadow: 0px 2px 3px 0px rgba(0,0,0,.3);
-webkit-box-shadow: 0px 2px 3px 0px rgba(0,0,0,.3);
-moz-box-shadow: 0px 2px 3px 0px rgba(0,0,0,.3);
}
.two_btns.gs_free_btn {
margin: 5px auto 30px auto;
}
.home_play_outer {
display: flex;
justify-content: center;
align-items: center;
margin: 40px auto;
border-radius: 50%;
width: 100%;
max-width: 160px;
height: 160px;
background-color: rgba(255, 255, 255, 0.4);
position: relative;
}
.home_play_outer2 {
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
border-radius: 50%;
width: 100%;
max-width: 140px;
height: 140px;
background-color: rgba(255, 255, 255, 0.5);
position: relative;
}
.home_play_outer3 {
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
border-radius: 50%;
width: 100%;
max-width: 130px;
height: 130px;
background: linear-gradient(to top, #F8AC17 0%, #EF853B 100%);
position: relative;
}
.home_play_btn {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 110px;
height: 110px;
background: linear-gradient(to top, #EF853B 0%, #F8AC17 100%);
transition: 0.2s;
color: #ffffff;
font-size: 20px;
font-weight: 700;
border-radius: 50%;
box-sizing: border-box;
position: relative;
transition: 0.2s;
}
.home_play_btn:hover,
.home_play_btn:focus,
.home_play_btn:active {
max-width: 120px;
height: 120px;
}
.home_achievements_swipo .main_title h1 {
font-size: 30px;
color: #2D8DAB;
margin: 0px auto 0 auto;
}
.home_achievements_swipo .main_title {
padding: 0;
}
.home_achievements_img {
width: 100%;
max-width: 350px;
margin: 15px auto 0 auto;
display: block;
}
.how_it_works_box.on_top h1 {
color: #2D8DAB;
font-size: 27px;
}
.how_it_works_box.on_top img {
margin-top: 25px;
max-width: 300px;
}
.how_it_works_box hr {
margin: 25px auto 0px auto;
}
.per_game_txt {
color: #3B3E3E;
font-size: 17px;
margin-top: 10px;
font-weight: 500;
text-align: center;
padding-bottom: 20px;
}
.achievements_box .ach_top_title {
font-size: 30px;
color: #2D8DAB;
margin: 10px auto 10px auto;
}
.status_box {
position: relative;
width: 100%;
max-width: 490px;
border-radius: 24px;
background-color: #ffffff;
margin: 15px auto -120px auto;
padding: 15px;
display: flex;
flex-direction: column;
text-align: center;
z-index: 1;
}
.status_box h1 {
font-size: 24px;
margin: 10px auto 15px auto;
color: #292966;
font-weight: bold;
text-align: center;
}
.status_box hr {
width: 100%;
max-width: 200px;
margin: 15px auto;
color: #434345;
}
.status_box .status_numbs {
font-size: 16px;
font-weight: 700;
color: #434345;
}
.status_box .status_numbs.first {
margin-top: 10px;
}
.status_box .status_txts {
font-weight: 500;
color: #434345;
font-size: 13px;
margin-top: 7px;
}
.status_box .more_games {
color: #1298B3;
font-size: 14px;
margin-top: 10px;
font-weight: 700;
text-decoration: underline;
}
.geography {background-color: #8BC440;}
.arts {background-color: #EF853B;}
.food {background-color: #3C6CC1;}
.history {background-color: #988475;}
.sports {background-color: #21753E;}
.music {background-color: #9D005D;}
.science {background-color: #C49A6C;}
.world {background-color: #34A49A;}
.math {background-color: #4A6168;}
.movies {background-color: #EA1B41;}
.nature {background-color: #39B44B;}
.languages {background-color: #1B5B81;}
.all {background-color: #F7CF46;}
.ach_prof_title {
font-size: 24px;
margin: 10px auto 15px auto;
color: #292966;
font-weight: bold;
text-align: center;
}
.achievements_section.achievements_main.achievements_prof .filter {
background-color: transparent;
padding: 15px 0;
border-radius: 24px 24px 0px 0px;
margin: -5px;
}
.achievements_prof .filter a {
max-width: 100px;
}
.profile_edit_box {
margin: 40px auto 0px auto;
}
.personalize_prof {
position: relative;
width: 100%;
max-width: 490px;
border-radius: 24px;
background-color: #ffffff;
margin: 25px auto -120px auto;
padding: 15px;
display: flex;
flex-direction: column;
text-align: center;
z-index: 1;
}
.invite_box_1 {
position: relative;
width: 100%;
max-width: 450px;
border-radius: 24px;
background-color: #ffffff;
margin: 25px auto 20px auto;
padding: 15px;
text-align: center;
/* z-index: 1; */
}
.invite_box_2 {
position: relative;
width: 100%;
max-width: 450px;
border-radius: 24px;
background-color: #ffffff;
margin: 25px auto 70px auto;
padding: 15px;
text-align: center;
/* z-index: 1; */
}
.prof_invite_box p span {
font-weight: 700;
}
/* ======================= */
/* ==== End New Swipo ==== */
/* ======================= */
/* new media */
@media (max-width: 768px) {
.circle_background {
background: url(../images/circle.svg) no-repeat center;
background-position: top;
background-repeat: repeat-y;
width: 100%;
bottom: 0;
display: block;
background-size: cover;
padding-bottom: 60px;
}
.touch_bottom {
display: flex;
}
.whiteandround {
border-radius: 24px 24px 0 0;
}
.circle_background_mob {
position: absolute;
height: 30%;
background-color: #E6E6E6;
width: 100%;
bottom: 0;
clip-path: ellipse(90% 80% at 50.42% 80.67%);
display: block;
}
.invite_pg .circle_background_mob {height: 80vh;}
.login-page,
.signup-page {
min-height: 100vh;
height: 100%;
/* background: url(../images/math_pattern.svg), #3D3D99; */
background: #F6CF46;
background-position: left center, center center;
background-repeat: repeat;
background-size: 60%;
color: #666666;
padding-top: 60px
}
.get-started {
min-height: 100vh;
height: 100%;
background: #F6CF46;
background-position: left center, center center;
background-repeat: repeat;
background-size: 60%;
color: #666666;
}
.prizes__carousel .prizes-carousel {
max-width: 185px;
position: relative;
margin: 0 auto
}
.filter_list {
padding: 15px 10px;
}
/* STORE */
.get-started.popup_bg {
min-height: 120vh;
height: 100%;
background: #F6CF46;
background-position: left center, center center;
background-repeat: repeat;
background-size: 60%;
color: #666666;
}
.circle_background.popup_circle_bg {
/* height: 700px;
margin-top: -400px; */
height: 770px;
position: absolute;
top: 300px;
}
/* END STORE */
}
@media only screen and (min-height: 940px) and (max-width: 500px) {
/* STORE */
.circle_background.popup_circle_bg {
/* height: 750px;
margin-top: -400px; */
height: 700px;
position: absolute;
top: 300px;
}
/* END STORE */
}
@media only screen and (max-width: 600px) {
.personalize_prof_carousel {
max-width: 380px;
}
}
@media only screen and (max-width: 500px) {
.mobile_only {
display: block;
}
.desktop_only {
display: none;
}
/* Home */
.desktop_games {
display: none;
}
.mobile_games {
display: block;
margin-top: -70px;
max-width: 400px;
width: 100%;
}
.prizes_home_title {
font-size: 26px;
}
.home_stats_box {
width: 350px;
min-width: 350px;
}
.game_box {
min-width: 110px;
min-height: 110px;
}
.game_box img {
max-width: 45px;
}
.game_box p {
font-size: 14px;
margin-top: 18px;
}
.home_stats_box .fb_bg {
width: 322px;
}
.select_game_title {
font-size: 23px;
margin-bottom: 90px;
}
.home_prizes_section h1 {
font-size: 18px;
}
.home_prizes_section p {
font-size: 14px;
max-width: 320px;
margin: 0 auto;
}
.carousel_prize_container {
width: 135px;
height: 100%;
min-height: 150px;
}
.carousel_prize_container h1 {
font-size: 11px;
margin-top: 12px;
}
.carousel_prize_container p {
font-size: 12px;
}
.swiper_prizes_carousel {
padding-top: 15px;
padding-bottom: 20px;
}
.achievements_section,
.achievements_section.achievements_main {
max-width: 350px;
}
.achievement_row {
width: 320px;
}
.prizes_carousel {
height: auto;
}
/* Mobile Bonus */
.mobile_bonus_box {
z-index: 1;
position: fixed;
box-shadow: 0px 0px 8px #00000066;
border-radius: 24px 24px 0px 0px;
max-width: 350px;
bottom: -310px;
background-repeat: no-repeat;
left: 0;
right: 0;
display: block;
margin: 0 auto;
}
.mobile_bonus_box.midnight {
background: #39BF93 url('../images/daily_bonus/photo-MidnightBonus.png') -40px -5px no-repeat padding-box;
background-size: 205px 130px;
/* min-height: 350px; */
}
.midnight .mobile_bonus_content {
background-color: rgba(57, 191, 147, 0.8);
min-height: 197px;
}
.has_two .mobile_bonus_content {
min-height: 350px;
}
.mobile_bonus_content {
text-align: center;
margin: 0px auto;
border-radius: 24px 24px 0px 0px;
padding-left: 60px;
padding-right: 60px;
}
.mobile_bonus_content h1 {
font-size: 18px;
font-weight: 800;
color: #ffffff;
padding-top: 24px;
}
.mobile_bonus_content h2 {
font-size: 14px;
color: #ffffff;
padding-top: 5px;
}
.mobile_bonus_box.discount {
background: #3D3D99 url('../images/daily_bonus/photo-DiscountBonus.png') -40px -5px no-repeat padding-box;
/* min-height: 197px; */
background-size: 205px 130px;
}
.discount .mobile_bonus_content {
background-color: rgba(61, 61, 153, 0.8);
min-height: 197px;
}
/* End Mobile Bonus */
/* End Home */
/* Prizes & Leaderboard */
.lead_prizes_section {
margin: 40px auto 100px auto;
}
.leaderboard_stats_box,
.select_rank {
width: 360px;
min-width: 360px;
}
.leaderboard_rank_box {
width: 360px;
min-width: 360px;
margin: 40px auto 20px auto;
}
.rank_border {
max-width: 340px;
}
.lead_prizes_section {
max-width: 360px;
}
.rank_points {
right: 15px;
}
.vertical_line_rank {
right: 90px;
}
.select_rank a {
min-width: 172px;
}
/* .filter a {
min-width: 80px;
} */
.performance_box.leaderboard {
min-width: 360px;
width: 360px;
}
/* EndPrizes & Leaderboard */
/* STORE */
.store_box {
width: 340px;
max-width: 340px;
}
.store_box p {
max-width: 270px;
margin: 0 auto;
}
.store_popup_box {
margin: 35px auto;
}
/* END STORE */
/* OTHER POPUPS */
.modal_fixed {
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow-x: hidden;
overflow-y: auto;
transform: none;
}
.modal_cont {
margin: 80px auto;
}
.modal {
top: 0 !important;
right: 0;
bottom: 0;
left: 0 !important;
overflow-x: hidden;
overflow-y: auto;
transform: none !important;
}
.modal__content {
margin: 80px auto;
}
/* .popup_box.new_game_popup .newGame_buttons .newGame_btn:hover {
border: 2px solid #36B389;
} */
.game_box.logic:hover {
-webkit-transform: translateY(4px);
-moz-transform: translateY(4px);
-ms-transform: translateY(4px);
-o-transform: translateY(4px);
transform: translateY(4px);
-webkit-box-shadow: 0px 3px 0px 0px rgba(42, 140, 108, 1);
-moz-box-shadow: 0px 3px 0px 0px rgba(42, 140, 108, 1);
box-shadow: 0px 3px 0px 0px rgba(42, 140, 108, 1);
outline: none;
}
.game_box.memory:hover {
-webkit-transform: translateY(4px);
-moz-transform: translateY(4px);
-ms-transform: translateY(4px);
-o-transform: translateY(4px);
transform: translateY(4px);
-webkit-box-shadow: 0px 3px 0px 0px rgba(191, 57, 91, 1);
-moz-box-shadow: 0px 3px 0px 0px rgba(191, 57, 91, 1);
box-shadow: 0px 3px 0px 0px rgba(191, 57, 91, 1);
outline: none;
}
.game_box.attention:hover {
-webkit-transform: translateY(4px);
-moz-transform: translateY(4px);
-ms-transform: translateY(4px);
-o-transform: translateY(4px);
transform: translateY(4px);
-webkit-box-shadow: 0px 3px 0px 0px rgba(204, 122, 41, 1);
-moz-box-shadow: 0px 3px 0px 0px rgba(204, 122, 41, 1);
box-shadow: 0px 3px 0px 0px rgba(204, 122, 41, 1);
outline: none;
}
.game_box.mixed:hover {
-webkit-transform: translateY(4px);
-moz-transform: translateY(4px);
-ms-transform: translateY(4px);
-o-transform: translateY(4px);
transform: translateY(4px);
-webkit-box-shadow: 0px 3px 0px 0px rgba(115, 57, 105, 1);
-moz-box-shadow: 0px 3px 0px 0px rgba(115, 57, 105, 1);
box-shadow: 0px 3px 0px 0px rgba(115, 57, 105, 1);
outline: none;
}
/* END OTHER POPUPS */
/* PROFILE */
.progress {
transform: rotate(-90deg) rotateX(180deg) scale(0.55);
}
.mobile_perf_carousel {
display: block;
}
.desktop_perf_block {
display: none;
}
.performance_col h3 {
font-size: 14px;
font-weight: bold;
margin-top: -10px;
}
.performance_box {
width: 350px;
max-width: 350px;
min-width: 350px;
}
.mobile_perf_carousel p {
margin: 0px auto;
font-size: 10px;
}
/* END PROFILE */
/* EMPTY PROFILE */
.performance_box.empty p {
font-size: 12px;
}
/* END EMPTY PROFILE */
/* EDIT PROFILE */
.profile_edit_box,
.settings_box {
width: 350px;
min-width: 350px;
}
.profile_fb_img {
left: 15px;
}
/* END EDIT PROFILE */
/* CHANGE PIN POPUP */
.prof_edit_opt_box {
width: 315px;
max-width: 315px;
min-height: 580px;
}
/* END CHANGE PIN POPUP */
/* INVITE FRIENDS POPUP */
/* .prof_invite_box {
padding-left: 15px;
padding-right: 15px;
max-width: 315px;
} */
/* END INVITE FRIENDS POPUP */
/* NOTIFICATIONS */
.notifications_box_outer,
.notifications_box {
width: 360px;
max-width: 360px;
overflow-y: scroll;
}
.notifications_box {
padding-right: 30px;
padding-left: 30px;
}
.notifications_box::-webkit-scrollbar {
display: none;
}
.notifications_box_outer h1 {
margin-bottom: 12px;
}
.notification_content .date {
font-size: 12px;
}
.notification_row p {
font-size: 11px;
}
.clear_notifications {
font-size: 13px;
}
/* END NOTIFICATIONS */
/* ACHIEVEMENTS */
.achievements_section {
margin: 60px auto 20px auto;
}
.achievements_box {
width: 350px;
max-width: 350px;
margin: 40px auto 60px auto;
}
.achievements_section.achievements_main {
margin: -30px auto 20px auto;
}
/* END ACHIEVEMENTS */
/* OTHER PAGES VISITOR AREA */
.monthly .carousel_prize_container,
.instant .carousel_prize_container {
width: 130px;
height: 100%;
min-height: 130px;
}
.prizes_box,
.grand_prizes_box {
width: 360px;
max-width: 360px;
}
.grand_prizes_box h1 {
margin-top: 10px;
font-size: 18px;
}
/* END OTHER PAGES VISITOR AREA */
/* HOW IT WORKS */
.how_it_works_box {
width: 345px;
max-width: 345px;
}
.how_works_title {
font-size: 30px;
margin: 30px auto 25px auto;
}
/* END HOW IT WORKS */
/* WINNERS UPDATED */
.winners_upd_box,
.winners_upd_grand {
width: 360px;
max-width: 360px;
}
.winners_upd_monthly {
margin: -85px auto 30px auto;
}
.winners_upd_instant {
margin: -15px auto 30px auto;
}
.rank_row h2 {
font-size: 16px;
}
.upd_prize_col p {
font-size: 13px;
}
/* END WINNERS UPDATED */
/* BONUS PHASES */
.bonus_phase_box {
max-width: 360px;
}
.bonus_phase_box.daily_bonus {
padding-left: 30px;
padding-right: 30px;
}
/* END BONUS PHASES */
/* .how_to_win_box {margin: 30px auto;} */
.login-form__forgot-password a {
font-size: 11px;
}
.personalize_prof_carousel {
max-width: 280px;
}
/* New Swipo */
/* .how_it_works_box img {max-width: 150px;} */
.home_play_outer {
margin: 20px auto;
}
.status_box {
width: 100%;
max-width: 350px;
}
.achievements_section.achievements_main.achievements_prof {
margin: 15px auto 20px auto;
}
.personalize_prof {max-width: 350px;}
.invite_box_1,
.invite_box_2 {
max-width: 350px;
}
.invite_logo {max-width: 220px;}
.mobile-menu__item a {
/* padding: 0 20px; */
font-size: 18px;
margin-top: 20px;
max-width: 300px;
}
.mobile-menu__item a.logout {
margin-top: 40px;
}
/* End New Swipo */
}
@media (max-width: 400px) {
.filter a {
font-size: 0.8em;
}
.winners_list_outer .winners_list_info {
padding-left: 5px;
}
/* .winners_list_outer .winners_list_info .prize_inner .prize_date {
width: 80%;
} */
.prizes__carousel .prizes-carousel {
max-width: 185px;
position: relative;
margin: 0 auto
}
.login-page--right,
.signup-page--right {
max-width: 330px;
}
.login-form .form-group--checkbox {
width: 149px;
}
}
@media only screen and (max-width: 360px) {
.get-started.popup_bg {
min-height: 140vh;
}
.home_stats_box {
width: 300px;
min-width: 300px;
}
/* .fb_bg {
width: 250px;
} */
.fb_bg p {
font-size: 10px;
}
.home_prizes_section h1 {
font-size: 16px;
}
.home_prizes_section p {
font-size: 13px;
}
.achievement_row {
width: 275px;
}
.achievements_section {
max-width: 300px;
width: 300px;
}
.home_stats_box .fb_bg {
width: 272px;
}
.lead_prizes_section {
max-width: 300px;
}
.leaderboard_stats_box,
.select_rank {
width: 300px;
min-width: 300px;
}
.select_rank a {
min-width: 145px;
}
.leaderboard_rank_box {
width: 300px;
min-width: 300px;
}
.rank_row h2 {
margin-left: 10px;
font-size: 13px;
}
.upd_prize_col p {
margin-left: 10px;
font-size: 12px;
max-width: 110px;
text-align: left;
}
.rank_border {
max-width: 270px;
}
/* .per_skill_section .filter a {
min-width: 68px;
} */
.store_box {
width: 300px;
max-width: 300px;
}
.store_popup_box {
width: 300px;
max-width: 300px;
}
.performance_box {
width: 300px;
max-width: 300px;
min-width: 300px;
}
.popup_box,
.notifications_box,
.notifications_box_outer,
.prof_edit_opt_box,
.prof_invite_box,
.achievements_box,
.new_achievement_box,
.prizes_box,
.grand_prizes_box,
.how_to_win_box,
.how_it_works_box,
.winners_upd_box,
.winners_upd_grand,
.bonus_phase_box {
width: 300px;
max-width: 300px;
}
.performance_box.leaderboard {
min-width: 300px;
width: 300px;
}
.notifications_box {
padding-right: 20px;
padding-left: 20px;
}
.profile_edit_box,
.settings_box {
width: 300px;
min-width: 300px;
}
.profile_fb_img {
left: 17px;
}
.bonus_phase_box.daily_bonus {
padding-left: 15px;
padding-right: 15px;
}
.mobile_bonus_box {
max-width: 300px;
}
.mobile_bonus_content {
padding-left: 40px;
padding-right: 40px;
}
/* New Swipo */
.status_box {
max-width: 300px;
}
.personalize_prof {max-width: 300px;}
.personalize_prof h1 {font-size: 20px;}
.settings_box h1 {font-size: 20px;}
.invite_box_1,
.invite_box_2 {
max-width: 300px;
}
/* End New Swipo */
.mobile-menu__item a {
max-width: 280px;
}
}
@media only screen and (max-width: 280px) {
.home_stats_box {
width: 270px;
min-width: 270px;
}
.home_stats_box .fb_bg {
width: 243px;
}
.select_game_title {
font-size: 19px;
}
.achievements_section {
max-width: 270px;
width: 270px;
}
.achievement_row {
width: 250px;
}
.achievement_col h1 {
font-size: 11px;
}
.achievement_col p {
font-size: 11px;
}
.leaderboard_rank_box {
width: 270px;
min-width: 270px;
}
/* .per_skill_section .filter a {
min-width: 60px;
} */
.rank_row img {
margin-left: 5px;
}
.rank_row h2 {
margin-left: 7px;
font-size: 12px;
}
.upd_prize_col p {
margin-left: 7px;
font-size: 12px;
}
.leaderboard_stats_box {
width: 270px;
min-width: 270px;
}
.share_points_btn {
margin-top: 7px;
}
.lead_prizes_section {
max-width: 270px;
}
.performance_box {
width: 270px;
max-width: 270px;
min-width: 270px;
}
.performance_box.leaderboard {
min-width: 270px;
width: 270px;
}
.performance_row_text p {
color: #666666;
font-size: 11px;
}
.performance_bg .slide p {
font-size: 11px;
}
.store_popup_box,
.store_box,
.popup_box,
.notifications_box,
.notifications_box_outer,
.prof_edit_opt_box,
.prof_invite_box,
.achievements_box,
.new_achievement_box,
.prizes_box,
.grand_prizes_box,
.how_to_win_box,
.how_it_works_box,
.winners_upd_box,
.winners_upd_grand,
.select_rank,
.bonus_phase_box {
width: 270px;
max-width: 270px;
}
.notifications_box {
padding-left: 13px;
padding-right: 13px;
}
.profile_edit_box,
.settings_box {
width: 270px;
min-width: 270px;
}
.profile_fb_img {
left: 10px;
}
.settings_row p {
font-size: 12px;
}
.settings_box h1 {
font-size: 20px;
}
.btn_select_profile {
margin: 50px auto 0px auto;
}
/* .filter a {
min-width: 80px;
} */
.bonus_phase_box.daily_bonus {
padding-left: 10px;
padding-right: 10px;
}
.mobile_bonus_box {
max-width: 270px;
}
.mobile_bonus_content {
padding-left: 20px;
padding-right: 20px;
}
/* New Swipo */
.status_box {
max-width: 270px;
}
.invite_box_1,
.invite_box_2 {
max-width: 270px;
}
/* End New Swipo */
}
/* DEV changes */
.carousel__nav {
width: 110%;
top: 67%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 0;
}
@media (max-width: 480px) {
.carousel__nav {
width: 100%;
z-index: 0;
}
}
.loader-contv1 {
margin-top: 30px;
}
.loader-cont__wrapperv1 {
margin: 0 auto;
}
.loaderv1 {
color: #34495e;
font-size: 46px;
text-indent: -9999em;
overflow: hidden;
width: 1em;
height: 1em;
border-radius: 50%;
-ms-transform: translateZ(0);
transform: translateZ(0);
animation: load6 1.7s infinite ease, round 1.7s infinite ease;
margin: 0 auto;
}
.purchase button.with_exit {
margin: 60px auto 0 auto;
padding: 1px;
position: relative;
}
.exit_link {
color: #FF0000;
text-decoration: underline;
font-weight: 800;
text-align: center;
font-size: 18px;
position: relative;
margin: 30px auto 50px auto;
display: inline-block;
}
.popup_box.op_down.exit_mod {
padding-bottom: 0;
}
.footer-main.with_brand .footer-nav__list li span {
font-size: 12px;
font-weight: 600;
text-align: center;
letter-spacing: .08em;
display: inline-block;
vertical-align: middle;
}
.footer-main.with_brand .footer-nav__list li .footer_align {
margin-right: auto;
margin-left: auto;
color: #666666;
display: block;
position: relative;
bottom: 6px;
}
.footer-main.with_brand .footer-nav__list li img {
max-width: 80px;
margin: 0 7px;
display: inline-block;
vertical-align: middle;
}
@media (max-width:768px) {
.footer-main.with_brand .footer-nav__list li span {
font-size: 9px;
font-weight: 400
}
}
@media (max-width:480px) {
.footer-main.with_brand .footer-nav__list li span {
font-size: 9px;
font-weight: 400
}
.footer-main.with_brand .footer-nav__list li {
padding: 0 4px;
}
.footer-main.with_brand .footer-nav__list li img {
max-width: 64px;
margin: 0 2px;
}
.footer-main.with_brand .footer-nav__list li a {
font-size: 9px;
}
.footer-main.with_brand .footer-nav__list li .divider {
display: none;
}
.footer-main.with_brand .footer-nav__list li.with_brand {
display: none;
}
}
.bonus_phase_outer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
z-index: 999999;
margin: 0 auto;
display: block;
right: 0;
max-width: 800px;
padding: 0 10px;
}
.bonus_phase_inner {
width: 100%;
display: flex;
}
.bonus_phase_icon {
float: left;
align-items: center;
justify-content: center;
display: flex;
width: 100%;
background-color: #ffffff;
max-width: 80px;
float: left;
-webkit-box-shadow: 4px 0px 5px -1px rgba(0, 0, 0, 0.29);
-moz-box-shadow: 4px 0px 5px -1px rgba(0, 0, 0, 0.29);
box-shadow: 4px 0px 5px -1px rgba(0, 0, 0, 0.29);
}
.promo_phase_outer {
width: 100%;
display: flex;
}
a.optout__link {
color: #030b20
}
.bonus_phase_icon.promo_phase_fp {
float: left;
align-items: center;
justify-content: center;
display: flex;
width: 100%;
max-width: 80px;
float: left;
-webkit-box-shadow: 4px 0px 5px -1px rgba(0, 0, 0, 0.29);
-moz-box-shadow: 4px 0px 5px -1px rgba(0, 0, 0, 0.29);
box-shadow: 4px 0px 5px -1px rgba(0, 0, 0, 0.29);
}
.bonus_phase_content {
width: 100%;
float: left;
justify-content: center;
display: flex;
margin-left: 10px;
flex-direction: column;
padding: 10px 0;
}
.bonus_phase_content h1 {
text-align: left;
font-size: 1.1em;
color: #fff;
font-weight: 700;
}
.bonus_phase_content.promo_phase_fp h1 {
text-align: left;
font-size: 1.4em;
color: #fff;
font-weight: 700;
}
.bonus_phase_content p {
text-align: left;
font-size: 1em;
color: #fff;
}
.bonus_phase_content.promo_phase_fp p {
text-align: left;
font-size: 1em;
color: #030b20;
}
.bonus_phase_timer {
width: 40%;
float: left;
align-items: center;
justify-content: center;
display: flex;
margin-left: 2%;
}
.promo_phase_btn {
width: 40%;
float: left;
align-items: center;
justify-content: center;
display: flex;
margin-left: 2%;
}
.btn2--fp {
background: #fff;
border: 1px solid #fff;
color: #071b1b;
}
.bonus_phase_timer h1 {
text-align: center;
font-size: 1.8em;
font-weight: 700;
}
.bonus_phase_icon img {
padding: 10px;
align-items: center;
justify-content: center;
display: flex;
}
.bonus_phase {
margin: 10px 0px;
position: relative;
font-style: normal;
font-size: .9rem;
font-weight: 300;
letter-spacing: 1px;
color: #030b20;
background-color: #ffffff;
border: 1px solid darken(#071b1b, 15%);
margin-bottom: 0;
-webkit-box-shadow: 1px 3px 33px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 1px 3px 33px 0px rgba(0, 0, 0, 0.75);
box-shadow: 1px 3px 33px 0px rgba(0, 0, 0, 0.75);
}
.bonus_phase.promo_phase_fp {
margin: 10px 0px;
position: relative;
font-style: normal;
font-size: .9rem;
font-weight: 300;
letter-spacing: 1px;
color: #ffffff;
border: 1px solid darken(#071b1b, 15%);
margin-bottom: 0;
-webkit-box-shadow: 1px 3px 33px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 1px 3px 33px 0px rgba(0, 0, 0, 0.75);
box-shadow: 1px 3px 33px 0px rgba(0, 0, 0, 0.75);
}
.bonus_phase:hover {
cursor: pointer;
}
.bonusclose {
border-spacing: 0;
color: #292966;
font-size: 11px;
font-weight: normal;
line-height: normal;
list-style: none outside none;
margin: 0;
padding: 5px;
text-align: left;
text-decoration: none;
text-indent: 0;
position: absolute;
top: -22px;
right: -12px;
border-radius: 34px;
background: #ffffff;
border: 3px solid #ffffff;
}
.bonusclose:focus {
outline-style: none;
box-shadow: none;
border-color: transparent;
}
.bonusclose:after {
content: '\0054';
font-style: normal;
font-family: DUEL;
float: right;
padding: 3px;
}
.bonusclose:after :hover {
cursor: pointer;
}
/* Owl Carousel Fixes */
.owl-item .item img {
margin: 0 auto;
}
.carousel__nav {
width: 115%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 0;
}
.icon-arrow-right:before {
font-weight: 900;
}
@media (max-width: 767px) {
.carousel__nav {
padding: unset!important;
width: 100%;
}
}
@media (max-width: 480px) {
.carousel__nav {
width: 100%;
z-index: 0;
}
}
.menu_open {
overflow: hidden;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
/* margin: 0; */
}
/* Firefox */
input[type=number] {
-moz-appearance: textfield;
}
/* Pulse effect */
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(33,131,221, 0.4);
}
70% {
box-shadow: 0 0 0 10px rgba(33,131,221, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(33,131,221, 0);
}
}
.shortcut {
width:150px;
height:150px;
background: url(../images/popups/Add-desktop.svg) no-repeat;
margin: 0 auto;
display: block;
}