﻿/*
    @media only screen and (max-width: 1240px) {
        div.categorie img { height: 100%;width: auto;}
    } 
    
    @media only screen and (min-width: 1100px) and (max-width: 1236px) {
        div.categorie { outline: solid red 1px;margin: 0 10px 10px 0;width: 32%;height: 180px; }
        div.categorie:nth-child(3n+3) { margin-right: 0;}
        .categorie > div > a {height: 180px; outline: solid blue 2px;}
    }
    
    */
/* Product Tile Sizes */
        @media only screen and (min-width: 480px) {
            .categorie-wrapper:not(.download-categories) div.categorie:nth-child(3n+3) { margin-right: 0;}

        }
        @media only screen and (min-width: 950px) {
            .download-categories div.categorie:nth-child(5n+5) { clear: both; }
        }
        @media only screen and (min-width: 1024px) {
            #cboxContent { max-width: 640px;}
            #cboxLoadedContent, #cboxWrapper, #colorbox { max-width: 650px;}
            #colorbox[style] { left: calc((100% - 650px) / 2) !important;}
        }
         @media only screen and (max-width: 1260px) {
            .welcome-text { width: 100%;max-width: 200px;float: right;}
        } 
        @media only screen and (max-width: 1240px) {
            div.categorie { width: 30%;max-width: 200px;}
        } 
        @media only screen and (max-width: 1240px) and (min-width: 490px) {
           /*    .download-categories div.categorie { width: 200px;}*/
       }

        @media only screen and (max-width: 1150px) {
            div.categorie, a.special-offer {min-height: 20px;}
            div.categorie img { width: 100%;height: auto;}
            .category-title-inner,.category-subtitle { line-height: 1.1em;}
        } 
         @media only screen and (min-width: 1120px) {
            ul.step li { width: 182px; margin-right: 2.45px}
        } 
       @media only screen and (min-width: 1025px) and (max-width: 1100px) {
             div.categorie { margin: 0 10px 10px 0;}
        } 

        @media only screen and (min-width: 800px) and (max-width: 900px) {
             div.categorie { margin: 0 12px 12px 0;}
        } 
        @media only screen and (min-width: 400px) and (max-width: 570px) {
             div.categorie { margin: 0 12px 12px 0;}
        } 
        @media only screen and (max-width: 480px) {
            div.categorie:nth-child(2n+2) { margin-right: 0;}
             div.categorie { width: 45%;}
             input[type="button"].btn.submit { margin-bottom: 2px;display: block;}
             input[type="submit"].mobile-action-fullwidth { width: 100% !important;margin: 2px;display: block;}
             .basketsave input[type="submit"], .basketsave input[type="text"] { width: 100% !important;margin: 2px 0 0 0;display: block;box-sizing: border-box;height: 30px !important;}
             input.txtfield, textarea.txtfield, select.txtfield { width: 200px;}
             input[type=submit].large.full-width, input[type=button].large.full-width { width: 100% !important;margin-bottom: 2px;}
             table.list th.fix01 {width: auto;max-width: 20px;white-space: pre-wrap;word-wrap: break-word;}
             table.list td.artnr { white-space: pre-wrap;font-size: 0.9em;line-height: 1.25em;}
             table.list td.artnr a { float: left;}
             table.list th.netto, table.list td.netto,
             tr.footable-row-detail { font-size: 0.9em;line-height: 1.1em;}
             thead th { font-size: 0.88em;line-height: 1em;}
        } 
@media only screen and (max-width: 1260px) {
    .breadcrumbsection .container { padding-left: 20px;}
    .slick-dots { padding-left: 20px;left: inherit;box-sizing: border-box;max-width: 100%;}
}
@media only screen and (max-width: 1300px) {
    /* Footer */
    #footer .glomar-address { padding-left: 0;}
    .footer-info.pull-right{ padding-right: 10px;}
  
}

@media only screen and (max-width: 1120px) {
    #content {
        width: calc(100% - 260px);
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
}

@media only screen and (max-width: 1244px) {
    #left + #content {
        width: calc(100% - 300px - 230px);
    }
}

