/* ================ IGNORE ================ */

.cotemt_box{ padding:0px;
margin:0px;}

.cotemt_box_menu{ padding:0px;
margin:0px;
width:30%;
float:left;}

.cotemt_box_menu ul{ list-style-type:none;}

.cotemt_box_menu ul li{ display:block;}

.cotemt_box_menu ul li a{ font-family: 'ProximaNova-Light';
font-size:16px;
color:#F00;
text-decoration:none;
font-weight:normal;
cursor:pointer;}

.cotemt_box_menu ul li a:hover{ color:#f56723 !important;}

.cotemt_box_menu_content{ padding:0px;
margin:0px;
width:30%;
float:left;}


/* Just for positioning the menu correctly */
#menu {
	position: relative;
	width: 350px;
	top:90px;
	left: 175px;
}

.myCls{
	padding: 30px;
}

.myCls h3{
	color: #000;
	font-size: 25px;
	font-weight: bold;
	padding-top: 0;
}

.myCls h4 {
    color: #fff;
    font-size: 25px;
    font-weight: bold;
    padding-top: 0;
    margin-bottom: 7px;
}

.myCls a{
	background: #ffbd7c;
	color: #000;
	text-transform: uppercase;
	padding: 9px 25px;
	display: inline-block;
	border-radius: 25px;
}

.myCls a:hover{
	text-decoration: none;
}

.myCls p {
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    line-height: 30px;
}

.myCls p span{
	color: #000;
}

/* We're using overflow: hidden; so we need to create a fake shadow */
.faux-shadow {
	position: absolute;
	content:  " ";
	width: 150px;
	height: 150px;
	top: 116px;
	left: -7px;
	box-shadow: 0 0 50px rgba(0,0,0,0.3);
	border-radius:470px;
	-webkit-transition: all 0.4s linear;
	-moz-transition: all 0.4s linear;
	-ms-transition: all 0.4s linear;
	-o-transition: all 0.4s linear;
	transition: all 0.4s linear;
	z-index: -9999;
}

/* The button in the middle the user will press to activate the menu */


#on-button {
    border-radius: 170px;
    width: 250px;
    height: 250px;
    color: #fff;
    float: left;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    cursor: pointer;
    background-color: transparent;
    border: 3px solid #fcae61;
    pointer-events: none;
    font-size: 5em;
    margin-top: 92px;
    margin-left: -34px;
    text-shadow: 0 1px 1px rgba(0,0,0,0.3);
    background-color: transparent;
    /* margin: 0 auto; */
}

/* On hover */
#on-button:hover {
	box-shadow: inset 0 125px 100px -100px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0,0,0,0.2);	
}

/* On click */
#on-button:active {
	box-shadow: inset 0 125px 100px -100px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0,0,0,0.2),
	inset 0 0 30px rgba(0,0,0,0.3);
}

/* The spans inside the on button will rotate */
#on-button > span {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    -webkit-transition: -webkit-transform 0.2s linear;
    -moz-transition: -moz-transform 0.2s linear;
    -ms-transition: -moz-transform 0.2s linear;
    -o-transition: -moz-transform 0.2s linear;
    transition: -moz-transform 0.2s linear;
    display: block;
    width: 230px;
    height: 230px;
    background: #f2f2f2;
    border-radius: 50%;
    pointer-events: auto;
    position: absolute;
    z-index: 3;
    top: 86px;
    left: -40px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding: 5px;
    margin: 16px;
    box-shadow: inset 0 -112px 100px -100px rgba(0, 0, 0, 0.5);
}

#on-button > span img{ padding-top:60px;
margin:0 auto;
padding-left:20px;}

/* Change shadow o hover so it matches the container's shadow */
#on-button:hover > span {
	box-shadow: inset 0 112px 100px -100px rgba(0, 0, 0, 0.5);
}


/* Rotate the last span around so it is the backface of the span */
#on-button > span:last-of-type {
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	-o-transform: rotateY(180deg);
	-ms-transform: rotateY(180deg);
	transform: rotateY(180deg);
}

