/**ETag:253805908 - DO NOT EDIT -**/
/*******************************************************************************
    pepperdial.less
--------------------------------------------------------------------------------
        HTML + Body
*******************************************************************************/
*,
*:before,
*:after {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}
html {
  position: relative;
  min-height: 100%;
  padding-bottom: 70px;
  font-size: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  width: 100%;
  height: 100%;
  margin: 0;
  color: #757575;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: normal;
  background: #f7f7f7;
}
/*******************************************************************************
        Headline + Text
*******************************************************************************/
h1 {
  font-weight: 700;
  font-size: 56px;
}
h2,
h3,
h4,
h5,
h6 {
  color: #545454;
}
h1,
h2,
h3,
h4 {
  font-family: 'Roboto Condensed', sans-serif;
}
h2 {
  font-size: 48px;
  line-height: 56px;
  font-weight: 400;
}
h3 {
  font-size: 36px;
  font-weight: 400;
}
h4 {
  font-size: 24px;
  font-weight: 400;
}
h5 {
  font-size: 18px;
  font-weight: 400;
}
h6 {
  font-size: 16px;
  font-weight: 400;
}
small {
  font-size: 50%;
  font-weight: 300;
}
strong {
  font-weight: 500;
}
blockquote {
  margin: 4px 16px;
  padding: 8px 24px;
  font-style: italic;
  border-left: solid 2px #c2c2c2;
}
pre {
  margin: 4px 16px;
  padding: 8px 24px;
  font-size: 14px;
  color: #545454;
}
/*******************************************************************************
        Hyperlink
*******************************************************************************/
a,
a:link,
a:hover,
a:focus,
a:active,
a:visited {
  text-decoration: none;
  outline: none;
}
.link {
  padding: 8px 16px;
  color: #83bedd;
  transition: all .3s ease;
}
.link:hover {
  color: #479fcc;
}
.ilink {
  color: #83bedd;
  transition: all .3s ease;
}
.ilink:hover,
.ilink:focus {
  color: #479fcc;
}
.btn.btn-ghost {
  border: 2px solid #546E7A;
  color: #546E7A;
  font-weight: 400;
  display: inline-block;
  margin: 45px 16px 25px;
  padding: 8px 16px;
  letter-spacing: 1px;
  border-radius: 5px;
}
.btn.btn-ghost.btn-cta {
  border: 2px solid #cc4a47;
  color: #f7f7f7;
  background: #cc4a47;
}
.btn.btn-ghost.btn-cta:hover,
.btn.btn-ghost.btn-cta:focus {
  background: #c33936;
  border-color: #c33936;
}
.ghost-group .btn:first-child {
  margin-left: 0;
}
.ghost-group .btn:last-child {
  margin-right: 0;
}
.ghost-group-dialfire .btn.btn-ghost {
  margin: 8px 16px 8px 0;
}
.ghost-group-dialfire.ghost-group .btn:first-child {
  margin-top: 20px;
}
@media only screen and (min-width: 480px) {
  .ghost-group-dialfire .btn.btn-ghost {
    margin: 45px 16px 25px;
  }
  .ghost-group-dialfire.ghost-group .btn:first-child {
    margin-left: 0;
  }
  .ghost-group-dialfire.ghost-group .btn:last-child {
    margin-right: 0;
  }
}
/*******************************************************************************
        Helpers
*******************************************************************************/
.hangup-icon {
  color: #e57373;
  transform: rotate(137deg);
  -webkit-transform: rotate(137deg);
}
#WidgetLauncher {
  margin: 0 !important;
}
.clear {
  clear: both;
}
.img-responsive {
  max-width: 100%;
  height: auto;
  margin: 8px 16px 16px 0;
}
.img-float {
  float: left;
}
ul.check-before {
  list-style: none;
  padding-left: 48px;
}
ul.check-before li {
  position: relative;
  margin: 6px 0;
}
ul.check-before li:before {
  position: absolute;
  left: -27px;
  content: '\f00c';
  display: inline-block;
  font-family: 'appbox-font';
  color: #98cc47;
}
ul.cloudit {
  list-style: none;
  padding-left: 48px;
}
ul.cloudit li {
  position: relative;
  margin: 6px 0;
}
ul.cloudit li:before {
  position: absolute;
  left: -27px;
  content: '●';
  display: inline-block;
  color: #2064ac;
}
.unexpand {
  max-height: 0;
  opacity: .2;
  overflow: hidden;
  transition: max-height 0.25s ease, opacity 0.2s ease;
  -webkit-transition: max-height 0.25s ease, opacity 0.2s ease;
}
.unexpand.open {
  opacity: 1;
  max-height: 850px;
  transition: max-height 0.25s ease, opacity 0.2s ease;
  -webkit-transition: max-height 0.25s ease, opacity 0.2s ease;
}
@media only screen and (min-width: 1024px) {
  .unexpand.open {
    max-height: 610px;
  }
}
@media only screen and (max-width: 768px) {
  .hidden-mobile {
    display: none;
  }
}
@media only screen and (min-width: 768px) {
  .hidden-desktop {
    display: none;
  }
}
/*******************************************************************************
        Form
*******************************************************************************/
.inputgroup {
  position: relative;
  margin-bottom: 36px;
}
.inputgroup.ipt-wm {
  margin-bottom: 0;
}
.inputgroup.feedback {
  width: 100%;
}
.inputgroup input,
.inputgroup textarea {
  display: block;
  width: 100%;
  padding: 8px;
  color: #545454;
  font-family: Roboto, 'Roboto', sans-serif;
  font-size: 16px;
  font-weight: 300;
  background: transparent;
  border: none;
  border-bottom: 1px solid #e0e0e0;
  border-radius: 0;
  -webkit-appearance: none;
}
.inputgroup input:focus,
.inputgroup textarea:focus {
  outline: none;
}
.inputgroup label,
.inputgroup .label-ph {
  position: absolute;
  top: 0;
  -webkit-transform: translate(8px, 8px);
  transform: translate(8px, 8px);
  -webkit-transform-origin: 0% 0%;
  -ms-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
  color: #858585;
  font-size: 16px;
  font-weight: 300;
  pointer-events: none;
  transition: transform 0.2s ease, color 0.2s ease;
  -webkit-transition: -webkit-transform 0.2s ease, color 0.2s ease;
}
.inputgroup .bar {
  position: relative;
  display: block;
  width: 100%;
}
.inputgroup .bar:before,
.inputgroup .bar:after {
  content: '';
  position: absolute;
  bottom: 0px;
  height: 2px;
  width: 0;
  z-index: 6;
  background: #479fcc;
  transition: width 0.2s ease;
  -webkit-transition: width .2s ease;
}
.inputgroup .bar:before {
  left: 50%;
}
.inputgroup .bar:after {
  right: 50%;
}
.did-not-receive {
  padding-top: 16px;
  overflow: hidden;
  margin-right: 12px;
}
.did-not-receive .btn-feedback {
  cursor: pointer;
  margin: 8px auto;
  float: right;
  background: transparent;
}
@media only screen and (min-width: 620px) {
  .inputgroup.feedback {
    float: left;
    width: 320px;
  }
  .did-not-receive {
    margin-right: 0;
  }
  .did-not-receive .btn-feedback {
    margin: 2px 16px;
    float: left;
  }
}
select:focus ~ .bar:before,
select:focus ~ .bar:after,
textarea:focus ~ .bar,
input:focus ~ .bar:before,
input:focus ~ .bar:after,
select:focus + .bar:before,
select:focus + .bar:after,
textarea:focus + .bar,
input:focus + .bar:before,
input:focus + .bar:after {
  width: 50%;
}
select:focus ~ label,
input:focus ~ label,
textarea:focus ~ label,
textarea.used:focus ~ label,
select:focus.used ~ label,
input:focus.used ~ label,
select:focus + label,
input:focus + label,
textarea:focus + label,
textarea.used:focus + label,
select:focus.used + label,
input:focus.used + label {
  -webkit-transform: scale(0.75) translate(0, -24px);
  transform: scale(0.75) translate(0, -24px);
  color: #479fcc;
  font-weight: 500;
}
select.used ~ label,
input.used ~ label,
textarea.used ~ label,
select.used + label,
input.used + label,
textarea.used + label {
  -webkit-transform: scale(0.75) translate(0, -24px);
  transform: scale(0.75) translate(0, -24px);
  color: #6b6b6b;
  font-weight: 500;
}
select {
  position: relative;
  display: block;
  width: 100%;
  height: 40px;
  padding: 8px 0;
  color: #545454;
  font-family: Roboto, 'Roboto', sans-serif;
  font-size: 16px;
  font-weight: 300;
  background: transparent;
  border: none;
  border-bottom: 1px solid #e0e0e0;
  border-radius: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  -ms-appearance: none;
  appearance: none;
  -khtml-appearance: none;
  outline: none;
  cursor: pointer;
}
select:focus,
select:active {
  outline: none;
}
select::-ms-expand {
  display: none;
}
.select:after {
  content: "\f0d7";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  padding: 8px;
  width: 30px;
  height: 39px;
  font-family: 'appbox-font';
  font-size: 18px;
  background: #ffffff;
  z-index: 5;
  pointer-events: none;
}
.radio {
  position: relative;
  display: inline-block;
  max-width: 100%;
  cursor: pointer;
  color: #545454;
  font-weight: 300;
  margin-bottom: 0;
  min-height: 23px;
  padding: 8px 8px 8px 30px;
}
.radio input[type="radio"] {
  opacity: 0;
  cursor: pointer;
}
.radio input[type="radio"]:focus ~ .unchecked,
.radio input[type="radio"]:checked ~ span,
.radio input[type="radio"]:focus + .unchecked,
.radio input[type="radio"]:checked + span {
  color: #479fcc;
}
.radio input[type="radio"]:checked ~ .checked,
.radio input[type="radio"]:checked + .checked {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}
.radio input[type="radio"]:checked ~ .unchecked,
.radio input[type="radio"]:checked + .unchecked {
  opacity: 0;
  -webkit-transform: scale(0.2);
  transform: scale(0.2);
  color: #479fcc;
}
.radio input[type="radio"].ng-invalid ~ span,
.radio input[type="radio"] .ng-invalid:focus ~ span,
.radio input[type="radio"] .ng-invalid ~ .unchecked,
.radio input[type="radio"].ng-invalid + span,
.radio input[type="radio"] .ng-invalid:focus + span,
.radio input[type="radio"] .ng-invalid + .unchecked {
  color: #cc4a47;
}
.radio .unchecked {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}
.radio .checked {
  opacity: 0;
  -webkit-transform: scale(0.2);
  transform: scale(0.2);
  color: #479fcc;
}
.radio input[type="radio"]:checked ~ span,
.radio input[type="radio"]:checked + span {
  color: #479fcc;
}
.radio i {
  position: absolute;
  top: 8px;
  left: 0;
  font-size: 20px;
  font-weight: normal;
  -webkit-transition: opacity .3s ease, transform .3s ease;
  transition: opacity .3s ease, transform .3s ease;
}
.radio + .radio,
.checkbox + .checkbox {
  margin-top: 10px;
}
.iptgroup .label-checkbox {
  position: relative;
  display: inline-block;
  max-width: 100%;
  cursor: pointer;
  color: #545454;
  font-weight: 300;
  margin-bottom: 0;
  min-height: 23px;
  padding: 0 8px 0 30px;
  pointer-events: auto;
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
  -webkit-transform-origin: 0% 0%;
  -ms-transform-origin: 0% 0%;
}
.iptgroup .label-checkbox input[type="checkbox"] {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.iptgroup .label-checkbox input[type="checkbox"]:focus ~ .unchecked,
.iptgroup .label-checkbox input[type="checkbox"]:focus + .unchecked {
  color: #479fcc;
}
.iptgroup .label-checkbox input[type="checkbox"]:checked ~ .checked,
.iptgroup .label-checkbox input[type="checkbox"]:checked + .checked {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}
.iptgroup .label-checkbox input[type="checkbox"]:checked ~ .unchecked,
.iptgroup .label-checkbox input[type="checkbox"]:checked + .unchecked {
  opacity: 0;
  -webkit-transform: scale(0.2);
  transform: scale(0.2);
  color: #479fcc;
}
.iptgroup .label-checkbox.error .unchecked {
  color: #cc4a47;
}
.iptgroup .label-checkbox .unchecked {
  opacity: 1;
  color: #d6d6d6;
  -webkit-transform: scale(1);
  transform: scale(1);
}
.iptgroup .label-checkbox .checked {
  opacity: 0;
  -webkit-transform: scale(0.2);
  transform: scale(0.2);
  color: #479fcc;
}
.iptgroup .label-checkbox input[type="checkbox"]:checked ~ span.key-value,
.iptgroup .label-checkbox input[type="checkbox"]:checked + span.key-value {
  color: #999999;
}
.iptgroup .label-checkbox i {
  position: absolute;
  top: 4px;
  left: 0;
  font-size: 20px;
  font-weight: normal;
  transition: opacity .3s ease, transform .3s ease;
  -webkit-transition: opacity .3s ease, transform .3s ease;
}
.ipt-pricing-table {
  width: auto;
  display: inline-block;
}
@media only screen and (min-width: 768px) {
  .ipt-pricing-table {
    width: 210px;
    display: inline-block;
  }
  .ipt-pricing-table.lang_fr {
    width: 225px;
  }
}
/*******************************************************************************
    STRUCTURE
--------------------------------------------------------------------------------
        Article + Singlepage
*******************************************************************************/
.article {
  margin: 71px 0 0;
}
.singlepage .area {
  border-spacing: 0;
}
.singlepage .punched {
  padding: 0;
}
@media only screen and (min-width: 768px) {
  .article {
    margin: 77px 0 0;
  }
}
.section {
  position: relative;
  padding: 32px 0;
  clear: both;
}
.section h3 {
  color: #24758a;
  margin-bottom: 0;
}
.section h5 {
  margin-top: 0;
}
.section h3,
.section h5,
.section p {
  padding: 0 18px;
}
.section.features h3 {
  margin-bottom: 32px;
}
.section.trusted {
  padding: 16px 0;
  background: white;
  border-bottom: 1px solid #dbdbdb;
  box-shadow: 0 -2px 3px 0 rgba(31, 104, 122, 0.2);
}
.elements .area {
  width: 100%;
}
.elements h5 {
  margin-bottom: 20px;
}
.punched {
  padding: 32px 0;
  background-image: url('/web/images/in-the-sky-join.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-attachment: scroll;
  box-shadow: inset 0 0px 6px 0px #1f687a;
}
.sky {
  background-image: url('/web/images/in-the-sky-join.jpg');
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-size: cover;
  background-position: 0% 67%;
  position: absolute;
  top: 0;
  height: 420px;
  width: 100%;
  z-index: 3;
}
@media only screen and (min-height: 768px) {
  .sky {
    height: 520px;
  }
}
.section.elements {
  padding-top: 0;
}
@media only screen and (min-width: 768px) {
  .section {
    padding: 64px 0;
  }
  .section.elements {
    padding: 64px 0;
  }
}
@media only screen and (min-width: 1024px) {
  .section {
    padding: 85px 0;
  }
  .section.elements {
    padding: 35px 0 85px;
  }
  .sky {
    background-attachment: scroll;
  }
  .punched {
    background-attachment: fixed;
  }
  .elements h5 {
    margin-bottom: 48px;
  }
}
/*******************************************************************************
        Reviewheader Area Reviewfooter
*******************************************************************************/
.review-head {
  width: 100%;
  max-width: 1170px;
  margin: 0 auto;
  overflow: hidden;
}
.dialfire .review-head {
  position: relative;
  width: 100%;
  margin: 0 auto;
  overflow: visible;
}
.area {
  position: relative;
  display: block;
  max-width: 1160px;
  margin: 0 auto;
  overflow: hidden;
  border-spacing: 0;
}
.area.tabled {
  display: table;
  border-spacing: 8px;
  transition: border-spacing 0.25s ease;
  -webkit-transition: border-spacing 0.25s ease;
}
.area.flexbox {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  align-content: flex-start;
}
.area.flexbox div {
  margin: 0 24px;
}
.info-side-box {
  font-size: 14px;
}
.content-text-box,
.info-side-box {
  position: relative;
  margin: 16px auto 8px;
  padding: 16px;
  width: 95%;
  background: white;
  box-shadow: 1px 2px 9px -2px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  z-index: 6;
}
.content-text-box h1,
.info-side-box h1 {
  margin: 16px 0;
  color: #24758a;
}
.content-text-box section,
.info-side-box section {
  padding-top: 70px;
  margin-top: -70px;
}
.content-text-box a,
.info-side-box a {
  color: #83bedd;
  transition: all .3s ease;
}
.content-text-box a:hover,
.info-side-box a:hover {
  color: #479fcc;
}
.content-text-box.content-text-box-docu {
  min-height: 100vh;
}
@media only screen and (min-width: 480px) {
  .review-head,
  .content-text-box,
  .info-side-box {
    width: 90%;
  }
}
@media only screen and (min-width: 600px) {
  .review-head {
    width: 100%;
  }
}
@media only screen and (min-width: 768px) {
  .features .review-head {
    width: 100%;
  }
  .info-side-box {
    width: 650px;
    margin: 42px 60px 0;
  }
  .content-text-box {
    width: 650px;
    margin: 16px 60px;
    padding: 32px;
  }
  .trusted .area {
    max-width: 60%;
    margin: 0;
  }
}
@media only screen and (min-width: 950px) {
  .info-side-box {
    position: absolute;
    top: 400px;
    left: 730px;
    width: 20%;
    margin: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
  }
}
@media only screen and (min-width: 950px) and (min-height: 768px) {
  .info-side-box {
    top: 500px;
  }
}
@media only screen and (min-width: 1024px) {
  .review-head {
    width: 100%;
  }
  .dialfire .review-head {
    position: absolute;
    top: 95px;
  }
  .area.tabled {
    border-collapse: separate;
    border-spacing: 12px;
    width: 100%;
  }
  .info-side-box {
    left: 780px;
  }
  .content-text-box {
    width: 700px;
    padding: 48px;
    margin: 42px 60px 8px;
  }
  .trusted .area {
    max-width: 1160px;
    margin: 0 auto;
  }
}
@media only screen and (min-width: 1120px) {
  .info-side-box {
    width: 23%;
  }
}
@media only screen and (min-width: 1200px) {
  .dialfire .review-head {
    left: 50%;
    width: 100%;
    width: 1170px;
    margin: 0 0 0 -585px;
  }
  .info-side-box {
    left: 73%;
  }
  .content-text-box {
    width: 70%;
    margin: 90px 8px 32px;
    padding: 64px;
  }
}
/*******************************************************************************
        Header + Content + Footer
*******************************************************************************/
.header {
  padding: 8px 12px;
  text-align: left;
  overflow: hidden;
}
.header h3 {
  margin: 8px 0;
}
.header h4,
.header h5 {
  margin: 8px 0;
}
.content {
  padding: 0 8px;
  text-align: left;
}
.content p {
  padding: 4px 8px;
}
.content h4 {
  margin: 16px 0 24px;
}
.content h5 {
  padding: 0 8px;
}
.content h6 {
  padding: 0 16px;
  margin: 8px 0;
}
.content li {
  padding: 4px 0;
}
/*******************************************************************************
        Post
*******************************************************************************/
.post .date {
  margin-bottom: 32px;
  padding-bottom: 4px;
  color: #575757;
  border-bottom: 1px dashed #b8b8b8;
}
.post a {
  color: #479fcc;
}
.post a:hover {
  background-color: rgba(71, 159, 204, 0.15);
}
.post-category {
  position: absolute;
  top: 0;
  left: 0;
  padding: 12px 24px 10px 26px;
  background-color: #24758a;
  color: #ffffff;
  font-size: 18px;
  font-weight: 400;
  text-align: center;
}
.post-category i {
  font-size: 24px;
}
/*******************************************************************************
        Dialogue
*******************************************************************************/
.dialogue {
  margin: 0;
}
.dialogue:after {
  content: '';
  display: block;
  max-width: 1111px;
  border-bottom: solid 1px #d6d6d6;
}
.dialogue:last-child:after {
  border-bottom: none;
}
.dialogue .header h5 {
  color: #83bedd;
}
.dialogue .header h5:hover {
  color: #479fcc;
}
.dialogue h5,
.dialogue h6 {
  font-size: 16px;
}
@media only screen and (min-width: 1200px) {
  .dialogue:after {
    max-width: 776px;
  }
}
@media only screen and (min-width: 768px) {
  .dialogue {
    max-width: 90%;
  }
}
@media only screen and (min-width: 1024px) {
  .dialogue {
    max-width: 800px;
  }
}
/*******************************************************************************
    Frontpage
        Headbereich
*******************************************************************************/
.dialfire {
  width: 100%;
  image-rendering: pixelated;
}
.element-box-dialfire {
  width: 100%;
  margin: 0;
  padding: 85px 16px 25px;
  text-align: center;
}
.element-box-dialfire h2 {
  margin: 16px 0 8px;
  font-size: 26px;
  line-height: 1.4;
  color: #395b65;
  font-weight: 600;
}
.element-box-dialfire h2.lang_es {
  font-size: 24px;
}
.element-box-dialfire h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 300;
  color: #395b65;
}
.element-box-dialfire p {
  line-height: 1.8;
  color: #546E7A;
  font-size: 16px;
  font-weight: 500;
}
.pricing-box {
  position: relative;
  width: auto;
  max-width: 320px;
  min-width: 270px;
  margin: 16px auto 0;
  padding: 16px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 2px 6px -2px #707070;
  z-index: 9;
}
.pricing-box table td {
  padding: 0;
  margin: auto;
}
.pricing-box a span {
  vertical-align: top;
  display: inline-block;
  max-width: 45px;
  overflow: hidden;
  text-overflow: ellipsis;
  float: left;
}
.pricing-box h3 {
  line-height: .6;
  margin-bottom: 14px;
}
.pricing-box h3 small {
  font-size: 40%;
  padding: 0 4px 0 2px;
  font-weight: 400;
}
.pricing-box .pricing-item-price {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 40px;
  font-weight: 400;
  vertical-align: top;
  line-height: 1;
  min-height: 40px;
}
.pricing-box .pricing-item-price-from {
  display: inline-block;
  font-weight: 300;
  margin-left: -8px;
  vertical-align: middle;
  margin-top: -12px;
  margin-right: -6px;
  font-size: 14px;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}
.pricing-box .pricing-item-price-from.hidden {
  visibility: hidden;
  opacity: 0;
}
.pricing-box .pricing-item-price-from.lang_de {
  margin-left: 0;
  margin-right: 0;
  margin-top: 12px;
  transform: rotate(0deg);
}
.pricing-box .pricing-item-unit {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  font-weight: 400;
  padding-left: 5px;
  line-height: 1.2;
  vertical-align: top;
  padding-top: 5px;
}
.pricing-box .per-minute {
  display: inline-block;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  padding-left: 5px;
  line-height: 1.2;
  vertical-align: top;
  font-size: 12px;
}
.country-select,
.currency-select {
  position: relative;
  float: left;
  font-size: 14px;
}
.country-select a,
.currency-select a {
  position: relative;
  display: block;
  cursor: pointer;
  color: #575757;
  border-bottom: 1px solid #d6d6d6;
  padding: 4px 6px;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.country-select a i,
.currency-select a i {
  float: right;
  padding: 4px 0;
}
.country-select a span,
.currency-select a span {
  vertical-align: top;
  display: inline-block;
  overflow: hidden;
  max-width: calc(100% - 14px);
  text-overflow: ellipsis;
  float: left;
}
.country-select ul,
.currency-select ul {
  position: absolute;
  display: none;
  left: 0;
  right: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  background: white;
  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.26);
}
.country-select ul li,
.currency-select ul li {
  display: block;
  padding: 2px 6px;
  cursor: pointer;
  white-space: nowrap;
}
.country-select ul li span,
.currency-select ul li span {
  display: inline-block;
  width: calc(100% - 8px);
  overflow: hidden;
  text-overflow: ellipsis;
}
.country-select ul li:hover,
.currency-select ul li:hover {
  color: #479fcc;
}
.country-select ul li.active,
.currency-select ul li.active {
  border-left: 3px solid #479fcc;
  color: #479fcc;
}
.country-select ul .scroll,
.currency-select ul .scroll {
  max-height: 250px;
  height: 250px;
  overflow-y: scroll;
  overflow-x: hidden;
}
.country-select ul.open,
.currency-select ul.open {
  display: block;
}
.country-select {
  width: calc(70% - 6px);
  padding-right: 6px;
}
.country-select ul {
  right: 6px;
}
.currency-select {
  width: calc(30% - 6px);
  padding-left: 6px;
}
.currency-select ul {
  left: 6px;
}
.currency-select ul .scroll {
  height: auto;
}
@media only screen and (min-width: 400px) {
  .element-box-dialfire h2 {
    font-size: 36px;
  }
  .element-box-dialfire h2.lang_es {
    font-size: 32px;
  }
  .element-box-dialfire h3 {
    font-size: 22px;
  }
}
@media only screen and (min-width: 480px) {
  .element-box-dialfire h2 {
    margin: 24px 0 0;
    font-size: 39px;
  }
  .element-box-dialfire h2.lang_es {
    font-size: 36px;
  }
  .element-box-dialfire h3 {
    font-size: 24px;
  }
}
@media only screen and (min-width: 600px) {
  .element-box-dialfire .element-item-dialfire {
    max-width: 586px;
    margin: auto;
  }
  .element-box-dialfire h2 {
    margin: 34px 0 0;
    font-size: 48px;
  }
  .element-box-dialfire h2.lang_es {
    font-size: 40px;
  }
  .whitelabel .element-box-dialfire h2 {
    font-size: 35px;
  }
  .whitelabel .element-box-dialfire h2.lang_es {
    font-size: 28px;
  }
  .whitelabel .element-box-dialfire h2.lang_fr {
    font-size: 29px;
  }
  .capterra .element-box-dialfire h2 {
    font-size: 32px;
  }
  .element-box-dialfire h3 {
    font-size: 25px;
  }
}
@media only screen and (min-width: 768px) {
  .element-box-dialfire {
    background: transparent;
    text-align: left;
  }
  .element-box-dialfire .element-item-dialfire {
    max-width: 500px;
    margin: 0;
  }
  .element-box-dialfire h2 {
    line-height: inherit;
    font-weight: 400;
  }
  .element-box-dialfire h2.lang_pt {
    font-size: 44px;
  }
  .element-box-dialfire h3 {
    font-size: 22px;
    font-weight: 400;
  }
  .element-box-dialfire h3.lang_de,
  .element-box-dialfire h3.lang_fr {
    font-size: 20px;
  }
  .element-box-dialfire h3.lang_pt {
    font-size: 18px;
  }
  .pricing-box {
    display: block;
    position: absolute;
    right: 12px;
    top: -12px;
    max-width: 320px;
    min-width: 270px;
  }
}
@media only screen and (min-width: 1024px) {
  .element-box-dialfire {
    padding: 180px 16px 16px;
  }
  .whitelabel .element-box-dialfire {
    padding: 142px 16px 16px;
  }
  .element-box-dialfire .element-item-dialfire {
    max-width: 565px;
  }
  .element-box-dialfire h2.lang_pt {
    font-size: 50px;
  }
  .element-box-dialfire p {
    font-size: 18px;
  }
  .pricing-box {
    top: 56px;
  }
}
@media only screen and (min-width: 1200px) {
  .element-box-dialfire {
    width: 1170px;
    margin: 0 auto;
  }
  .element-box-dialfire h2 {
    margin: 34px 0 0;
    font-size: 52px;
  }
  .element-box-dialfire h2.lang_es {
    font-size: 44px;
  }
  .element-box-dialfire h2.lang_pt {
    font-size: 52px;
  }
  .whitelabel .element-box-dialfire h2 {
    font-size: 40px;
  }
  .whitelabel .element-box-dialfire h2.lang_es {
    font-size: 32px;
  }
  .whitelabel .element-box-dialfire h2.lang_fr {
    font-size: 33px;
  }
  .capterra .element-box-dialfire h2 {
    font-size: 36px;
  }
  .element-box-dialfire h3 {
    font-size: 24px;
  }
  .element-box-dialfire h3.lang_de {
    font-size: 24px;
  }
  .element-box-dialfire h3.lang_fr {
    font-size: 22px;
  }
  .element-box-dialfire h3.lang_pt {
    font-size: 20px;
  }
}
/*******************************************************************************
    Frontpage
        What
*******************************************************************************/
.element-box {
  display: block;
  width: 100%;
}
.element-box.second {
  margin: 48px 0 0;
  text-align: center;
  position: relative;
  padding-top: 56.25%;
}
.testimonial-login .element-box.second {
  padding: 0 1.5em;
}
.testimonial-login .element-box.second p:first-child {
  position: relative;
  color: ;
  font-size: 20pt;
  font-style: italic;
}
.testimonial-login .element-box.second p:first-child:before,
.testimonial-login .element-box.second p:first-child:after {
  position: absolute;
  color: #99cd47;
  font-size: 124px;
  line-height: 0;
}
.testimonial-login .element-box.second p:first-child:before {
  content: "”";
  left: -48px;
  top: 32px;
}
.testimonial-login .element-box.second p:first-child:after {
  content: "“";
  right: 16px;
  bottom: -32px;
}
.testimonial-login .element-box.second p:nth-child(2) {
  color: #99cd47;
  text-align: right;
}
.testimonial-login .element-box.second p:nth-child(2):before,
.testimonial-login .element-box.second p:nth-child(2):after {
  content: "‒";
  padding: 0 4px;
}
.whitelabel .element-box.second {
  padding: 0 2.75em 0;
}
.element-box h6 {
  margin: 0;
  padding-left: 12px;
}
.element-box iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
@media only screen and (min-width: 768px) {
  .element-box {
    width: 63%;
  }
  .element-box h3 {
    margin-top: 0;
  }
  .element-box.second {
    width: 80%;
    margin: 48px auto 0;
    padding-top: 45%;
  }
  .whitelabel .element-box.second {
    width: 63%;
    margin: 4em 0 0;
    text-align: left;
  }
}
@media only screen and (min-width: 1024px) {
  .element-box {
    display: table-cell;
    width: 50%;
    vertical-align: top;
  }
  .testimonial-login .element-box {
    width: 35%;
  }
  .whitelabel .element-box {
    width: 44%;
  }
  .element-box h3 {
    margin-top: 30px;
  }
  .element-box.second {
    position: relative;
    display: table-cell;
    margin: 0;
    padding-right: 0;
    padding-top: 0;
    text-align: right;
  }
  .testimonial-login .element-box.second {
    width: 65%;
    padding-left: 10%;
    vertical-align: middle;
    text-align: left;
  }
  .whitelabel .element-box.second {
    width: 56%;
    padding: 2em 0 2em 2em;
  }
  .element-box h6 {
    padding-left: 18px;
  }
  .element-box iframe {
    position: relative;
    width: 100%;
    height: 346px;
    padding-top: 30px;
  }
}
/*******************************************************************************
    Frontpage
        Simplicity
*******************************************************************************/
.card.simplify {
  display: block;
  overflow: hidden;
  width: 100%;
  margin: 0;
  padding: 0 16px 8px;
  text-align: left;
  background: #ffffff;
  box-shadow: 0 2px 6px -2px #8a8a8a;
  transition: margin .25s ease;
  -webkit-transition: margin .25s ease;
}
.card.simplify.cash {
  background: #529bad;
  box-shadow: 0 2px 6px -2px #8a8a8a;
  color: #ffffff;
}
.card.simplify.cash h3 {
  color: #ffffff;
}
.card.simplify .note {
  display: none;
  width: 140px;
  height: 140px;
  margin: 12px auto;
  font-size: 90px;
  line-height: 140px;
}
@media only screen and (min-width: 480px) {
  .card.simplify {
    margin: 12px 0;
  }
}
@media only screen and (min-width: 768px) {
  .card.simplify {
    text-align: center;
  }
  .card.simplify .note {
    display: block;
  }
  .card.simplify ul {
    list-style: none;
    padding: 0 0 16px;
  }
}
@media only screen and (min-width: 1024px) {
  .card.simplify {
    display: table-cell;
    width: 50%;
  }
  .whitelabel .card.simplify {
    display: block;
    width: 60%;
    margin: 1em auto;
    text-align: left;
  }
}
/*******************************************************************************
    Frontpage
        Sophistication
*******************************************************************************/
.element-box-powerful {
  position: relative;
  width: 100%;
  margin: 32px 0;
}
.element-box-powerful p {
  padding: 15px 12px 0 20px;
}
.element-picture-box {
  position: realtive;
  width: 100%;
}
@media only screen and (min-width: 1024px) {
  .element-box-powerful {
    width: 80%;
    margin: 25px auto 0 auto;
    padding: 0 8px;
  }
  .element-box-powerful p {
    padding: 15px 8px 0 24px;
  }
  .element-picture-box {
    position: realtive;
    width: 80%;
    margin: 0 auto;
  }
}
@media only screen and (min-width: 1200px) {
  .element-box-powerful {
    float: right;
    width: 47%;
    margin: 0;
    padding: 0 8px;
  }
  .element-box-powerful p {
    padding: 15px 8px 0 24px;
  }
  .element-picture-box {
    width: 53%;
    float: left;
    padding-top: 40px;
  }
}
/*******************************************************************************
    Frontpage
        Integrations
*******************************************************************************/
.card.integration {
  display: block;
  flex: 0 0 calc(10% - 16px);
  margin: 8px;
  padding: 8px;
  text-align: center;
}
.singlepage .card.integration {
  flex: 1 0 calc(25% - 16px);
  background: white;
  box-shadow: 0 2px 6px -2px #8a8a8a;
}
.singlepage .card.integration p {
  margin-top: 0;
}
.card.integration .responsiveImage {
  width: 100%;
  min-width: 100px;
}
/*******************************************************************************
    Frontpage
        Features
*******************************************************************************/
.tabled-row {
  display: block;
}
.card.feature {
  display: block;
  width: 100%;
  margin: 4px 0;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 2px 6px -2px #8a8a8a;
  cursor: pointer;
  transition: margin .25s ease, background .25s ease;
  -webkit-transition: margin .25s ease, background .25s ease;
}
.card.feature:hover {
  background: #ffffff;
}
.card.feature .card-inner {
  display: table;
  border-collapse: separate;
  border-spacing: 0;
}
.card.feature .header,
.card.feature .content {
  display: table-cell;
}
.card.feature .header {
  padding: 16px 0 0;
}
.card.feature .content {
  text-align: left;
  padding: 8px;
  border-bottom: none;
}
.card.feature .content h4 {
  margin: 0;
}
.card.feature .content p {
  margin: 12px 0;
  padding: 0;
  font-size: 16px;
}
.card.feature .note {
  width: 60px;
  margin: 0 auto;
  text-align: center;
  font-size: 24px;
  color: #479fcc;
}
@media only screen and (min-width: 768px) {
  .tabled-row {
    display: table-row;
  }
  .card.feature {
    display: table-cell;
    width: 33%;
  }
  .card.feature .card-inner {
    display: block;
  }
  .card.feature .header,
  .card.feature .content {
    display: block;
  }
  .card.feature .content {
    text-align: center;
  }
}
/*******************************************************************************
    SINGLEPAGES
--------------------------------------------------------------------------------
        Features
*******************************************************************************/
.feature-nav {
  display: none;
}
@media only screen and (min-width: 790px) {
  .feature-nav {
    display: block;
    position: absolute;
    top: 350px;
    left: 730px;
    z-index: 9;
  }
  .feature-nav .nav-affix {
    position: absolute;
    width: 400px;
    z-index: 9;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -o-transform: translateZ(0);
    -ms-transform: translateZ(0);
  }
  .feature-nav .nav-affix.affix {
    position: fixed;
    top: 85px;
  }
  .affix-nav {
    padding: 0;
    margin: 50px 0 0;
    list-style: none;
    text-align: left;
    font-size: 16px;
    font-weight: 400;
  }
  .affix-nav li {
    padding: 10px 16px 10px 0;
  }
  .affix-nav li a {
    color: #545454;
  }
  .affix-nav li a:hover,
  .affix-nav li a.active {
    color: #479fcc;
  }
  .affix-nav li a span {
    display: none;
  }
}
@media only screen and (min-height: 768px) {
  .feature-nav {
    top: 450px;
  }
}
@media only screen and (min-width: 950px) {
  .feature-nav {
    left: 730px;
  }
  .affix-nav {
    text-align: left;
  }
  .affix-nav li a span {
    display: inline;
    padding-left: 12px;
  }
}
@media only screen and (min-width: 1024px) {
  .feature-nav {
    left: 780px;
  }
}
@media only screen and (min-width: 1200px) {
  .feature-nav {
    left: 74%;
  }
}
/*******************************************************************************
        Pricing
*******************************************************************************/
.pricing-connection {
  overflow: hidden;
}
.pricing-connection .connection-question {
  float: left;
  width: 100%;
  padding: 8px 0;
  margin: 0 8px 0 0;
}
.pricing-connection .connection-select {
  float: right;
  width: 100%;
}
@media only screen and (min-width: 660px) {
  .pricing-connection .connection-question {
    width: 210px;
  }
  .pricing-connection .connection-select {
    width: 60%;
  }
}
.pricing-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.pricing-table .pricing-head td {
  width: 33%;
}
.pricing-table td:nth-child(1) {
  text-align: left;
}
.pricing-table td:nth-child(2) {
  text-align: center;
}
.pricing-table td:nth-child(3) {
  text-align: right;
}
.pricing-table .pricing-content td {
  padding: 8px;
  border-bottom: 1px solid #d6d6d6;
}
/*******************************************************************************
        Documentation
*******************************************************************************/
#documentation h1,
#documentation h2,
#documentation h3 {
  margin-top: 30px;
  margin-bottom: 18px;
}
#documentation h1 {
  font-size: 36px;
}
#documentation h2 {
  font-size: 30px;
}
#documentation h3 {
  font-size: 26px;
}
#documentation h4 {
  font-size: 22px;
}
#documentation h5 {
  font-size: 18px;
}
#documentation h6 {
  font-size: 16px;
}
#documentation img {
  width: 100%;
}
#documentation .fa {
  letter-spacing: 0;
}
#documentation span {
  font-style: normal;
  /*&.tab {
	    padding: 2px 6px 2px 6px;
        border-left: 4px solid hsl(0, 69%, 67%);
        background: hsl(0, 0%, 32%);
        color: hsl(0, 69%, 67%);
        white-space: nowrap;
	}*/

}
#documentation span.button {
  padding: 0 5px;
  border-radius: 4px;
  border: 1px solid #cccccc;
  white-space: nowrap;
}
#documentation span.tab {
  padding: 2px 4px 2px 3px;
  border-left: 3px solid #e57373;
  background: #f7f7f7;
  white-space: nowrap;
}
#documentation span.literal {
  padding: 2px 4px;
  background: #f0f0f0;
  white-space: nowrap;
  border-radius: 4px;
}
#documentation span.note {
  color: #9aa3a7;
}
#documentation div.note {
  color: #9aa3a7;
}
#documentation div.info {
  border-radius: 5px;
  padding: 12px 16px;
  background: #f0f0f0;
}
#documentation em {
  font-style: normal;
  padding: 0px 4px 0 4px;
  background: #f0f0f0;
  border-radius: 4px;
  white-space: nowrap;
}
#documentation strong em {
  font-style: italic;
  padding: 0;
  background: transparent;
}
#documentation code {
  font-family: 'Roboto Mono', "Courier New", Courier, monospace;
  padding: 2px 4px;
  font-size: 90%;
  background-color: #f0f0f0;
  border-radius: 4px;
  white-space: nowrap;
}
.docu-container {
  position: absolute;
  top: 0px;
  bottom: 0;
  width: 100%;
}
.docu-nav {
  position: fixed;
  top: 71px;
  right: 2.5%;
  left: 2.5%;
  bottom: 8px;
  max-height: 0;
  box-shadow: 1px 5px 9px -3px rgba(0, 0, 0, 0.4);
  opacity: .2;
  overflow: hidden;
  transform: translate(0, 20px);
  -webkit-transform: translate(0, 20px);
  transition: transform 0.2s 0.2s ease-in-out, max-height 0.3s ease-in-out, opacity 0.25s 0.2s ease-in-out;
  -webkit-transition: -webkit-transform 0.2s 0.2s ease-in-out, max-height 0.3s ease-in-out, opacity 0.25s 0.2s ease-in-out;
  background: white;
  z-index: 17;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -o-transform: translateZ(0);
  -ms-transform: translateZ(0);
}
.docu-nav .scroll-wrapper > .scroll-content {
  overflow-x: hidden !important;
}
.docu-nav.nav-open {
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
  opacity: 1;
  max-height: 99%;
  transition: transform 0.25s ease-in-out, max-height 0.35s ease-in-out, opacity 0.15s ease-in-out;
  -webkit-transition: -webkit-transform 0.25s ease-in-out, max-height 0.35s ease-in-out, opacity 0.15s ease-in-out;
}
.docu-nav .affix-rel {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  overflow: hidden;
  height: calc(100vh - 71px);
  height: -moz-calc(100vh - 71px);
  height: -webkit-calc(100vh - 71px);
  height: -o-calc(100vh - 71px);
}
.docu-nav .affix-rel .scroll {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
}
.docu-nav ul {
  list-style: none;
}
.docu-nav .affix-nav {
  margin: 12px 0;
  padding: 0 12px;
  list-style: none;
  text-align: left;
  font-size: 16px;
  font-weight: 400;
  overflow: hidden;
}
.docu-nav .affix-nav li {
  padding: 4px 0;
}
.docu-nav .affix-nav li a {
  color: #545454;
}
.docu-nav .affix-nav li a:hover,
.docu-nav .affix-nav li a.active {
  color: #479fcc;
}
.docu-nav .affix-nav li a span {
  display: none;
}
.docu-nav .affix-nav li {
  font-weight: 500;
}
.docu-nav .affix-nav ul li {
  font-weight: 400;
}
.docu-nav .affix-nav ul ul li {
  font-weight: 300;
}
.docu-nav .affix-nav ul ul li,
.docu-nav .affix-nav ul li {
  padding: 8px 0;
}
.docu-nav .affix-nav ul ul ul li {
  padding: 4px 0;
}
.docu-nav .affix-nav ul {
  padding-left: 24px;
}
.docu-nav .affix-nav ul ul {
  font-size: 14px;
}
.docu-nav .affix-nav ul ul ul {
  font-style: italic;
  font-size: 12px;
}
@media only screen and (min-width: 480px) {
  .docu-nav {
    right: 16px;
    left: auto;
    width: 320px;
  }
}
@media only screen and (min-width: 768px) {
  .docu-nav {
    top: 78px;
  }
  .docu-nav .affix-rel {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: calc(100vh - 78px);
    height: -moz-calc(100vh - 78px);
    height: -webkit-calc(100vh - 78px);
    height: -o-calc(100vh - 78px);
  }
}
@media only screen and (min-width: 1024px) {
  .docu-nav {
    display: block;
    position: absolute;
    top: 426px;
    bottom: 32px;
    left: 760px;
    opacity: 1;
    max-height: none;
    height: auto;
    width: 24%;
    z-index: 5;
    background: transparent;
    box-shadow: none;
    transform: none;
    -webkit-transform: none;
    -moz-transform: none;
    -o-transform: none;
    -ms-transform: none;
    transition: all 0s ease 0s;
    -webkit-transition: all 0s ease 0s;
  }
  .docu-nav.nav-open {
    transform: none;
    -webkit-transform: none;
    opacity: 1;
    max-height: none;
    transition: all 0s ease 0s;
    -webkit-transition: all 0s ease 0s;
  }
  .docu-nav .affix-rel {
    position: absolute;
    top: 0;
    width: 100%;
    height: auto;
    margin-bottom: -24px;
    max-height: calc(100vh - 71px);
    max-height: -webkit-calc(100vh - 71px);
    max-height: -moz-calc(100vh - 71px);
    max-height: -o-calc(100vh - 71px);
    max-height: -ms-calc(100vh - 71px);
    transition: all 0s ease 0s;
    -webkit-transition: all 0s ease 0s;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -o-transform: translateZ(0);
    -ms-transform: translateZ(0);
  }
  .docu-nav .affix-rel.affix {
    position: fixed;
    top: 83px;
    width: 24%;
    margin-bottom: -24px;
  }
  .docu-nav .affix-nav {
    margin: 0;
    padding: 16px 8px;
  }
  .mobile-nav-bars {
    display: none;
  }
}
@media only screen and (min-width: 1050px) {
  .docu-nav {
    width: 26.5%;
  }
  .docu-nav .affix-rel.affix {
    width: 26.5%;
  }
}
@media only screen and (min-width: 1100px) {
  .docu-nav {
    width: 28.5%;
  }
  .docu-nav .affix-rel.affix {
    width: 28.5%;
  }
}
@media only screen and (min-width: 1150px) {
  .docu-nav {
    width: 348px;
  }
  .docu-nav .affix-rel.affix {
    width: 348px;
  }
}
@media only screen and (min-width: 1178px) {
  .docu-container {
    position: absolute;
    width: 1160px;
    left: 50%;
    top: 0px;
    bottom: 0;
    margin-left: -580px;
  }
  .docu-nav .affix-rel {
    max-height: calc(100vh - 71px);
    max-height: -webkit-calc(100vh - 71px);
    max-height: -moz-calc(100vh - 71px);
    max-height: -o-calc(100vh - 71px);
    max-height: -ms-calc(100vh - 71px);
  }
}
@media only screen and (min-width: 1200px) {
  .docu-nav {
    left: 820px;
    width: 348px;
  }
  .docu-nav .affix-rel {
    margin-bottom: 0;
  }
  .docu-nav .affix-rel.affix {
    width: 348px;
    margin-bottom: 0;
  }
  .docu-nav .affix-nav {
    padding: 16px;
  }
}
@media only screen and (min-width: 1024px) and (min-height: 768px) {
  .docu-nav {
    top: 526px;
  }
}
/*******************************************************************************
        Sign Up
*******************************************************************************/
#sign-up.article {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  overflow-y: auto;
  background-image: url('/web/images/in-the-sky-join.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
.sign-up .loading {
  position: absolute;
  right: -5px;
  top: 12px;
}
.sign-up .check {
  position: absolute;
  right: -4px;
  top: 15px;
  display: inline-block;
  color: #98cc47;
}
.sign-up.card {
  position: relative;
  width: 95%;
  margin: 78px auto 12px;
  background: #ffffff;
  box-shadow: 0 2px 6px -2px #707070;
  z-index: 9;
}
.sign-up.promo-banner {
  position: absolute;
  top: -5px;
  right: -10px;
  width: 100px;
  height: 100px;
  background: url('/web/images/promo-offer.png');
  background-repeat: no-repeat;
  background-size: cover;
  pointer-events: none;
}
.sign-up.sign-up-header,
.check-mail.check-mail-header {
  overflow: hidden;
  padding: 0 12px;
  text-align: center;
  border-bottom: 1px solid #1f687a;
  background: #24758a;
}
.sign-up.sign-up-header h4,
.check-mail.check-mail-header h4 {
  margin: 32px 0 24px;
  color: white;
  font-family: 'Roboto Slab', serif;
  font-weight: 700;
  font-size: 28px;
  line-height: 1.1;
}
.sign-up.sign-up-header h4 span,
.check-mail.check-mail-header h4 span {
  font-weight: 400;
  font-size: 70%;
}
.sign-up.sign-up-header.lang_fr h4 span,
.check-mail.check-mail-header.lang_fr h4 span {
  font-size: 62%;
}
.sign-up.sign-up-header h5,
.check-mail.check-mail-header h5 {
  margin: 0 0 16px;
  color: white;
  font-family: 'Roboto Slab', serif;
  font-size: 16px;
}
.sign-up.sign-up-header.ccw {
  background: transparent;
  padding-top: 100px;
  border-top: 8px solid #545454;
  border-bottom: 0 none;
}
.sign-up.sign-up-header.ccw h4 {
  margin-bottom: 8px;
}
.sign-up.sign-up-header.ccw h4,
.sign-up.sign-up-header.ccw h5 {
  color: #545454;
}
.wm2018 .sign-up.card {
  display: flex;
  flex-flow: row wrap;
}
.wm2018 .sign-up.sign-up-header {
  flex: 1 0 100%;
}
.wm2018 .sign-up.sidebar {
  background-image: url(/web/images/wm-special.png);
  background-size: cover;
  background-position: center center;
  flex: 1 0 100%;
  padding-top: 91%;
}
.wm2018 .sign-up.formular {
  flex: 1 0 100%;
}
@-webkit-keyframes ballon {
  0% {
    -webkit-transform: translate(0vw, 0);
  }
  10% {
    -webkit-transform: translate(4vw, 40px);
  }
  20% {
    -webkit-transform: translate(8.5vw, -30px);
  }
  30% {
    -webkit-transform: translate(13.5vw, 20px);
  }
  40% {
    -webkit-transform: translate(18vw, 40px);
  }
  50% {
    -webkit-transform: translate(23vw, -30px);
  }
  60% {
    -webkit-transform: translate(29vw, 20px);
  }
  70% {
    -webkit-transform: translate(34vw, 40px);
  }
  80% {
    -webkit-transform: translate(39vw, -30px);
  }
  90% {
    -webkit-transform: translate(44vw, 20px);
  }
  100% {
    -webkit-transform: translate(45vw, 0);
  }
}
@keyframes ballon {
  0% {
    transform: translate(0vw, 0);
  }
  10% {
    transform: translate(4vw, 40px);
  }
  20% {
    transform: translate(8.5vw, -30px);
  }
  30% {
    transform: translate(13.5vw, 20px);
  }
  40% {
    transform: translate(18vw, 40px);
  }
  50% {
    transform: translate(23vw, -30px);
  }
  60% {
    transform: translate(29vw, 20px);
  }
  70% {
    transform: translate(34vw, 40px);
  }
  80% {
    transform: translate(39vw, -30px);
  }
  90% {
    transform: translate(44vw, 20px);
  }
  100% {
    transform: translate(48vw, 0);
  }
}
@-webkit-keyframes ballon-reverse {
  0% {
    -webkit-transform: translate(52vw, 0);
  }
  10% {
    -webkit-transform: translate(55vw, 40px);
  }
  20% {
    -webkit-transform: translate(60vw, -30px);
  }
  30% {
    -webkit-transform: translate(65vw, 20px);
  }
  40% {
    -webkit-transform: translate(70vw, 40px);
  }
  50% {
    -webkit-transform: translate(75vw, -30px);
  }
  60% {
    -webkit-transform: translate(80vw, 20px);
  }
  70% {
    -webkit-transform: translate(85vw, 40px);
  }
  80% {
    -webkit-transform: translate(90vw, -30px);
  }
  90% {
    -webkit-transform: translate(95vw, 20px);
  }
  100% {
    -webkit-transform: translate(100vw, 0);
  }
}
@keyframes ballon-reverse {
  0% {
    transform: translate(52vw, 0);
  }
  10% {
    transform: translate(55vw, 40px);
  }
  20% {
    transform: translate(60vw, -30px);
  }
  30% {
    transform: translate(65vw, 20px);
  }
  40% {
    transform: translate(70vw, 40px);
  }
  50% {
    transform: translate(75vw, -30px);
  }
  60% {
    transform: translate(80vw, 20px);
  }
  70% {
    transform: translate(85vw, 40px);
  }
  80% {
    transform: translate(90vw, -30px);
  }
  90% {
    transform: translate(95vw, 20px);
  }
  100% {
    transform: translate(100vw, 0);
  }
}
@-webkit-keyframes wolken {
  0% {
    -webkit-transform: translate(0vw, 0);
  }
  100% {
    -webkit-transform: translate(100vw, 0);
  }
}
@keyframes wolken {
  0% {
    transform: translate(0vw, 0);
  }
  100% {
    transform: translate(100vw, 0);
  }
}
.ballon-anim,
.ballon-anim-reverse,
.wolken-anim,
.wolken-anim-reverse {
  display: none;
}
@media only screen and (min-width: 768px) {
  .ballon-anim {
    display: block;
    -webkit-animation: ballon 119s linear alternate infinite;
    animation: ballon 119s linear alternate infinite;
  }
  .ballon-anim.second {
    -webkit-animation: ballon 73s linear alternate-reverse infinite;
    animation: ballon 73s linear alternate-reverse infinite;
  }
  .ballon-anim-reverse {
    display: block;
    -webkit-animation: ballon-reverse 156s linear alternate infinite;
    animation: ballon-reverse 156s linear alternate infinite;
  }
  .ballon-anim-reverse.second {
    -webkit-animation: ballon-reverse 98s linear alternate-reverse infinite;
    animation: ballon-reverse 98s linear alternate-reverse infinite;
  }
  .wolken-anim {
    display: block;
    -webkit-animation: wolken 221s linear alternate infinite;
    animation: wolken 221s linear alternate infinite;
  }
  .wolken-anim-reverse {
    display: block;
    -webkit-animation: wolken 221s linear alternate-reverse infinite;
    animation: wolken 221s linear alternate-reverse infinite;
  }
}
#sign-up {
  overflow: hidden;
}
.sign-up.sign-up-header.sommerspecial {
  position: relative;
  background: #f7e873;
  color: #545454;
  border-top: 8px solid #ffc107;
  border-bottom: 1px solid #f5e35b;
  overflow: visible;
}
.sign-up.sign-up-header.sommerspecial h4 {
  margin-bottom: 8px;
  font-size: 30px;
  font-weight: 400;
}
.sign-up.sign-up-header.sommerspecial h4:first-child {
  font-family: 'Amatic SC', cursive;
  font-weight: 700;
  font-size: 42px;
}
.sign-up.sign-up-header.sommerspecial h4 strong {
  font-weight: 700;
}
.sign-up.sign-up-header.sommerspecial h5 {
  font-size: 16px;
  font-family: 'Roboto', sans-serif;
}
.sign-up.sign-up-header.sommerspecial h5 strong {
  font-weight: 700;
  text-decoration: underline;
}
.sign-up.sign-up-header.sommerspecial h4,
.sign-up.sign-up-header.sommerspecial h5 {
  color: #545454;
}
.sign-up.sign-up-header.sommerspecial .price-item-fn,
.sign-up.sign-up-header.sommerspecial .price-item-m {
  margin: 8px auto 0;
}
.check-mail.check-mail-header {
  border-bottom: 1px solid #7ebe19;
  background: #8ad01b;
}
.check-mail.check-mail-header h4 {
  font-size: 36px;
}
.check-mail.check-mail-header h5 {
  font-size: 18px;
}
.sign-up.formular .formular-box {
  width: 90%;
  margin: 12px auto 0;
}
.sign-up.formular .iptgroup {
  position: relative;
  margin: 8px 2px;
}
.sign-up.formular .iptgroup.iptgroup-subdomain {
  margin: 14px 2px 8px 0;
}
.sign-up.formular .iptgroup.iptgroup-divider {
  margin-bottom: 24px;
}
.sign-up.formular .iptgroup .iptgroup-item {
  overflow: hidden;
  padding: 2px 0 0 2px;
}
.sign-up.formular .iptgroup .item-ipt-subdomain {
  float: left;
  width: 140px;
}
.sign-up.formular .iptgroup .item-subdomain {
  position: relative;
  float: left;
  width: 100px;
  padding: 10px 4px 6px;
  color: #545454;
  font-size: 14px;
  font-weight: 400;
}
.sign-up.formular .ghost-group {
  text-align: center;
  padding: 0 5px;
}
.sign-up.formular .ghost-group .btn-ghost {
  width: 100%;
  margin-top: 8px;
}
.sign-up .send-loading {
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.65);
}
.check-mail.card {
  width: 95%;
  margin: 78px auto 12px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 2px 6px -2px #707070;
  z-index: 9;
}
.check-mail.card .text-box {
  overflow: hidden;
  margin: 32px 0;
  padding: 16px 32px;
  text-align: center;
}
.check-mail.card .mail-box {
  position: relative;
  width: 80px;
  height: 50px;
  line-height: 50px;
  margin: 0 auto;
}
.check-mail.card .mail-box .mail-check {
  background: #ffffff;
  border-radius: 50%;
  width: 27px;
  position: absolute;
  bottom: -7px;
  right: 0px;
  line-height: 35px;
  height: 27px;
  text-align: center;
}
.check-mail.card .mail-box .mail-check i {
  font-size: 24px;
  color: #98cc47;
}
.check-mail.card .content-box {
  font-size: 16px;
  margin-top: 32px;
}
.check-mail.card .content-box strong {
  font-family: 'Roboto Slab', serif;
  font-weight: 700;
  font-size: 22px;
}
.whitelabel .check-mail.card {
  margin: 16px auto;
}
@media only screen and (min-width: 360px) {
  .sign-up.formular .iptgroup {
    margin: 8px 2px 8px 2px;
  }
  .sign-up.formular .iptgroup .item-ipt-subdomain {
    width: 165px;
  }
  .sign-up .loading {
    right: 9px;
    top: 12px;
  }
  .sign-up .check {
    right: 10px;
    top: 15px;
  }
}
@media only screen and (min-width: 400px) {
  .sign-up.promo-banner {
    width: 111px;
    height: 111px;
  }
  .sign-up.formular .iptgroup .item-ipt-subdomain {
    width: 190px;
  }
}
@media only screen and (min-width: 480px) {
  .sign-up.sign-up-header.sommerspecial h4 {
    font-size: 42px;
  }
  .sign-up.sign-up-header.sommerspecial h4:first-child {
    font-size: 52px;
  }
  .sign-up.sign-up-header.sommerspecial h5 {
    font-size: 21px;
  }
  .sign-up.sign-up-header.sommerspecial .price-item-fn {
    float: left;
    text-align: right;
    width: 50%;
    margin: 0;
  }
  .sign-up.sign-up-header.sommerspecial .price-item-m {
    float: right;
    text-align: left;
    width: 50%;
    margin: 0;
  }
  .summerspecial .sign-up.formular .formular-box {
    width: 360px;
  }
  .sign-up.card,
  .check-mail.card {
    width: 450px;
    margin: 78px auto 12px;
  }
  .sign-up .loading {
    right: 8px;
    top: 19px;
  }
  .sign-up .check {
    right: 9px;
    top: 21.5px;
  }
  .sign-up.sign-up-header {
    padding: 0 24px;
  }
  .sign-up.sign-up-header.lang_pt h4 {
    font-size: 28px;
  }
  .sign-up.sign-up-header h4 {
    margin: 32px 0 24px;
    font-size: 36px;
  }
  .sign-up.sign-up-header h5 {
    margin: 0 0 16px;
    font-size: 18px;
  }
  .sign-up.formular .formular-box {
    width: 330px;
    margin: 24px auto 0;
  }
  .sign-up.formular .iptgroup {
    margin: 8px 4px;
    padding: 5px;
  }
  .sign-up.formular .iptgroup.iptgroup-subdomain {
    margin: 5px 4px 5px 0;
  }
  .sign-up.formular .iptgroup.iptgroup-divider {
    margin-bottom: 36px;
  }
  .sign-up.formular .iptgroup .iptgroup-item {
    padding: 5px;
  }
  .sign-up .send-loading {
    top: -24px;
  }
}
@media only screen and (min-width: 480px) and (min-height: 550px) {
  .check-mail.card {
    position: absolute;
    width: 450px;
    left: 50%;
    top: 50%;
    margin: -169.5px 0 0 -225px;
  }
  .whitelabel .check-mail.card {
    position: relative;
    top: 0;
    left: 0;
    margin: 16px auto;
  }
}
@media only screen and (min-width: 612px) {
  .sign-up.card {
    margin: 85px 12px 12px;
  }
}
@media only screen and (min-width: 768px) {
  .sign-up.whitelabel {
    position: absolute;
    top: 3em;
    right: .5em;
  }
  .whitelabel .check-mail.card {
    width: 330px;
  }
}
@media only screen and (min-width: 768px) and (max-height: 600px) {
  .sign-up.card {
    position: relative;
    margin: 85px auto 12px;
  }
}
@media only screen and (min-width: 768px) and (max-height: 550px) {
  .check-mail.card {
    position: absolute;
    width: 450px;
    left: 50%;
    top: 50%;
    margin: -210.5px 0 0 -225px;
    z-index: 11;
  }
}
@media only screen and (min-width: 768px) and (max-height: 700px) and (min-height: 600px) {
  .summerspecial .sign-up.card {
    margin: -340px 0 0 -225px;
  }
  .summerspecial .sign-up.formular .formular-box {
    width: 360px;
  }
  .sign-up.card {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -288px 0 0 -225px;
    z-index: 11;
  }
  .sign-up .loading {
    right: -5px;
    top: 19px;
  }
  .sign-up .check {
    right: -4px;
    top: 21.5px;
  }
  .sign-up.sign-up-header {
    padding: 0 12px;
  }
  .sign-up.sign-up-header h4 {
    margin: 16px 0 12px;
    font-size: 26px;
  }
  .sign-up.sign-up-header h5 {
    margin: 0 0 16px;
    font-size: 16px;
  }
  .sign-up.sign-up-header.ccw {
    padding-top: 120px;
  }
  .sign-up.promo-banner {
    width: 100px;
    height: 100px;
  }
  .sign-up.formular .formular-box {
    width: 330px;
    margin: 12px auto 0;
  }
  .sign-up.formular .iptgroup {
    margin: 8px 2px;
  }
  .sign-up.formular .iptgroup.iptgroup-subdomain {
    margin: 14px 0 8px 0;
  }
  .sign-up.formular .iptgroup.iptgroup-divider {
    margin-bottom: 24px;
  }
  .sign-up.formular .iptgroup .iptgroup-item {
    padding: 2px 0 2px 2px;
  }
  .sign-up .send-loading {
    top: -12px;
  }
}
@media only screen and (min-width: 768px) and (min-height: 700px) {
  .summerspecial .sign-up.card {
    margin: -354px 0 0 -225px;
  }
  .sign-up.card {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -326px 0 0 -225px;
    z-index: 11;
  }
  .sign-up.promo-banner {
    width: 111px;
    height: 111px;
  }
  .sign-up .loading {
    right: 8px;
    top: 19px;
  }
  .sign-up .check {
    right: 9px;
    top: 21.5px;
  }
}
@media only screen and (min-width: 768px) and (min-height: 800px) {
  .sign-up.card {
    margin: -287px 0 0 -225px;
    background: rgba(255, 255, 255, 0.8);
  }
  .summerspecial .sign-up.card {
    margin: -400px 0 0 -225px;
  }
  .wm2018 .sign-up.card {
    margin: -445px 0 0 -225px;
  }
}
@media only screen and (min-width: 1024px) and (min-height: 700px) {
  .wm2018 .sign-up.card {
    width: 900px;
    margin: -290px 0 16px -510px;
  }
  .wm2018 .sign-up.sidebar {
    flex: 0 1 450px;
    padding-top: 0;
  }
  .wm2018 .sign-up.formular {
    flex: 1 1 auto;
  }
}
.sign-up input:focus ~ .tooltip.default,
.sign-up input.error ~ .tooltip.error,
.sign-up input.error:focus ~ .tooltip.error {
  display: block;
}
.sign-up .label-checkbox.error ~ .tooltip.error {
  display: block;
}
.sign-up input.error:focus ~ .tooltip.default {
  display: none;
}
.sign-up input.error {
  outline: none;
  border: 1px solid #cc4a47 !important;
  box-shadow: 0 0 3px #cc4a47;
}
.sign-up select.error {
  outline: none;
  border: 1px solid #cc4a47 !important;
  box-shadow: 0 0 3px #cc4a47;
}
.sign-up select {
  display: block;
  width: 100%;
  padding: 10px 6px;
  color: #545454;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 14px;
  background: transparent;
  border: 1px solid #d6d6d6;
  border-radius: 3px;
}
.sign-up select:focus,
.sign-up select:active {
  border: 1px solid #479fcc !important;
  box-shadow: 0 0 3px #479fcc;
}
.sign-up .select:after {
  top: 6px;
  right: 6px;
  background: transparent;
  border-radius: 3px;
}
.iptgroup input {
  width: 100%;
  padding: 10px 6px;
  color: #545454;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 14px;
  background: transparent;
  border: 1px solid #d6d6d6;
  border-radius: 3px;
  transition: box-shadow 0.15s ease, border 0.15s ease;
  -webkit-transition: box-shadow 0.15s ease, border 0.15s ease;
}
.iptgroup input:focus {
  outline: none;
  border: 1px solid #479fcc !important;
  box-shadow: 0 0 3px #479fcc;
}
.iptgroup.ipt-promo input {
  background: rgba(152, 204, 71, 0.25);
  border: 1px solid #98cc47;
  color: #425c19;
}
.iptgroup.ipt-promo input:focus {
  outline: none;
  border: 1px solid #7cac2f !important;
  box-shadow: 0 0 3px #98cc47;
}
.tooltip {
  clear: both;
  display: none;
  position: relative;
  padding: 4px 6px 0;
  font-size: 12px;
  line-height: 1.3;
}
.tooltip.error {
  color: #cc4a47;
}
@media only screen and (min-width: 622px) {
  .tooltip {
    display: block;
    position: absolute;
    bottom: 3px;
    right: -216px;
    width: 200px;
    padding: 8px 6px;
    color: #ffffff;
    background: #575757;
    border-radius: 3px;
    visibility: hidden;
    opacity: 0;
    transform: translate(30px, 0px);
    -webkit-transform: translate(30px, 0px);
    z-index: 5;
    transition: transform .25s ease, opacity .3s ease;
    -webkit-transition: transform .25s ease, opacity .3s ease;
  }
  .tooltip:after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -8px;
    left: -16px;
    border: 8px solid transparent;
    border-right-color: #575757;
    z-index: 9;
  }
  .tooltip.error {
    background: #f1c7c6;
  }
  .tooltip.error:after {
    border-right-color: #f1c7c6;
  }
  .sign-up input:focus ~ .tooltip,
  .sign-up input.error ~ .tooltip.error,
  .sign-up input.error:focus ~ .tooltip.error {
    visibility: visible;
    opacity: 1;
    transform: translate(0px, 0px);
  }
  .sign-up input.error:focus ~ .tooltip.default {
    visibility: hidden;
    opacity: 0;
  }
  .sign-up .tooltip.tooltip-subdomain.tts {
    bottom: 16px;
  }
  .sign-up .tooltip.tooltip-subdomain.ttm {
    bottom: 9px;
  }
  .sign-up .tooltip.tooltip-subdomain.ttl {
    bottom: 2px;
  }
  .sign-up .tooltip.tooltip-subdomain.ttxl {
    bottom: -8px;
  }
  .sign-up .tooltip.tts {
    bottom: 10px;
  }
  .sign-up .tooltip.ttm {
    bottom: 3px;
  }
  .sign-up .tooltip.ttl {
    bottom: -6px;
  }
  .sign-up .tooltip.ttxl {
    bottom: -14px;
  }
  .label-checkbox.error ~ .tooltip.error {
    visibility: visible;
    opacity: 1;
    transform: translate(0px, 0px);
  }
}
/*******************************************************************************
    FRONTPAGE STATIC
--------------------------------------------------------------------------------
        Header
*******************************************************************************/
#header {
  position: relative;
  height: auto;
  background-image: url('/web/images/lucie-in-the-sky-3-1024_hellere-Wolken.jpg');
  background-position: left top;
  background-repeat: no-repeat;
  background-size: cover;
  image-rendering: auto;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
