:root {
   /*--accent-color: #2beab6;*/
   /*--accent-color: #7BE740; android*/
   /*--accent-color: #E1FC64;*/
   /*--text-colorBl: #13212F;*/
   /*--text-colorBl: #222;*/
   /*--darkbg-color: #0A121A;*/
   /*--darkbg-color: #222;*/
   --lightBG-color: #eee;
   /*--darkBG-color: #0A121A;*/
   /* --darkBG-color: #202020; */
   --darkBG-color: #7F0799;
   /* --accent-color: #D0FC64; */
   /* --accent-color: #ffef0f; */
   --accent-color: #FFBF46;
   --coloredFeature-color: var(--accent-color);
   /* --otherFeature-color: var(--darkBG-color); */
   --otherFeature-color: var(--darkGray-color);
   /*--otherFeature-color: #2a2c2a;*/
   --featuresBG-color: var(--lightBG-color);
   --textLight-color: #fff;
   --textDark-color: #333;
   --darkGray: #7f0799;
}

html * {
   box-sizing: border-box;
}

@font-face {
   font-family: 'CooperHewitt';
   src: url('font/CooperHewitt-Medium.otf') format('opentype');
   /*src: url('font/Gidole-Regular.ttf') format('opentype');*/
}

@font-face {
   font-family: 'CooperHewitt-Bold';
   src: url('font/CooperHewitt-Bold.otf') format('opentype');
   /*src: url('font/Gidole-Regular.ttf') format('opentype');*/
}

@keyframes bounce {

   0%,
   100%,
   20%,
   50%,
   80% {
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0);
   }

   40% {
      -webkit-transform: translateY(-10px);
      -ms-transform: translateY(-10px);
      transform: translateY(-10px);
   }

   60% {
      -webkit-transform: translateY(-5px);
      -ms-transform: translateY(-5px);
      transform: translateY(-5px);
   }
}

@keyframes bounce2 {

   0%,
   100%,
   20%,
   50%,
   80% {
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0);
   }

   40% {
      -webkit-transform: translateY(8px);
      -ms-transform: translateY(8px);
      transform: translateY(8px);
   }

   60% {
      -webkit-transform: translateY(4px);
      -ms-transform: translateY(4px);
      transform: translateY(4px);
   }
}

@font-face {
   font-family: 'hvd_comic_serif_proregular';
   src: url('font/HVD_Comic_Serif_Pro-webfont.eot');
   src: url('font/HVD_Comic_Serif_Pro-webfont.eot?#iefix') format('embedded-opentype'),
      /* url('font/HVD_Comic_Serif_Pro-webfont.woff') format('woff'), */
      /* url('font/HVD_Comic_Serif_Pro-webfont.ttf') format('truetype'), */
      url('font/HVD_Comic_Serif_Pro-webfont.svg#hvd_comic_serif_proregular') format('svg');
   font-weight: normal;
   font-style: normal;

}

body,
html {
   position: absolute;
   width: 100%;
   height: 100%;
   max-height: 100%;
   overflow-x: hidden;
   margin: 0;
   font-family: 'hvd_comic_serif_proregular', Arial, sans-serif;
}

body {
   /*background-color: #33ccff;*/
   /*background-color: #51D2F1; eigenlab*/
   /*background-color: #71c8f4;*/
   /* background-color: #222; */
   background-color: var(--darkBG-color);
   background-image: url('img/kim_300.png'), url('img/noise_dark.png'); 
   background-size: auto, auto;
   background-clip: content-box;
   opacity = 0.01;
}

div.pageOne {
   position: absolute;
   height: 100%;
   width: 100%;
   left: 0;
   top: 0;
   bottom: 0;
   right: 0;
   margin: 0;
   z-index: 5;
   overflow: hidden;
   align-content: center;
   text-align: center;
   /* box-shadow: 0 -26px 55px 26px rgba(0, 0, 0, .4); */
   /*box-shadow: 0 10px 30px -3px rgba(0, 0, 0, 0.5);*/
   /* border-bottom: 1px solid rgba(255, 255, 255, .4); */
}

