:root {
	--menu-font: "Rubik";
	--title-font: "Archivo Black";
	--site-background-color: #343434;
	--panel-color: #617277;
	--content-width: calc(100% - 10px);
/*	--content-width: 900px; */
/*	--content-subwidth: 880px; */
	--content-subwidth: calc(100% - 30px);
/*	--inner-content-width: 800px; */
	--inner-content-width: calc(100% - 110px);
	--drop-shadow: 5px 5px 3px #343434;
	--drop-shadow-dark: 5px 5px 8px black;
	--box-shadow: 3px 3px 3px black;
	--default-font-size: 14px;
}

body {
	margin: 0;
	text-align: center;
	font-family: var(--menu-font);
	background: var(--site-background-color);
	font-size: var(--default-font-size);
	color: black;
}

*::-webkit-scrollbar {
	background: url("/img/scrollbar-bread.png");
	background-size: 150%;
	border: solid 2px black;
	border-radius: 10px;
	width: 18px;
}

*::-webkit-scrollbar-thumb {
	background-color: black;
	border-radius: 10px;
}

input, select, textarea {
	background-color: #A1A1A1;
	border: solid 1px black;
	color: #00009D;
	font-size: 100%;
	padding: 2px 8px 2px 8px;
	font-weight: normal;
	font-family:Tahoma, Geneva, sans-serif;
	border-radius: 5px;
	width: 220px;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}

option:focus {
	background-color: #A1A1A1;
	color: #00009D;
}

option { border: solid 1px transparent; }

option:checked {
	background: #00009D;
	color: #A1A1A1;
}

option:hover {
	border:dashed 1px black;
}

textarea {
	width: 100%;
	resize: none;
}

select.timeselect { width: calc(220px / 3.05); }
select.timeselect2 { width: calc(220px / 3.05); }

input[type="checkbox"], input[type="radio"] {
	width: auto;
}

input.passcheck {
	padding-right: 34px;
}

#buttondiv, .buttondiv, .buttondiv2, .buttondiv3, #buttondivbottom, .buttondivbottom, .buttondivfit {
	text-align: center;
	margin: auto;
	margin-bottom: 5px;
	margin-top: 5px; 
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	width:100%;
	display:block;
	height: 38px;
}

#buttondivbottom, .buttondivbottom {
	position:absolute;
	bottom: 0px;
	padding-bottom: 5px;
	width: calc(100% - 20px);
}

#buttondivbottom { margin-bottom: 30px; }

#footerinfo {
	position:absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;
	padding-bottom: 10px;
	margin-top: 5px;
	border-top: solid 1px black;
}

#footerinfo span {
	margin-left: 20px;
	margin-right: 20px;
	color: black;
	border-bottom: dashed 1px black;
	cursor: pointer;
}

#footerinfo span:hover {
	color: darkgrey;
}

.buttonwrapper {
	display:inline;
	border:solid 1px black;
}

button {
	border:solid 2px black;
	background: #343434;
	margin: 0px;
	padding: 0px;
	border-radius: 5px;
	padding:5px;
	color: white;
	filter:drop-shadow(var(--drop-shadow-dark));
	margin-top: 5px;
	margin-bottom:5px;
}

button:disabled {
	opacity: .50;	
}

button:hover:not(:disabled) {
	background: #6e0c07;
	cursor:pointer;
}

button:active:hover:not(:disabled) {
	background: black;
}

#buttondiv {
	width:100%;
}

#buttondiv button, #buttondivbottom button, .buttondivbottom button {
	margin-left: 40px;
	margin-right: 40px;
	width:150px;
}

button:active:not(:disabled) {
	box-shadow: inset 1px 2px 5px #777;
	transform: translateY(1px);
}

.buttondiv button {
	margin-left: 40px;
	margin-right: 40px;
	width:100px;
}

.buttondiv-close button {
	margin-left: 20px !important;
	margin-right: 20px !important;
	width:150px !important;
}

.buttondiv2 button {
	margin-left: 20px !important;
	margin-right: 20px !important;
	margin-right: 20px !important;
	width:100px !important;
}

.buttondivfit button {
	margin-left: 10px !important;
	margin-right: 10px !important;
	min-width:100px !important;
	width: fit-content;
	padding: 5px 10px 5px 10px;
}


.buttondiv3 button {
	margin-left: 15px;
	margin-right: 15px;
	width:90px;
}

.buttondiv button.button-big, .buttondiv2 button.button-big { width: 150px; }

.buttonfit {
	width: fit-content;
}

.nowrap {
	white-space: nowrap;
}

