/*********************************** Simple Accessible Horizontal Navigation bar ********************************/

.bottomBar				{}
@media screen and (max-width: 480px) {
	.bottomBar		{text-align:center !important;}
}

#NavHorizontalSimpleByID4		{}
UL.NavigationBarSimple			{margin:12px 0px 6px 0px; padding:0px; text-align:right; /*white-space:nowrap;*/}
UL.NavigationBarSimple LI		{margin:0px; padding:0px; list-style-image:none; list-style-type:none; display:inline;}
UL.NavigationBarSimple LI A		{height:19px; line-height:19px; display:inline-block; font-size:1.3rem; font-weight:normal;}

LI.NavigationBarSimple			{}
LI A.NavigationBarSimple		{color:#999999; text-decoration:none;}
LI A.NavigationBarSimple:hover	{color:#f7528a; text-decoration:none;}

LI.NavigationBarSimpleOn			{}
LI A.NavigationBarSimpleOn			{color:#f7528a; text-decoration:none;}
LI A.NavigationBarSimpleOn:hover	{color:#f7528a; text-decoration:none;}

SPAN.NavigationBarSimpleItem		{/*white-space:nowrap;*/}
IMG.NavigationBarSimpleSeperator	{vertical-align:top; width:1px; height:11px; margin:6px 5px 0px 10px; background:#999999;} /* left/right - 4px difference */

UL.NavigationBarSimple LI A:active, UL.NavigationBarSimple LI A:focus	{color:#f7528a;}




/****************** top-line Simple Bar ******************/
.top-line UL.NavigationBarSimple				{margin:8px 10px 11px 0px; padding:0px; text-align:right; /*white-space:nowrap;*/ background:transparent;}
.top-line  UL.NavigationBarSimple LI			{margin:0px; padding:0px; list-style-image:none; list-style-type:none; display:inline;}
.top-line  UL.NavigationBarSimple LI A			{height:19px; line-height:19px; display:inline-block; font-size:1.5rem; font-weight:normal;}

.top-line  LI.NavigationBarSimple				{}
.top-line  LI A.NavigationBarSimple				{color:#214079; text-decoration:none;}
.top-line  LI A.NavigationBarSimple:hover		{color:#f49040; text-decoration:none;}

.top-line  LI.NavigationBarSimpleOn				{}
.top-line  LI A.NavigationBarSimpleOn			{color:#f49040; text-decoration:none;}
.top-line  LI A.NavigationBarSimpleOn:hover		{color:#f49040; text-decoration:none;}

.top-line  SPAN.NavigationBarSimpleItem			{/*white-space:nowrap;*/}
.top-line  IMG.NavigationBarSimpleSeperator		{vertical-align:top; width:1px; height:11px; margin:6px 6px 0px 10px; background:#cccccc;} /* left/right - 4px difference */

.top-line UL.NavigationBarSimple LI A:active, .top-line UL.NavigationBarSimple LI A:focus	{color:#f49040;}


/** Simple Top nav Box & Collaps button **/
A.simple-open		{display:none;}

@media screen and (max-width: 768px) {
	DIV.simple-box		{background-color:#fff; width:200px; float:none !important; position:fixed; top:0px; right:-210px; z-index:9999; direction:rtl; box-shadow:0 0px 8px rgba(0,0,0,0.3);}

	A.simple-open, A.simple-close	{display:block; width:24px; height:30px; position:fixed; top:5px; right:0px; background:#eee url('../toMenu-small.png') no-repeat right center; z-index:9999;}

	.top-line UL.NavigationBarSimple				{}
	.top-line UL.NavigationBarSimple LI				{float:none !important; display:block; margin:5px 10px 5px 10px;}
	.top-line UL.NavigationBarSimple LI A			{height:auto; line-height:115%;}
	.top-line IMG.NavigationBarSimpleSeperator		{display:none;}
}



/*********************************************************************************************************/
/******************************* Awesome Accessible Horizontal Navigation bar ****************************/

/****************** standart  ******************/
#NavHorizontalAwesomeByIDXXX/**/				{}
#nav-awesome UL.NavigationBarAwesome			{margin:20px 0px 0px 0px; padding:0px; text-align:center;}
#nav-awesome UL.NavigationBarAwesome LI			{position:relative; margin-bottom:20px; text-align:center; box-shadow:0 1px 8px rgba(0,0,0,0.3); list-style-image:none; list-style-type:none;}
#nav-awesome UL.NavigationBarAwesome LI A		{width:100%; height:100%; position:absolute; right:0; left:0; top:0; bottom:0; text-shadow:1px 1px 1px rgba(0,0,0,0.7);}

#nav-awesome LI.NavigationBarAwesome			{}
#nav-awesome LI A.NavigationBarAwesome			{color:#ffffff; text-decoration:none;}
#nav-awesome LI A.NavigationBarAwesome:hover	{color:#e23670; text-decoration:none;}

#nav-awesome LI.NavigationBarAwesomeOn			{}
#nav-awesome LI A.NavigationBarAwesomeOn		{color:#e23670; text-decoration:none;}
#nav-awesome LI A.NavigationBarAwesomeOn:hover	{color:#e23670; text-decoration:none;}

#nav-awesome IMG.NavigationBarAwesomeBg			{width:100%; height:auto; display:block;}
#nav-awesome SPAN.NavigationBarAwesomeFa		{display:block; margin:10% 0px 10% 0px;}
#nav-awesome UL.NavigationBarAwesome LI A .fa	{font-size:48px; text-shadow:1px 1px 1px rgba(0,0,0,0.7);}
#nav-awesome SPAN.NavigationBarAwesomeTitle		{display:inline-table; margin:0px 10px 0px 10px; padding:10px; font-size:21px; font-weight:bold; background-color:rgba(0,0,0,0.3); border-radius:10px;}

#nav-awesome UL.NavigationBarAwesome LI A:active, #nav-awesome UL.NavigationBarAwesome LI A:focus	{color:#e23670;}



/****************** Hp 4 subjects ******************/
#subjects		{float:left; width:32%;}

#NavHorizontalAwesomeByIDXXX/**/			{}
#subjects UL.NavigationBarAwesome			{margin:0px 0px 0px 0px; padding:0px; text-align:center; display:flex; flex-direction:column;}
#subjects UL.NavigationBarAwesome LI		{position:relative; margin-bottom:9px; text-align:center; list-style-image:none; list-style-type:none;}
#subjects UL.NavigationBarAwesome LI A		{width:100%; height:auto; display:table; border-radius:5px; text-align:right;}

#subjects LI.NavigationBarAwesome			{}
#subjects LI A.NavigationBarAwesome			{background-color:#e23670; color:#fff; text-decoration:none;}
#subjects LI A.NavigationBarAwesome:hover	{background-color:#aaa9aa; color:#fff; text-decoration:none;}

#subjects LI.NavigationBarAwesomeOn			{}
#subjects LI A.NavigationBarAwesomeOn		{background-color:#aaa9aa; color:#fff; text-decoration:none;}
#subjects LI A.NavigationBarAwesomeOn:hover	{background-color:#aaa9aa; color:#fff; text-decoration:none;}

#subjects SPAN.NavigationBarAwesomeFa			{}
#subjects UL.NavigationBarAwesome LI A .fa		{display:none; /*border-radius:42px; border:#fe8439 1px solid; margin:5px; padding:20px; font-size:32px;*/}
#subjects SPAN.NavigationBarAwesomeTitle		{display:table-cell; vertical-align:middle; font-size:2.5rem; line-height:2.7rem; padding:15px 14px 15px 14px;}

#subjects UL.NavigationBarAwesome LI:focus		{color:#e23670;}
#subjects UL.NavigationBarAwesome LI A:active, #subjects UL.NavigationBarAwesome LI A:focus	{background-color:#aaa9aa; color:#fff;}

#subjects .awesomeBar-img-container			{width:46px; display:table-cell; vertical-align:middle; padding-right:10px;}
#subjects IMG.NavigationBarAwesomeBg		{width:100%; height:auto; display:block;}


@media screen and (max-width: 800px) and (min-width: 568px) {
	#subjects		{float:none; width:100%; clear:both;}
	#subjects UL.NavigationBarAwesome			{flex-direction:row; flex-wrap:wrap; justify-content:space-between;}
	#subjects UL.NavigationBarAwesome LI		{width:48%; align-self:stretch;}
	#subjects UL.NavigationBarAwesome LI:nth-of-type(2n+1)		{margin-left:auto;}
	#subjects UL.NavigationBarAwesome LI:nth-of-type(2n)		{margin-right:auto;}
}

@media screen and (max-width: 567px) {
	#subjects		{float:none; width:100%; clear:both;}
	#subjects UL.NavigationBarAwesome			{flex-direction:column; max-width:385px; margin:0px auto 20px auto;}
	#subjects UL.NavigationBarAwesome LI		{width:100%;}
}

/***********************************************************************************************************/
/***********************************************************************************************************/
/*****************************************/
DIV.circles			{width:61%; max-width:732px; padding-top:21.35%; float:right; margin:auto; position:relative; box-sizing:border-box;}

A.industry			{position:absolute; text-align:center; height:100%; text-decoration:none;}
#industry-1			{width:35%; height:100%; top:0; right:0; z-index:3;}
#industry-2			{width:33.6%; height:96.1%; top:1.95%; right:50%; margin-right:-16.8%; z-index:3;}
#industry-3			{width:35%; height:100%; top:0; left:0; z-index:3;}

DIV.circle			{display:inline-block; width:100%; height:100%;}
#rotate-1			{background:url('../grey-circle.png') no-repeat center center / cover;}
#rotate-2			{background:url('../red-circle.png') no-repeat center center / cover;}
#rotate-3			{background:url('../grey-circle.png') no-repeat center center / cover;}

.industry DIV.item-img		{width:72.6%; height:72.6%; background:#fff; border-radius:50%; position:absolute; top:13.7%; right:13.7%; z-index:5; overflow:hidden;}
.industry DIV.titles		{text-align:center; color:#434a4a; padding-top:5px;}
#industry-2 DIV.titles		{margin-top:1.95%;}
.industry .titles SPAN		{display:block; font-size:3rem; line-height:3.3rem; box-sizing:border-box;}

.industry:hover DIV.titles, .industry:focus DIV.titles, .industry:active DIV.titles			{color:#e23670;}
.industry:hover DIV.item-img, .industry:focus DIV.item-img, .industry:active DIV.item-img	{border:#fff 3px solid; box-sizing:border-box;}
.industry DIV.titles:hover, .industry DIV.titles:focus, .industry DIV.titles:active			{color:#e23670;}

/*** grow on hover effect to circles ***/
.circle:hover, .circle:focus, .circle:active {
	text-decoration:none;
	z-index:2 !important;
	/*outline:none !important;*/
}


/********** circles animation - rotate-R **********/
.rotate-R-anim {
	-webkit-animation: clock-R 20s linear infinite;
	-moz-animation: clock-R 20s linear infinite;
	-o-animation: clock-R 20s linear infinite;
	animation: clock-R 20s linear infinite;
}
/********** circles animation - rotate-L **********/
.rotate-L-anim {
	-webkit-animation: clock-L 20s linear infinite;
	-moz-animation: clock-L 20s linear infinite;
	-o-animation: clock-L 20s linear infinite;
	animation: clock-L 20s linear infinite;
}


/******** keyframes - clock-R **********/
@-webkit-keyframes clock-R {
	0%    {-webkit-transform: rotate(0deg);}
	25%   {-webkit-transform: rotate(90deg);}
	50%   {-webkit-transform: rotate(180deg);}
	75%   {-webkit-transform: rotate(270deg);}
	100%  {-webkit-transform: rotate(360deg);}
}
@-moz-keyframes clock-R {
	0%    {-moz-transform: rotate(0deg);}
	25%   {-moz-transform: rotate(90deg);}
	50%   {-moz-transform: rotate(180deg);}
	75%   {-moz-transform: rotate(270deg);}
	100%  {-moz-transform: rotate(360deg);}
}
@-o-keyframes clock-R {
	0%    {-o-transform: rotate(0deg);}
	25%   {-o-transform: rotate(90deg);}
	50%   {-o-transform: rotate(180deg);}
	75%   {-o-transform: rotate(270deg);}
	100%  {-o-transform: rotate(360deg);}
}
@keyframes clock-R {
	0%    {transform: rotate(0deg);}
	25%   {transform: rotate(90deg);}
	50%   {transform: rotate(180deg);}
	75%   {transform: rotate(270deg);}
	100%  {transform: rotate(360deg);}
}

/******** keyframes - clock-L **********/
@-webkit-keyframes clock-L {
	0%    {-webkit-transform: rotate(0deg);}
	25%   {-webkit-transform: rotate(-90deg);}
	50%   {-webkit-transform: rotate(-180deg);}
	75%   {-webkit-transform: rotate(-270deg);}
	100%  {-webkit-transform: rotate(-360deg);}
}
@-moz-keyframes clock-L {
	0%    {-moz-transform: rotate(0deg);}
	25%   {-moz-transform: rotate(-90deg);}
	50%   {-moz-transform: rotate(-180deg);}
	75%   {-moz-transform: rotate(-270deg);}
	100%  {-moz-transform: rotate(-360deg);}
}
@-o-keyframes clock-L {
	0%    {-o-transform: rotate(0deg);}
	25%   {-o-transform: rotate(-90deg);}
	50%   {-o-transform: rotate(-180deg);}
	75%   {-o-transform: rotate(-270deg);}
	100%  {-o-transform: rotate(-360deg);}
}
@keyframes clock-L {
	0%    {transform: rotate(0deg);}
	25%   {transform: rotate(-90deg);}
	50%   {transform: rotate(-180deg);}
	75%   {transform: rotate(-270deg);}
	100%  {transform: rotate(-360deg);}
}

/*****************************************/


@media screen and (max-width: 800px) and (min-width: 568px) {
	DIV.circles		{float:none; width:90%; padding-top:31.47%; margin-bottom:60px;}
}

@media screen and (max-width: 567px) {
	DIV.circles					{float:none; width:256px; clear:both; margin:0 auto 60px auto; padding:0px;}
	.industry					{display:table; width:100% !important; height:256px !important; position:relative !important; top:auto !important; left:auto !important; right:auto !important; margin:0px 0px 20px 0px !important; padding:0px;}
	.industry DIV.item-img		{width:186px; height:186px; background:#fff; border-radius:50%; position:absolute; top:35px; right:35px; z-index:5; overflow:hidden;}
	.industry DIV.titles		{margin-top:0px !important; padding:0px;}
	.circle						{width:100% !important; padding-top:100%;}
}