/**
*   IRATEC GmbH CSS 2020
*   
*   colors
*   ------
*   blue      = #548FCB
*   midblue   = #07588D
*   darkblue  = #012640
*   grey      = #595959
*   dark      = #24222D
*
*/  


/* fonts */
@font-face {
    font-family: "Roboto";
    font-weight: 300;
    font-style: normal;
    src: url('../fonts/Roboto/Roboto-Light.ttf') format('truetype');
}

@font-face {
    font-family: "Roboto";
    font-weight: 400;
    font-style: normal;
    src: url('../fonts/Roboto/Roboto-Regular.ttf') format('truetype');
}

@font-face {
    font-family: "Roboto";
    font-weight: 600;
    font-style: normal;
    src: url('../fonts/Roboto/Roboto-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'LigatureSymbols';
    src: url('../fonts/LigatureSymbols/LigatureSymbols-2.11.eot');
    src: url('../fonts/LigatureSymbols/LigatureSymbols-2.11.eot?#iefix') format('embedded-opentype'),
         url('../fonts/LigatureSymbols/LigatureSymbols-2.11.woff') format('woff'),
         url('../fonts/LigatureSymbols/LigatureSymbols-2.11.ttf') format('truetype'),
         url('../fonts/LigatureSymbols/LigatureSymbols-2.11.svg#LigatureSymbols') format('svg');
    src: url('../fonts/LigatureSymbols/LigatureSymbols-2.11.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.lsf, .lsf-icon:before {
  font-family: 'LigatureSymbols';
  -webkit-text-rendering: optimizeLegibility;
  -moz-text-rendering: optimizeLegibility;
  -ms-text-rendering: optimizeLegibility;
  -o-text-rendering: optimizeLegibility;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -ms-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  font-smoothing: antialiased;
}

.lsf-icon:before {
  content: attr(title);
  margin-right: 0.3em;
  font-size: 130%;
}


/* Body default */
body {
    font-family: "Roboto", Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
}


/* Base color and fonts */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: "Roboto", Helvetica, Arial, sans-serif;
}

h1,
.text-primary {
    color: #548FCB;
}

.strong, 
.bold, 
.text-bold, 
.text-strong,
.navbar-mega .col .dropdown-header,
.navbar-mega .col .title {
    font-family: "Roboto", Helvetica, Arial, sans-serif;  
}

.strong, 
.bold, 
.text-bold, 
.text-strong {
    font-weight: 600;
}

a,
a:link,
a:visited {
    color: #548FCB;
    text-decoration: none;
    transition: all linear .3s;
}

a:hover,
a:active {
    color: #07588D;
    text-decoration: none;
}

.btn-primary,
.btn-success {
    color: #fff;
    background-color: #548FCB;
    border-color: #548FCB;
    transition: all linear .3s;
}

.btn-primary:hover,
.btn-success:hover {
    background-color: #012640;
    border-color: #548FCB;
}

input:focus {
    border-color: @39f;
}

.control-label {
    color: #333;
}


/* Bootstrap */
@media (min-width:1200px) {
    .container {
        width: 1410px;
    }
}
                   

/* Meta navigation */
@media (min-width:1200px) {
    .meta-navigation {
        position: absolute;
        top: 0;
        right: 30px;
        z-index: 999995;
    }
}

.meta-navigation, 
.meta-navigation a, 
.meta-navigation .btn {
    background: transparent;
    color: #fff;
    font-size: 14px;
}

.meta-navigation .user, 
.meta-navigation .user a, 
.meta-navigation .user .btn {
    color: #fff;
}

/* Meta language */
.meta-navigation .bootstrap-select, 
.meta-navigation .bootstrap-select .btn {
    background-color: transparent !important;
    border: 0 none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.meta-navigation .bootstrap-select .btn {
    padding: 10px 20px 9px 1px;
}

.meta-navigation .bootstrap-select .btn:active,
.meta-navigation .bootstrap-select .btn:hover {
    color: #548FCB !important;
}

.bootstrap-select.btn-group .dropdown-toggle .filter-option .option-title {
    border-left: solid 1px #fff;
    display: inline-block;
    padding-left: 10px;
}

/* Social Media Links */
.social-media-link {
    padding-top: 17px !important;
    padding-bottom: 14px !important;
    display: inline-block;
    width: 60px;
    overflow-x: hidden;
    text-align: center;
}

.social-media-link .lsf-icon {
    font-size: 200%;
    color: #fff;
}

.lsf-icon.facebook:before {
  content: '\E047';
}

.lsf-icon.instagram:before {
  content: '\E155';
}

.lsf-icon.youtube:before {
  content: '\E141';
}

ul.user {
    margin-top: 10px;
}

ul.breadcrumb li {
    font-size: 14px;
}

ul.breadcrumb li,
ul.breadcrumb li a {
    color: #999;
}

@media (max-width:1200px)
{
    .social-media-link {
        float: left !important;
    }
} 

/* IRATEC header */

#header .header-top {
    background-image: url(../img/iratec/iratec_banner_1920.jpg);  
    padding: 0 0 60px;  
}

#header .branding-wrapper {
    margin-top: 10px;
}