div.pageOne #draw {
   cursor: default;
   position: relative;
   min-height: 300px;
   max-height: 80%;
   display: block;
   max-width: 43%;
   top: 50%;
   /* right: 20px; */
   float: right;
   /* left: 50%; */
   transform: translateY(-50%);
}


div#loading {
   display: block;
   position: absolute;
   /*background-color: #111;*/
   background-color: rgba(255, 21, 0, 0);
   /* TODO tricky trick */
   top: 0;
   left: 0;
   right: 0;
   margin: 0;
   width: 100%;
   height: 100%;
   z-index: 10;
   cursor: wait;
}

/* first */
#downlink {
   box-shadow: none;
}

a#smoothscroll {
   display: none;
}

a.smoothscroll {
   position: absolute;
   bottom: 16px;
   left: 20px;
   text-decoration: none;
   height: 27px;
   width: 30px;
   color: rgba(255, 21, 0, 0);
   /*color: #fff;*/
   opacity: 1;
   background: #EF6351;
   /*background: rgba(15,148,245,1);*/
   font-size: 16px;
   padding-top: 3px;
   border-radius: 15px;
   /* box-shadow: 0 1px 10px rgba(0, 0, 0, 0.5); */
   transition: all .4s;
}

a.smoothscroll:hover {
   opacity: .8;
   transform: translateY(3px);
}
/*
div#loading img#loadingGIF {
   position: relative;
   opacity: .8;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   height: 80px;
   width: 80px;
   border-radius: 80px;
   background-color: #000;
   border-bottom: 2px solid rgba(200, 200, 200, 0.2);
   box-shadow: 0 1px 20px -3px rgba(0, 0, 0, 0.5);
   background-image: url('img/loading_opt.svg');
} */

html {
   width: 100%;
   max-width: 100%;
   font-size: .9em;
   /*overflow-x: hidden;*/
}

body {
   position: absolute;
   color: rgba(255, 21, 0, 0);
   text-align: center;
   /* background-color: var(--darkBG-color); */
   background-color: #dba0a0;
   /*background-color: var(--darkGray);*/
   height: auto;
   margin: 0;
   font-family: 'CooperHewitt';
   /* text-shadow: 0 1px 2px rgba(0, 0, 0, .2); */
   /*background-image: url('img/noise_dark.png');*/
   overflow-y: scroll;
   min-height: 100%;
   /*overflow-x: hidden;*/
   overflow-wrap: break-word;
   width: 100%;
}

div#first_page {
   position: absolute;
   margin: 0;
   width: 100%;
   min-height: 100%;
}

div#title_container {
   width: 50%;
   min-height: 100%;
   box-sizing: border-box;
   position: absolute;
   left: 53.5%;
   padding: 20px;
   top: 10px;
   right: 0;
   /*clear: both;*/
   /*display: block;*/
}

h1#title {
   font-family: 'CooperHewitt-Bold';
   position: absolute;
   top: 50%;
   max-width: 25%;
   transform: translateY(-25%);
   font-size: 4em;
   /* text-shadow: 0 3px 20px #000; */
   word-wrap: normal;
   margin: 0;
   margin-right: 0;
   padding: 0;
   transform: translate(20%, 20%);
}

h1#titleDesc {
   font-family: 'CooperHewitt-Bold';
   font-size: 2em;
   word-wrap: normal;
   margin: .2em;
   margin-bottom: .4em;
   text-align: center;
   text-transform: uppercase;
}

h4#subtitleDesc {
   /* font-family: 'CooperHewitt-Bold'; */
   font-family: 'CooperHewitt';
   text-align: center;
   font-size: 1.1em;
   text-transform: uppercase;
}

