/* FONTS –––––––––––––––––––––––––––––––––––––––––––––––––– */

/* gugi-regular - latin */
@font-face {
  font-family: 'Gugi';
  font-style: normal;
  font-weight: 400;
  src: url('../assets/fonts/gugi-v8-latin-regular.eot');
  /* IE9 Compat Modes */
  src: local(''),
    url('../assets/fonts/gugi-v8-latin-regular.eot?#iefix') format('embedded-opentype'),
    /* IE6-IE8 */
    url('../assets/fonts/gugi-v8-latin-regular.woff2') format('woff2'),
    /* Super Modern Browsers */
    url('../assets/fonts/gugi-v8-latin-regular.woff') format('woff'),
    /* Modern Browsers */
    url('../assets/fonts/gugi-v8-latin-regular.ttf') format('truetype'),
    /* Safari, Android, iOS */
    url('../assets/fonts/gugi-v8-latin-regular.svg#Gugi') format('svg');
  /* Legacy iOS */
}

/* roboto-100 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  src: url('../assets/fonts/roboto-v27-latin-100.eot');
  /* IE9 Compat Modes */
  src: local(''),
    url('../assets/fonts/roboto-v27-latin-100.eot?#iefix') format('embedded-opentype'),
    /* IE6-IE8 */
    url('../assets/fonts/roboto-v27-latin-100.woff2') format('woff2'),
    /* Super Modern Browsers */
    url('../assets/fonts/roboto-v27-latin-100.woff') format('woff'),
    /* Modern Browsers */
    url('../assets/fonts/roboto-v27-latin-100.ttf') format('truetype'),
    /* Safari, Android, iOS */
    url('../assets/fonts/roboto-v27-latin-100.svg#Roboto') format('svg');
  /* Legacy iOS */
}

/* roboto-100italic - latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 100;
  src: url('../assets/fonts/roboto-v27-latin-100italic.eot');
  /* IE9 Compat Modes */
  src: local(''),
    url('../assets/fonts/roboto-v27-latin-100italic.eot?#iefix') format('embedded-opentype'),
    /* IE6-IE8 */
    url('../assets/fonts/roboto-v27-latin-100italic.woff2') format('woff2'),
    /* Super Modern Browsers */
    url('../assets/fonts/roboto-v27-latin-100italic.woff') format('woff'),
    /* Modern Browsers */
    url('../assets/fonts/roboto-v27-latin-100italic.ttf') format('truetype'),
    /* Safari, Android, iOS */
    url('../assets/fonts/roboto-v27-latin-100italic.svg#Roboto') format('svg');
  /* Legacy iOS */
}

/* roboto-300italic - latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 300;
  src: url('../assets/fonts/roboto-v27-latin-300italic.eot');
  /* IE9 Compat Modes */
  src: local(''),
    url('../assets/fonts/roboto-v27-latin-300italic.eot?#iefix') format('embedded-opentype'),
    /* IE6-IE8 */
    url('../assets/fonts/roboto-v27-latin-300italic.woff2') format('woff2'),
    /* Super Modern Browsers */
    url('../assets/fonts/roboto-v27-latin-300italic.woff') format('woff'),
    /* Modern Browsers */
    url('../assets/fonts/roboto-v27-latin-300italic.ttf') format('truetype'),
    /* Safari, Android, iOS */
    url('../assets/fonts/roboto-v27-latin-300italic.svg#Roboto') format('svg');
  /* Legacy iOS */
}

/* roboto-300 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url('../assets/fonts/roboto-v27-latin-300.eot');
  /* IE9 Compat Modes */
  src: local(''),
    url('../assets/fonts/roboto-v27-latin-300.eot?#iefix') format('embedded-opentype'),
    /* IE6-IE8 */
    url('../assets/fonts/roboto-v27-latin-300.woff2') format('woff2'),
    /* Super Modern Browsers */
    url('../assets/fonts/roboto-v27-latin-300.woff') format('woff'),
    /* Modern Browsers */
    url('../assets/fonts/roboto-v27-latin-300.ttf') format('truetype'),
    /* Safari, Android, iOS */
    url('../assets/fonts/roboto-v27-latin-300.svg#Roboto') format('svg');
  /* Legacy iOS */
}

/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../assets/fonts/roboto-v27-latin-regular.eot');
  /* IE9 Compat Modes */
  src: local(''),
    url('../assets/fonts/roboto-v27-latin-regular.eot?#iefix') format('embedded-opentype'),
    /* IE6-IE8 */
    url('../assets/fonts/roboto-v27-latin-regular.woff2') format('woff2'),
    /* Super Modern Browsers */
    url('../assets/fonts/roboto-v27-latin-regular.woff') format('woff'),
    /* Modern Browsers */
    url('../assets/fonts/roboto-v27-latin-regular.ttf') format('truetype'),
    /* Safari, Android, iOS */
    url('../assets/fonts/roboto-v27-latin-regular.svg#Roboto') format('svg');
  /* Legacy iOS */
}

/* roboto-italic - latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: url('../assets/fonts/roboto-v27-latin-italic.eot');
  /* IE9 Compat Modes */
  src: local(''),
    url('../assets/fonts/roboto-v27-latin-italic.eot?#iefix') format('embedded-opentype'),
    /* IE6-IE8 */
    url('../assets/fonts/roboto-v27-latin-italic.woff2') format('woff2'),
    /* Super Modern Browsers */
    url('../assets/fonts/roboto-v27-latin-italic.woff') format('woff'),
    /* Modern Browsers */
    url('../assets/fonts/roboto-v27-latin-italic.ttf') format('truetype'),
    /* Safari, Android, iOS */
    url('../assets/fonts/roboto-v27-latin-italic.svg#Roboto') format('svg');
  /* Legacy iOS */
}

/* roboto-500 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url('../assets/fonts/roboto-v27-latin-500.eot');
  /* IE9 Compat Modes */
  src: local(''),
    url('../assets/fonts/roboto-v27-latin-500.eot?#iefix') format('embedded-opentype'),
    /* IE6-IE8 */
    url('../assets/fonts/roboto-v27-latin-500.woff2') format('woff2'),
    /* Super Modern Browsers */
    url('../assets/fonts/roboto-v27-latin-500.woff') format('woff'),
    /* Modern Browsers */
    url('../assets/fonts/roboto-v27-latin-500.ttf') format('truetype'),
    /* Safari, Android, iOS */
    url('../assets/fonts/roboto-v27-latin-500.svg#Roboto') format('svg');
  /* Legacy iOS */
}

