/*
*{
  border:1px solid black; // Bugfixing BJ
}
*/
/* components */
/*
Animations mixin
============================================
The mixins provides you a cross-browser compatible method to set animation values.

Please refer to <http://caniuse.com/css-animation> to see the browser support table of the feature.

######Example:
`.animation([value]);`

`@param: {String} value: All animation values`
*/
/*
Appearance mixin
============================================
The mixins provides you a cross-browser compatible method to set the appearance of the element.

Please refer to <http://caniuse.com/appearance> to see the browser support table of the feature.

######Example:
`.appearance([value]);`

`@param {String} type The type you want to use`
*/
/*
Backface visibility mixin
============================================
The mixins provides you a cross-browser compatible method to set the backface-visibility of the element.

Please refer to <http://caniuse.com/transforms3d> to see the browser support table of the feature.

######Example:
`.backface-visibility([value]);`

`@param {String} visibility The visibility you want to use`
*/
/*
Border-radius mixin
=============================================
The mixins provides you a cross-browser compatible method to set a border-radius.

Please refer to <http://caniuse.com/border-radius> to see the browser support table of the feature.

######Syntax:
`$param {String} radius The radius you want to set`<br/>

######Example:
Same border-radius for all edges: <br/>
`.border-radius([pixel-value]);`<br/>

Different border-radius:<br/>
`.border-radius-multi([pixel-value-leftTop], [pixel-value-rightTop], [pixel-value-rightBottom], [pixel-value-leftBottom]);`<br/>

Resetting border radius:<br/>
`.reset-border-radius();`
*/
/*
Box shadow mixin
==============================================
The mixins provides you a cross-browser compatible method to set a box-shadow.

Please refer to <http://caniuse.com/css-boxshadow> to see the browser support table of the feature.

######Example:
`.box-shadow([h-shadow-value], [v-shadow-value], [blur-amount], [spread-amount], [shadow-color]);`

`@param: {Number} x: Offset to the x axis (Default: 0)`<br/>
`@param: {Number} y: Offset to the y axis (Default: 0)`<br/>
`@param: {Number} blur: Bluring radius (Default: 1px)`<br/>
`@param: {String} color: Color of the shadow (Default: #000)`<br/>
*/
/*
Box-sizing mixin
========================================
The mixins provides you a cross-browser compatible method to set the box-sizing which supports IE starting from
version 8 to the newest one.

Please refer to <http://caniuse.com/css3-boxsizing> to see the browser support table of the feature.

######Example:
`.box-sizing:([value]);`

`@param: {String} box-sizing: Box model, which should be used (Default: border-box)`
*/
/*
Clearfix mixin
========================================

Same as clearfix class from bootstrap

*/
/*
Column count mixin
=============================================
This mixin provides you a cross-browser compatible method to set the column count property.

Please refer to <http://caniuse.com/multicolumn> to see the browser support table of the feature.

######Example:
`.column-count([value]);`

`@param: {Number} count: The amount of columns you want to set (Default: auto)`
*/
/*
Grabbing cursor
==================================
This mixin provides you a cross-browser compatible method to set the cursor grabbing behavior.

######Example:
`.cursorGrab();`<br/>
`.cursorGrabbing();`<br/>

*/
/*
Hypheration mixin
======================================
The mixins provides you a cross-browser compatible method to set the hyphenation.

Please refer to <http://caniuse.com/css-hyphens> to see the browser support table of the feature.

######Example:
`.hyphens([value]);`

`@param: {String} hyphenation: The hyphenation that should be used (Default: auto)`
*/
/*
Gradient mixin
====================================================
The mixins provides you a cross-browser compatible method to set a linear gradient which goes from top to bottom.

Please refer to <http://caniuse.com/css-gradients> to see the browser support table of the feature.

Shopware 5 also provides gradient mixins based on the basic color variables that can be changed in the backend theme configuration tool.
######Basic gradients:
`.primary-gradient();`<br/>
`.secondary-gradient();`<br/>
`.white-gradient();`<br/>

######Linear Gradient Example:
`.linear-gradient([startcolor-value], [endcolor-value]);`

`@param {String} start The start color of the gradient`<br/>
`@param {String} end The end color of the gradient`
*/
/*
normalize mixin
====================================================
The mixins provides you a cross-browser compatible method to normalize typical elements.<br />
e.g. remove spinners of input type number fields.


######Example:
input[type="number"] {
    @import normalize_input([value]);
}
*/
/*
change behavior of input fields spinner e.g. type number
@param {String} $value type of appearance
@default textfield
*/
/*
Opacity
===============================================
The mixins provides you a cross-browser compatible opacity which supports IE starting from version 8 to the
newest one. Safari, Chrome and Firefox are supported in all versions.

Please refer to <http://caniuse.com/css-opacity> to see the browser support table of the feature.

######Example:
`.opacity([value]);`

`@param: {Number} opacity: Value of the opacity, starting from 0 to 1`
*/
/*
Rotate mixin
===============================================
The mixins provides you a cross-browser compatible method to set a transformation which rotates the element. Keep in
mind that you can not mix different transformations.

Please refer to <http://caniuse.com/transforms2d> to see the browser support table of the feature.

######Example:
`.rotate([value]);`

`$param {String} degree The degree value you want to set. Please keep in mind that you need to suffix the unit.`
*/
/*
Scale mixin
===============================
The mixins provides you a cross-browser compatible method to set a transformation which scales the element.
Keep in mind that you can not mix different transformations.

Please refer to <http://caniuse.com/transforms2d> to see the browser support table of the feature.

######Example:
`.scale([value]);`

`$param {String} scale-value The scale value, you want to set`
*/
/*
Tab highlighting mixin
===========================
Sets the color of the highlighting when a link was clicked / tapped.

Please refer to <http://www.browsersupport.net/CSS/-webkit-tap-highlight-color> to see the browser support table of the feature.

######Example:
`.tap-highlight-color([color-value]);`

`$param: {String} color: The color you want to set (Default: rgba(0, 0, 0, 0))`
*/
/*
Touch callout mixin
===========================================
Disables the default callout shown when you touch and hold a touch target.

######Support:
- iOS 2.0<br/>
- Android 4.1<br/>

######Example:
`.touch-callout([value]);`

`@param: {String} type: The type you want to set (Default: none)`
*/
/*
Transform mixin
==============================================
The mixins provides you a cross-browser compatible method to set a transformation.

Please refer to <http://caniuse.com/transforms2d> to see the browser support table of the feature.

######Example:
`.transform([value]);`

`@param: {String} properties: The transformation(s) that should be applied`
*/
/*
Transform origin mixin
======================================
The mixins provides you a cross-browser compatible method to set the transform origin position.

Please refer to <http://caniuse.com/transforms2d> to see the browser support table of the feature.

######Example:
`.transform-origin([x-value],[y-value],[z-value]);`

`$param: x: Sets the origin position on the x axis (Default: 50%)`<br/>
`$param: y: Sets the origin position on the y axis (Default: 50%)`<br/>
`$param: z: Sets the origin position on the z axis (Default: 0)`
*/
/*
Transform style mixin
======================================
The mixins provides you a cross-browser compatible method to set a transformation style.

Please refer to <http://caniuse.com/transforms3d> to see the browser support table of the feature.

######Example:
`.transform-style([value]);`

`$param {String} Style The style you want for your transformation (Default: preserve-3d)`
*/
/*
Transition mixin
=========================================
The mixins provides you a cross-browser compatible method to set a transition.

Please refer to <http://caniuse.com/css-transitions> to see the browser support table of the feature.

######Example:
`@mixin transition([property], [duration-value], [easing]);`

`@param: {String} properties: The properites which should be animated (Default: all)`<br/>
`@param: {String} duration: Duration of the transition including the unit (Default: 0.3s)`<br/>
`@param: {String} easing: The easing which should be used for the transition (Default: ease-out)`
*/
/*
Translate mixin
============================================
The mixins provides you a cross-browser compatible method to set a transition.

Please refer to <http://caniuse.com/css-transitions> to see the browser support table of the feature.

Keep in mind, that 3d translations are needing an perspective, otherwise the translated elements get skewed up.

######Example:
`.translate([x-value],[y-value],[z-value]);`

`$param: {String} rotateX: The rotation on the x-axis`<br/>
`$param: {String} rotateY: The rotation on the y-axis`<br/>
`$param: {String} rotateZ: The rotation on the z-axis`<br/>
*/
/*
User-select mixin
===============================
The mixins provides you a cross-browser compatible method to set a user selection mode.

Please refer to <http://caniuse.com/user-select-none> to see the browser support table of the feature.

######Example:
`.user-select([value]);`

`$param: {String} type: The type you want to set (Default: none)`
*/
.ce-components img {
    width: auto;
    height: auto; }
