/*======================================================================*\
|| #################################################################### ||
|| # Package - YJ Sphere Slider		 							        ||
|| # Copyright (C) since 2007  Youjoomla.com. All Rights Reserved.      ||
|| # license - PHP files are licensed under  GNU/GPL V2                 ||
|| # license - CSS  - JS - IMAGE files  are Copyrighted material        ||
|| # bound by Proprietary License of Youjoomla.com                      ||
|| # for more information visit http://www.youjoomla.com/license.html   ||
|| # Redistribution and  modification of this software                  ||
|| # is bounded by its licenses                                         ||
|| # websites - http://www.youjoomla.com | http://www.yjsimplegrid.com  ||
|| #################################################################### ||
\*======================================================================*/
/* outside holder */
.SphereSliderHolder {
	width:100%;
	overflow:hidden;
	position:relative;
	margin:0 auto;
}
/* spheres holder */
.SphereSlider {
	display:block;
	position:relative;
	overflow:hidden;
	width:100%;
	padding:20px 0;
	margin:0 auto;
}
/* sphere slides */
.SphereSlider div.sphereslide {
	display:block;
	position:absolute;
	top:0px;
	left:0px;
	overflow:hidden;
	background:none;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
/* sphere */
.SphereSlider div.sphere {
	display:block;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	text-align:center;
	cursor:pointer;
	overflow:hidden;
}
/* hidden intro and titile*/
.SphereSlider div.sphere .desc {
	display:none;
}
.SphereSlider div.sphere .ititle {
	display:none;
}
/* sphere image */
.SphereSlider div.sphere img {
	display:block;
	width:100%;
	height:100%;
	max-width:100%;
	margin:0 auto;
	float:none;
	-webkit-border-radius:50%;
	-khtml-border-radius:50%;
	-moz-border-radius:50%;
	border-radius:50%;
	position:absolute;
	top:0;
	left:0;
}
/* outside ring */
.SphereSlider div.sphere .roundimg {
	display:block;
	overflow:hidden;
	margin:0 auto;
	-webkit-border-radius:50%;
	-khtml-border-radius:50%;
	-moz-border-radius:50%;
	border-radius:50%;
	height:100%;
	width:100%;
	position:relative;
	background:#ccc;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
/* inside ring */
.SphereSlider div.sphere .roundimgin {
	display:block;
	overflow:hidden;
	margin:0 auto;
	-webkit-border-radius:50%;
	-khtml-border-radius:50%;
	-moz-border-radius:50%;
	border-radius:50%;
	background:#df4f66;
	height:100%;
	width:100%;
	position:relative;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.SphereSlider div.sphere.sphereselected .roundimg {
	border:5px solid #df4f66;
}
.SphereSlider div.sphere.sphereselected .roundimgin {
	border:5px solid #fff;
}
/* cloned intro and title */
.SphereSliderHolder .clonedesc {
	position:relative;
	width:45%;
	min-height:150px;
	display:block;
	text-align:center;
	margin:0 auto;
	clear:both;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
/* visible title*/
.SphereSliderHolder .clonedesc .title {
	padding-bottom:20px;
	display:block;
	overflow:hidden;
	text-align:center;
}
/* visible intro */
.SphereSliderHolder .clonedesc .intro {
	display:block;
	overflow:hidden;
	border-top:5px solid #e7e7e7;
	border-bottom:5px solid #e7e7e7;
	padding:35px 0;
}
/* navigation */
.SphereSliderHolder .prev,
.SphereSliderHolder .next {
	width:40px;
	height:40px;
	display:block;
	background-image:url(../images/arrows.png);
	background-position:left top;
	position:absolute;
	left:0;
	top:110px;
}
.SphereSliderHolder .next {
	left:auto;
	right:0;
	background-position:right top;
}
/* navigation hovers */
.SphereSliderHolder .prev:hover {
	background-position:left bottom;
}
.SphereSliderHolder .next:hover {
	background-position:right bottom;
}
 @media screen and (max-width: 980px) {
.SphereSliderHolder .spherenavs {
	top:auto!important;
	bottom:20px!important;
}
}