/* ==========================================================
   WACHTEL COLUMBUS — dedicated hero
   Based on WACHTEL DE geometry
   ========================================================== */

* {
    box-sizing:border-box;
}

html,
body {
    margin:0;
    padding:0;
}

body {
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size:14px;
    line-height:1.42857;
    color:#333;
    background:#fff;
}

img {
    max-width:100%;
    height:auto;
}

/* ----------------------------------------------------------
   HERO WRAPPER
   ---------------------------------------------------------- */

.columbus-v1 .con-header {
    background-color:#F0F0F0;
    background-image:url("/images/zdjecia/piece/layout/wachtel-product-hero-neutral.jpg");
    background-size:cover;
    background-position:center;
    min-height:450px;
}

/* ----------------------------------------------------------
   HERO INNER CONTAINER
   ---------------------------------------------------------- */

.columbus-v1 .con-header-inner {
    position:relative;
    min-height:450px;
    margin-left:auto;
    margin-right:auto;
    padding-left:15px;
    padding-right:15px;
}

/* ----------------------------------------------------------
   PRODUCT
   ---------------------------------------------------------- */

.columbus-v1 .con-prod-img img {
    display:block;
    margin:auto;
    width:80%;
    padding:30px 0;
}

/* ----------------------------------------------------------
   BLUE PANEL
   ---------------------------------------------------------- */

.columbus-v1 .con-prod-teaserbox {
    background-color:rgba(0,117,173,.9);
    padding:30px 30px 10px;
}

.columbus-v1 .con-prod-teaserbox h2,
.columbus-v1 .con-prod-teaserbox p {
    color:#fff;
    font-family:"Raleway","Helvetica Neue",Helvetica,Arial,sans-serif;
}

.columbus-v1 .con-prod-teaserbox h2 {
    margin:0 0 15px;
    padding:0;
    font-size:34px;
    font-weight:600;
    line-height:1.1;
}

.columbus-v1 .con-prod-teaserbox p {
    margin-top:0;
    margin-bottom:60px;
    font-weight:400;
}

/* ----------------------------------------------------------
   CTA
   ---------------------------------------------------------- */

.columbus-v1 .con-prod-teaserbox .btn,
.columbus-v1 .con-prod-teaserbox .btn--a,
.columbus-v1 .con-prod-teaserbox .btn--b {
    display:inline-block;
    margin-bottom:0;
    text-align:center;
    vertical-align:middle;
    cursor:pointer;
    border:1px solid transparent;
    white-space:nowrap;
    padding:6px 12px;
    font-size:14px;
    line-height:1.42;
    border-radius:4px;
    text-decoration:none;
}

.columbus-v1 .con-prod-teaserbox .btn--a,
.columbus-v1 .con-prod-teaserbox .btn--b {
    position:relative;
    padding-left:43px;
    margin-right:15px;
    margin-bottom:20px;
    font-weight:600;
}

.columbus-v1 .con-prod-teaserbox .btn--a {
    border-color:#fff;
    color:#fff;
    background:transparent;
}

.columbus-v1 .con-prod-teaserbox .btn--b {
    border-color:#fff;
    color:#2187b8;
    background:#fff;
}

.columbus-v1 .con-prod-teaserbox .btn--a:before,
.columbus-v1 .con-prod-teaserbox .btn--b:before {
    content:"›";
    position:absolute;
    top:50%;
    left:29px;
    transform:translateY(-52%);
    font-family:Arial,sans-serif;
    font-size:18px;
    transition:left .2s ease-in-out;
}

.columbus-v1 .con-prod-teaserbox .btn--a:hover:before,
.columbus-v1 .con-prod-teaserbox .btn--b:hover:before {
    left:32px;
}

/* ----------------------------------------------------------
   TABLET
   ---------------------------------------------------------- */

@media (min-width:768px) {

    .columbus-v1 .con-header {
        margin-bottom:120px;
    }

    .columbus-v1 .con-header-inner {
        width:750px;
    }

    .columbus-v1 .con-prod-img {
        position:absolute;
        right:0;
        bottom:-120px;
        width:440px;
        height:513px;
    }

    .columbus-v1 .con-prod-img img {
        width:100%;
        padding:0;
    }

    .columbus-v1 .con-prod-teaserbox {
        position:absolute;
        bottom:0;
        width:41.66667%;
    }

    .columbus-v1 .con-prod-teaserbox .btn--a,
    .columbus-v1 .con-prod-teaserbox .btn--b {
        display:block;
        margin-right:0;
    }
}

/* ----------------------------------------------------------
   DESKTOP
   ---------------------------------------------------------- */

@media (min-width:992px) {

    .columbus-v1 .con-header {
        margin-bottom:183px;
    }

    .columbus-v1 .con-header-inner {
        width:970px;
    }

    .columbus-v1 .con-prod-img {
        right:0;
        bottom:-183px;
        width:500px;
        height:583px;
    }

    .columbus-v1 .con-prod-teaserbox {
        width:50%;
    }

    .columbus-v1 .con-prod-teaserbox p {
        font-size:24px;
    }

    .columbus-v1 .con-prod-teaserbox .btn--a,
    .columbus-v1 .con-prod-teaserbox .btn--b {
        display:inline-block;
        margin-right:15px;
    }
}

