.wrapper { position: relative; }

a, a:hover, a:active, a:focus {
    outline: none;
}

.tx-produkte .header-image { max-height: 600px; overflow: hidden; }

#produkte h1 { text-align: center; font-family: "KievitWeb W07 Bold",Helvetica,Arial,sans-serif; }

.darkblue { color: rgba(23, 41, 131, 1); }
.tx-produkte { position: relative; overflow-x: hidden; }
.tx-produkte .shoe-selection { text-align: center; font-size: 16px; }
.tx-produkte .shoe-selection img { max-height: 20px; }
.tx-produkte .bg-struktur .col-xs-3 {width: 50%;}

.bg-struktur {
    background-image: url('../Img/bg-struktur.png');
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+0,0+100;White+to+Transparent */
    background-image: url('../Img/bg-struktur.png'), -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
    background-image: url('../Img/bg-struktur.png'), -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background-image: url('../Img/bg-struktur.png'), linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
}

#safety-shoes .btn-primary {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f29400+0,e5322d+100 */
    background: #f29400; /* Old browsers */
    background: -moz-linear-gradient(top,  #f29400 0%, #e5322d 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #f29400 0%,#e5322d 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #f29400 0%,#e5322d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f29400', endColorstr='#e5322d',GradientType=0 ); /* IE6-9 */
}

#professional-shoes .btn-primary {
    color:#fff;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#009ee0+0,172983+100 */
    background: #009ee0; /* Old browsers */
    background: -moz-linear-gradient(top,  #009ee0 0%, #172983 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #009ee0 0%,#172983 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #009ee0 0%,#172983 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#009ee0', endColorstr='#172983',GradientType=0 ); /* IE6-9 */
}

#shoes-for-service-area .btn-primary {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#a32f67+0,4a1029+100 */
    background: #a32f67; /* Old browsers */
    background: -moz-linear-gradient(top,  #a32f67 0%, #4a1029 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #a32f67 0%,#4a1029 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #a32f67 0%,#4a1029 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a32f67', endColorstr='#4a1029',GradientType=0 ); /* IE6-9 */
}

#shoes-for-operating-room .btn-primary {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#41a62a+0,01652f+100 */
    background: #41a62a; /* Old browsers */
    background: -moz-linear-gradient(top,  #41a62a 0%, #01652f 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #41a62a 0%,#01652f 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #41a62a 0%,#01652f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#41a62a', endColorstr='#01652f',GradientType=0 ); /* IE6-9 */
}

.gradient-grey {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#d8d8d8+0,a4a4a4+100 */
    background: #d8d8d8; /* Old browsers */
    background: -moz-linear-gradient(top,  #d8d8d8 0%, #a4a4a4 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #d8d8d8 0%,#a4a4a4 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #d8d8d8 0%,#a4a4a4 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d8d8d8', endColorstr='#a4a4a4',GradientType=0 ); /* IE6-9 */
}

/* --- BUTTONS --- */

.button-size { margin-bottom: 4px; }
.button-size.is-checked { background-color: #009ce0; border-color: #172983; }

#btnSize:after {
    display: inline-block;
    font-family: FontAwesome;
    padding-left: 10px;
    vertical-align: middle;
    content: "";
}
#btnSize.opened:after {
    content: "";
}

/* --- GRID --- */

#product-count { margin-top: 20px; }

.grid { padding-top: 50px; padding-bottom: 50px; }

.grid-item {
    height: 200px;
    overflow: hidden;
    margin-bottom: 50px;
}

.grid-item-opened {
    height: auto;
    z-index: 9;
}

.grid-item-content { height: inherit; }

.thumbnail {
    border-width: 2px;
    border-radius: 0;
    height: inherit;
    cursor: pointer;
}

.thumbnail .helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.thumbnail .image-wrap {
    display: inline-block;
    max-width: 100%;
    position: relative;
}

.thumbnail .shadow {
    display: block;
}

