﻿@charset "utf-8";
body {
	background: linear-gradient(90deg, #f1f1f1, #fff);
}

#header, footer {
	background: linear-gradient(45deg, var(--main), var(--mainLight));
}
#main {
	min-height: calc(100vh - 400px);
}
.something {
	background: linear-gradient(45deg, var(--altLight), var(--alt));
}
#next-jackpot {
	background: url(/images/blobs.svg);
	background-size: cover;
	background-position: center;
}
.margin30 {
	margin: 30px auto;
}
.regularPara {
	width: 100%;
	max-width: 1200px;
	padding: 0 20px;
}
/* Flex Starndards */
.flex-start, .flex-center, .flex-end, .flex-space-between, .flex-top, .flex-middle, .flex-bottom, .flex-stretch, .flex-column, .flex-row {
	display: flex;
}
.flex-start {
	justify-content: start;
}
.flex-center {
	justify-content: center;
}
.flex-end {
	justify-content: end;
}
.flex-space-between {
	justify-content:space-between;
}
.flex-top {
	align-items: start;
}
.flex-middle {
	align-items: center;
}
.flex-bottom {
	align-items: end;
}
.flex-stretch {
	align-items: stretch;
}
.flex-column {
	flex-direction: column;
}
.flex-row {
	flex-direction: row;
}
.flex-wrap {
	flex-wrap: wrap;
}
#buy-tickets {
	width: 100%;
	max-width: 1200px;
	margin: 20px auto;
}
#buy-tickets a, #buy-tickets img {
    width: 100%;
    height: auto;
}
/*Breadcrumbs*/
#breadcrumb {
	list-style: none;
	max-width: 1200px;
	padding: 0 20px;
	margin: 30px auto 0;
	display: flex;
	justify-content: start;
	align-items: center;
	flex-wrap: wrap;
}
#breadcrumb > li:nth-child(1) > a, #breadcrumb > li:not(:last-child):after {
	display: inline-block;
}
#breadcrumb > li:nth-child(1) > a {
	clip-path: polygon(50% 0%, 100% 50%, 80% 50%, 80% 100%, 20% 100%, 20% 50%, 0 50%);
	background: var(--main);
	width: 16px;
	height: 14px;
	margin-right: 5px;
}
#breadcrumb > li:not(:last-child):after {
	content: "";
	clip-path: polygon(0 0, 0% 100%, 100% 50%);
	background: var(--main);
	width: 6px;
	height: 8px;
	margin: 2px 15px;
}
#breadcrumb > li:nth-child(1) span {
	display: none;
}
#breadcrumb > li:not(:last-child) {
	position: relative;
}
#breadcrumb * {
	color: #444;
	font-size: 16px;
}
/*Sitemap*/
.sitemap > ul {
	width: calc(33.33% - 10px);
	background: #f5f5f5;
	border-bottom: 2px solid var(--main);
	margin: 0 5px 10px;
	padding: 20px;
	list-style: none;
}
.sitemap a {
	color: #444;
	text-decoration: none;
}