.ce-components .wfl-tooltip {
    background-color: white;
    position: absolute;
    left: 0;
    top: calc(100% - 30px);
    box-shadow: 0 15px 35px 0 rgba(0, 0, 0, 0.35);
    text-align: left; }
.ce-components .wfl-tooltip::before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: -17px;
    left: 15px;
    border-bottom: 17px solid white;
    border-left: 14px solid transparent;
    border-right: 14px solid transparent; }
.ce-components .wfl-tooltip:not(.active) {
    display: none; }
.ce-components .wfl-tooltip .close {
    background-color: #fafafa;
    height: 40px;
    width: 40px;
    border: 1px solid #e6e6e6;
    text-align: center;
    line-height: 38px;
    opacity: 1; }
.ce-components .wfl-tooltip .close .fa {
    font-size: 1.125rem; }
.ce-components .wfl-tooltip p {
    padding-right: 80px;
    padding-left: 30px; }
.ce-components .wfl-tooltip p:last-of-type {
    margin-bottom: 50px; }
.ce-components [data-wfl-tooltip] {
    color: #71b18e;
    display: table-footer-group;
    height: 20px; }
.ce-components [data-wfl-tooltip] * {
    pointer-events: none;
    cursor: pointer; }

.ce-list {
    padding-top: 50px;
    padding-bottom: 50px; }