.thumbnail a > img, .thumbnail img {
    margin-right: auto;
    margin-left: auto;
}

.thumbnail a > img, .thumbnail img {
    display: inline-block;
    max-width: 100%;
    height: auto;
}

.thumbnail .image {
    height: 200px; /* equals max image height */
    width: 100%;
    white-space: nowrap;
    text-align: center;
}

.thumbnail .caption { text-align: center; }
.thumbnail .caption .icons { text-align: left; }

.thumbnail .caption h3 { margin-top: 0; }

.thumbnail img {
    vertical-align: middle;
    max-height: 200px;
    max-width: 200px;
}

.thumbnail .shoe {
    width: auto;
    max-height: 140px;
}

.thumbnail .icons-wrapper img, .search-results .icons-wrapper img {
    object-fit: contain;
    max-height: 100px;
    margin-bottom: 10px;
}

.thumbnail .icons-wrapper .icons img, .search-results .icons-wrapper .icons img {
    padding-left: 5px;
    padding-right: 5px;
    max-height: 30px;
    max-width: 50%;
}

.grid-item-opened .thumbnail .shoe {
    /*
    animation: shimmy 2s 1;
    transform: translateY(-20px);
    */
    -webkit-animation-name: example; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 2s; /* Chrome, Safari, Opera */
    -webkit-animation-iteration-count: 1; /* Chrome, Safari, Opera */
    -webkit-animation-fill-mode: forwards;
    animation-name: example;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    position: relative;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes example {
    0%   { left:0px; top:0px; }
    100% { left:0px; top:-20px; }
}

/* Standard syntax */
@keyframes example {
    0%   { left:0px; top:0px; }
    100% { left:0px; top:-20px; }
}

@keyframes shimmy {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(0, -10px);
    }
}

.professional-shoes .thumbnail, .green .thumbnail, .shoes-for-service-area .thumbnail, .safety-shoes .thumbnail, .shoes-for-operating-room .thumbnail { border-color: transparent; }