#header, footer {
	padding: 30px calc((100vw - 1200px) / 2);
}
#header {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	overflow: hidden;
	border-bottom: 4px solid #fff;
	box-shadow: 0 6px 12px #0002;
}
#logo, nav, #myHamburger {
	position: relative;
	z-index: 2;
}
.read-more-button {
	background: var(--main);
	padding: 10px 15px;
	display: inline-block;
	margin: 0;
	text-decoration: none;
	color: #fff;
	border-radius: 10px;
	transform: scale(1);
	transition: transform .3s;
}
.read-more-button:hover {
	transform: scale(1.1);
}
/*#header:before, #header:after {
    content: "";
    position: absolute;
    top: 0;
    width: 300px;
    height: 100%;
    background: url(/images/accent.svg);
    background-size: cover;
}
#header:before {
    left: 0;
}
#header:after {
    right: 0;
	transform: scale(-1);
}*/
#logo, #logo img {
	display: block;
	width: 260px;
	height: auto;
}
#logo {
	margin: 0;
}
#navContainer {
	max-width: 800px;
	width: calc(100% - 300px);
}
#navContainer ul {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: 0;
    width: 100%;
}
#navContainer li, #navContainer a {
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    font-weight: 700;
}
#navContainer li {
    position: relative;
    transition: padding-bottom .3s;
    padding-bottom: 0px;
}
#navContainer a {
    position: relative;
}
#navContainer li:hover {
    padding-bottom: 5px;
}
#navContainer li a:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 2px;
    background: #fff;
    transition: width .3s;
}
#navContainer li a:hover:before {
    width: 100%
}
footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 60px 0 0;
}
footer * {
	color: #fff;
}
footer > div {
    max-width: 550px;
    text-align: center;
}
footer ul {
    padding: 0;
    list-style: none;
}
footer ul li {
	margin: 0 10px 0 0;
}
#next-jackpot {
	padding: 0 calc((100vw - 1200px) /2);
	height: 500px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	overflow: hidden;
	margin: 0 0 30px;
}
#next-jackpot video {
    height: 102%;
    position: absolute;
    z-index: 0;
    top: -2%;
}
#next-jackpot video:first-child {
    left: calc((100vw - 1600px) / 2);
}
#next-jackpot video:last-child {
    right: calc((100vw - 1600px) / 2);
	transform: scale(-1);
}
#next-jackpot > div {
	position: relative;
	z-index: 10;
}
.est-jackpot p {
	color: #fff;
}
#next-jackpot p.h1 {
	font-size: 120px;
	line-height: 1;
	margin: 10px 0;
}
.est-jackpot p.h3 {
	text-transform: uppercase;
	font-weight: 400;
}
#next-jackpot > div.est-jackpot {
	width: calc(100% - 300px);
	padding: 40px;
	transform: rotate(-3deg);
}
#next-jackpot > div.est-jackpot .h3, #next-jackpot > div.est-jackpot .h5 {
	filter: drop-shadow(-2px 2px 0 #0004);
}
#next-jackpot > div.est-jackpot .h1 {
	filter: drop-shadow(-6px 6px 0 #0004);
}
#next-draw {
	background: linear-gradient(0deg, var(--main), var(--mainLight));
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
}
#next-jackpot #next-draw {
	width: 440px;
	height: 440px;
	padding: 0 60px;
	border-radius: 50%;
	box-shadow: 6px 6px 0 #0004;
	margin: 0;
	transform: rotate(3deg);
}
#next-draw {
	margin: 30px 0;
	border-radius: 10px;
	padding: 30px;
}
#next-draw p {
    color: #fff;
}
#next-draw p#winners {
    margin: 5px 0 0;
}
#next-draw p.h3 {
    font-size: 24px;
    line-height: 1.2;
    margin: 0 0 5px;
}
.syndicate-home {
	background: #fff;
	color: var(--main);
	padding: 10px 20px;
	border-radius: 20px;
	text-decoration: none;
	margin: 5px 0 0;
}
#counters {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 5px 0 10px;
}
#counters > span {
    width: 90px;
    height: 94px;
    border-radius: 50%;
    color: var(--main);
    background: #fff;
    box-shadow: 0 3px 6px #0004;
    margin: 0 -3px;
    line-height: 85px;
    font-size: 45px;
    font-weight: 600;
    text-align: center;
    border: 1px solid var(--main);
    border-bottom-width: 4px;
    position: relative;
}
#counters > span:nth-child(1) {
    transform: translateY(10px) rotate(-5deg);
}
#counters > span:nth-child(2) {
    transform: rotate(-2deg);
}
#counters > span:nth-child(3) {
    transform: rotate(2deg);
}
#counters > span:nth-child(4) {
    transform: translateY(10px) rotate(5deg);
}
#counters > span:before {
    position: absolute;
    bottom: 14px;
    left: 0;
    width: 100%;
    text-transform: uppercase;
    line-height: 1;
    text-align: center;
    font-size: 12px;
    color: var(--main);
    letter-spacing: 2px;
}
#counters > span:nth-child(1):before {
    content: "Days";
}
#counters > span:nth-child(2):before {
    content: "Hours";
}
#counters > span:nth-child(3):before {
    content: "Mins";
}
#counters > span:nth-child(4):before {
    content: "Secs";
}
.home-result {
	background: linear-gradient(90deg, var(--main), var(--alt));
	margin: 30px auto 50px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: #fff;
	position: relative;
	padding: 20px;
}
.home-result:before, .home-result:after {
    content: "";
    position: absolute;
    top: 0;
    width: 60px;
    height: 100%;
    z-index: -1;
}
.home-result:before {
    left: 0;
    background: #7f0000;
    transform: skewY(20deg);
    transform-origin: top left;
}
.home-result:after {
    right: 0;
    background: #0036d5;
    transform: skewY(-20deg);
    transform-origin: top right;
}
.home-result h3, .home-result p {
    color: #fff;
}
.home-result p {
    font-size: 22px;
    margin: 0 0 20px;
}
.home-result > .flex-center > div {
    margin: 0px 20px 10px;
    text-align: center;
}
.balls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	padding: 0;
	list-style: none;
	margin: 0 auto 10px;
}
.balls > li {
    width: 50px;
    line-height: 50px;
    font-size: 24px;
    margin: 0 2px;
    text-align: center;
    background: linear-gradient(45deg, #eee, #fff);
    border-radius: 50%;
    box-shadow: 0 1px 4px #0004;
	overflow: hidden;
}
.balls.alt > li {
    position: relative;
    width: auto;
    align-content: center;
    font-size: 20px;
    letter-spacing: 2px;
    margin: 0 5px 10px;
    line-height: 1;
    padding: 20px 30px;
    border-radius: 10px;
}
.balls.alt > li:before {
    content: "";
    position: absolute;
    top: 4px;
    left: 0;
    width: 100%;
    height: calc(100% - 14px);
    border-top: 2px dashed #ddd;
    border-bottom: 2px dashed #ddd;
}
.resultList .balls.alt > li:before {
	top: 3px;
	left: 3px;
	width: calc(100% - 10px);
	height: calc(100% - 10px);
	border-radius: 8px;
}
.resultList .balls.alt > li, .home-result .balls.alt > li {
	position: relative;
	width: auto;
	align-content: center;
	font-size: 18px;
	letter-spacing: 1px;
	margin: 0 5px 10px;
	line-height: 1;
	padding: 15px 20px;
	border-radius: 10px;
}
.home-result > .flex-center {
	margin: -15px 0 0;
}
.homeBoxes {
	align-items: stretch;
}
.homeBoxes > div {
	width: calc(25% - 10px);
	height: auto;
	padding: 20px;
	text-align: center;
	align-content: center;
	background: #fff;
}
.home-result > .flex-center > div {
	margin: 0px 20px 10px;
	text-align: center;
}
.result-latest .strong, .home-result p.strong {
	margin: 10px 0;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 13px;
}
.home-result p.strong {
	margin: 10px 0 8px;
}
.result-latest .strong {
	color: var(--main);
}
#faq > div {
	border-bottom: 1px solid #ddd;
	margin: 30px 0;
	padding: 0;
	overflow: hidden;
	transition: height .3s;
	cursor: pointer;
}
#faq h5 {
	position: relative;
	padding: 0 30px 20px 0;
	margin: 0;
	font-size: 24px;
}
#faq p {
	margin: 0;
}
#faq h5:before, #faq h5:after {
	content: "";
	position: absolute;
	background: var(--main);
	transform: rotate(0deg);
	transition: transform .3s;
}
#faq h5:before {
	width: 16px;
	height: 2px;
	top: calc(50% - 10px);
	right: 0px;
}
#faq h5:after {
	width: 2px;
	height: 16px;
	top: calc(50% - 17px);
	right: 7px;
}
#faq .active h5:before {
	transform: rotate(180deg);
}
#faq .active h5:after {
	transform: rotate(90deg);
}
.jackpot-char {
  display: inline-block; /* needed — transform doesn't work on inline elements */
  animation: bounce 0.6s ease-in-out infinite alternate;
}