div#logo img {
    position: absolute;
    max-width: 34%;
    max-width: 34%;
    vertical-align: middle;
    min-width: 190px;
    top: 54%;
    left: 61%;
    /*transform: translate(-50%, -50%);*/
    transition: all .5s;
    padding: 0px 0px;
    box-shadow: 0px 0px 0px 0px #7f0799;
    overflow-y: scroll;
    transform: translate(-15%, -50%);
    transition: all .4s;
    overflow: hidden;
}

@media screen and (max-device-width: 500px)
/* and (orientation: portrait)*/

   {
   h1#title {
      font-size: 2.4em;
   }

   div#title_container {
      /* width: 0; */
      min-height: 0;
      box-sizing: border-box;
      /* position: absolute; */
      left: 50%;
      padding: 0;
      top: 4%;
      right: 0;
      transform: translateX(50%);
   }

   div#logo img {
      top: 0;
      left: 50%;
      transform: translateX(-50%);
   }
}

div#site_description {
   position: absolute;
   max-width: 45%;
   max-height: 80%;
   text-align: justify;
   margin: 5% 0 0 0;
   padding: 20px 30px;
   background: #ffbf46;
   background-image: url('img/noise.png');
   color: var(--textDark-color);
   color: #333;
   box-shadow: 19px 17px 19px 8px #7f079999;
   text-shadow: 12px 11px 3px rgba(0, 0, 0, .2);
   overflow-y: scroll;
   /*border-top: 5px solid rgba(0, 0, 0, 0.2);*/
   /*border-bottom: 5px solid rgba(0, 0, 0, 0.2);*/
   /*border-radius: 4px;*/
   left: 12%;
   top: 42%;
   transform: translate(-15%, -50%);
   transition: all .4s;
   overflow: hidden;
}

@media screen and (max-device-width: 800px) {
   div#site_description {
      overflow: scroll;
   }
}

@media screen and (max-device-width: 500px) {
   div h1#titleDesc {
      font-size: 2em;
   }
   div#site_description {
      margin: 0% 0%;
      top: 60%;
      width: 100%;
      left: 50%;
      max-width: 100%;
      max-height: 40%;
      padding: 20px;
      padding-bottom: 40px;
      margin: 0px;
      /* border-radius: 2px 2px 0 0; */
      transform: translateX(-50%);
      /* background: linear-gradient( 0deg, rgba(208, 252, 100, .4) -5%, rgba(208, 252, 100, 1) 25%); */
   }

   h1#titleDesc {
      font-size: 2em;
   }
}


/*@media screen and (max-device-width: 500px) {
   div#site_description {
     margin: 10% 10%;
     bottom: 0;
     width: 75%;
     max-width: 75%;
   }
}*/


/*div#site_description::after {
   content: "";
   display: block;
   clear: both;
}*/

input {
   display: block;
   padding: 6px 12px;
   width: auto;
   max-width: 200px;
   margin: 20px;
   background: none;
   border: none;
   color: #ef6351;
   opacity: .8;
   text-align: center;
   border-bottom: 1px solid rgba(0, 0, 0, .2);
   font-weight: bold;
   outline: none;
   font-size: 1em;
   font-family: 'CooperHewitt';
   transition: opacity .4s;
   outline: none;
}

input:hover,
input:active,
input:focus {
   border-bottom: 1px solid rgba(0, 0, 0, .5);
   opacity: 1;
}

fieldset {
   position: absolute;
   padding: 20px;
   padding-top: 10px;
   /*margin: 13% 30px 30px 30px;*/
   /*margin: 30px 30px 30px 30px;*/
   margin: 30px 0px 30px 0px;
   border: none;
   color: #ef6351;
   background-color: #fff;
   box-shadow: 0 3px 10px -1px rgba(0, 0, 0, 0.7);
   box-sizing: border-box;
   transition: all .6s;
   clear: both;
   display: block;
}

div#login_form_container {
   /*display: none;*/
   /*position: absolute;
  clear: both;
  display: block;
  max-width: 50%;
  min-width: 300px;
  min-height: 200px;
  bottom: 30px;
  right: 30px;
  margin: 50px 10px;*/
}