#header .header-top .branding {
    position: absolute;
    top: 24px;
    left: 0;
}

#header .header-top .col > .inner .logo img {
    max-height: 42px;
    max-width: 100%;
    height: auto;
    width: auto;
    margin-top: -32px;
}

.btn-cart {
    color: #fff;
    background-color: #012640;
    border-color: #012640;
}

.btn-cart:hover {
    color: #fff;
    background-color: #548FCB;
    border-color: #548FCB;
}

.bottom-cart .box-cart .inner {
    background-color: #012640;
}

@media (min-width:1200px) {
    #header .header-top .branding {
        padding: 10px 0 10px 0;
    } 
    
    #header .header-top .col > .inner .logo img {
        max-height: 49px;
        max-width: 100%;
        margin-top: 0;
    }   
    
    #header .header-top .top-cart {
        position: relative;
        top: 0;
        right: 30px;
    }
}



/* IRATEC shop navbar */ 
.navbar-mega {
    padding: 19px 0;
    margin: -30px 0 30px;
    list-style-type: none;
    position: relative;
    z-index: 1000;
    background-color: #fff;
    color: #777;
    border-top: 2px solid #548FCB;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.navbar-mega .col .title {
    background: #012640;
    color: #fff;    
    text-align: left;
    line-height: 1.5em;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 10px;
    padding-left: 15px;
}

.navbar-mega .level-2 ul {
    background: #d5d5d5;
    padding: 15px;
}

.navbar-mega .level-2 ul li a {
    color: #012640;
}

.navbar-mega a:hover,
.navbar-mega .col .title:hover {
    color: #07588d;
}

.navbar-default {
    background-color: #24222D;
    border-color: #24222D;
}

.navbar-default .navbar-nav > .open > a, 
.navbar-default .navbar-nav > .open > a:hover, 
.navbar-default .navbar-nav > .open > a:focus,
.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:hover, 
.navbar-default .navbar-nav > .active > a:focus {
    background-color: #548FCB;
    color: #fff;
}

.main-navigation .navbar-collapse > ul > li > a {
    font-family: "pt_sansregular", Helvetica, Arial, sans-serif;
}


/* sidebar categories navigation */

.box-categories ul li.level-1.active a {
    color: #fff;
    background-color: #548FCB;
}

.box-categories ul li a, 
.box-categories ul li.active a, 
.box-categories ul li a:hover, 
.box-categories ul li.active a:hover {
    color: #012640;
}

.box-categories ul .level-2 {
    border-top: solid 1px #d5d5d5;
}

.box-categories ul .level-2:fist {
    border-top: none;
}

.box-categories ul .level-2 a {
    padding: 15px 15px 15px; 
}

@media (min-width:576px) and (max-width:992px) {
    .navbar-collapse ul li.level-3 {
        display: inline-block;
        width: 49%; 
        box-sizing: border-box;   
    }
}