/* roboto-500italic - latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 500;
  src: url('../assets/fonts/roboto-v27-latin-500italic.eot');
  /* IE9 Compat Modes */
  src: local(''),
    url('../assets/fonts/roboto-v27-latin-500italic.eot?#iefix') format('embedded-opentype'),
    /* IE6-IE8 */
    url('../assets/fonts/roboto-v27-latin-500italic.woff2') format('woff2'),
    /* Super Modern Browsers */
    url('../assets/fonts/roboto-v27-latin-500italic.woff') format('woff'),
    /* Modern Browsers */
    url('../assets/fonts/roboto-v27-latin-500italic.ttf') format('truetype'),
    /* Safari, Android, iOS */
    url('../assets/fonts/roboto-v27-latin-500italic.svg#Roboto') format('svg');
  /* Legacy iOS */
}

/* roboto-700 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('../assets/fonts/roboto-v27-latin-700.eot');
  /* IE9 Compat Modes */
  src: local(''),
    url('../assets/fonts/roboto-v27-latin-700.eot?#iefix') format('embedded-opentype'),
    /* IE6-IE8 */
    url('../assets/fonts/roboto-v27-latin-700.woff2') format('woff2'),
    /* Super Modern Browsers */
    url('../assets/fonts/roboto-v27-latin-700.woff') format('woff'),
    /* Modern Browsers */
    url('../assets/fonts/roboto-v27-latin-700.ttf') format('truetype'),
    /* Safari, Android, iOS */
    url('../assets/fonts/roboto-v27-latin-700.svg#Roboto') format('svg');
  /* Legacy iOS */
}

/* roboto-700italic - latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  src: url('../assets/fonts/roboto-v27-latin-700italic.eot');
  /* IE9 Compat Modes */
  src: local(''),
    url('../assets/fonts/roboto-v27-latin-700italic.eot?#iefix') format('embedded-opentype'),
    /* IE6-IE8 */
    url('../assets/fonts/roboto-v27-latin-700italic.woff2') format('woff2'),
    /* Super Modern Browsers */
    url('../assets/fonts/roboto-v27-latin-700italic.woff') format('woff'),
    /* Modern Browsers */
    url('../assets/fonts/roboto-v27-latin-700italic.ttf') format('truetype'),
    /* Safari, Android, iOS */
    url('../assets/fonts/roboto-v27-latin-700italic.svg#Roboto') format('svg');
  /* Legacy iOS */
}

/* Shared
–––––––––––––––––––––––––––––––––––––––––––––––––– */
body {
  font-family: 'Roboto', 'Helvetica Neue', 'Arial', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Gugi', 'Helvetica Neue', 'Arial', sans-serif;
}

a, ins, u, a.a-cat, a.u-url {
  color: #A035F9;
}

a.a-cat {
  color: #6ABBFA;
}

.dropmenu.animated ul li {
  font-weight: 300;
  letter-spacing: 0.1em;
}

ul.treemenu.treemenu-root {
  margin: 2em 1em 0 1em;
  padding: 0;
}

.mobile-logo {
  width: 100%;
  height: 4rem;
  background: black;
}

.treemenu li.tree-empty>.toggler:before {
  content: '\2022';
  display: none;
}


.treemenu li {
  margin: 0 0 5px;
  padding: 0;
  background: rgba(0, 0, 0, 0);
}

.treemenu li a {
  margin-left: 0;
  color: #6ABBFA;
  background: #353333;
  padding: 0.5em;
  border-radius: 5px;
}

.treemenu li a.active, .treemenu li a:focus, .treemenu li a:hover {
  text-decoration: none;
  color: white !important;
  background: #A035F9;
}

.label.label-secondary {
  background: rgb(160, 53, 249);
  background: -moz-linear-gradient(90deg, rgba(160, 53, 249, 1) 0%, rgba(106, 187, 250, 1) 50%, rgba(43, 85, 252, 1) 100%);
  background: -webkit-linear-gradient(90deg, rgba(160, 53, 249, 1) 0%, rgba(106, 187, 250, 1) 50%, rgba(43, 85, 252, 1) 100%);
  background: linear-gradient(90deg, rgba(160, 53, 249, 1) 0%, rgba(106, 187, 250, 1) 50%, rgba(43, 85, 252, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#a035f9", endColorstr="#2b55fc", GradientType=1);
  color: white;
  padding: 0.5em;
  border-radius: 5px;
}

.label.label-secondary:hover {
  color: #A035F9;
  background: lightgrey;
}

.blog-listing .card-footer {
  text-align: center;
}

a:hover {
  color: #6ABBFA;
}

.header-fixed #header {
  z-index: 100;
}

#body-wrapper .container {
  padding: 2rem 0 0;
}

#footer {
  padding: 2em 0 2em;
}

section#footer.section.bg-gray {
  background: black !important;
}

#footer .columns {
  max-width: 976px;
  margin: auto;
}

.h5p-if {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  height: auto;
  border: none;
  min-height: 800px;
}

.langswitcher {
  list-style: none;
  display: flex;
}

.blg-hero .card-title h5 {
  font-family: 'Roboto', 'Helvetica Neue', 'Arial', sans-serif;
  font-size: 1.8rem;
  text-transform: uppercase;
  text-align: left;
  margin: -170px 0 0 0;
  padding: 0;
}

.blg-hero .card-title h5 span {
  background-color: rgba(158, 0, 136, .6);
  padding: .25em;
  box-shadow: 10px 0 0 rgba(158, 0, 136, .6), -10px 0 0 rgba(158, 0, 136, .6);
  color: #797979;
  transition: all .5s ease;
  line-height: 1.5;
}


.blg-hero .card-title h5 span a {
  color: lightgrey;
  font-weight: 100;
  transition: all .5s ease;
}

.blg-hero .card-title h5 span a:hover {
  color: white;
  font-weight: 200;
}

.langswitcher li {
  margin-top: 0;
}

body.header-fixed.header-animated #header .langswitcher {
  margin-top: 2em;
  transition: all .5s ease;
}

body.header-fixed.header-animated #header.scrolled ul.langswitcher {
  margin-top: 1em;
}

#header .langswitcher .active {
  text-decoration: underline;
  font-weight: 700;
  color: #6ABBFA;
}


#header .langswitcher a {
  color: lightgrey;
  text-decoration: none;
}

.p-ft {
  margin: 0;
}

.hide {
  display: none;
}

.overlay {
  background: black;
}

.overlay nav {
  margin: auto;
}

.overlay.open {
  opacity: .9;
}


.dropmenu ul li a.active, .dropmenu ul li a:focus, .dropmenu ul li a:hover {
  color: #A035F9 !important;
}

.mobile-menu {
  z-index: 101;
}

.mobile-menu .button_container span {
  background: #A035F9;
}

.mobile-container {
  z-index: 100;
}

.button, button, input[type="submit"], input[type="reset"], input[type="button"] {
  color: #fff;
  background: #A035F9;
}

.button.button-primary, button.button-primary, input[type="submit"].button-primary, input[type="reset"].button-primary, input[type="button"].button-primary {
  background-color: #A035F9;
  border-color: #A035F9;
  margin: 1em auto 1em;
  max-width: 200px;
  color: #fff !important;
  text-align: center;
  display: block;
}

