@charset "utf-8";
/* CSS Document */

::-webkit-input-placeholder {
	color:white;
}

:-moz-placeholder {
	color:white;
}

::-moz-placeholder {
	color:white;
}

::-ms-input-placeholder {
	color:white;
}

@font-face {
    font-family: play;
    src: url(style/Play-Regular.ttf);
}


.loader {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
	
}

hr{
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.75), rgba(0, 0, 0, 0));
}

body{
	margin:0px;
	background: #2c3e50;
}
	
header{
	z-index:10;
	height: 15vh;
}

header > #bar{
	background-color:#C0392B;
	height:100%;
	width:100%;
	overflow:hidden;
	z-index:10
}

header > #barFloat{
	background-color:#C0392B;
	height:15vh;
	width:100%;
	position:fixed;
	top:0px;
	left:0px;
	overflow:hidden;
	z-index:9
}
	
header div{
	height:5%;
	width:auto;
}
	
header img{
	height:13vh;
	width:auto;
}

header table{
	table-layout:fixed;
	height:14vh;
	overflow:hidden;
}

#menuBtn{
	font-size:5vh;
	cursor:pointer;
}

menu{
	position:fixed;
	min-width:200px;
	overflow:hidden;
	height:100vh;
	top:0px;
	left:0px;
	background: #C0392B;
	padding:5vw;
	margin:0px;
	z-index:101;
	transition: all ease 0.5s;
	-webkit-transition: all ease 0.5s;
	-moz-transition: all ease 0.5s;
	-o-transition: all ease 0.5s;
}

menu div{
	overflow:hidden;
	height:auto;
	color:white;
	font-size:5vh;
	width:100%;
	white-space:nowrap;
	padding-bottom:5vh;
	transition: all ease 0.5s;
	-webkit-transition: all ease 0.5s;
	-moz-transition: all ease 0.5s;
	-o-transition: all ease 0.5s;
}

menu div:hover{
	padding-left:5vh;
}

.menuClosed{
	width:0px !important;
	opacity:0;
	z-index:-1;
	min-width:0px;
}

button, .button{
	background: none;
	border: 0.75vh solid white;
    border-radius: 1vw;
	font-size:2vw;
    padding: 1vh;
    cursor: pointer;
	color:white;
	min-width:15vw;
	font-family: 'play';
	transition: all ease 0.5s;
	-webkit-transition: all ease 0.5s;
	-moz-transition: all ease 0.5s;
	-o-transition: all ease 0.5s;
}
/*
button:hover, .button:hover{
	border: 0.75vh solid white;
	color:white;
	padding: 3vh;
} */