fieldset#login {
   width: 1.2em;
   bottom: 0;
   right: 0;
   clear: both;
}

#xmpp_badge {
   position: absolute;
   bottom: 0px;
   left: 50%;
   transform: translateX(-50%);
}

#xmpp_badge img {
   position: relative;
   margin: 10px 20px;
   padding: 0px;
   bottom: 0px;
   /*top: 30px;*/
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
   border-radius: 4px;
   opacity: .85;
}

div#footer {
   position: absolute;
   bottom: 0;
   left: 0;
   z-index: -1;
   width: 100%;
   max-width: 100%;
   min-height: 500px;
   background-color: var(--darkBG-color);
   background-color: #ef6351;
   color: #fff;
   padding: 20px 12px;
   overflow: hidden;
   background-image: url('img/noise_dark.png');
}

/* div#footer div#footer_credits {
  min-height: 200px;
  position: absolute;
  max-width: 40%;
  right: 0;
  margin: 10px;
}

div#footer div#footer_credits img {
  max-width: 100%;
  opacity: .8;
  border-radius: 0;

  transition: opacity .4s;
}

div#footer div#footer_credits img:hover {
  opacity: 1;
} */

fieldset#register {
   position: absolute;
   width: 1em;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
}

@media screen and (max-device-width: 500px)
/* and (orientation: portrait)*/

   {
   fieldset#register {
      /*left: 50%;*/
      top: 50%;
      transform: translate(-50%, -50%);
      margin: 40px 0 50px 0;
      padding: 10px 20px;
   }

   fieldset *,
   fieldset input {
      padding: 8px 10px;
      /*padding-top: 5px;*/
      margin: 10px 14px;
   }
}

button {
   outline: none;
   background: var(--darkBG-color);
   color: #fff;
   background-color: #202020;
   font-weight: bold;
   padding: 10px;
   margin: 8px;
   margin-top: 5px;
   font-size: .8em;
   border: none;
   text-transform: uppercase;
   border-radius: 2px;
   box-shadow: 0 2px 6px -1px rgba(0, 0, 0, .4);
   transition: all .5s;
}

button:hover {
   opacity: .95;
}

button:active {
   transform: scale(.7);
}
a.smoothscroll.dona {
   border-radius: none;
   background: none;
   left: -1px;
}
button.dona {
   opacity: .9;
   background: #6fd08c;
   /* background: rgba(0, 220, 0, .1); */
   color: #222;
   position: relative;
   margin: -1px;
   margin-top: 4px;
   box-shadow: none;
   width: calc(24px + 100%);
   border-radius: 0 0 0 8px;
   left: -17px;
}
button.dona:hover {
   opacity: 1;
}
button.dona:active {
   transform: translateY(2px);
}

/*#loginFormButton {
   position: absolute;
   display: none;
   margin: 10px;
   margin-bottom: 0;
   left: calc(50% - 2.5em);
   padding: 14px;
   padding-top: 4px;
   bottom: 0;
   background: var(--accent-color);
   box-sizing: content-box;
   color: var(--textDark-color);
   background: #eee;
   background-image: url('img/noise.png');
   font-size: 1.2em;
   text-transform: uppercase;
   height: .6em;
   width: auto;
   max-width: 3em;
   right: 1em;
   text-align: center;
   float: right;
   cursor: pointer;
   border-radius: 2px 2px 0 0;
   text-decoration: none;
   z-index: 1001;
   transition: all .4s;
}

#loginFormButton:hover, #loginFormButton:focus {
}

#loginFormButton:active {
}*/

a#register_ref {
   color: #333;
   font-weight: bold;
   text-shadow: none;
   font-size: .9em;
}