#logobox {
	border-radius: 0px;
}

#comingsoon {
	position: relative;
	width: 500px;
	height: 500px;
	border: solid 4px black;
	border-radius: 10px;
	margin: 0 auto;
	box-shadow: 5px 5px 8px black;
	text-align: center;
}

#comingsoon #guildname {
	margin-top: 30px;
}

#comingsooncontent {
	position: relative;
}

#comingsooncontent h1 {
	filter:drop-shadow(2px 2px 3px grey);
}

#guildname {
	margin: auto;
	width: fit-content;
}

#guildname img{
	width: 400px;
}


.pagetitle, .bigcontent, .bigcontent2 {
	font-weight: 600;
	color: black;
	font-family: var(--title-font);
	filter:drop-shadow(var(--drop-shadow));
	text-align: center;
	width: 100%;
	margin:auto;
	overflow: ellipsis;
	user-select: none;
	position: relative;
}

#refresh {
	position: relative;
	float: right;
	margin-right: 10px;
	height: 34px;
	width: 34px;
	background: url("/img/refresharrows.png");
	background-size: 34px;
	background-repeat: no-repeat;
}

#refreshpad {
	position: relative;
	float: left;
	margin-left: 10px;
	height: 34px;
	width: 34px;
	content: " ";
}

#refresh.rotated {
	-webkit-transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	transform: rotate(360deg);
	-webkit-transition-duration: 1s;
	-moz-transition-duration: 1s;
	-o-transition-duration: 1s;
	transition-duration: 1s;
}

.construction {
	background-image: url("/img/construction-tape-50.png");
	background-repeat: no-repeat;
	background-position: 50% 0;
	background-size: cover;
}

.pagetitle { font-size: 24px; font-weight: bold; padding-bottom: 10px; font-family: "Morpheus"}
.bigcontent { font-size: 18px; font-weight: bold; }
.bigcontent2 {font-size: 20px; font-weight: bold; }
.noshadow { filter: none !important; }

.notselectable {
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}

.float-center {
	position:relative;
	left: 50%;
}

.float-left {
	position: relative;
	float: left;
}

.centered {
	text-align: center !important;
	margin: auto !important;
}

.subtitle {
	font-weight: bold;
	font-size: 24px;
}

.subtitle2 {
	font-weight: bold;
	font-size: 18px;
}

.biginfo {
	font-weight: bold;
	font-size: 44px;
}

.dropshadow {
	filter:drop-shadow(var(--drop-shadow)));
}

.dropshadow-dark {
	filter:drop-shadow(var(--drop-shadow-dark));
}

.scrollable {
	overflow:auto;
}

.dropshadow-red {
	filter:drop-shadow(5px 5px 8px red);
}

#titlebar {
	width: var(--content-width);
	margin: auto;
	margin-top: 10px;
	padding-bottom: 10px;
	padding-top: 10px;
	border: solid 3px black;
	border-radius: 10px;
	box-shadow: 5px 5px 8px black;
	background-color: var(--panel-color);
	text-align: center;
}

#titlebar table {
	width: 100%;
}

#titlebar table tr td:first-child, #titlebar table tr td:last-child {
	width: 25%;
}

#titlebar table tr td {
	text-align: center;
}

#useridlink {
	cursor: pointer;
	font-weight: bold;
	color: darkblue;
	border-bottom: dashed 1px darkblue;
}

#useridlink:hover {
	color: darkgrey;
}

#guildsubtitle {
	margin: auto;
	margin-top: 10px;
	width: fit-content;
}

#menucontainer {
	width: var(--content-width);
	margin: auto;
	margin-top: 5px;
	padding-top: 5px;
	padding-bottom: 5px;
	border: solid 3px black;
	border-radius: 10px;
	box-shadow: 5px 5px 8px black;
	background-color: var(--panel-color);
	text-align: center;
}

#menucontainer table {
	width: 100%;
	text-align: center;
	table-layout: fixed;
}

.menuitem {
	font-size: 18px;
	font-weight: 600;
	color: black;
	font-family: var(--menu-font);
	-webkit-user-select: none;
	-ms-user-select: none;
}

.menuitem:hover:not(.menuitem-disabled), .menuitem.dropdown-selected {
	color: darkgray;
}

.menuitem:not(.menuitem-disabled) span {
	cursor: pointer;
}

.menuitem-disabled {
	cursor: default;
	color: #454545;
}

.menuitem-selected {
	font-weight: 900;
}