.ce-list .list-item {
    background-color: transparent;
    padding: 25px;
    border: 1px solid transparent;
    position: relative;
    /* increase z-indexes of steps backward, the first one need the highest index. */ }
.ce-list .list-item header {
    text-align: left; }
.ce-list .list-item header figure {
    margin: 0;
    position: relative; }
.ce-list .list-item header figure .border {
    width: 90px;
    height: 90px;
    position: absolute;
    text-align: center;
    padding-top: 21px;
    top: 0;
    left: -18px;
    display: inline-block;
    float: left; }
.ce-list .list-item header figure .border img {
    display: inline-block;
    z-index: 3;
    position: relative; }
.ce-list .list-item header figure .border::before {
    content: "";
    display: block;
    width: 50%;
    height: 100%;
    background-color: #f9f9fc;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1; }
.ce-list .list-item header figure .border::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #a1aacb;
    border-radius: 50%;
    z-index: 2;
    width: 100%;
    height: 100%; }
.ce-list .list-item header figure .icon {
    position: absolute;
    top: -20px;
    right: -8px;
    width: 40px;
    height: 40px;
    background-color: #71b18e;
    border: 1px solid white;
    border-radius: 50%;
    color: white;
    line-height: 38px;
    z-index: 3; }
.ce-list .list-item header figcaption {
    display: block;
    background-color: white;
    float: left;
    width: 100%;
    height: 80px;
    margin-top: 10px;
    border: 1px solid #e7e9f2; }
.ce-list .list-item header figcaption h4 {
    color: #a1aacb;
    margin: 0;
    line-height: 78px;
    text-align: center;
    font-weight: 400; }
.ce-list .list-item .content {
    border-right: 1px solid #e7e9f2;
    text-align: center;
    padding-top: 20px;
    padding-right: 20px;
    padding-left: 20px;
    padding-bottom: 30px;
    height: 210px;
    display: table;
    width: 100%; }
.ce-list .list-item .wfl-tooltip {
    width: 600px; }
.ce-list .list-item #tooltip-bonus-3 {
    z-index: 8; }
.ce-list .list-item #tooltip-bonus-2 {
    z-index: 7; }
.ce-list .list-item #tooltip-bonus-1 {
    z-index: 6; }
.ce-list .list-item #tooltip-bonus-0 {
    z-index: 5; }
.ce-list .list-item.circle {
    border-radius: 50%; }

.ce-list-circle {
    padding-top: 50px;
    padding-bottom: 50px; }
.ce-list-circle .list-item {
    background-color: transparent;
    padding: 25px;
    border: 1px solid transparent; }
.ce-list-circle .list-item.circle {
    border-radius: 50%; }

