@import url(/content/layout/sections.css);

body,
html {
    font-weight: 300;
    background: #fff;
    margin: 0;
    padding: 0;
    font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px;
    line-height: 1.4;
    color: #333
}

*,
a,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul {
    margin: 0;
    padding: 0
}

h1,
h2,
h3,
h4,
h5,
p,
span,
strong {
    font-family: inherit;
    line-height: inherit;
    color: inherit
}

h1 .text-left,
h2 .text-left,
h3 .text-left,
h4 .text-left,
h5 .text-left,
p .text-left,
span .text-left,
strong .text-left {
    text-align: left
}

h1 .text-center,
h2 .text-center,
h3 .text-center,
h4 .text-center,
h5 .text-center,
p .text-center,
span .text-center,
strong .text-center {
    text-align: center
}

h1 .text-right,
h2 .text-right,
h3 .text-right,
h4 .text-right,
h5 .text-right,
p .text-right,
span .text-right,
strong .text-right {
    text-align: right
}

h1 {
    font-size: 42px
}

h2 {
    font-size: 36px
}

h3 {
    font-size: 32px
}

h4 {
    font-size: 28px
}

h5 {
    font-size: 24px
}

.ql-editor {
    padding: 0!important;
    overflow: hidden!important
}

.ql-editor h1,
.ql-editor h2,
.ql-editor h3,
.ql-editor h4 {
    font-weight: 300
}

.code-container {
    position: relative;
    height: 100%;
    display: inline-block
}

@media screen and (min-width: 1px) {
    .ql-editor h1 {
        font-size: 40px
    }
    .ql-editor h2 {
        font-size: 32px
    }
    .ql-editor h3 {
        font-size: 28px
    }
    .ql-editor h4 {
        font-size: 22px
    }
    .ql-editor p {
        font-size: 16px
    }
}

@media screen and (min-width: 992px) {
    .ql-editor h1 {
        font-size: 52px
    }
    .ql-editor h2 {
        font-size: 38px
    }
    .ql-editor h3 {
        font-size: 34px
    }
    .ql-editor h4 {
        font-size: 28px
    }
    .ql-editor p {
        font-size: 16px
    }
}

strong {
    font-weight: 700
}

a {
    color: inherit;
    text-decoration: none;
    cursor: pointer
}

button,
button * {
    cursor: pointer!important;
    outline: 0;
    margin: 0
}

img {
    image-rendering: auto
}

img.image-round {
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px
}

img.image-circle {
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%
}

section {
    position: relative
}

section.section-padding-large {
    padding: 150px 0
}

section.section-padding-medium {
    padding: 125px 0
}

section.section-padding-small {
    padding: 25px 0
}

section.section-fullheight {
    min-height: 100vh;
    height: auto
}

section.section-fullwidth {
    min-width: 100vw;
    width: auto
}

section.section-overflow {
    overflow: auto
}

section .layout-color,
section .layout-media,
section .layout-media-image,
section .layout-media-video,
section .layout-media-video iframe {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0
}

section .layout-media-image,
section .layout-media-video {
    overflow: hidden
}

section .layout-color {
    background-color: transparent
}

section .layout-media-image {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover
}

@media screen and (max-width: 978px) {
    section .layout-media-image {
        background-attachment: inherit!important
    }
}

section .layout-media-video iframe {
    border: none;
    cursor: default
}

@media (max-width: 992px) {
    section .layout-content form [class*=col-] {
        padding: 0 15px!important
    }
    section [class*=col-].col-locked {
        float: left;
    }
    section [class*=col-].col-locked.col-md-12 {
        width: 100%;
    }
    section [class*=col-].col-locked.col-md-11 {
        width: 91.66666667%;
    }
    section [class*=col-].col-locked.col-md-10 {
        width: 83.33333333%;
    }
    section [class*=col-].col-locked.col-md-9 {
        width: 75%;
    }
    section [class*=col-].col-locked.col-md-8 {
        width: 66.66666667%;
    }
    section [class*=col-].col-locked.col-md-7 {
        width: 58.33333333%;
    }
    section [class*=col-].col-locked.col-md-6 {
        width: 50%;
    }
    section [class*=col-].col-locked.col-md-5 {
        width: 41.66666667%;
    }
    section [class*=col-].col-locked.col-md-4 {
        width: 33.33333333%;
    }
    section [class*=col-].col-locked.col-md-3 {
        width: 25%;
    }
    section [class*=col-].col-locked.col-md-2 {
        width: 16.66666667%;
    }
    section [class*=col-].col-locked.col-md-1 {
        width: 8.33333333%;
    }
}