/* Colours */
.turquoise{background-color:#1abc9c;}
.turquoise-dark{background-color:#16a085;}
.green{background-color:#2ecc71;}
.green-dark{background-color:#27ae60;}
.blue{background-color:#3498db;}
.blue-dark{background-color:#2980b9;}
.purple{background-color:#9b59b6;}
.purple-dark{background-color:#8e44ad;}
.asphalt{background-color:#34495e;}
.asphalt-dark{background-color:#2c3e50;}
.yellow{background-color:#f1c40f;}
.yellow-dark{background-color:#f39c12;}
.orange{background-color:#e67e22;}
.orange-dark{background-color:#d35400;}
.red{background-color:#e74c3c;}
.red-dark{background-color:#c0392b;}
.white{background-color:#ecf0f1;}
.silver{background-color:#bdc3c7;}
.gray{background-color:#95a5a6;}
.gray-dark{background-color:#7f8c8d;}

.cardImages{
	height:30px;
	background-color:white;
	padding:10px;
	border-radius:10px;
}

#regMap{
	background-color: white;
	border-radius: 10px;
	position:absolute;
}

#regMapStreet{
	background-color: white;
	border-radius: 10px;
}

label{
	font-family: Play;
	color:white;
	font-size: 1vw;
}

h1, h2, h3{
	font-family: play;
	color:white;
}

input, select, textarea{
	background: none;
	color: white;
	min-width: 150px;
	font-family: 'play';
}

select option{
	color:black;
}

body > div{
	z-index:1;
	width:100%;
	overflow:hidden;
	height:auto;
	padding-bottom:10vh;
	/*padding-top: 10vh;*/
}

#dialogContainer{
	background: rgba(0,0,0,0.7);
	position:fixed;
	top:0px;
	left:0px;
	width:100vw;
	height:100vh;
	margin:0px;
	padding:0px;
	z-index:120;
	transition: all ease 0.5s;
	-webkit-transition: all ease 0.5s;
	-moz-transition: all ease 0.5s;
	-o-transition: all ease 0.5s;
}



#howItWorksStepsContainer{
	background-color: black;
	padding:0px;
	margin:0px	
}

#howItWorksStepsContainer > div > span{
	color:white;
	font-size:20vh;
	cursor:pointer;
}

#howItWorksStepsContainer > div > span > label{
	color:white;
}

#howItWorksStepsContainer #step1{background-color:#3498db;}

#howItWorksStepsContainer #step2{background-color:#2ecc71;}

#howItWorksStepsContainer #step3{background-color:#e67e22;}

#howItWorksStepsContainer #step4{background-color:#1abc9c;}

#howItWorksStepsContainer #step5{
	background-color:#9b59b6;
	width:100%;
	}

#howitWorksDisclaimer{
	background-color: #e74c3c;
	padding-top:10vh;
	padding-bottom:15vh;
}

#finePrint{
	font-size: 1vw;
}

#aboutUsSplit{
	background:#8e44ad;
	width:100%;
	z-index:1;
	padding:0px;
	overflow:hidden;
	height:auto;
}

#aboutUs{
	background:#16a085;
	float:left;
	width:40%;
	z-index:1;
	padding:5%;
	overflow:hidden;
	height:auto;
	padding-bottom:10vh;
	padding-top: 5vh;
}

#contactUs{
	background:#8e44ad;
	float:left;
	width:40%;
	z-index:1;
	padding:5%;
	overflow:hidden;
	height:auto;
	padding-bottom:10vh;
	padding-top: 5vh;
}


#registerInfo{
	float:left;
	background-color: #27ae60;
	padding-bottom:10vh
}

#registerForm{
	float:left;
	background-color: #2980b9;
	padding-bottom:10vh;
	padding-top:5vh;
	
}

#registerSplit{
	background:  #27ae60;
	padding: 0px;
	overflow:hidden;
}

#stepContainer{
	z-index:1;
	width:100%;
	background-color: #7f8c8d;
	padding:0px;
}
	
#stepContainer > span {
	color:white;
	cursor:pointer;
    transition: color ease 0.5s;
	-webkit-transition: color ease 0.5s;
	-moz-transition: color ease 0.5s;
	-o-transition: color ease 0.5s;
}
	
#stepContainer > span:hover {
	color:#C0392B;
}
	
#stepContainer > span > label{
   	position: relative;
   	bottom: -100%;
}

footer{
	height:auto;
	width:100%;		
}
	
footer > #links {
	width:100%;
	background-color: #34495e;
	padding-bottom: 5vh;
}
	
footer > #links > span{
	font-family: play;
	color: black;
}
	
a{
	font-family: play;
	text-decoration:none;
	color: inherit;
	cursor:pointer;
	transition: all ease 0.5s;
	-webkit-transition: all ease 0.5s;
	-moz-transition: all ease 0.5s;
	-o-transition: all ease 0.5s;
}
	
footer a:hover{
	color: #C0392B;
}
	
footer #links  h3{
	color: white;
}
	
footer #links table{
	table-layout:fixed;
	width:100%;
}
	
footer #links table img{
	width:100%;
}

footer label{
	color:black;
}

footer #copyright{
	color: white;
	padding:2vh;
	background-color:#2c3e50;
}
	
#countDownContainer{
	width:100%;
	height: auto;
	padding-top:5vh;
	padding-bottom:15vh;
	background-color: #4B77BE;
}
	
#clock{
	width:620px;
}

#split{
	overflow:hidden;
	padding:0px;
	margin:0px;
	background-color:#e67e22;
}

#whatIsGeekCrate{
	background-color: #9b59b6;
	padding-top:5vh;
	padding-bottom:10vh;
}

#whenShip{
	background-color: #e67e22;
	padding-top:5vh;
	padding-bottom:10vh;
}

#readersAnnoucment{
	overflow:hidden;
	padding:0px;
	margin:0px;
	background-color:#f1c40f;
}

#packages{
	overflow:hidden;
	padding:0px;
	margin:0px;
	background:#c0392b;
}

	
#month3{
	background:#c0392b;
}
	
#month6{
	background:#27ae60;
}
	
#month12{
	background:#2980b9;
}	
	
#packages div img{
	width:80%;
	height:auto;
}