#infodiv {
	width: var(--content-subwidth);
	margin: auto;
	margin-top: 5px;
	border: solid 3px black;
	border-radius: 4px;
	background-color: var(--panel-color);
	text-align:center;
	padding: 10px;
	border-radius: 10px;
	height: fit-content;
	font-family: var(--menu-font);
	overflow-y: hidden;
}

.invisiblebox {
	width: var(--content-subwidth);
	top: calc(50% - 81px);
	margin: auto;
	margin-top: 5px;
	border-radius: 4px;
	text-align:center;
	padding: 10px;
	height: fit-content;
	font-family: var(--menu-font);
	overflow-y: hidden;
	position: absolute;
}

.invisiblebox img {
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: black;
	stroke: black;
}

.noscroll {
	overflow-x: hidden;
	overflow-y: hidden;
}

#userinfodiv {
	width: fit-content;
}

#indexcontent, #registercontent {
	height: 100%;
	background-image: url("/img/bread-warrior-faded.png");
	background-size: contain;
	background-repeat:repeat-x;
	background-position: left center;
	/*background-position:center center; */
}

#loginbox, #registerbox{
	margin: auto;
	width: fit-content;
}

#loginbox table tr td:first-child, #registerbox table tr td:first-child, #pwchangebox table tr td:first-child, #eventsubmissioncontainer table tr td:first-child{
	font-weight: bold;
	text-align: right;
	padding-right: 5px;
	font-family: var(--menu-font);
}

#passwordhelp {
	color:blue;
	cursor: pointer;
	border: solid 1px blue;
	padding: 0px 2px 0px 2px;
	background: grey;
}

.validationline td div{
	font-family: var(--menu-font);
	font-size: 10px;
	line-height: 18px;
	max-height: 18px;
	min-height: 18px;
	text-align: center;
	border: solid 1px transparent;
}

.validation-Bad {
	background-color: red;
	color: white;
	border: solid 1px #5c0000 !important;
}

.validation-Good {
	background-color: yellow;
	color: black;
	border: solid 1px #4d4d00 !important;
}

.validation-Great {
	background-color: #00a600;
	color: white;
	border: solid 1px #004200 !important;
}

#rosterheaderdiv, #useradminheaderdiv, .tableheaderdiv {
	position:block;
	margin: auto;
	width: fit-content;
	text-align:center;
}

#rostercontentdiv, #useradmincontentdiv, .tablecontentdiv {
	width: fit-content;
	position:relative;
	margin: auto;
	background-color: #617277;
	text-align:center;
}

.scrollabletable {
	width: 100%;
	border-collapse: separate !important;
	background: #819297;
}

.scrollabletable tr th {
	border: solid 1px black !important;
	padding: 5px;
	text-align: center;
}

.selectableheader th:not(:first-child), .selectableheader2 th {
	cursor: pointer;
}

.scrollabletable tr:first-child {
	border: solid 1px black !important;
	position: sticky !important;
	position: -webkit-sticky !important;
	top: 0 !important;
	background-color: #819297;
}

.scrollabletable td {
	text-align: left;
	border: solid 1px black !important;
	padding: 5px !important;
	text-align:center;
}

.standardtable:has(> div) {
}

.tableborder {
	border: solid 2px black;
}

#rosterheaderdiv table tr th { cursor: pointer; }

#rosterheaderdiv table tr th:hover {
	color: darkgrey;
}

#rostercontentdiv table, #rosterheaderdiv table, #useradmincontentdiv table, #useradminheaderdiv table, .tableheaderdiv table, .tablecontentdiv table {
	border-collapse: collapse;
	width: var(--inner-content-width);
}

#rosterheaderdiv table tr th, #useradminheaderdiv table tr th, .tableheaderdiv table tr th {
	border: solid 1px black;
	border-bottom: solid 2px black;
	padding: 2px 4px 2px 4px;
	text-align: center;
	background: #819297;
}

#rostercontentdiv table tr td, #useradmincontentdiv table tr td, .tablecontentdiv table tr td {
	border: solid 1px black;
	padding: 2px 4px 2px 4px;
	text-align: center;
}

#rostercontentdiv {
/*	border: solid 1px black; */
	border-top: 0;
	padding: 0px;
}

.sort-asc {
	background-position: right center;
	background-image: url("/img/sort-arrow-up.png");
	background-repeat: no-repeat;
}

.sort-desc {
	background-position: right center;
	background-image: url("/img/sort-arrow-down.png");
	background-repeat: no-repeat;
}

.cc-DeathKnight {
	background-color: #C41E3A;
	color: #FFFFFF;
}

.cc-DemonHunter {
	background-color: #A330C9;
	color: #FFFFFF;
}

