﻿
.col-row.circle-col-left	{width:860px !important; max-width: 100%;}

.circle-container	{width:100%; background-color: #ffffff; font-size: 0}
.circle-left		{display:inline-block; width:592px; vertical-align: top; padding-left: 28px; padding-top: 28px; padding-bottom: 28px; position: relative;}
.circle-left:after	{position:absolute; right:-25px; top:50%; margin-top: -10px; width: 0; height: 0; border-style: solid; border-width: 20px 0 20px 25px; content: ''; border-color: transparent transparent transparent #ffffff;}

.circle-box			{width:539px; height: 530px; position: relative;}

.circle			{width:95px; height: 95px; border-radius: 100%; background-color: !important; position: absolute; top: 0; left: 0; text-align: center; display: table; color:#ffffff; font-size: 12px; cursor: pointer; transition: 0.3s ease-out;}
.circle-inner	{display:table-cell; vertical-align: middle; width: 100%; height: 100%;}
.circle	img		{width:52px; height: auto; display: block; margin:0 auto 4px auto;}

.circle:hover	{background-color:#4d5357; color:#ffffff; transform: translateY(0px); transition: 0.3s ease-out;}

/* The Circlies */


/* 3 */
.three .circle-1		{left: 222px; background-color: #4b2942;}
.three .circle-2		{left: 412px; top: 326px; background-color: #aaa38e;}
.three .circle-3		{left: 31px; top: 326px; background-color: #aaa38e;}


/* 4 */
.four .circle-1		{left: 376px; top: 61px; background-color: #4b2942;}
.four .circle-2		{left: 376px; top: 372px; background-color: #aaa38e;}
.four .circle-3		{left: 66px; top: 372px; background-color: #aaa38e;}
.four .circle-4		{left: 66px; top: 61px; background-color: #5482ab;}

/* 5 */
.five .circle-1		{left: 222px; top: 0px; background-color: #4b2942;}
.five .circle-2		{left: 434px; top: 149px; background-color: #aaa38e;}
.five .circle-3		{left: 348px; top: 396px; background-color: #aaa38e;}
.five .circle-4		{left: 96px; top: 396px; background-color: #5482ab;}
.five .circle-5		{left: 11px; top: 149px; background-color: #5482ab;}

/* 6 */
.six .circle-1		{left: 222px; top: 0px; background-color: #4b2942;}
.six .circle-2		{left: 412px; top: 109px; background-color: #aaa38e;}
.six .circle-3		{left: 412px; top: 327px; background-color: #aaa38e;}
.six .circle-4		{left: 222px; top: 435px; background-color: #5482ab;}
.six .circle-5		{left: 33px; top: 327px; background-color: #5482ab;}
.six .circle-6		{left: 33px; top: 109px; background-color: #bed600; color:#333333;}

/* 7 */
.seven .circle-1		{left: 222px; background-color: #4b2942;}
.seven .circle-2		{left: 392px; top: 79px; background-color: #aaa38e;}
.seven .circle-3		{left: 437px; top: 263px; background-color: #aaa38e;}
.seven .circle-4		{left: 319px; top: 414px; background-color: #5482ab;}
.seven .circle-5		{left: 130px; top: 414px; background-color: #5482ab;}
.seven .circle-6		{left: 8px; top: 263px; background-color: #bed600; color:#333333;}
.seven .circle-7		{left: 53px; top:79px; background-color: #2c5e4f;}

/* 8 */
.eight .circle-1		{left: 222px; background-color: #4b2942;}
.eight .circle-2		{left: 376px; top: 62px; background-color: #aaa38e;}
.eight .circle-3		{left: 442px; top: 218px; background-color: #aaa38e;}
.eight .circle-4		{left: 377px; top: 371px; background-color: #5482ab;}
.eight .circle-5		{left: 222px; top: 435px; background-color: #5482ab;}
.eight .circle-6		{left: 67px; top: 371px; background-color: #bed600; color:#333333;}
.eight .circle-7		{left: 5px; top: 218px; background-color: #2c5e4f;}
.eight .circle-8		{left: 67px; top: 62px; background-color: #2c5e4f;}

/* 9 */
.nine .circle-1		{left: 222px; background-color: #4b2942;}
.nine .circle-2		{left: 361px; top: 49px; background-color: #aaa38e;}
.nine .circle-3		{left: 437px; top: 180px; background-color: #aaa38e;}
.nine .circle-4		{left: 413px; top: 324px; background-color: #5482ab;}
.nine .circle-5		{left: 296px; top: 421px; background-color: #5482ab;}
.nine .circle-6		{left: 149px; top: 422px; background-color: #bed600; color:#333333;}
.nine .circle-7		{left: 32px; top: 326px; background-color: #2c5e4f;}
.nine .circle-8		{left: 6px; top: 180px; background-color: #2c5e4f;}
.nine .circle-9		{left: 82px; top: 49px; background-color: #b8cfc9; color:#4d5357;}

/* 10 */
.ten .circle-1		{left: 222px; background-color: #4b2942;}
.ten .circle-2		{left: 352px; top: 40px; background-color: #aaa38e;}
.ten .circle-3		{left: 430px; top: 149px; background-color: #aaa38e;}
.ten .circle-4		{left: 430px; top: 286px; background-color: #5482ab;}
.ten .circle-5		{left: 352px; top: 394px; background-color: #5482ab;}
.ten .circle-6		{left: 222px; top: 436px; background-color: #bed600; color:#333333;}
.ten .circle-7		{left: 95px; top: 394px; background-color: #2c5e4f;}
.ten .circle-8		{left: 14px; top: 286px; background-color: #2c5e4f;}
.ten .circle-9		{left: 14px; top: 149px; background-color: #b8cfc9; color:#4d5357;}
.ten .circle-10		{left: 91px; top: 40px; background-color: #b8cfc9; color:#4d5357;}

/* 11 */
.eleven .circle-1		{left: 222px; background-color: #4b2942;}
.eleven .circle-2		{left: 342px; top: 34px; background-color: #aaa38e;}
.eleven .circle-3		{left: 421px; top: 124px; background-color: #aaa38e;}
.eleven .circle-4		{left: 440px; top: 246px; background-color: #5482ab;}
.eleven .circle-5		{left: 388px; top: 360px; background-color: #5482ab;}
.eleven .circle-6		{left: 285px; top: 430px; background-color: #bed600; color:#333333;}
.eleven .circle-7		{left: 164px; top: 430px; background-color: #2c5e4f;}
.eleven .circle-8		{left: 58px; top: 362px; background-color: #2c5e4f;}
.eleven .circle-9		{left: 5px; top: 250px; background-color: #b8cfc9; color:#4d5357;}
.eleven .circle-10		{left: 20px; top: 130px; background-color: #b8cfc9; color:#4d5357;}
.eleven .circle-11		{left: 101px; top: 35px; background-color: #58a618;}

/* 12 */
.twelve .circle-1		{left: 222px; background-color: #4b2942;}
.twelve .circle-2		{left: 330px; top: 27px; background-color: #aaa38e;}
.twelve .circle-3		{left: 412px; top: 109px; background-color: #aaa38e;}
.twelve .circle-4		{left: 440px; top: 218px; background-color: #5482ab;}
.twelve .circle-5		{left: 412px; top: 327px; background-color: #5482ab;}
.twelve .circle-6		{left: 330px; top: 407px; background-color: #bed600; color:#333333;}
.twelve .circle-7		{left: 222px; top: 435px; background-color: #2c5e4f;}
.twelve .circle-8		{left: 113px; top: 407px; background-color: #2c5e4f;}
.twelve .circle-9		{left: 33px; top: 326px; background-color: #b8cfc9; color:#4d5357;}
.twelve .circle-10	{left: 3px; top: 217px; background-color: #b8cfc9; color:#4d5357;}
.twelve .circle-11	{left: 33px; top: 108px; background-color: #58a618;}
.twelve .circle-12	{left: 113px; top: 27px; background-color: #58a618;}

/* 13 */
.thirteen .circle-1		{left: 222px; background-color: #4b2942;}
.thirteen .circle-2		{left: 325px; top: 24px; background-color: #aaa38e;}
.thirteen .circle-3		{left: 401px; top: 92px; background-color: #aaa38e;}
.thirteen .circle-4		{left: 440px; top: 189px; background-color: #5482ab;}
.thirteen .circle-5		{left: 426px; top: 292px; background-color: #5482ab;}
.thirteen .circle-6		{left: 367px; top: 379px; background-color: #bed600; color:#333333;}
.thirteen .circle-7		{left: 277px; top: 427px; background-color: #2c5e4f;}
.thirteen .circle-8		{left: 172px; top: 428px; background-color: #2c5e4f;}
.thirteen .circle-9		{left: 77px; top: 379px; background-color: #b8cfc9; color:#4d5357;}
.thirteen .circle-10	{left: 17px; top: 294px; background-color: #b8cfc9; color:#4d5357;}
.thirteen .circle-11	{left: 4px; top: 192px; background-color: #58a618;}
.thirteen .circle-12	{left: 41px; top: 94px; background-color: #58a618;}
.thirteen .circle-13	{left: 119px; top: 24px; background-color: #3d6b26;}

/* 14 */
.fourteen .circle-1		{left: 271px; background-color: #4b2942;}
.fourteen .circle-2		{left: 360px; top: 44px; background-color: #aaa38e;}
.fourteen .circle-3		{left: 421px; top: 122px; background-color: #aaa38e;}
.fourteen .circle-4		{left: 444px; top: 218px; background-color: #5482ab;}
.fourteen .circle-5		{left: 421px; top: 314px; background-color: #5482ab;}
.fourteen .circle-6		{left: 360px; top: 392px; background-color: #bed600; color:#333333;}
.fourteen .circle-7		{left: 271px; top: 435px; background-color: #2c5e4f;}
.fourteen .circle-8		{left: 172px; top: 435px; background-color: #2c5e4f;}
.fourteen .circle-9		{left: 82px; top: 392px; background-color: #b8cfc9; color:#4d5357;}
.fourteen .circle-10	{left: 22px; top: 314px; background-color: #b8cfc9; color:#4d5357;}
.fourteen .circle-11	{left: 0px; top: 218px; background-color: #58a618;}
.fourteen .circle-12	{left: 22px; top: 122px; background-color: #58a618;}
.fourteen .circle-13	{left: 82px; top: 44px; background-color: #3d6b26;}
.fourteen .circle-14	{left: 172px; top: 0; background-color: #3d6b26;}

.circle-middle			{width:204px; height: 204px; left: 50%; margin-left: -102px; top:50%; margin-top: -102px; font-size: 17px; background-color: #4d5357; opacity: 1 !important}
.circle-middle img		{width:88px; margin-bottom: 10px;}
.circle-middle:hover	{transform: none; background-color: inherit; background-color: #4d5357;}

/* CIRCLE RIGHT */
.circle-right				{display:inline-block; width:268px; vertical-align: top; background-color: #e1e2e2; padding: 33px 17px 33px 23px;}
.circle-right h2			{color:#4d5357; font-size: 18px; margin-bottom: 15px;}
.circle-right .cell			{display:inline-block; padding: 8px;}
.circle-right .circle		{position:relative; left: auto; top: auto; background-color: #4d5357;}
.circle-right .circle:hover	{background-color:#4b2942;}

/* TEXT POPUP */
.text-popup-box						{font-size:14px; background-color: #4d5357; padding: 40px 70px 40px 40px; position: relative;}
.text-popup-box	h2					{font-size:26px; color:#ffffff; margin-bottom: 0.6em;}
.text-popup-box	p					{font-size:14px; color:#ffffff; margin-bottom: 2em;}
.text-popup-box .btn-border			{background-color:rgba(255,255,255,0.2) !important; color:#ffffff; border:2px solid #ffffff;}
.text-popup-box .btn-border:hover	{background-color:transparent !important; color:#ffffff !important; border:2px solid #ffffff !important;}

.text-popup-box.fixed				{position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow-y: auto; z-index: 100;}


a.close	{position:absolute; right:20px; top:20px; width:30px; height: 30px; background-size: cover; background-image: url(/assets/images/icon-white-close.png);}

/* OVER 15 */
.circle-container.over-15 .circle-box					{background-image:none !important; height: auto;}
.circle-container.over-15 .circle-left .cell			{display:inline-block; padding: 4px; width: 25%; height: 123px;}
.circle-container.over-15 .circle-right .cell			{width:50%; height: 123px; padding: 4px;}
.circle-container.over-15 .circle-right .cell.header	{display:block; width: 100%; height: auto;}
.circle-container.over-15 .circle						{border-radius: 0; position: relative; left: auto; top: auto; width:100%; height: 100%;}
.circle-container.over-15 .cell-middle img				{display:inline-block; margin: 0 15px 0 0; vertical-align: middle; width:55px;}
.circle-container.over-15 .cell-middle span				{display:inline-block; vertical-align: middle;}
.circle-container.over-15 .cell-middle span	br			{display:none;}
.circle-container.over-15 .cell-middle					{display:block; width:100%; padding: 4px;}
.circle-container.over-15 .circle-middle				{position:relative; top: auto; margin-top: 0; left: auto; margin-left: 0; display: block; width: 100%; padding: 15px;}

.not-clicked	{opacity:0.5; transition: 0.3s ease-out;}
.clicked		{opacity:1 !important; transition: 0.3s ease-out;}

@media (max-width: 1310px) 
{
	/* STANDARD 14 */
	.circle-container .circle-box					{background-image:none !important; height: auto;}
	.circle-container .circle-left .cell			{display:inline-block; padding: 4px; width: 25%; height: 123px;}
    .circle-container .circle-right .cell {
        width: 50% !important;
        height: 123px;
        padding: 4px;
    }
	.circle-container .circle-right .cell.header	{display:block; width: 100%; height: auto;}
	.circle-container .circle						{border-radius: 0; position: relative; left: auto; top: auto; width:100%; height: 100%;}
	.circle-container .cell-middle img				{display:inline-block; margin: 0 15px 0 0; vertical-align: middle; width:55px;}
	.circle-container .cell-middle span				{display:inline-block; vertical-align: middle;}
	.circle-container .cell-middle span	br			{display:none;}
	.circle-container .cell-middle					{display:block; width:100%!important; padding: 4px;}
	.circle-container .circle-middle				{position:relative; top: auto; margin-top: 0; left: auto; margin-left: 0; display: block; width: 100%; padding: 15px;}

	.col-row.circle-col-left	{width:65%;}
	.circle-left				{width:65%; padding: 15px;}
	.circle-right				{width:35%;}
	.circle-box					{width:100%;}
	
	.circle-left:after	{right:-15px}
}

@media (max-width: 1030px) 
{
	/* STANDARD 14 */
	.circle-container .circle-left .cell	{width:33.333%;}
}

@media (max-width: 970px) 
{
	/* STANDARD 14 */
	.circle-left		{width:100%; padding: 15px;}
	.circle-right		{width:100%; padding: 15px;}
	.circle-container .circle-right .cell	{width:33.333%;}
	.circle-left:after	{display: none;}
}

@media (max-width: 768px) 
{
	.col-row.circle-col-left	{width:100%;}
}

@media (max-width: 413px) 
{
	/* STANDARD 14 */
	.circle-container .circle-left .cell	{width:50%;}
	.circle-container .circle-right .cell	{width:50%;}
	.text-popup-box							{padding:30px;}
	.text-popup-box h2						{padding-right:30px}
}
.col-row-container-sticky #circleModule {
    padding-left: 0;
    padding-right: 0;
}

    .rcclick > a {
        background: none !important;
    }

