/*************

ELEMENTS
/*************/
body .media, .media-body {overflow: visible;}
body .uk-lightbox {background: rgba(255,255,255,0.8);}
body .uk-lightbox-toolbar,button.uk-close, body .uk-lightbox-toolbar-icon,
body .uk-lightbox-button {background-color:transparent;color: rgba(100, 100, 100, 0.8);}
body .uk-lightbox-button:hover,body .uk-lightbox-toolbar-icon:hover{
background-color:transparent;color: rgba(100, 100, 100, 1);
}

.uk-modal-close-full svg, .uk-lightbox-button svg {
  -webkit-filter: drop-shadow( 1px 0px 0px rgba(255, 255, 255, 1));
  filter: drop-shadow( 1px 0px 0px rgba(255, 255,255, 1));
}
.element-itemhits::before,.element-itemtag a:before,
.element-itemprimarycategory a::before, .element-itemmodified::before,
.element-itemcreated::before, .element-itempublish_up::before{
	display:inline-block;
	font-family:FontAwesome;
	margin:0 4px;
	vertical-align:middle;
	opacity: 0.4;
}
.element-itemmodified::before, .element-itemcreated::before, .element-itempublish_up::before{content: "\f017";}
.element-itemprimarycategory a::before{	content:"\f009";}
.element-itemtag a:before{content: "\f104";}
.element-itemhits::before{content:"\f06e";}

/* Rating*/
.kaj-content .rating .vote-message {
    font-size: 0.7rem;
	margin:0;
	padding:0;
	text-align:center;
}
.kaj-content div.rating div.current-rating div.hover {background-image: url(../images/stars.svg);}
.kaj-content div.rating div.rating-container {background-image: url(../images/stars.svg);}
.kaj-content div.rating div.previous-rating {background-image: url("../images/stars.svg");height: 20px;}
.dir-rtl .kaj-content .rating div.previous-rating {background: url("../images/stars.svg") repeat-x scroll 100% -20px rgba(0, 0, 0, 0)!important;}
.dir-rtl .kaj-content .rating div.current-rating div {right: 0!important;left: auto!important;}

/*Comments*/

.uk-comment-list .comment-item{
	position:relative;
	display:block;
	overflow:hidden;
}
.uk-comment-list .replies{
	width:100%;
	display:block;
	clear:both;
}
.comment-item .reply{
	position:absolute;
	top:0.5rem;
	right:1.5rem;
	visibility:hidden;
}
.dir-rtl .comment-item .reply{left:1.5rem;right:auto;}
.comment-item:hover >.uk-comment >.uk-comment-body >.reply{	visibility:visible;}
#respond{display:block;	clear:both;}
.respond-text textarea{	min-width:280px;width:100%;}
.uk-comment-body .uk-alert,.uk-comment-meta {color:#999999;font-size:0.8rem;}


/*************

GENERAL
/*************/
.top,#down{
	background-color: #f7f7f7;
	border-top: 1px solid #dadada;
	border-bottom: 1px solid #ececec;
}
#down{padding:3rem 1rem;}
.kaj-content h1{margin-bottom:1rem;}
.kaj-content .top{
	display:block;
	position:relative;
	overflow:hidden;
	background-color:#f3f3f3;
	border-top: 1px solid #dadada;
	border-bottom: 1px solid #ececec;
	padding:0.2rem 0;
}
.pos-gallery{padding:1rem 0;}
body .pos-gallery a{margin:0 0.2rem;}
body .uk-modal-full {padding-top: 5rem;background-color:#ffffff;}
/* Meta section*/
.pos-meta{font-size:0.8rem;}

/* Media section*/
.pos-media{padding:0;margin: 0.1rem 0;text-align:right;}
.dir-rtl .pos-media{text-align:left;}
.uk-card-media-top img{width:100%}
.loadmore-container{
	display:block;
	position:relative;
	text-align:center;
}
.webkaj-spinner-overlay{
	display:none;
	text-align:center;
}
/*ARTICLE
************************************************/

.widthside #main, .widthside #comments  {
	display:block;	
	width:calc(100% - 350px);
	position:relative;
	height: 100%;
	float:left;
}
.widthside {padding-top:2rem;}
.dir-rtl .widthside #main,.dir-rtl .widthside #comments  {float:right;}

.widthside #side{
	display:block;
	width:320px;
	height: 100%;
	float:right;
}
.dir-rtl .widthside #side{float:left;}
.widthside #side .items .item{margin-bottom:1rem;}

/*service
************************************************/

.widthside, .kaj-content .head,.kaj-content .topin, #kaj-service #comments,#kaj-service .pos-content > *:not(.kaj),.submit-page {
	max-width:85rem;
	margin:0 auto;
	padding:0 1rem;
}

/*Gallery
************************************************/
.headout{background-color:white;}
/*Product
************************************************/


/*Offer
************************************************/