/* Append a pseudo element with a white background which will 
   create the illusion that the on button has a hole in it */
#on-button:after {
	position: absolute;
	content: " ";
	top: 100;
	left:-20px;
	width:  150px;
	height: 150px;
	margin: 15px;
	border-radius: 120px;
	background: #fff;
	z-index: 2;
}

/* When the on input is checked, rotate the spans around 180 degrees */
#on-check:checked + #on-button > span:first-of-type {
	-webkit-transform: rotateY(180deg);	
	-moz-transform: rotateY(180deg);	
	-o-transform: rotateY(180deg);	
	-ms-transform: rotateY(180deg);	
	transform: rotateY(180deg);	
}
#on-check:checked + #on-button > span:last-of-type {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
    text-align: center;
}

/* Also change the width and height of the faux shadow */
#on-check:checked ~ .faux-shadow {
	width: 470px;
	height: 470px;
	top: -50px;
	left: -175px;	
}

/* So the info divs wont appear should the button be unchecked */
#menu #on-check:not(:checked) ~ .info {
	opacity: 0;

}

/* Show info sections with a delay of 0.4s to give the menu time to finish the inital
   sprawling out animation */
#menu #on-check:checked ~ .info {
	/* -webkit-transition: all 0.2s linear 0.4s;
	-moz-transition: all 0.2s linear 0.4s;
	-ms-transition: all 0.2s linear 0.4s;
	-o-transition: all 0.2s linear 0.4s;
	transition: all 0.2s linear 0.4s; */
	/*background-color: rgba(255, 255, 255, 0.2);
		border-color: rgba(255, 255, 255, 0.3);*/
	    margin-top: 100px;
    margin-left: 150px;
}


/* Sprawl out the menu items when the on button is checked */
#on-check:checked ~ #menu-items {
    width: 400px;
    height: 400px;
    left: -110px;
    top: 15px;
}

/* The styling of the menu items container div */
#menu-items {
	width: 150px;
	height: 150px;
	border-radius: 250px;
	background: #aaa;
	position: absolute;
	top: 116px;
	left:-5px;
	z-index: 1;
	overflow: hidden;
	-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
	box-shadow: 0 0 15px rgba(0,0,0,0.3);
	-webkit-transition: all 0.4s linear;
	-moz-transition: all 0.4s linear;
	-ms-transition: all 0.4s linear;
	-o-transition: all 0.4s linear;
	transition: all 0.4s linear;
}

/* I separated the pieces of the menu into two divs, top and bottom. */
#menu-items .top, #menu-items .bottom {
    width: 100%;
    float: left;
    z-index: 1;
    height: 50%;
    /* border-top: 2px solid #FFF; */
    background: -webkit-linear-gradient(#515151, #323232);
    background: -o-linear-gradient(#515151, #323232);
    background: -moz-linear-gradient(#515151, #323232);
    background: linear-gradient(#515151, #323232);
} 


#menu-items .bottom {
	top: 50%;
	background:#000;
}

/* The middle div is largely to fix a bug where the content would exceed the 
   border radius when overflow: hidden; was set */
   
#menu-items .middle {
	height: 100%;
	white-space: nowrap;
	
}

/* Styling the background pieces. These containers don't do anything, they are 
   just for design */
   
#menu-items .middle .bg-piece {
	width: 50%;
	height: 50%;
	text-align: center;
	display: inline-block !important;
	/* background: #f58f1e; */
	font-size: 2.5em;
	position: absolute;
	display: block;
}

/* It was important to make sure all the background pieces were in the correct
   position and this required a little bit of experimenting. The code below 
   makes sure everything is positioned in the correct order */
   
#menu-items .middle > div .bg-piece:nth-of-type(2) {
    position: absolute;
    left: 50%;
    /* border-bottom: 4px solid #fff; */
}