.cc-Druid {
	background-color: #FF7C0A;
}

.cc-Evoker {
	background-color:#33937F;
}

.cc-Hunter {
	background-color:#AAD372;
}

.cc-Mage {
	background-color:#3FC7EB;
}

.cc-Monk {
	background-color:#00FF98;
}

.cc-Paladin {
	background-color:#F48CBA;
}

.cc-Priest {
	background-color:#FFFFFF;
	color: #000000;
}

.cc-Rogue {
	background-color:#FFF468;
}

.cc-Shaman {
	background-color:#0070DD;
}

.cc-Warlock {
	background-color:#8788EE;
}

.cc-Warrior {
	background-color:#C69B6D;
}

.cn-DeathKnight { color: #C41E3A; }
.cn-DemonHunter { color: #A330C9; }
.cn-Druid { color: #FF7C0A; }
.cn-Evoker { color:#33937F; }
.cn-Hunter { color:#AAD372; }
.cn-Mage { color:#3FC7EB; }
.cn-Monk { color:#00FF98; }
.cn-Paladin { color:#F48CBA; }
.cn-Priest { color:#FFFFFF; }
.cn-Rogue {	color:#FFF468; }
.cn-Shaman { color:#0070DD; }
.cn-Warlock { color:#8788EE; }
.cn-Warrior { color:#C69B6D; }


#greyoutboundingbox, #greyoutboundingbox2, #superselectboundingbox {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
}

#greyout, #greyout2 {
	position: absolute;
	width: 100%;
	height: 100%;
/*	background-color: #BABABA; */
	background-color: #000000;
	opacity: 0.7;
}

#greyout2 {
	opacity: 0.75;
}

#passwordhelp:hover {
	border-bottom: dashed 1px blue;
}

#passwordpopupcontent ul li {
	text-align: left;
}

.infopopup {
	position: relative;
	top: 50%;
	transform: translate(0, -50%);
	width: fit-content;
	overflow: auto;
	border: solid 2px black;
	margin: auto;
	box-shadow: 5px 5px 5px #000000;
/*	background: #CDCDCD; */
	background: var(--panel-color);
	border-radius: 10px;
	padding: 10px;
}

#infopopup table tr {
	height: 28px;
}

#infopopup table td {
	font-size: 14px;
	text-align: left;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}

.infopopupcontent {
	padding-left: 5px;
	padding-right: 5px;
}

#registersuccesspopup {
	width: 350px;
	padding: 0px 5px 0px 5px;
}

.pwtoggle {
	width: 19px;
	height: 14px;
	display: absolute;
	top: 6px;
	left: 195px;
}

.pwhide {
	background-image: url("/img/password-hide.png");
}

.pwshow {
	background-image: url("/img/password-show.png");
}

.pwfieldbox { position: relative; }

.pwfieldbox input {
	padding-right: 30px;
}

.pwfieldbox div { position: absolute; }

#errordiv {
	padding:0px 10px 2px 10px;
	border: solid 1px transparent;
}

.errormessage {
	border: solid 1px black;
	background-color: yellow;
	width: fit-content;
	margin:auto;
	color: Red;
	height: auto;
}

#resendvalidation {
	color: blue;
	border-bottom: solid 1px blue;
	cursor: pointer;
}

.dropdown {
	position: relative;
	display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
	display: none;
	position: absolute;
	background-color: #819297;
	min-width: 130px;
	filter:drop-shadow(5px 5px 8px black);
	border: solid 3px black;
	border-radius: 10px;
	z-index: 99999;
}

/* Links inside the dropdown */
.dropdown-content a {
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
  	font-family: var(--menu-font);
	font-weight: 600;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {font-weight: 900;}

.dropdown-link {
	cursor: pointer;
	-webkit-user-select: none;
	-ms-user-select: none;
}

.dropdown-link:hover {
	background: var(--site-background-color);
	color: #DDDDDD;
	border-radius: 7px;
}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show { display:block; }

.hassubmenu.dropdown-selected .dropdown-content{
	display: block;
}

.standardtable {
	background: #EFEFEF;
}
.standardtable tr:nth-child(even) {
	background:#BCBCBC;
}

.standardtable2 tr:nth-child(even) {
	background: var(--panel-color);
}

#usereditcontainer {
	width: fit-content;
	margin: auto;
}

.fauxtableheader {
	border: solid 1px black;
	border-bottom: solid 2px black;
	padding: 2px 4px 2px 4px;
	text-align: center;
	background: #819297;
	font-size: 14px;
	font-weight: bold;
}

.fauxtablecell {
	border: solid 1px black;
	padding: 2px 4px 2px 4px;
	text-align: center;	
}

#rankadminheaderdiv, #rankadmincontentdiv {
	width: 300px;
	margin: auto;
}

#rankadmincontentdiv div:nth-child(even) {
	background: #CCCCCC;
}

.mvdn, .mvup, .mvud {
	display: inline;
	float: right;
	background: none;
}

.showdisable {
	background: transparent;
	opacity: 0.3;
}

.showenable {
	background: transparent;
}

input.smallinput {
	height: 18px;
}

#modalpopup {
	padding: 5px;
}