/* ----------------------------------------------------------
   LARGE DESKTOP
   COLUMBUS FINAL — WACHTEL DE geometry
   ---------------------------------------------------------- */

@media (min-width:1200px) {

    .columbus-v1 .con-header-inner {
        width:1170px;
    }

    .columbus-v1 .con-prod-teaserbox {
        width:50%;
    }

    .columbus-v1 .con-prod-img {
        width:500px;
        height:583px;
        right:0;
        bottom:-183px;
    }

    .columbus-v1 .con-prod-img img {
        width:100%;
        height:auto;
        max-height:none;
        margin:0;
        padding:0;
        display:block;
        object-fit:initial;
    }
}

/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width:767px) {

    .columbus-v1 .con-header {
        min-height:0;
        margin-bottom:30px;
    }

    .columbus-v1 .con-header-inner {
        min-height:0;
        width:100%;
        padding:20px 15px;
    }

    .columbus-v1 .con-prod-img {
        position:relative;
        width:100%;
        max-width:360px;
        height:auto;
        margin:0 auto 20px;
    }

    .columbus-v1 .con-prod-img img {
        width:100%;
        height:auto;
        padding:0;
    }

    .columbus-v1 .con-prod-teaserbox {
        position:relative;
        width:100%;
    }

    .columbus-v1 .con-prod-teaserbox h2 {
        font-size:30px;
    }

    .columbus-v1 .con-prod-teaserbox p {
        margin-bottom:30px;
        font-size:18px;
    }

    .columbus-v1 .con-prod-teaserbox .btn--a,
    .columbus-v1 .con-prod-teaserbox .btn--b {
        display:block;
        margin-right:0;
    }
}



/* ==========================================================
   COLUMBUS DE EXACT GEOMETRY V4D
   geometry based on current wachtel.de product layout
   ========================================================== */

.con-header {
    min-height:450px !important;

    background-color:#f0f0f0;

    background-size:cover;
    background-position:center;

    margin-bottom:183px !important;
}

.con-header-inner {
    position:relative;

    width:1170px !important;
    max-width:calc(100vw - 30px);

    min-height:450px !important;

    margin-left:auto !important;
    margin-right:auto !important;

    padding-left:15px;
    padding-right:15px;
}


/* blue teaser panel */

.con-prod-teaserbox {
    position:absolute !important;

    left:15px !important;
    bottom:0 !important;

    width:50% !important;

    padding:
        30px
        30px
        10px !important;

    background:
        rgba(0,117,173,.90) !important;
}

.con-prod-teaserbox h2 {
    margin:
        0
        0
        16px !important;
}

.con-prod-teaserbox p {
    margin-bottom:60px !important;

    font-size:24px !important;
}


/* product */

.con-prod-img {
    position:absolute !important;

    right:0 !important;
    bottom:-183px !important;

    width:500px !important;
    height:583px !important;
}

.con-prod-img img {
    display:block !important;

    width:100% !important;
    height:auto !important;

    max-width:none !important;
    max-height:none !important;

    margin:0 !important;
    padding:0 !important;

    object-fit:initial !important;
}


/* medium desktop */

@media (min-width:768px) and (max-width:991px) {

    .con-header {
        margin-bottom:120px !important;
    }

    .con-header-inner {
        width:750px !important;
    }

    .con-prod-teaserbox {
        width:41.666667% !important;
    }

    .con-prod-img {
        right:0 !important;
        bottom:-120px !important;

        width:440px !important;
        height:513px !important;
    }

    .con-prod-teaserbox p {
        font-size:inherit !important;
    }
}


/* mobile */

@media (max-width:767px) {

    .con-header {
        min-height:0 !important;
        margin-bottom:0 !important;
    }

    .con-header-inner {
        width:100% !important;
        max-width:100%;

        min-height:0 !important;
    }

    .con-prod-img {
        position:relative !important;

        right:auto !important;
        bottom:auto !important;

        width:100% !important;
        height:auto !important;
    }

    .con-prod-img img {
        width:80% !important;

        margin:auto !important;
        padding:30px 0 !important;
    }

    .con-prod-teaserbox {
        position:relative !important;

        left:auto !important;
        bottom:auto !important;

        width:100% !important;
    }
}

/* ==========================================================
   COLUMBUS TRUE FULLBLEED V4E
   match wachtel.de hero width
   ========================================================== */

.con-header {
    position:relative !important;

    width:100vw !important;
    max-width:none !important;

    left:50% !important;
    right:50% !important;

    margin-left:-50vw !important;
    margin-right:-50vw !important;
}

/* inner geometry remains DE-like */

.con-header-inner {
    width:1170px !important;
    max-width:calc(100vw - 30px) !important;

    margin-left:auto !important;
    margin-right:auto !important;
}

@media (min-width:992px) and (max-width:1199px) {

    .con-header-inner {
        width:970px !important;
    }
}

@media (min-width:768px) and (max-width:991px) {

    .con-header-inner {
        width:750px !important;
    }
}

@media (max-width:767px) {

    .con-header {
        width:100% !important;

        left:auto !important;
        right:auto !important;

        margin-left:0 !important;
        margin-right:0 !important;
    }
}