html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, button {
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
a img {
border: none;
}
a {
outline: none;
text-decoration: none;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-o-transition: all .4s ease;
-ms-transition: all .4s ease;
transition: all .4s ease;
color: #ecb419;
}
textarea {
height: auto;
min-height: 50px;
-webkit-resize: none;
-moz-resize: none;
resize: none;
}
.clearfloat:before, .clearfloat:after {
content: "";
display: table;
}
.clearfloat:after {
clear: both;
}
/* For IE 6/7 (triggers hasLayout) */
.clearfloat {
*zoom: 1;
}
hr{
background: #ededed;
width: 100%;
height: 1px;
border: none;
padding: 0px;
margin: 20px 0px;
}
img {
max-width: 100%;
height: auto;
-ms-interpolation-mode: bicubic;
display: inline-block;
vertical-align: middle;
}
select {
width: 100%;
}
button {
background: none;
border: none;
cursor: pointer;
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-o-transition: all .4s ease;
-ms-transition: all .4s ease;
transition: all .4s ease;
}
/* Scrollbar*/
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: #bbb;
border-radius: 50px;
border: 1px solid transparent;
height: 100px;
}
::-webkit-scrollbar-thumb:hover {
background: rgb(0, 0, 0);
}
/*FONTS--------------------------------------------------------------------*/
@font-face {
font-family: 'Open Sans';
src: local('Open Sans Light Italic'), local('OpenSans-LightItalic'),
url('../webfonts/OpenSans-LightItalic.woff2') format('woff2'),
url('../webfonts/OpenSans-LightItalic.woff') format('woff'),
url('../webfonts/OpenSans-LightItalic.ttf') format('truetype');
font-weight: 300;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Open Sans';
src: local('Open Sans Light'), local('OpenSans-Light'),
url('../webfonts/OpenSans-Light.woff2') format('woff2'),
url('../webfonts/OpenSans-Light.woff') format('woff'),
url('../webfonts/OpenSans-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Open Sans';
src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'),
url('../webfonts/OpenSans-BoldItalic.woff2') format('woff2'),
url('../webfonts/OpenSans-BoldItalic.woff') format('woff'),
url('../webfonts/OpenSans-BoldItalic.ttf') format('truetype');
font-weight: bold;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Open Sans';
src: local('Open Sans SemiBold Italic'), local('OpenSans-SemiBoldItalic'),
url('../webfonts/OpenSans-SemiBoldItalic.woff2') format('woff2'),
url('../webfonts/OpenSans-SemiBoldItalic.woff') format('woff'),
url('../webfonts/OpenSans-SemiBoldItalic.ttf') format('truetype');
font-weight: 600;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Open Sans';
src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
url('../webfonts/OpenSans-SemiBold.woff2') format('woff2'),
url('../webfonts/OpenSans-SemiBold.woff') format('woff'),
url('../webfonts/OpenSans-SemiBold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Open Sans';
src: local('Open Sans Bold'), local('OpenSans-Bold'),
url('../webfonts/OpenSans-Bold.woff2') format('woff2'),
url('../webfonts/OpenSans-Bold.woff') format('woff'),
url('../webfonts/OpenSans-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Open Sans';
src: local('Open Sans Italic'), local('OpenSans-Italic'),
url('../webfonts/OpenSans-Italic.woff2') format('woff2'),
url('../webfonts/OpenSans-Italic.woff') format('woff'),
url('../webfonts/OpenSans-Italic.ttf') format('truetype');
font-weight: normal;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Open Sans';
src: local('Open Sans Regular'), local('OpenSans-Regular'),
url('../webfonts/OpenSans-Regular.woff2') format('woff2'),
url('../webfonts/OpenSans-Regular.woff') format('woff'),
url('../webfonts/OpenSans-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Open Sans';
src: local('Open Sans ExtraBold'), local('OpenSans-ExtraBold'),
url('../webfonts/OpenSans-ExtraBold.woff2') format('woff2'),
url('../webfonts/OpenSans-ExtraBold.woff') format('woff'),
url('../webfonts/OpenSans-ExtraBold.ttf') format('truetype');
font-weight: 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Open Sans';
src: local('Open Sans ExtraBold Italic'), local('OpenSans-ExtraBoldItalic'),
url('../webfonts/OpenSans-ExtraBoldItalic.woff2') format('woff2'),
url('../webfonts/OpenSans-ExtraBoldItalic.woff') format('woff'),
url('../webfonts/OpenSans-ExtraBoldItalic.ttf') format('truetype');
font-weight: 800;
font-style: italic;
font-display: swap;
}
.text, p{
line-height: 26px;
}
h1, h2, h3, h4, h5, h6{
color: #000;
text-transform: uppercase;
font-weight: 800;
}
h1 {
font-size: 48px;
}
h2 {
font-size: 42px;
}
h3 {
font-size: 36px;
}
h4 {
font-size: 30px;
}
h5 {
font-size: 26px;
}
h6 {
font-size: 22px;
}
/*
################################################
# #
# author: webrix-studio #
# url: http://webrix-studio.com #
# #
################################################
*/
/*BODY-------------------------------------------------------------------*/
body {
background-color: #1a2244;
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
color: #000;
font-size: 16px;
}
.wrapper{
max-width: 1370px;
margin: 0 auto;
padding: 0 20px;
}
/*----------------------- logo -------------------------*/
.logo{
position: relative;
z-index: 2;
}
.logo a{
display: block;
position: relative;
}
.logo a img{
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
-ms-transition: all .3s ease;
transition: all .3s ease;
}
/*------------------------- Buttons in site -------------------------*/
.btn{
display: inline-block;
position: relative;
background: #ecb419;
min-width: 190px;
font-size: 15px;
font-weight: 500;
text-align: center;
line-height: normal;
color: #fff;
padding: 13px 30px 15px;
border: 2px solid transparent;
border-radius: 30px;
margin-top: 50px;
box-sizing: border-box;
overflow: hidden;
vertical-align: middle;
cursor: pointer;
}
.btn:hover{
background: #222;
}
.btn-transp{
border: 2px solid #cacaca;
background: transparent;
color: #222;
}
.btn-transp:hover{
border: 2px solid #222;
color: #fff;
}
.btn-place{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
/*-------------------------------- content -------------------------------*/
.content{
position: relative;
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: space-between;
width: 100%;
height: 100vh; /* Fallback for browsers that do not support Custom Properties */
height: calc(var(--vh, 1vh) * 100);
overflow: hidden;
background: url('../images/bgr_main.jpg') no-repeat center center;
background-size: cover;
box-sizing: border-box;
}
.flex-modules{
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
padding: 10px 10px 0px;
overflow: hidden;
box-sizing: border-box;
}
.flex-box {
float: left;
webkit-flex: auto;
-ms-flex: auto;
flex: auto;
width: 25%;
padding: 5px;
box-sizing: border-box;
}
.flex-box.w-100{
width: 100%;
flex: inherit;
}
.flex-box.w-75{
width: 75%;
flex: inherit;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.flex-box.w-25{
width: 25%;
flex: inherit;
max-width: 466px;
}
/*-------------------------- jackpot ---------------------*/
.jackpot{
position: relative;
padding: 27px 0px;
box-sizing: border-box;
z-index: 2;
}
.jackpot:before{
content: '';
position: absolute;
top: -15px;
left: -20px;
width: 233px;
height: 142px;
background: url('../images/jackpot.png') no-repeat;
background-size: cover;
}
.jackpot-sum{
color: #fff;
font-size: 34px;
line-height: 46px;
font-weight: bold;
text-shadow: 3px 3px 7px rgba(0,0,0,0.35);
border: 3px solid #ffff8c;
border-radius: 10px;
padding: 3px 20px;
margin-left: 130px;
text-align: right;
background: rgba(3,13,30,1);
background: -moz-linear-gradient(top, rgba(3,13,30,1) 0%, rgba(30,45,75,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(3,13,30,1)), color-stop(100%, rgba(30,45,75,1)));
background: -webkit-linear-gradient(top, rgba(3,13,30,1) 0%, rgba(30,45,75,1) 100%);
background: -o-linear-gradient(top, rgba(3,13,30,1) 0%, rgba(30,45,75,1) 100%);
background: -ms-linear-gradient(top, rgba(3,13,30,1) 0%, rgba(30,45,75,1) 100%);
background: linear-gradient(to bottom, rgba(3,13,30,1) 0%, rgba(30,45,75,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#030d1e', endColorstr='#1e2d4b', GradientType=0 );
box-sizing: border-box;
}
/*-------------------------- your coupons ---------------------*/
.your-coupons{
position: relative;
width: 100%;
background: #254c28;
border: 3px solid #00af0d;
-webkit-box-shadow: 3px 3px 15px 0px rgba(0,0,0,0.45);
-moz-box-shadow: 3px 3px 15px 0px rgba(0,0,0,0.45);
box-shadow: 3px 3px 15px 0px rgba(0,0,0,0.45);
box-sizing: border-box;
}
.w-75 .your-coupons{
display: none;
}
.your-coupons-title{
color: #fff;
font-size: 26px;
font-weight: bold;
text-transform: uppercase;
text-shadow: 3px 3px 7px rgba(0,0,0,0.35);
background: #00af0d;
padding: 0px 15px 4px;
text-align: center;
}
.coupons-list ul{
margin: 0px;
padding: 0px;
list-style-type: none;
height: 360px;
overflow-y: auto;
box-sizing: border-box;
}
.coupons-list li{
display: block;
font-size: 19px;
font-style: italic;
color: rgba(255, 255, 255, .85);
padding: 5px 23px;
background: #002a19;
font-weight: 600;
}
.coupons-list li:nth-child(even){
background: #4a694c;
}
.coupons-list li a{
color: rgba(255, 255, 255, .85);
}
.coupons-list li a:hover, .coupons-list li a:focus, .coupons-list li a:active{
color: #ffd73c;
}
.qr-code{
margin-top: 40px;
}
.qr-code img{
max-width: 160px;
}
/*-------------------------- open dates and draw ---------------------*/
.top{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
position: relative;
z-index: 5;
margin-bottom: 20px;
box-sizing: border-box;
}
.b-wrap{
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
background: url('../images/b_left.png') no-repeat left top, url('../images/b_right.png') no-repeat right top;
background-size: contain;
height: 88px;
padding: 0 15px 5px;
font-size: 39px;
font-weight: bold;
color: #fff;
text-transform: uppercase;
text-shadow: 2px 2px 5px rgba(0,0,0,0.35);
box-sizing: border-box;
z-index: 1;
}
.b-wrap:before{
content: '';
position: absolute;
top: 0px;
left: 100px;
right: 100px;
height: 88px;
background: url('../images/b_middle.png') repeat-x left top;
background-size: contain;
z-index: -1;
}
.open-date, .close-date{
width: 50%;
padding: 0 20px;
box-sizing: border-box;
}
.close-date{
color: #ffd73c;
}
.opening-dates-wrap{
width: calc(77% - 20px);
}
.draws-wrap{
width: 23%;
cursor: pointer;
}
.draws-submenu{
display: none;
position: absolute;
top: 100%;
right: 0px;
width: 100%;
background: #fff;
border-radius: 25px;
overflow: hidden;
-webkit-box-shadow: 3px 3px 15px 0px rgba(0,0,0,0.45);
-moz-box-shadow: 3px 3px 15px 0px rgba(0,0,0,0.45);
box-shadow: 3px 3px 15px 0px rgba(0,0,0,0.45);
box-sizing: border-box;
}
.draws-submenu ul{
margin: 0px;
padding: 0px 10px;
list-style-type: none;
max-height: 589px;
overflow: auto;
box-sizing: border-box;
}
.draws-submenu ul li{
display: block;
border-bottom: 1px solid #ccc;
}
.draws-submenu ul li:last-child{
border-bottom: none;
}
.draws-submenu ul li a{
display: block;
padding: 10px 20px;
font-size: 28px;
color: #000;
text-shadow: none;
box-sizing: border-box;
}
.draws-submenu ul li a:hover{
color: #0067cf;
}
/*-------------------------- program table ---------------------*/
.main{
width: 100%;
overflow-x: auto;
box-sizing: border-box;
}
.program{
float: left;
width: 64%;
box-sizing: border-box;
}
.program-table ul{
margin: 0px;
padding: 0px;
list-style-type: none;
box-sizing: border-box;
}
.program-table li{
display: flex;
position: relative;
font-size: 25px;
color: #000;
font-weight: bold;
height: 46px;
box-sizing: border-box;
}
.program-table li > div{
display: flex;
align-items: center;
box-sizing: border-box;
}
.match-num{
width: 46px;
justify-content: center;
text-align: center;
background: #1023aa;
font-size: 22px;
color: #fff;
border: 3px solid #ffc800;
}
.match-home, .match-away, .match-win-results{
width: 26%;
padding: 0 15px;
background: #fff;
}
.program-table li:nth-child(2n) .match-home, .program-table li:nth-child(2n) .match-away, .program-table li:nth-child(2n) .match-win-results{
background: #ddd;
}
.program-table li:nth-child(15n) .match-home, .program-table li:nth-child(15n) .match-away{
background: #ffc800;
}
.match-home > span, .match-away > span{
display: block;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.match-result{
width: 14.5%;
margin: 0 5px;
padding: 5px;
background: #fff;
}
.program-table li:nth-child(15n) .match-result{
background: #ffc800;
}
.match-result strong{
display: block;
width: 100%;
background: #00780a;
color: #fff;
text-align: center;
}
.match-date{
width: calc(33.5% - 61px);
font-size: 22px;
padding: 0 15px;
justify-content: flex-end;
text-align: right;
margin-left: 5px;
background: #aec8e9;
white-space: nowrap;
}
.program-table li:nth-child(2n) .match-date{
background: #ffc800;
}
.program-table li:first-child{
height: 54px;
font-size: 30px;
font-weight: 800;
text-transform: uppercase;
color: #00af0d;
text-shadow: 2px 2px 2px rgba(0,0,0,0.5);
margin-bottom: 5px;
}
.program-table li:first-child .match-num, .program-table li:first-child .match-result, .program-table li:first-child .match-date, .program-table li:first-child .match-home, .program-table li:first-child .match-away{
background: none;
border: none;
position: relative;
z-index: 1;
}
.program-table li:first-child .match-home, .program-table li:first-child .match-away{
padding: 0px 42px 2px 15px;
}
.program-table li:first-child .match-home:before, .program-table li:first-child .match-away:before{
content: '';
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
width: calc(100% - 42px);
background: #fff;
z-index: -1;
}
.program-table li:first-child .match-home:after, .program-table li:first-child .match-away:after{
content: '';
position: absolute;
top: 0px;
right: 0px;
border-top: 54px solid transparent;
border-left: 42px solid #fff;
z-index: 0;
}
.program-table li:first-child .match-date{
font-size: 30px;
color: #fff;
padding: 0px 15px 2px 42px;
}
.program-table li:first-child .match-date:before{
content: '';
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
width: calc(100% - 42px);
background: #db1f21;
z-index: -1;
}
.program-table li:first-child .match-date:after{
content: '';
position: absolute;
top: 0px;
left: 0px;
border-top: 54px solid transparent;
border-right: 42px solid #db1f21;
z-index: 0;
}
/*-------------------------- coupons ---------------------*/
.coupons{
float: right;
width: calc(36% - 15px);
display: flex;
box-sizing: border-box;
}
.one-coupon{
width: 33.333%;
min-width: 140px;
padding: 0 5px;
box-sizing: border-box;
}
.one-coupon ul{
margin: 0px;
padding: 0px;
list-style-type: none;
box-sizing: border-box;
}
.one-coupon li{
display: flex;
position: relative;
font-size: 28px;
color: #000;
font-weight: bold;
height: 46px;
background: #fff;
text-transform: uppercase;
padding: 0 5px;
box-sizing: border-box;
}
.square-num{
display: flex;
width: 33.333%;
padding: 5px;
box-sizing: border-box;
}
.square-num > span{
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
background: #eaeaea;
border: 2px solid #c7cdf6;
text-align: center;
border-radius: 5px;
padding-bottom: 2px;
box-sizing: border-box;
cursor: pointer;
color: #ccc;
}
.square-num.active > span{
color:#000;
}
.one-coupon li:nth-child(2n) /* .square-num > span*/{
background: #f6f6f6;
/*;*/
}
.square-num > span:hover, .square-num > span:focus, .square-num > span:active{
border-color: #ffc800 !important;
}
.one-coupon li:first-child{
height: 54px;
font-size: 52px;
font-style: italic;
color: #fff;
letter-spacing: 3px;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
margin-bottom: 5px;
background: no-repeat;
}
.one-coupon-title{
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
text-align: center;
}
.qr-check .one-coupon-title{
font-size: 20px !important;
letter-spacing: normal !important;
}
/*------------------------------- bottom with menu and balance -------------------------------*/
.bottom{
position: relative;
padding: 0 15px;
margin-bottom: 30px;
width: 100%;
box-sizing: border-box;
}
.bottom-bgr{
position: relative;
background: url(../images/bottom_left.png) no-repeat left top, url(../images/bottom_right.png) no-repeat right top;
background-size: contain;
height: 201px;
box-sizing: border-box;
z-index: 1;
}
.bottom-bgr:before{
content: '';
position: absolute;
top: 0px;
left: 579px;
right: 469px;
height: 201px;
background: url('../images/bottom_middle.png') repeat-x left top;
background-size: contain;
z-index: -1;
}
.balance-wrap{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
height: 101px;
padding: 0 340px;
box-sizing: border-box;
}
.balance-wrap > div{
max-width: 50%;
font-size: 30px;
font-weight: bold;
color: rgba(255, 255, 255, .85);
text-transform: uppercase;
display: flex;
align-items: center;
box-sizing: border-box;
}
.balance-sum{
width: 232px;
height: 68px;
display: flex;
align-items: center;
justify-content: center;
background: url('../images/balance_bgr.png') no-repeat;
background-size: 100% auto;
padding-bottom: 4px;
margin-left: 35px;
color: #fff;
box-sizing: border-box;
}
.balance{
margin-left: auto;
}
.menu-wrap{
display: flex;
flex-wrap: wrap;
align-items: center;
position: relative;
padding: 0 90px 6px;
height: 100px;
box-sizing: border-box;
}
.menu-btn{
display: flex;
align-items: center;
position: relative;
height: 75px;
font-size: 28px;
color: rgba(255, 255, 255, .75);
font-weight: bold;
text-transform: uppercase;
padding-left: 88px;
margin-right: 40px;
box-sizing: border-box;
z-index: 1;
}
.menu-btn:before, .menu-btn:after{
content: '';
position: absolute;
top: -10px;
left: -13px;
width: 101px;
height: 101px;
box-sizing: border-box;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-o-transition: all .4s ease;
-ms-transition: all .4s ease;
transition: all .4s ease;
z-index: 1;
pointer-events: none;
}
.menu-btn:after{
opacity: 0;
z-index: 2;
}
.menu-btn:hover:after{
opacity: 1;
}
.info-btn:before{
background: url('../images/info_btn.png') no-repeat center center;
background-size: cover;
}
.info-btn:after{
background: url('../images/info_btn_focus.png') no-repeat center center;
background-size: cover;
}
.profile-btn:before{
background: url('../images/user_btn.png') no-repeat center center;
background-size: cover;
}
.profile-btn:after{
background: url('../images/user_btn_focus.png') no-repeat center center;
background-size: cover;
}
.random-btn:before{
background: url('../images/random_btn.png') no-repeat center center;
background-size: cover;
}
.random-btn:after{
background: url('../images/random_btn_focus.png') no-repeat center center;
background-size: cover;
}
.print-btn:before{
background: url('../images/print_btn.png') no-repeat center center;
background-size: cover;
}
.print-btn:after{
background: url('../images/print_btn_focus.png') no-repeat center center;
background-size: cover;
}
.menu-btn.print-btn{
color: #000 !important;
cursor: pointer;
margin: 0px !important;
}
.menu-btn.print-btn span{
display: none !important;
margin-left: 10px;
}
.jq-print-btn{
position: absolute;
bottom: 15px;
right: 30px;
z-index: 10;
}
.yellow-btn, .green-btn, .blue-btn{
display: flex;
align-items: center;
justify-content: center;
text-align: center;
position: relative;
height: 75px;
width: 219px;
font-size: 28px;
color: #aa1206;
font-weight: 800;
text-transform: uppercase;
margin-left: 20px;
box-sizing: border-box;
z-index: 1;
}
.green-btn{
color: #2d6e0e;
}
.blue-btn{
color: #1f3e93;
}
.yellow-btn:hover, .green-btn:hover, .blue-btn:hover{
color: rgba(255, 255, 255, .8);
}
.yellow-btn:before, .yellow-btn:after,
.green-btn:before, .green-btn:after,
.blue-btn:before, .blue-btn:after{
content: '';
position: absolute;
top: -10px;
left: -13px;
width: 245px;
height: 101px;
box-sizing: border-box;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-o-transition: all .4s ease;
-ms-transition: all .4s ease;
transition: all .4s ease;
z-index: -1;
pointer-events: none;
}
.yellow-btn:before{
background: url('../images/btn_yellow.png') no-repeat center center;
background-size: cover;
}
.yellow-btn:after{
background: url('../images/btn_yellow_focus.png') no-repeat center center;
background-size: cover;
opacity: 0;
}
.green-btn:before{
background: url('../images/btn_green.png') no-repeat center center;
background-size: cover;
}
.green-btn:after{
background: url('../images/btn_green_focus.png') no-repeat center center;
background-size: cover;
opacity: 0;
}
.blue-btn:before{
background: url('../images/btn_blue.png') no-repeat center center;
background-size: cover;
}
.blue-btn:after{
background: url('../images/btn_blue_focus.png') no-repeat center center;
background-size: cover;
opacity: 0;
}
.yellow-btn:hover:after, .green-btn:hover:after, .blue-btn:hover:after{
opacity: 1;
}
.menu-btns-right{
margin-left: auto;
display: flex;
align-items: center;
}
.your-coupons-btn{
display: none;
position: absolute;
right: 98px;
bottom: calc(100% + 9px);
margin-left: 0px;
}
.buy-btn{
position: absolute;
top: -25px;
left: calc(50% - 131px);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
height: 140px;
width: 262px;
font-size: 49px;
color: #fff;
font-weight: bold;
text-transform: uppercase;
text-shadow: 2px 2px 5px rgba(0,0,0,0.25);
box-sizing: border-box;
z-index: 1;
}
.buy-btn:before, .buy-btn:after{
content: '';
position: absolute;
top: -25px;
left: -27px;
width: 316px;
height: 196px;
background: url('../images/buy_btn.png') no-repeat center center;
background-size: cover;
box-sizing: border-box;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-o-transition: all .4s ease;
-ms-transition: all .4s ease;
transition: all .4s ease;
z-index: -1;
pointer-events: none;
}
.buy-btn:after{
background: url('../images/buy_btn_focus.png') no-repeat center center;
background-size: cover;
opacity: 0;
}
.buy-btn:hover:after{
opacity: 1;
}
/*---------------------------------------------- Results page -----------------------------------------------*/
.program.with-results{
width: 100%;
}
.with-results .program-table .match-home, .with-results .program-table .match-away, .with-results .program-table .match-win-results{
width: 21%;
}
.with-results .program-table .match-result{
width: 12%;
}
.with-results .program-table .match-date{
width: calc(25% - 66px);
margin-right: 5px;
}
.match-win-results{
justify-content: center;
}
.program-table li:first-child .match-win-results{
background: #ffc800;
color: #000;
}
.win{
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
min-width: 170px;
height: 34px;
padding: 0px 15px 3px;
border-radius: 30px;
background: #333;
font-size: 22px;
color: #fff;
box-sizing: border-box;
}
.win.home-win{
background: #00cf66;
}
.win.away-win{
background: #0073cf;
}
.win.draw-win{
background: #e80000;
}
/*---------------------------------------------- Prizes page -----------------------------------------------*/
.prizes{
border: 3px solid #000;
}
.title{
text-align: center;
margin-bottom: 30px;
}
.prizes .title{
margin-bottom: 0px;
background: #fff;
padding: 10px 15px;
}
.prizes-date{
background: #ffc800;
font-size: 23px;
font-weight: bold;
padding: 10px 15px;
text-transform: uppercase;
}
.prizes table{
border: none;
}
.prizes table td:last-child, .prizes table th:last-child{
text-align: right;
}
table tr.total td{
background: #1023aa !important;
color: #fff;
text-transform: uppercase;
font-weight: bold;
font-size: 28px;
}
table tr.next-jackpot td{
background: #00af0d !important;
color: #fff;
}
/*------------------------ Tables for whole site ------------------------*/
table {
width: 100%;
border-collapse: collapse;
border: 3px solid #000;
color: #000;
font-size: 23px;
font-weight: 600;
overflow-x: auto;
line-height: normal;
box-sizing: border-box;
}
table th{
display: table-cell;
padding: 10px 15px;
background: #aec8e9;
font-weight: 800;
border: none;
font-size: 28px;
overflow: hidden;
text-align: left;
}
table td{
background: #fff;
display: table-cell;
padding: 10px 15px;
text-align: left;
border: none;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
transition: all .3s ease-out;
}
table tr:nth-child(odd) td{
background: #dddddd;
}
table td a:hover{
text-decoration: underline;
color: #617304;
}
/*--- nasted tables ---*/
table table{
margin: 10px 0px;
border: 1px solid #bbb;
}
table table th{
background: #edeeef;
font-size: 13px;
}
table table td{
border: 1px solid #edeeef;
border-bottom: none;
font-size: 13px;
}
table table td:first-child{
border-left: none;
}
table table td:last-child{
border-right: none;
}
/*------------------------ responsive table -------------------------*/
table.responsive-table{
display: table;
white-space: normal;
}
table.responsive-table td:last-child, table.responsive-table th:last-child{
text-align: right;
}
table.responsive-table td{
position: relative;
}
table.responsive-table td:before{
content: attr(data-th);
display: none;
flex-wrap: wrap;
align-items: center;
width: 170px;
min-width: 170px;
color: #000;
font-size: 14px;
font-weight: 500;
padding: 0px 10px;
box-sizing: border-box;
}
table.responsive-table .link{
color: #a3c012;
font-weight: 600;
font-size: 13px;
}
table.responsive-table .link i{
font-size: 16px;
margin-left: 8px;
}
/*----------------------------- pop up ----------------------------*/
.fancybox__content{
width: 97% !important;
max-width: 1000px !important;
max-height: calc(100vh - 150px) !important;
padding-left: 0px !important;
padding-right: 0px !important;
}
.popup-content{
padding-left: 2rem;
padding-right: 2rem;
width: 100%;
height: 100%;
box-sizing: border-box;
overflow: auto;
}
.popup-content h2, .popup-content h3, .popup-content h4, .popup-content h5, .popup-content h6{
text-transform: none;
}
.popup-content table{
font-size: 18px;
}
.popup-content table th{
font-size: 22px;
}
.draws-information{
display: flex;
flex-wrap: wrap;
font-size: 16px;
font-weight: bold;
margin-bottom: 20px;
}
.draws-information > div{
width: 50%;
margin-bottom: 5px;
box-sizing: border-box;
}
/*pagination-----------------------------------------------------------------*/
.pagination{
padding-top: 40px;
padding-bottom: 80px;
}
.pagination ul {
text-align: center;
padding: 0px;
margin: 0px;
list-style-type: none;
}
.pagination li {
display: inline-block;
margin: 6px;
font-size: 18px;
}
.pagination a,
.pagination a:visited {
display: inline-block;
color: #000;
min-width: 12px;
text-align: center;
font-weight: normal;
border-bottom: 1px solid transparent;
text-decoration: none;
box-sizing: border-box;
}
.pagination a:hover,
.pagination a:visited:hover {
border-bottom: 1px solid #000;
}
.pagination a.currentpage {
cursor: default;
border-bottom: 1px solid #000;
}
.pagination a.disablelink,
.pagination a.prevnext {
color: #9f9f9f;
cursor: default;
}
.pagination a.disablelink:hover,
.pagination a.prevnext:hover {
color: #9f9f9f;
background: transparent;
border-color: transparent;
}
/*--------------- simple list in whole site -----------------*/
.text ul{
margin: 0px;
padding: 0px;
list-style-type: none;
}
.text ul li{
position: relative;
}
.text ul li:before{
content: '\f111';
font-family: 'Font Awesome 6 Pro';
font-size: 6px;
position: relative;
font-weight: bold;
color: #222;
top: -4px;
margin-right: 8px;
}
/*------------- Simple gallery in details ------------ */
.simple-gallery{
margin: 20px -15px 0;
padding: 0px;
list-style-type: none;
}
.simple-gallery li{
display: inline-table;
vertical-align: top;
width: 33.3333%;
padding: 15px;
margin-right: -4px;
box-sizing: border-box;
}
.simple-gallery li a{
display: block;
}
.simple-gallery li img{
max-width: none;
width: 100%;
}
.simple-gallery li a:hover{
opacity: 0.75;
}
/*table----------------------------------------------------------------------*/
.nl_osn {
width: 100%;
margin: 20px 0;
overflow: hidden;
font-weight: normal;
box-sizing: border-box;
}
.nl_osn a {
text-decoration: none;
}
.tr {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
padding: 8px 5px;
border-bottom: 1px solid #f1f1f1;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
-ms-transition: all .3s ease;
transition: all .3s ease;
cursor: default;
box-sizing: border-box;
}
.tr:hover {
background: #f3f2f0;
color: #000;
}
.download1 {
width: 72%;
color: #222;
webkit-flex: auto;
-ms-flex: auto;
flex: auto;
}
.tr-right{
width: 28%;
padding-left: 30px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
}
a.pdf,
a.pdf:visited {
display: block;
font-size:12px;
font-weight: 600;
margin-bottom: 5px;
margin-left: 5px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
padding: 7px 12px;
display: table-cell;
top: 3px;
position: relative;
color: #fff;
background: #ecb419;
}
a.pdf:hover{
color: #fff;
background: #1a1a1a;
}
/*--------------- video -----------------*/
.video{
width: 100%;
margin: 40px auto 0px;
}
.videowrapper {
float: none;
clear: both;
width: 100%;
position: relative;
padding-bottom: 51%;
height: 0;
border: 1px solid #ccc;
margin-top: 20px;
}
.videowrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
/*--------------- tags -----------------*/
.tagsContainer{
margin-top: 30px;
position: relative;
}
.tagsContainer::before{
content: '\f02c';
font-family: 'Font Awesome 6 Pro';
font-size: 16px;
color: #000;
position: relative;
left: 0px;
top: 0px;
margin-right: 10px;
}
.tagsContainer .tag-filter {
display: inline-block;
padding: 9px 12px;
border: 1px solid #f3f3f3;
background: #F5F6F8;
color: #222;
margin: 0px 5px 9px 0px;
font-size: 13px;
}
.tagsContainer .tag-filter:hover {
background: #222;
border: 1px solid #222;
color: #fff;
}
/*--------------- share -----------------*/
.share-wrap{
margin-top: 20px;
border: 1px solid #f1f1f1;
background: #fff;
line-height: 46px;
padding: 0 10px;
font-size: 14px;
}
.share-wrap i{
color: #444;
margin-right: 5px;
font-size: 15px;
}
.share-btns{
float: right;
}
.share-btns a{
margin: 3px 0px 0px !important;
padding: 5px 3px !important;
}
/*------------------------- table data sheet -------------------------*/
.table-data-sheet{
position: relative;
line-height: 44px;
}
.table-data-sheet > div{
padding: 0 10px;
}
.table-data-sheet > div:nth-of-type(even){
background: #f7f7f7;
}
.table-data-sheet strong{
display: inline-block;
width: 250px;
color: #000;
font-weight: 600;
}
.attribute-list{
margin: 0px;
padding: 0px;
list-style-type: none;
}
.attribute-list li{
display: block;
padding: 12px 10px;
}
.attribute-list li:nth-child(even){
background: #f7f7f7;
}
.attribute-list li:before{
display: none !important;
}
.attribute-list li strong {
display: inline-block;
width: 250px;
color: #000;
font-weight: 600;
vertical-align: top;
}
.attribute-list li span{
display: inline-block;
width: calc(100% - 255px);
vertical-align: top;
}
/*---------------------------------------------- Contacts ---------------------------------------------------*/
.form-flex{
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: space-between;
-ms-flex-pack: space-between;
justify-content: space-between;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
box-sizing: border-box;
}
.float-flex {
-webkit-box-flex: none;
-webkit-flex: 0 0 100%;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
position: relative;
box-sizing: border-box;
}
.col-2 .float-flex{
-webkit-flex: 0 0 48.5%;
-ms-flex: 0 0 48.5%;
flex: 0 0 48.5%;
}
.col-3 .float-flex{
-webkit-flex: 0 0 32%;
-ms-flex: 0 0 32%;
flex: 0 0 32%;
}
.col-4 .float-flex{
-webkit-flex: 0 0 23.5%;
-ms-flex: 0 0 23.5%;
flex: 0 0 23.5%;
}
.map{
height: 520px;
overflow: hidden;
opacity: 0.8;
filter: grayscale(100%);
}
.map iframe{
/*pointer-events: none;*/
width: 100% !important;
height: 100% !important;
border: none !important;
}
.address{
float: left;
width: 45%;
margin-bottom: 40px;
box-sizing: border-box;
}
.address strong{
display: inline-block;
color: #222;
font-size: 18px;
margin-bottom: 10px;
}
.address .heading{
font-size: 26px;
}
.contact-form {
margin-bottom: 40px;
float: right;
width: 50%;
box-sizing: border-box;
}
.input{
border: 0px;
background: transparent;
border-bottom: 1px solid #ccc;
padding: 0px;
margin-bottom: 22px;
width: 100%;
height: 42px;
color: #000;
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
font-size: 15px;
outline: none;
box-sizing: border-box;
}
textarea.input{
height: 127px;
padding-top: 22px;
resize: none;
}
.styled-select {
width: 100%;
position: relative;
overflow: hidden;
border-bottom: 1px solid #ccc;
margin-bottom: 22px;
box-sizing: border-box;
}
.styled-select select {
background: transparent;
width: calc(100% + 30px);
padding: 0px;
height: 41px;
border: 0;
border-radius: 0;
-webkit-appearance: none;
color: #000;
font-size: 15px;
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
outline: none;
position: relative;
z-index: 1;
}
.styled-select:after{
content: '\f107';
font-family: 'Font Awesome 6 Pro';
color: #797979;
font-size: 16px;
position: absolute;
top: 50%;
right: 10px;
font-weight: normal;
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 0;
}
.ok, .error {
display: block;
font-size: 13px;
margin: 10px;
}
.error {
color: #BF1717;
}
.contact-form .btn{
margin-top: 20px;
}
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: #868686;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #868686;
opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #868686;
opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #868686;
}
:placeholder-shown { /* Standard (https://drafts.csswg.org/selectors-4/#placeholder) */
color: #868686;
}
.label{
display: block;
margin-bottom: 7px;
font-size: 15px;
}
.captcha{
padding-top: 15px;
}
.captcha input {
width: 190px;
}
.captcha img {
border: 2px solid transparent;
}
.captcha img:hover{
border: 2px solid #999;
opacity: 0.9;
}
/*----------------------- Checkbox and Radio style ----------------------*/
.checkbox-custom, .radio-custom {
position: relative;
display: block;
margin-bottom: 22px;
}
.checkbox-custom label,.radio-custom label{
position:relative;
display:inline-block;
vertical-align:middle;
margin:0;
padding:0;
cursor:pointer;
padding-left: 28px;
font-size: 15px;
}
.checkbox-custom input[type=checkbox]{
opacity:0;
position:absolute;
margin: 0px;
}
.checkbox-custom input[type=checkbox]+label:before{
content:'';
background: transparent;
border: 1px solid #ccc;
display:inline-block;
vertical-align:top;
width: 20px;
height: 20px;
text-align:center;
font-size: 15px;
color: #000;
line-height: 20px;
font-family: 'Font Awesome 6 Pro';
position: absolute;
left: 0px;
top: 0px;
font-weight: bold;
-webkit-transition:box-shadow .1s ease-in-out;
-o-transition:box-shadow .1s ease-in-out;
transition:box-shadow .1s ease-in-out;
box-sizing: border-box;
}
.checkbox-custom input[type=checkbox]:checked+label:before{
content: '\f00c';
}
.checkbox-custom input[type=checkbox].disabled+label:before,.checkbox-custom input[type=checkbox]:disabled+label:before,fieldset[disabled] .checkbox-custom input[type=checkbox]+label:before{
cursor:default;
opacity:.4;
}
.radio-custom.radio-inline{
padding-left:0;
}
.radio-custom input[type=radio]{
opacity:0;
position:absolute;
margin: 0px;
}
.radio-custom input[type=radio]+label:before{
border-radius:50%;
content:'';
background:#fff;
border: 1px solid #e5e7e9;
display:inline-block;
vertical-align:top;
position: absolute;
top: 0px;
left: 0px;
width: 18px;
height: 18px;
padding:2px;
margin-right:10px;
text-align:center;
box-shadow:inset 0 0 0 8px #fff;
-webkit-transition:box-shadow .1s ease-in-out;
-o-transition:box-shadow .1s ease-in-out;
transition:box-shadow .1s ease-in-out;
box-sizing: border-box;
}
.radio-custom input[type=radio]:checked+label:before{
background: #000;
box-shadow:inset 0 0 0 3px #fff;
}
/*
.radio-custom input[type=radio]:focus+label:before{
box-shadow:inset 0 0 0 3px #fff;
}*/
.radio-custom input[type=radio].disabled+label:before,.radio-custom input[type=radio]:disabled+label:before,fieldset[disabled] .radio-custom input[type=radio]+label:before{
cursor:default;
opacity:.4;
}
/*-------------------- file upload --------------------*/
.form-t{
margin-bottom: 15px;
font-size: 20px;
width: 100%;
box-sizing: border-box;
}
.field1-primary{
float: left;
width: calc(100% - 130px);
}
.fileUpload {
float: left;
width: 120px;
position: relative;
overflow: hidden;
margin: 0px 0px 22px 10px;
padding: 12px 26px;
border-radius: 30px;
border: none;
background: #afb7be;
color: #fff;
font-size: 14px;
font-weight: 500;
cursor: pointer;
text-align: center;
box-sizing: border-box;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-o-transition: all .4s ease;
-ms-transition: all .4s ease;
transition: all .4s ease;
}
.fileUpload:hover{
background: #222;
color: #fff;
}
.fileUpload input.upload {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
height:60px;
}
/* sitemap ---------------------------------------------------------------*/
.sitemap ul {
padding: 0px;
margin: 0px;
list-style-type: none;
}
.sitemap ul ul, .sitemap ul ul ul, .sitemap ul ul ul ul {
padding: 10px 0px 10px 15px;
margin: 10px 0px 10px 20px;
border-left: 1px solid #C0C0C0;
}
.sitemap ul li {
padding: 6px 0px;
}
.sitemap a {
color: #000;
}
.sitemap a:hover {
color: #ecb419;
}
/* error page ---------------------------------------------------------------*/
i.fa-face-confused, i.fa-meh-o{
margin-right: 20px;
font-size: 70px;
}
.error-page{
background: #FBEEED;
border: 1px solid #F7D8DD;
padding: 20px 15px;
color: #d9534f;
}
.error-page h6{
margin-bottom: 13px;
color: #d9534f;
font-size: 22px;
}
.error-page p{
margin: 0px;
padding: 0px;
}
/* search results ---------------------------------------------------------------*/
.heading-serach{
color: #ecb419;
font-size: 28px;
margin-bottom: 30px;
}
.search-result-wrap{
border: 1px solid #ebebeb;
padding: 10px 30px;
}
.search-result{
padding: 25px 0px;
border-bottom: 1px solid #f1f1f1;
}
.search-result:last-child{
border-bottom: none;
}
.search-result h4{
color: #000;
font-size: 18px;
margin-bottom: 8px;
font-weight: 600;
}
.search-result h4 a{
color: #000;
background-image: linear-gradient(#000, #000), linear-gradient(#000, #000);
display: inline;
background-size: 0% 1px, 0 1px;
background-position: 100% 100%, 0 100%;
background-repeat: no-repeat;
transition: background-size 0.4s linear;
}
.search-result h4 a:hover{
background-size: 0 1px, 100% 1px;
}
.search-result .breadcrumb{
padding: 0px !important;
margin: 0px !important;
}
.search-result .breadcrumb a{
color: #9f9f9f;
}
.search-result .breadcrumb a:hover{
color: #000;
}
/*----------------------------------------- FAQ page -----------------------------------------*/
.accordion{
margin-bottom: 25px;
}
.a-btn {
width: 100%;
margin: 0 auto 25px;
cursor: pointer;
box-sizing: border-box;
}
.a-btn h3{
font-size: 22px;
padding: 17px 50px 17px 0px;
position: relative;
border-bottom: 2px solid #222;
text-transform: none;
box-sizing: border-box;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-o-transition: all .4s ease;
-ms-transition: all .4s ease;
transition: all .4s ease;
}
.a-btn h3:before{
content: '';
position: absolute;
top: 50%;
right: 0px;
width: 20px;
height: 2px;
background: #bbb;
margin-top: -1px;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-o-transition: all .4s ease;
-ms-transition: all .4s ease;
transition: all .4s ease;
}
.a-btn h3:after{
content: '';
position: absolute;
top: 50%;
right: 9px;
width: 2px;
height: 20px;
background: #bbb;
margin-top: -10px;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-o-transition: all .4s ease;
-ms-transition: all .4s ease;
transition: all .4s ease;
}
.a-btn h3.selected:after{
opacity: 0;
visibility: hidden;
}
.a-btn h3:hover, .a-btn h3.selected{
color: #ecb419;
}
.a-content {
height: 0px;
width: 100%;
margin: 0 auto;
overflow:hidden;
position: relative;
}
.a-content-inner {
padding: 0px 50px 10px 0px;
}
.a-content-inner h6{
text-transform: none;
margin-bottom: 10px;
}
.open {
height: auto;
}
/*-------------------------------- alerts ------------------------------*/
.alert {
border-radius: 0;
-webkit-border-radius: 0;
box-shadow: 0 1px 2px rgba(0,0,0,0.11);
display: table;
width: 100%;
padding: 15px;
margin-bottom: 20px;
border: 1px solid transparent;
border-radius: 4px;
}
.alert-success {
color: #3c763d;
background-color: #dff0d8;
border-color: #d6e9c6;
}
.alert-white {
background-image: linear-gradient(to bottom, #fff, #f9f9f9);
border-top-color: #d8d8d8;
border-bottom-color: #bdbdbd;
border-left-color: #cacaca;
border-right-color: #cacaca;
color: #404040;
padding-left: 61px;
position: relative;
}
.alert-white.rounded {
border-radius: 3px;
-webkit-border-radius: 3px;
}
.alert-white .icon {
text-align: center;
width: 45px;
height: 100%;
position: absolute;
top: 0;
left: 0;
border: 1px solid #bdbdbd;
}
.alert-white.rounded .icon {
border-radius: 3px 0 0 3px;
-webkit-border-radius: 3px 0 0 3px;
}
.alert-white.alert-success .icon, .alert-white.alert-success .icon::after {
border-color: #54a754;
background: #60c060;
}
.alert-white .icon i {
font-size: 20px;
color: #fff;
left: 12px;
margin-top: -10px;
position: absolute;
top: 50%;
}
/*-------------------- validate error --------------------*/
.error-messages{
position: absolute;
top: calc(100% - 10px);
left: 0px;
max-width: 100%;
z-index: 10;
background: #fff;
border-radius: 5px;
border: 1px solid #808080;
padding: 8px 10px;
box-sizing: border-box;
-webkit-box-shadow: 0px 3px 8px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 3px 8px 0px rgba(0,0,0,0.3);
box-shadow: 0px 3px 8px 0px rgba(0,0,0,0.3);
}
.error-messages:before, .error-messages:after {
content: '';
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid #808080;
position: absolute;
top: -8px;
left: 10px;
z-index: 1;
}
.error-messages:after{
border-bottom: 8px solid #fff;
top: -7px;
z-index: 2;
}
.validate-error {
display: flex;
align-items: center;
margin-bottom: 7px;
font-size: 13px;
color: #333;
font-weight: 500;
}
.validate-error:last-child{
margin-bottom: 0px;
}
.validate-error i{
color: #D8000C;
font-size: 24px;
margin-right: 8px;
}
.input-place.jq-validate-error,
.checkbox-custom.jq-validate-error input[type="checkbox"] + label::before
{
border:1px solid red;
}
.checkbox-custom .error-messages, .radio-custom .error-messages{
top: 30px;
}
.display-none {
display:none;
}
/*--------------------- loading spinner ---------------------*/
.spinner{
display:none;
position: fixed;
top:0px;
left:0px;
width:100%;
height:100%;
background: rgba(255,255,255,0.8);
z-index: 900000;
}
body.loading .spinner{
display: block;
}
.mesh-loader {
overflow: hidden;
height: 100%;
width: 100%;
}
.mesh-loader .circle {
width: 18px;
height: 18px;
position: absolute;
background: rgba(0,0,0,0.8);
border-radius: 50%;
margin: -9px;
-webkit-animation: mesh 3s ease-in-out infinite;
animation: mesh 3s ease-in-out infinite -1.5s;
}
.mesh-loader > div .circle:last-child {
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
.mesh-loader > div {
position: absolute;
top: 50%;
left: 50%;
}
.mesh-loader > div:last-child {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
@-webkit-keyframes mesh {
0% {
-webkit-transform-origin: 50% -100%;
transform-origin: 50% -100%;
-webkit-transform: rotate(0);
transform: rotate(0);
}
50% {
-webkit-transform-origin: 50% -100%;
transform-origin: 50% -100%;
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
50.00001% {
-webkit-transform-origin: 50% 200%;
transform-origin: 50% 200%;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform-origin: 50% 200%;
transform-origin: 50% 200%;
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes mesh {
0% {
-webkit-transform-origin: 50% -100%;
transform-origin: 50% -100%;
-webkit-transform: rotate(0);
transform: rotate(0);
}
50% {
-webkit-transform-origin: 50% -100%;
transform-origin: 50% -100%;
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
50.00001% {
-webkit-transform-origin: 50% 200%;
transform-origin: 50% 200%;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform-origin: 50% 200%;
transform-origin: 50% 200%;
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
/*---------------------------- cookies ------------------------------*/
.cookies-wrapper{
position: fixed;
bottom: 15px;
left: 20px;
right: 20px;
background: #fff;
padding: 20px;
border-radius: 10px;
box-sizing: border-box;
z-index: 99900;
-webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.2);
box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.2);
animation-duration:0.8s;
-webkit-animation-duration:0.8s;
-moz-animation-duration:0.8s;
-o-animation-duration:0.8s;
-webkit-animation-name:slideUp;
animation-name:slideUp
}
.cookies-wrapper.top{
bottom: auto;
top: 15px;
}
.cookies-wrapper.dark{
background: #222;
color: rgba(255,255,255,0.6);
}
.cookies-wrapper.dark a{
color: #fff;
}
.cookies-wrapper.cookie-hidden{
display: none !important;
}
.cookie-text{
float: left;
width: calc(100% - 170px);
padding: 10px 0px;
box-sizing: border-box;
}
.cookies-wrapper .btn{
float: right;
display: block;
margin-top: 0px;
width: 150px;
min-width: inherit;
cursor: pointer;
}
@-webkit-keyframes slideUp {
0% {
-webkit-transform:translateY(66px);
transform:translateY(66px)
}
100% {
-webkit-transform:translateY(0);
transform:translateY(0)
}
}
@keyframes slideUp {
0% {
-webkit-transform:translateY(66px);
-ms-transform:translateY(66px);
transform:translateY(66px)
}
100% {
-webkit-transform:translateY(0);
-ms-transform:translateY(0);
transform:translateY(0)
}
}
.not-show{
display:none !important;
}
.coupon-qrcode{
/*float:left;
width: 40%;*/
padding-top: 25px;
text-align: center;
}
.coupon-barcode{
/* float:right;
width: 60%; */
padding-bottom: 25px;
text-align: center;
}
.your-coupons-btn{
display:none;
}
.your-coupons.active{
display:block !important;
}
.jackpot.active{
top:0;
bottom:auto;
}
/*-------------------*/
.qr-check.flex-modules{
overflow-y: auto;
}
.qr-check .main{
padding: 30px;
}
.qr-check .popup-content{
padding: 0px !important;
}
.qr-check h2{
color: #fff;
}
.qr-check .draws-information{
color: #fff;
font-weight: 600;
}
.qr-check .draws-information strong{
font-weight: bold;
font-size: 20px;
}
.barcode-wrap{
display: flex;
justify-content: center;
text-align: center;
margin-top: 15px;
box-sizing: border-box;
}
.barcode-wrap .barcode{
background: #fff;
padding: 10px;
}
.disabled-btn{
opacity:0.5;
pointer-events: none;
}
/*media queries height ----------------------------------------------------------*/
@media only screen and (max-height: 1072px) {
.coupons-list li{font-size: 17px;}
.coupons-list ul{height: 297px;}
.program-table li{font-size: 22px; height: 41px;}
.match-date, .match-num{font-size: 20px;}
.one-coupon li{height: 41px;}
.program-table li:first-child{font-size: 28px; height: 48px;}
.program-table li:first-child .match-date{font-size: 28px;}
.program-table li:first-child .match-home:after, .program-table li:first-child .match-away:after, .program-table li:first-child .match-date:after{border-top-width: 48px;}
.one-coupon li:first-child{height: 48px; font-size: 44px;}
.b-wrap{height: 70px; font-size: 36px;}
.b-wrap:before{height: 70px;}
.bottom-bgr{height: 180px;}
.bottom-bgr:before{height: 180px; left: 462px; right: 380px;}
.balance-wrap{height: 90px; padding: 0px 280px;}
.menu-wrap{height: 90px; padding: 0 90px 3px;}
.balance-wrap > div{font-size: 27px;}
.balance-sum{width: 200px; height: 59px; margin-left: 20px;}
.menu-btn:before, .menu-btn:after{width: 90px; height: 90px;}
.menu-btn{height: 66px; padding-left: 78px; font-size: 24px; margin-right: 30px;}
.yellow-btn, .green-btn, .blue-btn{height: 66px; width: 195px; font-size: 24px;}
.yellow-btn:before, .yellow-btn:after, .green-btn:before, .green-btn:after, .blue-btn:before, .blue-btn:after{width: 218px; height: 90px;}
.buy-btn:before, .buy-btn:after{width: 274px; height: 170px; top: -22px; left: -23px;}
.buy-btn{width: 227px; height: 122px; font-size: 42px; top: -18px; left: calc(50% - 113px);}
.win{height: 32px; font-size: 20px;}
}
@media only screen and (max-height: 1040px) {
.coupons-list ul{height: 260px;}
}
/*media queries width ----------------------------------------------------------*/
@media only screen and (max-width: 1680px) {
.menu-wrap{padding-left: 80px; padding-right: 80px;}
.coupons-list li{font-size: 16px;}
}
@media only screen and (max-width: 1600px) {
.menu-btn span{display: none;}
.menu-btn{padding-left: 66px;}
.balance-wrap{padding: 0 275px;}
.balance-wrap > div{font-size: 27px;}
.b-wrap{font-size: 32px;}
.jackpot{padding: 22px 0px;}
.jackpot:before{width: 180px; height: 110px; top: -10px;}
.jackpot-sum{font-size: 30px; line-height: 38px; margin-left: 100px;}
.coupons-list ul{height: 330px;}
.draws-submenu ul li a{font-size: 24px; padding: 9px 20px;}
.draws-submenu ul{max-height: 520px;}
.program-table li, .one-coupon li{font-size: 21px;}
.program-table li:first-child, .program-table li:first-child .match-date{font-size: 26px;}
.one-coupon{min-width: 130px;}
}
@media only screen and (max-height: 960px) {
.top{margin-bottom: 13px;}
.program-table li, .one-coupon li{height: 37px;}
.coupons-list ul{height: 230px;}
.win{height: 28px; font-size: 18px;}
}
@media only screen and (max-height: 920px) {
.coupons-list ul{height: 200px;}
}
@media only screen and (max-height: 900px) {
.top{margin-bottom: 13px;}
.program-table li, .one-coupon li{height: 34px;}
.coupons-list ul{height: 158px;}
.match-date, .match-num{font-size: 19px;}
}
@media only screen and (max-width: 1550px) {
.coupons{width: calc(28% - 15px);}
.program{width: 72%;}
.yellow-btn, .green-btn, .blue-btn{margin-left: 15px;}
.coupons-list li{padding: 6px 10px; font-size: 15px;}
}
@media only screen and (max-width: 1440px) {
.jackpot-sum{font-size: 26px; border: 2px solid #ffff8c; line-height: 36px; margin-left: 50px;}
.jackpot{padding: 17px 0px;}
.jackpot:before{width: 160px; height: 98px;}
.your-coupons-title{font-size: 20px;}
.coupons-list li{padding: 5px 10px; font-size: 15px;}
.coupons-list ul{height: 300px;}
.b-wrap{font-size: 28px; height: 66px;}
.b-wrap:before{height: 66px;}
.draws-submenu ul li a{font-size: 20px;}
.draws-submenu ul{max-height: 460px;}
.program-table li{height: 36px;}
.program-table li, .one-coupon li{font-size: 20px;}
.match-date, .match-num{font-size: 16px;}
.match-num{width: 38px;}
.match-result{width: 12%;}
.match-home, .match-away, .match-win-results{width: 27%;}
.match-date{width: calc(34% - 53px);}
.program-table li:first-child, .program-table li:first-child .match-date{font-size: 23px;}
.program-table li:first-child{height: 42px;}
.program-table li:first-child .match-home:after, .program-table li:first-child .match-away:after, .program-table li:first-child .match-date:after{border-top-width: 42px;}
.one-coupon li:first-child{height: 42px; font-size: 38px;}
.one-coupon li{height: 36px;}
.coupons{width: calc(27% - 10px);}
.one-coupon{padding: 0 3px; min-width: 130px;}
.program{width: 73%;}
.bottom{margin-bottom: 25px;}
.bottom-bgr{height: 160px;}
.bottom-bgr:before{height: 160px; left: 460px; right: 335px;}
.balance-wrap{height: 80px; padding: 0 245px;}
.menu-wrap{height: 80px;}
.balance-wrap > div{font-size: 22px;}
.balance-sum{width: 180px; height: 50px; padding-bottom: 0px;}
.menu-btn:before, .menu-btn:after{width: 76px; height: 76px; top: -8px; left: -10px;}
.menu-btn{padding-left: 56px; height: 56px;}
.yellow-btn, .green-btn, .blue-btn{height: 56px; width: 165px; font-size: 22px;}
.yellow-btn:before, .yellow-btn:after, .green-btn:before, .green-btn:after, .blue-btn:before, .blue-btn:after{width: 184px; height: 76px; top: -8px; left: -10px;}
.buy-btn:before, .buy-btn:after{width: 234px; height: 145px; top: -19px; left: -20px;}
.buy-btn{font-size: 34px; width: 193px; height: 104px; top: -14px; left: calc(50% - 96px);}
.win{height: 28px; font-size: 18px; min-width: 140px;}
.with-results .program-table .match-home, .with-results .program-table .match-away, .with-results .program-table .match-win-results{width: 20%;}
.with-results .program-table .match-date{width: calc(28% - 58px);}
table{font-size: 18px;}
table th{font-size: 22px;}
h1{font-size: 34px;}
h2{font-size: 32px;}
h3{font-size: 28px;}
h4{font-size: 24px;}
h5{font-size: 20px;}
h6{font-size: 18px;}
.prizes-date{font-size: 18px;}
table tr.total td{font-size: 22px;}
}
@media screen and (max-height: 960px) and (max-width: 1440px) {
.coupons-list ul{height: 270px;}
}
@media screen and (max-height: 890px) and (max-width: 1440px) {
.coupons-list ul{height: 240px;}
.program-table li, .one-coupon li{height: 34px;}
}
@media only screen and (max-height: 865px) {
.b-wrap{height: 56px; font-size: 28px;}
.b-wrap:before{height: 56px;}
.coupons-list ul{height: 136px;}
.program-table li:first-child, .program-table li:first-child .match-date{height: 40px; font-size: 24px;}
.program-table li:first-child .match-home:after, .program-table li:first-child .match-away:after, .program-table li:first-child .match-date:after{border-top-width: 40px;}
.program-table li, .one-coupon li{font-size: 20px;}
.match-date, .match-num{font-size: 18px;}
.one-coupon li:first-child{height: 40px; font-size: 36px;}
.win{height: 25px; font-size: 17px;}
}
@media only screen and (max-width: 1366px) {
.menu-btn{margin-right: 25px;}
.menu-wrap{padding-left: 70px; padding-right: 70px;}
.coupons-list li{font-size: 14px;}
.one-coupon{min-width: 115px;}
}
@media screen and (max-height: 850px){
.coupons-list ul{height: 203px;}
.program-table li, .one-coupon li{height: 30px; font-size: 18px;}
table th{font-size: 24px;}
h1{font-size: 42px;}
.prizes .title{padding: 5px 15px;}
.bottom { margin-bottom: 20px;}
@media screen and (max-height: 780px){
.coupons-list ul{height: 128px;}
.program-table li, .one-coupon li{height: 25px; font-size: 17px;}
.win{height: 22px; font-size: 15px; min-width: 136px;}
table td{padding: 8px 15px;}
table{font-size: 21px;}
}
@media screen and (max-height: 850px) and (min-width: 1440px) {
.coupons-list ul{height: 100px;}
}
@media screen and (max-height: 820px) and (min-width: 1440px){
.coupons-list ul{height: 90px;}
.jackpot{padding: 20px 0px;}
.jackpot:before{width: 180px; height: 110px; top: -9px;}
.jackpot-sum{margin-left: 85px; font-size: 30px; line-height: 40px;}
}
@media screen and (max-height: 780px) and (min-width: 1440px){
.coupons-list ul{height: 90px;}
.flex-box.w-25{max-width: 430px;}
}
@media only screen and (max-width: 1280px) {
.b-wrap{height: 50px; font-size: 22px;}
.b-wrap:before{height: 50px; left: 70px; right: 70px;}
.draws-submenu ul li a{font-size: 16px;}
.draws-submenu ul{max-height: 328px;}
.square-num{padding: 3px;}
.coupons-list li{padding: 6px 10px; font-size: 13px;}
.jackpot-sum{font-size: 24px; padding: 3px 15px;}
.open-date, .close-date{padding: 0 10px;}
.menu-btn.print-btn{margin-left: 0px;}
.balance-sum{width: 166px; height: 47px;}
.menu-btn{margin-right: 22px;}
.match-date, .match-num{font-size: 14px;}
}
@media screen and (max-height: 740px){
.coupons-list ul{height: 120px;}
.program-table li, .one-coupon li{height: 24px; font-size: 15px;}
.program-table li:first-child, .program-table li:first-child .match-date{height: 30px; font-size: 20px;}
.program-table li:first-child .match-home:after, .program-table li:first-child .match-away:after, .program-table li:first-child .match-date:after{border-top-width: 30px;}
.one-coupon li:first-child{height: 30px; font-size: 28px;}
.top{margin-bottom: 5px;}
.bottom{margin-bottom: 13px;}
.one-coupon{min-width: 100px;}
.match-date, .match-num{font-size: 14px;}
.win{height: 18px; font-size: 14px;}
.prizes-date{padding: 8px 15px; font-size: 21px;}
table th{font-size: 22px; padding: 8px 15px;}
table{font-size: 20px;}
h1{font-size: 38px;}
.prizes .title{padding: 3px 15px;}
}
@media screen and (max-height: 740px) and (min-width: 1440px){
.coupons-list ul{height: 60px;}
}
@media only screen and (max-width: 1200px) {
.flex-box.w-75{width: 72%;}
.flex-box.w-25{width: 28%;}
.one-coupon{min-width: 120px;}
.coupons{width: calc(18% - 10px);}
.program{width: 82%;}
.balance-wrap{padding: 0px 235px;}
.balance-sum{margin-left: 10px;}
.win{height: 26px; font-size: 16px; min-width: 115px;}
.balance-wrap > div{font-size: 20px;}
.yellow-btn, .green-btn, .blue-btn{font-size: 20px;}
}
@media screen and (max-height: 780px) and (max-width: 1200px) {
.win{height: 18px; font-size: 14px;}
}
@media only screen and (max-width: 1100px) {
.bottom-bgr{background: url(../images/bottom_left_small.png) no-repeat left top, url(../images/bottom_right_small.png) no-repeat right top; background-size: contain; height: 140px;}
.bottom-bgr:before{background: url('../images/bottom_middle_small.png') repeat-x left top; background-size: contain; left: 298px; right: 208px; height: 140px;}
.balance-wrap{padding: 0 120px; height: 70px;}
.menu-wrap{height: 70px; padding-right: 60px; padding-left: 60px;}
.menu-btn:before, .menu-btn:after{width: 66px; height: 66px; top: -7px; left: -9px;}
.menu-btn{height: 49px; padding-left: 49px; margin-right: 20px;}
.yellow-btn:before, .yellow-btn:after, .green-btn:before, .green-btn:after, .blue-btn:before, .blue-btn:after{width: 160px; height: 66px; top: -7px; left: -8px;}
.yellow-btn, .green-btn, .blue-btn{height: 49px; width: 144px; font-size: 20px;}
.buy-btn:before, .buy-btn:after{width: 193px; height: 120px; top: -15px; left: -16px;}
.buy-btn{width: 160px; height: 87px; font-size: 30px; top: -10px; left: calc(50% - 80px);}
.balance-sum{width: 160px; padding-bottom: 3px;}
.top{margin-bottom: 10px;}
.program-table li, .one-coupon li{font-size: 17px;}
.match-date, .match-num{font-size: 15px;}
.one-coupon li{padding: 0 3px;}
.b-wrap{font-size: 22px;}
.draws-wrap{width: 24%;}
.program-table li:first-child, .program-table li:first-child .match-date{font-size: 20px; text-shadow: 1px 1px 1px rgba(0,0,0,0.5); height: 35px;}
.program-table li:first-child .match-home:after, .program-table li:first-child .match-away:after, .program-table li:first-child .match-date:after{border-top-width: 35px;}
.one-coupon li:first-child{font-size: 30px; height: 35px;}
.one-coupon{min-width: 110px;}
.match-date{padding: 0 10px;}
.match-home, .match-away, .match-win-results{padding: 0 10px;}
.program-table li:first-child .match-home, .program-table li:first-child .match-away{padding-left: 10px;}
.program-table li:first-child .match-date{padding-right: 10px; line-height: normal;}
.win{font-size: 14px; min-width: 100px;}
.qr-check .main{padding: 10px;}
.popup-content table{font-size: 16px;}
}
@media only screen and (max-width: 1024px) {
.flex-box.w-25{width: 30%;}
.flex-box.w-75{width: 70%;}
.coupons{width: calc(20% - 10px);}
.program{width: 80%;}
.match-num{width: 34px;}
.match-date{width: calc(34% - 49px);}
.match-date, .match-num{font-size: 14px;}
.b-wrap{font-size: 19px; height: 42px;}
.b-wrap:before{height: 42px; left: 40px; right: 40px;}
.jackpot-sum{font-size: 22px;}
.with-results .program-table .match-date{width: calc(28% - 54px);}
.one-coupon{min-width: 98px;}
.program-table li, .one-coupon li{font-size: 16px;}
}
@media screen and (max-height: 630px) and (max-width: 970px) {
.coupons-list ul{height: 93px;}
.program-table li, .one-coupon li{height: 24px; font-size: 15px;}
.program-table li:first-child, .program-table li:first-child .match-date{height: 30px;}
.program-table li:first-child .match-home:after, .program-table li:first-child .match-away:after, .program-table li:first-child .match-date:after{border-top-width: 30px;}
.one-coupon li:first-child{height: 30px; font-size: 28px;}
.top{margin-bottom: 5px;}
.bottom{margin-bottom: 10px;}
}
@media only screen and (max-width: 940px) {
.flex-box.w-25{width: 100%; max-width: none; display: flex; flex-wrap: wrap; justify-content: center; position: relative;}
.flex-box.w-75{width: 100%;}
.logo a img{max-width: 250px;}
.your-coupons{display: none;}
.main .your-coupons{display: block;}
.jackpot{position: absolute; width: calc(50% - 135px); top: 0px; left: 5px; bottom: 0px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;}
.jackpot:before{display: none;}
.jackpot-sum{margin-left: 0px; position: relative; margin-top: 70px; width: 100%; max-width: 200px; text-align: center; padding: 1px 10px;}
.jackpot-sum:before {content: ''; position: absolute; bottom: calc(100% - 10px); left: calc(50% - 80px); width: 160px; height: 98px; background: url(../images/jackpot.png) no-repeat; background-size: cover;}
.top{position: absolute; width: calc(50% - 145px); margin: 0px; top: 0px; right: 10px; flex-direction: column;}
.b-wrap{width: 100% !important; max-width: 200px; margin-top: 10px; font-size: 18px;}
.open-date, .close-date{width: 100%; padding: 0px; text-align: center;}
.b-wrap.opening-dates-wrap{height: 88px; padding: 14px 0px; background: none;}
.b-wrap.opening-dates-wrap:before{display: none;}
.bottom{padding: 0 5px;}
.flex-modules{padding: 10px 5px 0px;}
.yellow-btn, .green-btn, .blue-btn{margin-left: 5px;}
.menu-wrap{padding-left: 50px; padding-right: 50px;}
.balance-wrap{width: 50%; height: 70px; min-width: 340px; padding: 0px 0px 0px 95px; justify-content: flex-start;}
.balance-wrap > div{flex-wrap: wrap; flex-direction: column; font-size: 12px; margin-right: 10px; font-weight: 600;}
.balance-sum{margin-left: 0px; width: 110px; height: 31px; font-weight: bold; font-size: 14px;}
.balance{margin-left: inherit;}
a.your-coupons-btn{display: flex; margin-left: 0px;}
.qr-check .top{width: auto; position: relative; top: auto; right: auto; margin-bottom: 10px; flex-direction: row; height: auto;}
.qr-check .b-wrap.opening-dates-wrap{height: auto; width: calc(100% - 205px) !important; max-width: none; margin-top: 0px; padding: 0px;}
.qr-check .b-wrap{margin-top: 0px;}
}
@media screen and (max-height: 930px) and (max-width: 940px) {
.coupons-list ul{height: 240px;}
.program-table li, .one-coupon li{height: 30px; font-size: 14px;}
}
@media screen and (max-height: 850px) and (max-width: 940px) {
.logo a img{max-width: 195px;}
.jackpot{padding: 10px 0px;}
.jackpot-sum{margin-top: 60px; line-height: 30px; font-size: 18px;}
.jackpot-sum:before{width: 140px; height: 85px; left: calc(50% - 70px); bottom: calc(100% - 7px);}
.b-wrap{margin-top: 0px;}
.b-wrap.opening-dates-wrap{height: 82px;}
.program-table li, .one-coupon li{height: 27px;}
}
@media only screen and (max-width: 900px) {
a.your-coupons-btn{bottom: calc(100% + 7px);}
.balance-wrap{height: 60px;}
.menu-btn{margin-right: 15px; height: 42px; padding-left: 42px;}
.menu-btn:before, .menu-btn:after{width: 56px; height: 56px; top: -6px; left: -7px;}
.yellow-btn:before, .yellow-btn:after, .green-btn:before, .green-btn:after, .blue-btn:before, .blue-btn:after{width: 136px; height: 56px; top: -6px;}
.yellow-btn, .green-btn, .blue-btn{height: 42px; width: 122px; font-size: 17px;}
.bottom-bgr{height: 120px;}
.bottom-bgr:before{height: 120px; left: 256px; right: 176px;}
.menu-wrap{height: 60px;}
.buy-btn:before, .buy-btn:after{width: 170px; height: 105px; top: -13px; left: -14px;}
.buy-btn{width: 140px; height: 76px; font-size: 26px; left: calc(50% - 70px);}
.popup-content table th{font-size: 16px;}
.popup-content table{font-size: 15px;}
.coupon-qrcode img{max-width: 100px;}
.barcode-text{font-size: 13px;}
.tr-right{width: 40%;}
.download1{width: 60%;}
}
@media only screen and (max-width: 780px) {
.bottom{margin-bottom: 10px;}
.bottom-bgr{height: 140px;}
.bottom-bgr:before{height: 140px;}
.menu-wrap{height: 70px;}
.balance-wrap{height: 70px;}
a.your-coupons-btn{bottom: calc(100% + 12px); right: 98px;}
/*a.prizes-btn{position: absolute; right: 230px; bottom: calc(100% + 12px); margin-left: 0px;}*/
.menu-btn{margin-right: 12px;}
.menu-btn.print-btn{margin-left: auto;}
.buy-btn:before, .buy-btn:after{width: 160px; height: 99px; top: -13px; left: -14px;}
.buy-btn{top: -2px; width: 132px; height: 71px; font-size: 24px;}
}
@media only screen and (max-width: 740px) {
.jackpot-sum{max-width: 180px;}
.b-wrap{max-width: 180px; font-size: 17px;}
.draws-submenu ul li a{font-size: 14px; padding: 8px 10px;}
.draws-submenu ul{max-height: 252px;}
table{font-size: 16px;}
table th{font-size: 18px;}
h1{font-size: 28px;}
h2{font-size: 28px;}
h3{font-size: 24px;}
h4{font-size: 22px;}
h5{font-size: 20px;}
h6{font-size: 18px;}
.prizes-date{font-size: 16px;}
table tr.total td{font-size: 18px;}
.draws-information{font-size: 14px;}
.draws-information > div{margin-bottom: 0px;}
/* responsive table */
table.responsive-table{border: 1px solid #ebebeb;}
table.responsive-table tr{border-top: 1px solid #ebebeb;}
table.responsive-table th {display: none;}
table.responsive-table td{display: flex; align-items: center; text-align: left; border: none; background: #fff; padding: 5px 0px; font-size: 14px;}
table.responsive-table td:before {display: flex;}
table.responsive-table tr:nth-child(odd) td{background: #f6f6f6;}
table.responsive-table tr td:first-child{padding-top: 15px;}
table.responsive-table tr td:last-child{padding-bottom: 20px;}
/*cookies*/
.cookie-text{float: none; width: auto; text-align: center;}
.cookies-wrapper .btn{float: none; margin: 0px auto;}
}
@media only screen and (max-width: 700px) {
.bottom-bgr{margin-right: -60px; margin-left: -60px;}
.menu-wrap{padding-left: 65px; padding-right: 65px;}
.match-date{white-space: normal; line-height: 13px;}
.match-date, .match-num{font-size: 13px;}
.program-table li:first-child, .program-table li:first-child .match-date{font-size: 17px; padding-bottom: 0px;}
}
@media only screen and (max-width: 640px) {
.flex-modules{padding-top: 5px;}
.match-win-results{width: 36%;}
.program{width: 98%;}
.coupons{width: 1%;}
.program-table li:first-child, .program-table li:first-child .match-date{height: 30px;}
.program-table li:first-child .match-home:after, .program-table li:first-child .match-away:after, .program-table li:first-child .match-date:after{border-top-width: 30px;}
.one-coupon li:first-child{height: 30px; font-size: 25px;}
.b-wrap{max-width: 160px; height: 42px; margin-top: 0px;}
.b-wrap:before{height: 42px;}
.b-wrap.opening-dates-wrap{height: auto; font-size: 15px; padding: 0px; flex-direction: column;}
.jackpot{width: calc(50% - 115px);}
.jackpot-sum{font-size: 18px; max-width: 160px; line-height: 30px; margin-top: 64px;}
.jackpot-sum:before{width: 140px; height: 85px; left: calc(50% - 70px); bottom: calc(100% - 8px);}
.logo a img{max-width: 200px;}
.top{width: calc(50% - 120px); height: 130px; top: 10px; justify-content: space-around;}
h1{font-size: 26px;}
h2{font-size: 26px;}
.title{margin-bottom: 20px;}
.win{font-size: 12px; padding: 0px 10px 1px; min-width: 80px;}
.match-win-results{padding: 0 5px; width: 100px !important;}
.program.with-results .program-table li{width: calc(100% + 100px);}
.with-results .program-table .match-home, .with-results .program-table .match-away{width: 22%;}
.with-results .program-table .match-date{width: calc(28% - 41px);}
.qr-check .draws-information strong{font-size: 17px;}
.download1{width: 100%; margin-bottom: 3px;}
.tr-right{width: 100%; padding-left: 0px;}
}
@media screen and (max-height: 750px) and (max-width: 640px) {
.logo a img{max-width: 180px;}
.jackpot{left: 0px; width: calc(50% - 95px); padding: 0px;}
.jackpot-sum{max-width: 125px; line-height: 26px; font-size: 14px; margin-top: 52px;}
.jackpot-sum:before{width: 120px; height: 73px; left: calc(50% - 60px);}
.top{right: 5px; top: 5px; height: 116px; width: calc(50% - 100px);}
.b-wrap{height: 36px; padding: 0px 5px 3px; font-size: 15px;}
.b-wrap.opening-dates-wrap{font-size: 14px;}
.b-wrap:before{height: 36px; left: 60px; right: 60px;}
}
@media screen and (max-height: 725px) and (max-width: 640px) {
.logo a img{max-width: 140px;}
.jackpot{width: calc(50% - 75px);}
.jackpot-sum{margin-top: 40px; font-size: 14px; line-height: 22px;}
.jackpot-sum:before{width: 90px; height: 55px; left: calc(50% - 45px); bottom: calc(100% - 5px);}
.top{width: calc(50% - 80px); height: 90px;}
.b-wrap.opening-dates-wrap{font-size: 11px;}
.b-wrap{height: 30px; font-size: 12px; padding: 0 5px 3px;}
.b-wrap:before{height: 30px; left: 50px; right: 50px;}
}
@media only screen and (max-width: 600px) {
.menu-btn:before, .menu-btn:after{width: 44px; height: 44px; top: -5px; left: -5px;}
.menu-btn{height: 33px; padding-left: 33px;}
.yellow-btn:before, .yellow-btn:after, .green-btn:before, .green-btn:after, .blue-btn:before, .blue-btn:after{height: 44px; width: 107px; top: -5px; left: -5px;}
.yellow-btn, .green-btn, .blue-btn{height: 33px; width: 96px; font-size: 14px;}
.balance-sum{height: 27px; width: 92px; padding-bottom: 2px;}
.balance-wrap > div{font-size: 11px;}
.bottom-bgr{height: 120px;}
.bottom-bgr:before{height: 120px; left: 232px; right: 150px;}
.balance-wrap{height: 60px; padding-left: 90px; min-width: 300px;}
.menu-wrap{height: 60px;}
.buy-btn:before, .buy-btn:after{width: 110px; height: 68px; top: -9px; left: -9px;}
.buy-btn{width: 91px; height: 49px; font-size: 17px; top: 4px; left: calc(50% - 45px);}
/*a.prizes-btn{right: 200px;}*/
a.your-coupons-btn{right: 92px;}
}
@media only screen and (max-width: 550px) {
.logo a img{max-width: 180px;}
.jackpot{left: 0px; width: calc(50% - 95px); padding: 0px;}
.jackpot-sum{max-width: 125px; line-height: 26px; font-size: 14px; margin-top: 52px;}
.jackpot-sum:before{width: 120px; height: 73px; left: calc(50% - 60px);}
.top{right: 5px; top: 5px; height: 116px; width: calc(50% - 100px);}
.b-wrap{height: 36px; padding-bottom: 3px; font-size: 15px;}
.b-wrap.opening-dates-wrap{font-size: 14px;}
.b-wrap:before{height: 36px; left: 60px; right: 60px;}
.match-num{width: 30px;}
.match-date{width: calc(34% - 45px); white-space: normal; font-size: 12px; line-height: 13px;}
.program-table li:first-child .match-date:after{border-right: 25px solid #db1f21;}
.program-table li:first-child .match-date:before{width: calc(100% - 25px);}
.program-table li:first-child .match-home:after, .program-table li:first-child .match-away:after{border-left: 25px solid #fff;}
.program-table li:first-child .match-home:before, .program-table li:first-child .match-away:before{width: calc(100% - 25px);}
.program-table li:first-child .match-home, .program-table li:first-child .match-away{padding-right: 25px;}
/*a.prizes-btn{right: 195px;}*/
.menu-btn{margin-right: 10px;}
.balance-sum{font-size: 12px;}
table {display: block; overflow-x: auto; white-space: nowrap; width: 100%; border: none;}
}
@media screen and (max-height: 725px) and (max-width: 550px) {
.logo a img{max-width: 140px;}
.jackpot{width: calc(50% - 75px);}
.jackpot-sum{margin-top: 40px; font-size: 14px; line-height: 22px;}
.jackpot-sum:before{width: 90px; height: 55px; left: calc(50% - 45px); bottom: calc(100% - 5px);}
.top{width: calc(50% - 80px); height: 90px;}
.b-wrap.opening-dates-wrap{font-size: 11px;}
.b-wrap{height: 30px; font-size: 12px; padding: 0 5px 3px;}
.b-wrap:before{height: 30px; left: 50px; right: 50px;}
}
@media only screen and (max-width: 500px) {
.program-table li:first-child, .program-table li:first-child .match-date{font-size: 16px;}
.flex-box{padding: 0px;}
.flex-box.w-25{margin-bottom: 10px;}
.win{height: 22px;}
.popup-content{padding-left: 1rem; padding-right: 1rem;}
.balance-wrap{padding-left: 85px;}
a.your-coupons-btn{right: 90px; font-size: 0px; height: 33px; width: 33px;}
a.your-coupons-btn:before, a.your-coupons-btn:after{width: 44px; height: 44px; top: -5px; left: -5px;}
a.your-coupons-btn:before{background: url(../images/coupons_btn.png) no-repeat center center; background-size: cover;}
a.your-coupons-btn:after{background: url(../images/coupons_btn_focus.png) no-repeat center center; background-size: cover;}
a.prizes-btn{font-size: 0px; height: 33px; width: 33px;}
a.prizes-btn:before, a.prizes-btn:after{width: 44px; height: 44px; top: -5px; left: -5px;}
a.prizes-btn:before{background: url(../images/prizes_btn.png) no-repeat center center; background-size: cover;}
a.prizes-btn:after{background: url(../images/prizes_btn_focus.png) no-repeat center center; background-size: cover;}
.draws-information > div{width: 100%;}
}
@media only screen and (max-width: 460px) {
.b-wrap.opening-dates-wrap{font-size: 13px;}
.program-table li:first-child .match-date{font-size: 15px; padding-right: 7px;}
.program-table li:first-child .match-home:after, .program-table li:first-child .match-away:after, .program-table li:first-child .match-date:after{border-top-width: 30px;}
.one-coupon li:first-child{height: 30px; font-size: 24px;}
.jackpot-sum{font-size: 15px; line-height: 23px; padding: 1px 5px;}
.b-wrap{font-size: 11px; height: 32px;}
.b-wrap:before{height: 32px; left: 30px; right: 30px;}
.match-result{font-size: 14px !important; padding: 3px; line-height: 24px; margin: 0 3px;}
.match-home, .match-away, .match-win-results{padding: 0 7px;}
.match-num{font-size: 13px;}
.match-date{width: calc(34% - 39px); font-size: 11px; line-height: 12px; padding: 0 7px; margin-left: 3px;}
.program-table li:first-child{margin-bottom: 3px; font-size: 15px; height: 30px;}
.program-table li:first-child .match-home, .program-table li:first-child .match-away{padding-left: 7px;}
.one-coupon li:first-child{margin-bottom: 3px;}
.match-win-results{margin-left: 3px; padding: 0px;}
.draws-submenu ul li a{font-size: 12px; padding: 6px 0px;}
.draws-submenu{border-radius: 10px;}
.draws-submenu ul{max-height: 180px;}
.with-results .program-table .match-result{width: 10%;}
.with-results .program-table .match-date{width: calc(28% - 30px);}
.with-results .program-table .match-home, .with-results .program-table .match-away{width: calc(29% - 50px);}
}
@media only screen and (max-width: 400px) {
.logo a img{max-width: 140px;}
.jackpot{width: calc(50% - 75px);}
.jackpot-sum{margin-top: 40px; font-size: 12px; line-height: 22px;}
.jackpot-sum:before{width: 90px; height: 55px; left: calc(50% - 45px); bottom: calc(100% - 5px);}
.top{width: calc(50% - 80px); height: 90px;}
.b-wrap.opening-dates-wrap{font-size: 11px;}
.b-wrap{height: 30px; font-size: 11px; padding: 0 5px 3px;}
.b-wrap:before{height: 30px; left: 50px; right: 50px;}
.program-table li:first-child{font-size: 14px;}
.square-num{padding: 3px 1px;}
.one-coupon li:first-child{font-size: 20px;}
.match-num{width: 26px; font-size: 12px;}
.match-date{width: calc(34% - 37px); font-size: 11px; line-height: 10px;}
.program-table li:first-child .match-date{font-size: 14px; padding-right: 5px;}
.program-table li:first-child .match-home, .program-table li:first-child .match-away{padding-left: 5px;}
.menu-btn{margin-right: 5px;}
.menu-wrap{padding-left: 60px; padding-right: 60px;}
.balance-wrap{padding-left: 80px;}
.buy-btn:before, .buy-btn:after{width: 96px; height: 60px; top: -8px; left: -8px;}
.buy-btn{width: 80px; height: 42px; font-size: 15px; top: 7px;}
.win{font-size: 11px; min-width: 73px;}
/*a.prizes-btn{right: 125px;}*/
a.your-coupons-btn{right: 86px;}
.draws-submenu ul{padding: 0 7px;}
.one-coupon{min-width: 94px;}
.qr-check .b-wrap.opening-dates-wrap{width: calc(100% - 165px) !important;}
}
@media screen and (max-height: 680px) and (max-width: 390px) {
.flex-box.w-25{margin-bottom: 5px;}
.program-table li, .one-coupon li{height: 25px; font-size: 13px;}
.program-table li:first-child, .program-table li:first-child .match-date{height: 25px;}
.program-table li:first-child .match-home:after, .program-table li:first-child .match-away:after, .program-table li:first-child .match-date:after{border-top-width: 25px;}
.one-coupon li:first-child{height: 25px;}
.one-coupon{min-width: 82px;}
}
@media only screen and (max-width: 360px) {
.match-result{font-size: 12px !important;}
.jackpot-sum{font-size: 12px; line-height: 20px;}
.buy-btn{left: calc(50% - 50px);}
.menu-btn:before, .menu-btn:after{width: 40px; height: 40px; top: -4px; left: -4px;}
.menu-btn{height: 30px; padding-left: 30px;}
.yellow-btn:before, .yellow-btn:after, .green-btn:before, .green-btn:after, .blue-btn:before, .blue-btn:after{height: 40px; width: 97px; top: -4px; left: -4px;}
.yellow-btn, .green-btn, .blue-btn{height: 30px; width: 88px; font-size: 13px;}
.balance-sum{width: 82px; height: 24px;}
.balance-wrap > div{margin-right: 5px;}
.balance-wrap{min-width: 255px;}
.match-date{padding: 0 3px;}
.b-wrap{padding: 0 0 3px;}
}
@media screen and (max-height: 640px) and (max-width: 360px) {
.bottom-bgr{height: 100px;}
.bottom-bgr:before{height: 100px; left: 213px; right: 140px;}
.balance-wrap{height: 50px;}
.menu-wrap{height: 50px;}
.buy-btn{top: 2px;}
/*a.prizes-btn{bottom: calc(100% + 6px);}*/
.bottom{margin-bottom: 5px;}
}
@media screen and (max-height: 610px) {
.content{min-height: 100vh; height: auto; overflow: inherit;}
}
@media print {
table, table th, table td{border: 1px solid #888; font-size: 18px;}
table th{font-size: 22px;}
.jq-print-btn{display: none;}
}