body {margin:0; padding:0; font-family:poppins;}

a {text-decoration:none; color:#1C2F43}
a:link {color:#1C2F43}
a:visited {color:#1C2F43}
a:active {color:#1C2F43}

input {padding:10px;}

.myAccountLink {
    color:dodgerblue !important;
    cursor:pointer;
}

.myAccountLink:hover {
    opacity:0.6 !important;
}

.myAccountTab {
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    padding:10px;
    background:#ccc;
    color:#333;
    margin-right:2px;
    transition: all 0.23s ease-out;
    cursor:pointer;
}

.myAccountTab:hover {
    background:#1C2F43;
    color:#fff;
}

.myAccountCompetition {
    position:relative;
    display:flex;
    flex-direction:column;
    width:230px;
    border:1px solid #999;
    padding:20px 20px 60px 20px;
}

.smallButton {
    display:flex;
    align-items:center;
    justify-content:center;
    background:#ccc;
    color:#333;
    font-size:12px;
    padding:3px 10px;
    border-radius:15px;
    transition: all 0.23s ease-out;
    cursor:pointer;
    margin-right:5px;
}

.smallButton:hover {
    background:dodgerblue;
    color:#fff;
}

.nav {
    display:flex; flex-direction:column; justify-content:flex-end; color:#fff;
}

.nav a {
    color:#fff;
}

.nav-background-show {
    display:block;
    opacity:0.5;
    transition: all 2s ease-out;
}
.nav-background-hide {
    display:none;
    opacity:0;
    transition: all 2s ease-out;
}

.how-to-play {
    display:flex; width:100%; margin-top:20px; justify-content:space-around; flex-wrap:wrap;
}

.how-to-play-items {
    width:220px;
    flex-shrink:0;
    margin:20px;
    text-align:center;
}

.how-to-play-image {
    width:220px;
    height:220px;
}

.how-to-play-title {
    font-size:20px;
    font-weight:bold;
    margin-bottom:10px;
    margin-top:20px;
}

.button {display:flex; align-items:center; justify-content:center; background:#fff; color:#333; border-radius:25px; padding:5px 10px; font-size:14px; margin-left:10px; cursor:pointer; transition: all 0.23s ease-out;}

.button:hover {
    background:dodgerblue;
    color:#fff;
    transition: all 0.23s ease-out;
}

.dark-button {
    display:flex; align-items:center; justify-content:center; color:#fff; border-radius:25px; padding:5px 30px; font-size:18px; margin-left:10px; margin-top:20px; cursor:pointer; transition: all 0.23s ease-out; background:#1C2F43;
}

.dark-button:hover {
    background:dodgerblue;
    color:#fff;
    transition: all 0.23s ease-out;
}

.menu div {
    cursor:pointer;
    transition: all 0.23s ease-out;
}

.menu div:hover {
    color:dodgerblue;
    transition: all 0.23s ease-out;
}

.menuItem {
    cursor:pointer;
    transition: all 0.23s ease-out;
}

.menuItem:hover {
    color:dodgerblue;
    transition: all 0.23s ease-out;
}

.cancelButton {
    transition: all 0.14s ease-out;
    border-radius:5px;
    padding:7px 25px;
    background: #ddd;
    cursor:pointer;
}

.cancelButton:hover {
    transition: all 0.14s ease-out;
    transform: scale(1.07,1.07);
    background: #ddd;
}

.confirmButton {
    transition: all 0.14s ease-out;
    background: mediumvioletred;
    cursor: pointer;
}

.confirmButton:hover {
    transition: all 0.14s ease-out;
    transform: scale(1.07,1.07);
    background: #34b7ff;
}

/* COMPETITION PAGE */

.competition-entry-title {
    font-size:36px;
    font-weight:bold;
    color:#333;
    padding:30px 20px 0px 20px;
    text-align:center;
}

.competition-entry-subtitle {
    font-size:18px;
    padding:0px 0px 20px 0px;
    color:#666;
}

.comeptition-image {
    
}

.competition-entry-price {
    font-size:32px;
    font-weight:bold;
    color:#1189B3;
}

.competition-entry-question-title {
    font-size:20px;
}

.competition-entry-question {
    font-size:16px;
    color:#999;
}

.competition-entry-answers > div {
    border-radius:3px;
    background:#1C2F43;
    color:#fff;
    margin:10px 0px;
    padding:10px;
    transition: all 0.23s ease-out;
    cursor:default;
}

.competition-entry-answers > div:hover {
    background:yellow;
    color:#333;
    transition: all 0.23s ease-out;
}

.competition-entry-info1 {
    display:flex;
    justify-content:center;
    padding:20px 0px;
}

.competition-entry-info1 > div {
    display:flex;
    justify-content:center;
}

.competition-entry-terms1 {
    display:flex;
    justify-content:center;
    font-size:14px;
    color:#999;
}

.competition-entry-slider {
    padding:30px 0px;
}

.competition-entry-slider-button {
    background:#1C2F43;
    color:#fff;
    font-size:25px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:3px;
    transition: all 0.23s ease-out;
    cursor:pointer;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.competition-entry-slider-button:hover {
    background:yellow;
    color:#333;
    transition: all 0.23s ease-out;
}

.competition-entry-slider-nav {
    background:#FFCF0E;
    cursor:pointer;
}

.competition-entry-slider-nav:hover {
    background:yellow;
    color:#333;
    transition: all 0.23s ease-out;
}

.competition-entry-add {
    display:flex;
    align-items:center;
    border-radius:3px;
    background:#FFCF0E;
    color:#333;
    margin:10px 0px;
    padding:20px;
    transition: all 0.23s ease-out;
    cursor:default;
}

.competition-entry-add:hover {
    background:yellow;
    color:#333;
    transition: all 0.23s ease-out;
}

.account-side-menu {
    width:250px;
}

.account-side-menu > div {
    background:#1C2F43;
    color:#fff;
    padding:10px;
    margin-bottom:1px;
    transition: all 0.23s ease-out;
    cursor:pointer;
}

.account-side-menu > div:hover {
    transition: all 0.23s ease-out;
    background:yellow;
    color:#333;
}

.account-page-title {
    font-size:26px;
}

.forgottenPassword {
    text-align:right;
    font-size:12px;
    color:#999;
}

.forgottenPassword > div {
    margin-top:20px;
}

.forgottenPassword:hover {
    color:dodgerblue;
}

.competitionCard {
    width:380px;
    transition: all 0.23s ease-out;
    margin:10px 10px 40px 10px;
}

.competitionCard:hover .competitions-img-container {
    opacity:0.5;
    transition: all 0.23s ease-out;
}

.competitionCard:hover .competitionCard-playButton {
    background:yellow;
    color:#333;
    transition: all 0.23s ease-out;
}

.competitionCard-title {
    text-align:center;
    font-size:20px;
    font-weight:bold;
    color:#1C2F43
}

.competitionCard-price {
    text-align:center;
    font-size:30px;
    color:#1189B3;
    font-weight:bold;
}

.competitionCard-drawdate {
    text-align:center;
    font-size:16px;
    color:#333
}

.competitionCard-playButton {
    display:flex; align-items:center; justify-content:center; background:#1C2F43; color:#fff; border-radius:25px; padding:5px 20px; font-size:18px; font-weight:bold; margin:10px 0px 0px 10px; cursor:pointer; transition: all 0.23s ease-out;
}

.competitionCard-playButton:hover {
    background:yellow;
    color:#333;
}

.faq {
    border-bottom:1px solid #ccc;
}

.faq > div {
    color:#666;
    cursor:pointer;
    padding:15px;
}

.faq > div:hover {
    color:dodgerblue;
}

.faqText {
    display:none;
    color:#666;
    max-width:800px;
    margin:0px 30px 30px 30px;
    font-size:14px;
}

.footer a {
    color:#fff;
}

.footer-menu {
    margin:30px;
}

.footer-menu div {
    padding:5px 5px;
}

.footer-menu div:hover {
    color:yellow;
}

.login-container {
    display:flex;
    padding-top:30px;
}

.login-container input {
    background:#eee;
    border:0;
}

.checkout-field {display:flex; flex-direction:column; width:100%; margin-top:20px;}
.checkout-field-title {font-size:15px; font-weight:bold; color:#1C2F43}
.checkout-field-text {margin-top:5px;}
.checkout-field-text input {width:calc(100% - 20px); background:#eee; border:0; font-size:16px; color:#666;}

@media only screen and (min-width: 0px) {
    .nav {display:none}
    .header-logo > div {width:70px;}
    .header-logo-wording1 {font-size:26px}
    .header-logo-wording2 {font-size:26px}
    .container {max-width:100vw;}
    .footer {grid-template-columns:1fr; width:100vw}
    .mobile-menu {display:flex;}
    .competitions {grid-template-columns:1fr;}
    .competition {flex-direction:column;}
    .competition-column-2 {margin-left:0px}
    .comeptition-image {}
    .competition-price-question-text {text-align:center;}
    .competition-entry-terms1 {text-align:center;}
    .faq > div {font-size:18px;}
    .login-container {flex-direction:column;}
    .competitionCard {flex-direction:column;}
    .featuredCard {width:380px;}
    .banner-text {font-size:20px; padding:35px 40px;}
    .account-content {flex-direction:column;}
    .account-side-menu {width:100%;}
    .basket-discount-update {justify-content:center;}
    .basket-items-large {display:none}
    .basket-items-mobile {display:grid;}
    .basket-header {display:none;}
    .basket-discount-update-buttons {flex-direction:column-reverse}
    .basket-update-button {margin-bottom:20px}
    .checkout-container {grid-template-columns:1fr; padding:20px}
    .checkout-product-img {display:flex}
    .content-grid {grid-template-columns:1fr}
}

@media only screen and (min-width: 768px) {
    .nav {display:flex}
    .header-logo > div {width:100px;}
    .header-logo-wording1 {font-size:30px}
    .header-logo-wording2 {font-size:29px}
    .container {max-width:720px;}
    .footer {grid-template-columns:250px 200px 200px;}
    .mobile-menu {display:none;}
    .competitions {grid-template-columns:1fr 1fr 1fr;}
    .competition {flex-direction:row;}
    .competition-column-2 {margin-left:30px}
    .comeptition-image {height:372px; margin-top:10px;}
    .competition-price-question-text {text-align:left}
    .competition-entry-terms1 {text-align:left;}
    .faq > div {font-size:24px;}
    .login-container {flex-direction:row;}
    .competitionCard {flex-direction:row;}
    .featuredCard {width:100%;}
    .banner-text {font-size:50px; padding:35px 40px;}
    .account-content {flex-direction:row}
    .account-side-menu {width:250px;}
    .basket-discount-update {justify-content:space-between;}
    .basket-items-large {display:grid}
    .basket-items-mobile {display:none;}
    .basket-header {display:grid;}
    .basket-discount-update-buttons {flex-direction:row}
    .basket-update-button {margin-bottom:0px}
    .checkout-container {grid-template-columns:2fr 1fr;}
    .checkout-product-img {display:none}
    .content-grid {grid-template-columns:200px 1fr}
}

@media only screen and (min-width:1200px) {
    .header-logo {}
    .container {max-width:1140px;}
    .mobile-menu {display:none;}
    .competitions {grid-template-columns:1fr 1fr 1fr;}
    .competition {flex-direction:row;}
    .comeptition-image {height:372px; margin-top:10px;}
    .checkout-product-img {display:flex}
}

#navigation-mobile-menu {
    animation-name: start;
    animation-duration: 0.3s;
    animation-timing-function: ease-in-out;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-play-state: running;
    animation-fill-mode: forwards;

    -webkit-animation-name: webkitStart;
    -webkit-animation-duration: 0.3s;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-delay: 0s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: normal;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;
}

@keyframes start {
}

@-webkit-keyframes webkitStart {
}

@keyframes slideFrames {
    0% {transform:translateX(0%);}
    100% {transform:translateX(99%);}
}

@-webkit-keyframes webkitSlideFrames {
    0% {-webkit-transform:translateX(0%);}
    100% {-webkit-transform:translateX(99%);}
}

@keyframes slideFramesBack {
    0% {transform:translateX(99%);}
    100% {transform:translateX(0%);}
}

@-webkit-keyframes webkitSlideFramesBack {
    0% {-webkit-transform:translateX(99%);}
    100% {-webkit-transform:translateX(0%);}
}

#navigation-mobile-menu .menu-button {
    color:#fff;
    padding:20px;
    font-size:18px;
}

.admin-list-item {
    transition: all 0.23s ease-out;
    opacity: 1;
    background-color: #FAFAFC;
    color:#666;
    padding:3px;
    cursor:pointer;
    margin-bottom:2px;
    display:flex; align-items:center;
    justify-content:space-between;
}

.admin-list-item:hover {
    opacity: 1;
    transform: scale(1.01,1.1);
    background-color: #16B6FF;
    color:#fff;
}

.faqQuickLink {
    cursor:pointer;
    padding:5px 10px;
    transition: all 0.23s ease-out;
    border-radius:2px;
}

.faqQuickLink:hover {
    background:#aaa;
}