/*
 * ---------------------------------------------------------------------------------------------------------------------
 */

html,
body {
    width: 100%;
    height: 100%;
}

body {
    /*font-family: 'Muli', 'Helvetica', 'Arial', 'sans-serif';*/
}

a {
    color: rgba(255, 255, 255, 0.7);
    transition: all .35s;
}

a:hover, a:focus {
    color: #fff;
    cursor: pointer;
}

hr {
    max-width: 100px;
    margin: 25px auto 0;
    border-width: 1px;
    border-color: rgba(34, 34, 34, 0.1);
}

hr.light {
    border-color: white;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Catamaran', 'Helvetica', 'Arial', 'sans-serif';
    font-weight: 400;
    letter-spacing: 1px;
    color: #fff!important;
    word-wrap: break-word;
}

p {
    font-size: 18px;
    line-height: 1.5;
    margin-bottom: 20px;
}

section {
    padding-top: 100px;
    padding-bottom: 100px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 1);
}

section h2 {
    font-size: 50px;
}

.underline-on-hover:hover {
    text-decoration: underline;
}

/*
 * ---------------------------------------------------------------------------------------------------------------------
 */

div.masthead {
    position: relative;
    width: 100%;
    padding-top: 150px;
    padding-bottom: 100px;
    color: white;
    background: url("../img/bg-pattern.png"), linear-gradient(to left, #7b4397, #291f45);
}

div.masthead .header-content {
    max-width: 500px;
    margin-bottom: 100px;
    text-align: center;
}

div.masthead .header-content h1 {
    font-size: 30px;
}

div.masthead .device-container {
    max-width: 325px;
    margin-right: auto;
    margin-left: auto;
}

div.masthead .device-container .screen img {
    border-radius: 0;
}

@media (min-width: 992px) {
    div.masthead {
        height: 100vh;
        min-height: 775px;
        padding-top: 0;
        padding-bottom: 0;
    }
    div.masthead .header-content {
        margin-bottom: 0;
        text-align: left;
    }
    div.masthead .header-content h1 {
        font-size: 50px;
    }
    div.masthead .device-container {
        max-width: 325px;
    }
}

div.shadow-box {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 1);
}

/*
 * ---------------------------------------------------------------------------------------------------------------------
 */

section.user {
    position: relative;
    /*padding: 150px 0;*/
    padding: 250px 0;
}

section.user h2 {
    font-size: 50px;
    margin-top: 0;
}

section.user .badges .badge-link {
    display: block;
    margin-bottom: 25px;
}

section.user .badges .badge-link:last-child {
    margin-bottom: 0;
}

section.user .badges .badge-link img {
    height: 60px;
}

@media (min-width: 768px) {
    section.user .badges .badge-link {
        display: inline-block;
        margin-bottom: 0;
    }
}

@media (min-width: 768px) {
    section.user h2 {
        font-size: 70px;
    }
}

/*
 * ---------------------------------------------------------------------------------------------------------------------
 */

section.faq {
    position: relative;
    /*padding: 150px 0;*/
    padding: 250px 0;
}

section.faq h2 {
    font-size: 50px;
    margin-top: 0;
}

section.faq .badges .badge-link {
    display: block;
    margin-bottom: 25px;
}

section.faq .badges .badge-link:last-child {
    margin-bottom: 0;
}

section.faq .badges .badge-link img {
    height: 60px;
}

@media (min-width: 768px) {
    section.faq .badges .badge-link {
        display: inline-block;
        margin-bottom: 0;
    }
}

@media (min-width: 768px) {
    section.faq h2 {
        font-size: 70px;
    }
}

/*
 * ---------------------------------------------------------------------------------------------------------------------
 */

section.features .section-heading {
    margin-top: 50px;
    margin-bottom: 100px;
}

section.features .section-heading h2 {
    /*margin-top: 0;*/
}

section.features .section-heading p {
    /*margin-bottom: 0;*/
}

section.features .section-footer {
    margin-top: 100px;
    margin-bottom: 50px;
    border-top: 3px solid #222222;
    padding-top: 140px;
}

section.features .section-footer h2 {
    /*margin-top: 0;*/
}

section.features .section-footer p {
    /*margin-bottom: 0;*/
}


section.features .device-container,
section.features .feature-item {
    max-width: 325px;
    margin: 0 auto;
}

section.features .device-container {
    margin-bottom: 100px;
}

@media (min-width: 992px) {
    section.features .device-container {
        margin-bottom: 0;
    }
}

section.features .feature-item {
    padding-top: 25px;
    padding-bottom: 25px;
    text-align: center;
}

section.features .feature-item h3 {
    font-size: 30px;
}