.centerfillbox {
	width: fit-content;
	margin: auto;
	font-family: var(--menu-font);
}

.pad-5 {
	padding:5px;
}

.pad-10 {
	padding:10px;
}

.padlr-5 {
	padding-left: 5px;
	padding-right: 5px;
}

.textlink {
	font-weight: bold;
	color: darkblue;
	text-decoration: underline;
	cursor: pointer;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.domheader {
	width: calc((var(--content-subwidth) / 7) - 5px);
	border: solid 1px black;
	border-bottom: solid 2px black;
	display: inline-block;
	margin: 0px;
	background: #1b1ba8;
	color: white;
}

.eventtime {
	font-size: 10px;
	font-weight: normal;
}

.floatleft {
	position: relative;
	float: left;
	clear: left;
}

.floatright {
	position: relative;
	float: right;
	clear: right;
}

.textleft {
	text-align: left;
}

.textright {
	text-align: right;
}

#eventpopup {
	padding: 10px;
	height: fit-content;
}

#eventpopuptable {
	border-collapse: collapse;
	font-size: 14px;
	background-color: #A1A1A1;
}

#eventpopuptable tr td:first-child{
	width: 40px;
	border: solid 1px black;
	padding-right: 5px;
	vertical-align: top;
	font-weight: bold;
}

#eventpopuptable tr td:last-child {
	max-width: 450px;
	width: 450px;
	border:solid 1px black;
	padding-left: 5px;
	vertical-align: top;
	font-weight: bold;
	color: darkblue;
}

#blizzardregisterbutton {
	width: fit-content;
	padding-left: 30px;
	background-image: url("/img/battlenet-icon.png");
	background-repeat: no-repeat;
	background-size: contain;
}

#mytoons {
	height: 100px;
	overflow: auto;
	width: fit-content;
	margin: auto;
	padding: 5px;
	background-color: black;
	border: solid 2px black;
}

#deleteaccountbutton, #eventdeletebutton {
	background-color: red;
}

#eventsubmissiontable {
	width: 100%;
}

#signuplist {
	width: 487px;
	margin: auto;
	margin-bottom: 35px;
}

#signuplist table {
	margin-top: 5px;
	position: relative;
	table-layout: fixed;
	text-align: center;
	width: 100%;
	border-collapse: collapse;
}

.signupheader {
	font-size: 14pt;
	line-height: 16px;
	border: solid 1px black;
	border-bottom: solid 3px black;
	width: 100%;
	padding: 5px 0px 5px 0px;
}

.signupheader img {
	width: 16px;
}

.rolelist {
	width: 100%;
	height: 200px;
	border: solid 1px gray;
	overflow-y: auto;
	overflow-x: none;
	padding: 5px 0px 5px 0px;
	font-size: 12px;
}

.signupcount {
	font-size: 14px;
}

.subscript {
	font-size: 10px;
}

.inlineloader {
	height: 16px;
}

#signupselect {
	background: black;
	color: gray;
}

#signuproleselect {
	width: 100%;
	padding: 0px;
	margin: 0px;
}

#signuproleselect li {
	display: inline-block;
	white-space: nowrap;
	width: calc((100% - 20px)/3);
	text-align: center;
	padding-top: 10px;
}

#signuproleselect li img { width: 16px; }

.eventable {
	table-layout: fixed;
}

.leftjustify {
	text-align: left;
}

.rightjustify {
	text-align: right;
}

.centerjustify {
	text-align: center;
}

.toclist {
	font-size: 20px;
	font-variant: small-caps;
}

#privacycontainer {
	text-align: left;
	padding: 0px 10px 0px 10px;
	overflow-x: auto;
}

.privsubtitle {
	font-size: 22px;
	font-variant: small-caps;
	font-weight: bold;
}

.italics {
	font-style: italic;
}

.inlinelink {
	color: darkblue;
	text-decoration: underline;
	cursor: pointer;
}

.checkboxnotclickable {
	accent-color: grey;
	pointer-events: none;
}

