/* Import font from Google - Go to fonts.google.com, select a font and look for the import command */

@import url('https://fonts.googleapis.com/css2?family=Georama:wght@100&display=swap');

/* Change some root colors and settings of the document */

:root {

    --cassiopeia-color-primary: #3177cc;
    --cassiopeia-color-link: #2a69b8;
    --cassiopeia-color-hover: #1f39b1;
    --dt-primary: #2d305fff;
    --dt-secondary: #25a9b0ff;
    --dt-alternate: #22d4cb;
}

/* +-----------------------------------+
   +            GRID-GAP               +  
   +-----------------------------------+ */
@supports (display:grid) {
    .site-grid {
        grid-gap: 0 0.5em;
        /*grid-gap: 0 1em;*/
        display: grid;
        grid-template-areas: ". banner banner banner banner ." ". top-a top-a top-a top-a ." ". top-b top-b top-b top-b ." ".
 comp comp comp comp ." " . side-r side-r side-r side-r ." " . side-l side-l side-l side-l ." " . bot-a bot-a bot-a bot-a ."
 ". bot-b bot-b bot-b bot-b .";
        grid-template-columns: [full-start] minmax(0, 1fr) [main-start] repeat(4, minmax(0, 19.875rem)) [main-end] minmax(0,
                1fr) [full-end]
    }

/* +-----------------------------------+
   +         DESIGN ELEMENTS           +  
   +-----------------------------------+ */
    .dt-mockup {
        position: absolute;
        z-index: 10;
    }

    .dt-hero-bg {
        position: absolute;
        top: 0px;
        bottom: -80px;
        width: 100%;
        z-index: 0;
    }

    .dt-container {
        z-index: 5;
    }

    .dt-swoop {
        position: absolute;
        bottom: -400px;
        left: 0px;
        z-index: 9;
        width: 100%;
        -webkit-transform: scaleX(-1);
        -ms-transform: scaleX(-1);
        transform: scaleX(-1);
    }

    .dt-footer {
        position: absolute;
        top: -500px;
        z-index: -1;
        -webkit-transform: scaleX(3);
        -ms-transform: scaleX(3);
        transform: scaleX(3);
    }

    /*
@media only screen and (max-width: 1080px) {
  .dt-footer {
  position: absolute;
  bottom: 600px;
  z-index: -1;
  width: 100%;
  -webkit-transform: scaleX(5.2) scaleY(5.2);
  -ms-transform: scaleX(5.2) scaleY(5.2);
  transform: scaleX(5.2) scaleY(5.2);   
}
}

@media only screen and (max-width: 500px) {
  .dt-footer {
  position: absolute;
  bottom: 547px;
  z-index: -1;
  width: 100%;
  -webkit-transform: scaleX(5) scaleY(5);
  -ms-transform: scaleX(5) scaleY(5);
  transform: scaleX(5) scaleY(5);   
}
}
*/

/*+-----------------------------------+
  +             BUTTONS               +  
  +-----------------------------------+ */
    .read-more-btn {
        color: #000000;
        background: #22d4cb;
        -webkit-box-shadow: 0px 1px 3px #666666;
        -moz-box-shadow: 0px 1px 3px #666666;
        box-shadow: 0px 1px 3px #666666;
        width: 115px;
        font-family: Roboto;
        font-size: 14px;
        padding: 10px 20px 10px 20px;
        text-decoration: none;
    }

    .read-more-btn a:link {
        color: #000000;
        text-decoration: none;
    }

    .read-more-btn a:visited {
        color: #000000;
        text-decoration: none;
    }

    .read-more-btn:hover {
        background: #49A0A5;
        text-decoration: none;
    }

    .read-more-btn-sm:link,
    visited,
    active {
        background: #22d4cb;
        -webkit-box-shadow: 0px 1px 3px #666666;
        -moz-box-shadow: 0px 1px 3px #666666;
        box-shadow: 0px 1px 3px #666666;
        width: 90px;
        font-family: Roboto;
        color: #000000;
        font-size: 12px;
        padding: 5px 10px 5px 10px;
        text-decoration: none;
    }

    .read-more-btn-sm:hover {
        background: #49A0A5;
        text-decoration: none;
    }

    .dt-link a:hover {
        color: #22d4cb;
    }

/* +-----------------------------------+
   +          MODULES STYLES           +  
   +-----------------------------------+ */
  

    .container {
        color: #ffffff;
        margin: 0 auto;
        text-align: center;
    }

    h1 {
        font-weight: normal;
        letter-spacing: .125rem;
        text-transform: uppercase;
    }

    li {
        display: inline-block;
        font-size: 1.5em;
        list-style-type: none;
        padding: 1em;
        text-transform: uppercase;
    }

    li span {
        display: block;
        font-size: 4.5rem;
    }

    .emoji {
        display: none;
        padding: 1rem;
    }

    .emoji span {
        font-size: 4rem;
        padding: 0 .5rem;
    }

    @media all and (max-width: 768px) {
        h1 {
            font-size: calc(1.5rem * var(--smaller));
        }

        li {
            font-size: calc(1.125rem * var(--smaller));
        }

        li span {
            font-size: calc(3.375rem * var(--smaller));
        }
    }

    .dt-card {
        -webkit-box-shadow: 0px 0px 1.25em -0.25em rgba(34, 217, 208, 0.7);
        box-shadow: 0px 0px 1.25em -0.25em rgba(34, 217, 208, 0.7);
        border-right: 0.05em solid rgba(45, 46, 94, 1);
        border-top: 0.05em solid rgba(45, 46, 94, 1);
        border-left: 0.05em solid rgba(45, 46, 94, 1);
        border-bottom: 0.25em solid rgba(45, 46, 94, 1);
        color: #ffffff;
    }
  
      .dt-count {
        -webkit-box-shadow: 0px 0px 1.25em -0.25em rgba(34, 217, 208, 0.7);
        box-shadow: 0px 0px 1.25em -0.25em rgba(34, 217, 208, 0.7);
		border: 3px;
        height: 100%;
        width: 100%;
        border-radius:50%;
    	-moz-border-radius:50%;
    	-webkit-border-radius:50%;
    }

    .dt-img {
        min-width: 500px;
    }

    .dt-about {
        width: 600px;
        margin: auto;
        margin-bottom: 100px;
    }

    .dt-about {
        margin-bottom: 100px;
    }

    .dt-contact {
        padding-top: 50px;
        padding-bottom: 100px;
        margin: auto;
    }

    .dt-mobile {
        padding-top: 100px;
        padding-bottom: 100px;
        margin: auto;
    }

    .dt-center {
        margin: auto;
    }
  
  .dt-width {
    max-width: 800px;
  }

    .dt-list-group {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }

    .dt-list-item {
        margin-bottom: 15px;
        padding-left: 42px;
    }

    .dt-list-item-content {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    .dt-debug {
        background: rgba(36, 36, 36, .9);
    }

/* +-----------------------------------+
   +       BACKGROUND ELEMENTS         +  
   +-----------------------------------+ 
@media only screen and (min-width: 48em)
#cards .triangles {
top: -3.05em;
}
@media only screen and (min-width: 667px)
#cards .triangles {
top: -0.3em;
}
@media only screen and (min-width: 400px)
#cards .triangles {
top: -1.3em;
}
@media only screen and (min-width: 0em)
#cards .triangles {
position: absolute;
z-index: 101;
-webkit-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg);
top: -2.15em;
width: 30em;
height: auto;
display: block;
left: -1.5em;
opacity: 1;
}

@media screen and (min-width: 1026px)
.mock-up {
position: absolute;
width: 700px;
right: 0;
bottom: -270px;
}

@media screen and (min-width: 1026px)
.desktop-display {
display: block;
}
.desktop-display {
display: none;
}
.desktop-display {
display: none;
}
@media screen and (min-width: 1025px)
.desktop-display {
display: block;
}
*/

/*COUNTDOWN TIMER CSS*/
.countdown-container {
  display: flex;
  width: 100%;
  max-width: 70%;
  justify-content: space-between;
}

.days-container,
.hours-container,
.minutes-container, 
.seconds-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgba(0,0,0,0.1);
  border: 5px solid rgba(255,255,255,0.3);
  width: 140px;
  height: 140px;
  border-radius: 99px;
}

.days,
.hours,
.minutes,
.seconds {
  font-size: 2.5em; 
  margin: 10px 0;
}


.days-label,
.hours-label,
.minutes-label,
.seconds-label {
  text-transform: uppercase;
  margin-bottom: 5px;
}

@media (max-width: 800px) {
  
  .countdown-container {
    max-width: 90%;
  }
  
  .days-container,
  .hours-container,
  .minutes-container, 
  .seconds-container {
    font-size: 0.8em;
    width: 100px;
    height: 100px;
  }
}

  
}