/*ROOT*/
:root {
    --llbackground: linear-gradient(90deg,#a5cd28,#69a507);;
    --background: linear-gradient(90deg,#f3123e,#a80021);
    --accentBackground: linear-gradient(90deg,#0d75a9,#0b92d5);
    --font: sans-serif;
    --black: #333;
    --grey: #fbf7fa;
    --llgreen: #97cc48;
    --maincolor:#cc082e;
    --secondary:#0d75a9;
    --accent: #0d75a9;
    --warning: #d00808;
    --Hpadding: 6vw;
    --Vpadding: 8vw;
    --padding: var(--Vpadding) var(--Hpadding);
    --maxW: 330px;
    --shadow: 0px 3px 6px #00000029;
    --box-radius: 8px;
    --cta-box-radius: 25px;
    --btheight: 12vw;
    --mbHeight: 93vh;
    --headerHeight: 13vw;
    --bannertextcolor: #fff;
    --font8: 3vw;
    --font9: 3.3vw;
    --font10: 3.5vw;
    --font11: 3.7vw;
    --font12: 3.9vw;
    --font13: 4.1vw;
    --font14: 4.3vw;
    --font15: 4.5vw;
    --font16: 4.7vw;
    --font18: 5.1vw;
    --font20: 5.3vw;
    --font22: 5.5vw;
    --font25: 5.9vw;
    --font30: 7.5vw;
    --font35: 10vw;
    --font38: 12vw;
    --maxnumber: 69;
    --numbersperline:5;
    --starsperline: 1;
    --maxstar: 45;
    --vw0-5: 0.5vw;
    --vw1: 1vw;
    --vw1-5: 1.5vw;
    --vw2: 2vw;
    --vw3: 3vw;
    --vw4: 4vw;
    --vw5: 5vw;
    --vw6: 6vw;
    --vw7: 7vw;
    --vw8: 8vw;
    --vw9: 9vw;

}

:root #france-lotto-results, :root #france-powerball-predictions{
    --background: linear-gradient(90deg,#236abd,#15549c);
    --accentBackground: linear-gradient(90deg,#0d75a9,#0b92d5);
    --maincolor:#15549c;
    --secondary:#0d75a9;
    --accent: #0d75a9;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-family: sans-serif;
    padding: 0;
    margin: 0;
    color: inherit;
    line-height: 125%;
    text-align: inherit;
    -webkit-tap-highlight-color: transparent;
    width: 100%;
}

html {
    text-align: left;
    scroll-behavior: smooth;
    color: #333;
}

*:focus {
    outline: none;
}

a {
    text-decoration: none;
    color: inherit;
    font-weight: 600;
    cursor: pointer;
}

ul {
    list-style: none;
    padding: 0;
}
button, input, select {
    border: 0;
    background: none;
    outline: none;
    cursor: pointer;
    text-align: center;
}

img{
    width: 100%;
    height: auto;
}

main {
    margin-top:var(--headerHeight);
}

/*GENERAL*/
.padding {
    padding: var(--padding);
}

.maincolor {
    background: var(--maincolor);
    color: #fff;
}

.background {
    background: var(--background);
    color: var(--bannertextcolor);
}

.accent-background {
    background: var(--accentBackground);
    color: var(--bannertextcolor);
}

.mbcenter {
    text-align: center;
    justify-content: center;
}

/*TYPOGRAPHY*/
h1 {
    font-size: var(--font20);
}

h2{
    font-size: var(--font18);
}

h3{
    font-size: var(--font16);
}

p{
    font-size: var(--font14);
}

p span {
    line-height: 0;
}

strong{
    font-weight: 700;
}

/*HEADER*/
header{
    background: var(--background);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 0 var(--Hpadding);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    height: var(--headerHeight);
}

.logo-wrapper {
    display: flex;
    align-items: center;
    gap: 0;
    transition: .1s;
    justify-content: flex-end;
    width: auto;
}

.logo-wrapper img{
    width: 8vw;
    height: auto;
    max-width: 90px;
    visibility: hidden;
}

.logo-wrapper span {
    font-size: 2.5vw;
    color: var(--bannertextcolor);
    width: auto;
    visibility: hidden;
}

.floated-cta.cta-1 {
    position: fixed;
    width: 48vw;
    top: -15vw;
    margin: 0 auto;
    left: 0;
    right: 0;
    border-radius: 0 0 25px 25px;
    height: calc(var(--headerHeight) + 5px);
    transition: .1s;
    z-index: 10000000;
    gap: 0.5vw;
}

.floated-cta.cta-1 span {
    font-size: var(--font12);
}

.stick .floated-cta.cta-1 {
    top: 0;
}

.floated-cta img {
    transform: translate(-1vw, 0);
}

.stick .logo-wrapper {
    flex-direction: column;
}

.stick .logo-wrapper img {
    visibility: visible;
}

.stick .logo-wrapper span {
    visibility: visible;
}

.burger {
    width: 7vw;
    height: 5.5vw;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: self-start;
    cursor: pointer;
}

.burger div {
    height: 2px;
    background: var(--bannertextcolor);
}

.opened .burger div:nth-child(1){
    transform: rotate(
            45deg
    ) translate(1.5vw, 1.5vw);
}

.opened .burger div:nth-child(2){
    visibility: hidden;
}

.opened .burger div:nth-child(3){
    transform: rotate(
            -45deg
    ) translate(1vw, -1vw);
}

nav {
    position: fixed;
    z-index: 100000;
    width: 80%;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-around;
    font-size: var(--font14);
    padding: 0 var(--Hpadding);
    height: 100%;
    top: var(--headerHeight);
    left: -100%;
    background: #fff;
    transition: .3s;
}

.opened nav{
    left: 0;
}

nav ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    margin: 0;
    padding: 0;
}

nav li{
    text-decoration: none;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    overflow: hidden;
    border-bottom: 1px dotted #d1d1d1;
    padding: 4vw 0;
}

nav li a{
    font-size: inherit;
    position: static;
    display: flex;
    height: 100%;
    justify-content: flex-start;
    align-items: center;
    background: none;
    font-weight: 400;
    color: var(--black);
    letter-spacing: 0.4px;
}

.overlay {
    background: #000000a8;
    position: fixed;
    display: block;
    top: var(--headerHeight);
    left: 0;
    height: 100%;
    opacity: 0;
    transition: .3s;
    visibility: hidden;
    cursor: pointer;
}

.opened .overlay {
    opacity: 1;
    visibility: visible;
}

/*CTAS*/
.cta-1, .cta-2 {
    background: var(--llbackground);
    border-radius: var(--cta-box-radius);
    text-decoration: none;
    height: var(--btheight);
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 900;
    color: var(--grey);
    font-size: var(--font15);
    cursor: pointer;
    max-width: var(--maxW);
}

.cta-1 span {
    font-weight: 900;
    width: auto;
}

.cta-2 {
    background: #fff;
    border: 1px solid var(--maincolor);
    color: #3e4854;
}

.shoppingcart {
    width: 6vw;
    transform: translate(-2vw,0);
}

/*CTAINNER*/
.ctainner {
    text-align: center;
    background: var(--background);
    color: var(--bannertextcolor);
}

#home .ctainner {
    margin: 0 0 1vw 0;
}

.ctainner .cta-1 {
    margin: 3vw auto;
}

.cta-right {
    width: 100%;
}

.cta-left {
    width: 100%;
}

.cta-left .logo {
    width: 27vw;
}

.cta-left .title, .cta-left h1 {
    font-size: var(--font20);
    font-weight: 600;
    text-transform: uppercase;
}

.cta-left time {
    font-size: var(--font16);
    font-weight: 300;
}

.jack {
    font-size: var(--font38);
    text-align: center;
    padding: 2vw 0;
    font-weight: 900;
}

.offer-desc {
    text-align: center;
    font-weight: 600;
}

.offer-desc span {
    display: block;
    font-size: var(--font12);
}

.offer-desc span:nth-child(2) {
    font-weight: 300;
    font-size: var(--font10);
}

.offer-desc span span{
    display: initial;
    font-weight: 100;
    font-size: var(--font9)
}

/*RESULTS*/
.results {
    text-align: center;
}

.results h1 span, .results h2 span {
    display: block;
    font-size: var(--font15);
    font-weight: 400;
}

.results p.location {
    font-size: var(--font12);
    margin: 1vw 0 0;
    font-weight: 400;
}

.results p.drawnr {
    font-size: var(--font11);
    font-weight: 300;
    margin: 1vw auto 0;
}

.results-right {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    margin: 2vw 0 0;
}

/*DATER*/
.dater-wrapper {
    margin: 4vw 0;
}

.dater-wrapper select {
    height: var(--btheight);
    padding: 0 2vw;
    border: 1px solid #d3d3d3;
    border-radius: 4px;
    font-size: var(--font12);
}

.pending {
    width: 10vw;
    height: 10vw;
    background: var(--maincolor);
    border-radius: 100%;
    margin: 0 auto 5vw;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .8vw;
}

.pending span {
    background: #fff;
    width: 1.5vw;
    height: 1.5vw;
    border-radius: 100%;
}

.awaiting-results p {
    text-align: center;
}

.results .awaiting-results .dater-wrapper {
    margin: 20px auto;
    position: static;
}

.no-odds {
    margin: 3vw auto;
    border: 1px dotted var(--maincolor);
    border-radius: 4px;
    padding: 5vw;
    font-size: var(--font12);
}

/*LOTTERY BALLS*/
.lottery-ball-container {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 5vw auto;
    gap: 2vw;
}

.lottery-ball-container.withstars {
    margin: 5vw auto 2.5vw;
}

.lottery-ball-container.stars {
    margin: 2.5vw auto 5vw;
}

.lottery-ball {
    width: 9vw;
    background: #fff;
    border-radius: 100%;
    height: 9vw;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    font-size: var(--font14);
    color: #333;
    opacity: 1;
    border: 1px solid var(--maincolor);
}

.stars .lottery-ball {
    background: var(--maincolor);
    color: var(--bannertextcolor);
}

/*TABLES*/
table {
    font-size: var(--font10);
    border-collapse: collapse;
}

table tr td, table tr th {
    padding: 2vw 3vw;
    text-align: left;
}

.table-container {
    padding: var(--padding);
}

.table-container h2, .table-container h3 {
    margin: 0 0 3vw;
}

.text-wrapper .table-container {
    padding: var(--Vpadding) 0;
}

.table2 table, .table3 table {
    border: 1px solid var(--maincolor);
}

.table2 tr, .table3 tr {
    border-bottom: 1px dotted var(--maincolor);
}

table tr:first-child {
    background: var(--maincolor);
    color: var(--bannertextcolor);
}

.table2 tr:last-child, .table3 tr:last-child {
    border: none;
}

.table2 td, .table2 th {
    width: 50%;
}

.table3 td, .table3 th {
    width: 33%;
}

.table2plus1 table {
    background: #fff;
    border: 1px solid var(--maincolor);
}

.table2plus1 table tr {
    border-bottom: 1px dotted var(--maincolor);
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    position: relative;
    height: 14vw;
}

.table2plus1 table tr:last-of-type {
    border: none;
}

.table2plus1 table td, .table2plus1 table th {
    width: 50%;
    padding: 0;
}

.table2plus1 td:nth-child(1), .table2plus1 th:nth-child(1) {
    position: absolute;
    top: 2vw;
    left: 2vw;
}

.table2plus1 td:nth-child(2), .table2plus1 th:nth-child(2) {
    width: auto;
    display: flex;
    justify-content: flex-end;
    position: absolute;
    top: 7vw;
    left: 2vw;
    font-weight: 100;
    font-size: var(--font9);
}

.table2plus1 td:nth-child(3), .table2plus1 th:nth-child(3) {
    position: absolute;
    top: 2vw;
    right: 2vw;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    text-align: right;
}

.table2plus1 td:nth-child(3) span {
    width: auto;
    padding: 2.5vw 2vw 2.5vw 9vw;
    background: var(--grey);
    border-radius: 8px;
    text-align: right;
    font-size: var(--font12);
    font-weight: 600;
}

.table2plus1 tr:nth-child(1) td:nth-child(3) span {
    background: var(--maincolor);
    box-shadow: 3px 1px 15px #c7c7c7;
    color: var(--bannertextcolor);
}

.responsive-table {
    width: 100%;
    margin: 0 0 2vw 0;
    overflow: hidden;
}

.responsive-table h2 {
    padding: 0 0 2vw;
}

.responsive-table table {
    width: 100%;
}

.responsive-table thead tr:nth-child(1), .table2 thead tr:nth-child(1) {
    background: none;
    border: none;
    color: var(--black);
    font-size: var(--font20);
}

.table2 thead tr:nth-child(1) th {
    font-size: var(--font14);
    color: var(--bannertextcolor);
}

.table2 thead tr:nth-child(1) {
    background: var(--maincolor);
}

.responsive-table thead tr:nth-child(1) th {
    padding: 0;
}

.responsive-table tbody tr:nth-child(1) {
    display: none;
}

.responsive-table tr{
    background: #fff;
    display: block;
    margin: 0 0 3vw;
    border: 2px solid var(--maincolor);
    border-radius: 4px;
}
.responsive-table tr td {
    display: block;
    padding: 2vw;
    border-bottom: 1px dotted var(--maincolor);
    font-weight: 500;
}

.responsive-table tr td {
    display: flex;
}

.responsive-table tr td span:nth-child(1) {
    font-weight: 300;
    width: 35%;
    padding: 0 10px 0 0;
}

.responsive-table tr td span:nth-child(2) {
    width: 60%;
}

.responsive-table tr td:nth-child(1) {
    background: var(--maincolor);
    color: var(--bannertextcolor);
}

.responsive-table tr td:last-child {
    border: none;
}

.no-heading tbody tr:nth-child(1) {
    background: none!important;
    color: var(--black)!important;
}

.no-heading tbody tr:nth-child(1) td {
    font-weight: 500!important;
}

.table2 tbody tr:nth-child(1), .table3 tbody tr:nth-child(1) {
    background: var(--grey);
    color: var(--black);
}

.table2 tbody tr:nth-child(1) td, .table3 tbody tr:nth-child(1) td {
    font-weight: 700;
}

/*WRAPPERS*/
.text-wrapper {
    padding: var(--padding);
}

.text-wrapper h2, .text-wrapper h3, .text-wrapper h4,
.highlighted h2, .highlighted h3, .highlighted h4 {
    margin: 6vw 0 3vw;
}

.text-wrapper h2:first-of-type, .text-wrapper h3:first-of-type, .text-wrapper h4:first-of-type,
.highlighted h2:first-of-type, .highlighted h3:first-of-type, .highlighted h4:first-of-type{
    margin: 0 0 3vw;
}

.text-wrapper p, .highlighted p {
    margin: 3vw 0;
    font-weight: 300;
    letter-spacing: 0.2px;
    line-height: 1.3;
}

.highlighted {
    padding: 3vw!important;
    background: #a5008f1f;
    border-radius: 8px;
}

.text-wrapper .highlighted {
    margin: 3vw auto;
}

.superwrapper {
    display: flex;
    flex-wrap: wrap;
}

.superwrapper .text-wrapper {
    padding: var(--padding);
    color: var(--black);
}

.superwrapper.accent-background .text-wrapper {
    color: var(--bannertextcolor);
}

.multiwrapper {
    padding: var(--padding);
    display: flex;
    flex-wrap: wrap;
    gap: 5vw;
}

.multiwrapper section {
    padding: 0;
}

/*FOOTER*/
footer {
    text-align: center;
    background: #f1f1f1;
}

footer .cta-2{
    box-shadow: none;
    background: none;
    margin: 3vw auto;
    color: var(--black);
}

footer p {
    color: #6b6969;
    font-size: var(--font13);
    margin: 4vw auto;
    text-align: center;
}

.koop{
    color: #6b6969;
    margin: 3vw 0 2vw;
}

footer img {
    width: 50%;
    height: auto;
}

.footer-logos{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    margin: 30px auto 0;
    max-width: 300px;
}

.footer-logos li{
    width:40%;
    text-align: center;
    margin: 4vw 0;
}

.footer-logos li img{
    width: 75%;
    max-width: 100px;
}

.footer-logos li img[alt="18 plus"]{
    filter: brightness(0);
}

/*COOKIES*/
.cookie-banner {
    position: fixed;
    bottom: 12px;
    left: 5%;
    right: 5%;
    width: 90%;
    padding: 10px;
    display: flex;
    align-items: center;
    background-color: #eee;
    border-radius: 5px;
    box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
    justify-content: space-between;
    z-index: 999;
    flex-direction: column;

}

.cookie-banner > .cookie-close {
    width: 70%;
    cursor: pointer;
    margin: 0;
}

.cookie-banner > div {
    width: 85%;
    line-height: 150%;
    font-size: 14px;
    padding-bottom: 12px;
    text-align: center;
}

/*DETAILS*/
details {
    padding: 4vw var(--Hpadding);
    border-bottom: 1px solid var(--grey);
    transition: .1s;
    cursor: pointer;
}

details[open] {
    background: #f5f5f5;
}

summary {
    font-size: var(--font15);
    font-weight: 500;
}

details p {
    margin: 3vw 0;
    font-weight: 300;
    letter-spacing: 0.2px;
    line-height: 1.3;
}

details[open] ::marker {
    color: var(--maincolor);
}

details[open] summary {
    font-weight: 900;
}

/*INFOBOX*/
.infobox{
    color: var(--bannertextcolor);
    display: flex;
    flex-wrap: wrap;
    gap: 3vw;
    background: var(--accent);
}

.infobox div{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.infobox img{
    width: 16%;
}

.infobox div span:nth-child(2) {
    font-weight: 900;
    font-size: var(--font12);
}

.infobox div span:nth-child(3) {
    font-size: var(--font14);
    width: 80%;
    margin: auto;
    font-weight: 300;
}

/*NEWS*/
.news-wrapper {
    padding: var(--padding);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 5vw;
}

.news-wrapper a {
    display: block;
    position: relative;
}

.news-wrapper .image-container {
    height: 36vw;
    overflow: hidden;
    border-radius: 10px;
}

.news-wrapper .image-container img {
    filter: brightness(.3);
}

.news-wrapper a h3 {
    font-size: var(--font16);
    padding: 0;
    font-weight: 700;
    position: absolute;
    top: 3vw;
    left: 3vw;
    width: 90%;
    color: #f3f3f3;
    -webkit-text-stroke: .5px black;
    text-shadow: 0 0 20px black;
}

.news-wrapper a p {
    font-weight: 900;
    font-size: var(--font18);
    position: absolute;
    bottom: 3vw;
    right: 3vw;
    color: var(--llgreen);
    -webkit-text-stroke: .5px black;
    text-shadow: 0 0 20px black;
    width: auto;
}

.news-date {
    font-size: var(--font12);
    font-weight: 300;
    color: #94617f;
    padding: 3vw 0 0;
}

.breadcrumbs {
    display: flex;
    align-items: center;
    padding: 2vw var(--Hpadding);
    background: var(--grey);
}

.breadcrumbs a {
    font-size: var(--font9)!important;
    width: auto;
}

.breadcrumbs p {
    font-size: var(--font9)!important;
    color: #444!important;
    font-weight: 100!important;
    padding-left: 1vw;
    width: auto;
}

#newSingle h1 {
    font-size: var(--font30);
    font-weight: 300;
}

#newSingle .text-wrapper time {
    font-size: var(--font10);
    font-weight: 100;
    margin: 0 0 5vw 0;
    display: block;
}

.newsletter {
    background: var(--accentBackground);
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    gap: 2vw;
    justify-content: center;
    color: var(--bannertextcolor);
}

.newsletter p.title {
    font-weight: 900;
    font-size: var(--font18);
}

.newsletter p.subtitle {
    font-size: var(--font12);
    font-weight: 300;
}

.newsletter #nl_email {
    height: var(--btheight);
    background: #fff;
    width: var(--maxW);
    border-radius: 6px;
    margin: 3vw auto;
    font-size: var(--font14);
    color: var(--black);
}

