﻿/*** GENERAL ***/
h4 {
  font-size: 16px;
}
.__btn-style {
  margin: 0;
  width: 100%;
  max-width: 235px;
  text-align: center;
  /* box-shadow: none; */
}
.blue_line {
  margin: 10px 0 20px;
  width: 50px;
  height: 1px;
  background: #3DB9BF;
}
.green_arrow {
    width: 176px;
    height: auto;
}
/* .__btn-style h3 a,
.__btn-style h3 a:hover,
.__btn-style h3 a:focus {
  color: #1e1e1e;
} */

/*** HEADING ***/
.main-head {
  background-image: url("/Content/ImgEmerkey/2017-10-keys_1920.jpg");
}
.head-jumbo_heading {
  width: 100%;
}
.head-jumbo_heading h1 {
  margin-bottom: 0;
}
.head-arrow-down img {
  margin-top: 75px;
}

/*** SECTION 1 ***/
.state1 {
  margin: 85px auto 0;
}
.funktion__img .down-720 {
  margin-bottom: 0;
}

/*** SECTION 2 ***/
.state2 {
  margin: 150px auto;
}
.state2-content h1 {
  margin: 35px auto 0;
  color: #3DB9BF;
}
.state2-content h4 {
  margin-bottom: 45px;
}
.state2-content p {
  margin-bottom: 20px;
}
.state2-content img {
  width: 120px;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: optimizequality;
}
.state2-img {
  height: 490px;
  background-image: url("/Content/ImgEmerkey/2017-10-keybackup1.jpg");
  background-size: 137%;
  background-repeat: no-repeat;
  background-position: 80% 100%;
}

/*** SECTION 3 ***/
.state3 {
  margin: 0 auto 150px;
}
.state3-content h1 {
  margin: 0 auto 35px;
  max-width: 330px;
  width: 100%;
  text-align: center;
}

/*** SECTION 4 ***/
.state4 {
  margin: 0 auto 150px;
}
.state4-content p {
  margin: 0;
  text-align: center;
}
.state4 .__notInvert {
  margin: 0 auto 50px;
  width: 165px;
}
.state4 .__inverted {
  margin-left: 30px;
  padding: 40px;
}
.state4 .__inverted p {
  width: 220px;
}

/*** SECTION 5 ***/
.state5 {
  margin: 0 auto 150px;
}
.state5-content h1 {
  margin: 0 auto 50px;
  text-align: center;
}
.state5-content h3 {
  margin: 15px auto;
  font-size: 14px;
}
.state5-content p {
  text-align: justify;
}
.state5-content img.__icons {
  width: 100px;
}
.state5-content .d-flex {
  flex: 0 0 50%;
}
.state5-content .green_arrow_div {
  margin: 60px auto;
}
.state5-content img.green_arrow {
  width: 150px;
  height: auto;
  -webkit-transform: rotateZ(205deg);
  transform: rotateZ(205deg);
  transform-origin: center;
}
/*First column*/
.state5-content.__firstCol>div:nth-child(1) {
  flex: 0 0 45%;
}

/*Second column*/
.state5-content.__secondCol>div:nth-child(1) {
  margin-left: auto;
}
.state5-content.__secondCol>div:nth-child(2) {
  flex: 0 0 45%;
}
.state5-content.__secondCol img.green_arrow {
  -webkit-transform: rotateZ(145deg) rotateY(180deg);
  transform: rotateZ(145deg) rotateY(180deg);
}
/*Third column*/
.state5-content.__thirdCol .d-flex {
  flex: 1 1 auto;
}
.state5-content.__thirdCol p {
  margin-left: 15px;
  margin-right: 15px;
}

/*** SECTION 6 ***/
.state6 {
  margin: 0 auto 150px;
}
.state6-img {
  height: 250px;
  background-image: url("/Content/ImgEmerkey/2017-10-wzw_by_steve_haider_33.jpg");
  background-size: 131%;
  background-repeat: no-repeat;
  background-position: 45%;
}
.state6-content {
  margin: 40px auto 0;
}
.state6-content h1 {
  color: #3DB9BF;
  text-align: center;
}

/*** SECTION 7 ***/
.state7 {
  margin: 0 auto 150px;
}
.state7-content h1 {
  margin-bottom: 40px;
  text-align: center;
}

