body {background:#fafafa; /*border-top:5px solid #555*/

/*border:15px solid #FDB713;*/


}

a.topLogo { display:block; height:64px; text-indent:-9999px; float:left; 
			margin:5px 5px 0 -10px;/*background:url(img/logo.png) 0 0 no-repeat;  */}
a.topLogo img{
			max-height:60px;
			}
a.topLogoSmall {display:block; width:130px;height:50px;
			margin:2px 12px 0 0;background:url(img/logo_small.png) 0 0 no-repeat;}

a.topLogoShop { display:block; height:64px; text-indent:-9999px; float:left; 
			margin:7px 12px 0 0;/*background:url(img/logo.png) 0 0 no-repeat;  */}
a.topLogoShop img{
max-height:58px;
}

.navbar-shop-top {
	
	margin-bottom:20px;font-size:14px;
	
	-moz-box-shadow:    3px 3px 5px 6px #ccc;
	-webkit-box-shadow: 3px 3px 5px 6px #ccc;
	box-shadow:         0px 3px 3px 0px #ccc;

}

.navbar.navbar-shop-top {
	

	height:80px;
	background: #454545; /* Old browsers */
	background: -moz-linear-gradient(top,  #454545 0%, #000111 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#454545), color-stop(100%,#000111)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #454545 0%,#000111 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #454545 0%,#000111 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #454545 0%,#000111 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #454545 0%,#000111 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#454545', endColorstr='#000111',GradientType=0 ); /* IE6-9 */



}
.navbar.navbar-shop-top .searchTop  {
		  
	background: #222222; /* Old browsers */
	background: -moz-linear-gradient(top,  #222222 0%, #252525 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#222222), color-stop(100%,#252525)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #222222 0%,#252525 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #222222 0%,#252525 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #222222 0%,#252525 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #222222 0%,#252525 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222222', endColorstr='#252525',GradientType=0 ); /* IE6-9 */
	
	
	
	border:1px solid #111;width:120px
	
}

.navbar-shop-top ul.nav li a:not(.btn-shop) {color:#f4f4f4 }
.navbar-shop-top ul.nav li a:not(.btn-shop):hover,
.navbar-shop-top ul.nav li.active a:not(.btn-shop),
.navbar-shop-top ul.nav li.active a:not(.btn-shop):hover {color:#12c2dd;background:#4a4a4a}
.navbar-shop-top .nav {margin-top:20px}
.navbar-shop-top ul.navRightTop a {;}

ul.nav a.btn:hover{
	background:#eee;/*#FDB713;*/
}

nav.navbar.navbar-default{background:#fff;
	margin-bottom:40px;
	
	box-shadow:         0px 0px 3px 0px rgba(0,0,0,0.1); border-radius:0;
	
	}



.homeSteps {}
.homeSteps div {
	
	background:#efefef;padding:10px;display:block;
	color:#999; position:relative; font-size:13px;line-height:20px;text-decoration:none;
	border-radius: 10px; 
	-moz-border-radius: 10px; 
	-webkit-border-radius: 10px; 
	
}
.homeSteps a {
	
	padding:10px;display:block;
	border-radius: 10px; 
	-moz-border-radius: 10px; 
	-webkit-border-radius: 10px; 

}

.homeSteps a small {display:block;color:#000;font-size:10px; text-shadow:none;margin-top:-5px;}
.homeSteps a:hover {background: #390;color:#fff; text-shadow: 1px 1px 0px rgba(0, 0, 0, .5);}
.homeSteps a span  {font-weight:bold;padding:10px;display:block;position:relative;}

.homeSteps div.noBg,.homeSteps div.noBg div { background:none; }
.homeSteps div em,.homeSteps a em {
	
	color:#fff;position:absolute;top:-6px;left:-15px;font-size:36px;font-weight:bold;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);

}.homeSteps a:hover em {text-shadow: 1px 1px 1px rgba(0, 0, 0, .9);}


.thumbnail {background:#fff; position:relative}
.thumbnail:hover, a.blueHover:hover {
	
	border-color:#4a4a4a;
	-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.065);
	-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.065);
	box-shadow:0 0px 10px rgba(0, 136, 204, 0.5);

}

.thumbnailItem {margin-bottom:20px;}
.thumbnailItem h4  { font-size:13px; margin:3px 0 0; padding:10px; a}
.thumbnailItem h4 a {color:#4a4a4a}
.thumbnailItem h4 em { display:block;font-size:11px;margin-bottom:-5px;font-style:normal; color:#888; font-weight:normal}
.thumbnailItem h4 em a { color:#0088cc}

.thumbnailPrivate {border:1px solid #FC0; }

.thumbnail {position:relative;}
.thumbnail .onHoverButtons a {
	
	color:#fff;text-decoration:none;margin:0;padding:5px 7px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;

}


.productOrderColumn h1{font-size:20px;color:rgba(0,0,0,0.5)}
.productOrderColumn h1 p{font-size:28px;color:#000}

.productOrderColumn h2{font-size:15px;color:#000;font-weight:normal}

.thumbnail .onHoverButtons a:hover {background:#12c2dd;}
.thumbnail .onHoverButtons {
	
	color:#ccc;opacity:0;display:block;position:absolute;top:0; left:0;right:0;padding:0;font-size:11px;
	
	background: -moz-linear-gradient(top,  rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */

	-webkit-transition-property: opacity, padding, visibility;
	-moz-transition-property: opacity, padding, visibility;
	-ms-transition-property: opacity, padding, visibility;
	-o-transition-property: opacity, padding, visibility;
	transition-property: opacity, padding, visibility;
	
	-webkit-transition: 0.2s ease-out;
	-moz-transition: 0.2s ease-out;
	-ms-transition: 0.2s ease-out;
	-o-transition: 0.2s ease-out;
	transition: 0.2s ease-out;
	
	transition-delay:0.3s;

	
}
.thumbnail:hover .onHoverButtons  { opacity:1;top:0;padding:10px;}


.recommendBox { font-size:11px; background:#fff;}
.recommendBox label,.recommendBox input { font-size:11px}

.btn-facebook span {
	
	background-image: url(http://static.ak.facebook.com/images/share/facebook_share_icon.gif?6:26981);
	background-repeat:no-repeat;
	background-position:0 0;
	display:block; width:16px; height:16px; float:left; margin:2px 6px 0 -3px;
	
}

.well-newItem {margin-top:0;height:130px;}
.well-newItem legend {margin-top:-10px;font-size:16px;}
.well-newItem .fb_share_button span {padding-left:25px;}
.well-newItem {text-align:center;}

.well-white {background:#fff;}

.categoryHeader { margin-left:20px; }
.categoryHeader a { color:#000; border-bottom:1px solid #CCC; text-decoration:none}
.categoryHeader a:hover { border-bottom:1px solid #000}

.footer {margin-top:50px;border-top:1px solid #ccc;background:#DCDCDC;color:#999;padding:20px 0}
.footer a {color:#666;}


.contactFaq {color:#666; list-style:none}
.contactFaq p {color:#000; font-weight:bold}
.contactFaq li {border-bottom:1px dotted #f5f5f5; padding-bottom:10px;margin-bottom:10px;}



/* Mobile friendly: */

.navMobileMenu {display:none}
@media (max-width:1080px){
	/*search form is breaking menu*/
	.navRightTopSearch {display:none;}
	body .userBarTitle,body .userBarNumber{padding:0 0 0 10px;margin-left:10px}

	
}
@media (max-width:900px){
	/*right-corner buttons are breaking menu*/
	.navLeftAffiliates,.navLeftHomeIcon,.userBarTitle {display:none;}
	
}
@media (max-width:770px){
	/*it's probably mobile now, make logo centered and hide menu*/
	.navbar .nav,
	.navbar-form.navbar-right {display:none}
	.navbar {}
	.navbar .navbar-inner {text-align:center;height:auto;}
	/*a.topLogo {float:none;margin:7px auto;}
	a.topLogo {display:block;text-align:center;}*/
	a.topLogo{margin:7px 12px 0 10px;float:left}
	.navbar-header{width:100%;}
	.navMobileMenu {display:block;float:none;width:100%;margin:20px 0;}
	.userBar{display:none;}
}

@media (min-width:780px){
a.topLogo:hover { -webkit-transform: rotate(-1deg) scale(1.07); -moz-transform: rotate(-1deg) scale(1.07);}
}
	@media (max-width:1060px){
	ul.nav li.navLeftWithText,ul.nav li.navLeftAddNew {display:none;}
	}
	.navMobileMenu{float:right;width:auto;min-width:30%;margin-right:20px;}

/* Faded out hr */
hr.soften {
  height: 1px;
  background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));
  background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));
  background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));
  background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));
  border: 0;
}

/*----------------------------
	Categories Menu
-----------------------------*/



#topNav li ul{
	position:absolute;
	list-style:none;
	width:180px;
	left:0;
	margin-left:-68px;
	top:25px;
	z-index:9999;display:none;
	
	-webkit-box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.75);
	-moz-box-shadow:    0px 0px 5px rgba(50, 50, 50, 0.75);
	box-shadow:         0px 0px 5px rgba(50, 50, 50, 0.75);

}

#topNav li ul li{
	background-color:#313131;background:white;text-align:center;
}

#topNav li ul li a{
	
	padding:7px; font-size:12px;
	color:#fff !important;
	text-decoration:none !important;
	display:block;
	
	text-align:left;
	background:#313131;margin-left:3px;margin-right:3px;border-bottom:1px solid #444;

}


#topNav li ul li:hover a{
	background-color:#444;
}

#topNav li ul li:first-child{
	border-radius:3px 3px 0 0;
	margin-top:25px;
	position:relative;
	background-color:#313131;background:white;color:#000;font-weight:bold;padding:10px;
}

#topNav li ul li:first-child:before{ /* the pointer tip */
	content:'';
	position:absolute;
	width:1px;
	height:1px;
	border:5px solid transparent;
	border-bottom-color:#fff;
	left:50%;
	top:-10px;
	margin-left:-5px;
}

#topNav li ul li:last-child{
	border-bottom-left-radius:3px;
	border-bottom-right-radius:3px;border-bottom:3px solid #fff;
}
#topNav li ul li:last-child a{
	
}

/* This will trigger the CSS */
/* transition animation on hover */

#topNav li:hover ul{
	/*max-height:200px;*/
	display:block;
	/*Increase when adding more dropdown items */
}




 .recommendBoxOptions div  { font-size:15px;padding:0 20px; color:#ccc }
 .recommendBoxOptions div em { line-height:30px; display:block; float:left; font-size:30px; color:#999;font-weight:bold; padding-right:10px; }
 .recommendBoxOptions p {  font-size:12px;padding:0 20px; }
 
 
 
 
#rightLikeUs{position:fixed;right:-252px;top:200px;z-index:999;width:250px;}
#rightLikeUs #rightLikeMain{padding:5px;border:5px solid #325096; border-radius:5px;;min-height:150px;display:block;width:260px;background:#fff;}
#rightLikeArrow{background:url(img/koszulking_lubie.png) 0 0 no-repeat;width:150px;height:140px;position:absolute;top:0;left:-150px;}
#rightLikeTrigger{width:100px;height:100px;position:absolute;top:50px;left:50px;}



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



.navbar.navbar-default.navbar-website-top {background:#fff;border:0;box-shadow:0 0 5px rgba(0,0,0,0.1)}

.navbar-website-top .navbar-nav li a {color:rgba(0,0,0,0.9);transition: 0.2s all;background:rgba(0,0,0,0);margin-top:3px;}
.navbar-website-top .navbar-nav li span a {margin-top:0;}
.navbar-website-top .navbar-nav li a small {margin-top:5px;color:rgba(0,0,0,0.4);line-height:13px;font-size:13px;}

.navbar-website-top .navbar-nav li:hover a {color:rgba(0,0,0,1);
	background:#eee;
	/*background:#FDB713*/
	
	}
.navbar-website-top .navbar-nav li:hover a small {color:rgba(0,0,0,0.7)}

.navLeftWithText {font-size:18px; position:relative}

.navLeftWithText span {display:none;opacity:0;position:absolute;margin-top:-5px; z-index:10;top:50px; left:0; width: 300px; background:#eee; padding:0; transition: 0.2s opacity,0.2s margin; box-shadow:3px 7px 10px rgba(0,0,0,0.2) ;}
.navLeftWithText:hover span {display:block; opacity:1; transition-delay:0.2s;margin-top:0  }

/*.navLeftWithText a {margin-top:-10px;}
.navLeftWithText a small{display:block;color:#ccc;margin-top:-5px;font-size:11px;}
.navLeftWithText a:hover small{color:#fff;}
.navbar.navbar-inverse {border-radius:0}*/

#itemsList .thumbnail {box-shadow:0;border:0;border-radius:0;padding:0}





.thumbnail:hover, a.blueHover:hover {
	
	box-shadow:none;

}

.thumbnailItem {margin-bottom:10px;}
.thumbnailItem h4 {display:none;position:absolute;bottom:0;background:rgba(0,0,0,0.3);}
.thumbnail:hover h4{display:block;}
.thumbnailItem h4 a {text-decoration:none;color:#fff;font-size:20px;padding:20px;}
.thumbnailItem h4 em {display:none;}

.thumbnailPrivate {border:1px solid #FC0; }

.thumbnail .onHoverButtons {display:none}

#itemsList .col-sm-1, #itemsList .col-sm-10, #itemsList .col-sm-11, #itemsList .col-sm-12, #itemsList .col-sm-2, #itemsList .col-sm-3, #itemsList .col-sm-4, #itemsList .col-sm-5, #itemsList .col-sm-6, #itemsList .col-sm-7, #itemsList .col-sm-8, #itemsList .col-sm-9 {
    padding-right: 5px;
    padding-left: 5px;
}



.homeSquare {
	
	float:left;
    position: relative;
	margin:0;
    background-color:#eee;
    overflow:hidden;
	
}

.homeSquare1{
	
    width: 40%;
    padding-bottom: 30%;
	
}
.homeSquare2{
	
    width: 30%;
    padding-bottom: 30%;
	
}

.homeSquareContent{
	
	position:absolute;
    height:100%;
    width:100%;
    padding: 0;
	
}

.homeSquareContent > a:not(.btn){
	position:absolute;top:0;left:0;color:#555;text-decoration:none;display:block;bottom:0;right:0;text-align:left;padding:14% 7% 7%;background:linear-gradient(to bottom,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 70%);transition: 0.2s all; margin-top:-8%;;
	
	color:rgba(255,255,255,0.8);background:linear-gradient(to bottom,rgba(0,0,0,0.8) 10%,rgba(0,0,0,0.2) 70%,rgba(0,0,0,0) 100%); font-size:130%;z-index:2;
	
}
.homeSquareContent > a:not(.btn):hover{/*background:linear-gradient(to bottom,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);*/padding-top:7%;margin-top:0;
}

.homeSquareContent > a:not(.btn) strong {display:block;font-size:120%;color:#fff}

.homeSquareContent img{
	
    min-height: 100%; /*min-width: 100%;*/
    max-height: 100%; max-width:none;
    filter: grayscale(100%);z-index:1;position:relative;
}
.homeSquareContent:hover img{
	
    filter: grayscale(0%);
}

.homeSquareContent a.btn {font-size:120%;display:block;opacity:0; transition: 0.2s opacity,0.2s bottom;transition-delay:0.2s;position:absolute;bottom:0px;left:10px;right:10px;z-index:2}
.homeSquareContent:hover a.btn {display:block;opacity:1;bottom:10px}


@media (max-width: 900px){
	.koSquares .koSquare{
    width: 50%;
    padding-bottom : 50%;
	}
}
@media (max-width: 600px){
	.koSquares .koSquare{
    width: 100%;
    padding-bottom : 100%;
	}
}






	.thumbnail {position:relative;}
	.onHoverButtons {position:absolute;top:10px; left:10px; display:none}
	.thumbnail:hover .onHoverButtons  {display:block;}
	
	#creditsBy a {color:#ccc}
	
		
	.selectOption p > input {
		display:none
	}
	.selectOption p > input + label {
		cursor:pointer;
		border:1px solid black; padding:10px; float:left; margin-right:5px
	}
	.selectOption p > input[type=radio]:checked + label {
	   /*outline:3px solid grey;*/
	   
	 box-shadow:0 0 0 3px rgba(0,0,0,0.2);
	 /*border:1px solid red;
	 position:relative;
	 margin-top:-1px*/
	 
	 
	}
	.selectOption p > input[type=radio]:checked + label:before {
		/*content:' ';
		position:absolute;top:-3px;right:-4px;padding:0;
		width:24px;height:24px;
		background:url(img/checkbox.png) 0 0 no-repeat;*/
	}
	
	.selectHeader h4 { color:#666; background:#ccc; margin:20px -20px -20px;padding:10px 20px;}
	.selectHeader h6 { clear:both; color:#666; background:#E3E3E3; margin:20px -20px;padding:5px 20px;}
	.selectHeader h6 span, .selectHeader h6 a { font-weight:normal; color:#999;}
	
	#buyOldPrice { text-decoration: line-through; font-size:14px; font-weight:normal; color:#666}

#previewColorHolder{
z-index:99999;
display:none;
-webkit-box-shadow: 1px 1px 7px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    1px 1px 7px rgba(50, 50, 50, 0.75);
box-shadow:         1px 1px 7px rgba(50, 50, 50, 0.75);

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

background:#000;position:fixed;top:10%;left:10%;border:5px solid #000;}
img.preloadImage{z-index:99999;position:absolute;top:-999px;}

#previewColor{width:410px;height:380px;position:relative}
#previewColorIn{width:410px;height:380px;background:url(img/previewItem.png);}
#previewColorIn div{position:absolute;top:60px;left:130px;height:290px;width:164px;}

#previewColorHolder p{color:#ccc;height:30px;line-height:26px;text-align:center;margin:0;padding:0}


.sizeSymbol{vertical-align:middle;line-height:30px;height:50px;width:50px;font-size:36px;text-align:center;display:block}
.sizeSymbol span {font-size:10px;margin-top:5px;display:block;line-height:11px}

#addToCartTip{display:block;font-size:11px;color:rgba(255,255,255,0.5)}

.selectType label{position:relative;width:99px;height:100px;}
.selectType label span{position:absolute;display:block;bottom:0;left:0;right:0;font-size:10px;text-align:center;color:#fff;}




button[data-balloon] {
  overflow: visible;
}
[data-balloon] {
  position: relative;
}
[data-balloon]:before,
[data-balloon]:after {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -khtml-opacity: 0;
  -moz-opacity: 0;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: all 0.18s ease-out 0.18s;
  transition: all 0.18s ease-out 0.18s;
  bottom: 100%;
  left: 50%;
  position: absolute;
  z-index: 10;
  -webkit-transform: translate(-50%, 10px);
  -ms-transform: translate(-50%, 10px);
  transform: translate(-50%, 10px);
  -webkit-transform-origin: top;
  -ms-transform-origin: top;
  transform-origin: top;
}
[data-balloon]:after {
  background: rgba(17, 17, 17, 0.9);
  border-radius: 4px;
  color: #fff;
  content: attr(data-balloon);
  font-size: 12px;
  padding: .5em 1em;
  white-space: nowrap;
  margin-bottom: 11px;
}
[data-balloon]:before {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="36px" height="12px"><path fill="rgba(17, 17, 17, 0.9)" transform="rotate(0)" d="M2.658,0.000 C-13.615,0.000 50.938,0.000 34.662,0.000 C28.662,0.000 23.035,12.002 18.660,12.002 C14.285,12.002 8.594,0.000 2.658,0.000 Z"/></svg>') no-repeat;
  background-size: 100% auto;
  height: 6px;
  width: 18px;
  content: "";
  margin-bottom: 5px;
}
[data-balloon]:hover:before,
[data-balloon][data-balloon-visible]:before,
[data-balloon]:hover:after,
[data-balloon][data-balloon-visible]:after {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  -khtml-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
  pointer-events: auto;
  -webkit-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}
[data-balloon][data-balloon-break]:after {
  white-space: normal;
}
[data-balloon-pos="down"]:before,
[data-balloon-pos="down"]:after {
  bottom: auto;
  left: 50%;
  top: 100%;
  -webkit-transform: translate(-50%, -10px);
  -ms-transform: translate(-50%, -10px);
  transform: translate(-50%, -10px);
}
[data-balloon-pos="down"]:after {
  margin-top: 11px;
}
[data-balloon-pos="down"]:before {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="36px" height="12px"><path fill="rgba(17, 17, 17, 0.9)" transform="rotate(180 18 6)" d="M2.658,0.000 C-13.615,0.000 50.938,0.000 34.662,0.000 C28.662,0.000 23.035,12.002 18.660,12.002 C14.285,12.002 8.594,0.000 2.658,0.000 Z"/></svg>') no-repeat;
  background-size: 100% auto;
  height: 6px;
  width: 18px;
  margin-top: 5px;
  margin-bottom: 0;
}
[data-balloon-pos="down"]:hover:before,
[data-balloon-pos="down"][data-balloon-visible]:before,
[data-balloon-pos="down"]:hover:after,
[data-balloon-pos="down"][data-balloon-visible]:after {
  -webkit-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}
[data-balloon-pos="left"]:before,
[data-balloon-pos="left"]:after {
  bottom: auto;
  left: auto;
  right: 100%;
  top: 50%;
  -webkit-transform: translate(10px, -50%);
  -ms-transform: translate(10px, -50%);
  transform: translate(10px, -50%);
}
[data-balloon-pos="left"]:after {
  margin-right: 11px;
}
[data-balloon-pos="left"]:before {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12px" height="36px"><path fill="rgba(17, 17, 17, 0.9)" transform="rotate(-90 18 18)" d="M2.658,0.000 C-13.615,0.000 50.938,0.000 34.662,0.000 C28.662,0.000 23.035,12.002 18.660,12.002 C14.285,12.002 8.594,0.000 2.658,0.000 Z"/></svg>') no-repeat;
  background-size: 100% auto;
  height: 18px;
  width: 6px;
  margin-right: 5px;
  margin-bottom: 0;
}
[data-balloon-pos="left"]:hover:before,
[data-balloon-pos="left"][data-balloon-visible]:before,
[data-balloon-pos="left"]:hover:after,
[data-balloon-pos="left"][data-balloon-visible]:after {
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
}
[data-balloon-pos="right"]:before,
[data-balloon-pos="right"]:after {
  bottom: auto;
  left: 100%;
  top: 50%;
  -webkit-transform: translate(-10px, -50%);
  -ms-transform: translate(-10px, -50%);
  transform: translate(-10px, -50%);
}
[data-balloon-pos="right"]:after {
  margin-left: 11px;
}
[data-balloon-pos="right"]:before {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12px" height="36px"><path fill="rgba(17, 17, 17, 0.9)" transform="rotate(90 6 6)" d="M2.658,0.000 C-13.615,0.000 50.938,0.000 34.662,0.000 C28.662,0.000 23.035,12.002 18.660,12.002 C14.285,12.002 8.594,0.000 2.658,0.000 Z"/></svg>') no-repeat;
  background-size: 100% auto;
  height: 18px;
  width: 6px;
  margin-bottom: 0;
  margin-left: 5px;
}
[data-balloon-pos="right"]:hover:before,
[data-balloon-pos="right"][data-balloon-visible]:before,
[data-balloon-pos="right"]:hover:after,
[data-balloon-pos="right"][data-balloon-visible]:after {
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
}
[data-balloon-length]:after {
  white-space: normal;
}
[data-balloon-length="small"]:after {
  width: 80px;
}
[data-balloon-length="medium"]:after {
  width: 150px;
}
[data-balloon-length="large"]:after {
  width: 260px;
}
[data-balloon-length="xlarge"]:after {
  width: 90vw;
}
@media screen and (min-width: 768px) {
  [data-balloon-length="xlarge"]:after {
    width: 380px;
  }
}
[data-balloon-length="fit"]:after {
  width: 100%;
}