.ce-list-with-image {
    background-color: #f9f9fc; }
.ce-list-with-image img {
    width: 330px; }
.ce-list-with-image .list > :nth-child(odd) .content {
    text-align: left; }
.ce-list-with-image .list > :nth-child(even) .content, .ce-list-with-image .list > :nth-child(even) h3 {
    text-align: right; }
.ce-list-with-image h3 {
    margin-top: 10px; }
.ce-list-with-image .number {
    width: 60px;
    height: 60px;
    background-color: #e7e9f2;
    margin-bottom: 30px;
    position: relative;
    display: inline-block;
    border-radius: 50%;
    line-height: 60px;
    font-size: 1.875rem; }
.ce-list-with-image .number::before, .ce-list-with-image .number::after {
    position: absolute;
    width: 0;
    left: 50%;
    border-left: 1px solid #e7e9f2; }
.ce-list-with-image .number::after {
    top: 100%;
    content: "";
    height: 30px; }
.ce-list-with-image .content {
    position: relative;
    z-index: 2; }
.ce-list-with-image .content .col-sm-4 {
    padding-right: 0; }
.ce-list-with-image .content .col-sm-4 + .col-sm-4 {
    padding-left: 0; }
.ce-list-with-image .content > :last-child {
    padding-right: 15px; }
.ce-list-with-image .row .col-xs-12 {
    position: relative;
    z-index: 1; }
.ce-list-with-image .row + .row .number {
    margin-top: 30px; }
.ce-list-with-image .row + .row .number::before {
    content: "";
    bottom: 100%;
    height: 150px; }
.ce-list-with-image .link {
    margin-top: 35px; }
.ce-list-with-image .link .button {
    width: 320px;
    max-width: 100%; }
.ce-list-with-image .text-box > :last-child {
    margin-bottom: 0; }

.ce-intro {
    background-color: #25305d; }
.ce-intro h1 {
    color: white;
    font-weight: 700;
    margin-top: 55px;
    margin-bottom: 55px; }
.ce-intro .price-img {
    display: block;
    margin: 0 auto; }

.ce-table .carousel-indicators {
    position: relative; }
.ce-table .carousel-indicators li {
    border-color: grey; }
.ce-table .carousel-indicators li.active {
    background-color: grey; }

.ce-text {
    padding-top: 60px;
    padding-bottom: 60px;
    margin-bottom: 0; }
.ce-text h2 {
    margin-bottom: 30px; }

.ce-text-image figure {
    margin: 0; }
.ce-text-image figure img {
    display: inline-block;
    width: 235px;
    border-radius: 50%;
    margin-top: 10px; }
.ce-text-image figcaption {
    display: inline-block;
    width: calc(100% - 250px);
    vertical-align: top; }

.ce-image-quote figure {
    display: inline-block;
    margin-top: 0;
    margin-left: 0;
    margin-right: 0; }
.ce-image-quote figure img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto; }
.ce-image-quote .button {
    width: 100%; }
.ce-image-quote header h3 {
    margin-top: 0; }

/* Max-Width: 543 px */
/* Min-Width: 544 px */
/* Min-Width: 544 px and Max-Width: 767 px */
/* Min-Width: 544 px and Max-Width: 991 px */
/* Min-Width: 544 px and Max-Width: 1199 px */
/* Max-Width: 767 px */
@media screen and (max-width: 767px) {
    .ce-intro > .container {
        padding: 0; }
    .ce-intro .table {
        background-color: #25305d; }
    .ce-intro .table-row {
        padding-bottom: 195px; }
    .ce-intro .container-right {
        height: 270px; }
    .ce-intro .price-info {
        position: absolute;
        bottom: -410px;
        height: 180px;
        width: calc(100% - 30px);
        left: 15px; }
    .ce-intro .price-info img {
        position: absolute;
        left: -1px;
        bottom: -20px;
        height: 120px;
        width: auto; }
    .ce-intro .price-info .text {
        width: 250px;
        display: block;
        margin-left: auto;
        margin-right: auto;
        text-align: center; }

    .ce-list .list-item .wfl-tooltip {
        max-width: 100%; } }
/* Min-Width: 768px */
@media screen and (min-width: 768px) {
    .ce-intro .table-row::before, .ce-intro .table-row::after {
        content: "";
        display: table;
        clear: both; }
    .ce-intro .intro-container {
        float: left;
        height: 400px; }
    .ce-intro .container-left {
        width: 45%; }
    .ce-intro .container-left img {
        max-width: none; }
    .ce-intro .container-right {
        width: 55%; }
    .ce-intro .price-info {
        padding-right: 60px;
        text-align: right;
        width: 125%;
        width: calc(100% + 45px); }
    .ce-intro .price-info .text {
        width: 130px;
        padding-left: 15px; }
    .ce-intro .price-info img {
        float: left;
        height: 106px;
        width: auto; }

    .ce-list .list-item .wfl-tooltip {
        left: 70px; } }
/* Min-Width: 768px and Max-Width: 991px */
@media screen and (min-width: 768px) and (max-width: 991px) {
    .ce-intro .price-info {
        width: 150%;
        width: calc(100% + 150px); } }
/* Min-Width: 768px and Max-Width: 1199px */
/* Max-Width: 991px */
@media screen and (max-width: 991px) {
    .ce-list .list-item .wfl-tooltip::before {
        left: 50%;
        margin-left: -8px; } }
/* Min-Width: 992px */
@media screen and (min-width: 992px) {
    .ce-list .list-item #tooltip-bonus-3 {
        right: 0;
        left: auto; }
    .ce-list .list-item #tooltip-bonus-3::before {
        right: 65px;
        left: auto; } }
/* Min-Width: 992px and Max-Width: 1199px */
@media screen and (min-width: 992px) and (max-width: 1199px) {
    .ce-list .list-item #tooltip-bonus-2 {
        right: 0;
        left: auto; }
    .ce-list .list-item #tooltip-bonus-2::before {
        right: 65px;
        left: auto; } }
/* Max-Width: 1199px */
/* Min-Width: 1200px */

/*# sourceMappingURL=style.css.map */