/* -----------------------------------------------------------------------------------------------------------------
Globals
----------------------------------------------------------------------------------------------------------------- */
.searchPreview {
	display: none;
    position: absolute;
    z-index: 10001;
    top:134px;
    width: 100%;
    max-width: 980px;
    height:auto;
    left:50%;
    -o-transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    background-color:#fff;
}
.searchPreview:before { 
    width: 0; 
    height: 0; 
    top:-18px;
    left:49%;
    position: absolute;
    border-left: 18px solid transparent;
    border-right: 18px solid transparent;
    border-bottom: 18px solid #333;
    font-size: 0;
    line-height: 0;
    content:"";
}

.oldIE .searchPreview { margin-left:-490px; }
.searchPreview > .dnsRow {margin: 0;}
.searchPreview > .two > .dnsCell {
    padding-top:1em; 
    padding-bottom:1em; 
    padding-left:2em; 
}
/*.searchPreview .spNavs { width: 40%; }*/
/*.searchPreview .spBrands { width: 26%; }*/
/*.searchPreview .spProducts { width: 34%; }*/
/*.searchPreview > .two { padding:0.5em; }*/
.searchPreview > .two > .dnsCell:first-child { width: 50%; padding-right: 2em; }
.no-brands.no-navs > .two > .dnsCell:first-child  { display:none !important; }
.searchPreview > .two > .dnsCell:last-child { width: 50%; }
.searchPreview .link { display: inline-block; line-height: 110%; font-size: 90%; }
.searchPreview .dnsCell > a { font-weight: 400; }
/* -----------------------------------------------------------------------------------------------------------------
Modules
----------------------------------------------------------------------------------------------------------------- */
/*------- Titles -------*/
.searchPreview > .two .title {
    font-weight: 700;
    margin-bottom: 1em;
    font-size: 130%;
    text-align: center;
    width: 100%;
}
.searchPreview  .spTitle {
    color:#ccc;
    text-align: center;
    font-weight: 300;
    font-size: 150%;
    padding-top:0.5em;
    padding-bottom:0.5em;
    background-color: #333;
}
/*------- Products -------*/
.searchPreview .spProduct {
    float:left;
    width: 100%;
    position: relative;
}
.searchPreview .spProduct:last-of-type { margin-bottom:1.6em;}
.searchPreview .spProduct > .one {
    float:left;
    width: 18%;
    margin-right: 4%;
    border:solid 1px #ddd;
}
.has-products.has-navs .spProduct > .one { max-height: 80px;overflow: hidden; }
.searchPreview .spProduct > .one.empty { 
    background: url('//images.salattu.fi/system/images/tuotehaku/icon-noimage.png') no-repeat center #f3f3f3; 
    height: 0;
    padding-bottom: 20%;
}
.searchPreview .spProduct > .two {
    float:left;
    width: 74%;
    margin-bottom:2%;
}
.searchPreview .spProduct > .two > span { width: 100%; margin-bottom: 2%; font-weight: 400; color:#666; }
.searchPreview .spProduct > .two > span:last-child { margin-bottom: 0; }
.searchPreview .spProduct > .two .prodName { color:inherit; font-weight: 700; }
.searchPreview .spProduct > .two .prodCode { color:#999; font-size: 94%; } 
.searchPreview .priceOvh { margin-left: 4%; text-decoration: line-through; }


/* If only products: */
.searchPreview.no-brands.no-navs .spProduct { width: 33%; }
.searchPreview.no-brands.no-navs .spProduct:nth-child(n) { clear:none;}
.searchPreview.no-brands.no-navs .spProduct:nth-child(3n+2) { clear:left;}

.prodPcs, .prodPcs:hover {
	margin-left: 1%;
	font-weight: 700;
	font-size: 90%;
}
button.doProdSearch { margin: 0 auto; display: block; clear:both; }

/* badges */
.searchPreview .spProduct .badge { 
    font-size: 94%;
    text-align: center;
    color: #fff;
    width: auto;
    height:auto;
    padding:0.2em 0.5em;
    font-weight: 700;
    position: absolute;
    top:0;
    left:0; 
    display: inline-block; 
}
.searchPreview .spProduct .prodNew { background: #3b5998; }
.searchPreview .spProduct .prodSale { background: #ff302d; }
.searchPreview.no-brands.no-navs .spProduct > .one { width: 20%; }


/*------- Brands -------*/
.searchPreview .spBrands { margin-bottom: 2em; }
.searchPreview .spBrand {
    padding:7px;
    font-size: 12px;
    float:left;
    overflow: hidden;
    width: 31%;
}
.searchPreview .spBrand:nth-child(n) { 
    clear:none;
    margin-left:2%;
}
.searchPreview .spBrand:nth-child(3n+2) { 
    clear:left;
    margin-left:0;
}
.searchPreview .spBrand .brandImage, .searchPreview .spBrand .brandName {
    display: inline-block;
    vertical-align: middle;
} 
.searchPreview .spBrand .brandImage { 
    border:solid 1px #eee;
    width: 50%;
    margin-right: 4%;
}
.searchPreview .spBrand .brandName {
    width: 40%;
    font-size: 10px;
}

/*------- Navs -------*/
.searchPreview .spNavs .dnsCell { line-height: 120%; margin-bottom: 0.5em; }
.searchPreview .spNavs > .dnsRow {
    max-height: 500px;
    overflow-y:auto;
}
.searchPreview .spNavs .dnsCell > span {
    margin-left: 0.3em;
    margin-right: 0.3em;
}

.searchPreview .spNavs .dnsCell > a:hover { text-decoration: underline; }

.searchPreview .no-results {
	text-align: center;
	padding: 20px 0;
	font-weight: 700;
	font-size: 16px;
	display: none;
}

/* -----------------------------------------------------------------------------------------------------------------
Module visibilitiy
----------------------------------------------------------------------------------------------------------------- */
.no-brands .spBrands, .no-products .spProducts, .no-navs .spNavs  { display: none !important; }
.searchPreview.no-brands.no-navs .spProducts, .searchPreview.no-products.no-navs .spBrands, .searchPreview.no-products.no-brands .spNavs  { width: 100%; }

.searchPreview .iconLoading, .searchPreview.loading .no-results, .searchPreview.loading.no-products.no-brands.no-navs .no-results, .searchPreview .iconLoading { display: none; }
.searchPreview.loading .iconLoading { display: block; }
.searchPreview.no-products.no-brands.no-navs .no-results { display: block; }


/*.no-brands.has-navs .spProducts, .no-navs.has-brands .spProducts, 
.no-products.has-navs .spBrands, .no-navs.has-products .spBrands,.no-brands.has-products .spNavs { width: 50%; } */

/* -----------------------------------------------------------------------------------------------------------------
Animaationi
----------------------------------------------------------------------------------------------------------------- */
.iconLoading {
    margin: 30px auto;
    height: 40px;
    text-align: center;
    overflow: hidden;
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
}
.iconLoading > div {
    background-color: #ccc;
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    margin-right: 5px;
    height: 100%;
    width: 6px;
    display: inline-block;
    -moz-animation: stretchdelay 1.2s infinite ease-in-out;
    -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
    animation: stretchdelay 1.2s infinite ease-in-out;
}
.iconLoading div:nth-child(1) { -moz-animation-delay: -1.1s; -webkit-animation-delay: -1.1s; animation-delay: -1.1s; }
.iconLoading div:nth-child(2) { -moz-animation-delay: -1.0s; -webkit-animation-delay: -1.0s; animation-delay: -1.0s; }
.iconLoading div:nth-child(3) { -moz-animation-delay: -0.9s; -webkit-animation-delay: -0.9s; animation-delay: -0.9s; }
.iconLoading div:nth-child(4) { -moz-animation-delay: -0.8s; -webkit-animation-delay: -0.8s; animation-delay: -0.8s; }
.iconLoading div:nth-child(5) { -moz-animation-delay: -0.7s; -webkit-animation-delay: -0.7s; animation-delay: -0.7s; }
@-webkit-keyframes stretchdelay {
    0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
    20% { -webkit-transform: scaleY(1.0) }
}
@keyframes stretchdelay {
    0%, 40%, 100% { 
    
    -webkit-transform: scaleY(0.4);
    transform: scaleY(0.4);
    }  20% { 
        -webkit-transform: scaleY(1.0);
        transform: scaleY(1.0);
    }
}