.newsletter button {
    height: var(--btheight);
    background: var(--background);
    border-radius: 6px;
    font-weight: 800;
    font-size: var(--font14);
    text-transform: uppercase;
}

.newsletter input[type="checkbox"] {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    width: 25px;
    height: 25px;
    background: #fff;
    margin: 0!important;
    border-radius: 4px;
}

.newsletter label input.checked {
    background: var(--llgreen);
}

.newsletter label {
    display: none;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.newsletter label.show {
    display: flex;
}

.newsletter label p {
    width: calc(100% - 50px);
    padding: 0;
    font-size: var(--font10);
    font-style: italic;
    text-align: left;
    font-weight: 100;
}


@media (min-width: 660px) {
    :root {
        --Hpadding: 4vw;
        --Vpadding: 4vw;
        --padding: var(--Vpadding) var(--Hpadding);
        --btheight: 40px;
        --headerHeight: 50px;
        --maxW: 270px;
        --font8: 8px;
        --font9: 9px;
        --font10: 10px;
        --font11: 11px;
        --font12: 12px;
        --font13: 13px;
        --font14: 14px;
        --font15: 15px;
        --font16: 16px;
        --font18: 18px;
        --font20: 20px;
        --font22: 22px;
        --font25: 25px;
        --font30: 30px;
        --font35: 35px;
        --font38: 38px;
        --vw0-5: 3px;
        --vw1: 5px;
        --vw1-5: 8px;
        --vw2: 12px;
        --vw3: 15px;
        --vw4: 20px;
        --vw5: 25px;
        --vw6: 30px;
        --vw7: 35px;
        --vw8: 40px;
        --vw9: 45px;
    }

    /*HEADER*/
    .burger {
        width: 32px;
        height: 24px;
        align-items: center;
    }

    .burger div {
        height: 2px;
    }

    .logo-wrapper {
        gap: 5px;
    }

    .logo-wrapper img, .stick .logo-wrapper img {
        width: 40px;
    }

    .logo-wrapper span, .stick .logo-wrapper span {
        font-size: 16px;
    }

    .opened .burger div:nth-child(3) {
        transform: rotate(
                -45deg) translate(4px, -5px);
    }

    .opened .burger div:nth-child(1) {
        transform: rotate(
                45deg) translate(7px, 7px);
    }

    .floated-cta.cta-1 {
        width: 250px;
        top: -100px;
        gap: 5px;

    }

    .floated-cta.cta-1 span {
        font-size: 18px;
    }

    .floated-cta img {
        transform: translate(-5px, 0);
    }

    .stick .logo-wrapper {
        flex-direction: row;
    }

    /*CTAS*/
    .shoppingcart {
        width: 25px !important;
        transform: translate(-6px, 0);
    }

    /*CTAINNER    */
    .ctainner {
        margin: 0 0 2px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        text-align: left;
    }

    .cta-left, .cta-right {
        width: 50%;
    }

    .cta-left .logo {
        width: 60px;
    }

    .jack {
        padding: 10px 0 0 2px;
        font-size: 45px;
        width: 100%;
        text-align: left;
        line-height: 0.8;
    }

    .ctainner .cta-1 {
        margin: 0 auto;
    }

    .cta-left {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        padding: 20px 0 40px;
    }

    .cta-right {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 5px;
    }

    .cta-text {
        text-align: left;
        padding: 0 0 0 10px;
        width: auto;
    }

    .offer-desc p, .offer-desc span, .offer-desc span:nth-child(2) {
        font-size: 16px;
    }

    .offer-desc div p:nth-child(1) {
        padding: 0 5px 0 0;
    }

    /*RESULTS*/
    .results {
        text-align: left;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        position: relative;
    }

    .results p.drawnr {
        font-size: 14px;
        font-weight: 300;
        margin: 0;
    }

    .results-right, .results-left {
        width: 48%;
        margin: 0;
    }

    .results-left {
        width: 49%;
    }

    .results .dater-wrapper {
        position: absolute;
        top: 250px;
        width: var(--maxW);
    }

    .pending {
        width: 100px;
        height: 100px;
        margin: 0 auto 20px;
        gap: 10px;
    }

    .dater-wrapper {
        margin: 20px 0;
    }

    .dater-wrapper select {
        font-size: 13px;
        padding: 0 10px;
        height: 40px;
    }

    /*BALLS*/
    .lottery-ball-container {
        gap: 10px;
        margin: 15px 0;
        justify-content: flex-start;
    }

    .lottery-ball-container.withstars {
        margin: 20px 0 5px;
    }

    .lottery-ball-container.stars {
        margin: 5px 0 20px;
    }

    .lottery-ball {
        width: 40px;
        height: 40px;
    }

    /*TABLES*/
    .table-container {
        padding: 25px var(--Hpadding);
    }

    .text-wrapper .table-container {
        padding: 25px 0;
    }


    table {
        font-size: 14px;
        width: auto;
        min-width: 50%;
    }

    .table2plus1 table {
        width: 100%;
    }

    table tr td, table tr th {
        padding: 10px 15px;
    }

    .table2plus1 table tr {
        height: 55px;
    }
    .table2plus1 td:nth-child(1), .table2plus1 th:nth-child(1) {
        top: 10px;
        left: 15px;
    }

    .table2plus1 td:nth-child(2), .table2plus1 th:nth-child(2) {
        top: 30px;
        left: 15px;
        font-size: 12px;
    }

    .table2plus1 td:nth-child(3), .table2plus1 th:nth-child(3) {
        top: 10px;
        right: 15px;
    }

    .table2plus1 td:nth-child(3) span {
        padding: 10px 10px 10px 5%;
        font-size: 14px;
    }

    .responsive-table {
        margin: 0;
    }

    .responsive-table thead tr:nth-child(1) th, .table2 thead tr:nth-child(1) th {
        padding: 15px 10px;
    }

    .responsive-table tbody tr:nth-child(1),  .responsive-table tr {
        display: flex;
    }

    .responsive-table tbody tr:nth-child(1) {
        background: var(--grey);
        color: var(--black);
    }

    .responsive-table tbody tr:nth-child(1) td {
        font-weight: 700;
    }

    .responsive-table tr td {
        display: table-cell;
        padding: 10px;
        font-weight: 500;
        border: none;
    }

    .responsive-table tr th {
        background: transparent;
        color: var(--bannertextcolor);
        font-weight: 900;
        padding: 10px;
    }

    .responsive-table tr {
        margin: 0;
        border: 1px solid var(--maincolor);
    }

    .responsive-table table {
        width: 100%;
        background: var(--maincolor);
        border: 2px solid var(--maincolor);
        border-radius: 4px;
    }

    .responsive-table tr td span:first-of-type {
        display: none;
    }

    .responsive-table tbody tr td:nth-child(1) {
        background: none;
        color: var(--black);
    }

    /*.responsive-table tr td:nth-child(1) {*/
    /*    background: none;*/
    /*    color: var(--black);*/
    /*}*/

    /*.responsive-table tr:nth-child(1) td:nth-child(1) {*/
    /*    color: var(--bannertextcolor);*/
    /*}*/

    /*WRAPPERS*/
    .text-wrapper h2, .text-wrapper h3, .text-wrapper h4, .highlighted h2, .highlighted h3, .highlighted h4 {
        margin: 25px 0 15px;
    }

    .text-wrapper h2:first-of-type, .text-wrapper h3:first-of-type, .text-wrapper h4:first-of-type, .highlighted h2:first-of-type, .highlighted h3:first-of-type, .highlighted h4:first-of-type {
        margin: 0 0 15px;
    }

    .text-wrapper p, .highlighted p {
        margin: 15px 0;
    }

    .highlighted {
        padding:25px!important;
    }

    .text-wrapper .highlighted {
        margin: 25px auto;
    }

    .multiwrapper {
        gap: 25px;
    }

    .superwrapper {
        justify-content: space-between;
        align-items: flex-start;
        padding: var(--padding);
    }
    .superwrapper .text-wrapper, .superwrapper section {
        width: 48%;
        padding: 0;
    }

    .superwrapper section.background {
        padding: 20px;
    }

    .superwrapper section:nth-child(2):not(.target) {
        box-shadow: 4px 5px 20px 0 #00000042;
        border-radius: 6px;
    }

    .superwrapper section:nth-child(2).image-wrapper {
        padding: 0;
        overflow: hidden;
        box-shadow: none;
    }

    .superwrapper:nth-child(even) {
        background: var(--grey);
    }

    /*FOOTER*/
    footer .cta-2 {
        margin: 15px auto;
    }

    footer p {
        margin: 20px auto;
    }

    footer img {
        max-width: 180px;
    }

    .footer-logos ul li {
        width: calc(100% / 6);
    }

    .koop {
        color: #6b6969;
        margin: 15px 0 10px;
    }

    /*COOKIES*/
    .cookie-banner {
        flex-direction: row;
        padding: 28px;
        left: 10%;
        right: 10%;
        width: 80%;
        bottom: 20px
    }

    .cookie-banner > .cookie-close {
        min-width: 135px;
        width: 10%;
    }

    .cookie-banner > div {
        padding-bottom: 0;
    }

    /*INFOBOX*/
    .infobox {
        text-align: center;
        align-items: flex-start;
        gap: 10px;
    }

    .infobox img {
        width: 80px;
    }

    .infobox div {
        width: 45%;
        gap: 5px;
    }

    .infobox div span:nth-child(2) {
        font-size: 15px;
    }

    /*DATER*/
    .dater-wrapper {
        margin: 0;
    }

    .old-results .dater-wrapper {
        margin: 20px 0 0;
    }

    .previous select {
        padding: 0 10px;
        height: 40px;
        width: 150px;
    }

    /*NEWS*/
    .news-wrapper {
        align-items: flex-start;
        justify-content: flex-start;
        gap: 20px;
    }

    .news-wrapper a{
        width: 48%;
    }

    .news-wrapper a h3 {
        top: 10px;
        left: 10px;
        font-size: 20px;
    }

    .news-wrapper a p {
        bottom: 10px;
        right: 10px;
        font-size: 18px;
    }

    .news-wrapper a:hover img{
        filter: brightness(.6)
    }

    .news-date {
        padding: 15px 0 0;
    }

    .news-wrapper .image-container {
        height: 170px;
    }

    a.todas {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 170px;
        border: 1px solid;
        border-radius: 10px;
    }

    /*DETAILS*/
    details {
        padding: 25px var(--Hpadding);
    }

    details p {
        margin: 15px 0;
    }

    .newsletter {
        gap: 10px;
        padding: var(--Vpadding) 30%;
    }

    .newsletter #nl_email {
        margin: 5px auto;
    }

    .newsletter button {
        width: var(--maxW);
    }

    .newsletter label p {
        font-size: 12px;
        width: 100%;
        text-align: center;
    }

    .newsletter input[type="checkbox"] {
        margin: 0 auto!important;
    }

    .breadcrumbs a {
        font-size: var(--font12)!important;
    }
}