.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover,
.button.button-primary:focus,
button.button-primary:focus,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus {
  color: #FFF;
  background-color: #6ABBFA;
  border-color: #6ABBFA;
}

.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
  color: #A035F9;
  border-color: #A035F9;
  outline: 0;
}

.u-img-width {
  width: 80%;
  box-sizing: border-box;
  margin: 2rem 0 2rem;
}

.h-ico {
  margin-right: 0.5em;
  transform: scale(1.5)
}

ul li::before {
  color: #6ABBFA;
}

.mobile-menu .button_container.active .top {
  background: #A035F9;
}

.mobile-menu .button_container.active .bottom {
  background: #A035F9;
}

.mobile-menu .button_container.active .middle {
  background: #A035F9;
}

.mobile-logo img, .mobile-logo svg {
  margin-left: .7rem;
}

.blog-listing .card {
  border: 1px solid #A035F9;
  transition: all 1s ease;
}

.blog-listing .card:hover {
  box-shadow: rgba(240, 46, 170, 0.4) -5px 5px, rgba(240, 46, 170, 0.3) -10px 10px, rgba(240, 46, 170, 0.2) -15px 15px, rgba(240, 46, 170, 0.1) -20px 20px, rgba(240, 46, 170, 0.05) -25px 25px;
}

.hero.hero-tiny {
  max-height: 800px;
}

@media only screen and (max-width: 768px) {
  .langswitcher {
    margin-right: 60px;
  }

  .blog-listing .bricklayer-column {
    padding-right: 0;
    padding-left: 0;
  }
}

@media screen and (max-width: 1024px) {
  .langswitcher {
    margin-right: 60px;
  }
}

/* Words
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.logo-row {
  text-align: center;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  margin: auto;
  height: 400px;
}

.logo-row svg {
  margin-top: -50px;
}

.logli {
  top: 445px;
  left: 0;
  height: 5px;
  width: 100vw;
  stroke: #A035F9;
  stroke-width: 10;
}

.frogo {
  position: absolute;
  left: 0;
  top: 200px;
  width: 100%;
  height: 200px;
  margin: auto;
}

.infstr {
  stroke: linear-gradient(180deg, red, blue);
}

.shptxt {
  position: absolute;
  top: 400px;
  left: 0;
  height: 200px;
}

.tmain {
  font-family: 'Raleway', 'Helvetica Neue', 'Arial', sans-serif;
  animation: textAnimate 8s infinite alternate;
  stroke: #6ABBFA;
  letter-spacing: 10px;
  font-size: 6em;
  font-weight: 700;
  stroke-width: 3;
}

.tsec {
  font-family: 'Raleway', 'Helvetica Neue', 'Arial', sans-serif;
  animation: textAnimate 8s infinite alternate;
  stroke: #A035F9;
  letter-spacing: 10px;
  font-size: 3em;
  font-weight: 400;
  stroke-width: 0;
}

@keyframes textAnimate {
  0% {
    font-family: 'Raleway', 'Helvetica Neue', 'Arial', sans-serif;
    stroke-dasharray: 0 50%;
    stroke-dashoffset: 20%;
    fill: hsl(189, 68%, 75%)
  }

  100% {
    font-family: 'Raleway', 'Helvetica Neue', 'Arial', sans-serif;
    stroke-dasharray: 50% 0;
    stroke-dashoffset: -20%;
    fill: hsla(189, 68%, 75%, 0%)
  }

}

@media only screen and (max-width: 768px) {
  .logo-row svg {
    margin-top: -30px;
  }

  .shptxt {
    height: 120px;
    top: 250px;
  }

  .tmain {
    font-size: 3.5em;
    stroke-width: 1;
  }

  .tsec {
    font-size: 1.5em;
  }

  .frogo {
    top: 100px;
    padding-right: 1em;
  }

  .logo-row {
    height: 300px;
  }

}


/* Columns
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.row {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
}

.c-half {
  width: 50%;
}

.c-third {
  width: 33.33%;
}

@media only screen and (max-width: 768px) {
  .c-third, .c-half {
    width: 100%;
    margin: 1em;
  }
}

/* Sections
–––––––––––––––––––––––––––––––––––––––––––––––––– */

section {
  font-size: 16px;
}

section h1, section h2, section h3, section h4, section h5, section h6, section p, section blockquote, section ul {
  max-width: 600px;
  margin: 1rem auto;
  text-align: justify;
}

@media only screen and (max-width: 768px) {
  section h1, section h2, section h3, section h4, section h5, section h6, section p, section ul, section ol, section blockquote {
    max-width: 100%;
    text-align: left;
  }
}

.hero-center p, .hero-center h1, .hero-center h2, .hero-center h3, .hero-center h4, .hero-center h5, .hero-center h6 {
  text-align: center;
}

ul, ol {
  padding: 0 1em 0 2em;
  max-width: 600px;
  margin: 1em auto 1em;
}

li::marker {
  padding-top: 0.2em;
}

ol {
  list-style: decimal outside;
}

ol li, ul li {
  padding-left: 1em;
}

table {
  width: 100%;
  border: 1px solid lightgrey;
}

.section-hd {
  padding: 1em 0 0 0;
  text-align: left;
  max-width: 100%;
}

.section-0 {
  padding: 0;
}

.info {
  padding: 4rem 0 4rem;
  text-align: center;
}

.section-heading,
.section-description {
  margin-bottom: 1.2rem;
}

.sub-sec {
  padding: 4rem 0 3rem;
}

a.active, a:active, a:focus, a:hover {
  text-decoration: none;
  color: #6ABBFA;
}

.modular-features.small .column:hover .feature-icon i {
  color: #6ABBFA;
}

.modular-features .column:hover .feature-icon h6 {
  color: #A035F9;
}

.hello-icon {
  text-align: center;
  margin: auto;
}

.hello-icon i {
  color: #A035F9;
  font-size: 50px;
}

.hello-icon i:hover {
  color: #6ABBFA;
}

h2 i {
  font-size: 80px;
  float: left;
  margin-left: -2em;
  color: #A035F9;
}

@media only screen and (max-width: 768px) {
  h2 i {
    font-size: 40px;
    margin-left: 0;
  }

  .sub-hero h1 {
    font-size: 2.4em !important;
  }
}

