@import url(https://fonts.googleapis.com/css?family=Rubik:300,400,500,600,700,800,900,300i,400i,500i,600i,700i,800i,900i&display=swap);
@primaryColor: #149dcc;
@secondaryColor: #ff3366;
@successColor: #F7ED4A;
@infoColor: #82786E;
@warningColor: #879A9F;
@dangerColor: #B1A374;
@mainFont: Rubik;
@display1Font: 'Rubik', sans-serif;
@display1Size: 4.25;
@display2Font: 'Rubik', sans-serif;
@display2Size: 3;
@display5Font: 'Rubik', sans-serif;
@display5Size: 1.5;
@display7Font: 'Rubik', sans-serif;
@display7Size: 1;
@display4Font: 'Rubik', sans-serif;
@display4Size: 1;
@isRoundedButtons: true;
@isAnimatedOnScroll: false;
@isScrollToTopButton: false;
@btn-font-size: .8rem;
@btn-border-radius: 3px;
@btn-padding-y: 1rem;
@btn-padding-x: 3rem;
@btn-font-size-sm: .8rem;
@btn-border-radius-sm: 3px;
@btn-padding-y-sm: .6rem;
@btn-padding-x-sm: 1.5rem;
@btn-font-size-md: 1rem;
@btn-border-radius-md: 3px;
@btn-padding-y-md: 1rem;
@btn-padding-x-md: 3rem;
@btn-font-size-lg: 1.2rem;
@btn-border-radius-lg: 3px;
@btn-padding-y-lg: 1.2rem;
@btn-padding-x-lg: 3.2rem;

// FONTS

body {
    font-family: @mainFont;
}

.display-1 {
    font-family: @display1Font;
    font-size: @display1Size *1rem;
    font-display: swap;

    >.mbr-iconfont {
        font-size: @display1Size *1.6rem;
    }
}

.display-2 {
    font-family: @display2Font;
    font-size: @display2Size *1rem;
    font-display: swap;

    >.mbr-iconfont {
        font-size: @display2Size *1.6rem;
    }
}

.display-4 {
    font-family: @display4Font;
    font-size: @display4Size *1rem;
    font-display: swap;

    >.mbr-iconfont {
        font-size: @display4Size *1.6rem;
    }
}

.display-5 {
    font-family: @display5Font;
    font-size: @display5Size *1rem;
    font-display: swap;

    >.mbr-iconfont {
        font-size: @display5Size *1.6rem;
    }
}

.display-7 {
    font-family: @display7Font;
    font-size: @display7Size *1rem;
    font-display: swap;

    >.mbr-iconfont {
        font-size: @display7Size *1.6rem;
    }
}

/* ---- Fluid typography for mobile devices ---- */

/* 1.4 - font scale ratio ( bootstrap == 1.42857 ) */
/* 100vw - current viewport width */
/* (48 - 20)  48 == 48rem == 768px, 20 == 20rem == 320px(minimal supported viewport) */
/* 0.65 - min scale variable, may vary */

@media (max-width: 768px) {
    .display-1 {
        @display1Size-min: @display1Size - (@display1Size - 1) * 0.65;
        font-size: @display1Size * 0.8rem;
        font-size:~"calc( @{display1Size-min}rem + (@{display1Size} - @{display1Size-min}) * ((100vw - 20rem) / (48 - 20)))";
        line-height:~"calc( 1.4 * (@{display1Size-min}rem + (@{display1Size} - @{display1Size-min}) * ((100vw - 20rem) / (48 - 20))))";
    }

    .display-2 {
        @display2Size-min: @display2Size - (@display2Size - 1) * 0.65;
        font-size: @display2Size * 0.8rem;
        font-size:~"calc( @{display2Size-min}rem + (@{display2Size} - @{display2Size-min}) * ((100vw - 20rem) / (48 - 20)))";
        line-height:~"calc( 1.4 * (@{display2Size-min}rem + (@{display2Size} - @{display2Size-min}) * ((100vw - 20rem) / (48 - 20))))";
    }

    .display-4 {
        @display4Size-min: @display4Size - (@display4Size - 1) * 0.65;
        font-size: @display4Size * 0.8rem;
        font-size:~"calc( @{display4Size-min}rem + (@{display4Size} - @{display4Size-min}) * ((100vw - 20rem) / (48 - 20)))";
        line-height:~"calc( 1.4 * (@{display4Size-min}rem + (@{display4Size} - @{display4Size-min}) * ((100vw - 20rem) / (48 - 20))))";
    }

    .display-5 {
        @display5Size-min: @display5Size - (@display5Size - 1) * 0.65;
        font-size: @display5Size * 0.8rem;
        font-size:~"calc( @{display5Size-min}rem + (@{display5Size} - @{display5Size-min}) * ((100vw - 20rem) / (48 - 20)))";
        line-height:~"calc( 1.4 * (@{display5Size-min}rem + (@{display5Size} - @{display5Size-min}) * ((100vw - 20rem) / (48 - 20))))";
    }
}

/* Buttons */
.button-variant(@background) {
    @color: contrast(@background, darken(@background, 50%), #ffffff, 60%);
    @border: @background;
    @active-color: @color;
    @active-border: @active-background;

    @active-background: if(eq(@background, @color),
        #d4d4d4,
        darken(@background, 15%));

    &,
    &:active {
        background-color: @background  !important;
        border-color: @border  !important;
        color: @color  !important;
    }

    &:hover,
    &:focus,
    &.focus,
    &.active {
        color: @active-color  !important;
        background-color: @active-background  !important;
        border-color: @active-border  !important;
    }

    &.disabled,
    &:disabled {
        color: @active-color  !important;
        background-color: @active-background  !important;
        border-color: @active-border  !important;
    }

}

.button-outline-variant(@color) {
    @active-color: contrast(@color, darken(@color, 50%), #ffffff, 60%);
    @active-background: @color;
    @new-color: if(eq(@color, @active-color),
        #fff,
        darken(@color, 20%));

    &,
    &:active {
        background: none;
        border-color: @new-color;
        color: @new-color;
    }

    &:hover,
    &:focus,
    &.focus,
    &.active {
        color: @active-color;
        background-color: @active-background;
        border-color: @active-background;
    }

    &.disabled,
    &:disabled {
        color: @active-color  !important;
        background-color: @active-background  !important;
        border-color: @active-background  !important;
    }
}

.plan-variant(@className, @color) {
    &@{className} {

        .mbr-plan-subtitle,
        .mbr-plan-price-desc {
            @max: max(red(@color), green(@color), blue(@color));

            & when (@max > 200) {
                color: lighten(@color, 40%);
            }

            & when (@max > 85) and (@max <=200) {
                color: lighten(@color, 25%);
            }

            & when (@max > 50) and (@max <=85) {
                color: lighten(@color, 45%);
            }

            & when (@max <=50) {
                color: lighten(@color, 70%);
            }
        }
    }
}





.button-size(@btn-padding-y, @btn-padding-x, @btn-font-size, @btn-border-radius) {
    padding: @btn-padding-y @btn-padding-x;
    border-radius: @btn-border-radius;
}

.btn {
    .button-size(@btn-padding-y, @btn-padding-x, @btn-font-size, @btn-border-radius);
}

.btn-sm {
    .button-size(@btn-padding-y-sm, @btn-padding-x-sm, @btn-font-size-sm, @btn-border-radius-sm);
}

.btn-md {
    .button-size(@btn-padding-y-md, @btn-padding-x-md, @btn-font-size-md, @btn-border-radius-md);
}

.btn-lg {
    .button-size(@btn-padding-y-lg, @btn-padding-x-lg, @btn-font-size-lg, @btn-border-radius-lg);
}

.bg-primary {
    background-color: @primaryColor  !important;
}

.bg-success {
    background-color: @successColor  !important;
}

.bg-info {
    background-color: @infoColor  !important;
}

.bg-warning {
    background-color: @warningColor  !important;
}

.bg-danger {
    background-color: @dangerColor  !important;
}

.btn-primary {
    .button-variant(@primaryColor);
}

.btn-secondary {
    .button-variant(@secondaryColor);
}

.btn-info {
    .button-variant(@infoColor);
}

.btn-success {
    .button-variant(@successColor);
}

.btn-warning {
    .button-variant(@warningColor);
}

.btn-danger {
    .button-variant(@dangerColor);
}

.btn-white {
    .button-variant(#ffffff);
    color: #333333 !important;
}

.btn-black {
    .button-variant(#333333);
}

.btn-primary-outline {
    .button-outline-variant(@primaryColor);
}

.btn-secondary-outline {
    .button-outline-variant(@secondaryColor);
}

.btn-info-outline {
    .button-outline-variant(@infoColor);
}

.btn-success-outline {
    .button-outline-variant(@successColor);
}

.btn-warning-outline {
    .button-outline-variant(@warningColor);
}

.btn-danger-outline {
    .button-outline-variant(@dangerColor);
}

.btn-black-outline {
    .button-outline-variant(#333333);
}

.btn-white-outline {

    &,
    &:active,
    &.active {
        background: none;
        border-color: #ffffff;
        color: #ffffff;
    }

    &:hover,
    &:focus,
    &.focus {
        color: #333333;
        background-color: #ffffff;
        border-color: #ffffff;
    }

}

.text-primary {
    color: @primaryColor  !important;
}

.text-secondary {
    color: @secondaryColor  !important;
}

.text-success {
    color: @successColor  !important;
}

.text-info {
    color: @infoColor  !important;
}

.text-warning {
    color: @warningColor  !important;
}

.text-danger {
    color: @dangerColor  !important;
}

.text-white {
    color: #ffffff !important;
}

.text-black {
    color: #000000 !important;
}

a.text-primary:hover,
a.text-primary:focus {
    color: darken(@primaryColor, 20%) !important;
}

a.text-secondary:hover,
a.text-secondary:focus {
    color: darken(@secondaryColor, 20%) !important;
}

a.text-success:hover,
a.text-success:focus {
    color: darken(@successColor, 20%) !important;
}

a.text-info:hover,
a.text-info:focus {
    color: darken(@infoColor, 20%) !important;
}

a.text-warning:hover,
a.text-warning:focus {
    color: darken(@warningColor, 20%) !important;
}

a.text-danger:hover,
a.text-danger:focus {
    color: darken(@dangerColor, 20%) !important;
}

a.text-white:hover,
a.text-white:focus {
    color: darken(#ffffff, 30%) !important;
}

a.text-black:hover,
a.text-black:focus {
    color: lighten(#000000, 30%) !important;
}

.alert-success {
    background-color: #70c770;
}

.alert-info {
    background-color: @infoColor;
}

.alert-warning {
    background-color: @warningColor;
}

.alert-danger {
    background-color: @dangerColor;
}

.mbr-section-btn a.btn:not(.btn-form) {

    &:hover,
    &:focus {
        box-shadow: none !important;
    }

    & when (@isRoundedButtons) {
        border-radius: 100px;

        &:hover,
        &:focus {
            box-shadow: 0 10px 40px 0 rgba(0, 0, 0, .2) !important;
            -webkit-box-shadow: 0 10px 40px 0 rgba(0, 0, 0, .2) !important;
        }
    }
}

.mbr-gallery-filter li a when(@isRoundedButtons) {
    border-radius: 100px !important;
}

.mbr-gallery-filter {
    li.active .btn {
        background-color: @primaryColor;
        border-color: @primaryColor;
        color: contrast(@primaryColor, darken(@primaryColor, 45%), #ffffff, 60%);

        &:focus {
            box-shadow: none;
        }
    }
}

.nav-tabs .nav-link when(@isRoundedButtons) {
    border-radius: 100px !important;
}

a,
a:hover {
    color: @primaryColor;
}

.mbr-plan-header {
    .plan-variant(~'.bg-primary', @primaryColor);
    .plan-variant(~'.bg-success', @successColor);
    .plan-variant(~'.bg-info', @infoColor);
    .plan-variant(~'.bg-warning', @warningColor);
    .plan-variant(~'.bg-danger', @dangerColor);
}

/* Scroll to top button*/
.scrollToTop_wraper when not(@isScrollToTopButton) {
    display: none;
}

#scrollToTop a when (@isScrollToTopButton) and (@isRoundedButtons) {
    border-radius: 100px;
}

.form-control {
    .display-7;
}

blockquote {
    border-color: @primaryColor;
}

/* Forms */
.mbr-form {
    .btn {
        margin: .4rem 0;
    }

    .input-group-btn a.btn when(@isRoundedButtons) {
        border-radius: 100px !important;

        // padding: 1rem 3rem;
        &:hover {
            box-shadow: 0 10px 40px 0 rgba(0, 0, 0, .2);
        }
    }

    .input-group-btn button[type="submit"] when (@isRoundedButtons) {
        border-radius: 100px !important;
        padding: 1rem 3rem;

        &:hover {
            box-shadow: 0 10px 40px 0 rgba(0, 0, 0, .2);
        }
    }
}

.form2 {
    .form-control {
        & when (@isRoundedButtons) {
            border-top-left-radius: 100px;
            border-bottom-left-radius: 100px;
        }
    }

    .input-group-btn a.btn when(@isRoundedButtons) {
        border-top-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
    }

    .input-group-btn button[type="submit"] when(@isRoundedButtons) {
        border-top-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
    }
}

.form3 {
    input[type="email"] when (@isRoundedButtons) {
        border-radius: 100px !important;
    }
}

@media (max-width: 349px) {
    .form2 {
        input[type="email"] when (@isRoundedButtons) {
            border-radius: 100px !important;
        }

        .input-group-btn a.btn when (@isRoundedButtons) {
            border-radius: 100px !important;
        }

        .input-group-btn button[type="submit"] when (@isRoundedButtons) {
            border-radius: 100px !important;
        }
    }
}

@media (max-width: 767px) {
    .btn {
        font-size: .75rem !important;

        .mbr-iconfont {
            font-size: 1rem !important;
        }
    }
}

/* Footer */
.mbr-footer-content,
.mbr-footer .mbr-contacts {
    li {
        &::before {
            background: @primaryColor;
        }

        a:hover {
            color: @primaryColor;
        }
    }
}

.footer3,
.footer4 {
    input[type="email"] when (@isRoundedButtons) {
        border-radius: 100px !important;
    }

    .input-group-btn a.btn when (@isRoundedButtons) {
        border-radius: 100px !important;
    }

    .input-group-btn button[type="submit"] when (@isRoundedButtons) {
        border-radius: 100px !important;
    }
}

/* Headers*/
.header13,
.header14 {
    .form-inline {
        input[type="email"] when (@isRoundedButtons) {
            border-radius: 100px;
        }

        input[type="text"] when (@isRoundedButtons) {
            border-radius: 100px;
        }

        input[type="tel"] when (@isRoundedButtons) {
            border-radius: 100px;
        }

        a.btn when (@isRoundedButtons) {
            border-radius: 100px;
        }

        button when (@isRoundedButtons) {
            border-radius: 100px !important;
        }
    }
}

@media screen and (~'-ms-high-contrast: active'),
(~'-ms-high-contrast: none') {
    .card-wrapper {
        flex: auto !important;
    }
}

//formstyler
.jq-selectbox li:hover,
.jq-selectbox li.selected {
    background-color: @primaryColor;
    color: contrast(@primaryColor, #000000, #ffffff, 60%)
}

.jq-selectbox .jq-selectbox__trigger-arrow,
.jq-number__spin.minus:after,
.jq-number__spin.plus:after {
    transition: 0.4s;
    border-top-color: currentColor;
    border-bottom-color: currentColor;
}

.jq-selectbox:hover .jq-selectbox__trigger-arrow,
.jq-number__spin.minus:hover:after,
.jq-number__spin.plus:hover:after {
    border-top-color: @primaryColor;
    border-bottom-color: @primaryColor;
}

.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_default,
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current,
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div.xdsoft_current {
    color: contrast(@primaryColor, #000, #fff, 30%) !important;
    background-color: @primaryColor !important;
    box-shadow: none !important;
}

.xdsoft_datetimepicker .xdsoft_calendar td:hover,
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div:hover {
    color: contrast(@secondaryColor, #000, #fff, 30%) !important;
    background: @secondaryColor  !important;
    box-shadow: none !important
}

//lazyload
.lazy-bg {
    background-image: none !important;
}

.lazy-placeholder:not(section),
.lazy-none {
    display: block;
    position: relative;
    padding-bottom: 56.25%;
}

iframe.lazy-placeholder,
.lazy-placeholder:after {
    content: '';
    position: absolute;
    width: 100px;
    height: 100px;
    background: transparent no-repeat center;
    background-size: contain;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    @fillSVG: replace("@{primaryColor}", "#", "%23");
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='32' height='32' viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg' stroke='@{fillSVG}' %3e%3cg fill='none' fill-rule='evenodd'%3e%3cg transform='translate(16 16)' stroke-width='2'%3e%3ccircle stroke-opacity='.5' cx='16' cy='16' r='16'/%3e%3cpath d='M32 16c0-9.94-8.06-16-16-16'%3e%3canimateTransform attributeName='transform' type='rotate' from='0 16 16' to='360 16 16' dur='1s' repeatCount='indefinite'/%3e%3c/path%3e%3c/g%3e%3c/g%3e%3c/svg%3e");
}

section.lazy-placeholder:after {
    opacity: 0.3;
}@isPublish: true;

.cid-uY5RzcxDCz {
@fullScreen: false;
@paddingTop: 6;
@paddingBottom: 6;
@showTitle: true;
@showSubTitle: false;
@showText: true;
@showButtons: true;
@mediaSize: 60;
@uname__12: "../../app/themes/mobirise4/components/header4/../_images/background1.jpg";
@uname__13: true;
@uname__14: #0f7699;
@bg-value: "../../app/themes/mobirise4/components/header4/../_images/background1.jpg";
@bg-type: "image";
@bg-color-value: #0f7699;
@bg-parallax: true;
@overlay: true;
@overlayColor: #232323;
@overlayOpacity: 0.8;

& when not (@fullScreen) {
  padding-top: (@paddingTop * 15px);
  padding-bottom: (@paddingBottom * 15px);
}
& when (@bg-type = 'color') {
  background-color: @bg-value;
}
& when (@bg-type = 'image') {
  background-image: url(../../../@bg-value);
}
.mbr-figure {
  margin: 0 auto;
  width: 100%;
  display: -webkit-flex;
  justify-content: center;
  -webkit-justify-content: center;
  img {
    height: 100%;
    margin: 0 auto;
  }
}
@media (max-width: 991px) {
  .mbr-figure {
    img {
      width: 100% !important;
    }
  }
}
}

.cid-uYhVgWgyXW {
@fullScreen: false;
@paddingTop: 6;
@paddingBottom: 6;
@showTitle: true;
@showSubTitle: false;
@showText: true;
@showButtons: true;
@uname__12: "../../app/themes/mobirise4/components/header16/../_images/background4.jpg";
@uname__13: true;
@uname__14: #efefef;
@bg-value: #efefef;
@bg-type: "color";
@bg-color-value: #efefef;
@bg-parallax: false;
@overlay: true;
@overlayColor: #232323;
@overlayOpacity: 0.6;

& when not (@fullScreen) {
  padding-top: (@paddingTop * 15px);
  padding-bottom: (@paddingBottom * 15px);
}
& when (@bg-type = 'color') {
  background-color: @bg-value;
}
& when (@bg-type = 'image') {
  background-image: url(../../../@bg-value);
}
P {
  color: #767676;
}
}

#custom-html-2 {
html, body {
  cursor: url("C:\Users\huber\Desktop\Dojo_Logo_cursor.png') 
}
.mein-element {
  cursor: url('C:\Users\huber\Desktop\Dojo_Logo_cursor.png'), auto; /* Eigene Bild-Datei und Standard-Fallback */
} 128 128, auto;



.center {
  margin: 5;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.centered-button {
  text-align: center;
    padding-top:20px;

    
    }

}