div#features {
   box-shadow: 0 0 30px rgba(0, 0, 0, 0.9);
   position: absolute;
   top: 100%;
   margin: 0;
   left: 0;
   /* padding: 8% 10%; */
   box-sizing: border-box;
   /* padding-top: 10px; */
   /* padding-bottom: 5%; */
   /* background-color: var(--featuresBG-color); */
   background-color: #ef6351;
   /* background-color: var(--otherFeature-color); */
   /*background-color: hsl(0, 0%, 25%);*/
   background-image: url('img/noise.png');
   width: 100%;
   /*margin-bottom: 300px; */
}

div#features div.feature {
   margin: 0px;
   padding: 25px 12% 20px 12px;
   /* padding-top: 15px; */
   /* box-shadow: 0 4px 20px -8px rgba(0, 0, 0, .55); */
   width: 100%;
   position: relative;
   /* text-shadow: 0 1px 3px rgba(0, 0, 0, .3); */
   min-height: auto;
   word-break: normal;
   word-spacing: normal;
   word-wrap: normal;
   transition: all .5s;
}
div#features div.feature:not(.image):not(video) {
   /* z-index: 10000; */
   /* box-shadow: 0 0 50px #000; */
}
/* div#features div.feature {
   margin: 40px 30px;
   padding: 20px 30px;
   padding-top: 15px;
   box-shadow: 0 4px 20px -8px rgba(0, 0, 0, .55);
   text-shadow: 0 1px 3px rgba(0, 0, 0, .3);
   min-height: 200px;
   word-break: normal;
   word-spacing: normal;
   word-wrap: normal;
   transition: all .5s;
   font-size: .9em;
} */

div#features div.feature.image {
   width: calc(20px + 100%);
   min-width: 100%;
   padding: 0;
   margin: -10px -10px -10px -10px;
   /* margin: 0; */
   left: 50%;
   transform: translateX(-50%);
   /* background-repeat: no-repeat; */
   /* background-clip: content-box; */
   /* box-shadow: 0 2px 20px 30px rgba(0, 0, 0, 1) inset; */
}
/* div#features div.feature.image img {
   max-width: 100%;
   height: 100%;
   max-height: 400px;
   background-size: cover;
   margin: 0;
   left: 0;
   right: 0;
   width: 100%;
   vertical-align: middle;
   background-size: 100% 100%;
} */


/* responsive */
@media (orientation: landscape) {
   div#features div.feature.image {
      background-size: 100% auto;
      height: 300px;
   }
   div#features div.feature {
      min-height: 70px;
   }
   div#features div.feature.image#img5 {
      height: 320px;
      background-size: 100% auto;
   }
}
@media (orientation: portrait) {
   div#features div.feature.image {
      /* height: 120px; */
      background-size: 100% auto;
   }
   div#features div.feature {
      min-height: 140px;
   }
   div#features div.feature.image#img5 {
      height: 220px;
      background-size: cover;
   }
}

#img1 {background-image: url('images/1.png');}
#img2 {background-image: url('images/pisagiu.png');}
#img3 {background-image: url('images/3.png');}
#img4 {background-image: url('images/4.png');}
#img5 {background-image: url('images/5.png');}
#img6 {background-image: url('images/pannello_ruzze.jpg');}

@media screen and (max-device-width: 500px)
/* and (orientation: portrait)*/

   {
   div#features {
      padding: 0;
      padding-bottom: 0;
      margin-bottom: 0;
   }

}

div#features div.feature.video  {
   /* min-height: 500px; */
   background-color: #ffbf46;
   z-index: 1000;
   background-image: url('img/noise.png');
}
div#features div.feature.video video {
   position: absolute;
   width: 100%;
   /*height: 100%;*/
   /*min-height: 300px;*/
   left: 0;
   top: 0;
}
/* @media screen and (max-device-width: 560px) {

} */

div#features div.right-feature {
   background-image: url('img/noise.png');
}
div#features div.left-feature {
   background-image: url('img/noise.png');
}

div#features div.feature.feature_desc {
   max-width: 40%;
}