/* Hero
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.hero-hm {
  margin-top: -4rem;
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  background-size: cover;
  color: #fff;
  padding-bottom: 5rem;
  background-image:
    linear-gradient(black, black),
    url(../assets/cover.jpg);
  background-blend-mode: soft-light;
  height: 600px;
}

.hero-multiplier {
  margin-bottom: .5rem;
  color: #11DFC7;
}

.hero-heading {
  margin-bottom: .3rem;
}

.hero-description {
  opacity: .8;
  font-weight: 300;
}


/* Apps
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.app-tb {
  margin-left: auto;
  margin-right: auto;
  width: 90%;
  overflow-x: auto;
}

.app-tb table {
  width: 100%;
}

.app-tb thead {
  font-weight: 600;
}

.app-tb tr, td {
  text-align: center;
}

.app-ico {
  max-width: 70px;
}

.app-tb tr:nth-child(even) {
  background-color: #EBEBEB;
}

/* Sub-Hero
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.sub-hero {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  text-align: center;
  -webkit-box-pack: center;
  justify-content: center;
  padding: 1.15rem;
  max-height: 500px;
  min-height: 380px;
  z-index: 1;
}

.sub-hero:before {
  content: "";
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0.2))), -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.2)), to(transparent));
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%), linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, transparent 100%);
  z-index: 2;
  max-height: 500px;
  min-height: 380px;
}

.sub-hero__background {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  overflow: hidden;
  width: 100vw;
  max-height: 550px;
  min-height: 420px;
}

.sub-hero__background img, .sub-hero__background video {
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  background: #232a34;
  width: 100vw;
  max-height: 550px;
  min-height: 420px;
}

.sub-hero__content {
  max-width: 650px;
  z-index: 3;
}


.sub-hero h1 {
  border-bottom: 1px solid white;
  padding-bottom: 0.5em;
  letter-spacing: 0.2rem;
  text-transform: uppercase;
  color: #A035F9;
  font-size: 4em;
}



/* Sub-Hero-2
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.sub-hero-2 {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  background-image: url(/assets/img/cover.jpg);
  margin-top: -2rem;
  padding: 4rem !important;
}

.sub-hero-2 h1 {
  letter-spacing: 0.2em;
  font-weight: 200;
  border-bottom: 1px solid white;
  padding: 0 1em 0.5em 1em;
  margin: 1em;
  max-width: 100vw;
}



/* Contact
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.contact .column {
  margin: 1em 0 1em 0;
}


/* white–––––––––––––––––––––––––––––––––––––––––––––––––– */

.white {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  background: #fff;
  color: black;
  text-align: justify;
  padding: 2em 0 2em 0;
  hyphens: auto;
  hyphenate-limit-chars: auto 5;
  hyphenate-limit-lines: 2;
  -webkit-hyphens: auto;
  -webkit-hyphenate-limit-chars: auto 3;
  -webkit-hyphenate-limit-lines: 4;
  -ms-hyphens: auto;
  -ms-hyphenate-limit-chars: auto 3;
  -ms-hyphenate-limit-lines: 4;
  overflow: hidden;
}

.white h2 {
  text-align: center;
}

.off-white {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  background: #f8f9fa;
  color: black;
  text-align: justify;
  padding: 2em 0 2em 0;
  hyphens: auto;
  hyphenate-limit-chars: auto 5;
  hyphenate-limit-lines: 2;
  -webkit-hyphens: auto;
  -webkit-hyphenate-limit-chars: auto 3;
  -webkit-hyphenate-limit-lines: 4;
  -ms-hyphens: auto;
  -ms-hyphenate-limit-chars: auto 3;
  -ms-hyphenate-limit-lines: 4;
  overflow: hidden;
  padding-right: 1rem;
  padding-left: 1rem;
}

@media only screen and (max-width: 768px) {
  .white, .off-white {
    hyphens: none;
    text-align: left;
  }
}

.off-white h2 {
  text-align: center;
}

.d-center {
  text-align: center;
}

.b-white {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 150px;
  display: block;
}

/* Footer
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.footer {
  background: linear-gradient(90deg, rgba(80, 211, 181, 1) 0%, rgba(58, 138, 106, 1) 43%, rgba(20, 23, 121, 1) 100%);
  background-size: cover;
  color: #fff;
  text-align: center;
  padding: 4em 0 4em 0;
}

.footer .column {
  padding: 0.5em;
}

.footer a {
  color: white;
  text-decoration: none;
}

.footer a:hover {
  color: #6ABBFA;
}

/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Bigger than 550 */
@media (min-width: 550px) {

  .hero-heading {
    font-size: 2.4rem;
  }
}

/* Bigger than 750 */
@media (min-width: 750px) {

  .hero-heading {
    font-size: 2.6rem;
  }

  .hero {
    padding: 16rem 0 14rem;
  }

  .section-description {
    max-width: 60%;
    margin-left: auto;
    margin-right: auto;
  }

  .white h2 {
    max-width: 60%;
    margin-left: auto;
    margin-right: auto;
  }

  .off-white h2 {
    max-width: 60%;
    margin-left: auto;
    margin-right: auto;
  }

  .categories {
    padding: 2rem 0 2rem;
  }
}

/* Bigger than 1000 */
@media (min-width: 1000px) {

  .hero {
    padding: 22rem 0;
  }

  .hero-heading {
    font-size: 3.0rem;
  }

  .phone {
    top: -16rem;
    max-height: 615px;
  }

  .phone+.phone {
    top: -14rem;
    max-height: 570px;
  }
}



.logo-hd {
  width: 600px;
  padding: 1em;
  margin: auto;
  height: auto;
}

.docs-header {
  text-transform: uppercase;
  font-size: 1.4rem;
  letter-spacing: .2rem;
  font-weight: 600;
}


.m-wrap {
  padding: 1em;
  border: 1px solid lightgrey;
  border-radius: 5px;
  margin-bottom: 2em;
}

.ev-ico {
  transform: rotate(10deg) scale(1.7);
  float: left;
  left: -20px;
  top: -20px;
  background: white;
  color: #3A8A6A;
}

.pick-container {
  display: flex;
  height: 300px;
  width: 500px;
  padding: 1em;
  border-radius: 10px;
}

/* ==== Cards using Bootstrap === */

.tm-row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

.tm-col {
  padding-bottom: 1.5rem !important;
  padding-top: 3rem !important;
}

.tm-card {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid rgba(0, 0, 0, .125);
  border-radius: .25rem;
}

#tm-cards {
  margin-top: 2em;
  margin-bottom: 2em;
  width: 90vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -45vw;
  margin-right: -45vw;
}

#tm-cards h2 {
  text-align: center;
}

#tm-cards .tm-card {
  border-radius: 20px;
  min-height: 100%;
  margin: 1em;
  box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075)
}

#tm-cards .tm-card .tm-card-body {
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  min-height: 1px;
  padding: 1.25rem;
}

#tm-cards .heading-border {
  position: absolute;
  width: 100%;
  top: 60%;
}

#tm-cards .tm-card .user-picture img {
  position: absolute;
  top: -20%;
  right: -5%;
  padding: 10px;
  height: 190px;
}

#tm-cards .tm-card .user-content h3 {
  max-width: 70%;
}

#tm-cards .tm-card .user-content p, #tm-cards .tm-card .user-content h3 {
  text-align: left;
  margin: 20px 0 20px 0;
  padding: 0;
}

#tm-cards .tm-card .user-content .user-name {
  margin-right: 150px;
}

