html{
font-family: 'Alegreya Sans', sans-serif;
}
body {
background-color: #FFFFFF;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' x2='0' y1='0' y2='100%25' gradientTransform='rotate(231,960,455)'%3E%3Cstop offset='0' stop-color='%23FFFFFF'/%3E%3Cstop offset='1' stop-color='%23A9D8EF'/%3E%3C/linearGradient%3E%3Cpattern patternUnits='userSpaceOnUse' id='b' width='548' height='456.7' x='0' y='0' viewBox='0 0 1080 900'%3E%3Cg fill-opacity='0.03'%3E%3Cpolygon fill='%23444' points='90 150 0 300 180 300'/%3E%3Cpolygon points='90 150 180 0 0 0'/%3E%3Cpolygon fill='%23AAA' points='270 150 360 0 180 0'/%3E%3Cpolygon fill='%23DDD' points='450 150 360 300 540 300'/%3E%3Cpolygon fill='%23999' points='450 150 540 0 360 0'/%3E%3Cpolygon points='630 150 540 300 720 300'/%3E%3Cpolygon fill='%23DDD' points='630 150 720 0 540 0'/%3E%3Cpolygon fill='%23444' points='810 150 720 300 900 300'/%3E%3Cpolygon fill='%23FFF' points='810 150 900 0 720 0'/%3E%3Cpolygon fill='%23DDD' points='990 150 900 300 1080 300'/%3E%3Cpolygon fill='%23444' points='990 150 1080 0 900 0'/%3E%3Cpolygon fill='%23DDD' points='90 450 0 600 180 600'/%3E%3Cpolygon points='90 450 180 300 0 300'/%3E%3Cpolygon fill='%23666' points='270 450 180 600 360 600'/%3E%3Cpolygon fill='%23AAA' points='270 450 360 300 180 300'/%3E%3Cpolygon fill='%23DDD' points='450 450 360 600 540 600'/%3E%3Cpolygon fill='%23999' points='450 450 540 300 360 300'/%3E%3Cpolygon fill='%23999' points='630 450 540 600 720 600'/%3E%3Cpolygon fill='%23FFF' points='630 450 720 300 540 300'/%3E%3Cpolygon points='810 450 720 600 900 600'/%3E%3Cpolygon fill='%23DDD' points='810 450 900 300 720 300'/%3E%3Cpolygon fill='%23AAA' points='990 450 900 600 1080 600'/%3E%3Cpolygon fill='%23444' points='990 450 1080 300 900 300'/%3E%3Cpolygon fill='%23222' points='90 750 0 900 180 900'/%3E%3Cpolygon points='270 750 180 900 360 900'/%3E%3Cpolygon fill='%23DDD' points='270 750 360 600 180 600'/%3E%3Cpolygon points='450 750 540 600 360 600'/%3E%3Cpolygon points='630 750 540 900 720 900'/%3E%3Cpolygon fill='%23444' points='630 750 720 600 540 600'/%3E%3Cpolygon fill='%23AAA' points='810 750 720 900 900 900'/%3E%3Cpolygon fill='%23666' points='810 750 900 600 720 600'/%3E%3Cpolygon fill='%23999' points='990 750 900 900 1080 900'/%3E%3Cpolygon fill='%23999' points='180 0 90 150 270 150'/%3E%3Cpolygon fill='%23444' points='360 0 270 150 450 150'/%3E%3Cpolygon fill='%23FFF' points='540 0 450 150 630 150'/%3E%3Cpolygon points='900 0 810 150 990 150'/%3E%3Cpolygon fill='%23222' points='0 300 -90 450 90 450'/%3E%3Cpolygon fill='%23FFF' points='0 300 90 150 -90 150'/%3E%3Cpolygon fill='%23FFF' points='180 300 90 450 270 450'/%3E%3Cpolygon fill='%23666' points='180 300 270 150 90 150'/%3E%3Cpolygon fill='%23222' points='360 300 270 450 450 450'/%3E%3Cpolygon fill='%23FFF' points='360 300 450 150 270 150'/%3E%3Cpolygon fill='%23444' points='540 300 450 450 630 450'/%3E%3Cpolygon fill='%23222' points='540 300 630 150 450 150'/%3E%3Cpolygon fill='%23AAA' points='720 300 630 450 810 450'/%3E%3Cpolygon fill='%23666' points='720 300 810 150 630 150'/%3E%3Cpolygon fill='%23FFF' points='900 300 810 450 990 450'/%3E%3Cpolygon fill='%23999' points='900 300 990 150 810 150'/%3E%3Cpolygon points='0 600 -90 750 90 750'/%3E%3Cpolygon fill='%23666' points='0 600 90 450 -90 450'/%3E%3Cpolygon fill='%23AAA' points='180 600 90 750 270 750'/%3E%3Cpolygon fill='%23444' points='180 600 270 450 90 450'/%3E%3Cpolygon fill='%23444' points='360 600 270 750 450 750'/%3E%3Cpolygon fill='%23999' points='360 600 450 450 270 450'/%3E%3Cpolygon fill='%23666' points='540 600 630 450 450 450'/%3E%3Cpolygon fill='%23222' points='720 600 630 750 810 750'/%3E%3Cpolygon fill='%23FFF' points='900 600 810 750 990 750'/%3E%3Cpolygon fill='%23222' points='900 600 990 450 810 450'/%3E%3Cpolygon fill='%23DDD' points='0 900 90 750 -90 750'/%3E%3Cpolygon fill='%23444' points='180 900 270 750 90 750'/%3E%3Cpolygon fill='%23FFF' points='360 900 450 750 270 750'/%3E%3Cpolygon fill='%23AAA' points='540 900 630 750 450 750'/%3E%3Cpolygon fill='%23FFF' points='720 900 810 750 630 750'/%3E%3Cpolygon fill='%23222' points='900 900 990 750 810 750'/%3E%3Cpolygon fill='%23222' points='1080 300 990 450 1170 450'/%3E%3Cpolygon fill='%23FFF' points='1080 300 1170 150 990 150'/%3E%3Cpolygon points='1080 600 990 750 1170 750'/%3E%3Cpolygon fill='%23666' points='1080 600 1170 450 990 450'/%3E%3Cpolygon fill='%23DDD' points='1080 900 1170 750 990 750'/%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect x='0' y='0' fill='url(%23a)' width='100%25' height='100%25'/%3E%3Crect x='0' y='0' fill='url(%23b)' width='100%25' height='100%25'/%3E%3C/svg%3E");
background-attachment: fixed;
background-size: cover;
margin: 0;
padding: 0;
width: 100%;
}
:root {
--dark:#0C3444;
--white:#ffffff;
--blue:#228FBD;
--harmony:#bd5022;
--border:#E6E7EB;
--light:#828699;
}
@media (min-width: 1141px) {
/*header--------------------------------------------------------------*/
.header {
width: 100%;
align-items: center;
height: 70px;
margin : auto;
position: fixed;
top:0;
left: 0;
background-color:var(--white);
z-index: 100;
}
#menu__toggle {
display: none;
}
.menu__btn {
visibility: hidden;
}
.menu label {
visibility: hidden;
}
.header-wrapper {
display: flex;
justify-content: space-between;
width: 1140px;
height: 100%;
padding: auto;
margin: auto;
}
.wrapper {
display: flex;
justify-content: space-between;
width: 100%;
}
.Logo {
align-items: center;
}
.Logo img {
margin: auto;
width: 100%;
}
.menu {
align-items: center;
margin: auto;
max-height:70px;
}
.menu_box {
display: flex;
flex-direction: row;
}
.menu ul li {
list-style-type: none;
align-items: center;
margin: auto;
}
.menu ul li a {
color: var(--dark);
display: block;
padding: 7px 7px;
border-radius: 1px;
text-decoration: none;
font-weight:600;
font-size:16px;
}
.menu ul li a:hover {
color: #0194FF;
}
.menu ul li a:active {
color: #0194FF;
}
.contacts {
margin: auto;
display: flex;
}
.contacts a {
padding-left: 10px;
}
.betting-software {
margin-left: 2vw;
color: var(--blue);
padding: 7px 14px;
border-radius: 50px;
border: 2px solid var(--blue);
}
.subheader {
background-color: var(--dark);
align-items: center;
height: 40px;
padding-top: 78px;
}
.subheader-wrapper {
align-items: center;
display: flex;
width: 1140px;
margin: auto;
}
.subheader-wrapper h1 {
color: var(--white);
font-size: 20px;
margin: auto;
margin: 0;
margin-right: 10px;
font-weight: 600;
width: fit-content;
}
.subheader-wrapper h2 {
color: var(--white);
font-size: 20px;
margin: auto;
margin: 0;
margin-right: 10px;
font-weight: 600;
width: fit-content;
}
.subheader-wrapper a {
height: 30px;
margin: auto;
margin-left: 0;
margin-right: 10px;
text-decoration: none;
}
.subheader-wrapper a :active {
color: var(--blue);
}
.subheader-wrapper a :hover {
color: var(--blue);
}
.subheader-wrapper img {
width: 30px;
}
}
@media (min-width: 1141px) {
.online {
margin: auto;
width: 100%;
color: var(--dark);
}
.online-wrapper {
display: block;
margin: auto;
width: 1140px;
}
.online-card-row {
display: flex;
width: 1140px;
margin-bottom: 10px;
height: auto;
margin-bottom: 10px;
}
.online-card-row a {
text-decoration: none;
color: var(--dark);
}
.online-card {
align-items: center;
text-align: center;
width: 336px;
height: inherit;
margin-right: 10px;
margin-top: 0;
border-radius: 10px;
border: 1px var(--border) solid;
padding-top: 20px;
padding-bottom: 10px;
padding-left: 16px;
padding-right: 16px;
background-color: var(--white);
}
.online-card h3 {
font-size: 18px;
font-weight: 800;
}
.online-card p {
text-align: left;
text-align: justify;
font-size: 14px;
font-weight: 400;
}
.listP {
margin: auto;
padding-bottom: 5px;
display: flex;
}
.listP p {
margin: 0;
margin-left: 0px;
text-align: left;
}
.form {
margin: auto;
height: 400px;
}
.form-case {
align-items: center;
display: block;
padding: 40px;
height: auto;
width: 600px;
margin: auto;
border: 1px solid var(--border);
border-radius: 10px;
text-align: center;
}
.form-case a {
text-decoration: none;
}
.form-text {
width: 400px;
text-align: center;
color: var(--dark);
margin: auto;
}
.form-text h1 {
font-size: 24px;
}
.button-case {
align-items: center;
margin: auto;
text-align: center;
}
.button-case img {
width: 120px;
align-items: center;
text-align: center;
}
}
@media (max-width: 1140px) {
html{
font-family: 'Alegreya Sans', sans-serif;
width: auto;
overflow-x: hidden;
}
body {
background-color: #FFFFFF;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' x2='0' y1='0' y2='100%25' gradientTransform='rotate(231,960,455)'%3E%3Cstop offset='0' stop-color='%23FFFFFF'/%3E%3Cstop offset='1' stop-color='%23A9D8EF'/%3E%3C/linearGradient%3E%3Cpattern patternUnits='userSpaceOnUse' id='b' width='548' height='456.7' x='0' y='0' viewBox='0 0 1080 900'%3E%3Cg fill-opacity='0.03'%3E%3Cpolygon fill='%23444' points='90 150 0 300 180 300'/%3E%3Cpolygon points='90 150 180 0 0 0'/%3E%3Cpolygon fill='%23AAA' points='270 150 360 0 180 0'/%3E%3Cpolygon fill='%23DDD' points='450 150 360 300 540 300'/%3E%3Cpolygon fill='%23999' points='450 150 540 0 360 0'/%3E%3Cpolygon points='630 150 540 300 720 300'/%3E%3Cpolygon fill='%23DDD' points='630 150 720 0 540 0'/%3E%3Cpolygon fill='%23444' points='810 150 720 300 900 300'/%3E%3Cpolygon fill='%23FFF' points='810 150 900 0 720 0'/%3E%3Cpolygon fill='%23DDD' points='990 150 900 300 1080 300'/%3E%3Cpolygon fill='%23444' points='990 150 1080 0 900 0'/%3E%3Cpolygon fill='%23DDD' points='90 450 0 600 180 600'/%3E%3Cpolygon points='90 450 180 300 0 300'/%3E%3Cpolygon fill='%23666' points='270 450 180 600 360 600'/%3E%3Cpolygon fill='%23AAA' points='270 450 360 300 180 300'/%3E%3Cpolygon fill='%23DDD' points='450 450 360 600 540 600'/%3E%3Cpolygon fill='%23999' points='450 450 540 300 360 300'/%3E%3Cpolygon fill='%23999' points='630 450 540 600 720 600'/%3E%3Cpolygon fill='%23FFF' points='630 450 720 300 540 300'/%3E%3Cpolygon points='810 450 720 600 900 600'/%3E%3Cpolygon fill='%23DDD' points='810 450 900 300 720 300'/%3E%3Cpolygon fill='%23AAA' points='990 450 900 600 1080 600'/%3E%3Cpolygon fill='%23444' points='990 450 1080 300 900 300'/%3E%3Cpolygon fill='%23222' points='90 750 0 900 180 900'/%3E%3Cpolygon points='270 750 180 900 360 900'/%3E%3Cpolygon fill='%23DDD' points='270 750 360 600 180 600'/%3E%3Cpolygon points='450 750 540 600 360 600'/%3E%3Cpolygon points='630 750 540 900 720 900'/%3E%3Cpolygon fill='%23444' points='630 750 720 600 540 600'/%3E%3Cpolygon fill='%23AAA' points='810 750 720 900 900 900'/%3E%3Cpolygon fill='%23666' points='810 750 900 600 720 600'/%3E%3Cpolygon fill='%23999' points='990 750 900 900 1080 900'/%3E%3Cpolygon fill='%23999' points='180 0 90 150 270 150'/%3E%3Cpolygon fill='%23444' points='360 0 270 150 450 150'/%3E%3Cpolygon fill='%23FFF' points='540 0 450 150 630 150'/%3E%3Cpolygon points='900 0 810 150 990 150'/%3E%3Cpolygon fill='%23222' points='0 300 -90 450 90 450'/%3E%3Cpolygon fill='%23FFF' points='0 300 90 150 -90 150'/%3E%3Cpolygon fill='%23FFF' points='180 300 90 450 270 450'/%3E%3Cpolygon fill='%23666' points='180 300 270 150 90 150'/%3E%3Cpolygon fill='%23222' points='360 300 270 450 450 450'/%3E%3Cpolygon fill='%23FFF' points='360 300 450 150 270 150'/%3E%3Cpolygon fill='%23444' points='540 300 450 450 630 450'/%3E%3Cpolygon fill='%23222' points='540 300 630 150 450 150'/%3E%3Cpolygon fill='%23AAA' points='720 300 630 450 810 450'/%3E%3Cpolygon fill='%23666' points='720 300 810 150 630 150'/%3E%3Cpolygon fill='%23FFF' points='900 300 810 450 990 450'/%3E%3Cpolygon fill='%23999' points='900 300 990 150 810 150'/%3E%3Cpolygon points='0 600 -90 750 90 750'/%3E%3Cpolygon fill='%23666' points='0 600 90 450 -90 450'/%3E%3Cpolygon fill='%23AAA' points='180 600 90 750 270 750'/%3E%3Cpolygon fill='%23444' points='180 600 270 450 90 450'/%3E%3Cpolygon fill='%23444' points='360 600 270 750 450 750'/%3E%3Cpolygon fill='%23999' points='360 600 450 450 270 450'/%3E%3Cpolygon fill='%23666' points='540 600 630 450 450 450'/%3E%3Cpolygon fill='%23222' points='720 600 630 750 810 750'/%3E%3Cpolygon fill='%23FFF' points='900 600 810 750 990 750'/%3E%3Cpolygon fill='%23222' points='900 600 990 450 810 450'/%3E%3Cpolygon fill='%23DDD' points='0 900 90 750 -90 750'/%3E%3Cpolygon fill='%23444' points='180 900 270 750 90 750'/%3E%3Cpolygon fill='%23FFF' points='360 900 450 750 270 750'/%3E%3Cpolygon fill='%23AAA' points='540 900 630 750 450 750'/%3E%3Cpolygon fill='%23FFF' points='720 900 810 750 630 750'/%3E%3Cpolygon fill='%23222' points='900 900 990 750 810 750'/%3E%3Cpolygon fill='%23222' points='1080 300 990 450 1170 450'/%3E%3Cpolygon fill='%23FFF' points='1080 300 1170 150 990 150'/%3E%3Cpolygon points='1080 600 990 750 1170 750'/%3E%3Cpolygon fill='%23666' points='1080 600 1170 450 990 450'/%3E%3Cpolygon fill='%23DDD' points='1080 900 1170 750 990 750'/%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect x='0' y='0' fill='url(%23a)' width='100%25' height='100%25'/%3E%3Crect x='0' y='0' fill='url(%23b)' width='100%25' height='100%25'/%3E%3C/svg%3E");
background-attachment: fixed;
background-size: cover;
margin: 0;
padding: 0;
width: 100%;
}
.header {
width: 100%;
align-items: center;
height: 20vw;
margin : auto;
position: fixed;
top:0;
left: 0;
background-color:var(--white);
z-index: 100;
}
.wrapper {
width: 100%;
margin-left: 10px;
margin-right: 10px;
}
.Logo img {
width: 60%;
}
#menu__toggle {
opacity: 0;
}
#menu__toggle:checked + .menu__btn > span {
top: 3vw;
transform: rotate(45deg);
}
#menu__toggle:checked + .menu__btn > span::before {
top: 0;
transform: rotate(0deg);
}
#menu__toggle:checked + .menu__btn > span::after {
top: 0;
transform: rotate(90deg);
}
#menu__toggle:checked ~ .menu_box {
left: 50% !important;
}
.menu__btn {
position: fixed;
top: 6vw;
left: 80%;
width: 12%;
height: auto;
cursor: pointer;
z-index: 10;
}
.menu__btn > span,
.menu__btn > span::before,
.menu__btn > span::after {
display: block;
position: absolute;
width: 100%;
height: 1.5vw;
border-radius: 100px;
background-color: var(--dark);
transition-duration: .25s;
}
.menu__btn > span::before {
content: '';
top: 4vw;
}
.menu__btn > span::after {
content: '';
top: 8vw;
}
.menu_box {
display: block;
position: fixed;
top: 0;
left: 120%;
width: 1200px;
height: 100%;
margin: 0;
padding: 20% 0;
list-style: none;
background-color: var(--white);
transition-duration: .25s;
z-index: 1;
}
.menu ul a {
display: block;
padding: 12px 24px;
color: var(--dark);
font-size: 5vw;
font-weight: 600;
text-decoration: none;
transition-duration: .25s;
max-width: 10%;
}
.menu ul a:hover {
background-color: var(--blue);
}
.betting-software {
text-align: center;
border: 1px solid var(--blue);
border-radius: 5px;
padding: 12px 12px;
color: var(--blue);
}
.subheader {
background-color: var(--dark);
align-items: center;
height: fit-content;
padding-top: 26%;
padding-bottom: 2%;
padding-left: 2%;
}
.subheader-wrapper {
vertical-align: middle;
align-items: center;
display: flex;
width: auto;
margin: auto;
}
.subheader-wrapper h1 {
color: var(--white);
font-size: 8vw;
margin: 0;
margin-right: 0;
font-weight: 600;
}
.subheader-wrapper h2 {
color: var(--white);
font-size: 5vw;
margin: 0;
margin-right: 0;
font-weight: 600;
margin-left: 1vw;
}
.subheader-wrapper a {
align-items: center;
margin: 0;
margin-left: 0;
text-decoration: none;
}
.subheader-wrapper a :active {
color: var(--blue);
}
.subheader-wrapper a :hover {
color: var(--blue);
}
.subheader-wrapper img {
width: 12vw;
}
.online {
margin: auto;
width: auto;
padding-left: 4%;
padding-right: 4%;
}
.online-wrapper {
display: block;
margin: auto;
width: auto;
align-items: center;
text-align: center;
color: var(--dark);
}
.online-card-row {
display: block;
width: auto;
margin-bottom: 8%;
align-items: center;
}
.online-card-row a {
display: block;
text-decoration: none;
color: var(--dark);
}
.online-card {
align-items: center;
text-align: center;
width: fit-content;
margin-top: 0;
margin-bottom: 8%;
border-radius: 10px;
border: 2px solid var(--border);
padding-top: 4%;
padding-bottom: 4%;
padding-left: 2%;
padding-right: 2%;
}
.online-wrapper h1 {
font-size: 8vw;
font-weight: 800;
margin: 2%;
margin-bottom: 2%;
}
.online-card h3 {
font-size: 6vw;
font-weight: 800;
}
.online-card p {
font-size: 4vw;
font-weight: 400;
}
.online-card img {
min-width: 24vw;
}
.listP {
margin: auto;
display: flex;
}
.listP p {
margin: 0;
margin-left: 0px;
text-align: left;
}
.listP img {
min-width: 8vw;
min-height: 8vw;
}
.form {
margin: auto;
height: auto;
margin-bottom: 10%;
align-items: center;
}
.form-case {
align-items: center;
display: block;
height: auto;
width: 92%;
border: 2px solid var(--border);
border-radius: 10px;
text-align: center;
margin: auto;
padding-bottom: 10%;
}
.form-case a {
text-decoration: none;
}
.form-text {
text-align: center;
color: var(--dark);
margin: auto;
}
.form-text h1 {
font-size: 6vw;
}
.button-case {
align-items: center;
margin: auto;
text-align: center;
}
.button-case img {
width: 16vw;
align-items: center;
text-align: center;
}
}