/**
 * jCircle - javascript library to generate circled images gallery or contents.
 * Version 1.0 - http://matar.online/jCircle
 *
 * Copyright 2017, salam aljehni ,(salamj@gmail.com), http://matar.online
 * License: Free for Personal and Learning.
 * Support 12$ Before Use in Commercial Projects To ((  aljehni@gmail.com   )).
**/


/***** Main Elements Structure *****/
.circles-container{
	position: relative;
	width:60%;
	height:60%;
	z-index: 99;
}
.main-circle-content{
	position: relative;
	border-radius: 50%;
	border-width: 0px;
	overflow: hidden;
	background-color: #eaeaea;
	left:5%;
	top: 5%;
	width: 88%;
	height:88%;
	padding:1%; 
	z-index: 10;
	opacity: 1;
	text-align: center;
	-moz-transition-timing-function: ease-in-out;
	-moz-transition-property: all;
	-moz-transition-duration: 300ms;

	-webkit-transition-timing-function: ease-in-out;
	-webkit-transition-property: all;
	-webkit-transition-duration: 300ms;

	-ms-transition-timing-function: ease-in-out;
	-mstransition-property: all;
	-ms-transition-duration: 300ms;

	-o-transition-timing-function: ease-in-out;
	-o-transition-property: all;
	-o-transition-duration: 300ms;
	
	transition-timing-function: ease-in-out;
	transition-property: all;
	transition-duration: 300ms;
}
.main-circle-content img{
	width: 100%;
	height:100%;
	border-width: 0px;
	border-radius: 50%;
	-moz-transition-timing-function: ease-in-out;
	-moz-transition-property: all;
	-moz-transition-duration: 300ms;

	-webkit-transition-timing-function: ease-in-out;
	-webkit-transition-property: all;
	-webkit-transition-duration: 300ms;

	-ms-transition-timing-function: ease-in-out;
	-mstransition-property: all;
	-ms-transition-duration: 300ms;

	-o-transition-timing-function: ease-in-out;
	-o-transition-property: all;
	-o-transition-duration: 300ms;
	
	transition-timing-function: ease-in-out;
	transition-property: all;
	transition-duration: 300ms;
}
.main-circle-content .caption{
	position: absolute;
	bottom: 20%;
	left: 15%;
	right: 15%;
	width: 66%;
	color:#fff;
	opacity: 0;
	font-size: 1.1em;
	background-color: rgba(0,0,0,.5);
	border-radius: 10px;
	-moz-transition-timing-function: ease-in-out;
	-moz-transition-property: all;
	-moz-transition-duration: 300ms;

	-webkit-transition-timing-function: ease-in-out;
	-webkit-transition-property: all;
	-webkit-transition-duration: 300ms;

	-ms-transition-timing-function: ease-in-out;
	-mstransition-property: all;
	-ms-transition-duration: 300ms;

	-o-transition-timing-function: ease-in-out;
	-o-transition-property: all;
	-o-transition-duration: 300ms;
	
	transition-timing-function: ease-in-out;
	transition-property: all;
	transition-duration: 300ms;
}
.main-circle-content:hover .caption,
.main-circle-content:focus .caption{
	opacity: 0.6;
	-moz-transition-timing-function: ease-in-out;
	-moz-transition-property: all;
	-moz-transition-duration: 300ms;

	-webkit-transition-timing-function: ease-in-out;
	-webkit-transition-property: all;
	-webkit-transition-duration: 300ms;

	-ms-transition-timing-function: ease-in-out;
	-mstransition-property: all;
	-ms-transition-duration: 300ms;

	-o-transition-timing-function: ease-in-out;
	-o-transition-property: all;
	-o-transition-duration: 300ms;
	
	transition-timing-function: ease-in-out;
	transition-property: all;
	transition-duration: 300ms;
}
.circle{
	position: absolute;
	left:5%;
	top: 5%;
	width: 89%;
	border-width: 0px;
	border-radius: 50%;
	text-align: center;
}

.min-circle{
	position: absolute;
	z-index: 999;
	border:1px solid #aeaeae;
	text-align: center;
	border-radius: 50%;
	border-style: solid;
	border-width: 1px;
	background-color: #efefef;
	overflow: hidden;
	font-size:1em;
	-moz-transition-duration: 1000ms;
	-moz-transition-property: all;
	-moztransition-timing-function: ease-in-out;
	
	-webkit-transition-duration: 1000ms;
	-webkit-transition-property: all;
	-webkit-transition-timing-function: ease-in-out;

	-ms-transition-duration: 1000ms;
	-mstransition-property: all;
	-ms-transition-timing-function: ease-in-out;

	-o-transition-duration: 1000ms;
	-o-transition-property: all;
	-o-transition-timing-function: ease-in-out;

	transition-duration: 1000ms;
	transition-property: all;
	transition-timing-function: ease-in-out;

}
.min-circle img{
	width: 100%;
	height: 100%;
}
.min-circle .content-text{
	visibility: hidden;
	font-size: .8em;
}
/***** End Main Elements Structure *****/