@media only screen and (min-width: 768px) {
  #header {
    background-position: 34% center;
  }
}
@media only screen and (min-width: 1024px) {
  #header {
    height: 644px;
    background-image: url('/web/images/lucie-in-the-sky-3_hellere-Wolken.jpg');
    background-position: center center;
  }
}
@media only screen and (min-width: 1920px) {
  #header {
    background-image: url('/web/images/lucie-in-the-sky-3-4k_hellere-Wolken.jpg');
  }
}
/*******************************************************************************
        Footer
*******************************************************************************/
#footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: #ffffff;
  border-top: 1px solid #ededed;
  min-height: 60px;
}
#footer .footer {
  max-width: 1200px;
  margin: 0 auto;
}
#footer .content {
  float: left;
  padding: 8px 16px;
}
#footer .content.mobile-nav-open .footer-navigation {
  transform: translate(24px, -58px);
  -webkit-transform: translate(24px, -58px);
  opacity: 1;
  max-height: 200px;
  transition: transform 0.25s ease-in-out, max-height 0.35s ease-in-out, opacity 0.15s ease-in-out;
  -webkit-transition: -webkit-transform 0.25s ease-in-out, max-height 0.35s ease-in-out, opacity 0.15s ease-in-out;
}
#footer .content .footer-navigation {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: auto;
  height: auto;
  max-height: 0;
  padding: 0 12px;
  background: #ffffff;
  box-shadow: 0px 5px 9px -3px rgba(0, 0, 0, 0.4);
  opacity: .2;
  overflow: hidden;
  z-index: 13;
  transform: translate(24px, -38px);
  -webkit-transform: translate(24px, -38px);
  transition: transform 0.2s 0.2s ease-in-out, max-height 0.3s ease-in-out, opacity 0.25s 0.2s ease-in-out;
  -webkit-transition: -webkit-transform 0.2s 0.2s ease-in-out, max-height 0.3s ease-in-out, opacity 0.25s 0.2s ease-in-out;
}
#footer .content .footer-navigation ul.footer-menu {
  display: block;
  margin: 0;
  padding: 0;
}
#footer .content .footer-navigation ul.footer-menu li {
  position: relative;
  display: block;
  margin: 2px 0;
  list-style: none;
}
#footer .content .footer-navigation ul.footer-menu li a {
  display: block;
  padding: 8px 4px;
  font-size: 14px;
  font-weight: 300;
  color: #545454;
  transition: color .3s ease;
  -webkit-transition: color .3s ease;
}
#footer .content .footer-navigation ul.footer-menu li a:hover,
#footer .content .footer-navigation ul.footer-menu li a.active {
  color: #cc4a47;
}
#footer .content .mobile-nav-bars {
  display: block;
  padding: 16px;
  font-size: 14px;
  color: #545454;
  cursor: pointer;
  line-height: 0;
  float: left;
}
#footer .copyright {
  float: right;
  padding: 20px 16px 14px 0;
  font-size: 14px;
}
@media only screen and (min-width: 480px) {
  #footer {
    min-height: 70px;
  }
  #footer .content {
    float: left;
    padding: 16px 16px;
  }
  #footer .content.mobile-nav-open .footer-navigation {
    max-height: 0;
    background: transparent;
    opacity: 1;
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transition: all 0s ease;
    -webkit-transition: all 0s ease;
  }
  #footer .content .footer-navigation {
    display: block;
    position: relative;
    width: auto;
    height: auto;
    max-height: none;
    padding: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    overflow: visible;
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transition: all 0s ease;
    -webkit-transition: all 0s ease;
  }
  #footer .content .footer-navigation ul.footer-menu {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  #footer .content .footer-navigation ul.footer-menu li {
    display: inline;
    padding: 0 4px;
  }
  #footer .content .footer-navigation ul.footer-menu li a {
    font-size: 14px;
    display: inline-block;
    padding: 8px 4px;
    color: #757575;
    text-decoration: none;
  }
  #footer .content .footer-navigation ul.footer-menu li a:hover,
  #footer .content .footer-navigation ul.footer-menu li a.factive {
    color: #545454;
  }
  #footer .mobile-nav-bars {
    display: none !important;
  }
  #footer .copyright {
    float: right;
    padding: 24px 16px 14px 0;
    font-size: 14px;
  }
}
/*******************************************************************************
        NAVIGATION
--------------------------------------------------------------------------------
            Navigationbar
*******************************************************************************/
#nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  background: #ffffff;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
  transform: translateZ(0);
  transform: -webkit-translateZ(0);
  z-index: 10;
}
.upper-nav {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 12px;
  color: #545454;
  z-index: 17;
}
.hotline {
  display: inline-block;
  padding: 4px 6px;
  font-weight: 700;
  vertical-align: middle;
}
.language-control {
  width: 120px;
  display: inline-block;
  vertical-align: top;
}
.language-control button {
  margin: 0;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.language-control button:focus {
  outline: none;
}
.language-control ul {
  display: none;
  margin: 0;
  padding: 0;
  list-style-type: none;
  background: white;
  box-shadow: 0 4px 3px rgba(0, 0, 0, 0.25);
}
.language-control ul li.active a {
  color: #cc4a47;
  background-color: #ebebeb;
}
.language-control.open ul {
  display: block;
}
.language-control a,
.language-control button {
  display: block;
  font-size: 12px;
  font-weight: 400;
  padding: 4px 6px;
  color: #545454;
}
.language-control a:hover,
.language-control button:hover {
  color: #cc4a47;
}
.language-control a img,
.language-control button img {
  vertical-align: middle;
  margin-right: 6px;
}
.language-control a span,
.language-control button span {
  vertical-align: middle;
}
#navigation {
  margin: auto;
  max-width: 1200px;
  height: 71px;
  overflow: hidden;
}
/*******************************************************************************
        Navigationbar Devices
*******************************************************************************/
@media only screen and (min-width: 768px) {
  .upper-nav {
    right: 12px;
    font-size: 14px;
  }
  #nav {
    box-shadow: none;
  }
  #nav.scroll {
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
  }
  #nav.scroll #navigation-right #navigation-menu ul#menu li.open ul {
    box-shadow: 0px 5px 9px -3px rgba(0, 0, 0, 0.4);
  }
  #navigation {
    height: 78px;
    overflow: visible;
  }
}
@media print {
  #nav {
    position: relative;
  }
}
/*******************************************************************************
        Logo
*******************************************************************************/
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  10% {
    transform: rotate(0deg);
  }
  30% {
    transform: rotate(216deg);
  }
  85% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.dialfire-red {
  fill-rule: evenodd;
}
#Kreis {
  fill-rule: evenodd;
}
#dialfireLogo:hover #Bildmarke_Punkte {
  transform-origin: 119.6px 175px;
  animation: spin 2500ms linear infinite;
}
#navigation-left,
#navigationLogo {
  padding: 0 0 0 8px;
  float: left;
}
#navigation-left h1,
#navigationLogo h1 {
  font-size: 0;
  line-height: 1;
}
#navigation-left a,
#navigationLogo a {
  display: block;
  margin: 20px 0 0;
}
#navigation-left a #dialfireLogo,
#navigationLogo a #dialfireLogo {
  height: 40px;
}
/*******************************************************************************
        Logo Devices
*******************************************************************************/
@media only screen and (min-width: 360px) {
  #navigation-left a,
  #navigationLogo a {
    margin: 10px 0 0;
  }
  #navigation-left a #dialfireLogo,
  #navigationLogo a #dialfireLogo {
    height: 52px;
  }
}
@media only screen and (min-width: 768px) {
  #navigation-left,
  #navigationLogo {
    padding: 0 0 0 24px;
  }
  #navigation-left a #dialfireLogo,
  #navigationLogo a #dialfireLogo {
    height: 56px;
  }
}
@media only screen and (min-width: 1024px) {
  #navigation-left a,
  #navigationLogo a {
    margin: 6px 0 0;
  }
  #navigation-left a #dialfireLogo,
  #navigationLogo a #dialfireLogo {
    height: 66px;
  }
}
/*******************************************************************************
        Off-Canvas
*******************************************************************************/
#navigation-right.mobile-nav-open #navigation-menu {
  transform: translate(-38px, 71px);
  -webkit-transform: translate(-38px, 71px);
  opacity: 1;
  max-height: 400px;
  transition: transform 0.25s ease-in-out, max-height 0.35s ease-in-out, opacity 0.15s ease-in-out;
  -webkit-transition: -webkit-transform 0.25s ease-in-out, max-height 0.35s ease-in-out, opacity 0.15s ease-in-out;
}
#navigation-right.is-docu-nav > #navigation-menu,
#navigation-right.is-docu-nav > .mobile-nav-bars,
#navigation-right.is-docu-nav > #login {
  display: none;
}
/*******************************************************************************
        Off-Canvas Devices
*******************************************************************************/
@media only screen and (max-height: 412px) and (orientation: landscape) {
  #navigation-right.mobile-nav-open #navigation-menu {
    max-height: calc(100vh - 71px);
    overflow-y: scroll;
  }
}
@media only screen and (min-width: 768px) {
  #navigation-right.mobile-nav-open #navigation-menu {
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    opacity: 1;
    max-height: none;
    overflow-y: visible;
    transition: all 0s ease 0s;
    -webkit-transition: all 0s ease 0s;
  }
  #navigation-right.is-docu-nav > #navigation-menu {
    display: block;
  }
  #navigation-right.is-docu-nav > #navigation-menu ul#menu li.subnav {
    display: none;
  }
}
/*******************************************************************************
        Bar
*******************************************************************************/
#navigation-right {
  padding: 0 8px 0 0;
  font-size: 0;
  float: right;
}
#navigation-right #navigation-menu {
  display: block;
  position: fixed;
  top: 0;
  right: 0;
  width: auto;
  height: auto;
  max-height: 0;
  padding: 0 12px;
  background: #ffffff;
  box-shadow: 0px 5px 9px -3px rgba(0, 0, 0, 0.4);
  opacity: .2;
  overflow: hidden;
  transform: translate(-38px, 51px);
  -webkit-transform: translate(-38px, 51px);
  transition: transform 0.2s 0.2s ease-in-out, max-height 0.3s ease-in-out, opacity 0.25s 0.2s ease-in-out;
  -webkit-transition: -webkit-transform 0.2s 0.2s ease-in-out, max-height 0.3s ease-in-out, opacity 0.25s 0.2s ease-in-out;
}
#navigation-right #navigation-menu ul#menu {
  display: block;
  margin: 0;
  padding: 0;
}
#navigation-right #navigation-menu ul#menu li {
  position: relative;
  display: block;
  margin: 8px 0;
  list-style: none;
}
#navigation-right #navigation-menu ul#menu li.subnav {
  border-top: solid 1px #a1a1a1;
}
#navigation-right #navigation-menu ul#menu li a {
  display: block;
  padding: 8px 12px;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #545454;
  transition: color .3s ease;
  -webkit-transition: color .3s ease;
}
#navigation-right #navigation-menu ul#menu li a:hover,
#navigation-right #navigation-menu ul#menu li a.active {
  color: #cc4a47;
}
#navigation-right #navigation-menu ul#menu li .dropdown {
  display: none;
}
#navigation-right #navigation-menu ul#menu li ul {
  position: relative;
  margin: 0;
  padding: 0;
}
#navigation-right #navigation-menu ul#menu li ul li {
  display: block;
}
#navigation-right .mobile-nav-bars,
#navigation-right .mobile-docnav-bars {
  display: block;
  margin: 22px 0 0;
  padding: 12px;
  font-size: 18px;
  color: #545454;
  cursor: pointer;
  float: left;
}
#navigation-right .mobile-docnav-bars {
  display: none;
}
#navigation-right.is-docu-nav > .mobile-docnav-bars {
  display: block;
}
#navigation-right #login {
  position: relative;
  display: block;
  margin: 22px 0 0;
  padding: 0;
  float: left;
  cursor: pointer;
}
#navigation-right #login li {
  display: inline-block;
  list-style: none;
  /*&.login a {
				margin: 8px 0;
				padding: 8px 16px;
				color: white;
				border-radius: 5px;
				background-color: @color-pd-red;
				&:hover, &.active {
					color: white;
					background-color: darken(@color-pd-red, 7%);
				}
			}*/

}
#navigation-right #login li a {
  display: block;
  padding: 12px;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #545454;
  transition: .3s color ease;
  -webkit-transition: .3s color ease;
}
#navigation-right #login li a:hover,
#navigation-right #login li a.active {
  color: #cc4a47;
}
/*******************************************************************************
        Bar Devices 768
*******************************************************************************/
@media only screen and (min-width: 768px) {
  #navigation-right {
    padding: 0 24px 0 0;
  }
  #navigation-right #navigation-menu {
    position: relative;
    height: inherit;
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transition: all 0s ease 0s;
    -webkit-transition: all 0s ease 0s;
    opacity: 1;
    max-height: none;
    box-shadow: none;
    background: transparent;
    overflow-y: visible;
    overflow-x: visible;
    padding: 0;
  }
  #navigation-right #navigation-menu ul#menu {
    display: block;
    margin: 15px 0 0;
    padding: 0;
  }
  #navigation-right #navigation-menu ul#menu li {
    display: inline-block;
    list-style: none;
    margin: 0;
  }
  #navigation-right #navigation-menu ul#menu li.subnav {
    border-top: none;
  }
  #navigation-right #navigation-menu ul#menu li.subnav a:hover {
    color: #545454;
    text-decoration: none;
  }
  #navigation-right #navigation-menu ul#menu li a {
    display: block;
    padding: 16px 12px 16px;
    font-size: 18px;
    color: #545454;
    border-bottom: 3px solid transparent;
    transition: border-color 0.3s ease, color 0.3s ease;
    -webkit-transition: border-color 0.3s ease, color 0.3s ease;
  }
  #navigation-right #navigation-menu ul#menu li a:hover {
    color: #cc4a47;
  }
  #navigation-right #navigation-menu ul#menu li a.active {
    color: #545454;
    border-bottom: 3px solid #cc4a47;
  }
  #navigation-right #navigation-menu ul#menu li a.dropdown {
    cursor: pointer;
  }
  #navigation-right #navigation-menu ul#menu li ul {
    position: absolute;
    top: 100%;
    left: 0;
    max-height: 0;
    padding: 0 12px;
    background: #ffffff;
    box-shadow: none;
    opacity: .2;
    margin: 0;
    overflow: hidden;
    transform: translate(0, -20px);
    -webkit-transform: translate(0, -20px);
    transition: transform 0.2s 0.1s ease-in-out, max-height 0.25s ease-in-out, opacity 0.25s 0.1s ease-in-out, box-shadow 0.2s 0.1s ease;
    -webkit-transition: -webkit-transform 0.2s 0.1s ease-in-out, max-height 0.25s ease-in-out, opacity 0.25s 0.1s ease-in-out, box-shadow 0.2s 0.1s ease;
  }
  #navigation-right #navigation-menu ul#menu li ul li {
    position: relative;
    display: block;
  }
  #navigation-right #navigation-menu ul#menu li ul li a {
    padding: 8px 12px;
    border-bottom: none;
  }
  #navigation-right #navigation-menu ul#menu li ul li a.active {
    border-bottom: none;
  }
  #navigation-right #navigation-menu ul#menu li .dropdown {
    display: block;
  }
  #navigation-right #navigation-menu ul#menu li.open ul {
    transform: translate(0, 0px);
    -webkit-transform: translate(0, 0px);
    opacity: 1;
    max-height: 200px;
    box-shadow: 0px 5px 9px -3px rgba(0, 0, 0, 0.4);
    transition: transform 0.25s ease-in-out, max-height 0.35s ease-in-out, opacity 0.15s ease-in-out, box-shadow 0.15s 0.1s ease;
    -webkit-transition: -webkit-transform 0.25s ease-in-out, max-height 0.35s ease-in-out, opacity 0.15s ease-in-out, box-shadow 0.15s 0.1s ease;
  }
  #navigation-right #navigation-menu ul#menu li.open ul a {
    color: #545454;
  }
  #navigation-right #navigation-menu ul#menu li.open ul a:hover {
    color: #cc4a47;
  }
  #navigation-right #navigation-menu ul#menu li.open ul a.active {
    border-bottom: none;
    color: #cc4a47;
  }
  #navigation-right #login {
    margin: 15px 0 0;
  }
  #navigation-right #login li a {
    padding: 16px 8px;
    font-size: 18px;
  }
  #navigation-right #navigation-menu,
  #navigation-right #login {
    float: left;
  }
  #navigation-right .mobile-nav-bars {
    display: none;
  }
  #navigation-right .mobile-nav-bars,
  #navigation-right .mobile-docnav-bars {
    margin: 15px 0 0;
  }
}
/*******************************************************************************
        Bar Devices 1024
*******************************************************************************/
@media only screen and (min-width: 900px) {
  #navigation-right {
    padding: 0 36px 0 0;
  }
  #navigation-right #navigation-menu ul#menu li a {
    padding: 16px;
  }
  #navigation-right #login li a {
    padding: 16px;
  }
}
@media only screen and (min-width: 1024px) {
  #navigation-right.is-docu-nav > #navigation-menu,
  #navigation-right.is-docu-nav > #login {
    display: block;
  }
  #navigation-right.is-docu-nav > .mobile-docnav-bars {
    display: none;
  }
  #navigation-right.is-docu-nav > #navigation-menu ul#menu li.subnav {
    display: inline-block;
  }
}
/*******************************************************************************
        Subnavigation
*******************************************************************************/
.subnavigation {
  position: fixed;
  top: 100px;
  right: 20px;
  z-index: 9;
}
/*******************************************************************************
        Selection + Placeholder
*******************************************************************************/
::-moz-selection {
  background: rgba(230, 230, 230, 0.8);
  color: #cc4a47;
}
::selection {
  background: rgba(230, 230, 230, 0.8);
  color: #cc4a47;
}
a::-moz-selection {
  background: rgba(230, 230, 230, 0.8);
  color: #479fcc;
}
a::selection {
  background: rgba(230, 230, 230, 0.8);
  color: #479fcc;
}
.btn-cta strong::-moz-selection {
  background: transparent;
  color: #ffffff;
}
.btn-cta strong::selection {
  background: transparent;
  color: #ffffff;
}
.btn-ghost::-moz-selection {
  background: transparent;
  color: #546E7A;
}
.btn-ghost::selection {
  background: transparent;
  color: #546E7A;
}
img::-moz-selection {
  background: rgba(255, 255, 255, 0.3);
}
img::selection {
  background: rgba(255, 255, 255, 0.3);
}
*::-webkit-placeholder {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  color: #aaa;
}
*::-webkit-input-placeholder {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  color: #aaa;
}
*::-webkit-textarea-placeholder {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  color: #777;
}
*:-moz-placeholder {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  color: #777;
  opacity: 1;
}
*::-moz-input-placeholder {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  color: #777;
  opacity: 1;
}
*::-moz-textarea-placeholder {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  color: #777;
}
::-webkit-placeholder {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  color: #777;
}
::-webkit-input-placeholder {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  color: #777;
}
::-webkit-textarea-placeholder {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  color: #777;
}
:-moz-placeholder {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  color: #777;
  opacity: 1;
}
::-moz-placeholder {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  color: #777;
  opacity: 1;
}
::-moz-input-placeholder {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  color: #777;
}
::-moz-textarea-placeholder {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  color: #777;
}
:-moz-ui-invalid:not(output) {
  box-shadow: none;
}
*:-ms-input-placeholder {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  color: #777;
}
:-ms-input-placeholder {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  color: #777;
}
input:-ms-input-placeholder {
  font-family: 'Roboto', sans-serif;
  color: #777;
}