/*************************
*
*   GENERAL
*
*************************/
* {margin: 0; padding: 0; -webkit-backface-visibility: hidden; }
.bcircle {height:500px;margin-top:50px;}
.wrapper {position: relative;  } 
.box_table {display:table;width:275px;height:275px;border-radius:50%;text-align:center; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;}
.box_table div {display:table-cell;vertical-align:middle;}
.box_game {position: relative; width: 230px; margin: 0 auto; margin-top: 180px;} 
.tab-section {position:absolute;right:-490px;top:-60px; width:250px;}
.tab-section h3 {font-size: 18px; font-family: "Source Sans Pro"; color: rgb( 51, 49, 50 ); font-weight:600; } 
.tab-section a {color:#ee383f;}
.tab-section p {font-size: 14px; font-family: "Source Sans Pro"; color: rgb( 51, 49, 50 ); } 

/*************************
*
*   MAIN CIRCLE
*
*************************/

/** Circle general **/
.circle {position: relative;margin:0 auto; width: 500px; height: 500px; border-radius: 50%; background: #e9e9e9; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } 
.circle_white {background-color: #fff;width:275px;height:275px; border-radius:50%;position: absolute; margin: auto; left:0;right:0;top:0; bottom:0;}
.circle_g {background-color: #e9e9e9;width:355px;height:355px; border-radius:50%;position: absolute; margin: auto; left:0;right:0;top:0; bottom:0;}
.circle_white_one {background-color: #fff;width:425px;height:425px; border-radius:50%;position: absolute; margin: auto; left:0;right:0;top:0; bottom:0;}

/** Circle Attention to Details **/
.circle_bg {position: absolute; margin: auto; left:0;right:0;top:0; bottom:0; display:none; background-image: url('../img/target.png'); width: 500px; height: 500px; border-radius: 50%; background-color: transparent; -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -ms-transform: rotate(30deg); -o-transform: rotate(30deg); transform: rotate(30deg); } 
.circle.circle_three {background-color: #ee383f;}
.circle_details img {display:none;}
.circle_three .circle_details img{display:block;width:200px;height:200px; border-radius:50%;position: absolute; margin: auto; left:0;right:0;top:0; bottom:0;}
.circle_three .circle_g {background-color: #ee383f;}

/** Circle Focus **/
.circle_logo{background-color: #fff;width:275px;height:275px; border-radius:50%;position: absolute; margin: auto; left:0;right:0;top:0; bottom:0;text-align:center;} 

/** Circle Clarity **/
.circle_clarity {display:none;background-color: #353535;width:275px;height:275px; border-radius:50%;position: absolute; margin: auto; left:0;right:0;top:0; bottom:0;}
.circle_clarity p  {font-size: 18px; font-family: "Source Sans Pro"; color: rgb( 255, 255, 255 ); text-align: center; font-weight:600; padding-top:50px; }
.circle_two .circle_clarity {display: block;}

/** Circle Teamwork **/
.circle_teamwork img {display:none;}
.circle_five .circle_teamwork img{display:block;width:200px;height:200px; border-radius:50%;position: absolute; margin: auto; left:0;right:0;top:0; bottom:0;}

/** Circle Progress **/
.circle_progress img {display:none;}
.progress_line {display:none;background-image:url("../img/progress_line.png"); background-repeat: no-repeat; width:330px; height:90px;top: 30px; position: absolute; right: 62px;}
.circle_six .progress_line {display:block;}
.circle_six .circle_progress img{display:block;width:200px;height:200px; border-radius:50%;position: absolute; margin: auto; left:0;right:0;top:0; bottom:0;}

/** Circle Creativity **/
.circle_creativity {display:none;background-color: #fff;width:275px;height:275px; border-radius:50%;position: absolute; margin: auto; left:0;right:0;top:0; bottom:0;}
.circle_four .circle_creativity {display:block;}
.circle_four .circle_creativity img {width:249px;height:249px;position: absolute; margin: auto; left:0;right:0;top:0; bottom:0;}

/*************************
*
*   LITTLE CIRCLES
*
*************************/

/** Menu Text **/
.circle ul {height: 500px;position:relative;  width:485px;   margin-left: -25px;}
.circle li:before{display: none;}
.circle li {position: absolute; background: white; list-style: none; text-align: center;padding: 0px;}
.circle li a {box-sizing: content-box;-moz-box-sizing: content-box; -webkit-box-sizing: content-box;line-height: 15px; outline:none; border:1px solid #ccc; font-size: 16px; font-family: "Source Sans Pro"; color: rgb( 77, 77, 79 ); font-variant: small-caps; font-weight:600;color:#4f4f51;text-decoration:none;padding:8px 12px 11px; display:block; }
.circle li a:hover {color:#EE383F;}
.circle_one li.one a,.circle_two li.two a, .circle_three li.three a, .circle_four li.four a, .circle_five li.five a, .circle_six li.six a {color:#EE383F;}
.circle li:nth-child(1) {top: 15px; left: 235px; }
.circle li:nth-child(2) {top: 125px; left: 410px; }
.circle li:nth-child(3) {top: 325px; left: 390px; }
.circle li:nth-child(4) {top: 435px; left: 225px; }
.circle li:nth-child(5) {top: 125px; left: 40px; }
.circle li:nth-child(6) {top: 325px; left: 40px; }
.circle_three li:nth-child(3){left: 350px;top:310px;}
.circle_two li:nth-child(1), .circle_two li:nth-child(2), .circle_two li:nth-child(3), .circle_two li:nth-child(4), .circle_two li:nth-child(5), .circle_two li:nth-child(6), .circle_two .box_table, .circle_two .circle_clarity {
-webkit-transform: rotate(60deg);  -moz-transform: rotate(60deg); -ms-transform: rotate(60deg); -o-transform: rotate(60deg); transform: rotate(60deg); }
.circle_three li:nth-child(1), .circle_three li:nth-child(2), .circle_three li:nth-child(3), .circle_three li:nth-child(4), .circle_three li:nth-child(5), .circle_three li:nth-child(6), .circle_three .box_table, .circle_three .circle_details img {
-webkit-transform: rotate(120deg); -moz-transform: rotate(120deg); -ms-transform: rotate(120deg); -o-transform: rotate(120deg); transform: rotate(120deg); }
.circle_four li:nth-child(1), .circle_four li:nth-child(2), .circle_four li:nth-child(3), .circle_four li:nth-child(4), .circle_four li:nth-child(5), .circle_four li:nth-child(6), .circle_four .box_table,  .circle_four .circle_creativity img  {
-webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); }
.circle_five li:nth-child(1), .circle_five li:nth-child(2), .circle_five li:nth-child(3), .circle_five li:nth-child(4), .circle_five li:nth-child(5), .circle_five li:nth-child(6), .circle_five .box_table, .circle_five .circle_teamwork img {
-webkit-transform: rotate(240deg); -moz-transform: rotate(240deg); -ms-transform: rotate(240deg); -o-transform: rotate(240deg); transform: rotate(240deg); }
.circle_six li:nth-child(1), .circle_six li:nth-child(2), .circle_six li:nth-child(3), .circle_six li:nth-child(4), .circle_six li:nth-child(5), .circle_six li:nth-child(6), .circle_six .box_table, .circle_six .circle_progress img, .circle_six .progress_line  {
-webkit-transform: rotate(300deg); -moz-transform: rotate(300deg); -ms-transform: rotate(300deg); -o-transform: rotate(300deg); transform: rotate(300deg); }

/** Menu Hover **/
.circle_one {-webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); }
.circle_two {-webkit-transform: rotate(-60deg); -moz-transform: rotate(-60deg); -ms-transform: rotate(-60deg); -o-transform: rotate(-60deg); transform: rotate(-60deg); }
.circle_three {-webkit-transform: rotate(-120deg); -moz-transform: rotate(-120deg); -ms-transform: rotate(-120deg); -o-transform: rotate(-120deg); transform: rotate(-120deg); }
.circle_four {-webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); -ms-transform: rotate(-180deg); -o-transform: rotate(-180deg); transform: rotate(-180deg); }
.circle_five {-webkit-transform: rotate(-240deg); -moz-transform: rotate(-240deg); -ms-transform: rotate(-240deg); -o-transform: rotate(-240deg); transform: rotate(-240deg); }
.circle_six {-webkit-transform: rotate(-300deg); -moz-transform: rotate(-300deg); -ms-transform: rotate(-300deg); -o-transform: rotate(-300deg); transform: rotate(-300deg); }

/*************************
*
*   Button View Circle
*
*************************/
#on-check {display:none;}
/* The button in the middle the user will press to activate the menu */
#on-button {/*background:#E9E9E9;*/top: -40px;left: 5px;border-radius: 50%; width: 230px; height: 230px; color: #fff; float: left; box-sizing: border-box; -moz-box-sizing: border-box; cursor: pointer; z-index:1; position: absolute;  pointer-events: none; font-size: 5em;}
/* On hover */
#on-button:hover {}
/* On click */
#on-button:active {}

/* 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: 200px; height: 200px; border-radius: 50%;background:#fff; pointer-events: auto; position: absolute; z-index: 3; top: 0; left: 0; box-sizing: border-box; -moz-box-sizing: border-box; padding: 34px; margin: 14px; }
.ss-plus::before {content: ""; position: absolute; height: 75px; width: 184px; background-image: url('../img/logo_big.png'); background-repeat: no-repeat;top: 60px;left: 7px;background-size: cover;}
.ss-minus::before {content: ""; position: absolute; height: 75px; width: 184px; background-image: url('../img/logo_big.png'); background-repeat: no-repeat; top: 60px; left: 7px; background-size: cover;}

/* Change shadow o hover so it matches the container's shadow */
#on-button:hover > span {}
#on-button span img {margin-left:-35px;position: absolute;}

/* 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: 0; left: 0; width:  0px; height: 0px; 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{background:#fff;}
#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);	
}

.box_c {width: 650px; height: 650px; top:-175px; left:-175px;position: absolute; } 
.circle {width: 500px; height: 500px; top:0px; left:0px; overflow: visible; margin-left:45px; } 

/*
Sprawl out the menu items when the on button is checked 
#on-check:checked ~ .box_c {width: 650px; height: 650px; top:-175px; left:-175px; } 
#on-check:checked ~ .box_c .circle {width: 500px; height: 500px; top:0px; left:0px; overflow: visible; margin-left:45px; } 

The styling of the menu items container div 
.box_c {width: 0px; height: 0px; position: absolute; top: 0; left: 0; overflow: hidden;
 -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; }
.circle {margin-left:45px; width: 150px; height: 150px; border-radius: 250px; position: absolute; top: 0; left: 0; overflow: hidden;
 -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; }
*/

@media screen and (max-width: 1229px) {
	/*************************
	*
	*   GENERAL
	*
	*************************/
	.bcircle {height:230px;margin-top:50px;}
	.box_table {display:table;width:275px;height:275px;}	
	.box_game {position: relative; width: 230px; margin-top: 180px; margin-left: 145px;} 
	.tab-section {right:-350px;top:-80px; }	
	.b725{width:725px;margin:0 auto;}

	/*************************
	*
	*   MAIN CIRCLE
	*
	*************************/

	/** Circle general **/
	.circle {width: 400px; height: 400px;} 
	.circle_white {width:175px;height:175px;}
	.circle_g {width:255px;height:255px;}
	.circle_white_one {width:325px;height:325px;}

	/** Circle Attention to Details **/
	.circle_bg {background-size: cover; width: 400px; height: 400px;} 
	.circle_three .circle_details img {width:100px;height:100px;}

	/** Circle Focus **/
	.circle_logo{width:175px;height:175px;} 

	/** Circle Clarity **/
	.circle_clarity {width:175px;height:175px;}

	/** Circle Teamwork **/
	.circle_five .circle_teamwork img{width:100px;height:100px;}

	/** Circle Progress **/
	.progress_line {width:253px; height:69px;top: 34px; right: 51px;background-size: cover;}
	.circle_six .circle_progress img{width:100px;height:100px;}

	/** Circle Creativity **/
	.circle_creativity {width:175px;height:175px; }
	.circle_four .circle_creativity img {width:120px;height:120px;position: absolute; margin: auto; left:0;right:0;top:0; bottom:0;}

	/*************************
	*
	*   LITTLE CIRCLES
	*
	*************************/

	/** Menu Text **/
	.circle ul {height: 400px;position:relative;  width:385px;   margin-left: -25px;}	
	.circle li a {width: 85px;}
	.circle li:nth-child(1) {top: 25px; left: 170px; }
	.circle li:nth-child(2) {top: 105px; left: 310px; }
	.circle li:nth-child(3) {top: 265px; left: 310px; }
	.circle li:nth-child(4) {top: 345px; left: 175px; }
	.circle li:nth-child(5) {top: 105px; left: 33px; }
	.circle li:nth-child(6) {top: 265px; left: 33px; }
	.circle_three li:nth-child(3){left: 300px;top:255px;}

	/*************************
	*
	*   Button View Circle
	*
	*************************/

	#on-button {top: -60px;left: -15px;width: 170px; height: 170px; }

	/* The spans inside the on button will rotate */
	#on-button > span { width: 140px; height: 140px;}
	.ss-plus::before {height: 52px; width: 128px;top: 36px; left: 5px; }
	.ss-minus::before {height: 52px; width: 128px; top: 36px; left: 5px;}

	.box_c {width: 500px; height: 400px; top:-175px; left:-175px; } 
	.circle {width: 400px; height: 400px; top:0px; left:0px; overflow: visible; margin-left:45px; } 

	/* Sprawl out the menu items when the on button is checked 
	#on-check:checked ~ .box_c {width: 500px; height: 400px; top:-175px; left:-175px; } 
	#on-check:checked ~ .box_c .circle {width: 400px; height: 400px; top:0px; left:0px; overflow: visible; margin-left:45px; } 

	 The styling of the menu items container div 
	.box_c {width: 0px; height: 0px; position: absolute; top: -50px; left: -50px;}
	.circle {margin-left:45px; width: 150px; height: 150px; border-radius: 250px; position: absolute; top: 0; left: 0;  }
	*/
}

@media screen and (max-width: 991px) {
	.tab-section {right:-320px;top:-80px; }	
	.progress_line {display:none;background-image:url("../img/progress_line_m2.png"); background-repeat: no-repeat; width:230px; height:69px;top: 45px; position: absolute; right: 68px;}

}