section.features .feature-item i {
    font-size: 80px;
    display: block;
    margin-bottom: 15px;
    background: linear-gradient(to left, #7b4397, #291f45);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/*
 * ---------------------------------------------------------------------------------------------------------------------
 */

section.cta {
    position: relative;
    /*padding: 250px 0;*/
    padding: 350px 0;
    background-image: url("../img/bakingbeckons.jpg");
    background-position: center;
    background-size: cover;
    /*height: 50vh;*/
}

section.cta .cta-content {
    position: relative;
    z-index: 1;
}

section.cta .cta-content h2 {
    font-size: 50px;
    max-width: 450px;
    margin-top: 0;
    margin-bottom: 25px;
    color: white;

    /*
        background: rgba(0, 0, 0, 0.5);
        border-radius: 0.25em;
        padding: 10px;
    */
}

@media (min-width: 768px) {
    section.cta .cta-content h2 {
        font-size: 60px;
    }
}

section.cta .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

section.cta .overlay-light {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
}

/*
 * ---------------------------------------------------------------------------------------------------------------------
 */

section.noncommercialuse {
    position: relative;
    padding: 350px 0; /* 250px */
    background-image: url("../img/beckongarage2048.jpg");
    background-position: center;
    background-size: cover;
    /*height: 50vh;*/
}

section.noncommercialuse .noncommercialuse-content {
    position: relative;
    z-index: 1;
}

section.noncommercialuse .noncommercialuse-content h2 {
    font-size: 50px;
    max-width: 450px;
    margin-top: 0;
    margin-bottom: 25px;
    color: white;

    /*
        background: rgba(0, 0, 0, 0.5);
        border-radius: 0.25em;
        padding: 10px;
    */
}

@media (min-width: 768px) {
    section.noncommercialuse .noncommercialuse-content h2 {
        font-size: 60px;
    }
}

section.noncommercialuse .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
}

/*
 * ---------------------------------------------------------------------------------------------------------------------
 */

.bg-primary {
    background: #fdcc52;
    background: linear-gradient(#fdcc52, #fdc539);
}

.bg-primary h1,
.bg-primary h2,
.bg-primary h3,
.bg-primary h4,
.bg-primary h5,
.bg-primary h6 {
    color: #161616!important;
}

.text-primary {
    color: #fdcc52;
}

.bg-secondary {
    /*background: url("../img/bg-pattern.png"), #7b4397;*/
    /*background: url("../img/bg-pattern.png"), linear-gradient(to left, #7b4397, #291f45);*/
    color: #eee;
    background: #7b4397;
    background: linear-gradient(to left, #7b4397, #291f45);
}

.bg-secondary h1,
.bg-secondary h2,
.bg-secondary h3,
.bg-secondary h4,
.bg-secondary h5,
.bg-secondary h6 {
    color: #fff!important;
}

.text-secondary {
    color: #6f42c1;
}

.bg-tertiary {
    color: #e2e2e2;

    /*background: #6c9fc1;*/
    /*background: linear-gradient(to left, #6c9fc1, #0a395e);*/

    /*background: #445668;*/
    /*background: url("../img/bg-pattern.png"), linear-gradient(to left, #445668, #0a395e);*/

    /*background: #072034;*/
    /*background: linear-gradient(to left, #072034, #04111a);*/

    background: #161616;

}

.bg-tertiary h1,
.bg-tertiary h2,
.bg-tertiary h3,
.bg-tertiary h4,
.bg-tertiary h5,
.bg-tertiary h6 {
    color: #e2e2e2!important;
}

.no-gutter > [class*='col-'] {
    padding-right: 0;
    padding-left: 0;
}

.btn-outline {
    color: white;
    border: 1px solid;
    border-color: white;
}

.btn-outline:hover, .btn-outline:focus, .btn-outline:active, .btn-outline.active {
    color: white;
    border-color: #fdcc52;
    background-color: #fdcc52;
}

.btn-outline.bt-outline-secondary:hover, .btn-outline.bt-outline-secondary:focus, .btn-outline.bt-outline-secondary:active, .btn-outline.bt-outline-secondary.active {
    color: white;
    border-color: #7b4397;
    background-color: #7b4397;
}

.btn {
    /* border-radius: 300px; */
    border-radius: 0;
    font-family: 'Lato', 'Helvetica', 'Arial', 'sans-serif';
    letter-spacing: 2px;
    text-transform: uppercase;
}

.btn-xl {
    font-size: 11px;
    padding: 15px 45px;
}

/*
 * ---------------------------------------------------------------------------------------------------------------------
 */

/*
 * Pricing table
 * 161616, 2d2d2d, 424242
 */

.pricing-block {
}

.pricing-block-body {
}

.pricing-block-value {
    font-size: 33px !important;
    font-weight: 400;
    color: #fff;
}

.pricing-block-feature-group {
}

.pricing-block-feature-group-item {
    border-color: #2d2d2d !important;
    background-color: #424242 !important;
    color: #fff;
    font-weight: 400;
    font-family: 'Nunito', 'Catamaran', 'Helvetica', 'Arial', 'sans-serif';
    letter-spacing: 0.0625em;
}

.pricing-block-feature-group-darker-item {
    border-color: #2d2d2d !important;
    background-color: #222222 !important;
    color: #fff;
    font-weight: 400;
    font-family: 'Nunito', 'Catamaran', 'Helvetica', 'Arial', 'sans-serif';
    letter-spacing: 0.0625em;
}

/*
 * ---------------------------------------------------------------------------------------------------------------------
 */

.message-section {
    /*margin-top: 150px;*/
    padding: 10rem 0;
    background: linear-gradient(to bottom, rgba(22, 22, 22, 0.1) 0%, rgba(22, 22, 22, 0.5) 75%, #161616 100%), url("../img/artisticviaduct.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: cover;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 1);
    border-bottom: none;
}

.message-section input {
    box-shadow: 0 0.1875rem 0.1875rem 0 rgba(0, 0, 0, 0.1) !important;
    padding: 1.25rem 2rem;
    height: auto;
    font-family: 'Varela Round';
    font-size: 80%;
    /*text-transform: uppercase;*/
    letter-spacing: 0.15rem;
    border: 0;
    background-color: rgba(235, 235, 235, 1) !important;
}

.message-section textarea {
    box-shadow: 0 0.1875rem 0.1875rem 0 rgba(0, 0, 0, 0.1) !important;
    padding: 1.25rem 2rem;
    height: auto;
    font-family: 'Varela Round';
    font-size: 80%;
    /*text-transform: uppercase;*/
    letter-spacing: 0.15rem;
    border: 0;
    background-color: rgba(235, 235, 235, 1) !important;
}

/*
 * ---------------------------------------------------------------------------------------------------------------------
 */

section.contact-section {
    /*padding-top: 200px;*/
    box-shadow: 0 0 0 0;
    padding: 0 0;
}

#anfrage-submit {
    border-radius: 0;
}

#help-submit {
    border-radius: 0;
}

/*
 * ---------------------------------------------------------------------------------------------------------------------
 */

div.section-between-separator {
    margin-top: 150px;
    border-top: 3px solid #222222;
    padding-top: 0px;
    padding-bottom: 150px;
}

div.silent-section-top-separator {
    padding-top: 150px;
}

div.silent-section-bottom-separator {
    padding-bottom: 150px;
}

/*
 * ---------------------------------------------------------------------------------------------------------------------
 */

section.standard-content {
    margin-top: 0px;
    margin-bottom: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
}

section.standard-content .section-heading {
    /*margin-top: 50px;*/
    margin-bottom: 100px;
}



section.standard-content .faq-answer-category-heading {
    margin-top: 1rem;
    margin-bottom: 3rem;
}

section.standard-content {
    box-shadow: 0 0 0 0;
}

section.standard-content h5 {
    color: rgba(255,255,255,.8)!important;
    font-size: 18px;
}

section.standard-content p {
    font-size: 16px !important;
}

section.standard-content .section-footer {
    /*margin-top: 50px;*/
    /*margin-bottom: 50px;*/
    /*border-top: 3px solid #222222;*/
    /*padding-top: 140px;*/
    /*padding-top: 50px;*/
}

section.standard-content .section-footer .headline {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

section.standard-content .section-footer h2 {
    margin-top: 0;
}

section.standard-content .section-footer p {
    margin-bottom: 0;
}

section.standard-content .content-heading {
    margin-top: 100px;
}

div.standard-content p {
    font-size: 16px !important;
}

/*
 * ---------------------------------------------------------------------------------------------------------------------
 */

/*section.gallery {*/
/*    position: relative;*/
/*    padding: 350px 0; !* 250px *!*/
/*}*/

.carousel-inner .carousel-item {
    transition: -webkit-transform 1s ease;
    transition: transform 1s ease;
    transition: transform 1s ease, -webkit-transform 1s ease;
}

.carousel-item {
    /*height: 100vh;*/
    /*min-height: 50vh;*/
    padding: 50px 0;
    background: no-repeat left top scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.carousel-item .carousel-content {
    padding: 5rem;
}

.carousel-item .carousel-panel-description {
    padding-right: 2rem;
}

.carousel-item .carousel-panel-media {
    display: block;
    width: 100%;
    height: auto;
    min-height: 50vh;
    background: no-repeat left top scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.carousel-item h1 {
    font-size: 5em;
}

.carousel-item p {
    margin-bottom: 3rem;
    margin-top: 3rem;
    font-size: 2em;
    color: #fff;
}

#carousel-howbeckonworks .carousel-item p {
    font-size: 2.0em !important;
}

@media (max-width: 1200px) {
    .carousel-item {}
    .carousel-item .carousel-content {}
    .carousel-item .carousel-panel-description {}
    .carousel-item .carousel-panel-media {}
    .carousel-item h1 {
        font-size: 4em;
    }
    .carousel-item h2 {
        font-size: 3em;
    }
    .carousel-item p {
        font-size: 1.5em;
    }
    #carousel-howbeckonworks .carousel-item p {
        font-size: 1.5em !important;
    }
}

@media (max-width: 992px) {
    .carousel-item {}
    .carousel-item .carousel-content {}
    .carousel-item .carousel-panel-description {
        padding-right: 0;
    }
    .carousel-item .carousel-panel-media {
        margin-top: 2rem;
    }
    .carousel-item h1 {}
    .carousel-item h2 {}
    .carousel-item p {}
    #carousel-howbeckonworks .carousel-item p {
        font-size: 1.5em !important;
    }
}

@media (max-width: 540px) {
    .carousel-item {}
    .carousel-item .carousel-content {
        padding: 3rem;
    }
    .carousel-item .carousel-panel-description {}
    .carousel-item .carousel-panel-media {
        display: none;
    }
    .carousel-item h1 {
        font-size: 2.5em;
    }
    .carousel-item h2 {
        font-size: 2.0em;
    }
    .carousel-item p {}
    #carousel-howbeckonworks .carousel-item p {
        font-size: 1.2em !important;
    }
}

/* EN pictures */

#carousel-panel-media-user-index {
    background-image: url("../img/gallery-user-index.png");
}