#tm-cards .tm-card .user-content .tm-soc {
  text-align: center;
}

.tm-soc i {
  font-size: 25px;
  padding: 0.5em;
}

#tm-cards .tm-card .user-content .tm-pos {
  margin-top: -10px;
  color: #A035F9;
}

@media only screen and (max-width: 1024px) {
  #tm-cards .tm-card .user-picture img {
    position: absolute;
    top: -10%;
    right: -5%;
    padding: 10px;
    height: 140px;
  }
}

#to-start {
  display: none !important;
}

.header-transparent #header:not(.scrolled) {
  background: rgba(255, 255, 255, 0);
  border-bottom: 0;
}

.prt-col {
  align-items: center;
  max-width: 100%;
  margin: auto;
}

.prt-col h2, .prt-col h3, .prt-col h4, .prt-col h5, .prt-col h6 {
  margin: .2em 0 .2em 0;
  font-family: 'Roboto', 'Helvetica Neue', 'Arial', sans-serif;
}

.prt-col h3 {
  color: #797979;
  margin: 0 0 1em 0;
}

.prt-col p {
  margin: .5em 0 0 0;
}

.prt-col i {
  margin: 0 1em 0 0;
  text-align: center;
}

.prt-col hr {
  border: 1px solid #5B3B8E;
  margin: 4rem 0;
}

.prt-col img {
  padding: 0 1em 0 0;
  width: 100%;
}

.full-wd p, .full-wd h1, .full-wd h2, .full-wd h3, .full-wd h4, .full-wd h5, .full-wd h6 {
  max-width: 976px;
}

.funding {
  text-align: center;
}

.funding img {
  max-width: 400px;
  width: 100%;
}

/* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
  width: 100%;
  /* Full width */
  padding: 12px;
  /* Some padding */
  border: 1px solid #ccc;
  /* Gray border */
  border-radius: 4px;
  /* Rounded borders */
  box-sizing: border-box;
  /* Make sure that padding and width stays in place */
  margin-top: 6px;
  /* Add a top margin */
  margin-bottom: 16px;
  /* Bottom margin */
  resize: vertical
    /* Allow the user to vertically resize the textarea (not horizontally) */
}

/* Style the submit button with a specific background color etc */
input[type=submit] {
  background-color: #A035F9;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
  background-color: #6ABBFA;
}

/* Add a background color and some padding around the form */
.container-ctc {
  max-width: 600px;
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
  margin: 0 auto 3rem auto;
}

.container-ctc label {
  color: #A035F9;
}

.container-ctc label {
  color: #A035F9;
}

.image-overlay .col-cont {
  max-width: 600px;
  margin: auto;
  text-align: center;
  margin-top: 5rem;
}

.image-overlay .col-cont h1 {
  text-align: center;
}

.full-wid {
  width: 100vw;
  position: relative;
  margin-left: -50vw;
  height: 44rem;
  left: 50%;
  margin-top: -6rem;
  overflow: hidden;
  min-height: 100vh;
}

@media screen and (max-width: 768px) {
  .container-ctc {
    margin: 10rem auto 3rem auto;
  }

  .full-wid {
    min-height: 120vh;
  }

  .prt-col img {
    max-height: 120px;
    width: auto;
    margin: 0 auto 1em auto;
  }

  .prt-col .column {
    text-align: center;
  }

  .prt-col hr {
    width: 80vw;
    margin: 4rem auto;
  }

  #vrr h1 {
    font-size: 4rem;
  }
}

.hero-cont {
  display: -ms-flexbox;
  display: flex;
  background-position: center;
  background-size: cover;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 8rem 0;
  min-height: 100vh;
}



.welcome {
  margin-top: -4rem;
  padding: 8rem 0;
}

.col-neu {
  max-width: 600px;
  margin: 4rem auto 0 auto;
}

.col-neu i {
  font-size: 4rem;
}

.col-neu a {
  color: slategrey;
}

.col-neu a:hover {
  color: #6ABBFA;
}

.feather-gal {
  margin: 1em auto;
  text-align: center;
}

.feather-gal img {
  width: 50%;
  max-width: 290px;
  filter: brightness(0.9);
}

.feather-gal img:hover {
  filter: brightness(1);
}

@media screen and (max-width: 768px) {
  h1 {
    font-size: 2.5rem;
  }

  .col-neu i {
    font-size: 6rem;
    margin: 0 0 1rem 0;
    color: #6ABBFA;
  }

  .feather-gal img {
    width: 100%;
    max-width: 100%;
  }
}

#blog-hero {
  padding: 12rem 0 6rem 0;
}

#blog-hero section .blg-hero h1 {
  text-align: left;
}

#blog-hero section h1 {
  text-align: center;
}

.head-ico {
  align-items: center;
  margin: auto;
  text-align: center;
}

.head-ico img {
  max-height: 120px;
  -webkit-animation-duration: 4s;
  animation-duration: 4s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

#start {
  margin: 0 auto 20rem auto;
  text-align: center;
  display: grid;
}

.hero-head img, .hero-head svg {
  max-height: 150px;
}

.fadeIn, .prt-col .fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  -webkit-animation-timing-function: ease-in-out;
}



@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

#robot-neu {
  margin-right: -4rem;
}

@media screen and (max-width: 768px) {
  .head-ico h1 {
    text-align: center;
  }

  #robot-hlo {
    margin-left: -4.5rem;
    max-height: 120px;
  }

  #robot-neu {
    margin-right: 0;
    max-height: 120px;
  }
}


/*
#rh-ra-hand {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
  -webkit-animation-name: wave-sm;
  animation-name: wave-sm;
}*/

#arm {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-name: wave;
  animation-name: wave;
}

#wave_move {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
  -webkit-animation-name: wave-shrnk;
  animation-name: wave-shrnk;
}

#lupe {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
  -webkit-animation-name: shrnk;
  animation-name: shrnk;
}