#menu-items .bg-piece.active {
    background: #000 !important;
    background: #000 !important;
    background:#000 !important;
    background: #000 !important;
}


#menu-items .middle .top .bg-piece:nth-of-type(2):after {
	border-color:transparent transparent transparent;
	top: 0px;
	left: 50%;
}

#menu-items .middle .top .bg-piece:nth-of-type(1) {
    background-color: #e21a2d;
    /* border-bottom: 4px solid #fff; */
    /* border-right: 4px solid #fff; */
}
#menu-items .middle .top .bg-piece:nth-of-type(2) { 
	box-shadow: inset 125px 0 -36px 35px rgba(0, 0, 0, 0.1), inset -7px -161px 72px rgba(0, 0, 0, 0.1);
}

#menu-items .middle .bottom .bg-piece:nth-of-type(1) {
    background-color: #9d1882;
    /* border-right: 4px solid #fff; */
}

#menu-items .middle .bottom .bg-piece:nth-of-type(2) { 
background-color: #f68b1f;
}

#menu-items .middle > div .bg-piece:nth-of-type(1) {
	/*box-shadow: inset -125px 0 36px -35px rgba(0, 0, 0, 0.1);*/
}

#menu-items .middle > div .bg-piece:nth-of-type(3) {
	width: 50%;
	right: 0;
	/*box-shadow: inset 125px 0 36px -35px rgba(0, 0, 0, 0.1);*/
}

/* ------------------------------------------------------------ */

/* The labels are what contain the icons */
#menu-items label {
	position: absolute;
	z-index: 9999999;
	font-size: 2em;
	border-radius: 5px;
	cursor: pointer;
padding:0px;
margin:0 auto;
text-align:center;
}


/* On hover I thought they looked nice with a little blue glow! */
#menu-items label:hover {
	background:#d5a147 !important;
}

#menu-items label.active{
	background:#930;
}

/* The is the info boxes, these appear when the menu item is selected */
#menu .info {
	opacity: 0;
	position: absolute;
	left:311px;
	top: -90px;
	display: inline-block;
	/*background-color:#0F0;*/
	padding: 0px;
	color: #343434;
	z-index: 9999999;
	/*background: #eee;*/
	/*border: 1px solid #ddd;*/
	font-weight: bold;
	border-radius: 8px;
	width:1200px;
	height:auto;
	
}

/* A little arrow for the menu boxes */
/*#menu .info:after {
	position: absolute;
	content: " ";
	top: 37px;
	left: 8px;
	border-color: #f3f3f3 transparent transparent transparent;
	border-width: 10px;
	border-style: solid;
	
}

/* A border for the arrow! */
/*#menu .info:before {
	position: absolute;
	content: " ";
	top: 38px;
	left: 8px;
	border-color: #ddd transparent transparent transparent;
	border-width: 10px;
	border-style: solid;	
}

/* Hide the radio and checkboxes */
#menu input[type='checkbox'], input[type='radio'] { display: none; }

/* Position the icons correctly */
#menu-items .top .ss-home {
    left: 49px;
    top: 206px;
}
#menu-items .top .ss-heart {  top: 90px; left: 241px; }
#menu-items .top .ss-compass {
    left: 195px;
    top: 93px;
}
#menu-items .bottom .ss-rss {
    left: 194px;
    top: 348px;
}
#menu-items .bottom .ss-star {  top: 181px; left: 243px; }
#menu-items .bottom .ss-refresh {
    left: 356px;
    top: 156px;
}

#menu-items .top .ss-compass img{ width:auto !important;}
#menu-items .bottom .ss-rss img{ width:auto !important;}
#menu-items .bottom .ss-refresh img{ width:auto !important;}
#menu-items .top .ss-home img{ width:auto !important;}


/* The below code rotates the menu items to the correct position
   when each is clicked. */

#menu-items .top .ss-home { 
	-webkit-transform: rotateZ(-66deg); 
	-moz-transform: rotateZ(-66deg); 
	-ms-transform: rotateZ(-66deg); 
	-o-transform: rotateZ(-66deg); 
	transform: rotateZ(-66deg); 
}

