/*------------ Circular menu CSS ---------------*/

.iq-features{
	display:block;
	width: 100%;
	height: auto;
	font-family: 'Open Sans', sans-serif;
}
.pr-fm{
	font-size: 20px;
	color: #95732b;
	font-weight: 300px;
	text-align: center!important;
	font-family: 'Open Sans', sans-serif!important;
	text-transform: uppercase;
}
.circ-head{
	font-size: 80px;
	text-align: center;
}
.holderCircle { width: 1000px; height: 1000px; border-radius: 100%; position: relative; left: 5% }
.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: 160px; height: 60px; position: absolute;  color: #000; border-radius: 10px; font-weight: 700; line-height: 60px; font-size: 26px; z-index: 3; cursor: pointer; text-align: center;border: #444 1px solid; background: #95732b; }
.dotCircle  .itemDot .forActive { width: 56px; height: 56px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: none; }
.dotCircle  .itemDot.active .forActive { display: block; }
.round { position: absolute; left: 100px; top: 102px; width: 800px; height: 800px; border: 2px dotted #000; border-radius: 100%; -webkit-animation: rotation 100s infinite linear; }
.dotCircle .itemDot:hover, .dotCircle .itemDot.active { color: #444; transition: 0.5s;   /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7d4ac7+0,a733bb+100 */ background: #7d4ac7; /* Old browsers */ background: #fff; /* IE6-9 */ border: #000 1px solid; color:#95732b; }
.dotCircle .itemDot { font-size: 26px; text-align: center; }
.contentCircle { z-index:999999;width: 480px; border-radius: 100%; color: #222222; position: relative; top: 28%; left: 50%; transform: translate(-50%, -50%); background-color:#8C4445!important; }
.contentCircle .CirItem { border-radius: 100%; color: #222222; position: absolute; text-align: center; bottom: 0; left: 0; opacity: 0; transform: scale(0); transition: 0.5s; font-size: 15px; width: 100%; height: 100%; top: 0; right: 0; margin: auto; }
.CirItem.active { z-index: 1; opacity: 1; transform: scale(1); transition: 0.5s; }
.contentCircle .CirItem i { font-size: 180px; position: absolute; top: 0; left: 50%; margin-left: -90px; color: #000000; opacity: 0.1; }
    .bg-1{width: 500px; height: 500px; background: url("/catalog/view/assets/images/fougere.png") center center no-repeat; position: absolute; top: 0; background-size:contain;}
    .bg-2{width: 500px; height: 500px; background: url("/catalog/view/assets/images/woody.png") center center no-repeat; position: absolute; top: 0; background-size:contain;}
    .bg-3{width: 500px; height: 500px; background: url("/catalog/view/assets/images/floral.png") center center no-repeat; position: absolute; top: 0; background-size:contain;}
    .bg-4{width: 500px; height: 500px; background: url("/catalog/view/assets/images/citrus.png") center center no-repeat; position: absolute; top: 0; background-size:contain;}
    .bg-5{width: 500px; height: 500px; background: url("/catalog/view/assets/images/fruity.png") center center no-repeat; position: absolute; top: 0; background-size:contain;}
    .bg-6{width: 500px; height: 500px; background: url("/catalog/view/assets/images/oriental.png") center center no-repeat; position: absolute; top: 0; background-size:contain;}
    .bg-7{width: 500px; height: 500px; background: url("/catalog/view/assets/images/chypre.png") center center no-repeat; position: absolute; top: 0; background-size:contain;}
.bg-5 img{width:100%; height: auto;}
.sm-head{
	color:#fff;
	background:#95732b;
	font-size: 16px;
	text-transform: uppercase;
	font-weight:600;
	opacity: 0.6;
	padding-top: 5px;
	padding-bottom: 5px;
	margin-bottom: 30px;
}
.link-list{display: block;
margin-bottom: 10px;}
.link-list:last-child{
	margin-bottom: 0px;
}
.link-list a{
	font-size: 22px;
	text-decoration-line: underline;
	color:#000;
	text-transform: uppercase;
	font-weight:600;
	
}
.contentCircle .CirItem li{
	list-style: none;
}
.bg-1, .bg-2, .bg-3, .bg-4, .bg-5, .bg-6, .bg-7{
	z-index:-99999;
}
.circle-links{
    height:300px;
    overflow:auto;
        scrollbar-color: #aab7cf00 transparent
}
.title-box .title { font-size: 60px; font-weight: 600; letter-spacing: 2px; position: relative; z-index: -1; }
        .title-box span { text-shadow: 0 10px 10px rgba(0, 0, 0, .15); font-weight: 300; color: #5f0000; }
        .title-box p {color:#000; font-size: 18px; line-height: 30px; margin-bottom: 30px; font-weight: 600; }
@media only screen and (min-width:300px) and (max-width:599px) {
	.holderCircle { width: 340px; height: 340px; margin: 0px;}
	.link-list a{
	font-size: 13px;
	color:#000;
	
}
	.link-list a, .sm-head{
		font-size: 9px;
	}
	.p-circ{
	margin-left: 0px;
}
	.dotCircle .itemDot { font-size: 14px; text-align: center; display: block; width: 70px; height: 25px; position: absolute; background: #95732b; color: #000; border-radius: 5px; line-height: 25px; z-index: 3; cursor: pointer; border: #000 1px solid;padding: 0px; }
	.holderCircle::after { width: 100%; height: 100%; }
	.dotCircle { width: 100%; height: 100%; top:-30px; left:-70px; right: 0; bottom: 0; margin: auto; }
	.round { position: absolute; left: 0px; top: 17px; width: 280px; height: 280px; border: 1px dotted #000; border-radius: 100%; -webkit-animation: rotation 100s infinite linear; }
	.bg-1, .bg-2, .bg-3, .bg-4, .bg-5, .bg-6, .bg-7{
		width:200px; height: 200px;
	}
	.contentCircle { width: 180px; border-radius: 100%; color: #222222; position: relative; top: 50px; left: 40%; transform: translate(-50%, -50%); }
	.contentCircle .CirItem i { font-size: 80px;}
	.contentCircle .title{font-size: 14px;}
	
	.title-box .title { font-weight: 600; letter-spacing: 2px; position: relative; z-index: -1; }
        .title-box span { text-shadow: 0 10px 10px rgba(0, 0, 0, .15); font-weight: 300; color: #5f0000; }
        .title-box p {font-size: 12px; line-height: 12px; margin-top:-32px; margin-bottom: 10px; font-weight: 400; }
	.sm-head{padding-bottom: 1px; padding-top:1px; font-size: 10px; margin-bottom: 5px;}
	.link-list{margin-bottom: 0px;}
	.circ-head{font-size:40px;}
	.pr-fm{
		font-size: 14px;
		margin-bottom: 20px;
	}
}
@media only screen and (min-width:600px) and (max-width:767px) { }
@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) { }


/*------------ Circular menu CSS ---------------*/