/* */
.loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background-color: white;
}


/* */
body {
    background-color: #E8EBED;
    color: #51626f;
}

body.-login {
    background-color: white;
}


/* */
.grid {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    max-width: 1240px;
    padding-left: 20px;
    padding-right: 20px;
    margin: 0 auto;
}

.grid.-xl {
    max-width: 100%;
}

.grid.-center {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.grid.-vh {
    min-height: 100vh;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
}


/* */
.header {
    /* background-color: #FAFAFA; */
    background-color: #FFFFFF;
}

.header__right {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.header__right h1.-hidden {
    display: none;
}

.header .grid {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    /* padding-top: 15px;
    padding-bottom: 15px; */
    border-top: 3px solid #C5C5C5;
    border-bottom: 1px solid #E8EBED;

    height: 85px;
}

@media (max-width:1075px) {
    .header .grid {
        height: auto;
        padding-top: 15px;
        padding-bottom: 15px;
        text-align: center;
    }
}

@media (max-width:1075px) {
    .header .grid {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;

        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
    }
}





.header__logo {
    display: block;
    margin-right: 20px;
    max-width: 300px;
    margin-top: 20px;
    margin-bottom: 20px;
}

@media (max-width:1075px) {
    .header__logo {
        margin: 0 0 15px 0;
    }
}

.header img {
    display: block;
    max-width: 100%;
    max-height: 65px;
}


.header h1 {
    margin: 0;
    line-height: 35px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
}

@media (max-width:1075px) {
    .header h1 {
        font-size: 20px;
    }
}

.header .langSel {
    margin-left: 20px;
}

.header .langSel.-noMl {
    margin-left: 0;
}

@media (max-width:1075px) {
    .header__right {
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        width: 100%;
        /* position: absolute;
        top: 20px;
        right: 20px;
        margin-left: 0; */
    }
}



/**/
.pageContent {}

.pageContent__inner {

    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;


    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;


    min-height: calc(100vh - 85px);
    /* TODO: calc in JS due to variable header logo */
    max-width: 1715px;
    padding-top: 25px;
    padding-bottom: 25px;
    padding-left: 20px;
    padding-right: 20px;
    margin: 0 auto;
    height: 100%;

}

@media (max-width:1075px) {
    .pageContent__inner {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }
}

.pageContent__inner.-hasChat,
.pageContent__inner.-hasSlido {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

@media (max-width:1075px) {

    .pageContent__inner.-hasChat,
    .pageContent__inner.-hasSlido {
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }
}

.pageContent__inner.-evalQuestions {
    display: block;
    max-width: 1250px;
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    margin: 0 auto;
}

/* Video */
.videoContainer {
    /* width: 74.4927536231884%; */

    width: 1250px;
    /* margin-right: 10px; */

}

@media (max-width:1075px) {
    .videoContainer {
        width: 100%;
        margin-right: 0;
        /* margin-bottom: 20px; */
    }
}

.videoContainer__inner {
    position: relative;
    background-color: transparent;
    /* max-width: 1217px; */
}

.videoContainer.-eventPending .videoContainer__inner,
.videoContainer.-eventEnded .videoContainer__inner {
    /* background-color: black; */
}

.videoContainer__inner .grid {
    max-width: 1200px;
    padding-left: 0;
    padding-right: 0;
}

@media (max-width:1680px) {
    .videoContainer__inner .grid {
        max-width: 960px;
    }
}

@media (max-width:1275px) {
    .videoContainer__inner .grid {
        max-width: 785px;
    }
}

.videoContainer__inner .grid.-mb {
    margin-bottom: 10px;
}

.videoContainer__inner .grid.-wowza {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

#fcplayer_wrapper {
    width: 100% !important;
    height: auto !important;
}

.videoContainer__overlay {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transform: all .2s ease-in-out;
    -ms-transform: all .2s ease-in-out;
    transform: all .2s ease-in-out;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background-color: rgba(0, 0, 0, 1); */
    background-color: #E8EBED;
    opacity: 0;
}

.videoContainer.-eventPending .videoContainer__overlay,
.videoContainer.-eventEnded .videoContainer__overlay {
    z-index: 9;
    opacity: 1;
}

.videoContainer__overlay img {
    display: block;
    /* max-height: 670px; */
    max-height: 100%;
    max-width: 100%;
}


/* Slido + chat container */
.asideWrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    max-width: 425px;
    width: 100%;
    padding-left: 20px;
}

.asideWrap.-space-between {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

@media (max-width:1075px) {
    .asideWrap {
        max-width: 100%;
        padding-left: 0;
    }
}

/* Slido */
.slidoContainer {
    width: 100%;
}

/* Chat */
.chatContainer {
    width: 100%;
}

.chatContainer.-has-slido {
    margin-bottom: 10px;
}

.chatContainer.-hasSlido {
    margin-bottom: 10px;
}

.chat {
    display: none;
    position: relative;
    /* width: 23.18840579710145%; */
    /* width: 400px; */
    width: 100%;
    height: 100%;
    background-color: #F9F9F9;
    border: 1px solid #C5C5C5;
    font-size: 12px;
    line-height: 18px;
}

.chat.-visible {
    /* For chat scroll down */

    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.chatContainer__showChat,
.chat__top {
    position: relative;
    background-color: #FFFFFF;
    border-bottom: 1px solid #C5C5C5;
    padding: 10px;
    font-size: 16px;
    font-weight: bold;
}


.chatContainer__showChat {
    position: relative;
    /* for .overlay */
    width: 100%;
    padding: 7px 10px 8px 10px;
    border: 1px solid #C5C5C5;
    cursor: pointer;
}

/* .chatContainer__showChat.-has-slido {
    margin-bottom: 10px;
} */

@media (max-width:1075px) {
    .chatContainer__showChat {
        width: 100%;
    }
}

/* .chatContainer__showChat .overlay {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: pink;
} */



.chatContainer__showChatIndicator,
.chat__hideBtn {
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 2px;
    width: 32px;
    height: 32px;
    border-radius: 100%;
    padding-top: 1px;
    background-color: transparent;
    border: 1px solid transparent;
    color: #51626f;
}

.chatContainer__showChatIndicator {
    padding-top: 2px;
}



.chatContainer__showChatIndicator:hover,
.chat__hideBtn:hover {
    background-color: #F7F4F4;
    border: 1px solid #C5C5C5;
    color: #51626f;
    text-decoration: none;
    cursor: pointer;
}

.chat__window {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    height: 100%;
    max-height: calc(100vh - 270px);
    /* TODO - calc in JS? - Nah? */
    overflow-x: scroll;
    padding: 10px;
}

.chat__scrollDown {
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 100%;
    position: absolute;
    bottom: 105px;
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 32px;
    opacity: 0;
}

.chat__scrollDown.-visible {
    opacity: 1;
}

.chat__scrollDown.-visible:hover {
    opacity: .8;
    cursor: pointer;
}

.chat__entry {
    border-radius: 5px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 10px 7px 7px 7px;
    margin-bottom: 10px;
}

.chat__entry.-self {
    background-color: #EEEEEE;
}

.chat__avatar {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
}

.chat__avatarInner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 100%;
    width: 24px;
    height: 24px;
    border: 1px solid #C5C5C5;

}

.chat__message {
    position: relative;
    top: 1px;
    padding-top: 2px;
    /* padding-right: 10px; */
    padding-left: 10px;
}

.chat__entry.-self .chat__messageUsername {
    font-weight: bold;
}

.chat__messageContent {
    color: #000000;
}

.chat__form {
    border: 1px solid #C5C5C5;
    padding: 8px 10px 10px 10px;
    background-color: #FFFFFF;
}

.chat__formInner {
    position: relative;
}

.chat__username {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.chat__textarea {
    display: block;
    height: 55px;
    border: none;
    background-color: transparent;
    border: 1px solid #C5C5C5;
    margin-bottom: 0;
}

.chat__button {
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 2px;
    width: 40px;
    height: 40px;
    background-color: transparent;
    border: none;
    opacity: 1;
}

.chat__button:hover {
    opacity: .7;
}

.chat__button:focus {
    outline: none;
}

.buttonWrap {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding-top: 25px;
    padding-bottom: 5px;
}

.buttonWrap.-textCenter {
    text-align: center;
}

.buttonWrap.-eventPending,
.buttonWrap.-eventEnded {
    display: none;
}

.buttonWrap .button {
    margin-bottom: 5px;
}

.buttonWrap__inner {
    text-align: center;
}

.button:focus {
    outline: none;
}

p.sub {
    font-style: italic;
    font-size: 12px;
    line-height: 14px;
}

/**/
.button {
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    border-radius: 50px;
    display: inline-block;
    position: relative;
    outline: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    padding: 18px 50px 20px 50px;
    /* background-color: #0093c6;
    border: 2px solid #0093c6; */
    background-color: #C5C5C5;
    border: 2px solid #C5C5C5;
    font-size: 16px;
    line-height: 16px;
    font-weight: 700;
    /* color: white; */
    color: #000000;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    opacity: 1;
}

@media (max-width:640px) {
    .button {
        width: 100%;
    }
}

.button:hover {
    /* color: white; */
    color: black;
    text-decoration: none;
    opacity: .7;
}


/**/
.fancybox-content {
    max-width: 640px !important;
    width: 640px !important;
}

@media (max-width:730px) {
    .fancybox-content {
        max-width: 100% !important;
        width: 100% !important;
    }
}


.qModal,
.formWrap {
    background-color: #FAFAFA;
}

.formWrap {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    max-width: 640px;
    width: 100%;
    border: 1px solid #E8EBED;
    -webkit-box-shadow: 9px 8px 15px -8px rgba(0, 0, 0, 0.27);
    box-shadow: 9px 8px 15px -8px rgba(0, 0, 0, 0.27);
}

.formWrap.-register {
    position: relative;
}

.formWrap__top {
    position: absolute;
    top: 0;
    right: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    border-top: 3px solid #C5C5C5;
}

.langSel {
    position: relative;
}

.langSel select {
    position: relative;
    z-index: 2;
    padding-right: 30px !important;
    background-color: transparent;

}

.langSel__icon {
    position: absolute;
    z-index: 1;
    top: 50%;
    transform: translateY(-50%);
    right: 15px;
    width: 10px;
    height: 5px;
    background-image: url('../img/sort-order-solid.svg');
    background-size: cover;
}

.qModal__title,
.formWrap__title {
    padding: 10px 20px;
    border-top: 3px solid #C5C5C5;
    border-bottom: 1px solid #E8EBED;
    background-color: white;
    text-align: center;
}

.formWrap__title.-noBorder {
    border-top: none;
}

@media (max-width:640px) {
    .formWrap.-register .formWrap__title {
        padding-top: 60px;
    }
}

.formWrap__title {
    /* border-top-left-radius: 5px;
    border-top-right-radius: 5px; */
    padding: 25px 20px 10px 20px;
}

.formWrap__title img {
    max-width: 400px;
    margin-bottom: 20px;

}

.qModal__body,
.formWrap__body {
    padding: 20px;
}

.qModal__body.-textCenter {
    text-align: center;
}

.formWrap__body {
    padding: 0 20px 0 20px;
}

.formWrap__buttonWrap {
    padding: 0 20px 20px 20px;
    text-align: center;
}

/**/
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select {
    width: 100%;
    outline: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    background-color: $white;
    border: none;
    border: 1px solid #E8EBED;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    padding: 17px 15px;
    color: #51626f;
}

textarea {
    width: 100%;
    height: 200px;
    margin-bottom: 20px;
    outline: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    background: white;
    border: none;
    border: 1px solid #51626f;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    padding: 17px 15px;
    color: #51626f;
    resize: none;
}

.form-control:focus {
    border-color: #C5C5C5;
    outline: 0;
    /* box-shadow: 0 0 0 0.2rem rgb(195, 0, 69, 90%); */
    /* box-shadow: 0 0 0 0.2rem rgb(231, 122, 56, 90%); */
    box-shadow: 0 0 0 0.2rem rgba(173, 172, 172, .9);
}


/* Popup still there? */
.-popup.fancybox-content {
    padding: 0;
}

.-popup h2 {
    /* margin-bottom: 20px; */
    text-align: center;
}

.-popup p:last-of-type {
    margin-bottom: 20px;
}

.-popup .buttonWrap {
    padding-top: 0;
    padding-bottom: 0;
}

.-popup .buttonWrap .button {
    width: 100%;
}

.-popup .fancybox-button {
    display: none;
}

.popup-question {
    position: relative;
}

.popup-question__overlay {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #FAFAFA;
    opacity: 0;
}

.popup-question__overlay.-visible {
    z-index: 99;
    opacity: 1;
}


/* */
.selectWrap {
    border-radius: .25rem;
    width: 100%;
    background-color: white;
}

.selectWrap select {
    background-color: transparent;
}

.selectWrap__icon {
    position: absolute;
    z-index: 1;
    top: 50%;
    transform: translateY(-50%);
    right: 15px;
    width: 10px;
    height: 5px;
    background-image: url('../img/sort-order-solid.svg');
    background-size: cover;
}


/**/
/* Flash messages */
.flash {
    padding: 1rem;

    background: #eff8ff;
    color: #2779bd;

    border-color: #6cb2eb;
    border-width: 1px;
    border-style: solid;
    border-radius: 4px;
    margin-bottom: 2rem;
}

.flash.hidden {
    display: none;
}

.flash.success {
    background: #8AC24A;
    color: white;
    border-color: #8AC24A;
    font-weight: bold;
}

.flash.error {
    background: #fcebea;
    color: #cc1f1a;
    border-color: #ef5753;
}

.flash p {
    margin: 0;
}

/* Update */
.videoContainer iframe {
    width: 1200px;
    height: 675px;
}

@media(max-width:1680px) {
    .videoContainer iframe {
        width: 951px;
        height: 535px;
    }
}

@media(max-width:1275px) {
    .videoContainer iframe {
        width: 800px;
        height: 450px;
    }
}

@media(max-width:825px) {
    .videoContainer iframe {
        width: 100vw;
        height: 56.25vw;
    }
}

@media (min-width:2750px) {

    /* Code to swap higher DPI images */
    /* .videoContainer iframe {
        height: 650px;
    } */
}

.form-row {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.form-row>.col,
.form-row>[class*=col-] {
    padding-left: 0;
    padding-right: 0;
}


/**/
.pageContent__radioWrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.grid__col.-radio {
    width: 49.5%;
    background: pink;
    margin-bottom: 12px;

}

@media (max-width:494px) {
    .grid__col.-radio {
        width: 100%;
    }
}


.pageContent__radioWrapItem {
    display: block;
    position: relative;
    width: 100%;
    border-radius: 3px;
    padding: 5px;
    margin-bottom: 0;
    background-color: #d9ecfd;
    border: 1px solid #5baefe;
}

.pageContent__radioWrapItem [type="radio"] {
    position: relative;
    left: 0;
    top: -2px;
    z-index: 0;
    -webkit-appearance: none;
}

.pageContent__radioWrapItem [type="radio"]::before {
    width: 20px;
    height: 20px;
    background-color: #ffffff;
    border: 1px solid #5baefe;
    display: block;
    content: "";
    z-index: 5;
    position: relative;
    top: 4px;
    left: 0;
}

.pageContent__radioWrapItem input[type="radio"]:checked::before {
    background-color: #5baefe;
}

.pageContent__radioWrapItem strong {
    position: relative;
    top: -3px;
    left: 5px;
}


/* .pageContent__radioWrapItem label {
    margin-right: 10px;
    position: relative;
} */

/* .pageContent__radioWrapItem [type="radio"]+label strong {
    position: relative;
    top: 3px;
}

.pageContent__radioWrapItem [type="radio"] {
    position: relative;
    left: 15px;
    top: -4px;
    z-index: 0;
    -webkit-appearance: none;
}

.pageContent__radioWrapItem [type="radio"]+label::before {
    width: 20px;
    height: 20px;
    background-color: #ffffff;
    border: 1px solid #5baefe;
    display: block;
    content: "";
    float: left;
    margin-right: 10px;
    z-index: 5;
    position: relative;
    top: 4px;
} */

/* .pageContent__radioWrapItem [type="radio"]+label::after {
    width: 16px;
    height: 16px;
    background-color: #ffffff;
    border: 2px solid #ffffff;
    display: block;
    content: "";
    float: left;
    margin-right: 5px;
    z-index: 5;
    position: absolute;
    top: 11px;
    left: 10px;
} */






.questionWrap {
    margin-bottom: 20px;
}

.pageContent__questions textarea {
    margin-bottom: 5px;
}

/* */
.form-error {
    margin: 0;
    font-size: 12px;
    font-style: italic;
    color: #cc1f1a;
}


/* */
.pageContent__countdownTimer {
    padding-top: 20px;
    text-align: center;
}

@media (max-width:1680px) {
    .pageContent__countdownTimer {
        padding-top: 13px;
    }

    .pageContent__countdownTimer h2 {
        margin-bottom: 0;
        font-size: 1.25rem;
    }
}

.pageContent__countdownTimerInner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 10px 0 20px 0;
    font-weight: bold;
}

#countdownTimer>div {
    display: inline-block;
    min-width: 96px;
    padding: 10px;
    border-radius: 3px;
    background-color: #C5C5C5;
    text-align: center;
}

@media (max-width:520px) {
    #countdownTimer>div {
        min-width: 60px;
        padding: 2px;
        font-size: 12px;
    }
}

#countdownTimer div>span {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 15px;
    border-radius: 3px;
    background-color: #DDDDDD;
}

@media (max-width:1680px) {
    #countdownTimer div>span {
        padding: 5px;
    }
}

#countdownTimer .smalltext {
    padding-top: 5px;
    font-size: 16px;
}

@media (max-width:520px) {
    #countdownTimer .smalltext {
        font-size: 12px;
    }
}