.dark-background {
    color: #fff
}

.light-background {
    color: #3e3e3e
}

.ql-reset-padding .ql-editor {
    padding: 5px 0!important
}

.icon-centered .icon {
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center
}

.margin-icon .icon {
    margin-top: 10px
}

.socials {
    display: inline-block;
    width: 100%;
    margin: 10px 0;
    text-align: center
}

.socials .social {
    position: relative;
    cursor: pointer;
    display: inline-block;
    width: 100px;
    height: 50px;
    margin: 0 5px;
    border-radius: 5px;
    overflow: hidden
}

.socials .social:before {
    position: absolute;
    background: 0 0;
    content: " ";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1
}

.socials .social:hover {
    text-decoration: none;
    color: inherit
}

.socials .social:hover:before {
    background: rgba(0, 0, 0, .2)
}

.socials .social .social-inner {
    position: relative;
    display: block;
    height: 100%;
    width: 100%;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .2);
    z-index: 1
}

.socials .social .social-inner .social-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 28px;
    transform: translate(-50%, -50%);
    color: #fff
}

section .image-element {
    min-width: 125px
}

section .card {
    padding: 30px
}

@media (max-width: 992px) {
    section .card {
        margin: 10px
    }
}

section .card-small {
    padding: 15px;
    margin: 30px 10px
}

section .card-border {
    border: 1px solid #bdc5d4;
    border-radius: 4px
}

section .card-flex {
    padding: 30px;
    background: rgba(0, 0, 0, .1);
    border-radius: 5px;
    width: 100%
}

section .card-flex.col-md-4 {
    margin: 0 20px;
    width: calc(33.3% - 40px)
}

@media (max-width: 992px) {
    section .card-flex.col-md-4 {
        margin: 20px;
        width: calc(100% - 40px)
    }
}

section .background-black {
    background-color: #000;
    color: #fff
}

section .background-grey {
    background-color: #f4f6f8;
    color: #3e3e3e
}

section .background-transparent-black {
    background-color: rgba(0, 0, 0, .75);
    color: #fff
}

section .background-white {
    background-color: #fff;
    color: #000
}

section .round-5 {
    border-radius: 5px
}

section .min-height-115 {
    min-height: 115px
}

section .min-width-150 {
    min-width: 150px
}

section .card-flex {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -moz-flex;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap
}

section .card-image {
    flex: 1;
    margin-top: 10px
}

section .image-circle-small {
    height: 75px;
    max-width: 75px;
    min-width: 1px
}

section .image-circle-medium {
    height: 100px;
    min-width: 1px;
    max-width: 100px
}

section .card-text {
    flex: 3
}

section .card-text-full-width {
    flex: 1 100%;
    width: 190px
}

section .card-pricing {
    max-width: 375px;
    margin: 0 auto
}

section .card-pricing-large {
    max-width: 380px;
    margin: 30px auto
}

section .form-container textarea {
    height: 150px!important;
    outline: none!important;
    resize: none!important;
}

section .form-container .round input,
section .form-container .round textarea,
section .form-container .round .checkbox-input {
    border-radius: 25px
}

section .form-container .round .checkbox-input {
    border-radius: 0px;
	background: transparent;
}

section .form-container .transparent input:not([data-type=submit]),
section .form-container .transparent textarea {
    border: 1px solid #fff;
    background-color: transparent;
    color: #fff
}

section .form-container .transparent input::placeholder,
section .form-container .transparent textarea::placeholder {
    color: #fff
}

section .form-container input::placeholder,
section .form-container textarea::placeholder {
    color: #222;
    opacity: 1
}

section .form-container .border input:not([data-type=submit]),
section .form-container .border textarea {
    border: 1px solid #d4d4d4
}

section .form-container .transparent .checkbox-input {
    background-color: transparent;
    border: 1px solid #fff;
    color: #fff
}

section .form-container .transparent .checkbox-input input {
    border: 0
}

section .form-container input[data-type=submit] {
    text-align: center;
    color: #fff;
    display: block;
    font-size: 16px;
    font-weight: 300;
    border: 0
}

section .form-container input[data-type=email],
section .form-container input[data-type=number],
section .form-container input[data-type=text] {
    background: #fff;
    display: block;
    font-size: 16px;
    font-weight: 300
}

section .form-container .checkbox-input {
    position: relative;
    overflow: hidden;
    background: #fff;
    display: flex;
    align-items: left;
    justify-content: left;
    width: 100%;
    height: auto;
    min-height: 50px;
    font-size: 16px;
    color: #222;
    margin: 5px 0
}

