:root {
/*	--specy:-200px; */
}

@import url('https://fonts.googleapis.com/css?family=Raleway');/*STARTHEADERS*/

/*STARTHEADERS*/

HTML { height:100% }
BODY	{ 	margin:0px;padding:0px;height:100%;overflow-x:hidden}
P 		{ }
.loginmenu { position:absolute;z-index:38; }
.loginBox { z-index:100;padding:8px;}
.centerdiv { height:calc(100%/2.25) }
.headerBody { top:0px;z-index:25; }
.bodyClient { }
/*ENDHEADERS*/

/*STARTMENU*/
.submenuparent{ display:flex;flex-wrap:wrap; justify-content: center;}
.submenuchild { vertical-align:middle;padding:8px;}

.menuBody			{ z-index:30; }
.menuClient		{ }
.menumasterp	{ }
.menumasterl	{ }
.menumasterm	{ }
.menumastermt	{ 	}
.menumasterr	{ float:left;width:10px;}
/* MENUMASTERF *MUST* HAVE HEIGHT SET CORRECTLY AS IT AFFECTS DROPDOWN MENU POSITIONING */
.menumasterf 			 { display:table-cell;	}

.menudrop	 		{ position:fixed;z-index:35;padding:10px;position:fixed;left:150px;top:10px;z-index:901;visibility:hidden;}
.menumasterfd { display: flex;  }
.menumasterfd:hover { }
/*ENDMENU*/