#carousel-panel-media-user-access {
    background-image: url("../img/gallery-user-access.png");
}

#carousel-panel-media-form-edit {
    background-image: url("../img/gallery-form-edit.png");
}

#carousel-panel-media-user-permissions {
    background-image: url("../img/gallery-user-permissions.png");
}

#carousel-panel-media-user-messages {
    background-image: url("../img/gallery-user-messages.png");
}

#carousel-panel-media-user-log {
    background-image: url("../img/gallery-user-log.png");
}

#carousel-panel-media-manager-api {
    background-image: url("../img/gallery-manager-api.png");
}

#carousel-panel-media-information-pages {
    background-image: url("../img/gallery-information-pages.png");
}

/* /EN pictures */

/* DE pictures */

#carousel-panel-media-user-index-de {
    background-image: url("../img/gallery-user-index-de.png");
}

#carousel-panel-media-user-access-de {
    background-image: url("../img/gallery-user-access-de.png");
}

#carousel-panel-media-form-edit-de {
    background-image: url("../img/gallery-form-edit-de.png");
}

#carousel-panel-media-user-permissions-de {
    background-image: url("../img/gallery-user-permissions-de.png");
}

#carousel-panel-media-user-messages-de {
    background-image: url("../img/gallery-user-messages-de.png");
}