/*
@keyframes wave-sm {
  0%, 10%, 40%, 50%, 90%, 100%  {
    d: path("M587.476 201.174 C582.82 201.113 578.076 199.892 573.699 197.397 560.36 189.79 555.477 173.223 562.793 160.393 565.065 156.407 568.249 153.251 571.957 151.022 L574.525 157.572 C572.248 159.173 570.29 161.276 568.832 163.834 563.345 173.457 567.005 185.883 577.01 191.588 580.292 193.46 583.851 194.377 587.344 194.422 594.495 194.515 601.374 190.96 605.06 184.494 606.441 182.074 607.241 179.476 607.508 176.852 L614.49 175.721 C614.39 179.9 613.294 184.086 611.099 187.936 606.184 196.556 597.012 201.298 587.476 201.174 Z")
  }
  20%, 30% {
    d: path("M566.009 196.445 C555.738 196.374 546.086 190.69 541.689 181.027 539.788 176.851 539.093 172.424 539.456 168.113 L546.273 169.867 C546.238 172.651 546.795 175.468 548.015 178.148 551.313 185.395 558.552 189.658 566.255 189.711 569.269 189.732 572.356 189.107 575.304 187.766 585.786 182.995 590.563 170.955 585.974 160.873 584.82 158.337 583.184 156.167 581.214 154.414 L584.384 148.092 C587.714 150.62 590.464 153.96 592.3 157.994 598.418 171.437 592.05 187.491 578.073 193.851 574.143 195.64 570.028 196.473 566.009 196.445 Z")
  }
  40%, 50%, 90%, 100%  {
    d: path("M587.476 201.174 C582.82 201.113 578.076 199.892 573.699 197.397 560.36 189.79 555.477 173.223 562.793 160.393 565.065 156.407 568.249 153.251 571.957 151.022 L574.525 157.572 C572.248 159.173 570.29 161.276 568.832 163.834 563.345 173.457 567.005 185.883 577.01 191.588 580.292 193.46 583.851 194.377 587.344 194.422 594.495 194.515 601.374 190.96 605.06 184.494 606.441 182.074 607.241 179.476 607.508 176.852 L614.49 175.721 C614.39 179.9 613.294 184.086 611.099 187.936 606.184 196.556 597.012 201.298 587.476 201.174 Z")
  }
  60%, 70%, 80% {
    d: path("M602.242 211.118 C602.012 211.118 601.783 211.117 601.552 211.112 586.786 210.765 575.107 198.037 575.468 182.686 575.829 167.335 588.093 155.173 602.859 155.52 607.446 155.628 611.734 156.931 615.456 159.135 L610.91 164.508 C608.419 163.264 605.639 162.538 602.695 162.469 591.62 162.209 582.422 171.331 582.152 182.844 581.881 194.358 590.64 203.902 601.714 204.163 601.887 204.167 602.06 204.169 602.232 204.168 604.83 204.161 607.317 203.637 609.601 202.69 L613.911 208.295 C610.38 210.093 606.418 211.106 602.242 211.118 Z")
  }
  90%, 100%  {
    d: path("M587.476 201.174 C582.82 201.113 578.076 199.892 573.699 197.397 560.36 189.79 555.477 173.223 562.793 160.393 565.065 156.407 568.249 153.251 571.957 151.022 L574.525 157.572 C572.248 159.173 570.29 161.276 568.832 163.834 563.345 173.457 567.005 185.883 577.01 191.588 580.292 193.46 583.851 194.377 587.344 194.422 594.495 194.515 601.374 190.96 605.06 184.494 606.441 182.074 607.241 179.476 607.508 176.852 L614.49 175.721 C614.39 179.9 613.294 184.086 611.099 187.936 606.184 196.556 597.012 201.298 587.476 201.174 Z")
  }
}*/

@keyframes wave {
  0% {
    transform: skew(0deg, 0deg);
    transform-origin: 50% 50%;
  }

  25% {
    transform: skew(2deg, 10deg);
    transform-origin: 50% 50%;
  }

  75% {
    transform: skew(0deg, 0deg);
    transform-origin: 50% 50%;
  }

  25% {
    transform: skew(2deg, 10deg);
    transform-origin: 50% 50%;
  }
}

@keyframes wave-shrnk {
  0% {
    opacity: .4;
  }

  100% {
    opacity: 1;
  }
}

@keyframes shrnk {
  0% {
    transform: scale(1);
    transform-origin: 50% 50%;
  }

  25% {
    transform: scale(.98);
    transform-origin: 50% 50%;
  }

  75% {
    transform: scale(1);
    transform-origin: 50% 50%;
  }

  25% {
    transform: scale(.98);
    transform-origin: 50% 50%;
  }
}

#neugierig a {
  color: #6ABBFA;
  background: linear-gradient(180deg, rgba(0, 214, 179, 0) 70%, rgba(106, 187, 250, 1) 100%);
  padding: .2em .2em;
  transition: all .5s ease-in;
}

#neugierig a:hover {
  color: black;
  background: rgba(106, 187, 250, 1);
  border-radius: .2em;
}

#neugierig .col-neu a {
  color: white;
  background: none;
  padding: 0;
  transition: all .5s ease-in;
}

#neugierig .col-neu a:hover {
  color: #6ABBFA;
}

.blg-hero h5 {
  margin-top: 3rem;
}