section .form-container .checkbox-input input[type=checkbox] {
    margin: 15px 0px;
    height: 18px;
    width: 18px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: left;
	margin-right: 11px;
}

section .form-container .checkbox-input label {
    display: flex;
    flex-direction: column;
    justify-content: left;
    background: 0 0;
    line-height: 30px;
    padding: 10px 30px 10px 0;
    margin: 0;
    font-weight: 300;
    flex: 10;
}

section .form-container .checkbox-input label .checkbox-placeholder {
    position: absolute;
    top: 0;
    z-index: 0;
    background: 0 0;
    margin: 0;
    font-weight: 300
}

section .form-container input,
section .form-container select,
section .form-container textarea {
    color: #222;
    padding: 10px 16px;
    outline: 0;
    display: block;
    margin: 5px 0;
    width: 100%;
    height: 50px;
    font-size: 16px;
    font-weight: 300
}

.popup-holder {
    position: relative
}

.popup-holder .popup-content {
    background: #fff;
    max-height: 90%;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch
}

.payment-button {
    position: relative
}

.payment-button-loader {
    position: absolute;
    background: 0 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1
}

.payment-button-loader span {
    position: absolute;
    background: #fff;
    top: 50%;
    left: 50%;
    width: 32px;
    height: 32px;
    display: inline-block;
    line-height: 35px;
    transform: translate(-50%, -50%);
    border-radius: 100px
}

.payment-button-loader span i {
    font-weight: 700;
    font-size: 18px
}

#popup-payment .layout-content .payment-icon {
    display: block;
    width: 100%;
    margin-bottom: 35px;
    font-size: 42px;
    text-align: center
}

#popup-payment .layout-content .payment-title {
    font-size: 24px;
    text-align: center
}

#popup-payment .layout-content .payment-description {
    text-align: center
}

#popup-payment .layout-content .payment-price {
    text-align: center;
    margin: 25px 0 40px;
    display: block
}

#popup-payment .layout-content .payment-price span {
    background: #222;
    color: #fff;
    font-weight: 600;
    padding: 7px 15px;
    border-radius: 50px
}

#popup-payment .layout-content .payment-form {
    position: relative;
    display: block;
    width: 100%
}

#popup-payment .layout-content .payment-form input {
    display: block;
    width: 100%;
    border-radius: 4px;
    border: none;
    background: #f5f5f5;
    outline: 0;
    padding: 10px 15px;
    margin: 5px 0;
    font-size: 16px;
    float: left
}

#popup-payment .layout-content .payment-form button {
    display: inline-block;
    width: 100%;
    background: #222;
    border: none;
    border-radius: 4px;
    text-transform: uppercase;
    font-weight: 500;
    line-height: 58px;
    margin-top: 15px;
    color: #fff;
    height: 58px
}

.ck>div>:first-child,
.ck>div>:last-child {
    margin-top: 0!important;
    margin-bottom: 0!important
}

@media (min-width: 768px) {
    .payment-form .payment-form-input[name=payment-firstname],
    .payment-form .payment-form-input[name=payment-lastname] {
        width: 50%!important
    }
    .payment-form .payment-form-input[name=payment-firstname] {
        width: calc(50% - 10px)!important;
        margin-right: 10px!important
    }
    .payment-form .payment-form-input[name=payment-street] {
        width: calc(70% - 10px)!important;
        margin-right: 10px!important
    }
    .payment-form .payment-form-input[name=payment-house-number] {
        width: 30%!important
    }
    .payment-form .payment-form-input[name=payment-postal] {
        width: calc(35% - 10px)!important;
        margin-right: 10px!important
    }
    .payment-form .payment-form-input[name=payment-country] {
        width: 65%!important
    }
}

.text-color-black {
    color: #000
}

.full-width > .row
{
	margin: 0 !important;
}

@media (min-width: 992px) {
    .col-md-offset-right-12 {
        margin-right: 100%
    }
    .col-md-offset-right-11 {
        margin-right: 91.66666667%
    }
    .col-md-offset-right-10 {
        margin-right: 83.33333333%
    }
    .col-md-offset-right-9 {
        margin-right: 75%
    }
    .col-md-offset-right-8 {
        margin-right: 66.66666667%
    }
    .col-md-offset-right-7 {
        margin-right: 58.33333333%
    }
    .col-md-offset-right-6 {
        margin-right: 50%
    }
    .col-md-offset-right-5 {
        margin-right: 41.66666667%
    }
    .col-md-offset-right-4 {
        margin-right: 33.33333333%
    }
    .col-md-offset-right-3 {
        margin-right: 25%
    }
    .col-md-offset-right-2 {
        margin-right: 16.66666667%
    }
    .col-md-offset-right-1 {
        margin-right: 8.33333333%
    }
    .col-md-offset-right-0 {
        margin-right: 0
    }
}

