html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1; margin:0; 
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

canvas { pointer-events:none;}

* {
  box-sizing: border-box;
}

html, body {
  font-family: 'Lato', sans-serif;
  font-weight: 400;    height:100%;

}
body { overflow-x: hidden;
  padding:20px 0;background: url(../images/bg2.png) no-repeat bottom / cover; background-attachment: fixed; }


.cloud {display:block; position:fixed; }
.cloud1 { animation:leftToRight 40s infinite linear;  width:200px; top:100px; left:0; }
.cloud2 { animation:leftToRight 60s infinite linear 6s;  width:100px; top:200px;left:-200px;  }
.cloud3 { animation:leftToRight 50s infinite linear 12s;  width:140px; top:280px;left:-140px;  }
.cloud4 { animation:rightToLeft 40s infinite linear 4s;  width:140px; top:220px;right:-140px;  }
.cloud5 { animation:rightToLeft 60s infinite linear 14s;  width:100px; top:120px;right:-100px;  }
.cloud6 { animation:rightToLeft 50s infinite linear;  width:340px; top:-40px;right:-240px;  }

@keyframes leftToRight {
  0% {left: -200px}
  100% {left: 105% }

}
@keyframes rightToLeft {
  0% {right: -200px}
  100% {right: 105% }

}
/* === car animation ====== */

.car { width:340px; position: fixed; left:-340px; bottom:20px;animation:drive 5s infinite linear;   }
.carBody { width:100%; }
.wheel { width:58px; position: absolute; bottom:6px; animation:spin 1.4s infinite linear; }
.wheelBack {left:28px; }
.wheelFront {left:255px; }

@keyframes drive {
  0% {left:-300px}
  100% {left:110%; }

}

@keyframes spin {
  0% {transform:rotate(0deg) }
  100% {transform:rotate(359deg) }

}

@media screen and (min-width:400px) {
  .car { animation-duration:10s } 
}
@media screen and (min-width:768px) {
  .car { animation-duration:10s } 

}
@media screen and (min-width:1024px) {
  .car { animation-duration:20s } 

}


h1 {
  font-size: 35px;
  margin: 0;
  padding: 50px 0;
  text-align: center;
  color: white;
  text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.3);
}
h1 em {
  font-weight: 500;
}
.logo { width:90%; max-width: 600px; margin: 0 auto; display: block ; }

.popupBanner {display:block;  }

.popupBanner img { border-radius: 20px; width:100%; max-width: 450px; display:block;height:auto; box-shadow: 0 0 10px rgba(255,255,255,1), 0 0 30px rgba(255,255,255,0.8); }

@media screen and (max-width:500px) {
  .popupBanner img {  }
}
#modal {
  position: fixed;
  z-index: 100;
  top: -100%;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 168, 143, 0.8);
}
#modal .wrapper {
  height: 100%;
  width: 100%;
 margin-right: 
}
#modal .wrapper .content {
   display: flex; align-items:center; justify-content:center;
  
  position: relative;
  height: 100%;
  width: 100%;
}
#modal .wrapper .content .close {
  position: absolute;
  height: 50px;
  width: 50px;
  top: 15px;
  right: 15px;
  transform: rotate(45deg);
}
#modal .wrapper .content .close:before {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  margin-left: -2px;
  height: 0%;
  width: 4px;
  background: rgba(255, 255, 255, 1);
}
#modal .wrapper .content .close:after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  margin-top: -2px;
  width: 0%;
  height: 4px;
  background: rgba(255, 255, 255, 1);
}
#modal .wrapper .content .box {
  text-align: center;
  width: 100%;
  max-width: 450px;
  background: white;
  border-radius: 20px;
  margin: 0 auto;
  transform: scale(0);
}
@media screen and (max-width:500px) {

  #modal .wrapper .content .box {  max-width:90%;
  }

}


#modal .wrapper .content .box h2 {
  font-size: 25px;padding: 50px 50px 0 50px; 
  line-height: 35px;
  font-weight: 300; text-align:center;
  margin-bottom: 25px;
}
#modal .wrapper .content .box p {
  font-size: 16px; text-align: center;
  line-height: 22px;padding: 0 50px 0 50px;
  
}