.professional-shoes.grid-item-opened .thumbnail, .professional-shoes .thumbnail:hover { border-color: #009ee0; }
.shoes-for-operating-room.grid-item-opened .thumbnail, .shoes-for-operating-room .thumbnail:hover { border-color: #41a62a; }
.shoes-for-service-area.grid-item-opened .thumbnail, .shoes-for-service-area .thumbnail:hover { border-color: #a32f67; }
.safety-shoes.grid-item-opened .thumbnail, .safety-shoes .thumbnail:hover { border-color: #f29400; }

.professional-shoes h3 { color: #009ee0; }
.safety-shoes h3 { color: #f29400; }
.shoes-for-service-area h3 { color: #a32f67; }
.shoes-for-operating-room h3 { color: #41a62a; }

.button-group { display: inline-block; }

.filters { padding: 10px 0; }
.filters .button:before {
    font-family: FontAwesome;
    content: "\f096";
    display: inline-block;
    padding-right: 10px;
    vertical-align: middle;
}
.filters .button.is-checked:before { content: "\f046"; }
.filters .button { padding-right: 20px; cursor: pointer; line-height: 30px; }
#btnSize { padding-left: 20px; padding-right: 0; }

.quicksearch { box-sizing: border-box; height: 28px; }
.fa-circle.black { color: #000000; }
.fa-circle.white { color: #ffffff; }


#to-top, #back-to-products { width: 100px; position: fixed; bottom: 0; left: 50%; margin-left: -50px; text-align: center; font-size: 24px; color: #ffffff; cursor: pointer; z-index: 9; }
#back-to-products { width: 150px; font-size: 20px; margin-left: -75px; }
#back-to-products a:link, #back-to-products a:visited, #back-to-products a:hover, #back-to-products a:active { color: #ffffff; text-decoration: none; height: 35px; line-height: 35px; }

/* --- NAVTABS --- */

.nav-tabs { border: 0; }
.nav-tabs > li { margin: 0; padding: 0; }

.nav-tabs > li > a {
    font-size: 20px;
    font-family: "KievitWeb W07 Bold",Helvetica,Arial,sans-serif;
    color: #ffffff;
    border: 0;
    border-radius: 0;
}

.nav-tabs > li > a:focus, .nav-tabs > li > a:hover {
    background-color: inherit;
    color: #ffffff;
}

.nav-tabs > .active > a, .nav-tabs > .active > a:focus, .nav-tabs > .active > a:hover {
    border: 0;
    text-decoration: none;
}

.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
    background-color: inherit;
    color: #ffffff;
    border: 0;
    cursor: pointer;
}

.tab-content img {
    padding: 5px;
    margin: 10px 0 0;
}

.nav-tabs > li > a:after {
    font-family: FontAwesome;
    display: inline-block;
    padding-left: 10px;
    vertical-align: top;
}

.nav-tabs > li.safety-shoes > a:after, .nav-tabs > li.professional-shoes > a:after, .nav-tabs > li.shoes-for-operating-room > a:after {
    content: "\f107";
}

.nav-tabs > li.safety-shoes.active > a:after, .nav-tabs > li.professional-shoes.active > a:after, .nav-tabs > li.shoes-for-operating-room.active > a:after {
    content: "\f106";
}

.shoe-images img {

}

.group-image { cursor: pointer; }

.norms > div { padding: 0 20px 10px; }
.norms img { box-shadow: none; width: auto; max-width: 60px; }
.norms img:hover { cursor: pointer; box-shadow: 0 0 10px #ccc; }
.norms img.is-checked {
    -webkit-box-shadow: inset 10px 10px 0px 0px rgba(255,255,255,1), inset -10px -10px 0px 0px rgba(255,255,255,1);
    -moz-box-shadow: inset 10px 10px 0px 0px rgba(255,255,255,1), inset -10px -10px 0px 0px rgba(255,255,255,1);
    box-shadow: inset 10px 10px 0px 0px rgba(255,255,255,1), inset -10px -10px 0px 0px rgba(255,255,255,1);
}



/* --- DETAILS --- */

.tx-produkte .header-image .image-wrap {
    max-width: 800px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    margin-left: auto;
    margin-right: auto;
    height: 100%;
    text-align: center;
}

.tx-produkte .header-image .element { max-width: 50%; bottom: 10%; }
.tx-produkte .header-image .text { font-size: inherit; max-width: 80%; }
.tx-produkte h1.row-1, .tx-produkte span.row-1, .tx-produkte h2.row-2, .tx-produkte span.row-2 { font-family:'KievitWeb W07 Bold',Helvetica,Arial,sans-serif; font-size: 16px; color: #ffffff; display: inline-block; padding: 5px 20px; margin: 0; font-weight: 400; line-height: inherit; }
.tx-produkte h2.row-2, .tx-produkte span.row-2 { font-size: 14px; text-transform: none; }
.tx-produkte .uber { padding-bottom: 20px; }
.tx-produkte .uber .row-1 { font-size: 24px; }

.tx-produkte .shoe { cursor: pointer; }
.tx-produkte .shadow { display: block; position: absolute; left: 0; margin-left: auto; margin-right: auto; right: 0; bottom: -20px; z-index: 3; }
.tx-produkte .details .shadow { bottom: 0; max-width: 50%; }
.tx-produkte .details .smaller img { max-width: 130px; }

#safety-shoes .row-1 { background-color: #f29400; }
#safety-shoes .row-2 { background-color: #e5322d; }

#professional-shoes .row-1 { background-color: #009ee0; }
#professional-shoes .row-2 { background-color: #172983; }

#shoes-for-service-area .row-1 { background-color: #a32f67; }
#shoes-for-service-area .row-2 { background-color: #4a1029 ; }

#shoes-for-operating-room .row-1 { background-color: #41a62a; }
#shoes-for-operating-room .row-2 { background-color: #01652f; }

.bg-gray.icon-wrapper { padding: 20px 0; margin: 50px 0; }
.bg-gray.icon-wrapper .col-xs-4.img-responsive { width: 50%; }

.sohle-wrapper { max-height: 500px; overflow: hidden; }
.sohle-wrapper > img { width: auto; }
/*.sohle-wrapper > img { transform: rotate(-45deg); margin-left: 30%; margin-top: -20%; }*/

.tx-produkte .infos { margin-top: 50px; margin-bottom: 50px; }
.tx-produkte .buttons { margin-top: 50px; padding-bottom: 50px; }
.tx-produkte .table { margin-top: 50px; }
.tx-produkte .table-responsive { margin-bottom: 50px; }

.tx-produkte .infos .horizontal { display: none; }
.tx-produkte .infos .btn.shop { font-size: 12px; padding: 2px; }
.tx-produkte .infos .vertical > .row:first-child h3 { margin-top: 0; }
.tx-produkte .infos .vertical .btn.shop { margin: 10px 0; padding: 6px 12px; font-size: inherit; }
.tx-produkte .produktdatenblatt { margin-bottom: 20px; }

.tx-produkte .similar-shoes .row > div { margin-bottom: 20px; }

.table > tbody > tr:first-child > td { border-top: 0; }

.fersenriemen { margin-bottom: 10px; }

@media screen and (max-width: 767px) {
    .table-responsive { border: 0; }
    .details .buttons > div > div:first-child { margin-bottom: 20px; }
    .sohle-wrapper { margin-top: 25px; }
}

@media (min-width: 440px) {
    .tx-produkte .infos .horizontal { display: block; }
    .tx-produkte .infos .vertical { display: none; }

    .tx-produkte .header-image .row-1 { font-size: 20px; }
    .tx-produkte .header-image .row-2 { font-size: 16px; }
}

@media (min-width: 768px) {
    .nav-tabs > li > a { font-size: 24px; }

    .norms img { max-width: 72px; }
    .filters .button { line-height: normal; }

    .tx-produkte .bg-struktur .col-xs-3 {width: 25%;}
    .tx-produkte .table-responsive { margin-bottom: 0; }

    .tx-produkte .header-image .row-1 { font-size: 32px; }
    .tx-produkte .header-image .row-2 { font-size: 20px; }

    .tx-produkte .shoe-selection { font-size: 20px; }
    .tx-produkte .shoe-selection img { max-height: none; }
    .tx-produkte .shadow { display: block; }

    .grid-item-opened { height: 450px; }
    .bg-gray.icon-wrapper .col-xs-4.img-responsive { width: inherit; }
}

@media (min-width: 992px) {
    .nav-tabs > li > a { text-align: center; }

    .tx-produkte .header-image .element, .tx-produkte .shadow, .tx-produkte .details .shadow { max-width: 70%; }

    .norms img { max-width: 90px; }
}

@media (min-width: 1200px) and (max-width: 1350px) {

    .thumbnail .shoe {
        width: 100%;
    }
}

@media (min-width: 1200px) {
    .tx-produkte .header-image .element, .tx-produkte .shadow, .tx-produkte .details .shadow { max-width: 800px; }
    .tx-produkte .header-image .element { bottom: 40px; }

    .nav-tabs > li > a {
        font-size: 30px;
        padding: 40px 0;
    }

    .norms img { max-width: 130px; }

    .tab-content img { padding: 10px; }

    .tx-produkte .header-image .row-1 { font-size: 52px; }
}

@media (min-width: 1450px) {
    .norms img { max-width: 140px; }
}

@media (min-width: 1600px) {
    .col-lg-3 { width: 16.6667%; }
    .shoe-selection .col-lg-3, .produktgruppen .col-lg-3 { width: 25%;}
}