@media only screen and (min-width: 1025px) {
    #left[style] { display: block !important;}
    #wrapper.cms #left {display: none !important}
}
/*
@media only screen and (max-width: 1024px) and (min-width: 801px) {
   #welcome { right: 0;top: 138px;}
   .welcome-text{ padding-right: 10px;}
} */
@media only screen and (max-width: 1024px) and (min-width: 320px) {
   #welcome { right: 60px;top: 14px !important;}
   .welcome-text{ padding-right: 10px;}
}
@media only screen and (max-width: 1024px) {
    html.home #welcome {right: 0;}
}
@media only screen and (max-width: 360px) {
   #welcome { top: 0 !important; right: 0;}
   /*.welcome-text{ float: left;}*/
   

}
@media only screen and (max-width: 1024px) {
    .tablet-visible { display: block;}
    #header .inner { padding-top: 0;}
    #hnav { width: 100%;float: left;}


    /* Tiles Home */
    .tile-title { font-size: 1.6em;}
    .tile { height: 143px;}
    
    
    .toggle-hnav-button { top: 14px;right: 10px;position: absolute;cursor: pointer;}
    
    /*
    #header .inner.navsection.breadcrumbsection { background: #f1f1f1;} */
    /* Left Navigation */
    #left {
        display: none;
        position: absolute;
        top: 70px;
        right: 0;
        background-color: #fff;
        margin-right: 0;
        width: 70%;
        min-width: 290px;
        z-index: 999;
        -moz-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75);
        -webkit-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75);
        box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75);
        -moz-border-radius: 10px 0 0 10px;
        -webkit-border-radius: 10px 0 0 10px;
        border-radius: 10px 0 0 10px;
        padding: 10px;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        z-index: 999999;
    }
    #left.open {}
    .toggle-hnav-button.active { color: #E95F13;}
    #snav { width: 100%;-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
    #snav li a { padding-right: 5px;}
    #snav li a.active, #snav li a.active a:link, #snav li a.active a:visited { color: black;font-weight: bold;}
    #snav li a, #snav li a:link, #snav li a:visited { border-bottom: solid #E95F13 1px;}
    #snav > li:last-child > a { border-bottom: none !important;border-radius: 0 0 0 10px;}
    #snav > li:first-child > a { border-radius: 10px 0 0 0;}
    #snav > li a.arrow:before { left: 6px;color: #000;}
    #snav li a.active a:hover, #snav li a.active a:hover, #snav li a:hover { background-color: #444;color: #fff;}
    #snav > li a.arrow:hover:before { color: #fff;}

    /* Content-Sections */
    #left + #content {
        width: calc(100% - 300px);
    }
    
}
@media only screen and (max-width: 1024px) and (min-width: 769px) {
     #hnav > li:first-child { text-align: left;width: 70px;}
     .search-box { right: inherit;bottom: inherit;top: 22px;left: 0;width: 715px;z-index: 99999;}
     #searchForm { width: 100%;}
     .box input.searchfield { float: left;width: 100%;}
    





}
@media only screen and (min-width: 769px) {
    #hnav li.mainnav-item.language a:before { top: 4px;}

}
@media only screen and (max-width: 800px) {
    #content, #left + #content { width: 100%;margin-bottom: 20px;padding-right: 0;}
    #right { width: 100%;}
    .promotion-item { width: 50%;padding-left: 10px;padding-right: 10px;-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
    .promotion-item + .promotion-item { border-top: none;padding-top: 0;border-left: solid silver 2px;}
    div.productimage .rounded-wrapper { min-height: inherit;}
    div.aktion { margin-top: 20px;}
    div.maincategorie { margin-bottom: 0;}

}
@media only screen and (max-width: 768px) {
    .mobile-visible { display: block;}
    .container { padding: 0 10px;}
    /* Header */
    .logo-container { padding-top: 20px;}
    /*#hnav { float: right;width: 70%;
            -moz-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75); -webkit-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75); box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75);

    }
    #hnav > li { display: block;width: 100%;text-align: left;float: left;padding: 0;border-bottom: solid 1px silver;}
    #hnav li.mainnav-item a:before { position: relative;display: inline-block;margin-right: 10px;left: inherit;top: inherit;}
    #hnav li.mainnav-item.basket a { position: relative;display: inline-block;float: left;text-align: left;}
    #hnav li.mainnav-item a, #hnav li.mainnav-item li a.active, #hnav li.mainnav-item.language li a { padding: 10px;display: block;-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
    ul#language { position: relative;top: inherit;height: auto;}
    li.mainnav-item.language { height: auto;width: 100%;float: left;}
    ul#language li { display: inline-block;width: auto; float: left;border-right: solid silver 1px;height: 100%;}
    #hnav li.mainnav-item.language a.active:before { color: #d2691e;}
    #hnav li.mainnav-item.language a:before { content: "\f0ac";}
        */
    #hnav { text-align: center;margin-bottom: 15px;}
    #hnav li { width: auto;}
    #hnav > li {width: 23.9%;margin-left: 1%;float: left;display: inline-block; border: none;-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;padding: 0;}
    #hnav > li:first-child { margin-left: 0;}
    #hnav > li > a { display: block;float: left;font-size: 0.8em; }
    #hnav li.mainnav-item a:before { font-size: 2.6em;}
    li.mainnav-item.language { height: 30px;}
    ul#language { top: 0;width: 100%;z-index: 9999;}
    ul#language li.active-li { padding: 0;width: 100%;}
    #hnav li.mainnav-item.language a.active:before{ font-size: 1.9em;}

    #hnav > li > a, #hnav > li > a:link, #hnav > li > a:visited {
        visibility: hidden;
        color: transparent;
        display: block;
        width: 100%;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        line-height: 0;
    }
    .ie #hnav > li > a, .ie #hnav > li > a:link, .ie #hnav > li > a:visited { visibility: visible !important;font-size: 0.5em;}
    .ie #hnav > li.search.mainnav-item a::before { font-size: 0.8em;}
    .ie #hnav ul#language li.active-li a::before { font-size: 0.7em;}
    .ie #hnav > li.mainnav-item.contact a::before { font-size: 0.8em;}
    .ie #hnav > li.mainnav-item.myglomar a::before { font-size: 0.8em;}
    .ie #hnav > li.mainnav-item.e-shop a::before { font-size: 0.8em;}

        #hnav li a:before, #hnav li a:before, #hnav li a:before, #hnav li.mainnav-item a:before {
            visibility: visible;
            color: black;
            left: 0;
            top: 0;
            position: absolute;
            display: block;
            width: 100%;
            height: 100%;
            background: #444;
            padding-top: 14px;
            box-sizing: border-box;
            color: #fff;
            -moz-border-radius:4px;
            -webkit-border-radius: 4px;
            border-radius:4px;
            padding-top: 14px;
        }
       #hnav li a:before, #hnav li a:before, #hnav li a:before, #hnav li.mainnav-item a:before { padding-top: 16px;}
       #hnav li.search a:before, #hnav li.search a:before, #hnav li.search a:before, #hnav li.mainnav-item.search a:before { padding-top: 15px;}
        #searchSuggestionContainer {
            width: calc(100% - 43px);
        }
    #hnav #searchSuggestionContainer li.main a:before, #hnav #searchSuggestionContainer li a:before, #hnav #searchSuggestionContainer li a:before, #hnav #searchSuggestionContainer li.mainnav-item a:before {
        background: none;
        position: inherit;
        height: inherit;
        width: inherit;
        padding-top: inherit;
        color: #000;
        box-sizing: content-box;
    }
    #hnav #searchSuggestionContainer li a { padding: 5px 0;}
    #hnav #searchSuggestionContainer li a:hover:before { background: none;border: none !important;}
    #hnav li.mainnav-item.basket a { visibility: visible;background-color: #444;background-image: url("../images/icon-cart-fff.png");background-position: center 4px;-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; }
    .mainnav-item.search { position: inherit;}
   /* .search-box {width: 100%;  right: inherit;bottom: inherit;left: 0;top: 107px;background-color: #fff;padding: 10px 20px;-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;z-index: 9999;} */
    /*.search-box #searchForm { width: 100%;}
    .box input.searchfield { width: calc(100% - 13px);float: left;}*/
    /*#hnav li.mainnav-item.search a.active:before { -moz-border-radius: 4px 4px 0 0; -webkit-border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0;background: #333;}*/
    #hnav ul#language li a, #hnav ul#language li a:link, #hnav ul#language li a:visited { visibility: visible;color: #000;}
    ul#language { height: 100%;overflow: hidden;}
    #hnav ul#language li.active-li a { padding-top: 42px;}
    #hnav ul#language li.active-li a:before { height: 30px;margin-top: 0;padding-top: 6px;}
    .ie #hnav ul#language li.active-li a:before { font-size: 0.3em;}
    .basket-description { display: none;}
    .mainnav-item.basket .basket-items:not(:empty) { 
        background-color: orange;
        color: black;
        padding: 5px 4px 0;
        top: -5px;
        position: absolute;
        right: 0;
        display: block;
        float: right;
        height: 9px;
        font-weight: bold;
        border-top: solid orange 2px;
    }
    #hnav li.mainnav-item.basket a .basket-items:before { content: none;}
    #hnav li.mainnav-item.basket a .basket-items:after { content: none;}
    /* Tiles Home */
    .tile { width: 48%;height: 137px;}
    .tile:nth-child(3n+3) { margin-right: 4%;}
    .tile:nth-child(2n+2) { margin-right: 0;}
    /* Footer */
    #footer .location { float: right;position: absolute;width: 50%;text-align: right;padding-right: 20px;box-sizing: border-box; }
    .footer-info.pull-right {     float: left !important;margin-top: 20px;border-top: solid silver 1px;padding-top: 20px;width: 50%;clear: both;}
    #footer .glomar-address { width: 50%;}

    
    #jumbotron, #slideshow-outer, #glomar-slider, #jumbotron .slick-slide, #jumbotron .slide-image { height: 150px;}



    
}