.hide{
	height:0px !important;
	opacity:0;
}

#billingAddressSplit1{background-color:#9b59b6;}
#billingAddressSplit2{background-color:#2980b9;}
#billingAddressSplitContainer{background-color:#9b59b6;}
	
@media only screen and (orientation: landscape){	
	h1{font-size:5vw;}

	h2{font-size:3vw;}

	h3{font-size:2.5vw;}
	
	label{font-size:2vw;}
	
	footer label{font-size:1vw;}
	
	a:hover:not(.button):not(menu a):not(footer a){font-size: 3vw;}
	h2 a:hover{font-size: 4vw;}
	
	menu{
		width:30vw;
	}
	
	.productList{
		float: left; 
		width: 20vw; 
		padding-left:2vw;
		padding-right:2vw; 
		overflow:hidden;
	}
	
	.productMenu{
		width:20vw;
		position:absolute;
		margin-top: 0%;
		left:76vw;
		transition: all ease 1s;
		-webkit-transition: all ease 1s;
		-o-transition: all ease 1s;
		-moz-transition: all ease 1s;
		overflow:hidden;
	}
	
	.productMenuItem, .productMenuItem i, .productMenuItem label{
		cursor:pointer;
	}
	
	.productImagesClientzone{
		height:30vh;
	}
	
	body > div > div{
		width:80%;	
	}
	
	input, select, textarea{
		padding: 1vh;
		width: 30vw;
		border: 0.5vh solid white;
		border-radius: 10px;
		font-size: 1vw;
		margin-top: 2vh;
		margin-bottom: 1vh;
	}
	
	#regMap{
		width:10vw;
		height:10vw;
	}
	
	#regMapStreet{
		width:30vw;
		height:30vw;
	}
	
	.col2{
		width:50%;
		float:left;	
	}
	
	#clientzoneSplitContainer > div{
		width:33.333%;
		float:left;
		overflow:hidden;
		height:100vh;
	}
	
	#billingAddressSplitContainer > div{
		width:50%;
		float:left;
		padding-top:0vh;
		padding-bottom:15vh;
	}
	
	#dialog{
		background: #e74c3c;
		position:fixed;
		overflow:hidden;
		top:25vh;
		left:30vw;
		width:40vw;
		height:50vh;
		margin:0px;
		padding:0px;
		z-index:121;
		border-radius:3vh;
		transition: all ease 0.5s;
		-webkit-transition: all ease 0.5s;
		-moz-transition: all ease 0.5s;
		-o-transition: all ease 0.5s;
	}
	
	#howItWorksStepsContainer > div{
		float:left;
		width:50%;
		padding-top:5vh;
		padding-bottom:5vh;
		
	}
	
	
	
	#registerInfo{
		width:50%
	}

	#registerForm{
		width:50%
	}
	
	#stepContainer{
		height:85vh;
	}
	
	#stepContainer > span {
		font-size: 10vw;
		margin-top: 15vh;
		width: 30vw;
	}
	
	#stepContainer > span > label{
		font-size: 2vw;
		line-height: 2vw;
		
	}
	
	#registerSplit h1{
		padding-left:4vw;
		padding-right:5vw;
	}
	
	#registerSplit div div{
		padding-left:4vw;
		padding-right:5vw;
	}
	
	#split > div{
		width:50%;
		height:100%;
		float:left;
	}
	
	#whatIsGeekCrate h1{
		padding-left:4vw;
		padding-right:5vw;
	}
	
	#whatIsGeekCrate div{
		padding-left:4vw;
		padding-right:5vw;
	}
	
	#whenShip h1{
		padding-left:4vw;
		padding-right:5vw;
	}
	
	#whenShip div{
		padding-left:4vw;
		padding-right:5vw;
	}
	
	#readersAnnoucment > div{
		width:47.5%;
		float:left;
		padding-bottom:4vh;
	}
	
	#readersAnnoucment div img{
		width:95%;
		padding-top:5vh;
		cursor:pointer;
	}
	
	#readersAnnoucment #readers{
		padding-left:0vw;
		padding-right:5%;
	}
	
	#packages > div{
		width:33.333%;
		float:left;
		padding-bottom:10vh;
		height:60vw;
		
	}
	
	
	
}