@keyframes bounce {
  from { transform: translateY(0); }
  to   { transform: translateY(-12px); }
}
.resultList {
	display: flex;
	flex-wrap: wrap;
	justify-content: start;
	align-items: stretch;
}
.result-latest {
	background: #fff;
	padding: 30px;
	text-align: center;
	border-radius: 10px;
	box-shadow: 0 2px 8px #0001;
}
.resultList > div {
    width: 100%;
    margin: 0 10px 10px 0;
}
.breakdown-table, .regularTable {
	width: 100%;
	background: #fff;
	border-spacing: 0;
}
.breakdown-table thead, .regularTable thead {
	background: var(--main);
}
.breakdown-table th, .regularTable thead th {
	color: #fff;
}
.breakdown-table td, .breakdown-table th, .regularTable thead th, .regularTable td {
    border-right: 1px solid #aaa;
    border-top: 1px solid #aaa;
    padding: 10px 5px;
}
.breakdown-table tr > td:first-child, .breakdown-table tr > th:first-child, .regularTable tbody tr > td:first-child, .regularTable thead tr > th:first-child {
    border-left: 1px solid #aaa;
}
.breakdown-table tbody > tr:last-child > td, .regularTable tbody > tr:last-child > td {
	border-bottom: 1px solid #aaa;
}
.prize-breakdown {
	position: relative;
	max-height: 300px;
	overflow-y: scroll;
}
.prize-breakdown::-webkit-scrollbar {
  width: 4px;
}
.prize-breakdown::-webkit-scrollbar-track {
	background: #f1f1f1;
}
.prize-breakdown::-webkit-scrollbar-thumb {
  background: #888;
}