#mainimage{position:relative;}
.r-item{margin:0.5rem 0;}
.offers{list-style: none;}
.offers li{	margin:0.5rem 0;}
.offers li input{max-width:85px;display:inline-block;vertical-align:middle;}
.offers li .item-name{display:inline-block;vertical-align:middle;}
.getspot {display:inline-block;vertical-align:middle;}
.getspot::before {content: "\f041";font-family: FontAwesome;display: block;width: 30px;height: 30px;background-color: white;text-align: center;font-size: 20px;line-height: 30px;border-radius: 50%;cursor:pointer;}
.select-offer.pos .num{display:none;}
.hotspot {position: absolute;cursor: pointer;}
.hotspot > span {position: absolute;width: 16px;height: 16px;font-size: 12px;line-height: 12px;border-radius: 50%;border: 2px solid;border-top-color: currentcolor;	border-right-color: currentcolor;border-bottom-color: currentcolor;
border-left-color: currentcolor;border-color: white;opacity: 0.85;top: 0;left: 0;transform: translateX(-50%) translateY(-50%);-webkit-animation: hotspotchange 1500ms ease-out infinite;-moz-animation: hotspotchange 1500ms ease-out infinite;
animation: hotspotchange 1500ms ease-out infinite;color: transparent;text-align: center;}
.image-preview .hotspot span:hover::before {content: "\f00d";color: red;font-size: 12px !important;line-height: 12px !important;font-family: FontAwesome;}
@-webkit-keyframes hotspotchange {	0% {box-shadow: 0 0 0 0 rgba(255,255,255,1),0 0 0 0 rgb(195, 195, 195);background-color: rgba(255,255,255,0.1)}	100%{box-shadow:0 0 0 10px rgba(255,255,255,0),0 0 0 20px rgba(152, 152, 152, 0);background-color: rgba(255,255,255,0.2);border-color: rgba(255,255,255,0.2);}}
@-moz-keyframes hotspotchange {	0% {box-shadow: 0 0 0 0 rgba(255,255,255,1),0 0 0 0 rgb(195, 195, 195);background-color: rgba(255,255,255,0.1)}	100%{box-shadow:0 0 0 10px rgba(255,255,255,0),0 0 0 20px rgba(152, 152, 152, 0);background-color: rgba(255,255,255,0.2);border-color: rgba(255,255,255,0.2);}}
@keyframes hotspotchange {	0% {box-shadow: 0 0 0 0 rgba(255,255,255,1),0 0 0 0 rgb(195, 195, 195);background-color: rgba(255,255,255,0.1)}	100%{box-shadow:0 0 0 10px rgba(255,255,255,0),0 0 0 20px rgba(152, 152, 152, 0);background-color: rgba(255,255,255,0.2);border-color: rgba(255,255,255,0.2);}}
.hotspot .tooltip {	top: 20px;left: 50%;transform: translateX(-50%);border-radius: 6px;opacity: 0;position: absolute;transition: all 0.3s ease 0s;visibility: hidden;width: 220px;z-index: 3;box-shadow: 0 0 3px 1px #bdbdbd;}
.hotspot:hover .tooltip, .hotspot:active .tooltip, .hotspot:hover .tooltip, .hotspot:active .tooltip {visibility: visible;opacity: 1;}
.hotspot .tooltip::after {border-color: transparent transparent white;border-style: solid;border-width: 5px;bottom: 100%;content: "";left: 50%;margin-left: -5px;position: absolute;}
.uk-modal-body .itemlist .item{margin: 0.5rem 0;}
.dir-rtl div.select-offer li div.item-sort,.dir-rtl  div.select-offer li div.item-delete {margin-left: 7px;margin-right: 0;float: left;}
.kaj-item.product .head .head-in{
	max-width:90rem;
	margin:0 auto;
	
}
.kaj-item.product .head{
	background-color:white;
	max-width:100%;
	
}
/*Responsive
************************************************/

@media (max-width: 95rem) {
}
@media (max-width: 85rem) {
	.comment-item .reply {position: relative;top: auto;right: auto}
}
@media (max-width: 60rem) {
	.widthside #main,.widthside #comments  {width:calc(100% - 250px);}
	.widthside #side{width:220px;	}
	.kaj-content .head .pos-media, #imagepos{order:1;} 
	.kaj-content .head header, #commentsec{order:2;} 
	.pos-media, .dir-rtl .pos-media{text-align:center;}
	.pos-image .image-preview img{width:100%}
	.hotspot .tooltip {	width:64px;}
	.hotspot .itembody {padding:4px;}
	.pos-image img{width:100%;}


}
@media (max-width: 40rem) {
	
	.widthside #main, .widthside  #comments  {width:100%;float:none;}
	.widthside #main,.widthside  #side{width:100%;float:none;overflow:hidden;}
	body .uk-modal-full {padding-top: 0}
	.offers li .item-name{display:block;}
	.offers li input{max-width:80px;}

}
@media (max-width: 30rem) {
	.widthside #side .items .item, .widthside #comments{width:100%;}

}