@media (max-width:992px) {
    .navbar-collapse ul li {
        margin-bottom: 1.5em;
    }
    
    .navbar-collapse ul li .img-responsive {
        display: none !important;    
    }
}


/* Teader / slider */
.owl {}

.owl .owl-item {
    position: relative;
} 

.owl .owl-item .image-headline {
  position: relative;
  z-index: 99;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(84,143,203,.9);
  color: #fff;
  padding: 15px 15px;
  font-size: 21px;
  text-align: center;
  margin-bottom: 0;
  margin-top: 0;
}

.owl .owl-item .image-panel .image-headline a,
.owl .owl-item .image-panel .image-headline a:link,
.owl .owl-item .image-panel .image-headline a:visited,
.owl .owl-item .image-panel .image-headline a:hover,
.owl .owl-item .image-panel .image-headline a:active {
  color: #fff;  
}

.owl .owl-pagination {
    margin-top: 15px;
}

@media (min-width:992px) {
  .owl .owl-item .image-headline {
    position: absolute;
    bottom: 15px;
    left: 20%;
    right: 20%;
    padding: 15px 15px;
    text-align: center;
    font-size: 30px;
    margin-top: 0;
  }
}



/* startpage content */
#startpage-content h1 {
    font-size: 2em;
    margin-top: 10px;
    color: #548FCB;
    text-align: center;
}

#box-start-page-categories p.image {
    background-color: #548FCB;
    opacity: 1;
    transition: all linear .3s;
}

#box-start-page-categories p.image:hover {
    opacity: .6;
}

#box-start-page-categories p.image a {
    min-height: 180px;
}


/* categorie listing */
.categorie-banner {
    border-bottom: solid 4px #548FCB; 
    margin-bottom: 0 !important;
}

#startpage-content,
.categorie-description-wrapper,
#categorie-description-bottom {
    background-color: #f5f5f5;
    padding: 15px;
    margin-bottom: 30px;
}

.categorie-listing {}

.categorie-listing .section {
    position: relative;
    background-color: #012640;
    border: none;
    height: auto;
    min-height: 200px;
}

.categorie-listing .section p.title {
    background: #012640;
    color: #fff;    
    text-align: center !important;
}

.categorie-listing .section p.title a,
.categorie-listing .section p.title a:link,
.categorie-listing .section p.title a:visited {
    color: #fff;
}

.categorie-listing .section p.title a:hover,
.categorie-listing .section p.title a:active {
    color: #548FCB;
}


/* product listing */
.product-listing .panel-body {
    padding: 20px;
}


@media (min-width:1200px) {
    .products-sort-pages .bootstrap-select {
        max-width: 32%;
        margin-right: 10px;
    }
    
    .product-listing .panel {
        position: relative;
        height: auto !important;
        min-height: 480px;
        transition: all linear .3s;
    }    
    
    .product-listing .panel:hover {
        box-shadow: 0 0 10px rgba(0,0,0,.35);
        border-color: #548FCB;
    }
    
    .product-listing footer {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
    }
    
    .product-listing .panel .footer-buttons .pull-left {
        margin-left: -20px;
        margin-top: 15px;
    }
    
    .product-listing .panel .footer-buttons .pull-right {
        margin-right: -20px;
        margin-top: 15px;
    }
    
    
    .product-listing .image {
        max-height: 220px;
        overflow: hidden;
    }
}



/* product */
#product.detail .product-images .product-image img {
    width: auto !important;
    height: auto !important;
    max-height: 520px;
}

#product.detail .product-images .more-images .col a img {
    width: auto !important;
    height: auto !important;
    max-height: 150px;
}



/* modal */
.modal-header {
    background: #548FCB;
    color: #fff;
}

.modal-header .modal-title,
.modal-header .close {
    color: #fff;
}



/* footer */
#footer {
    font-size: .9em;
}



#back-to-top {
    color: #012640;
}

#back-to-top:hover {
    color: #548FCB;
}