h1 {
   text-transform: uppercase;
   text-shadow: 0 1px 2px rgba(0, 0, 0, .15);
   font-weight: bold;
   font-family: 'CooperHewitt-Bold';
   font-weight: 900;
   /*white-space: nowrap;*/
}

div#features div.left-feature {
   /* background-color: var(--otherFeature-color); */
   background-color: #ffbf46;
   color: var(--textLight-color);
   /* background: #202020; */
   color: #333;
   /* margin-left: 12%; */
   /* padding-left: 12%; */
   padding: 60px 12%;
   text-align: left;
}

div#features div.right-feature {
   background-color: #e89191;
   color: var(--textDark-color);
   /* background: #D0FC64; */
   color: #111;
   /* margin-right: 12%; */
   padding: 60px 12%;
   text-align: right;
}

div#features div.right-feature a,
#site_description a {
   color: var(--darkGray);
}

div#features div.left-feature a {
   color: ##c65555;
}


div#features div.feature img {
   width: 40%;
   height: auto;
   max-height: 160px;
   max-width: 160px;
   text-align: center;
   position: relative;
   top: 0;
   padding: 0;
   margin: 0;
}

div#features div.left-feature img {
   float: right;
}

div#features div.right-feature img {
   float: left;
}

div#features div.feature div#oss {
   position: relative;
   height: auto;
   min-height: 40px;
   padding: 0;
   left: 0;
   margin: 20px 10px 0px 10px;
   display: inline-block;
   bottom: 0;
}

div#features div.feature span img {
   height: 30px;
   width: 30px;
   padding: 1px;
   margin: 2px;
   opacity: .3;
   transition: opacity .3s;
}

div#features div.feature span img:hover,
div#features div.feature span img:active {
   opacity: 1;
}

a.smoothscroll {
   position: relative;
   bottom: 0;
   left: 0;
   margin: 50px 0 20px 0;
   padding: 5px 7px;
   box-sizing: content-box;
   font-size: 12px;
   height: 40px;
   width: 20px;
   border-radius: 20px;
   cursor: pointer;
   text-decoration: none;
   transform: none;
   z-index: 1001;
   transition: all .4s;
   text-align: center;
   font-family: Arial;
}

div#features div.feature.right-feature a.smoothscroll {
   background:var(--coloredFeature-color);
   color:  var(--darkGray); 
   /* background: #202020; */
   /* color: var(--accent-color); */
}

div#features div.feature.left-feature a.smoothscroll {
   background: var(--darkGray);
   color: var(--coloredFeature-color);
}

#downlink {
   position: absolute;
   bottom: -1px;
   margin: 10px;
   margin-bottom: 0;
   left: calc(50% - 3em);
   padding: 14px;
   padding-top: 4px;
   box-sizing: content-box;
   /* background: var(--featuresBG-color); */
   /* background: #cdcdcd; */
   /* background: var(--accent-color); */
   background-color: #a8d5f8;
   color: var(--textDark-color);
   color: #333;
   /* background-image: url('img/noise.png'); */
   height: .65em;
   width: 2em;
   text-align: center;
   cursor: pointer;
   border-radius: 2px 2px 0 0;
   text-decoration: none;
   /* text-shadow: 0 1px 5px rgba(0, 0, 0, .2); */
   z-index: 999;
   transition: all .4s;
   animation: bounce2 2s 10 3s ease-out;
}

#downlink:hover,
#downlink:focus {
   transform: scaleX(.9);
}

#downlink:active {
   transform: scaleX(.8);
}



/* TOOLTIPS FROM BOOTSTRAP*/

.tooltip {
   position: absolute;
   z-index: 1070;
   display: block;
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 12px;
   font-style: normal;
   font-weight: normal;
   line-height: 1.42857143;
   text-align: left;
   text-align: start;
   text-decoration: none;
   text-shadow: none;
   text-transform: none;
   letter-spacing: normal;
   word-break: normal;
   word-spacing: normal;
   word-wrap: normal;
   white-space: normal;
   filter: alpha(opacity=0);
   opacity: 0;
   line-break: auto;

   transition: opacity .3s;
}