.prize-breakdown table {
	position: relative;
}
.prize-breakdown table.open {
	max-height: unset;
}
.prize-breakdown table.open:before {
    display: none;
}
.infoBox {
	background: var(--main);
	padding: 30px;
	margin: 20px 0;
}
.infoBox > p {
    color: #fff;
    margin: 0 0 10px;
}
.infoBox > p:last-child {
    margin-bottom: 0;
}
.infoBox > p:first-child:before {
    content: "i";
    float: left;
    height: 34px;
    width: 34px;
    background: #fff;
    color: var(--main);
    text-align: center;
    align-content: center;
    border-radius: 50%;
    margin-right: 10px;
    font-weight: 900;
}
.sitemap > li {
	font-size: 20px;
	padding: 0 0 10px;
}


#comingSoon {
	background: #1b2978;
	height: auto;
	width: 100%;
	position: relative;
	overflow: hidden;
}
#comingSoon, #comingSoon > div {
	min-height: 380px;
}
#comingSoon:before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 60px;
	background: linear-gradient(0deg, #0000, #0004);
}
#comingSoon > div {
    text-align: center;
    align-content: center;
    transform: translateY(100%);
}
#comingSoon #part1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#comingSoon > div > div {
    width: 900px;
    margin: 0 auto;
}
#comingSoon p {
    color: #fff;
}
#part1 img {
	width: 700px;
	margin: 0 auto;
	transform: scale(0) rotateX(90deg);
	transform-origin: bottom;
	filter: drop-shadow(0px 11px 2px #0001);
}
#comingSoon #part2 {
	padding: 30px 0;
}
#part2 > div {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
}
#part2 > div > p.box {
    width: calc(33.33% - 10px);
    margin: 10px 5px 10px;
    border: 1px solid #fff;
    padding: 20px 20px;
	align-content: center;
}
#part2 > div > p.h3, #part2 > div > p.h4 {
    width: 100%;
    margin: 0 0 5px;
    line-height: 1.2;
}
#part2 > div > p.h4 {
    font-size: 18px;
}

#comingSoon.animate #part1 {
	animation: partOne 10s forwards;
	animation-delay: 1s;
}
.animate #part1 img {
	animation: h1 1.5s forwards;
	animation-delay: 1s;
}

#comingSoon.animate #part2 {
	animation: partTwo 8s forwards;
	animation-delay: 6s;
}

@keyframes partOne {
	0% {transform: translateY(100%);}
	10%, 40% {transform: translateY(0%);}
	50%, 100% {transform: translateY(-100%);}
}
@keyframes partTwo {
	0% {transform: translateY(100%);}
	10%, 100% {transform: translateY(0%);}
}
@keyframes h1 {
	0% {transform: scale(0) rotateX(90deg);}
	100% {transform: scale(1) rotateX(0deg);}
}