#carousel-panel-media-user-log-de {
    background-image: url("../img/gallery-user-log-de.png");
}

#carousel-panel-media-manager-api-de {
    background-image: url("../img/gallery-manager-api-de.png");
}

#carousel-panel-media-information-pages-de {
    background-image: url("../img/gallery-information-pages-de.png");
}

/* /DE pictures */

/*
 * ---------------------------------------------------------------------------------------------------------------------
 */

#onboarding > div.section-heading.text-center > h2 {
    font-size: 3em;
}

@media (max-width: 1200px) {
    #onboarding > div.section-heading.text-center > h2 {
        font-size: 2.5em;
    }
}

@media (max-width: 992px) {
    #onboarding > div.section-heading.text-center > h2 {
        font-size: 2.5em;
    }
}

@media (max-width: 540px) {
    #onboarding > div.section-heading.text-center > h2 {
        font-size: 2.0em;
    }
}

/*
 * ---------------------------------------------------------------------------------------------------------------------
 */

.content-separate-from-top {
    margin-top: 150px;
}

/* Default: left-aligned on small screens */
.text-lg-right {
  text-align: left; /* fallback for xs/sm/md */
}

/* From large screens (lg) and up: right-aligned */
@media (min-width: 992px) {
  .text-lg-right {
    text-align: right;
  }
}

/* Default: left-aligned on small screens */
.text-lg-center {
  text-align: left; /* fallback for xs/sm/md */
}

/* From large screens (lg) and up: right-aligned */
@media (min-width: 992px) {
  .text-lg-center {
    text-align: center;
  }
}

/*
 * ---------------------------------------------------------------------------------------------------------------------
 */