﻿
section.main-content.sovereigns-module-outer	{padding-top: 0}

.sovereigns-intro	{background-color: #ffffff; padding: 40px 0}
.sovereigns-intro p	{font-size: 16px;}

#sovereignsContainer		{padding: 50px 0}
.sovereigns-container		{width:712px; height: 710px; display: block; background-size: cover; position: relative;}
.sovereigns-container-bg	{width:587px; height: 587px; position: relative; top:62px; left: 62px; background-size: cover;} 

.sovereigns-container .circle							{width:135px; height: 135px; text-align: center; position: absolute; cursor: pointer;}
.sovereigns-container .circle-inner						{border-radius: 135px; position: relative; width: 100%; height: 100%; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.sovereigns-container .circle.dark-green .circle-inner	{background-color: #2c5e4f;}
.sovereigns-container .circle.dark-grey .circle-inner	{background-color: #4d5357;}
.sovereigns-container .circle.blue .circle-inner		{background-color: #5482ab;}
.sovereigns-container .circle.green	 .circle-inner		{background-color: #58a618;}

.circle-inner img   {width:32px !important;}

.circle-inner p   {text-align:center;}

.no-image-circle {padding-top:30px;}

.sovereigns-container .circle.dark-green .plus	{background-color: #728d84;}
.sovereigns-container .circle.dark-grey .plus	{background-color: #838789;}
.sovereigns-container .circle.blue .plus		{background-color: #8da7c1;}
.sovereigns-container .circle.green .plus		{background-color: #96be69;}

.sovereigns-container .circle p				{font-size: 13px; width:90%; color:#ffffff; padding-left: 8px; padding-right: 8px; margin-bottom: 0}
.sovereigns-container .circle img			{margin-bottom: 5px;}

.sovereigns-container .circle .plus			{width:31px; height: 31px; border-radius: 31px; display: block; position: absolute; background-color: #000000; display: none;}
.sovereigns-container .circle .plus:after	{height:15px; width:1px; display: block; background-color: #ffffff; position: absolute; top:8px; left: 15px; content: '';}
.sovereigns-container .circle .plus:before	{height:15px; width:1px; display: block; background-color: #ffffff; position: absolute; top:8px; left: 15px; content: ''; transform: rotate(90deg)}

.sovereigns-container .circle .plus.active:after	{display: none}

.sovereigns-container .circle		{top:-1200px; left:288px;}

.sovereigns-container .plus	{top:118px; left: 49px;}


/* POPUP BOX */
.sov-popup			{width:371px; height:371px; left:170px; top:170px; border-radius: 371px; display: flex; flex-direction: column; text-align: center; align-content: center; position: absolute; background-color: #728d84; padding:25px 35px; z-index: 10; display: none;}
.sov-popup h2		{display: flex; flex-direction: column; color:#ffffff; font-size: 20px; line-height: 1.2em; margin-bottom: 0.5em; align-items: center; width:266px; max-width: 100%; margin-left: auto; margin-right: auto;}
.sov-popup h2 img	{height:35px; width: auto; margin-bottom: 14px;}
.sov-popup p		{color:#ffffff; font-size: 13px; font-family: 'roobert_light', Times New Roman, serif; width:266px; max-width: 100%; margin-left: auto; margin-right: auto; margin-bottom: 0px; text-align: center}

.sov-popup .pop-text-container {max-height: 135px; overflow-y: auto;}
.sov-popup .sov-btn			{background-color: #728d84; display: inline-block; font-size: 13px; color:#ffffff; padding: 15px 30px; text-decoration: none; margin-top: 20px; transition: 0.2s ease-out}
.sov-popup .sov-btn:hover	{background-color: #4d5357 !important;}

.sov-popup .close			{display: block; position: absolute; width:23px; height: 23px; bottom:20px; left:50%; margin-left: -11px;  transform: rotate(45deg); cursor: pointer}
.sov-popup .close:after		{height:23px; width:1px; display: block; background-color: #ffffff; position: absolute; top:0; left: 11px; content: '';}
.sov-popup .close:before	{height:23px; width:1px; display: block; background-color: #ffffff; position: absolute; top:0; left: 11px; content: ''; transform: rotate(90deg)}

/* SOV POPUP COLOURS */
.sov-popup.dark-green			{background-color: #2c5e4f;}
.sov-popup.dark-green .sov-btn	{background-color: #728d84;}

.sov-popup.green				{background-color: #58a618;}
.sov-popup.green .sov-btn		{background-color: #96be69;}

.sov-popup.blue 				{background-color: #5482ab;}
.sov-popup.blue .sov-btn		{background-color: #8da7c1;}

.sov-popup.dark-grey 			{background-color: #4d5357;}
.sov-popup.dark-grey .sov-btn	{background-color: #838789;}

.sov-mobile-header	{display: none}

@media (max-width: 1100px) 
{
    
    
	
	.sov-mobile-header		{display: block; margin-bottom: 40px; padding-left: 10px;}
	.sov-mobile-header img	{width:55px; margin-right: 15px;}
	.sov-mobile-header h2	{display: flex; align-items: center; color:#4d5357; font-size: 24px;}
	
	.sovereigns-container-bg			{display: none}	
	.sovereigns-container				{flex-wrap: wrap; width:100%; height: auto;}
	.sovereigns-container .circle		{display: inline-block; vertical-align: top; text-align: center; width:33.333%; min-height:190px; position: relative; border-radius: 0; top:auto !important; left: auto !important; right: auto !important; bottom: auto !important; padding: 10px;}
	.sovereigns-container .circle-inner	{border-radius: 0; padding: 20px 10px 65px; width:100%; height: 100%; justify-content: flex-start; align-items: center}
	.sovereigns-container .circle .plus	{left:50%; margin-left: -15px; top:auto !important; bottom: 20px; display: block;}
	
	.sov-popup			{position: relative; top:auto !important; left: auto !important; right: auto !important; bottom: auto !important; float: left; margin-left: 10px; width: calc(100% - 20px); margin-top: 10px; margin-bottom: 10px; border-radius: 0; background-color:#ffffff !important; text-align: left; height:auto;}
	.sov-popup p		{color:#4d5357; margin-left: 0; margin-right: 0; width:100%;}
	.sov-popup h2		{flex-direction: row; margin-bottom: 0.8em; margin-left: 0; margin-right: 0;}
	.sov-popup h2 img	{flex-direction: row; margin-right: 15px;}
	
	.sov-popup.dark-green h2	{color:#2c5e4f}
	.sov-popup.green h2			{color:#58a618}
	.sov-popup.dark-grey h2		{color:#4d5357}
	.sov-popup.blue h2			{color:#5482ab}
	
	.sov-popup .close		{right:25px; top:25px; bottom: auto; margin-left: 0; left: auto}
	
	.sov-popup .close:after		{background-color: #2c5e4f}
	.sov-popup .close:before	{background-color: #2c5e4f}
	
	.sov-popup .sov-btn			{margin-top: 10px;}
	
}

@media (max-width: 812px) 
{
	a.sov-btn {
		width: 100%;
		text-align: center;
	}
}

@media (max-width: 640px) 
{
	.sovereigns-container .circle		{width:50%;}

}

@media (max-width: 375px) 
{
	img.sov-icon {width: 22% !important; height: auto!important;}

	.sovereigns-container .circle	{min-height: 210px;}

}

@media (min-width: 1360px) {
    .col-row-container-sticky .col-row.sovereigns {
        width: 750px !important;
    }
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   .sov-popup h2 {
       font-size: 17px;
    }
}

@media (max-width: 1024px) 
{
	.sov-container-button {
		width: 100%;
		text-align: center;
	}
}

.sov-btn-container {
    margin-top: 35px !important;
}