.wel-hero {
  background-color: #A035F9;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' x2='0' y1='0' y2='100%25' gradientTransform='rotate(233,960,534)'%3E%3Cstop offset='0' stop-color='%23A035F9'/%3E%3Cstop offset='1' stop-color='%232B55FC'/%3E%3C/linearGradient%3E%3Cpattern patternUnits='userSpaceOnUse' id='b' width='808' height='673.3' x='0' y='0' viewBox='0 0 1080 900'%3E%3Cg fill-opacity='0.06'%3E%3Cpolygon fill='%23444' points='90 150 0 300 180 300'/%3E%3Cpolygon points='90 150 180 0 0 0'/%3E%3Cpolygon fill='%23AAA' points='270 150 360 0 180 0'/%3E%3Cpolygon fill='%23DDD' points='450 150 360 300 540 300'/%3E%3Cpolygon fill='%23999' points='450 150 540 0 360 0'/%3E%3Cpolygon points='630 150 540 300 720 300'/%3E%3Cpolygon fill='%23DDD' points='630 150 720 0 540 0'/%3E%3Cpolygon fill='%23444' points='810 150 720 300 900 300'/%3E%3Cpolygon fill='%23FFF' points='810 150 900 0 720 0'/%3E%3Cpolygon fill='%23DDD' points='990 150 900 300 1080 300'/%3E%3Cpolygon fill='%23444' points='990 150 1080 0 900 0'/%3E%3Cpolygon fill='%23DDD' points='90 450 0 600 180 600'/%3E%3Cpolygon points='90 450 180 300 0 300'/%3E%3Cpolygon fill='%23666' points='270 450 180 600 360 600'/%3E%3Cpolygon fill='%23AAA' points='270 450 360 300 180 300'/%3E%3Cpolygon fill='%23DDD' points='450 450 360 600 540 600'/%3E%3Cpolygon fill='%23999' points='450 450 540 300 360 300'/%3E%3Cpolygon fill='%23999' points='630 450 540 600 720 600'/%3E%3Cpolygon fill='%23FFF' points='630 450 720 300 540 300'/%3E%3Cpolygon points='810 450 720 600 900 600'/%3E%3Cpolygon fill='%23DDD' points='810 450 900 300 720 300'/%3E%3Cpolygon fill='%23AAA' points='990 450 900 600 1080 600'/%3E%3Cpolygon fill='%23444' points='990 450 1080 300 900 300'/%3E%3Cpolygon fill='%23222' points='90 750 0 900 180 900'/%3E%3Cpolygon points='270 750 180 900 360 900'/%3E%3Cpolygon fill='%23DDD' points='270 750 360 600 180 600'/%3E%3Cpolygon points='450 750 540 600 360 600'/%3E%3Cpolygon points='630 750 540 900 720 900'/%3E%3Cpolygon fill='%23444' points='630 750 720 600 540 600'/%3E%3Cpolygon fill='%23AAA' points='810 750 720 900 900 900'/%3E%3Cpolygon fill='%23666' points='810 750 900 600 720 600'/%3E%3Cpolygon fill='%23999' points='990 750 900 900 1080 900'/%3E%3Cpolygon fill='%23999' points='180 0 90 150 270 150'/%3E%3Cpolygon fill='%23444' points='360 0 270 150 450 150'/%3E%3Cpolygon fill='%23FFF' points='540 0 450 150 630 150'/%3E%3Cpolygon points='900 0 810 150 990 150'/%3E%3Cpolygon fill='%23222' points='0 300 -90 450 90 450'/%3E%3Cpolygon fill='%23FFF' points='0 300 90 150 -90 150'/%3E%3Cpolygon fill='%23FFF' points='180 300 90 450 270 450'/%3E%3Cpolygon fill='%23666' points='180 300 270 150 90 150'/%3E%3Cpolygon fill='%23222' points='360 300 270 450 450 450'/%3E%3Cpolygon fill='%23FFF' points='360 300 450 150 270 150'/%3E%3Cpolygon fill='%23444' points='540 300 450 450 630 450'/%3E%3Cpolygon fill='%23222' points='540 300 630 150 450 150'/%3E%3Cpolygon fill='%23AAA' points='720 300 630 450 810 450'/%3E%3Cpolygon fill='%23666' points='720 300 810 150 630 150'/%3E%3Cpolygon fill='%23FFF' points='900 300 810 450 990 450'/%3E%3Cpolygon fill='%23999' points='900 300 990 150 810 150'/%3E%3Cpolygon points='0 600 -90 750 90 750'/%3E%3Cpolygon fill='%23666' points='0 600 90 450 -90 450'/%3E%3Cpolygon fill='%23AAA' points='180 600 90 750 270 750'/%3E%3Cpolygon fill='%23444' points='180 600 270 450 90 450'/%3E%3Cpolygon fill='%23444' points='360 600 270 750 450 750'/%3E%3Cpolygon fill='%23999' points='360 600 450 450 270 450'/%3E%3Cpolygon fill='%23666' points='540 600 630 450 450 450'/%3E%3Cpolygon fill='%23222' points='720 600 630 750 810 750'/%3E%3Cpolygon fill='%23FFF' points='900 600 810 750 990 750'/%3E%3Cpolygon fill='%23222' points='900 600 990 450 810 450'/%3E%3Cpolygon fill='%23DDD' points='0 900 90 750 -90 750'/%3E%3Cpolygon fill='%23444' points='180 900 270 750 90 750'/%3E%3Cpolygon fill='%23FFF' points='360 900 450 750 270 750'/%3E%3Cpolygon fill='%23AAA' points='540 900 630 750 450 750'/%3E%3Cpolygon fill='%23FFF' points='720 900 810 750 630 750'/%3E%3Cpolygon fill='%23222' points='900 900 990 750 810 750'/%3E%3Cpolygon fill='%23222' points='1080 300 990 450 1170 450'/%3E%3Cpolygon fill='%23FFF' points='1080 300 1170 150 990 150'/%3E%3Cpolygon points='1080 600 990 750 1170 750'/%3E%3Cpolygon fill='%23666' points='1080 600 1170 450 990 450'/%3E%3Cpolygon fill='%23DDD' points='1080 900 1170 750 990 750'/%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect x='0' y='0' fill='url(%23a)' width='100%25' height='100%25'/%3E%3Crect x='0' y='0' fill='url(%23b)' width='100%25' height='100%25'/%3E%3C/svg%3E");
  background-attachment: fixed;
  background-size: cover;
  /* background by SVGBackgrounds.com */
  margin-top: -6rem;
}

.blg-hero {
  background-color: #A035F9;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%237c40f9' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%235c4af9' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%235568fa' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%235f94fa' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%236ABBFA' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%235eaafa' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%235198fb' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%234484fb' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23386dfb' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%232B55FC' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
  background-attachment: fixed;
  background-size: cover;
  /* background by SVGBackgrounds.com */
}

.pt-hero {
  background-color: #EEEEEE;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg fill-opacity='0.07'%3E%3Cpolygon fill='%23d9d3e0' points='800 100 0 200 0 800 1600 800 1600 200'/%3E%3Cpolygon fill='%23c4b8d2' points='800 200 0 400 0 800 1600 800 1600 400'/%3E%3Cpolygon fill='%23b09ec5' points='800 300 0 600 0 800 1600 800 1600 600'/%3E%3Cpolygon fill='%239b84b7' points='1600 800 800 400 0 800'/%3E%3Cpolygon fill='%23866ba9' points='1280 800 800 500 320 800'/%3E%3Cpolygon fill='%2371539c' points='533.3 800 1066.7 800 800 600'/%3E%3Cpolygon fill='%235B3B8E' points='684.1 800 914.3 800 800 700'/%3E%3C/g%3E%3C/svg%3E");

  /* Set a specific height */
  height: 500px;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  /* background by SVGBackgrounds.com */
}

#vrr .wel-heading {
  position: absolute;
  top: 30vh;
  left: 0;
  width: 100vw;
}

#vrr h1 {
  font-size: 5rem;
  color: white;
  z-index: 3;

}

#vrr h5 {
  font-size: 2rem;
  color: white;
  z-index: 3;
}

#vrr {
  padding: 30vh 0 70vh 0;
}

#welcome, #neugierig {
  padding: 0 0 8rem 0;
  font-size: 1rem;
}

.vrr-bk {
  background-size: cover;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  min-height: 800px;
  animation: car-vr 60s infinite ease-out;
  z-index: 0;
  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}

.vrr-bk h1, .vrr-bk h5 {
  z-index: 2;
}

@keyframes car-vr {
  0% {
    background-image: url("/user/sites/vr-repair.net/assets/img/car/car_01.webp");
  }

  40% {
    background-image: url("/user/sites/vr-repair.net/assets/img/car/car_03.webp");
  }

  60% {
    background-image: url("/user/sites/vr-repair.net/assets/img/car/car_02.webp");
  }

  80% {
    background-image: url("/user/sites/vr-repair.net/assets/img/car/car_04.webp");
  }

  100% {
    background-image: url("/user/sites/vr-repair.net/assets/img/car/car_01.webp");
  }
}

.wel-hero .dropmenu ul li a.active, .dropmenu ul li a:focus, .dropmenu ul li a:hover {
  color: #6ABBFA !important;
  font-weight: 500;
}

.wel-hero #header a {
  color: white;
}

.wel-hero #header.scrolled a {
  color: grey;
}