.checkboxnotclickable:checked {
	accent-color: green !important;
}

.smallertext {
	font-size: 75%;
}

@-webkit-keyframes wiggle {
  0% {-webkit-transform: rotate(10deg);}
  25% {-webkit-transform: rotate(-10deg);}
  50% {-webkit-transform: rotate(20deg);}
  75% {-webkit-transform: rotate(-5deg);}
  100% {-webkit-transform: rotate(0deg);}
}

@-ms-keyframes wiggle {
  0% {-ms-transform: rotate(1deg);}
  25% {-ms-transform: rotate(-1deg);}
  50% {-ms-transform: rotate(1.5deg);}
  75% {-ms-transform: rotate(-5deg);}
  100% {-ms-transform: rotate(0deg);}
}

@keyframes wiggle {
  0% {transform: rotate(10deg);}
  25% {transform: rotate(-10deg);}
  50% {transform: rotate(20deg);}
  75% {transform: rotate(-5deg);}
  100% {transform: rotate(0deg);}
}

/* -- CSS Loader --*/

.drawing{
    width: 100vw;
    height: 100vh;
    position: relative;
    display: block;
/*    background-color: #3a3a3a; */
}




/* -- Loading thingy --*/
.loading-dot {
    border-radius:100%;
    height:10px;
    width:10px;
    background-color: #ffffff;
    position:absolute;
    left:0;
    right:0;
    margin:auto;
    top:0;
    bottom:0;
    box-shadow: 0px 40px 0px 0px #ffffff,0px -40px 0px 0px #ffffff,40px 0px 0px 0px #ffffff,-40px 0px 0px 0px #ffffff,
    40px 40px 0px 0px #ffffff,-40px -40px 0px 0px #ffffff,40px -40px 0px 0px #ffffff,-40px 40px 0px 0px #ffffff;
    -webkit-animation: load 3s infinite linear;
    -moz-animation: load 3s infinite linear;
    -o-animation: load 3s infinite linear;
    animation:load 3s infinite linear;
}


@-webkit-keyframes load {
  0%   {
    -webkit-transform: translate(0px,0px),rotate(0deg); 
    box-shadow: 0px 40px 0px 0px #ffffff,0px -40px 0px 0px #ffffff,40px 0px 0px 0px #ffffff,-40px 0px 0px 0px #ffffff,
    40px 40px 0px 0px #ffffff,-40px -40px 0px 0px #ffffff,40px -40px 0px 0px #ffffff,-40px 40px 0px 0px #ffffff;
  }

  25%{
    box-shadow: 0px 40px 0px 0px #ffffff,0px -40px 0px 0px #ffffff,40px 0px 0px 0px #ffffff,-40px 0px 0px 0px #ffffff,
    -40px -40px 0px 0px #ffffff,40px 40px 0px 0px #ffffff,-40px 40px 0px 0px #ffffff,40px -40px 0px 0px #ffffff;
  }

  50%{
    box-shadow: 0px -40px 0px 0px #ffffff,0px 40px 0px 0px #ffffff,-40px 0px 0px 0px #ffffff,40px 0px 0px 0px #ffffff,
    -40px -40px 0px 0px #ffffff,40px 40px 0px 0px #ffffff,-40px 40px 0px 0px #ffffff,40px -40px 0px 0px #ffffff;
  }

  70%{
    box-shadow: 0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,
    0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff;
  }

  75%{
    box-shadow: 0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,
    0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff;
    height:10px;
    width:10px;
  }

  80%{
    -webkit-transform: translate(0px,0px) rotate(360deg); 
    box-shadow: 0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,
    0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff;
    background-color: #ffffff;
    height:40px;
    width:40px;
  }

  85%{
    -webkit-transform: translate(0px,0px) rotate(360deg);
    box-shadow: 0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,
    0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff;
    background-color: #ffffff; 
    height:40px;
    width:40px;
  }

  90%{
    -webkit-transform: translate(0px,0px) rotate(360deg); 
    box-shadow: 0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,
    0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff;
    background-color: #ffffff; 
    height:10px;
    width:10px;
  }

  95{
    box-shadow: 0px 40px 0px 0px #ffffff,0px -40px 0px 0px #ffffff,40px 0px 0px 0px #ffffff,-40px 0px 0px 0px #ffffff,
    40px 40px 0px 0px #ffffff,-40px -40px 0px 0px #ffffff,40px -40px 0px 0px #ffffff,-40px 40px 0px 0px #ffffff;
  }

  100%{
    -webkit-transform: rotate(360deg);
    box-shadow: 0px 40px 0px 0px #ffffff,0px -40px 0px 0px #ffffff,40px 0px 0px 0px #ffffff,-40px 0px 0px 0px #ffffff,
    40px 40px 0px 0px #ffffff,-40px -40px 0px 0px #ffffff,40px -40px 0px 0px #ffffff,-40px 40px 0px 0px #ffffff;
  }

}