@media(min-width: 360px) {

  /*** HEADING ***/
  .head-jumbo_heading h1 {
    width: 310px;
  }

  /*** SECTION 2 ***/
  .state2-img {
    background-size: 115%;
    background-position: 90% 100%;
  }

  /*** SECTION 4 ***/
  .state4 .__inverted {
    margin-left: 55px;
  }
  .state4 .__inverted p {
    margin-left: auto;
  }

  /*** SECTION 5 ***/
  .state5-content h3 {
    font-size: 16px;
  }
  /*First column*/
  .state5-content.__firstCol .d-flex:nth-child(1) {
    flex: 0 0 34%;
    margin-right: auto;
  }
  .state5-content.__firstCol .d-flex:nth-child(2) {
    flex: 0 0 56%;
  }
  /*Second column*/
  .state5-content.__secondCol .d-flex:nth-child(1) {
    flex: 0 0 56%;
    margin-right: auto;
  }
  .state5-content.__secondCol .d-flex:nth-child(2) {
    flex: 0 0 34%;
  }
  /*Third column*/
  .state5-content.__thirdCol .d-flex:nth-child(1) {
    flex: 0 0 34%;
  }
  .state5-content.__thirdCol .d-flex:nth-child(2) {
    flex: 0 0 34%;
    margin-left: auto;
  }

  /*** SECTION 6 ***/
  .state6-img {
    background-size: 117%;
    background-position: 50%;
  }

}
@media(min-width: 375px) {

  /*** HEADING ***/
  .head-jumbo_heading {
    margin: 0 auto 0 15px;
  }

  /*** SECTION 6 ***/
  .state6-img {
    background-size: 110%;
    background-position: 35%;
  }

}
@media(min-width: 480px) {

  /*** GENERAL ***/
  .green_arrow_div {
    margin: 0 30px 0 auto;
  }

  /*** HEADING ***/
  .head-jumbo_heading {
    margin: 0 auto 0 25px;
    width: calc(100% - 25px);
  }
  .head-jumbo_heading h1 {
    width: 390px;
  }

  /*** SECTION 2 ***/
  .state2-img {
    background-size: 420px;
    background-position: 50% 100%;
  }
  .state2-content {
    margin: auto;
    width: 100%;
    max-width: 370px;
  }

  /*** SECTION 4 ***/
  .state4 .__notInvert {
    margin: 0 auto 50px 65px;
    width: 180px;
  }
  .state4 .__inverted {
    margin-left: 115px;
  }
  .state4 .__inverted p {
    width: 265px;
  }

  /*** SECTION 5 ***/
  .state5-content .green_arrow_div {
    margin: 60px 35% 60px auto;
  }
  /*First column*/
  .state5-content.__firstCol .d-flex:nth-child(1) {
    flex: 0 0 30%;
    margin-right: auto;
  }
  .state5-content.__firstCol .d-flex:nth-child(2) {
    flex: 0 0 63%;
    margin-right: auto;
  }
  /*Second column*/
  .state5-content.__secondCol .d-flex:nth-child(1) {
    flex: 0 0 63%;
    margin-right: auto;
    margin-left: 20px;
  }
  .state5-content.__secondCol .d-flex:nth-child(2) {
    flex: 0 0 23%;
    margin-right: 15px;
    margin-left: auto;
  }
  /*Third column*/
  .state5-content.__thirdCol {
    margin: auto;
    width: 100%;
    max-width: 310px;
  }
  .state5-content.__thirdCol .d-flex:nth-child(1) {
    flex: 0 0 34%;
  }
  .state5-content.__thirdCol .d-flex:nth-child(2) {
    flex: 0 0 34%;
    margin-left: auto;
  }

  /*** SECTION 6 ***/
  .state6-img {
    height: 315px;
    background-size: 107%;
    background-position: 30%;
  }

}
@media(min-width: 720px) {

  /*** GENERAL ***/
  h4 {
    font-size: 18px;
  }
  .green_arrow_div {
    margin: auto;
    max-width: 350px;
  }

  /*** HEADING ***/
  .head-jumbo_heading h1 {
    width: 590px;
  }
  .head-arrow-down img {
    margin-top: 150px;
  }

  /*** SECTION 1 ***/
  .state1 {
    margin: 115px auto 0;
  }

  /*** SECTION 2 ***/
  .state2 {
    margin: 150px auto 240px;
  }
  .state2-content img {
    width: 180px;
    margin-bottom: 35px;
  }
  .state2-img {
    margin-right: 15px;
    background-size: 125%;
    background-position: 95% 100%;
  }
  .state2-content {
    margin: 0 auto 0 15px;
    max-width: 85%;
  }

  /*** SECTION 3 ***/
  .state3-content h1 {
    max-width: 640px;
  }

  /*** SECTION 4 ***/
  .state4 {
    margin: 0 auto 240px;
  }
  .state4 .__notInvert {
    margin: auto;
    height: 100%;
    display: flex;
    align-items: center;
  }
  .state4 .__inverted {
    margin: 0;
  }
  .state4 .__inverted p {
    margin: auto;
    width: 365px;
  }
  /*** SECTION 5 ***/
  .state5 {
    margin: 0 auto 240px;
  }
  .state5-content h1 {
    margin: 0 auto 85px;
  }
  .state5-content h3 {
    font-size: 18px;
  }
  .state5-content img.green_arrow {
    margin: 0;
    width: 190px;
  }
  /*First column*/
  .state5-content.__firstCol .d-flex:nth-child(1) {
    flex: 0 0 23%;
    margin: 0;
  }
  .state5-content.__firstCol .d-flex:nth-child(2) {
    flex: 0 0 44%;
    margin: 0;
  }
  .state5-content.__firstCol .d-flex:nth-child(3) {
    flex: 0 0 23%;
    margin: 60px auto;
  }
  /*Second column*/
  .state5-content.__secondCol .d-flex:nth-child(1) {
    flex: 0 0 38%;
    margin: 0;
  }
  .state5-content.__secondCol .d-flex:nth-child(2) {
    flex: 0 0 23%;
    margin: 0;
  }
  .state5-content.__secondCol .d-flex:nth-child(3) {
    flex: 0 0 33%;
    order: -1;
    margin: 60px auto;
  }
  /*Third column*/
  .state5-content.__thirdCol {
    margin: 0;
    margin-left: 25px;
  }

  /*** SECTION 6 ***/
  .state6-img {
    background-size: 500px;
    background-position: 50%;
  }
  .state6-content h1 {
    margin: auto;
    width: 100%;
    max-width: 480px;
  }

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

  /*** HEADING ***/
  .head-jumbo_heading h1 {
    width: 630px;
  }

  /*** SECTION 3 ***/
  .state3-content h1 {
    max-width: 690px;
  }

  /*** SECTION 4 ***/
  .state4 .__inverted p {
    width: 385px;
  }

  /*** SECTION 5 ***/
  /*First column*/
  .state5-content.__firstCol .d-flex:nth-child(1) {
    flex: 0 0 20%;
  }
  .state5-content.__firstCol .d-flex:nth-child(2) {
    flex: 0 0 39%;
  }
  .state5-content.__firstCol .d-flex:nth-child(3) {
    flex: 0 0 23%;
    margin: 60px auto 60px 15px;
  }
  /*Second column*/
  .state5-content.__secondCol .d-flex:nth-child(1) {
    flex: 0 0 35%;
  }
  .state5-content.__secondCol .d-flex:nth-child(2) {
    flex: 0 0 20%;
  }
  .state5-content.__secondCol .d-flex:nth-child(3) {
    flex: 0 0 33%;
    order: -1;
    margin: 60px 15px 60px auto;
  }
  /*Third column*/
  .state5-content.__thirdCol {
    margin-left: 20px;
  }

  /*** SECTION 6 ***/
  .state6 {
    margin: 0 auto 240px;
  }
  .state6 .row>div:nth-child(2) {
    order: -1;
  }
  .state6-img {
    background-size: 100%;
    background-position: 100%;
  }
  .state6-content {
    margin: 0;
    height: 100%;
  }

}
@media(min-width: 1024px) {

  /*** GENERAL ***/
  h4 {
    font-size: 21px;
  }

  /*** HEADING ***/
  .head-jumbo_heading {
    margin: 0 auto 0 65px;
    width: calc(100% - 65px);
  }
  .head-jumbo_heading h1 {
    width: 720px;
  }
  .head-arrow-down img {
    margin-top: 125px;
  }

  /*** SECTION 2 ***/
  .state2-img {
    margin-right: 0;
    /*background-size: 415px;*/
    background-size: 100%;
    /*background-position: 0 100%;*/
    background-position: 0 85%;
  }
  .state2-content {
    /*margin: 0 auto 0 50px;*/
    margin: 0 auto;
  }

  /*** SECTION 3 ***/
  .state3-content h1 {
    max-width: 800px;
  }

  /*** SECTION 4 ***/
  .state4 .__notInvert {
    width: 225px;
  }
  .state4 .__inverted {
    padding: 60px;
  }

  /*** SECTION 5 ***/
  .state5-content h1 {
    margin: 0 auto 105px;
  }
  .state5-content h3 {
    font-size: 21px;
  }
  .state5-content img.__icons {
    width: 125px;
  }
  /*First column*/
  .state5-content.__firstCol .d-flex:nth-child(2) {
    flex: 0 0 29%;
  }
  /*Second column*/
  .state5-content.__secondCol .d-flex:nth-child(1) {
    flex: 0 0 26%;
  }
  /*Third column*/
  .state5-content.__thirdCol {
    margin-left: 35px;
  }

  /*** SECTION 6 ***/
  .state6-img {
    height: 400px;
    background-size: 630px;
  }
  .state6-content h1 {
    width: 300px;
  }

}
@media(min-width: 1366px) {

  /*** HEADING ***/
  .head-jumbo_heading {
    margin: 0 auto 0 90px;
    width: calc(100% - 90px);
  }
  .head-jumbo_heading h1 {
    width: 830px;
  }
  .head-arrow-down img {
    margin-top: 180px;
  }
  .funktion__img .up-720 img {
    margin-top: 30px;
    position: relative;
  }

  /*** SECTION 2 ***/
  .state2-img {
    background-size: 420px;
    background-position: 50% 100%;
  }
  .state2-content {
    margin: 0 auto 0 15px;
    max-width: 480px;
  }

  /*** SECTION 2 ***/
  .state3-content h1 {
    max-width: 920px;
  }

  /*** SECTION 4 ***/
  .state4 .__notInvert {
    margin-right: 65px;
  }
  .state4 .__inverted {
    padding: 60px 80px;
  }
  .state4 .__inverted p {
    margin-left: 0;
  }

  /*** SECTION 5 ***/
  .state5 {
    max-width: 940px;
  }
  /*First column*/
  .state5-content.__firstCol .d-flex:nth-child(3) {
    margin: 60px auto;
  }

  /*** SECTION 6 ***/
  .state6-img {
    height: 495px;
    background-size: 785px;
  }
  .state6-content h1 {
    width: 340px;
  }

}
@media(min-width: 1920px) {

  /*** GENERAL ***/
  h4 {
    font-size: 30px;
  }
  .blue_line {
    width: 100px;
  }

  /*** HEADING ***/
  .head-jumbo_heading h1 {
    width: 1000px;
  }
  .head-arrow-down img {
    margin-top: 260px;
  }

  /*** SECTION 1 ***/
  .state1 {
    margin: 220px auto 0;
  }
  .funktion__img .up-720 img {
    width: 800px;
  }
  .funktion__video {
    max-width: 1360px;
    margin: 0 auto;
  }

  /*** SECTION 2 ***/
  .state2-content img {
    margin-top: 28px;
  }

  /*** SECTION 3 ***/
  .state3-content h1 {
    max-width: 1050px;
  }

  /*** SECTION 5 ***/

  /*First column*/
  .state5-content.__firstCol .d-flex:nth-child(2) {
    flex: 0 0 38%;
  }
  .state5-content.__firstCol .d-flex:nth-child(2) p {
    padding-top: 12px;
  }
  .state5-content.__firstCol .d-flex:nth-child(3) {
    margin: 90px auto;
  }
  /*Second column*/
  .state5-content.__secondCol .d-flex:nth-child(1) {
    flex: 0 0 32%;
  }
  .state5-content.__secondCol .d-flex:nth-child(1) p {
    padding-top: 20px;
  }
  .state5-content.__secondCol .d-flex:nth-child(3) {
    flex: 0 0 23%;
    margin: 90px 50px 90px auto;
  }
  /*Third column*/
  .state5-content.__thirdCol {
    margin-left: 30px;
    max-width: 350px;
  }

  /*** SECTION 6 ***/
  .state6-img {
    height: 660px;
    background-size: 1050px;
  }
  .state6-content h1 {
    width: 410px;
  }


}