#modal .wrapper .content .box a.button {
  display: inline-block;
  padding: 15px;
  color: white;
  text-decoration: none;
  background-color: #dc453a;
  border-radius: 5px;
  margin-bottom:50px;margin-top:25px;
  transition: 0.25s ease-in-out;
}
#modal .wrapper .content .box a.button:hover {
  background-color:#c12d22;
}
#modal.active {
  top: 0%;
  animation: fadeIn 0.25s ease-in-out;
}
#modal.active.moveOut {
  animation: fadeOut 0.25s ease-in-out;
}
#modal.active .wrapper .content .box {
  -webkit-animation: scaleUp 750ms 0.25s linear both;
  animation: scaleUp 750ms 0.25s linear both;
}
#modal.active .wrapper .content .close:before {
  height: 100%;
  transition: 0.25s 0.5s ease-in-out;
}
#modal.active .wrapper .content .close:after {
  width: 100%;
  transition: 0.25s 0.25s ease-in-out;
}
#modal.active .wrapper .content .close:hover {
  cursor: pointer;
}
#modal.active .wrapper .content .close:hover:before, #modal.active .wrapper .content .close:hover:after {
  transition: 0.25s 0s ease-in-out;
  background: white;
}

#calendar {
  width: 95%;
  margin:0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap:wrap;
  position: relative;
  overflow: hidden;
  background: none;
  z-index: 0; padding-top:20px;
}

#calendar .day {
  width: 100%;
  padding-bottom: 20%;
  height: 0px;
  margin-bottom:4%;
  border-radius:0  10px 10px 0;
  position: relative;
  border:2px dashed rgba(0,0,0,0.2);
    border-left-style:solid;
  transition:all 0.2s ease;
  background:rgba(0,0,0,0.1);
}
@media screen and (min-width:400px) {
  #calendar .day {  width: 48%; padding-bottom: 25%; margin-bottom:4%;}
}
@media screen and (min-width:768px) {
  #calendar .day {  width: 31%;padding-bottom: 16%;margin-bottom:3%; }
}
@media screen and (min-width:1024px) {
  #calendar .day {  width: 15%; padding-bottom: 10%; margin-bottom:2%;  }

}



#calendar .day p {  text-shadow:0 0 10px rgba(0,0,0,0.4); font-size:50px; color:#fff;border-radius:80px; width:80px; line-height:80px; height:80px; text-align:center; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);}
#calendar .day.today p { background:red;}
#calendar .day.past { background:rgba(15,154,135, 0.2)}
#calendar .day.today { background:rgba(15,154,135, 0.2); animation: bounce 1.4s infinite;}
#calendar .day.future  { background:rgba(0,0,0, 0.1);}

@keyframes bounce {
  0% {background-color: rgba(15,154,135, 0.2);}
  50% {background-color: rgba(15,154,135, 1);}
  100% {background-color: rgba(15,154,135, 0.2);}

}


#calendar .day .date {
  display: none;
  border-radius: 100%;
  height: 44px;
  width: 44px; font-weight:bold;
  text-align: center;
  line-height: 25px;
  font-size: 20px;
  color: #fff;
}
#calendar .day .date.today {
  color: white;
  background: #cd1b1b;
}
#calendar .day .surprise {
  display: none;
}

#calendar .day:hover {
  background:rgba(15,154,135, 0.7);
  cursor:pointer; animation:none;
}

#bottom {
  position: fixed !important;
  height: 0;
  width: 100%;
  bottom: 0;
  left: 0;
}