@media only screen and (max-width: 600px) {
    .layout-content>div:first-of-type {
        padding-left: 15px!important;
        padding-right: 15px!important
    }
}

.ck.ck-editor__editable_inline[dir=ltr] {
    text-align: inherit !important;
}

@media only screen and (max-width: 600px) {
	.container-fluid .row .col-lg-1, 
	.container-fluid .row .col-lg-10, 
	.container-fluid .row .col-lg-11, 
	.container-fluid .row .col-lg-12, 
	.container-fluid .row .col-lg-2, 
	.container-fluid .row .col-lg-3, 
	.container-fluid .row .col-lg-4, 
	.container-fluid .row .col-lg-5, 
	.container-fluid .row .col-lg-6, 
	.container-fluid .row .col-lg-7, 
	.container-fluid .row .col-lg-8, 
	.container-fluid .row .col-lg-9, 
	.container-fluid .row .col-md-1, 
	.container-fluid .row .col-md-10, 
	.container-fluid .row .col-md-11, 
	.container-fluid .row .col-md-12, 
	.container-fluid .row .col-md-2, 
	.container-fluid .row .col-md-3, 
	.container-fluid .row .col-md-4, 
	.container-fluid .row .col-md-5, 
	.container-fluid .row .col-md-6, 
	.container-fluid .row .col-md-7, 
	.container-fluid .row .col-md-8, 
	.container-fluid .row .col-md-9, 
	.container-fluid .row .col-sm-1, 
	.container-fluid .row .col-sm-10, 
	.container-fluid .row .col-sm-11, 
	.container-fluid .row .col-sm-12, 
	.container-fluid .row .col-sm-2, 
	.container-fluid .row .col-sm-3, 
	.container-fluid .row .col-sm-4, 
	.container-fluid .row .col-sm-5, 
	.container-fluid .row .col-sm-6, 
	.container-fluid .row .col-sm-7, 
	.container-fluid .row .col-sm-8, 
	.container-fluid .row .col-sm-9, 
	.container-fluid .row .col-xs-1, 
	.container-fluid .row .col-xs-10, 
	.container-fluid .row .col-xs-11, 
	.container-fluid .row .col-xs-12, 
	.container-fluid .row .col-xs-2, 
	.container-fluid .row .col-xs-3, 
	.container-fluid .row .col-xs-4, 
	.container-fluid .row .col-xs-5, 
	.container-fluid .row .col-xs-6, 
	.container-fluid .row .col-xs-7, 
	.container-fluid .row .col-xs-8, 
	.container-fluid .row .col-xs-9 {
		padding-right: 0px;
		padding-left: 0px;
	}
}

.embed-element iframe {
    min-width: 100%;
    min-height: 275px!important;
}

.embed-element[data-size="10"] iframe {
    min-width: 10%!important;
}

.embed-element[data-size="20"] iframe {
    min-width: 20%!important;
}

.embed-element[data-size="30"] iframe {
    min-width: 30%!important;
}

.embed-element[data-size="40"] iframe {
    min-width: 40%!important;
}

.embed-element[data-size="50"] iframe {
    min-width: 50%!important;
}

.embed-element[data-size="60"] iframe {
    min-width: 60%!important;
}

.embed-element[data-size="70"] iframe {
    min-width: 70%!important;
}

.embed-element[data-size="80"] iframe {
    min-width: 80%!important;
}

.embed-element[data-size="90"] iframe {
    min-width: 90%!important;
}

.embed-element[data-size="100"] iframe {
    min-width: 100%!important;
}

@media (max-width: 800px)
{
  .col-boxx-content
  {
    display: none;
  }
  .col-boxx-content.mobile
  {
    display: block;
  }
}

@media (min-width: 800px)
{
  .col-boxx-content.mobile
  {
    display: none;
  }
  .col-boxx-content
  {
    display: block;
  }
}

.show-on-mobile {
    display:none;
}

.hide-on-mobile {
    display:block;
}

@media (min-width: 220px) and (max-width: 700px) {
    .show-on-mobile {
        display:block;
    }

    .hide-on-mobile {
        display:none;
    }
}