@-moz-keyframes load {
  0%   {
    -moz-transform: translate(0px,0px),rotate(0deg); 
    box-shadow: 0px 40px 0px 0px #ffffff,0px -40px 0px 0px #ffffff,40px 0px 0px 0px #ffffff,-40px 0px 0px 0px #ffffff,
    40px 40px 0px 0px #ffffff,-40px -40px 0px 0px #ffffff,40px -40px 0px 0px #ffffff,-40px 40px 0px 0px #ffffff;
  }

  25%{
    box-shadow: 0px 40px 0px 0px #ffffff,0px -40px 0px 0px #ffffff,40px 0px 0px 0px #ffffff,-40px 0px 0px 0px #ffffff,
    -40px -40px 0px 0px #ffffff,40px 40px 0px 0px #ffffff,-40px 40px 0px 0px #ffffff,40px -40px 0px 0px #ffffff;
  }

  50%{
    box-shadow: 0px -40px 0px 0px #ffffff,0px 40px 0px 0px #ffffff,-40px 0px 0px 0px #ffffff,40px 0px 0px 0px #ffffff,
    -40px -40px 0px 0px #ffffff,40px 40px 0px 0px #ffffff,-40px 40px 0px 0px #ffffff,40px -40px 0px 0px #ffffff;
  }

  70%{
    box-shadow: 0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,
    0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff;
  }

  75%{
    box-shadow: 0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,
    0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff;
    height:10px;
    width:10px;
  }

  80%{
    -moz-transform: translate(0px,0px) rotate(360deg); 
    box-shadow: 0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,
    0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff;
    background-color: #ffffff;
    height:40px;
    width:40px;
  }

  85%{
    -moz-transform: translate(0px,0px) rotate(360deg);
    box-shadow: 0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,
    0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff;
    background-color: #ffffff; 
    height:40px;
    width:40px;
  }

  90%{
    -moz-transform: translate(0px,0px) rotate(360deg); 
    box-shadow: 0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,
    0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff;
    background-color: #ffffff; 
    height:10px;
    width:10px;
  }

  95{
    box-shadow: 0px 40px 0px 0px #ffffff,0px -40px 0px 0px #ffffff,40px 0px 0px 0px #ffffff,-40px 0px 0px 0px #ffffff,
    40px 40px 0px 0px #ffffff,-40px -40px 0px 0px #ffffff,40px -40px 0px 0px #ffffff,-40px 40px 0px 0px #ffffff;
  }

  100%{
    -moz-transform: rotate(360deg);
    box-shadow: 0px 40px 0px 0px #ffffff,0px -40px 0px 0px #ffffff,40px 0px 0px 0px #ffffff,-40px 0px 0px 0px #ffffff,
    40px 40px 0px 0px #ffffff,-40px -40px 0px 0px #ffffff,40px -40px 0px 0px #ffffff,-40px 40px 0px 0px #ffffff;
  }

}