#menu-items .bottom .ss-rss { 
	-webkit-transform: rotateZ(-114deg); 
	-moz-transform: rotateZ(-114deg); 
	-ms-transform: rotateZ(-114deg); 
	-o-transform: rotateZ(-114deg); 
	transform: rotateZ(-114deg); 
}

#menu-items .bottom .ss-refresh { 
	-webkit-transform: rotateZ(180deg); 
	-moz-transform: rotateZ(180deg); 
	-ms-transform: rotateZ(180deg); 
	-o-transform: rotateZ(180deg); 
	transform: rotateZ(180deg); 
}


#info-refresh:checked ~ #menu-items{
	-webkit-transform: rotateZ(270deg); 
	-moz-transform: rotateZ(270deg); 
	-ms-transform: rotateZ(270deg); 
	-o-transform: rotateZ(270deg); 
	transform: rotateZ(270deg); 
}

#info-home:checked ~ #menu-items{
	-webkit-transform: rotateZ(90deg); 
	-moz-transform: rotateZ(90deg); 
	-ms-transform: rotateZ(90deg); 
	-o-transform: rotateZ(90deg); 
	transform: rotateZ(90deg); 
}


#info-compass:checked ~ #menu-items{
	-webkit-transform: rotateZ(0deg); 
	-moz-transform: rotateZ(0deg); 
	-ms-transform: rotateZ(0deg); 
	-o-transform: rotateZ(0deg); 
	transform: rotateZ(0deg); 
}


#info-rss:checked ~ #menu-items{
	-webkit-transform: rotateZ(180deg); 
	-moz-transform: rotateZ(180deg); 
	-ms-transform: rotateZ(180deg); 
	-o-transform: rotateZ(180deg); 
	transform: rotateZ(180deg); 
}


/* --------------------------------------------------------------- */

/* Highlight the selected item */
#info-home:checked ~ #menu-items .ss-home,
#info-heart:checked ~ #menu-items .ss-heart,
#info-rss:checked ~ #menu-items .ss-rss,
#info-star:checked ~ #menu-items .ss-star,
#info-refresh:checked ~ #menu-items .ss-refresh,
#info-compass:checked ~ #menu-items .ss-compass { 
	text-shadow: 0 0 15px #3facf2;
	color: #24434f;
}

/* Make opacity of the info boxes 1 when they are clicked on */
#info-home:checked ~ .home-info,
#info-heart:checked ~ .heart-info,
#info-rss:checked ~ .rss-info,
#info-star:checked ~ .star-info,
#info-refresh:checked ~ .refresh-info,
#info-compass:checked ~ .compass-info {
	opacity: 1;
}


#info-home:not(:checked) ~ .home-info,
#info-heart:not(:checked) ~ .heart-info,
#info-rss:not(:checked) ~ .rss-info,
#info-star:not(:checked) ~ .star-info,
#info-refresh:not(:checked) ~ .refresh-info,
#info-compass:not(:checked) ~ .compass-info {
	opacity: 0;
	visibility: hidden;
}





.choksey_small_circle{ padding:0px;}

.choksey_small_circle p { padding:0px;
margin:0px;
 font-family:Arial, Helvetica, sans-serif;
font-size:20px;
color:#FFF;
-ms-transform: rotate(7deg); /* IE 9 */
-webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
transform: rotate(7deg);
font-weight:normal;}

.choksey_small_circle p span{ font-family:Arial, Helvetica, sans-serif;
font-size:20px;
color:#FFF;
-ms-transform: rotate(7deg); /* IE 9 */
-webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
transform: rotate(7deg);
font-weight:normal;}

/**************************************26-11-16***************************************************/

#on-button > span {box-shadow:none; border: 10px solid #fff;}

#on-button:hover > span {box-shadow:none;}

#on-button > span img{ padding-top:41px;
padding-left:10px;}