@keyframes fadeIn {
  0% {
    top: 0%;
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes scaleUp {
  0% {
    -webkit-transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  3.2% {
    -webkit-transform: matrix3d(0.345, 0.098, 0, 0, 0.065, 0.345, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(0.345, 0.098, 0, 0, 0.065, 0.345, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  4.5% {
    -webkit-transform: matrix3d(0.485, 0.163, 0, 0, 0.107, 0.485, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(0.485, 0.163, 0, 0, 0.107, 0.485, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  6.41% {
    -webkit-transform: matrix3d(0.673, 0.242, 0, 0, 0.158, 0.673, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(0.673, 0.242, 0, 0, 0.158, 0.673, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  9.01% {
    -webkit-transform: matrix3d(0.88, 0.288, 0, 0, 0.188, 0.88, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(0.88, 0.288, 0, 0, 0.188, 0.88, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  12.71% {
    -webkit-transform: matrix3d(1.064, 0.241, 0, 0, 0.159, 1.064, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.064, 0.241, 0, 0, 0.159, 1.064, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  13.51% {
    -webkit-transform: matrix3d(1.087, 0.221, 0, 0, 0.146, 1.087, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.087, 0.221, 0, 0, 0.146, 1.087, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  17.92% {
    -webkit-transform: matrix3d(1.139, 0.105, 0, 0, 0.07, 1.139, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.139, 0.105, 0, 0, 0.07, 1.139, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  18.92% {
    -webkit-transform: matrix3d(1.137, 0.082, 0, 0, 0.055, 1.137, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.137, 0.082, 0, 0, 0.055, 1.137, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  25.23% {
    -webkit-transform: matrix3d(1.075, -0.001, 0, 0, -0.001, 1.075, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.075, -0.001, 0, 0, -0.001, 1.075, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  29.03% {
    -webkit-transform: matrix3d(1.032, -0.015, 0, 0, -0.01, 1.032, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.032, -0.015, 0, 0, -0.01, 1.032, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  31.43% {
    -webkit-transform: matrix3d(1.012, -0.017, 0, 0, -0.011, 1.012, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.012, -0.017, 0, 0, -0.011, 1.012, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  34.63% {
    -webkit-transform: matrix3d(0.994, -0.014, 0, 0, -0.01, 0.994, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(0.994, -0.014, 0, 0, -0.01, 0.994, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  40.14% {
    -webkit-transform: matrix3d(0.985, -0.007, 0, 0, -0.005, 0.985, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(0.985, -0.007, 0, 0, -0.005, 0.985, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  56.46% {
    -webkit-transform: matrix3d(1, 0.001, 0, 0, 0.001, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0.001, 0, 0, 0.001, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  62.36% {
    -webkit-transform: matrix3d(1.002, 0.001, 0, 0, 0, 1.002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.002, 0.001, 0, 0, 0, 1.002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  81.48% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  84.68% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  100% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
}
@keyframes scaleUp {
  0% {
    -webkit-transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  3.2% {
    -webkit-transform: matrix3d(0.345, 0.098, 0, 0, 0.065, 0.345, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(0.345, 0.098, 0, 0, 0.065, 0.345, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  4.5% {
    -webkit-transform: matrix3d(0.485, 0.163, 0, 0, 0.107, 0.485, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(0.485, 0.163, 0, 0, 0.107, 0.485, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  6.41% {
    -webkit-transform: matrix3d(0.673, 0.242, 0, 0, 0.158, 0.673, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(0.673, 0.242, 0, 0, 0.158, 0.673, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  9.01% {
    -webkit-transform: matrix3d(0.88, 0.288, 0, 0, 0.188, 0.88, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(0.88, 0.288, 0, 0, 0.188, 0.88, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  12.71% {
    -webkit-transform: matrix3d(1.064, 0.241, 0, 0, 0.159, 1.064, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.064, 0.241, 0, 0, 0.159, 1.064, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  13.51% {
    -webkit-transform: matrix3d(1.087, 0.221, 0, 0, 0.146, 1.087, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.087, 0.221, 0, 0, 0.146, 1.087, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  17.92% {
    -webkit-transform: matrix3d(1.139, 0.105, 0, 0, 0.07, 1.139, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.139, 0.105, 0, 0, 0.07, 1.139, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  18.92% {
    -webkit-transform: matrix3d(1.137, 0.082, 0, 0, 0.055, 1.137, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.137, 0.082, 0, 0, 0.055, 1.137, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  25.23% {
    -webkit-transform: matrix3d(1.075, -0.001, 0, 0, -0.001, 1.075, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.075, -0.001, 0, 0, -0.001, 1.075, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  29.03% {
    -webkit-transform: matrix3d(1.032, -0.015, 0, 0, -0.01, 1.032, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.032, -0.015, 0, 0, -0.01, 1.032, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  31.43% {
    -webkit-transform: matrix3d(1.012, -0.017, 0, 0, -0.011, 1.012, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.012, -0.017, 0, 0, -0.011, 1.012, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  34.63% {
    -webkit-transform: matrix3d(0.994, -0.014, 0, 0, -0.01, 0.994, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(0.994, -0.014, 0, 0, -0.01, 0.994, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  40.14% {
    -webkit-transform: matrix3d(0.985, -0.007, 0, 0, -0.005, 0.985, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(0.985, -0.007, 0, 0, -0.005, 0.985, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  56.46% {
    -webkit-transform: matrix3d(1, 0.001, 0, 0, 0.001, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0.001, 0, 0, 0.001, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  62.36% {
    -webkit-transform: matrix3d(1.002, 0.001, 0, 0, 0, 1.002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.002, 0.001, 0, 0, 0, 1.002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  81.48% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  84.68% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  100% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
}