@keyframes load {
  0%   {
    transform: translate(0px,0px),rotate(0deg); 
    box-shadow: 0px 40px 0px 0px #ffffff,0px -40px 0px 0px #ffffff,40px 0px 0px 0px #ffffff,-40px 0px 0px 0px #ffffff,
    40px 40px 0px 0px #ffffff,-40px -40px 0px 0px #ffffff,40px -40px 0px 0px #ffffff,-40px 40px 0px 0px #ffffff;
  }

  25%{
    box-shadow: 0px 40px 0px 0px #ffffff,0px -40px 0px 0px #ffffff,40px 0px 0px 0px #ffffff,-40px 0px 0px 0px #ffffff,
    -40px -40px 0px 0px #ffffff,40px 40px 0px 0px #ffffff,-40px 40px 0px 0px #ffffff,40px -40px 0px 0px #ffffff;
  }

  50%{
    box-shadow: 0px -40px 0px 0px #ffffff,0px 40px 0px 0px #ffffff,-40px 0px 0px 0px #ffffff,40px 0px 0px 0px #ffffff,
    -40px -40px 0px 0px #ffffff,40px 40px 0px 0px #ffffff,-40px 40px 0px 0px #ffffff,40px -40px 0px 0px #ffffff;
  }

  70%{
    box-shadow: 0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,
    0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff;
  }

  75%{
    box-shadow: 0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,
    0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff;
    height:10px;
    width:10px;
  }

  80%{
    transform: translate(0px,0px) rotate(360deg); 
    box-shadow: 0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,
    0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff;
    background-color: #ffffff;
    height:40px;
    width:40px;
  }

  85%{
    transform: translate(0px,0px) rotate(360deg);
    box-shadow: 0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,
    0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff;
    background-color: #ffffff; 
    height:40px;
    width:40px;
  }

  90%{
    transform: translate(0px,0px) rotate(360deg); 
    box-shadow: 0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,
    0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff;
    background-color: #ffffff; 
    height:10px;
    width:10px;
  }

  95{
    box-shadow: 0px 40px 0px 0px #ffffff,0px -40px 0px 0px #ffffff,40px 0px 0px 0px #ffffff,-40px 0px 0px 0px #ffffff,
    40px 40px 0px 0px #ffffff,-40px -40px 0px 0px #ffffff,40px -40px 0px 0px #ffffff,-40px 40px 0px 0px #ffffff;
  }

  100%{
    transform: rotate(360deg);
    box-shadow: 0px 40px 0px 0px #ffffff,0px -40px 0px 0px #ffffff,40px 0px 0px 0px #ffffff,-40px 0px 0px 0px #ffffff,
    40px 40px 0px 0px #ffffff,-40px -40px 0px 0px #ffffff,40px -40px 0px 0px #ffffff,-40px 40px 0px 0px #ffffff;
  }

}
@-o-keyframes load {
  0%   {
    -o-transforms: translate(0px,0px),rotate(0deg); 
    box-shadow: 0px 40px 0px 0px #ffffff,0px -40px 0px 0px #ffffff,40px 0px 0px 0px #ffffff,-40px 0px 0px 0px #ffffff,
    40px 40px 0px 0px #ffffff,-40px -40px 0px 0px #ffffff,40px -40px 0px 0px #ffffff,-40px 40px 0px 0px #ffffff;
  }

  25%{
    box-shadow: 0px 40px 0px 0px #ffffff,0px -40px 0px 0px #ffffff,40px 0px 0px 0px #ffffff,-40px 0px 0px 0px #ffffff,
    -40px -40px 0px 0px #ffffff,40px 40px 0px 0px #ffffff,-40px 40px 0px 0px #ffffff,40px -40px 0px 0px #ffffff;
  }

  50%{
    box-shadow: 0px -40px 0px 0px #ffffff,0px 40px 0px 0px #ffffff,-40px 0px 0px 0px #ffffff,40px 0px 0px 0px #ffffff,
    -40px -40px 0px 0px #ffffff,40px 40px 0px 0px #ffffff,-40px 40px 0px 0px #ffffff,40px -40px 0px 0px #ffffff;
  }

  70%{
    box-shadow: 0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,
    0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff;
  }

  75%{
    box-shadow: 0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,
    0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff;
    height:10px;
    width:10px;
  }

  80%{
    -o-transforms: translate(0px,0px) rotate(360deg); 
    box-shadow: 0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,
    0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff;
    background-color: #ffffff;
    height:40px;
    width:40px;
  }

  85%{
    -o-transforms: translate(0px,0px) rotate(360deg);
    box-shadow: 0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,
    0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff;
    background-color: #ffffff; 
    height:40px;
    width:40px;
  }

  90%{
    -o-transforms: translate(0px,0px) rotate(360deg); 
    box-shadow: 0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,
    0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff,0px 0px 0px 0px #ffffff;
    background-color: #ffffff; 
    height:10px;
    width:10px;
  }

  95{
    box-shadow: 0px 40px 0px 0px #ffffff,0px -40px 0px 0px #ffffff,40px 0px 0px 0px #ffffff,-40px 0px 0px 0px #ffffff,
    40px 40px 0px 0px #ffffff,-40px -40px 0px 0px #ffffff,40px -40px 0px 0px #ffffff,-40px 40px 0px 0px #ffffff;
  }

  100%{
    -o-transforms: rotate(360deg);
    box-shadow: 0px 40px 0px 0px #ffffff,0px -40px 0px 0px #ffffff,40px 0px 0px 0px #ffffff,-40px 0px 0px 0px #ffffff,
    40px 40px 0px 0px #ffffff,-40px -40px 0px 0px #ffffff,40px -40px 0px 0px #ffffff,-40px 40px 0px 0px #ffffff;
  }

}