/* =========================================================
 * Leitz Icon Onepager
 *
 * custom CSS classes:
 *
 *    ltzicon-main-banner : main banner at top of the page
 *    ltzicon-hotspot-container : hotspot container block (5th block)
 *    ltzicon-tabbed-promo : tabbed promo block (6th block);
 * 
 */

/* Main banner at the top of the page */

.ltzicon-main-banner .banner {
    height: 455px;
    z-index: 1;
}

.ltzicon-main-banner .banner.copyblockpos-left .pic {
    top: 0px;
    left: 0px;
    right: auto;
    width: auto;
    position: absolute;
    display:block;
}

.ltzicon-main-banner .banner .info {
    padding-top: 70px;
    background: url("./img/icon.png") 59px 87px no-repeat;
    width: 250px;
    max-width: 90%;
    position: relative;
    left: 0;
    height: auto;
    display: block;
}

.ltzicon-main-banner .info .inner {
    display: block;
    vertical-align: baseline;
    padding-top: 110px;
    height: auto;
}

/* Hotspot container */

.ltzicon-hotspot-container .container {
    background: url(img/bg-hotspot.png) no-repeat right 57px;
}

.ltzicon-hotspot-container.hotspot [class*="col"] {
    display: table-cell;
    vertical-align: bottom;
    float: none;
}

/* Tabbed Promotion overrides */

.ltzicon-tabbed-promo .tab-panel .tab-content {
    width: 310px;
}

.ltzicon-tabbed-promo .tab-panel .tab-content h2 {
    color: #454442;
}

.ltzicon-tabbed-promo .tab-panel .tab-image {
    width: auto;
    margin: 0 -50px;
}

.ltzicon-tabbed-promo ul.tab-nav li a:hover,
.ltzicon-tabbed-promo ul.tab-nav li.active a {
    color: #00804e;
}

.ltzicon-tabbed-promo ul.tab-nav li a span.ico {
    width: 61px;
}

/* =========================================================
 * Leitz Icon Service Center Page
 *
 * custom CSS classes:
 *
 *    srvce-cntr-main-banner : main banner at top of the page
 * 
 */

section.srvce-cntr-main-banner .btn-more {
    margin-bottom: 33px;
}

.srvce-cntr-main-banner .container {
    background: url(./img/icon_people.png) no-repeat right top;
    /*padding-top: 75px;*/
}

.srvce-cntr-main-banner .content {
    background: url(./img/icon.png) no-repeat center 52px;
    padding-top: 95px;
}

.srvce-cntr-main-banner .pic {
    margin-top: 15px;
}

.srvce-cntr-main-banner .info {
    max-width: 740px;
}

.leitz-icon-onepager .main-content {
    z-index: 0;
    position: relative;
}

/* =========================================================
 * Leitz Icon How to Video Page
 *
 * custom CSS classes:
 *
 *    howtovid-main-banner : main banner at top of the page
 * 
 */

.howtovid-main-banner .container {
    background: url(./img/icon_people2.png) no-repeat right top;
}

.howtovid-main-banner .content {
    background: url(./img/icon.png) no-repeat center 67px;
    padding-top: 88px;
}

@media (max-width: 980px) and (min-width: 768px) {
    .ltzicon-hotspot-container .col1.span6 {
        padding-top: 30px;
    }
    /*thsi as remove because of hotspot zone in 'Design--Concepts/icon-neu/'*/
    .ltzicon-hotspot-container.hotspot [class*="col"] {
        /*display: block;
        vertical-align: bottom;
        float: none;*/
    }
    .ltzicon-hotspot-container.hotspot.count-3 .col1.span6 {
        width: 35%;
    }
    .ltzicon-hotspot-container.hotspot.count-3 .span12 {
        width: 40%;
    }
    .ltzicon-hotspot-container.hotspot.count-3 .col3.span6 {
        width: 25%;
    }
    .howtovid-main-banner .content {
        background: url(./img/icon.png) no-repeat center 47px;
    }
    /*.banner,
    .banner .pic,
    .banner .info {
    	height: 380px;
    }*/
    .info-boxes .highlight h3 {
        word-break: normal;
    }
    .ltzicon-main-banner .banner .pic img {
        vertical-align: top;
    }
    .ltzicon-main-banner .banner .info {
        background: url("./img/icon.png") 25px 61px no-repeat;
        width: 241px;
        padding-top: 43px;
        padding-left: 25px;
        padding-right: 25px;
    }
    .ltzicon-main-banner .banner {
        height: auto;
        min-height: 332px;
    }
    .ltzicon-hotspot-container .container {
        background: none;
    }
}

@media (max-width: 767px) {
    .ltzicon-main-banner .banner {
        height: auto;
        z-index: 1;
        min-height: 260px;
    }
    .ltzicon-hotspot-container .container {
        background: none;
    }
    .ltzicon-hotspot-container.hotspot [class*="col"] {
        display: block;
        vertical-align: bottom;
        float: none;
    }
    .ltzicon-main-banner .banner .info {
        background: url("./img/icon.png") 20px 10px no-repeat;
        position: relative;
        top: 0;
        left: 0;
        padding-top: 10px;
    }
    .ltzicon-main-banner .banner .info .inner{
        padding-top: 100px;
    }
    .ltzicon-main-banner .banner .pic, 
    .ltzicon-main-banner .banner.copyblockpos-left .pic,
    .ltzicon-main-banner .banner.copyblockpos-right .pic {
        position: static;
    }
    .howtovid-main-banner .content {
        background: url(./img/icon.png) no-repeat 25% 67px;
        padding-top: 135px;
    }
    .srvce-cntr-main-banner .container {
        background: none;
        /*padding-top: 75px;*/
    }
    .srvce-cntr-main-banner .content {
        background: url(./img/icon.png) no-repeat center 38px;
        padding-top: 109px;
    }
    .banner {
        max-height: 100%;
    }
    .ltzicon-tabbed-promo ul.tab-nav li a span.ico {
        display: table-cell;
    }
}

/***for Iphone 5 landscape**/
@media (max-width: 767px) and (min-width: 543px) {
    .banner {
        max-height: 100%;
    }
}

@media (max-width: 650px) {
    .cs_iframe_header {
        width: 99% !important;
    }
    #cs_iframe_container {
        left: auto !important;
        margin-left: 0 !important;
    }
}