@media only screen and (min-width: 800px) and (max-width: 920px) {
    ul.step li { width: 49%;margin: 0.3%;-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;height: 30px;}
}
@media only screen and (max-width: 640px) {
    ul.step li { width: 49%;margin: 0.3%;-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;height: 30px;text-align: left;}
}


@media only screen and (max-width : 479px) {
    #footer .location {
        position: relative;
        float: left;text-align: left;width: 100%;
    }
    #footer .glomar-address, .footer-info.pull-right { width: 100%;}
    .tile { width: 100%;}
    h1 { font-size: 1.5em;}
    

    .half-width, .left.half-width, .right.half-width  { width: 100%;padding-right: 0;}
    .half-width.image-outer {margin-bottom: 40px;}
    #hnav ul#language li a, #hnav ul#language li a:link, #hnav ul#language li a:visited {}

}

@media only screen and (max-width: 400px) {

    .promotion-item { width: 100%; }
    .promotion-item + .promotion-item { border-left: none;border-top: solid silver 2px;padding-top: 10px;}
    div.productimage .rounded-wrapper { min-height: inherit;}
    

}
@media only screen and (max-width: 380px) {
    .category-title-inner, .category-subtitle {
        font-size: 0.8em;word-wrap: break-word;word-break: break-all;
    }
    #content .category-subtitle ul li { background-position: top 2px left;background: url(../images/list_item.gif) 0 5px no-repeat;}
    div.categorie a + .category-title a {min-height: 28px;max-height: 28px;}
    span.category-title-inner { height: 28px;}
}
@media only screen and (max-width: 520px) and (min-width: 481px) {
    .category-title-inner, .category-subtitle {
        font-size: 0.8em;word-wrap: break-word;word-break: break-all;
    }
    #content .category-subtitle ul li { background-position: top 2px left;background: url(../images/list_item.gif) 0 5px no-repeat;}
    div.categorie a + .category-title a {min-height: 28px;max-height: 28px;}
    span.category-title-inner { height: 28px;}
}
@media only screen and (max-width: 850px) and (min-width: 801px) {
    .category-title-inner, .category-subtitle {
        font-size: 0.85em;word-wrap: break-word;word-break: break-all;
    }
    #content .category-subtitle ul li { background-position: top 2px left;background: url(../images/list_item.gif) 0 5px no-repeat;}
    div.categorie a + .category-title a {min-height: 28px;max-height: 28px;}
    span.category-title-inner { height: 28px;}

}



/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}


