* {
    padding: 0;
    margin: 0; 
}

body {
    background-color: #ddd5d5;
    background-image: url("http://image.e.luxasia.com/lib/fe3b15707564057b721170/m/1/db2aefc7-64fe-4611-85c0-677e83d6d0ca.jpg");
    background-size: 20%;
    font-family: 'Poppins', sans-serif;
    display: flex;
    justify-content: center;
    text-align: center;
    color: #d73150;
}


h2 {
    font-weight: 300;
    padding: 20px 0;
}

h3,h4 {
    font-weight: 300;
}

h5 {
    font-weight: 300;
    padding: 10px 0;
}

.captionCopy {
    font-size: 3rem;
    font-weight: 600;
    line-height: 1.25;
    padding: 0 50px;
    text-align: center;
    margin: 0 auto;
}

.popupTitle {
    font-weight: 600;
}

/* timer properties */
#time {
    font-weight: 500;
    font-size: 4rem;
    line-height: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}
.timebox {
    width: 160px;
    text-align: left;
    display: flex;
    justify-content: center;
    align-items: center;
}
#timerLabel #labels{
    font-size: 1.25rem;
    letter-spacing: 3px; 
    padding: 5px 0 15px;
    font-weight: 600;
}
#timerLabel .copy{
    padding: 0; 
    font-size: 1.5rem; 
    letter-spacing: 1px; 
    line-height: 1;
    font-weight: 600;
}
.red {
    color: #d73150;
}
.green {
    color: #208c6e !important;
}

/* css animation on the flip*/
.box {
    perspective: 1000px;
}
.opened:hover {
    box-shadow: 0px 0px 10px 3px rgba(0,0,0,0.3);
    transition: ease-in 0.3s;
}
.tile {
    width: 100%;
    height: 100%;
    transition: transform 0.8s;
    transition: ease-in-out 0.5s;
    transform-style: preserve-3d;
    cursor: pointer;
    position: relative;
    border-radius: 10px;
}
.tile.opened {
    transform: rotateY(180deg);
    border-radius: 10px;
}
.tile.toOpen {
    box-shadow: 0px 0px 10px 3px rgba(0,0,0,0.7);
    transition: ease-in-out 0.5s
}
.tile-face {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.front {
    border-radius: 10px;
    overflow: hidden;
}
.back {
    border-radius: 10px;
    overflow: hidden;
    transform: rotateY(180deg);
    transition: ease-in-out 0.5s;
}

/* grid settings for desktop */
.grid-container {
    max-width: 940px;
    margin: 20px auto 60px;
    display: grid;
    grid-template-columns: 140px 140px 140px 140px 140px 140px;
    grid-template-rows: 180px 160px 140px 140px 140px 140px 140px 140px 140px;
    grid-gap: 20px;
    grid-template-areas: 
    'timer     timer    timer   timer   timer   timer'
    'sub       sub      sub     sub     sub     sub'
    'title     title    title   g1      g2      g3'
    'title     title    title   g1      g4      g5'
    'g6        g8       g9      g10     g12     g12'
    'g7        g8       g11     g11     g13     g14'
    'g15       g16      g17     g19     g21     g22'
    'g15       g16      g18     g20     g20     g22'
    'g23       g24      g24     g25     g25     g25';
}

.timer  { grid-area: timer; }
.subtitle  { grid-area: sub; }
.title  { grid-area: title; }
.day1   { grid-area: g1; }
.day2   { grid-area: g2; }
.day3   { grid-area: g3; }
.day4   { grid-area: g4; }
.day5   { grid-area: g5; }
.day6   { grid-area: g6; }
.day7   { grid-area: g7; }
.day8   { grid-area: g8; }
.day9   { grid-area: g9; }
.day10   { grid-area: g10; }
.day11   { grid-area: g11; }
.day12   { grid-area: g12; }
.day13   { grid-area: g13; }
.day14   { grid-area: g14; }
.day15   { grid-area: g15; }
.day16   { grid-area: g16; }
.day17   { grid-area: g17; }
.day18   { grid-area: g18; }
.day19   { grid-area: g19; }
.day20   { grid-area: g20; }
.day21   { grid-area: g21; }
.day22   { grid-area: g22; }
.day23   { grid-area: g23; }
.day24   { grid-area: g24; }
.day25   { grid-area: g25; }
.terms  { grid-area: terms; }


/* pop up props */

/* popup container */
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: scroll;
    background-color: #00000049;
    justify-content: center;
    align-items: center;
}

/* popup content */
.modal-content {
    position: relative;
    margin: auto;
    padding: 0;
    width: 800px;
    max-width: 800px;
    display: block;
    opacity: 0.9;
}

/* close button */
.close {
    color: white;
    position: absolute;
    top: 10px;
    right: 25px;
    font-size: 35px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #cccccc;
    text-decoration: none;
    cursor: pointer;
    transition: ease 0.2s;
}

.mySlides {
    display: none;
}

/* design of popup */
.modalBox {
    width: 100%;
    padding: 50px 20px;
    
    border: 5px solid #ffffff; 
    border-radius: 5px;
    box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.3);
    color: #ffffff; 
    background-color: #c62d2c;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    text-align: center;
}

/* sign up button */
.modalBox button {
    width: 200px;
    background-color: #ffffff;
    color: #d73150;
    border: none;
    outline: none;
    padding: 8px;
    border-radius: 50ch;
    margin-bottom: 20px;

    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: large;
}
.modalBox button:hover {
    cursor: pointer;
    box-shadow: 0px 0px 10px 5px #ffffff5e;
    transition: ease 0.2s;
}

.cursor {
    cursor: pointer;
}


/* day number on top left corner of pop up */
.numbertext {
    color: #f2f2f2;
    font-size: 14px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
}


/* tablet to phone */
@media only screen and (max-width: 1000px) {
    .grid-container {
        max-width: 100%;
        margin: 5vh auto;
        grid-template-columns: 25vw 25vw 25vw;
        grid-template-rows: 25vw 35vw 25vw 25vw 25vw 25vw 25vw 25vw 25vw 25vw 25vw;
        grid-gap: 3vw;
        grid-template-areas:
        'timer  timer   timer'
        'sub    sub     sub'
        'g1     g2      g3'
        'g4     g5      g6'
        'g7     g8      g9'
        'g10    g11     g12'
        'g13    g14     g15'
        'g16    g17     g18'
        'g19    g20     g21'
        'g22    g23     g24'
        'g25    g25     g25';
        
    }

    .title {
        display: none;
    }
    .captionCopy {
        font-size: 7vw;
        font-weight: bold;
        padding: 0 20px;
    }

    .modal-content {
        margin-top: 10vh;
        max-width: 90%;
        max-height: fit-content;
    }

    .modalBox {
        margin-bottom: 10vh;
    }

    #time {
        font-size: 9vw;
    }
    #timerLabel #labels{
        font-size: 3vw;
    }
    #timerLabel .copy{
        font-size: 6vw !important;
    }
    .timebox {
        width: 9vw;
    }
    .timer img {
        max-width: 80% !important;
    }

    .subtitle {
        background-position: center;
    }
    .mob_hidden {
        display: none;
    }
    .padding_15 {
        padding: 15px !important;
    }
}

@media only screen and (max-width: 500px) {
    #timerLabel #labels{
        letter-spacing: 1px;
    }

}