@font-face {
  font-family: "Roboto";
  src: url("Roboto-Light-webfont.woff") format("woff");
  font-style: normal;
  font-weight: 300;
}

@font-face {
  font-family: "Roboto";
  src: url("Roboto-Lightitalic-webfont.woff") format("woff");
  font-style: italic;
  font-weight: 300;
}

h1 {
  padding-bottom: 0.5rem;
}

.no_border {
  border: none;
}

@font-face {
  font-family: "Roboto";
  src: url("Roboto-Bold-webfont.woff") format("woff");
  font-style: normal;
  font-weight: 700;
}

body {
  font-family: "Roboto", sans-serif;
  font-size: 200;
  line-height: 1.8em;
  color: #5D6063;
}

em {
  font-style: italic;
}

strong {
  font-weight: bold;
}

.navbar {
  padding-bottom: none;
}

 .navbar-nav li {
  padding-right: 20px;
}
.nav-link {
  font-size: 1.2rem !important
}

.nav-item {
  padding: 0 1.5rem 0 1.3rem;
}


button:focus {
    outline: none;
    outline: none;
}

.nopadding {
  padding: 0;
}

.icon {
  position: relative;
  top: -150px;
}

.index-wtf {
  position: relative;
  top: -140px;
}

.plattform{
  margin-top: 40px;
  padding: 0 20px 0 20px
}

.contact-jpnw {
  max-width: 500px;
  margin-right: 0;
}

.section {
  padding: 4em 1em;

  margin: 0 auto;
  max-width: 540px;
}

.section h1 {
  margin-bottom: 1.5em;
}



.section p,
.section ul,
.section ol,
.section figure {
  margin-bottom: 1em;
}

.section p:last-child,
.section ul:last-child,
.section ol:last-child,
.section figure:last-child {
  margin-bottom: 0;
}

.navbar-toggler {
  border: none;
}

.padding-card {
  margin: 0 0.5rem 0 0.5rem;
}

.logo-no-wrap{
  flex-wrap: nowrap;
}






/*---Media Queries --*/
@media (max-width: 992px) {

  }
@media (max-width: 768px) {

}
@media (max-width: 576px) {
  .padding-card {
    margin: 0rem;
  }
  .icon-index{
    height: 150px;
  }
  .icon {
    position: relative;
    top: -75px;
  }
  .plattform {
    margin-top: 0;
  }
  .index-wtf {
    position: relative;
    top: -90px;
  }

}


/*---Firefox Bug Fix --*/
.carousel-item {
  transition: -webkit-transform 0.5s ease;
  transition: transform 0.5s ease;
  transition: transform 0.5s ease, -webkit-transform 0.5s ease;
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
}
/*--- Fixed Background Image --*/
figure {
  position: relative;
  width: 100%;
  height: 60%;
  margin: 0!important;
}
.fixed-wrap {
  clip: rect(0, auto, auto, 0);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#fixed {
  background-image: url('img/mac.png');
  position: fixed;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  will-change: transform;
}
/*--- Bootstrap Padding Fix --*/
[class*="col-"] {
    padding: 1rem;
}

.jpnw-color {
  color: #eb4c4f;
}

.pure-button {
  background: #eb4c4f;
  font-size: 1.5rem;
}

.form-row {
 margin-bottom: 40px;
 font-size: 1.5rem;
}

.form-row input[type="text"],
.form-row input[type="email"] {
 background-color: #FFFFFF;
 border: 2px solid #D6D9DC;
 border-radius: 3px;
 width: 100%;
 padding: 7px;
 /* font-size: 14px; */
}

.form-row label {
 margin-bottom: 15px;
}

.form-row input {
  max-width: 500px;
}

.form-row input[type="text"]:invalid,
.form-row input[type="email"]:invalid {
 border: 1px solid #D55C5F;
 color: #D55C5F;
 box-shadow: none;
}







Extra small (xs) devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap

Small (sm) devices (landscape phones, 576px and up)
@media (min-width: 576px) {

}

Medium (md) devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

Large (lg) devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

Extra (xl) large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }