html {
	height: 100%;
}
body {
	height: 100%;
	margin: 0px;
	background-color: #102611;
	background: #102611 -webkit-linear-gradient(#255a26, #0C1A0B) no-repeat fixed; /* For Safari 5.1 to 6.0 */
	background: #102611 -o-linear-gradient(#255a26, #0C1A0B) no-repeat fixed; /* For Opera 11.1 to 12.0 */
	background: #102611 -moz-linear-gradient(#255a26, #0C1A0B) no-repeat fixed; /* For Firefox 3.6 to 15 */
	background: #102611 linear-gradient(#255a26, #0C1A0B) no-repeat fixed; /* Standard syntax */
	font-family: Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-size: 1em;
	box-sizing: border-box;
}



a {
	color: #FFFFFF;
	cursor: hand;
	cursor: pointer;
}

a:hover {

}

#wrapper {
	min-height: 100%;
	position: relative;
	padding-bottom: 2em;
	box-sizing: border-box;
}

#header {
	position: relative;

}

#logo {
	min-width: 300px;
	width: 40%;
	max-width: 700px;
	vertical-align: top;
	height: auto;
}

#info {
	position: absolute;
	right: 0px;
	top:50%;
	width: 70%;
	margin-left: 200px;
	-webkit-transition: top 0.5s ease-in-out,font-size 0.5s ease-in-out, width 0.5s ease-in-out;
	-moz-transition: top 0.5s ease-in-out, font-size 0.5s ease-in-out, width 0.5s ease-in-out;
	-o-transition: top 0.5s ease-in-out, font-size 0.5s ease-in-out, width 0.5s ease-in-out;
	transition: top 0.5s ease-in-out, font-size 0.5s ease-in-out, width 0.5s ease-in-out;
	text-align: right;
	font-size: 1.5em;
}



#clock {
	display: inline;
	margin-right: 10%;
}

#clock .nth {
	vertical-align: super;
	font-size: 0.5em;
}

#clock .time {
	white-space: nowrap;
}

#help {
	display: inline;
	margin-right: 4%;
	white-space: nowrap;
}

#help a:hover {
	text-decoration: underline;
}

#help .box {
	background-color: #bdd47c;
	color: #000000;
	display: inline-block;
	box-sizing: border-box;
	width: 1.3em;
	padding: 0px;
	margin-right: 5px;
	text-align: center;
	border: 1px solid #bdd47c;
}

#help a:hover .box {
	border: 1px solid #FFFFFF;
	color: #FFFFFF;
}

#content {
	text-align: center;
}

#content #tiles {
	display: inline-block;
	text-align: left;
	width: 100%;
	margin-top: 10px;
	/*padding: 20px;*/
	max-width: 1200px;
	text-align: center;
}

#content #tiles .banner {
	width: auto;
	display: block;

	vertical-align: top;
	box-sizing: border-box;
	position: relative;
	font-size: 19px;
	border-radius: 10px;
	text-align: left;
	transition: box-shadow 1s;
	overflow: hidden;
}

#content #tiles .banner img {
	display: block;
	width: 100%;
}

#content #tiles .tile {
	height: 180px;
	width: 180px;
	display: inline-block;
	margin: 20px;
	vertical-align: top;
	box-sizing: border-box;
	position: relative;
	font-size: 19px;
	border-radius: 10px;
	text-align: left;
	transition: box-shadow 1s;

	background: linear-gradient(#5F5F60, #373737);
}

#content #tiles .tile:after, #content #tiles .banner:after {
	z-index: -1;
	position: absolute;
	content: " ";
	display: block;
	bottom: -15px;
	height: 1px;
	right: 10px;
	left: 10px;
	background: rgba(0,0,0,0.3);
	-webkit-box-shadow: 0 0px 5px 5px rgba(0,0,0,0.4);
	-moz-box-shadow: 0 0px 5px 5px rgba(0,0,0,0.4);
	box-shadow: 0 0px 10px 5px rgba(0,0,0,0.4);
}

#content #tiles .tile:hover, #content #tiles .banner:hover {
	box-shadow: #FFFFFF 0px 0px 20px 0px;
	transition: none;
}

#content #tiles #website.tile {
	background: url('tiles/website_tile.png');
}

#content #tiles #staff.tile {
	background: url('tiles/staff_tile.png');
}

#content #tiles #newsletter.tile {
	background: url('tiles/newsletter_tile.png');
	color: #000000;
}

#content #tiles #newsletter.tile b {
	color: #00B43B;
}

#content #tiles #sharepoint.tile {
	background: url('tiles/sharepoint_tile.png');
}

#content #tiles #emails.tile {
	background: url('tiles/emails_tile.png');
	color: #000000;
}

#content #tiles #pensions.tile {
	background: #373737;
	background-image: url("tiles/pension_tile.png"); /* fallback */
	background-image: url("tiles/pension_tile.png"), linear-gradient(#5F5F60, #373737); /* W3C */
	color: #FFFFFF;
}

#content #tiles #policy.tile {
	background: url('tiles/policy_tile.png');
}

#content #tiles #bo.tile {
	background: url('tiles/business_objects.png');
}

#content #tiles #kronos.tile {
	background: url('tiles/kronos_tile.png');
}
#content #tiles #concur.tile {
	background: url('tiles/concur_tile.png');
}

#content #tiles #portal.tile {
	background: url('tiles/portal_tile.png');
}

#content #tiles #new-portal.tile {
	background-image: url('tiles/blakemore_technical_services_white.svg'), linear-gradient(#5F5F60, #373737);
	background-size: 80%, auto;
	background-position: 50% 10%;
	background-repeat: no-repeat;
	color: #ddd;
}
#content #tiles #new-portal.tile b {
	color: #fff;
}

#content #tiles #hub.tile {
	background-image: url('tiles/hub_tile.png');
	background-color: #FFFFFF;
	color: #000000;
}

#content #tiles #google.tile {
	background: url('tiles/google_tile.png');
	color: #000000;
}

#content #tiles #vacancies.tile {
	background: url('tiles/vacancies_tile_monitor_g.png');
}

#content #tiles #policies.tile {
	background: url('tiles/policies_tile_w.png');
	color: #000000;
}

#content #tiles #policies.tile b {
	display: inline;
}

#content #tiles #foundation.tile {
	background-color: #373737;
	background-image: url('tiles/foundation_tile.png');
	background-image: url('tiles/foundation_tile.png'), linear-gradient(#5F5F60, #373737);
}

#content #tiles #reward-gateway.tile {
	background-image: url('tiles/my_hub_logo.svg');
	background-image: url('tiles/my_hub_logo.svg'), linear-gradient(#5F5F60, #373737);
	background-size: 80%, auto;
	background-position: center 20%;
	background-repeat: no-repeat;
}

#content #tiles #access-people.tile {
	background-color: #373737;
	background-image: url('tiles/myhr_tile.png');
	background-image: url('tiles/myhr_tile.png'), linear-gradient(#5F5F60, #373737);
}

#content #tiles #benefits.tile {
	background: url('tiles/afblakemore_lifestyle_savings.png');
	color: #000000;
}

#content #tiles #project-online.tile {
	background: url('tiles/project_online_tile.png');
}

#content #tiles #power-bi.tile {
	background: url('tiles/power_bi.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: #000000;
}

#content #tiles #lms.tile {
	background-image: url('tiles/access_workspcae_tile_v2.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: #000000;
}

#content #tiles .volunteer.tile {
	background-image: url('tiles/volunteer.png'), linear-gradient(#5F5F60, #373737);
	background-size: 40%,auto;
	background-position: 80% 20%;
	background-repeat: no-repeat;
}

#content #tiles #profimetrics.tile {
	background-image: url('tiles/profimetrics_tile.svg'), linear-gradient(#5F5F60, #373737);
	background-size: 40%, auto;
	background-position: 55% 30%;
	background-repeat: no-repeat;
}

#content #tiles #my-work.tile {
	background-image: url('tiles/my_work.png');
	background-size: cover;
	background-repeat: no-repeat;
	color: #000;
}

#content #tiles #csod.tile {
	background-image: url('tiles/csod.png');
	background-color: #fff;
	background-size: 40%, auto;
	background-position: 80% 20%;
	background-repeat: no-repeat;
	color: #000;
}

#content #tiles #mhfa.tile {
	background-image: url('tiles/mhfa.png'), linear-gradient(#5F5F60, #373737);
	background-size: 55%, auto;
	background-position: 95% 0%;
	background-repeat: no-repeat;
}

#content #tiles .text {
	position: absolute;
	bottom: 20px;
	left: 20px;
	right: 20px;
}

#footer {
	position: absolute;
	bottom: 5px;
	text-align: center;
	width: 100%;
}






#lightbox {
	position: fixed;
	z-index: 9999;
	text-align: center;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	white-space: nowrap;
	background-image: url('/images/static_images/black.png');
	overflow: auto;
}

#lightbox #close-lightbox {
	position: absolute;
	top: 0px;
	right: 0px;
	z-index: 9999;
	background-image: url('/images/static_images/black.png');
	border-radius: 90px;
	cursor: hand;
	cursor: pointer;
	display: inline-block;
	height: 20px;
	width: 20px;
	text-align: center;
	color: #FFFFFF;
	border: 1px solid #027825;
	font-size: 16px;
}

#lightbox #close-lightbox:hover {
	color: #FF0000;
}

#lightbox iframe {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	max-height: 700px;
	box-sizing: border-box;

	/*max-width: 600px;*/
	vertical-align: middle;
	border: 2px solid #027825;
	border-radius: 10px;
	overflow: auto;
}

#lightbox #iframe-container {
	display: inline-block;
	vertical-align: middle;
	border-radius: 10px;
	position: relative;
	width: 100%;
	max-width: 500px;
	height: 100%;
	max-height: 700px;
	background: #FFFFFF url(/images/static_images/loading_animation.gif) no-repeat 50% 50%;

	-webkit-transition: max-height 1s ease-in-out, width 1s ease-in-out;
	-moz-transition: max-height 1s ease-in-out, width 1s ease-in-out;
	-o-transition: max-height 1s ease-in-out, width 1s ease-in-out;
	transition: max-height 1s ease-in-out, width 1s ease-in-out;
}

#lightbox .lightbox-content {
	display: inline-block;
	box-sizing: border-box;
	vertical-align: middle;
	border-radius: 10px;
	position: relative;
	width: auto;
	overflow: hidden;
	margin: 5%;
	background: #FFFFFF url(/images/static_images/loading_animation.gif) no-repeat 50% 50%;
}

#lightbox:before {
	display: inline-block;
	height: 100%;
	content: '';
	vertical-align: middle;
}

#lightbox.policy #iframe-container, #lightbox.help iframe {
	max-width: 800px;
}

#lightbox.help #iframe-container, #lightbox.help iframe {
	max-height: 100px;
	max-width: 500px;
}

.tippy-box[data-theme~='notice'] {
	background-color: #ff0;
	color: #000;
	border: 4px #000 solid;
}

.tippy-box[data-theme~='notice'] > .tippy-svg-arrow {
	fill: #ff0;
}

@media screen and (max-width: 490px) {
	body {
		font-size: 1em;
	}
	#clock {
		display: inline;
		margin-right: 10px;
	}
	#info {
		font-size: 1em;
	}
}

@media screen and (max-width: 600px) {
	#content #tiles {
		width: auto;
	}
}

@media screen and (max-width: 750px) {
	#info {
		top: 80%;
		margin-left: 10px;
		text-align: center;
		width: 100%;
	}
	#header {
		height: 100px;
	}
	#help {
		margin-right: 10px;
	}
}

.glow {
	-webkit-animation: glow 1s ease-in-out infinite alternate;
	-moz-animation: glow 1s ease-in-out infinite alternate;
	animation: glow 1s ease-in-out infinite alternate;
}

@-webkit-keyframes glow {
	from {
		text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #7be600, 0 0 40px #00e617, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
	}
	to {
		text-shadow: 0 0 20px #fff, 0 0 30px #b5ff4d, 0 0 40px #68ff4d, 0 0 50px #4dff56, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
	}
}