/*
	Theme Name: Shark Clean Base URL - Geo Redirect
	Theme URI: http://www.pixelpudding.com/
	Description: Theme for Shark Clean (Base URL)
	Author: Lawrie Malen & Leigh Share @ WePixel Ltd
	Author URI: http://www.wepixel.co.uk/
*/

html {
	font-family:							'Open Sans', Helvetica, Arial, san-serif;
	font-size:								1em;
	color:									#000000;
	background-color:						#FFFFFF;
}

body {
	margin:									0;
	padding:									0;
	background-image:						url('./img/bg.jpg');
	background-size:						cover;
	background-repeat: 					no-repeat;
	background-position:					50% 50%;
}

html, body {
	min-height:								100%;
	/*-webkit-font-smoothing:				subpixel-antialiased; */
}

/*
	SITE WRAPPER
*/

#sitewrapper {
	min-height:								100vh;
	line-height:							1.313;
	padding-left:							1.250rem;
	padding-right:							1.250rem;
}

#allcontentwrapper {
	min-height:								100vh;
}

body.page #allcontentwrapper {
	padding-bottom:						3rem;
}

/*
	PAGE CLASSES
*/

.wrapper {
	position:								relative;
	width:									100%;
	max-width:								62rem;
	margin:									0 auto;
	border-radius:							0.500rem;
}

p:first-of-type {
	margin-top:								0;
}

.page-wrapper {
	padding:									2rem;
}

/*
	GEOLOCATION
*/

.logo-container {
	padding-top: 							1.250rem;
	padding-bottom: 						2.500rem;
}

.logo-container img {
	max-width:								14rem;
}

.geo-lightbox {
	margin-bottom:							1.250rem;
}

.geo-lightbox .redirect-message,
.geo-lightbox .button-wrapper {
	padding:									2.500rem;
}

.geo-lightbox .redirect-message p {
	margin:									0;
}

.geo-lightbox .main-flag-wrapper .flag {
	max-width:								6.875rem;
}

/*
	FLAGS
*/

.choose-wrapper {
	padding:									2.875rem 3.250rem 0 3.250rem;
}

.choose-title {
	padding-bottom:						3.125rem;
}

.flags .flag-box {
	margin-bottom:							3.750rem;
}

.flags .flag-box .flag {
	max-width:								2.500rem;
	margin-right:							1.375rem;
}

/*
	LOADER
*/

.loadingblock {
	background-color:						rgba(255, 255, 255, 0.6);
	z-index: 								2003;
}

.loader {
	position:								absolute;
	top:										50%;
	left:										50%;
	height:									3.750rem;
	width:									3.750rem;
	margin:									-1.875rem 0 0 -1.875rem;
	border-width:							0.375rem;
	border-style:							solid;
	border-color:							rgba(247, 85, 30, 0.3);
	border-radius:							100%;
	border-top-color: 					rgba(247, 85, 30, 1);
	-webkit-animation:					rotation 0.6s infinite linear;
	animation:								rotation 0.6s infinite linear;
}

.loader.spot {
	border-color:							rgba(144, 51, 169, 0.3);
	border-top-color: 					rgba(144, 51, 169, 1);
}

.loader.grey {
	border-color:							rgba(172, 172, 172, 0.3);
	border-top-color: 					rgba(172, 172, 172, 1);
}

@-webkit-keyframes rotation {
	from {-webkit-transform: rotate(0deg) }
	to {-webkit-transform: rotate(359deg) }
}

@keyframes rotation {
	from {transform: rotate(0deg);}
	to {transform: rotate(359deg);}
}

/*
	CUSTOM LIGHTBOX
*/

.lightboxoverlay {
	position:								fixed;
	top:										0;
	left:										0;
	bottom:									0;
	width:									0;
	padding:									5rem 0 0 0;
	background-color:						rgba(0, 0, 0, 0.8);
	opacity:									0;
	z-index:									9001;
	pointer-events:						none;
	overflow-y:								scroll;

	display:									-ms-flexbox;
	display:									-webkit-flex;
	display:									flex;

	/*	These are effectively the 'close' transitions */

	-webkit-transition:					opacity 0.5s ease, width 0s linear 0.5s;
	transition:								opacity 0.5s ease, width 0s linear 0.5s;
}

.lightboxoverlay .lightboxclose {
	position:								absolute;
	top:										0;
	left:										0;
	bottom:									0;
	right:									0;
	font-size:								0;
	text-indent:							-999rem;
	overflow:								hidden;
	z-index:									-1;
}

.lightboxoverlay .lightbox {
	position:								relative;
	top:										5rem;
	width:									48.750rem;
	margin:									auto;
	opacity:									0;
	visibility:								hidden;

	-webkit-align-self:					flex-start;
	-ms-flex-item-align:					start;
	align-self:								flex-start;

	/*	'close' transitions */

	-webkit-transition:					opacity 0.5s ease, top 0.5s ease, visibility 0s linear 0.5s;
	transition:								opacity 0.5s ease, top 0.5s ease, visibility 0s linear 0.5s;
}

.lightboxtrigger:checked + .lightboxoverlay,
.lightboxoverlay.forceshow {
	width:									100%;
	padding:									0;
	opacity:									1;
	pointer-events:						auto;

	-webkit-transition:					opacity 0.5s ease;
	transition:								opacity 0.5s ease;
}

.lightboxtrigger:checked + .lightboxoverlay .lightbox,
.lightboxoverlay.forceshow .lightbox {
	top:										0;
	opacity:									1;
	visibility:								visible;

	-webkit-transition:					all 0.5s ease 0.5s;
	transition:								all 0.5s ease 0.5s;
}

.lightboxoverlay.nodismiss .lightboxclose, 
.lightboxoverlay.nodismiss .lightbox .close {
	pointer-events: 						none;
}