.playBoxes {
	text-align: center;
}
.playBoxes > div {
    display: flex;
    justify-content: center;
    align-items: stretch;
}
.playBoxes > div > div {
    margin: 0 5px 10px;
    border: 2px solid var(--main);
    border-bottom-width: 6px;
    padding: 20px;
    background: #fff;
}
#howToPlayBoxes > div > div {
	width: calc(25% - 10px);
}
#lottoRaffleBoxes > div > div {
	width: calc(33.33% - 10px);
}













@media (min-width: 1100px) {
	#myHamburger {display: none;}
}
@media (max-width: 1750px) {
	#header:before, #header:after {
		opacity: .2;
	}
}
@media (max-width: 1650px) {
	#header:before {
		left: -80px;
	}
	#header:after {
		right: -80px;
	}
}
@media (max-width: 1450px) {
	#next-jackpot video {
		display: none;
	}
}
@media (max-width: 1260px) {
	#header, footer {
		padding: 30px;
	}
	#next-jackpot {
		padding: 30px;
		height: auto;
	}
	#next-jackpot p.h1 {
		font-size: 9vw;
	}
	.est-jackpot p.h3 {
		font-size: 20px;
	}
	.est-jackpot p.h5 {
		font-size: 18px;
	}
	#next-jackpot > div.est-jackpot {
		padding: 0;
	}
	.resultList .balls.alt > li, .home-result .balls.alt > li {
		padding: 16px 10px;
	}
	.home-result, #comingSoon {
		margin: 30px 20px 30px;
		width: calc(100% - 40px);
	}
	.resultList > div {
		width: 100%;
		margin: 0 0 10px;
	}
}
@media (max-width: 1100px) {
	.openMenu #myHamburger {
		z-index: 101;
		position: fixed;
		right: 30px;
		top: 50px;
	}
	#myHamburger {
		width: 40px;
		height: 30px;
		position: relative;
	}
	#myHamburger > span {
		display: block;
		width: 100%;
		height: 4px;
		background: #fff;
		position: absolute;
		transition: transform .3s;
	}
	#myHamburger > #upper {
		top: 0;
		transform: rotate(0deg) scaleX(1);
		transform-origin: top right;
	}

	#myHamburger > #middle {
		top: calc(50% - 2px);
		transform: scaleX(1);
		transform-origin: right;
	}
	.openMenu #myHamburger > #upper {
		transform: rotate(-45deg) scaleX(.98);
	}
	#myHamburger > #lower {
		bottom: 0;
		transform: rotate(0deg) scaleX(1);
		transform-origin: bottom right;
	}
	.openMenu #myHamburger > #middle {
		transform: scaleX(0);
	}
	.openMenu #myHamburger > #lower {
		transform: rotate(45deg) scaleX(.98);
	}
	#navContainer ul {
		flex-direction: column;
	}
	#navContainer ul li, #navContainer ul li a {
		display: block;
		font-size: 26px;
		margin: 0 0 5px;
	}
	#navContainer {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100vh;
		background: #000d;
		max-width: unset;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 100;
		padding: 20px;
		transition: transform .3s, opacity .3s;
		opacity: 0;
		transform: translateX(-100%);
		pointer-events: none;
	}
	.openMenu #navContainer {
		pointer-events: all;
		opacity: 1;
		transform: translateX(0%);
	}
	#navContainer ul li, #navContainer ul a {
		font-size: 30px;
		margin: 0 0 10px;
		display: block;
	}
	.jsTable thead,.monthHeader > td:not(:first-child) {
        display: none
    }
    .jsTable,.jsTable tbody, .jsTable tbody tr, .jsTable tbody td {
        display: block;
        width: 100%;
        text-align: center
    }
	.jsTable tr > td:first-child {
		background: #ddd;
	}
	.jsTable tr > td:not(:first-child) {
		padding: 2px 0;
		font-size: 14px;
	}
    .jsTable tr td {
        width: 100%!important
    }
	.jsTable tr td {
		border-left: 1px solid #aaa;
	}
    .jsTable tbody tr td:not(:first-child, :last-child) {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap
    }
    .jsTable tbody td:not(:first-child, :last-child) > span {
        margin-right: 5px
    }
    .jsTable td > span {
        margin: 0 5px
    }
	.playBoxes > div {
		flex-wrap: wrap;
	}
	.playBoxes > div > div {
		width: 100%!important;
		margin: 0 0 10px;
	}
	.playBoxes h3 {
		line-height: 1.2;
	}
}

