/* Main css styling */

body {
    overflow: hidden;
    -webkit-text-size-adjust: none;
}

.page-wrapper {
    overflow: hidden;
}

.class-wide-page {
    position: relative;
}

.page-content {
    min-height: 0 !important;
}

.sf_cols.swiper {
    overflow: hidden;
}

.radio-buttons {
    position: absolute;
    right: 4px;
    top: 28%;
    width: 23px;
    z-index: 100;
}

    .radio-buttons input[type=radio] {
        display: none;
        margin: 10px;
    }

        .radio-buttons input[type=radio] + label {
            background: url("/images/default-source/mainpage/radio-unselected.png");
            width: 12px;
            height: 12px;
            margin-top: 5px;
            cursor: pointer;
            background-size: contain;
            background-repeat: no-repeat;
        }

        .radio-buttons input[type=radio]:checked + label {
            background: url("/images/default-source/mainpage/radio-selected-white.png");
            background-size: contain;
            background-repeat: no-repeat;
        }


a.primary-button {
    /*font-family: GothamBold, Arial, sans-serif;*/
}


/*------------------------------------*/
/* ---- start stage area styles ----- */

.stage {
    position: relative;
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    clear: both;
}

.stage-left {
    position: relative;
    height: 100%;
}

    .stage-left p {
        margin: 0;
        width: 100%;
    }

    .stage-left .headline_1 {
        font-family: GothamBold, Arial, sans-serif;
    }

    .stage-left .headline_2 {
        font-style: normal;
        font-weight: normal;
        padding-top: 8px;
    }

.stage-right .product {
    height: 100%;
    background-size: contain;
}

    .stage-right .product.pull-down {
        background-position: center 100%;
    }

    .stage-right .product.pull-up {
        background-position: center 0;
    }

.stage, .stage-right, .product {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

/*--------------------------------------------------*/
/* Responsive styling */


@media only screen and (orientation : landscape) {

    .stage-left {
        float: left;
        width: 50%;
        top: 50%;
        margin-top: -10%;
        padding-left: 15px;
    }

        .stage-left p {
            color: white;
            line-height: 1em;
        }

        .stage-left .headline_1 {
            white-space: nowrap;
        }
        .isMobile .stage-left .headline_1 {
          letter-spacing: normal;
        }

    .stage-right {
        float: right;
        width: 50%;
        height: 100%;
    }

    a.primary-button {
        margin-top: 5rem;
    }
}

@media only screen and (orientation : portrait) {
   .stage-left {
      float: none;
      width: 100%;
      top: 0;
      margin: 0;
      padding: 5% 10px 0 10px;
   }

      .stage-left p {
         color: #ec7c23;
         line-height: 1.2em;
      }

      .stage-left .headline_1 {
         white-space: normal;
      }

      .isMobile .stage-left .headline_1 {
         letter-spacing: -1px;
      }

   .stage-right {
      float: none;
      width: 100%;
      height: 55%; /* <<-- Set portrait stage height here */
   }

   /* --- end stage area styles --- */

   .class-wide-page .radio-buttons {
      top: 18%;
   }

      .class-wide-page .radio-buttons input[type=radio] + label {
         margin-top: 3px;
      }

   a.primary-button {
      margin-top: 3rem;
   }
}



/* ---------- For iPhone 4 small height viewports  --------- */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 2/3) and (orientation:portrait) {
    /* tweak all portrait left (bottom) stage elements */

    .stage-right {
        height: 55%;
    }

    .stage-left {
        padding: 1em 0 0 5px;
    }

        .stage-left .headline_1 {
            font-size: 1.9rem !important;
        }

        .stage-left .headline_2 {
            font-size: 1.5rem !important;
        }

    .class-wide-page .radio-buttons {
        top: 12%;
    }

        .class-wide-page .radio-buttons input[type=radio] + label {
            margin-top: 0;
        }

    a.primary-button {
        margin-top: 1em;
        font-size: 1.1rem !important;
    }
}


/* ---------- For BB square size viewports  --------- */
@media only screen and (max-device-height: 360px) and (max-device-width: 360px) and (orientation:landscape) {

   .stage-left {
      margin-top: -15%;
   }

    .stage-left .headline_1{
        font-size:16px!important;
    }

     .stage-left .headline_2 {
        font-size: 14px!important;
     }

    .stage-right .product {
        background-size: 110%;
    }

    a.primary-button {
        margin-top: 2rem;
        font-size: 0.8rem !important;
    }
}


/* Larger screen width (when short menu hides) */
@media only screen and (min-width : 768px) {
    .class-wide-page .radio-buttons {
        right: 5px;
    }
}

/* Taller displays */
@media only screen and (min-height : 800px) and (orientation:portrait) {
   .stage-left {
      padding-top: 9%;
   }
}

@media only screen and (min-height : 800px)  {
   .class-wide-page .radio-buttons input[type=radio] + label {
        margin-top: 12px;
    }
}



/*--------------------------------*/
/* Override some framework styles */

.footer-menu ul {
    width: auto;
}

.sf_cols.container {
    margin: 0;
    width: 100%;
    max-width: 100%;
}

.xs-menu.gray {
    background: white;
}

.xs-menu.visible-xs.hidden-print.clearfix {
    display: none !important;
}

    .xs-menu.visible-xs.hidden-print.clearfix.gray {
        display: block !important;
    }