.tooltip.in {
   filter: alpha(opacity=95);
   opacity: .95;
}

.tooltip.top {
   padding: 5px 0;
   margin-top: -3px;
}

.tooltip-inner {
   max-width: 200px;
   padding: 12px 18px;
   color: #333;
   text-align: center;
   background-color: #f5f5f5;
   border-radius: 2px;
   border-bottom: 2px solid #cfcfcf;
   box-shadow: 0 3px 20px -4px rgba(0, 0, 0, .5);
   margin: 20px;
   margin-bottom: 0px;
}

div.right-feature .tooltip-inner {
   border-bottom: 2px solid #000;
   background: #101010;
   color: #eee;
}

.tooltip-arrow {
   position: absolute;
   width: 0;
   height: 0;
   border-color: transparent;
   border-style: solid;
}

.tooltip.top .tooltip-arrow {
   bottom: 1px;
   left: 50%;
   margin-left: -5px;
   border-width: 5px 5px 0;
   border-top-color: #cfcfcf;
}

div.right-feature .tooltip.top .tooltip-arrow {
   border-top-color: #000;
}


/* MONEY METER */
div#countdown {
   position: fixed;
   top: 0px;
   right: 0px;
   margin: 0;
   padding: 8px 12px 0px 12px;
   /* background-color: rgba(0, 0, 0, .8); */
   background-color: var(--darkGray);
   opacity: .8;
   color: #fff;
   box-shadow: 0 2px 30px -10px rgba(0, 0, 0, 0.7);
   border-radius: 0 0 0 9px;
   text-align: center;
   border: none;
   z-index: 10000;
   text-shadow: none;
   border-bottom: 1px solid rgba(25, 25, 25, 0.1);
   vertical-align: middle;
   transition: all .4s;
}
div#countdown:hover,
div#countdown:active {
   opacity: 1;
}

#countsoldi {
   font-weight: 500;
   font-size: 20px;
   vertical-align: middle;
   color: #111;
   background-color: #6fd08c;
   padding: 5px 4px 0px 4px;
   border-radius: 4px;
   margin-left: 4px;
}
#target {
   font-size: 10px;
}

@media screen and (max-device-width: 500px) {
   #logo {
      position: absolute;
      left: 0;
      display: block;
      top: 90px;
      max-height: calc(60% - 100px);
      z-index: 0;
      /* transform: translateY(30px); */
   }

   div.pageOne #draw {
      max-width: none;
      z-index: 1;
   }

   div#features div.left-feature,
   div#features div.right-feature {
      margin: 0;
      bottom: 0;
      padding: 12px 30px 20px 30px;
      text-align: justify;
   }

   div#features div.feature h1 {
      font-size: 1.8em;
   }

   div#features div.feature img {
      margin: 20px;
      margin-top: 5px;
      text-align: center;
   }
   #loginFormButton {
      /*display: block;*/
      bottom: 80px;
      right: calc(0px - 1.7em);
      transform: rotate(-90deg);
   }

   #downlink {
      background: var(--darkGray);
      color: var(--accent-color);
      /* background-color: #a8d5f8; */
      /* background: #D0FC64; */
   }
   div#title_container {
      position: fixed;
      z-index: 100000;
   }
   div#countdown {
      margin: 0px;
      width: 200%;
      left: -50%;
      transform: translateX(-50%);
      right: 0;
      top: -27px;
      padding-top: 8px;
      border-radius: 0;
      opacity: .94;
      box-shadow: 0 2px 35px -5px rgba(0, 0, 0, 0.7);
   }
   div#countdown button {
      border-radius: 0;
   }
   div#features {
      box-shadow: 0 0 30px -8px rgba(0, 0, 0, 0.7);
   }
}