#robot-hlo {
  position: relative;
  margin-top: 10px;
  animation: push ease-in-out 5s alternate 1;
  animation-delay: .5s;
}

@keyframes push {
  0% {
    left: 0;
    top: 0;
  }

  50% {
    top: -40vh;
  }

  100% {
    top: 0;
  }
}

@media screen and (max-width: 768px) {
  #vrr {
    padding: 12rem 0 18rem 0;
  }

  #robot-hlo {
    animation: none;
  }

  .vrr-bk {
    display: none;
  }

  #vrr .wel-heading {
    top: 18rem;
  }

  #welcome, #neugierig {
    font-size: 1.2rem;
  }

  .prt-col .bmbf {
    height: auto;
    width: 100%;
    margin: 0 auto 1em auto;
  }
}

.head-ico .bmbf {
  max-height: 200px;
}

.prt-col .fun-rob {
  width: 200px;
  float: right;
}

.hero-head .blg-rob {
  width: 200px;
  max-height: 400px;
  padding-top: 2rem;
}

#Heart {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
  -webkit-animation-name: shrnk;
  animation-name: shrnk;
}

#funding {
  margin: 6rem 0;
}

#funding p, #funding h5 {
  margin: 1rem 0;
  text-align: justify;
}

#pt-head {
  margin-bottom: 6rem;
}

#pt-head h1, #funding h1 {
  margin: .2em 0 .2em 0;
}

@media screen and (max-width: 768px) {
  #vrr h1 {
    font-size: 4rem;
  }

  #vrr h5 {
    font-size: 1.5rem;
  }

  #neugierig, #welcome {
    padding: 0 0 10vh 0;
  }

  .hero-head .blg-rob {
    width: auto;
    max-height: 200px;
    padding-top: 2rem;
  }

  #blog-hero {
    padding: 3rem 0;
    height: 100vh;
  }

  .blg-hero .card-title h5 {
    margin: 0;
  }

  .blg-hero .card-title h5 span {
    box-shadow: 0.8rem 0 0 rgb(158 0 136 / 60%), -0.8rem 0 0 rgb(158 0 136 / 60%);
  }
}

.toast {
  display: none;
}

/* H2 Game –––––––––––––––––––––––––––––––––––––––––––––––––– */

.retable-container {
  width: 100%;
  max-width: 100%;
  overflow: auto;
}

.retable {
  border: 1px solid grey;
  width: 100%;
  background: white;
  border-spacing: 0;
  border-collapse: collapse;
  overflow-x: auto;
  max-width: 100%;
}

.retable thead {
  font-weight: 700;
  border-bottom: 3px solid black;
}

.retable tr {
  border-top: 1px solid grey;
}

.retable tr:nth-child(even) {
  background: #f8f9fa;
}

.retable td {
  padding: .5rem;
}

.retable thead tr td span {
  font-weight: 200;
  font-size: 80%;
}

#calci-form {
  width: 100%;
  max-width: 100%;
}

#calci-form .warning {
  padding: 1rem;
  text-align: center;
  border: 1px solid red;
  margin: 1rem 0;
}

.warning span {
  color: red;
}

#calci-form .note {
  border-bottom: 1px solid #A035F9;
  padding-bottom: 1rem;
}

#calci-form .note .form-label {
  font-weight: 500;
  color: #A035F9;
}

.retotals h5 {
  margin: 1rem 0;
}

#calci-form .form-label span {
  font-size: 80%;
  font-weight: 300;
}

#calci-form .stoneed {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid #A035F9;
}

#calci-form .form-tabs {
  overflow: hidden;
  max-width: 100%;
  width: 100%;
}

#calci-form .tabs-nav {
  padding-top: 2rem;
  flex-flow: wrap;
}

section.modular-calci {
  max-width: 1920px;
  margin: 4rem auto 2rem auto;
  display: grid;
  grid-template-columns: 4fr 1fr;
  grid-template-rows: 1fr;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}

section.modular-calci h1, section.modular-calci h2, section.modular-calci h3, section.modular-calci h4, section.modular-calci h5 {
  max-width: 100%;
  margin: 1rem 0;
  text-align: left;
}

section.modular-calci h5 {
  font-family: Roboto;
}

section.calci-main {
  margin: 0 auto;
  max-width: 100%;
  padding: 0 1rem;
  overflow: auto;
}

section.calci-main p {
 max-width: unset;
}

section.calci-side-left {
  display: none;
  margin: 0 auto;
  align-self: start;
  position: sticky;
  top: 2rem;
}

section.calci-side-right {
  margin: 0 auto;
  align-self: start;
  position: sticky;
  top: 2rem;
}

.reform-container {
  overflow: hidden;
}

.reside {
  padding-left: .5rem;
}

.reside .alert {
  color: #A035F9;
  margin: 0;
}

.reside .alert span {
  color: black;
}

.reside h5 {
  margin: .5rem 0;
}

.reside span {
  font-weight: 500;
  float: left;
}

.reside ul {
  margin: 0;
  padding: 0;
}

.reside li {
  list-style: none;
  text-align: right;
  padding: 0;
}

.reside.inf li {
  text-align: left;
}

.reside.option1 {
  border-left: 2px solid #00A9A1;
}

.reside.option1 a {
  color: #00A9A1;
}

.reside.option2 {
  border-left: 2px solid #3375A5;
}

.reside.option2 a {
  color: #3375A5;
}

.reside.option3 {
  border-left: 2px solid #D64180;
}

.reside.option3 a {
  color: #D64180;
}

.reside.option4 {
  border-left: 2px solid #FED16A;
}

.reside.option4 a {
  color: #FED16A;
}

.section.h5sec {
  padding: 0;
}

.h5frame {
  max-width: 100%;
  width: 100%;
  padding-top: 4rem;
}

.h5frame iframe {
  width: 100%;
  height: 800px;
}

.btn.reset {
  float: right;
}

p.text-sm {
  font-size: 80%;
  margin: auto;
  text-align: left;
}

a.text-sm {
  font-size: 80%;
}

.tag {
  font-size: 70%;
}

.h5-but {
  padding: .2rem .8rem;
}

.h5p-list-wrap {
  margin: 3rem auto;
}

.h5p-list-wrap h2.h5-car-head {
  margin: 2rem 0;
  font-size: 1.5rem;
}

.h5p-list-wrap a:visited, .h5p-list-wrap a:hover {
  color: white;
}

.h5p-list-wrap h2 {
  margin: 0;
  text-align: left;
  font-size: 1rem;
}

iframe {
  border-radius: 5px;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

@media (max-width: 700px) {
  section.modular-calci {
      grid-template-columns: 1fr;
  }

  section.calci-side-left, section.calci-side-right {
      position: relative;
      top: 0;
  }

  section.calci-main {
      order: 1
  }

   section.calci-side-right {
      order: 2
  }

  section.calci-side-left {
      order: 3
  }
}