/*STARTLINKS*/
a:link,a:visited,a.ctlink:link,a.ctlink:visited,a.ctlinkt:link,a.ctlinkt:visited { FONT-WEIGHT:300;border-bottom:#FF0;text-decoration:none}
a:hover,a:active,a.ctlink:hover,a.ctlink:active,a.ctlinkt:hover,a.ctlinkt:active { ;}
a.ctlinkt { font-size:0.75em }


a.mlink:link,a.mlink:visited,a.mlinkt:link,a.mlinkt:visited { color:#A00;font-weight:300;}
a.mlink:hover,a.mlink:active,a.mlinkt:hover,a.mlinkt:active { color:#F00;text-decoration:underline;}
a.mlinkt { font-size:0.75em }

/*ENDLINKS*/

/*STARTCONTAINERS*/
/* ifmid overrides background color of window, should be same as Cmm */
.ifpanel  { position:fixed;top:10%;z-index:90;left:0;right:0;margin:0 auto;;box-shadow: 0px 0px 10px 10px rgba(0,0,0,0.5);}
iframe { z-index:60; }

.Mod	 { width:100%;max-width;1024px;margin:auto;}
@media only screen and (max-device-width : 480px) {
	.Mod	 { width:100%;margin:auto;}
}
.Modt,.Modm,.Modb { display:inline-block;width:250px;clear:both;}
.Mtleft { float:left;}
.Mtmid  { float:left;margin-left:20px;margin-top:20px;}
.Mtmidt { overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.Mtright{ float:left; }
.Mcmid  { width:250px;}
.Mcmidt { margin-left:20px;width:200px;color:#888; }
.Mbleft { float:left; }
.Mbright{ float:left;}


.Codt { padding-left:20px }
.Codt,.Codm,.Codb {}
.Codt { background-color:RGBA(244,244,244,.9); }
.Codb { background: linear-gradient(to bottom, rgba(244,244,244,.9) 0%, rgba(254,254,254,0) 100%);height:25px; }
/* the below floats are needed for title and min/close buttons */
.Ctl	{ float:left;}
.Ctm	{ float:left;margin-right:80px;width:calc(100% - 75px);}
.Ctmtext { white-space:nowrap; text-overflow:ellipsis;;overflow:hidden; }
.Ctr	{ position:absolute;right:0px;top:0px;width:100px;padding:5px;text-align:right;white-space:nowrap}
.Cml	{ }


.Vtop {background-color:RGBA(244,244,244,.9);padding:5px;cursor:pointer }
.Vmid {background-color:RGBA(244,244,244,.9);padding:10px;white-space:normal;overflow-y:auto;flex-grow:1 }
.Vbot {background-color:RGBA(244,244,244,.9);padding:0;margin:0;text-align:right }

/* ifmid is used as body in an iframe */
.Cmm,.Cmmnew,.Cmmnewr,.specmsgm,.specmsgh	 { background-color:RGBA(244,244,244,.9);padding:10px; }
.Cmm { padding:10px 20px 10px 20px }
.ifmid { background-color:RGBA(255,255,255,1);padding-left:10px;padding-right:10px;padding-top:10px; }

.newscol { display:flex;justify-content:center }
.Cmmnew { max-width:75%;}
.Cmmnewr { max-width:25%}
@media only screen and (max-device-width : 720px) {
.newscol { display:block }
.Cmmnew { width:auto;}
.Cmmnewr { width:auto;}
}


.Cmr	{ }
.Cbl	{ }
.Cbm	{ }
.Cbr	{ }
/*ENDCONTAINERS*/

/*STARTWIKI*/
TABLE.wikitable { border-collapse:collapse;width:96%;margin-left:2%;margin-right:2%; }
TD.noborder { background-color:#F00;color:#444;font-size:90%;padding:4px;border:none}

.Wtocd2 { margin-left:30px }
.Wtocd3 { margin-left:80px }
.Wtocd4 { margin-left:130px }
.Wtocs { display:inline;padding-right:5px;}

.Wtpanelparent { position:relative;;z-index:20;top:-25%;width:50% }
.Wtpaneldivt { position:absolute;tfop:-50%;lfeft:25%;z-index:25;tfop:40%;wifdth;40%;height:auto;;padding:25px;text-align:center}
.Wtpaneldivu { display:inline-block;width:auto;height:30px;border-radius: 50px;Z-index:26;padding:5px 20px 5px 20px;text-align:center;}

@media only screen and (max-device-width : 480px) {
.Wtpaneldivt { position:absolute;font-size:1.25em;font-family:'Dosis',sans-serif;background-color:RGBA(123,85,51,.75);z-index:50;top:10%;width;40%;height:auto;;padding:25px;text-align:center;vertical-align:middle;color:#FFF;}
.Wtpaneldivu { cursor:pointer;display:inline-block;	font-size:0.5em;width:auto;height:20px;background-color:RGBA(37,137,37,1);border-radius: 8px;z-index:60;padding:5px;text-align:center;vertical-align:middle;color:#FFF;font-weight:600;}
}

TEXTAREA.comment { margin:10px;padding:5px;color:#000;font-size:1.1em;background-color:rgba(255,255,255,.8);border:1px inset #ccc; }
TEXTAREA::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #bbb;
    opacity: 1; /* Firefox */
}
.ratingrate { border-radius:25px;background-color:#444;color:#FFF;border:1px solid #666;padding:3px; }
.ratinghdiv { width:75%;margin-left:auto;margin-right:auto;margin-top:25px;border-top:1px solid #aaa; }
.ratingtopdiv { text-align:center;font-size:2em; }
.commdiv,.commerr,.commok { text-align:center;margin-top:10px;color:#888;font-size:0.9em; }
.commtext { text-align:center;display:none;width:100%;max-width:500px;padding-bottom:10px;margin:auto; }
.commerr { color:#A00; }
.commok { color:#444;text-align:left;margin:20px }


/*ENDWIKI*/

/*STARTBOOKING*/
.Bddayblank				{ width:50px;height:50px;}
.Bddayselect 			{ width:50px;height:50px;}
.Bddayselect:hover{ cursor:pointer}
.Bddayselected 		{ width:50px;height:50px;}
.Bdmorn,.Bdafter,.Bdnight,.Bdnone,.Bdselect 	{width:75px;height:40px;}
.Bdmorn,.Bdafter,.Bdnight,.Bdselect 	{cursor:pointer;}
/*ENDBOOKING*/

/*STARTFORUM*/
/*ENDFORUM*/

/*STARTTEXT*/
H1 { margin:0}
H2 { margin:0}
H3 { margin:0}
H4 { margin:0}
/*ENDTEXT*/

/*STARTALERTS*/

.errmod		{ border:1px solid #F00;background-color:#0F0;color:#F00;padding:8px;margin:8px;font-size:150%;}
/* errpanel must be less than 750 or it affects ifframe popup */
.errpanel  { position:fixed;width:50%;left:0;right:0;margin:auto;display:none;padding:5px;border:1px solid red;background-color:#300;z-index:120;
	box-shadow:0px 0px 40px 10px #000;}
.errpanelt { color:#F00;width:100%;font-size:22px;cursor:move;}
.errpanelm { color:#C00;}
.errpanelt1 { color:#C00;position:absolute;border-top:1px solid #F00;}
.errpanelt2 { color:#C00;position:absolute;border-top:1px solid #F00;}
FIELDSET.errfield	 { color:#F00;background-color:#200;border:1px solid #A00;}
LEGEND.err { color:#F00;font-size:0.8em}
a.Errlnk:link,a.Errlnk:visited { COLOR:#F00;FONT-WEIGHT:600;border-bottom:1px solid #F00;}
a.Errlnk:hover,a.Errlnk:active { COLOR:#F00;FONT-WEIGHT:600;border:1px solid red}
TEXTAREA.err { background-color:#600;color:#F00;border:0 }

/*ENDALERTS*/

/*STARTFORM*/
TABLE { border-spacing:0px;margin:0px;padding:0px;border-collapse:collapse;;}
FORM,OL,UL { margin-top:0px;margin-bottom:0px; }
LI { margin-left:16px }

INPUT { outline:0 }
INPUT[type=text],TEXTAREA { width:98%; }
INPUT:disabled,select:disabled {cursor:not-allowed}
/*ENDFORM*/




	
@media only screen and (max-width : 376px ) { /* MOBILES PORTRAIT */
	.ifpanel  { width:95%;heifght:100%}
	.loginmenu { display:none;position:fixed; }
	.headerBody {	display:none;}
	.menuBody	{ display:none}
	.minmenu { display:block;position:fixed;height:50px;width:100%;margin:auto;margin:0px;padding:5px;}
	.submenuchild { border:1px solid #aaa;padding:1px;margin:2px;}
	.mobile { display: block; }
	.bodyClient	 { width:100%;margin:auto;padding-top:60px}
	.Container,.submenuparent {  }
	.ContainerPortrait { max-width:100%;margin:auto; }
	.ContainerDivider { height:40vh;;font-size:4vw;color:#fff;display:flex;justify-content: center;  align-items: center;text-shadow: 1px 1px 1px rgba(0,0,0,.5);font-weight:600; }

	.headertitle{ font-size:6vw;}
	.headertag 	{ font-size:3vw;}
	H1 { display:block;font-size:1.2em;}
	H2 { display:block;font-size:1.4em;}
	H3 { display:block;font-size:1.2em;}
	H4 { display:block;font-size:1.0em;}

}
@media only screen and (min-width : 376px) and (max-width : 767px ) { /* MOBILES LANDSCAPE */
	.ifpanel  { width:75%}
	.loginmenu { display:none;position:fixed; }
	.headerBody {	display:none;}
	.menuBody	{ display:none}
	.minmenu { display:block;position:fixed;height:75px;width:98%;margin:auto;margin:0px;padding:5px;}
	.mobile { display: block; }
	.bodyClient	 { width:100%;margin:auto;padding-top:85px}
	.Container,.submenuparent {  }
	.ContainerPortrait { max-width:90%;margin:auto; }
	.ContainerDivider { height:30vh;;font-size:4vw;color:#fff;display:flex;justify-content: center;  align-items: center;text-shadow: 1px 1px 1px rgba(0,0,0,.5);font-weight:600; }
	.headertitle{ font-size:6vw;}
	.headertag 	{ font-size:3vw;}
	H1 { display:block;font-size:1.2em;}
	H2 { display:block;font-size:1.4em;}
	H3 { display:block;font-size:1.2em;}
	H4 { display:block;font-size:1.0em;}
 }
@media only screen and (min-width : 768px) and (max-width : 1024px ) { /* TABLETS */
	.ifpanel  { width:75%}
	.loginmenu { display:flex;right:0px; }
	.headerBody	 { width:100%;max-width:1024px;margin:auto;position:fixed;}
	.minmenu { display:none;}
	.mobile { display: none; }
	.bodyClient	 { width:100%;max-width:1024px;margin:auto;}
	.headertitle{ font-size:6vw;}
	.headertag 	{ font-size:3vw;}
	H1 { display:block;font-size:1.8em;}
	H2 { display:block;font-size:1.6em;}
	H3 { display:block;font-size:1.4em;}
	H4 { display:block;font-size:1.2em;}
 }
@media only screen and (min-width : 1025px ) { /* DESKTOPS */
	.ifpanel  { width:75%}
	.loginmenu { display:flex;right:0px;}
	.headerBody	 { width:100%;margin:auto;}
	.minmenu { display:none;}
	.mobile { display: none; }
	.bodyClient	 { }
	.Container,.submenuparent {  }
	.ContainerPortrait { max-width:75%;margin:auto; }
	.ContainerDivider { height:40vh;;font-size:4vw;color:#fff;display:flex;justify-content: center;  align-items: center;text-shadow: 1px 1px 1px rgba(0,0,0,.5);font-weight:600; }
	.headertitle{ font-size:4.5vw;}
	.headertag 	{ font-size:2vw;}
	H1 { display:block;font-size:1.9em;}
	H2 { display:block;font-size:1.7em;}
	H3 { display:block;font-size:1.5em;}
	H4 { display:block;font-size:1.3em;}
}
@media only screen and (min-width : 1824px ) { /* LARGE DESKTOPS */
	.ifpanel  { width:75%}
	.loginmenu { display:flex;right:0px; }
	.headerBody	 { width:100%;margin:auto;}
	.minmenu { display:none;}
	.mobile { display: none; }
	.bodyClient	 { }
	.Container,.submenuparent {  }
	.ContainerPortrait { max-width:75%;margin:auto; }
	.ContainerDivider { height:40vh;;font-size:4vw;color:#fff;display:flex;justify-content: center;  align-items: center;text-shadow: 1px 1px 1px rgba(0,0,0,.5);font-weight:600; }
	.headertitle{ font-size:4.5vw;}
	.headertag 	{ font-size:2vw;}
	H1 { display:block;font-size:1.2em;}
	H2 { display:block;font-size:1.6em;}
	H3 { display:block;font-size:1.4em;}
	H4 { display:block;font-size:1.2em;}
}


@media only screen and (max-device-width : 480px) {
.loginBody{ width:100%;margin:auto;display:flex;}
.loginBox { flex-grow:1;flex-basis:auto;padding:8px;}
}


.Wslidemaster { position:fixed;display:flex;top:5%;left:5%;margin:0px;width:90%;height:90%;vertical-align=middle;z-index:55; }
.Wslidetext { position:absolute;right:0px; }



.specmsgh { display:inline-block;opacity:0;margin:0;padding:0px;animation: specmsgh_ani 6s linear 0.1s 1 normal forwards;cursor:pointer }
@keyframes specmsgh_ani {
    0%   { opacity:0; }
    90% { opacity:0; }
    100%  {opacity:.8;}

}

.specmsgm { box-shadow:1px 1px 4px #000; }
.specmsg  { position:fixed;height:var(--specy);margin:0px;padding:0px;left:10px;top:var(--specy);animation: specmsg_ani 6s linear 0.1s 1 normal forwards;z-index:110}
@keyframes specmsg_ani {
    0%   {top:var(--specy);display:block;}
    5%  {top:10px;}
    10%  {top:5px;}
    15% {top:10px;}
    20% {top:8px;}
    25%  {top:10px;}
    90%  {top:10px;}
    100%  {top:var(--specy); }

}
.bottomerr {
	position:fixed;bottom:0px;;width:100%;border:2px outset #FCE;background-color:#FCE;color:#500;padding:4px;font-size:0.9em;text-align:center;
	animation: bottomerr_ani 8s linear 0.1s 1 normal forwards;
	}
@keyframes bottomerr_ani { 0% {opacity:1} 90% {opacity:1} 100% {opacity:0} }

a.powered,a.powered:hover { color:#FFF;font-size:1em;font-weight:600;text-shadow:-1px -1px 2px #000,1px 1px 2px #000,0px 0px 5px #000; }
.dpowered { position:fixed;bottom:5px;right:15px;opacity:0;overflow:hidden;animation: powered_ani 5s linear 0.1s 1 normal forwards;}
@keyframes powered_ani {
    00%  { opacity:0 }
    20%  { opacity:0 }
    30%  { opacity:1 }
    90%  {  opacity:1 }
    100% {  opacity:.2 }
}

a.head:link 	{  COLOR:#ACA;font-size:1em;FONT-WEIGHT: 600; }
a.head:visited	{COLOR:#ACA;font-size:1em;FONT-WEIGHT: 600; }
a.head:hover	{  COLOR:#0F0;font-size:1em;FONT-WEIGHT: 600;border:1px solid #00FF00; }
a.head:active	{  COLOR:#0F0;font-size:1em;FONT-WEIGHT: 600; }

TABLE.post { padding:4px;border-collapse:collapse;}
table.bordered { border:1px solid #444 }
TD.post {  border:1px solid #334;padding:2px;font-size:10px; }
TD.thr { font-size:1.25em;COLOR:#eeeeff; }


tbody.bordered { border:1px solid #444 }
TH { vertical-align:top;text-align:left;padding-left:10px;font-weight:600;;color:#444;background-color:#AAA;font-size:1em }
TD.back,P.back,.back,.backt { COLOR:#888;}
TD { vertical-align:top;text-align:left;padding-left:10px }
td.bordered { border:1px solid #444 }
TABLE.alternate tr { background-color:#E0E0E0; }
TABLE.alternate tr:nth-child(odd)  { background-color:#E8E8E8; }
TABLE.alternate tr:nth-child(even) { background-color:#D8D8D8; }
TABLE.alternate tr:hover { background-color:#F8F8D8; }


.ct1,ct1f {  COLOR:#444;background-color:#E8E8E8;}
.ct2,ct2f {  COLOR:#444;background-color:#E0E0E0}
.ct3,cf3f {  COLOR:#444;background-color:#D8D8D8}
.ct4,ct4f {  COLOR:#444;background-color:#D0D0D0}
.ct5,ct5f {  COLOR:#444;background-color:#C8C8C8}
.ct1f,ct2f,ct3f,ct4f,ct5f { }

/* the post box overall */
.dpostb1,.dpostb2,.dpostb3 { background-color:#D8D8D8;border:1px solid #C8C8C8;padding:5px;margin-right:5px;}
.dpostb2 { margin-left:30px;}
.dpostb3 { margin-left:60px;}

/* thename box */
.dpostname { floaft:lefdt;fwidth:120px;color:#666;}

/* the options box */
.dposto1,.dposto2,.dposto3 { color:#222;text-align:right;cflear:both;font-size:0.8em;}
.dposto1,.dpostuser1,.dpostmode1,.dpostrate1 { }
.dposto2,.dpostuser2,.dpostmode2,.dpostrate2 { }
.dposto3,.dpostuser3,.dpostmode3,.dpostrate3 { }


.dpostuser { padding:10px 0px 10px 0px;color:#444;overflow-x:auto; }
.dpostmode { padding:10px 0px 10px 0px;color:#080;overflow-x:auto; }
.dpostrate { color:#FFF }

.postvip   { color:#88a; }
.postmod   { color:#8aa; }
.postadmin { color:#080; }
.postban	 { color:#622; }

a.post:link,a.post:visited, 	{	COLOR:#F0F;font-weight:300;}
a.post:hover,a.post:active,	{ COLOR:#0FF;font-weight:300;}
a.postn:link,a.post:visited, 	{	COLOR:#A0A;font-weight:300;}
a.postn:hover,a.post:active,	{ COLOR:#FA0;font-weight:300;}
a.mod:link,a.mod:visited {	 COLOR:#800;font-size:1.1em;}
a.mod:hover,a.mod:active {	 COLOR:#F00;font-size:1.1em;}
a.vip:link 		{  COLOR:#CFC;font-size:14px;FONT-WEIGHT:600; }
a.vip:visited	{  COLOR:#CFC;font-size:14px;FONT-WEIGHT:600; }
a.vip:hover		{  COLOR:#FFF;font-size:14px;FONT-WEIGHT:600; }
a.vip:active	{  COLOR:#FFF;font-size:14px;FONT-WEIGHT:600; }



CODE { background-color:#FFE }
IMG,PRE { max-width:100%;}
IMG.border { border:1px solid #488;}
IMG.clear {clear:both;}
.onimage  { background-position:0px 0px;BACKGROUND-IMAGE:URL('holo/holo_forumonoff.png');width:24px;height:24px }
.offimage { background-position:-27px 0px;BACKGROUND-IMAGE:URL('holo/holo_forumonoff.png');width:24px;height:24px }


/*ENDTEXT*/









.icolock { display:inline-block;background-position:-7px -105px;  BACKGROUND-IMAGE:URL('icon_white.png');width:16px;height:16px }
.iconews { display:inline-block;background-position:-7px -254px;  BACKGROUND-IMAGE:URL('icon_white.png');width:16px;height:16px }
.icostic { display:inline-block;background-position:-207px -407px;BACKGROUND-IMAGE:URL('icon_white.png');width:10px;height:16px }
.icomail { display:inline-block;background-position:-6px -58px;		BACKGROUND-IMAGE:URL('icon_white.png');width:18px;height:16px }



.centrepad { text-align:center;margin-top:8px;}
.time { font-family:MS Sans Serif;font-weight:600;color:#888;position:absolute;right:0px;text-align:right;}

.book 	{background-color:#444;padding:10px;}
.booktabact,.booktabinact	{float:left;width:125px;margin-left:5px;padding:8px;font-size:14px;position:relative;border-radius: 8px 8px 0 0;}
.booktabact 	{background-color:#444;color:#AAF;text-shadow:0px 0px 2px #000,0px 0px 4px #FFF;font-weight:600;box-shadow:-1px -1px 1px #0FF,1px -1px 1px #0FF;}
.booktabinact {background-color:#333;color:#88B;text-shadow:-1px -1px 1px #000,0px 0px 1px #CCF;}
.bookbutact,.bookbutinact	{float:left;width:200px;margin:4px; padding:4px;font-size:14px;font-weight:600;position:relative;border-radius: 8px 8px 8px 8px;}
.bookbutact 	{background-color:#444;color:#aaF;border:1px solid #0FF;text-shadow:0px 0px 2px #000,0px 0px 4px #FFF;	box-shadow:0px 0px 2px #0FF,0px 0px 3px #0FF;text-align:center;font-weight:600;}
.bookbutinact {background-color:#444;color:#88b;border:1px solid #000;text-shadow:-1px -1px 1px #000,0px 0px 1px #CCF;box-shadow:-1px -1px 2px #888,1px 1px 2px #000;text-align:center}




/* USED BY ROSTER */
.cellon 	{ border:1px solid #040;background:#080;color:#080;width:12px;}
.celloff	{ border:1px solid #444;background:#000;color:#000;width:12px;}
.cellreq 	{ border:1px solid #808;background:#F0F;color:#F0F;width:12px;}
.cellbl		{ border-left:1px solid #0AA;}
.cellbb		{ border-bottom:1px solid #0AA;}

.T1{COLOR:#AAA;font-weight:600;font-size:32px;text-shadow: 1px 1px 1px #00;}

.qloginpop {margin:0px;padding:4px;text-align:left;white-space:nowrap;box-shadow:1px 1px 8px #000;
	
		background: -moz-linear-gradient (135deg, rgba(255,255,255,0.9) 0%,rgba(255,255,255,0.9) 80%, rgba(255,255,255,0) 100%);
	background: -webkit-linear-gradient(135deg, rgba(255,255,255,0.9) 0%,rgba(255,255,255,0.9) 80%,rgba(255,255,255,0) 100%);
					background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%,rgba(255,255,255,0.9) 80%,rgba(255,255,255,0) 100%);
	
}



.backh1{COLOR:#FFF;font-weight:600;font-size:36px;text-shadow: 1px 1px 1px #000;}
.backh2{COLOR:#FFF;font-weight:600;font-size:24px;text-shadow: 1px 1px 1px #000;}
.backh3{COLOR:#FFF;font-weight:600;font-size:18px;text-shadow: 1px 1px 1px #000;}
.alertp{ COLOR:#00FF00;font-size:11px;FONT-WEIGHT: 600;}
.alertn{ COLOR:#F00;font-size:11px;FONT-WEIGHT: 600;}


HR {  font-size:11px;COLOR:#DDDDEE;FONT-WEIGHT:600; }
    
ol li {display:block;} /* hide original list counter */
ol > li:first-child {counter-reset: item;} /* reset counter */
ol > li {counter-increment: item; position: relative;} /* increment counter */
ol > li:before {content:counters(item, ".") ". "; position: absolute; margin-right: 100%; right: 10px;} /* print counter */


.anim_attention { animation: anim_attention_key 2s linear 0.1s 1 normal forwards;animation-iteration-count: infinite;}
@keyframes anim_attention_key {
    0%    { opacity:1;}
    50%   { opacity:.1}
    100%   { opacity:1}
}

.lds-ring {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 64px;
  height: 64px;
  margin: 8px;
  border: 8px solid #fff;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #fff transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}