/*
	create by nasir farhadi
	email : nasirfarhadi92@gmail.com
	Github : nasirfarhadi92
*/

	.holderCircle{
		width:300px;
		height:300px;
		border-radius:100%;
	
	
		position: absolute;
            top:50%;
            left:50%;
            width:100%;
            transform:translate(-50%,-50%);
            text-align: center;
	}
	
	/* .holderCircle::after{
		content:'';
		width:500px;
		height:500px;
		border-radius:100%;
		border:1px solid #000;
		position:absolute;
		top:0;
	} */

	.dotCircle{
		width:100%;
		height:100%;
		position:absolute;
		margin:auto;
		top:0;
		left:0;
		right:0;
		bottom:0;
		border-radius:100%;
		z-index:20;
	}

	.dotCircle  .itemDot{
		display:block;
		width:50px;
		height:50px;
		
		position:absolute;
	   
		
		border-radius:100%;
		text-align: center;
		line-height: 50px;
		font-size:30px;
		z-index:3;
		cursor:pointer;		
	}
	.dotCircle  .item_on{background:#2c2c2c; border:1px solid #2c2c2c;}
	.dotCircle  .item_off{background:#fff; border:1px solid #2c2c2c;}
	.dotCircle  .itemDot i{line-height:48px;margin:0;padding:0;}
		
		
	
	
	
	
	.dotCircle .itemDot.active{
		background:#f96c27;
		border:1px solid #f96c27!important;
		color:#fff;
		transition:0.5s;
		
	}
	.dotCircle .itemDot.active i{color:#fff!important}
	.dotCircle .itemDot.active{
		border-color:#f96c27;
	}	
	
	.dotCircle  .itemDot .forActive{
		width:56px;
		height:56px;
		position:absolute;
		top:0;
		left:0;
		right:0;
		bottom:0;
		display:none;
	}
	
	.dotCircle  .itemDot .forActive::after{
		content: '';
		width: 5px;
		height: 5px;
		border: 3px solid #f96c27;
		bottom: -22px;
		left: -8px;
		filter: blur(2px);
		position: absolute;
		border-radius: 100%;
	}
	
	.dotCircle  .itemDot .forActive::before{
		content: '';
		width: 6px;
		height: 6px;
		filter: blur(5px);
		top: -15px;
		position: absolute;
		transform: rotate(-45deg);
		border: 6px solid #f96c27;
		right: -20px;
	}
	
	
	.dotCircle  .itemDot.active .forActive{
		display:block;
	}
	
	
		
	
	
	
	
	
	.contentCircle{
		width: 100%;
		height: 50px;
	
	
		color: #fff;
		position: relative;
		top: 0px;
		right: 0;
		bottom: 0;
		left: 0;
	
		margin: auto;
	}
	
	.contentCircle .CirItem{
	
		color: #222;
		position: absolute;
		text-align: center;
		bottom: 0;
		left: 0;
		opacity: 0;
		transform: scale(0);
		transition: 0.5s;
		font-weight: bold;
		;
		width: 100%;
		height: 100%;
		top: 0;
		right: 0;
		margin: auto;
	  font-size:16px;
	  font-weight:500;
		line-height: 50px;
	}
	
	.CirItem.active{
		z-index:1;
		opacity:1;
		transform:scale(1);
		transition:0.5s;
	}
	   .course-option .optionItem2{
		
		
		
		position: absolute;
	text-align:center;
		bottom: 0;
		left: 0;
		opacity: 0;
		transform: scale(0);
		transition: 0.5s;
		
		width: 100%;
		height: 100%;
		top: 0;
		right: 0;
		margin: auto;
	
	
		
	}

	   
	   .optionItem.active{
		z-index:99;
		opacity:1;
		-webkit-transform: rotateY(0deg);
	-moz-transform: rotateY(0deg);
	-ms-transform: rotateY(0deg);
	transform: rotateY(0deg);
		transition:1s;
	}
	@media only screen and (min-width: 250px) and (max-width: 299px){
	
		.holderCircle {
			width: 250px;
			height: 250px;
			
		}
		.holderCircle::after {
			width: 100%;
			height: 100%;
		}
		
		.dotCircle{
			width: 100%;
			height: 100%;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			margin: auto;

		}
	
	
	}
@media only screen and (min-width: 200px) and (max-width: 279px){
	
		.holderCircle {
			width: 180px;
			height: 180px;
			
		}
		.holderCircle::after {
			width: 100%;
			height: 100%;
		}
		
		.dotCircle{
			width: 100%;
			height: 100%;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			margin: auto;

		}
	
	
	}
	
	
	
@media only screen and (min-width: 280px) and (max-width: 319px){
	
		.holderCircle {
			width: 250px;
			height: 250px;
			
		}
		.holderCircle::after {
			width: 100%;
			height: 100%;
		}
		
		.dotCircle{
			width: 100%;
			height: 100%;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			margin: auto;

		}
	
	
	}
	
			@media only screen and (min-width: 319px) and (max-width: 599px){
	
		.holderCircle {
			width: 300px;
			height: 300px;
			
		}
		.holderCircle::after {
			width: 100%;
			height: 100%;
		}
		
		.dotCircle{
			width: 100%;
			height: 100%;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			margin: auto;

		}
	
	
	}
	@media only screen and (min-width: 600px) and (max-width: 767px){
		.holderCircle {
			width: 350px;
			height: 350px;
			
		}
		.holderCircle::after {
			width: 100%;
			height: 100%;
		}
		
		.dotCircle{
			width: 100%;
			height: 100%;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			margin: auto;

		}

	
	}
	@media only screen and (min-width: 768px) and (max-width: 991px){
	
	}
	@media only screen and (min-width: 992px) and (max-width: 1199px){
	
	}
	@media only screen and (min-width: 1200px) and (max-width: 1499px){
	
	}
	
	@media only screen and (min-width: 1500px) {
	
	}