@media (max-width: 1050px) {
	#part2 > div > p.box {
		width: 100%;
		margin: 5px 0;
	}
	#comingSoon > div > div {
		width: 100%;
	}
}
@media (max-width: 950px) {
	#next-jackpot p.h1 {
		font-size: 80px;
	}
	#next-jackpot {
		padding: 60px 20px 30px;
	}
	#next-jackpot #next-draw {
		width: 100%;
		height: auto;
		border-radius: unset;
		transform: unset;
		padding: 15px;
		box-shadow: 0 6px 2px #0004;
	}
	#counters > span:nth-child(1) {
		transform: translateY(5px) rotate(-5deg);
	}
	#counters > span:nth-child(4) {
		transform: translateY(5px) rotate(5deg);
	}
	#next-draw p.h3 {
		margin: 0;
	}
	#next-draw p#winners {
		margin: 5px 0 0;
	}
	#next-jackpot > div.est-jackpot {
		padding: 0 10px;
		transform: unset;
		margin: 10px 0;
		width: 100%;
	}
	#next-jackpot {
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
		text-align: center;
	}
	#next-draw p.h3 {
		font-size: 22px;
	}
	#counters > span {
		font-size: 28px;
		width: 70px;
		height: 72px;
		line-height: 60px;
	}
	#counters > span:before {
		letter-spacing: 0;
		font-size: 10px;
	}
	.home-result > .flex-center > div {
		margin: 0px 10px 0;
		text-align: center;
		max-width: 220px;
	}
	footer > div {
		max-width: 500px;
		margin: 10px 0 0;
	}
	footer ul.flex-end {
		justify-content: center;
		flex-wrap: wrap;
	}
	footer {
		margin: 30px 0 0;
	}
}

@media (max-width: 750px) {
	#next-jackpot p.h1 {
		font-size: 15vw;
	}
	.est-jackpot p.h3 {
		line-height: 1;
		font-size: 7.5vw;
	}
	.homeBoxes {
		flex-wrap: wrap;
	}
	.homeBoxes > div {
		width: calc(50% - 10px);
		margin: 0 5px 10px;
	}
	#header, footer {
		padding: 30px 10px;
	}
	#counters > span {
		font-size: 8vw;
		width: 18vw;
		height: 18vw;
		line-height: 15vw;
	}
	#counters > span:before {
		letter-spacing: 0;
		font-size: 3.5vw;
		bottom: 2.5vw;
	}
	#part1 img {
		width: 90%;
	}
	#part2 > div > p.box {
		padding: 10px;
	}
	#part2 > div > p.h3 {
		font-size: 26px;
	}
	#part2 > div > p.h4 {
		font-size: 16px;
		font-weight: 400;
	}
	#part2 > div > p.box {
		font-size: 15px;
		line-height: 1.2;
	}
	#logo, #logo img {
		width: 180px;
		max-width: calc(100vw - 90px);
		margin: 0;
	}
	#next-jackpot {
		background: url(/images/blobs-mobile.jpg);
		background-size: cover;
		background-position: center;
	}
}
@media (max-width: 600px) {
	.balls.alt > li {
		padding: 12px 8px;
		border-radius: 3px;
		margin: 0 3px 6px;
		box-shadow: 0 0 2px #0003;
		letter-spacing: 0;
		font-size: 16px;
	}
	.home-result > .flex-center {
		flex-wrap: wrap;
	}
	.homeBoxes > div {
		width: 100%;
		height: auto;
	}
	.homeBoxes h3 {
		margin: 0;
		line-height: 1;
		font-size: 20px;
	}
	.homeBoxes p {
		margin: 5px 0 0;
	}
	.read-more-button {
		margin: 10px 0 0;
	}
	body {
		background: #f1f1f1;
	}
}

