/*custom css */

html {
  position:relative;
}

body {
  font-family: 'Comfortaa', cursive;
  background-color: transparent;
  z-index: -100;
  /*for later font-family: 'Nunito Sans', sans-serif;*/
}

h1 {
  font-family: 'Nunito Sans', sans-serif;
  text-transform: uppercase !important;
}

h2 {
  font-family: 'Comfortaa', cursive !important;
}

hr {
  border: 2px solid #68bca3 !important;
}

.gc-navbar {
  font-family: 'Nunito Sans', sans-serif;
  display: flex;
  color: white;
  background-color: transparent;
  list-style: none;
}

.gc-navbar li a {
  display: inline;
  border-radius: 500px;
  margin-left: 10px;
  padding: 12px 30px 8px 30px;
  text-transform: uppercase;
  background-color: transparent;
}

.gc-navbar li a:hover {
  background-color: #68bca3;
  text-decoration: none;
}

.anchor {
  display: block;
  position: relative;
  top: -150px;
  visibility: hidden;
}

.teaser {
  height: 30em;
  text-align: center;
}

.bg-teal { background-color: #68bca3; }
.bg-orange { background-color: #ff761a; }
.bg-red { background-color: #d15534; }
.bg-brown { background-color: #544a3d; }
.bg-dark { background-color: #2f343a; }
.bg-purple { background-color: #432935; }
.bg-yellow { background-color: #f2bc00; }
.bg-blue { background-color: #7289da; }
.bg-gray { background-color: #505354; }

.interlude {
  background-color: transparent;
  min-height: 150px;
  margin-top: 100px;
  margin-bottom: 50px;
}

.ribbon-container {
  position: absolute;
  max-height: 0px;
  width: 100%;
}

.ribbon-top {
  position: relative;
  width: 100%;
  height: 150px;
}

.ribbon-bottom {
  position: relative;
  width: 100%;
  height: 150px;
}

.ribbon-left {
  position: relative;
  transform: skew(0deg, -1deg);
}

.ribbon-right {
  position: relative;
  transform: skew(0deg, 1deg);
}

.ribbon-content {
  position: relative;
  padding-top: 20px;
}

.ribbon-footer {
  position: relative;
  top: 50px;
  min-height: 120px;
}

.about-box-top {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  font-family: 'Nunito Sans', sans-serif;
  text-transform : uppercase;
  font-size: 110%;
  padding: 12px 20px;
}

.about-box-bottom {
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  padding: 20px;
  min-height: 160px;
}

.tinted-crowd {
  position: absolute;
  right: 20px;
}

.kerry-img {
  max-height: 269px;
}

.roadmap-column {
  position: relative;
  border: 3px solid white;
  border-radius: 12px;
  margin-bottom: 24px;
  z-index: 1;
}

.rm-stripe {
  position: absolute;
  top: 0px;
  bottom:0px;
  background-color: #88888888;
  width: 60px;
  margin-left: 45px;
  z-index: -1;
}

.rm-block {
  height: 84px;
  margin: 24px 0px;
}

.roadmap-item {
  font-family: 'Nunito Sans', sans-serif;
  color: #f2bc00;
  font-size: 14px;
  text-transform: uppercase;
  margin: 0px;
}

.roadmap-item-done {
    color: #a28c00;
}

.roadmap-item-overlay {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 250%;
    color: #7bff52b0;
    text-align: center;
    height: 87%;
    width: 100%;
    border-radius: 8px;
    position: relative;
    overflow: auto;
    top: 0px;
    left: 0px;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1;
    padding-top: 10px;
    margin-left: -2px;
    margin-top: -2px;
    border: 2px #7bff52 solid;
}

.roadmap-desc {
  font-size: 12px;
  margin: 0px;
}

.roadmap-desc-done {
    color: #a3a3a3;
}

.roadmap-column-head {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  padding: 8px 12px;
  font-size: 110%;
  text-transform: uppercase;
}

.roadmap-column-body {
  padding: 6px 12px;
}

.roadmap-icon {
  float: left;
  margin-right: 10px;
  width: 120px;
  height: 80px;
  border: 2px solid white;
  border-radius: 8px;
  background-image: url("../img/roadmap_icons.png");
  background-size: 107%;
  background-position-x: -3px;
}

#rm-short-1 { background-position-y: 340px; }
#rm-short-2 { background-position-y: 254px; }
#rm-short-3 { background-position-y: 167px; }
#rm-short-4 { background-position-y: 82px; }

#rm-mid-1 { background-position-y: -346px; }
#rm-mid-2 { background-position-y: -432px; }
#rm-mid-3 { background-position-y: -516px; }
#rm-mid-4 { background-position-y: -602px; }

#rm-long-1 { background-position-y: -2px; }
#rm-long-2 { background-position-y: -88px; }
#rm-long-3 { background-position-y: -174px; }
#rm-long-4 { background-position-y: -260px; }

#rm-ongoing-1 { background-position-y: -686px; }
#rm-ongoing-2 { background-position-y: -772px; }

.video-tint {
  position: absolute;
  top:0px;
  width:100%;
  padding-top: 33.3%;
  background-color: #43293577;
}

.gc-button {
  font-family: 'Nunito Sans', sans-serif;
  border: 2px solid white;
  border-radius: 500px;
  padding: 12px 30px 8px 30px;
  text-transform: uppercase;
  background-color: transparent;
}

.gc-button:hover {
  text-decoration: none;
  background-color: #68bca3;
}

.bubble
{
  position: relative;
  width: 400px;
  height: 64px;
  padding: 0px;
  background: #44494e;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  border: #fff solid 2px;
}

.bubble:after
{
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 31px 30px 0;
  border-color: #44494e transparent;
  border-right: 0;
  display: block;
  width: 0;
  z-index: 1;
  bottom: -31px;
  left: 190px;
}

.bubble:before
{
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 34px 33px 0;
  border-color: #fff transparent;
  border-right: 0;
  display: block;
  width: 0;
  z-index: 0;
  bottom: -34px;
  left: 188px;
}

.nl-box {
  padding: 30px;
}

.nl-box input {
  font-family: 'Comfortaa', cursive;
  color: white;
  border: 2px solid white;
  border-radius: 500px;
  padding: 12px 30px 8px 30px;
}

.nl-box input[type=email] {
  background-color: #2f343a;
  min-width: 300px;
}

.nl-box input[type=submit] {
  font-family: 'Nunito Sans', sans-serif;
  background-color: transparent;
}

.nl-box input[type=submit]:hover {
  background-color: #68bca3;
}

.video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
}

iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.thumb {
  background-image: url("../img/screenshots.jpg");
  background-size: 100%;
  padding-top: 53.2%;
}

.shot01 { background-position-y: 0%; }
.shot02 { background-position-y: 16.667%; }
.shot03 { background-position-y: 33.333%; }
.shot04 { background-position-y: 50%; }
.shot05 { background-position-y: 66.667%; }
.shot06 { background-position-y: 83.333%; }
.shot07 { background-position-y: 100%; }

.gc-logo {
  position: absolute;
  background-image: url("../img/goodcompany_logo.png");
  background-size: 100%;
  width:100%;
  padding-top:55.7%;
}

.gc-logo-small {
  position: absolute;
  background-image: url("../img/goodcompany_logo.png");
  margin-top: 12px;
  margin-left: 20px;
  background-size: 100%;
  width: 140px;
  padding-top: 38%;
  visibility: hidden;
}

.carrot-logo {
  background-image: url("../img/logos.png");
  background-position-y: -156px;
  background-size: 250%;
  width:231px;
  height:48px;
}

.tic-logo {
  background-image: url("../img/logos.png");
  background-position-y: -45px;
  background-position-x: 186px;
  background-size: 250%;
  width:145px;
  height:48px;
}


.footer-element {
  min-width:150px;
  height: 48px;
}
/* dominik section */

.uk-navbar-container:not(.uk-navbar-transparent) {
  background-color:  #2f343acc;
}

.uk-navbar-container:not(.uk-navbar-transparent) .gc-logo { visibility: hidden; }
.uk-navbar-container:not(.uk-navbar-transparent) .gc-logo-small { visibility: visible; }

.uk-border-rounded {
  border-radius: 20px;
}

.uk-navbar-nav li a {
  min-height: 3em;
  padding: 0 2em;
}

.uk-navbar-right {
  align-items: baseline;
  padding-top: 1em;
}

.uk-light {
  color: rgba(255,255,255,1);
}

.uk-light .uk-navbar-nav li a {
  color: rgba(255,255,255,1);
}

img.bullet {
  margin-right: 1em;
  margin-left:-53px;
}

.bulletlist {
  margin-left:53px;
}

.question {
  color: rgb(255, 175, 0);
}

.answer {
  margin-bottom: 1em;
}

a.textlink {
  font-family: 'Nunito Sans', sans-serif;
  text-transform: uppercase;
  text-decoration: underline;
  color: #68bca3;
}

.backgroundImage {
  background-image: url("../img/background.jpg");
  background-size: 100%;
  background-color: #2f343a;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -100;
}

.scroll_container {
  z-index: 10000;
  position:sticky;
  width: 200px;
  left: 4px;
  top: 11px;
}

.scroll_container a {
  background-color: #68bca3;
  border-radius: 5px;
  font-size: larger;
  padding: 9px;
  color: white;
  text-decoration: none;
}

.scroll_container a:hover {
  background-color: #fff;
  color: #68bca3;
}

/* dominik section end */