/***** RunTime Styles *****/
.enlarge-view,
.enlarge-view img{
	border-radius: 10%;
}
.enlarge-main-circle-content,
.enlarge-main-circle-content img{
	-webkit-animation-duration: 300ms;
	        animation-duration: 300ms;
	-webkit-animation-timing-function: ease-in-out;
	        animation-timing-function: ease-in-out;
}
.enlarge-main-circle-content:hover,
.enlarge-main-circle-content:focus,
.enlarge-main-circle-content img:hover,
.enlarge-main-circle-content img:focus{
	-webkit-animation-name: borderfulldown;
	        animation-name: borderfulldown;
	-webkit-animation-duration: 300ms;
	        animation-duration: 300ms;
	-webkit-animation-timing-function: ease-in-out;
	        animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: 1;
	        animation-iteration-count: 1;
	-webkit-animation-fill-mode:forwards;
	        animation-fill-mode:forwards;
	border-radius: 10%;
}
@-webkit-keyframes borderfulldown{
	0%{border-radius: 50%;}
	10%{border-radius: 40%;}
	20%{border-radius: 30%;}
	30%{border-radius: 20%;}
	40%{border-radius: 10%;}
	50%{border-radius: 0%;}
	60%{border-radius: 10%;}
	70%{border-radius: 13%;}
	80%{border-radius: 16%;}
	90%{border-radius: 12%;}
	100%{border-radius: 10%;}
}
@keyframes borderfulldown{
	0%{border-radius: 50%;}
	10%{border-radius: 40%;}
	20%{border-radius: 30%;}
	30%{border-radius: 20%;}
	40%{border-radius: 10%;}
	50%{border-radius: 0%;}
	60%{border-radius: 10%;}
	70%{border-radius: 13%;}
	80%{border-radius: 16%;}
	90%{border-radius: 12%;}
	100%{border-radius: 10%;}
}

/***** End RunTime Styles *****/

/***** On Over Mini Circles *****/
.pulse:hover,
.pulse img:hover{
	-webkit-animation-name: pulse;
	        animation-name: pulse;
	-webkit-animation-duration: 200ms;
	        animation-duration: 200ms;
	-webkit-animation-timing-function: ease-in-out;
	        animation-timing-function: ease-in-out;
	-webkit-animation-fill-mode: forwards;
	        animation-fill-mode: forwards;
}
.zoomOutIn:hover,
.zoomOutIn img:hover{
	-webkit-animation-name: zoomOutIn;
	        animation-name: zoomOutIn;
	-webkit-animation-duration: 600ms;
	        animation-duration: 600ms;
	-webkit-animation-timing-function: ease-in-out;
	        animation-timing-function: ease-in-out;
	-webkit-animation-fill-mode: forwards;
	        animation-fill-mode: forwards;
}
.flip:hover,
.flip img:hover{
	-webkit-animation-name: flip;
	        animation-name: flip;
	-webkit-animation-duration: 600ms;
	        animation-duration: 600ms;
	-webkit-animation-timing-function: ease-in-out;
	        animation-timing-function: ease-in-out;
	-webkit-animation-fill-mode: forwards;
	        animation-fill-mode: forwards;
}
.rotate:hover,
.rotate img:hover{
	-webkit-animation-name: rotate;
	        animation-name: rotate;
	-webkit-animation-duration: 200ms;
	        animation-duration: 200ms;
	-webkit-animation-timing-function: ease-in-out;
	        animation-timing-function: ease-in-out;
	-webkit-animation-fill-mode:backwards;
	        animation-fill-mode:backwards;
	-webkit-animation-iteration-count: 1;
	        animation-iteration-count: 1;
}
@-webkit-keyframes pulse{
	0%{-webkit-transform: scale(1);transform: scale(1);}
	50%{-webkit-transform: scale(1.1);transform: scale(1.1);}
	100%{-webkit-transform: scale(1);transform: scale(1);}
}
@keyframes pulse{
	0%{-webkit-transform: scale(1);transform: scale(1);}
	50%{-webkit-transform: scale(1.1);transform: scale(1.1);}
	100%{-webkit-transform: scale(1);transform: scale(1);}
}
@-webkit-keyframes zoomOutIn{
	0%{-webkit-transform: scale(1);transform: scale(1);}
	50%{-webkit-transform: scale(0.5);transform: scale(0.5);}
	100%{-webkit-transform: scale(1);transform: scale(1);}
}
@keyframes zoomOutIn{
	0%{-webkit-transform: scale(1);transform: scale(1);}
	50%{-webkit-transform: scale(0.5);transform: scale(0.5);}
	100%{-webkit-transform: scale(1);transform: scale(1);}
}
@-webkit-keyframes flip{
	0%{-webkit-transform: scaleY(1);transform: scaleY(1);}
	50%{-webkit-transform: scaleY(-1);transform: scaleY(-1);}
	100%{-webkit-transform: scaleY(1);transform: scaleY(1);}
}
@keyframes flip{
	0%{-webkit-transform: scaleY(1);transform: scaleY(1);}
	50%{-webkit-transform: scaleY(-1);transform: scaleY(-1);}
	100%{-webkit-transform: scaleY(1);transform: scaleY(1);}
}
@-webkit-keyframes rotate{
	0%{-webkit-transform: rotate(0deg);transform: rotate(0deg);}
	100%{-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}
@keyframes rotate{
	0%{-webkit-transform: rotate(0deg);transform: rotate(0deg);}
	100%{-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}
/***** End On Over Mini Circles *****/