@media only Screen and (orientation: portrait){
	h1{font-size:10vw;}

	h2{font-size:6vw;}

	h3{font-size:4.5vw;}
	
	label{font-size:3vw;}
	
	a:hover:not(.button):not(menu a):not(footer a){font-size: 4vw;}
	
	button, .button, textarea{
		font-size:3vh;
		min-width:30vw;
		padding:1vw;
	}

	menu{
		width:80vw;
	}
	
	.productMenu{
		width:30vw;
		position:absolute;
		margin-top: 0%;
		left:67vw;
		transition: all ease 1s;
		-webkit-transition: all ease 1s;
		-o-transition: all ease 1s;
		-moz-transition: all ease 1s;
		overflow:hidden;
	}
	
	.productList{
		float: left; 
		width: 40vw; 
		padding-left:2vw;
		padding-right:2vw; 
		overflow:hidden;
	}
	
	body > div > div{
		width:90%;	
	}
	
	.productImagesClientzone{
		width:28vw;
	}
	
	input, select, textarea{
		padding: 1vh;
		width: 85vw;
		border: 0.5vh solid white;
		border-radius: 10px;
		font-size: 3vw;
		margin-top: 2vh;
		margin-bottom: 1vh;
	}
	
	#regMapStreet{
		width:80vw;
		height:80vw;
	}
	
	#regMap{
		width:30vw;
		height:30vw;
	}
	
	.col2{
		width:100%;	
	}
	
	#billingAddressSplitContainer > div{
		width:100%;
		float:left;
		padding-top:2vh;
		padding-bottom:15vh;
	}
	
	#dialog{
		background: #e74c3c;
		position:fixed;
		overflow:hidden;
		top:25vh;
		left:5vw;
		width:90vw;
		height:50vh;
		margin:0px;
		padding:0px;
		z-index:121;
		border-radius:3vh;
		transition: all ease 0.5s;
		-webkit-transition: all ease 0.5s;
		-moz-transition: all ease 0.5s;
		-o-transition: all ease 0.5s;
	}
	
	#howItWorksStepsContainer > div{
		float:left;
		width:100%;
		padding-top:5vh;
		padding-bottom:5vh;
	}
	
	#howItWorksStepsContainer  label{
		font-size: 5vw;
	}
	
	#finePrint{
		font-size: 2vw;
	}
	
	#aboutUs{
		background:#16a085;
		float:left;
		width:90%;
		z-index:1;
		padding:5%;
		overflow:hidden;
		height:auto;
		padding-bottom:10vh;
		padding-top: 5vh;
	}

	#contactUs{
		background:#8e44ad;
		float:left;
		width:90%;
		z-index:1;
		padding:5%;
		overflow:hidden;
		height:auto;
		padding-bottom:10vh;
		padding-top: 5vh;
	}
	
	#registerInfo{
		width:100%
	}

	#registerForm{
		width:100%
	}
	
	#registerSplit div h1{
	 	padding-left:2vw;
		padding-right:2vw;
	}
		
	#registerSplit div div{
	 	padding-left:2vw;
		padding-right:2vw;
	}
	
	#stepContainer{
		height:auto;
		padding-bottom: 5vh;
		padding-top: 10vh;
	}
	
	#stepContainer > span {
		font-size: 30vw;
		margin-top: 1%;
		padding-bottom:10%
	}
	
	
	#stepContainer > span > label{
		font-size: 6vw;
		line-height: 6vw;
		
	}
	
	footer .cellBanner{
		width:0px;
		overflow:hidden;
	}
	
	#split div{
		width:100%;
		float:left;
	}
	
	#whatIsGeekCrate h1{
			margin-left:2vw;
	}
	
	#whatIsGeekCrate div{
		padding-left: 2vw;
	    width: 95%;
		padding-bottom:5vh;
	}
	
	#whenShip h1{
		margin-left: 2vw;
	}
	
	#whenShip div{
		padding-left: 2vw;
	    width: 95%;
		padding-bottom:5vh;
	}
	
	#readersAnnoucment > div{
		width:100%;
		float:left;
		padding-bottom:4vh;
	}
	
	#readersAnnoucment div img{
		width:95%;
		padding-top:4vh;
		cursor:pointer;
	}
	
	#readersAnnoucment #readers{
		padding-left:2vw;
		width:95%;
	}
	
	#packages > div{
		width:100%;
		float:left;
		padding-bottom:10vh;
	}
	
	
}

@media only Screen and (max-width: 650px) and (min-width: 480px){
	#clock{
		width:460px;
	}
}

.hidden{
	overflow:hidden;
	opacity:0;
	height:0px !important;
	width:0px !important;
}