@media (min-width: 1000px) {
    @font-face {
        font-family: 'Lato';
        font-style: normal;
        font-weight: 400;
        font-display: swap;
        src: url("../fonts/Lato-Regular.ttf") format('truetype');
        unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }

    @font-face {
        font-family: 'Lato';
        font-style: normal;
        font-weight: 700;
        font-display: swap;
        src: url("../fonts/Lato-Bold.ttf") format('truetype');
        unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }

    @font-face {
        font-family: 'Lato';
        font-style: normal;
        font-weight: 900;
        font-display: swap;
        src: url("../fonts/Lato-Black.ttf") format('truetype');
        unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }

    @font-face {
        font-family: 'Lato';
        font-style: normal;
        font-weight: 300;
        font-display: swap;
        src: url("../fonts/Lato-Light.ttf") format('truetype');
        unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }

    @font-face {
        font-family: 'Lato';
        font-style: normal;
        font-weight: 100;
        font-display: swap;
        src: url("../fonts/Lato-Thin.ttf") format('truetype');
        unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }

    @font-face {
        font-family: 'Lato';
        font-style: italic;
        font-weight: 300;
        font-display: swap;
        src: url("../fonts/Lato-LightItalic.ttf") format('truetype');
        unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }

    :root {
        --font: 'Lato', sans-serif;
        --Hpadding: 9%;
        --Vpadding: 45px;
        --padding: var(--Vpadding) var(--Hpadding);
        --headerHeight: 70px;
        --btheight: 45px;
    }

    * {
        font-family: 'lato', sans-serif;
    }

    /*TYPOGRAPHY*/
    h1 {
        font-size: 25px;
        text-transform: uppercase;
    }

    h2 {
        font-size: 25px;
    }

    h3 {
        font-size: 22px;
    }

    h4, summary {
        font-size: 20px;
    }

    p {
        font-size: 18px;
    }

    /*HEADER*/
    header {
        border-bottom: 2px solid #fff;
    }

    .burger {
        display: none;
    }

    .logo-wrapper span div {
        font-weight: 100;
        font-size: 10px;
    }

    nav {
        position: static;
        padding: 0;
        background: none;
        justify-content: flex-end;
        font-size: 1.1vw;
        align-items: center;
        width: 77%;
    }

    nav ul {
        justify-content: flex-end;
        gap: 15px;
    }

    nav li {
        padding: 0;
        width: auto;
        border: none;
    }

    nav li a {
        text-align: right;
        color: var(--bannertextcolor);
        word-spacing: -2px;
    }

    nav li:first-of-type {
        display: none;
    }

    .floated-cta.cta-1 {
        width: 170px;
        height: 40px;
        border-radius: 25px;
        left: var(--Hpadding);
        margin: 0;
    }

    .stick .floated-cta.cta-1 {
        top: 13px;
    }

    .floated-cta.cta-1 span {
        font-size: 16px;
    }

    .logo-wrapper img {
        position: relative;
        visibility: hidden;
        transition: .3s;
        opacity: 0;
    }

    .logo-wrapper span {
        visibility: visible;
    }

    .stick .logo-wrapper img {
        transform: translateX(-6vw) rotate(
                -360deg);
        opacity: 1;
    }

    .logo-wrapper span, .stick .logo-wrapper span {
        font-size: 21px;
        transform: translateX(-40px);
    }

    .floated-cta img {
        transform: none;
    }

    nav li a:hover {
        text-decoration: underline;
    }

    .cta-1:hover {
        background: var(--llgreen);
    }

    .floated-cta:hover {
        transition: none;
    }

    .stick .logo-wrapper img {
        transform: translateX(-50px) rotate(
                -360deg);
    }

    /*WRAPPERS*/
    .superwrapper .text-wrapper, .superwrapper section {
        width: 46%;
    }


    /*NEWS*/
    .news-wrapper a h3 {
        font-size: 18px;
    }

    /*INFOBOX*/
    .infobox {
        gap: 30px 10px;
    }

    .infobox div {
        width: 23%;
    }

    /*TABLES*/
    .table2plus1 td:nth-child(3) span {
        padding: 10px 10px 10px 25%;
    }
}

@media (min-width: 1200px){
    nav {
        font-size: 14px;
    }

    .results-right, .results-left {
        width: 45%;
    }

    .newsletter {
        padding: var(--Vpadding) 36%;
    }
}

@media (min-width: 1550px) {
    :root {
        --Hpadding: 16%;
        --Vpadding: 45px;
        --btheight: 50px;
    }

    nav {
        font-size: 16px;
    }

    .news-wrapper a {
        width: 23%;
    }

}