html {
	height: 100%;
}

body {
	margin: 20px;

	background-image: url(../siteimages/back_splash.jpg);
	background-attachment: fixed;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;

	font-family: Arial;
	margin: 0px;

	overflow-x: hidden;
}

#holder {
	display: table;
	width: 100vw;
	height: 100vh;
}

#holderRow {
	display: table-row;
}

#holderLeft {
	display: table-cell;
	vertical-align: middle;
	align-content: left;
	width: 60%;
}

#holderRight {
	display: table-cell;
	vertical-align: middle;
	text-align: right;
	width: calc(40% - 40px);
	padding-right: 40px;
}

#splashRight {
	width: 85%;
	max-width: 400px;
	background-color: hsla(0,0%,0%,0.7);
	border-radius: 5px;
	padding: 20px;
	box-shadow: 0px 0px 5px hsla(0,0%,0%,1);
}

#splashRegister1 {
	display: none;
	width: 85%;
	max-width: 400px;
	background-color: hsla(0,0%,0%,0.7);
	border-radius: 5px;
	padding: 20px;
	box-shadow: 0px 0px 5px hsla(0,0%,0%,1);
}

#splashRegister2 {
	display: none;
	width: 85%;
	max-width: 400px;
	background-color: hsla(0,0%,0%,0.7);
	border-radius: 5px;
	padding: 20px;
	box-shadow: 0px 0px 5px hsla(0,0%,0%,1);
}

#splashRegister3 {
	display: none;
	width: 85%;
	max-width: 400px;
	background-color: hsla(0,0%,0%,0.7);
	border-radius: 5px;
	padding: 20px;
	box-shadow: 0px 0px 5px hsla(0,0%,0%,1);
}

#splashRegister4 {
	display: none;
	width: 85%;
	max-width: 400px;
	background-color: hsla(0,0%,0%,0.7);
	border-radius: 5px;
	padding: 20px;
	box-shadow: 0px 0px 5px hsla(0,0%,0%,1);
}

h1 {
	color: #ffffff;
	font-weight: bold;
	text-align: center;
	font-size: 2vw;
}

.splashInputs {
	width: calc(100% - 10px);
	padding: 5px;
	border-radius: 3px;
	text-align: center;
	font-size: 2vw;
	border: none;
	color: #000000;
	display: block;
	margin-bottom: 20px;
}

#loginButton {
	width: calc(100%);
	padding: 5px;
	border-radius: 3px;
	text-align: center;
	font-size: 2vw;
	border: none;
	color: #ffffff;
	display: block;
	margin-bottom: 10px;
	background-color: #295995;
	cursor: pointer;
}

#signUpButton {
	width: calc(100%);
	padding: 5px;
	border-radius: 3px;
	text-align: center;
	font-size: 2vw;
	border: none;
	color: #ffffff;
	display: block;
	margin-bottom: 20px;
	background-color: #ff7e00;
	cursor: pointer;
}

#logoSplash {
	display: block;
	width: 100%;
	max-width: 800px;
	cursor: pointer;
}

.prevButton {
	width: 49%;
	padding: 5px;
	border-radius: 3px;
	text-align: center;
	font-size: 2vw;
	border: none;
	color: #ffffff;
	display: inline-block;
	margin-bottom: 20px;
	background-color: #ff7e00;
	cursor: pointer;
}

.nextButton {
	width: 49%;
	padding: 5px;
	border-radius: 3px;
	text-align: center;
	font-size: 2vw;
	border: none;
	color: #ffffff;
	display: inline-block;
	margin-bottom: 20px;
	background-color: #ff7e00;
	cursor: pointer;
}




.inputLabel {
	display: block;
	margin-bottom: 10px;
	font-weight: bold;
	color: #ffffff;
}



#registerCell {
	width: 100%;
	height: 100%;
	text-align: center;
	vertical-align: middle;
	display: table-cell;
}

#registeredBox {
	width: 85%;
	max-width: 600px;
	background-color: hsla(0,0%,0%,0.7);
	border-radius: 5px;
	padding: 20px;
	box-shadow: 0px 0px 5px hsla(0,0%,0%,1);
}

#registerP1 {
	color: #ffffff;
	font-size: 34px;
}

#registerP2 {
	color: #ffffff;
	font-size: 22px;
}

#registerP3 {
	color: #ffffff;
	font-size: 22px;
}

#logoRegister {
	width: 100%;
	max-width: 200px;
	display: block;
	margin-bottom: 30px;
}

#registerCell hr {
	border-color: #666666;
}



.registerDate {
	border: none;
	font-size: 34px;
}





#infoHolder {
	display: block;
	position: absolute;
	left: 20px;
	bottom: 30px;
	z-index: 100;
	font-size: 24px;
	font-family: Dosis;
	font-weight: bold;
	color: #ffffff;
	width: 220px;
	height: 38px;
	background-image: url(../siteimages/splash/splash_title_tab.png);
	background-repeat: no-repeat;
	padding-left: 32px;
	padding-top: 10px;
}

#splashContent {
	width: 100%;
	display: block;
	background-color: #ffffff;
	position: absolute;
	top: calc(100% - 30px);
	left: 0px;
	z-index: 100;
	border-top: 3px solid #ff7e00;
}

.content {
	padding-left: 50px;
	padding-right: 50px;
	padding-top: 20px;
	padding-bottom: 20px;
	margin: auto;
	width: calc(100% - 100px);
	max-width: 1200px;
}

.leftColumn {
	width: calc(50% - 10px);
	float: left;
}

.rightColumn {
	width: calc(50% - 10px);
	float: right;
}

#screenShots {
	width: 100%;
}

#screenShotsLite {
	width: 100%;
}

#webScreenShots {
	width: 100%;
}

#googlePlay {
	width: 90%;
	max-width: 200px;
}

#builtBy {
	vertical-align: middle;
	font-weight: bold;
	color: #aaaaaa;
}

#p58 {
	vertical-align: middle;
}

.required {
	font-weight: bold;
	color: #ff7e00;
}

#passwordInfo {
	color: #ffffff;
	font-size: 10px;
	margin-bottom: 20px;
	display: block;
}



#android {
	float: left;
	margin-right: 20px;
	margin-top: 20px;
}

#facebook {
	float: left;
	margin-right: 20px;
	margin-top: 20px;
}

#instagram {
	float: left;
	margin-top: 20px;
}



.blinking {
  animation: blinker 2s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0.3;
  }
}



#recoverLink {
	display: block;
	color: #ffffff;
	text-align: center;
	font-size: 12px;
}



#cancelButton {
	width: calc(50% - 10px);
	padding: 5px;
	border-radius: 3px;
	text-align: center;
	font-size: 2vw;
	border: none;
	color: #ffffff;
	display: inline;
	margin-right: 5px;
	background-color: #295995;
	cursor: pointer;
}

#changeButton {
	width: calc(50% - 10px);
	padding: 5px;
	border-radius: 3px;
	text-align: center;
	font-size: 2vw;
	border: none;
	color: #ffffff;
	display: inline;
	margin-left: 5px;
	background-color: #ff7e00;
	cursor: pointer;
}

#resetButton {
	width: 50%;
	padding: 5px;
	border-radius: 3px;
	text-align: center;
	font-size: 2vw;
	border: none;
	color: #ffffff;
	display: inline;
	background-color: #ff7e00;
	cursor: pointer;
}








.spacer {
	display: block;
	clear: both;
}



h1 {
	font-family: Dosis;
}

#splashContent h1 {
	font-weight: bold;
	text-align: center;
	font-size: 28px;
	color: #295995;
}

hr {
	width: 80%;
	border: none;
	border-top: 1px dotted #ffffff;
}

p {
	font-family: Dosis;
	font-size: 22px;
}

li {
	line-height: 30px;
	margin-top: 10px;
	margin-bottom: 10px;
}

button {
	cursor: pointer;
}





a:link {
	text-decoration: none;
	color: #ff7e00;
}

a:active {
	text-decoration: none;
	color: #ff7e00;
}

a:visited {
	text-decoration: none;
	color: #ff7e00;
}

a:hover {
	text-decoration: underline;
	color: #ff7e00;
}



@media screen and (max-width: 949px) {

#infoHolder {
	font-size: 20px;
	width: 150px;
	height: 26px;
	background-size: contain;
	background-position: top;
	padding-left: 32px;
	padding-top: 10px;
}

.leftColumn {
	float: none;
	display: block;
	width: 100%;
}

.rightColumn {
	float: none;
	display: block;
	width: 100%;
}

#screenShots {
	width: calc(100% - 20px);
	max-width: 600px;
}

#screenShotsLite {
	width: calc(100% - 20px);
	max-width: 600px;
}

#webScreenShot {
	width: calc(100% - 20px);
	max-width: 600px;
}




@media screen and (max-width: 799px) {

body {
	background-image: url(../siteimages/back_splash_mobile.jpg);
	background-size: cover;
	background-attachment: fixed;
	background-position: center;
	margin: 0px;
}

.content {
	padding-left: 20px;
	padding-right: 20px;
	margin-left: 0px;
	margin-right: 0px;
	width: calc(100% - 40px);
}

#infoHolder {
	position: inherit;
	margin-top: 30px;
}

#splashContent {
	position: inherit;
}

#holder {
	display: block;
	width: 100%;
	height: auto;
}

#holderRow {
	display: block;
}

#holderLeft {
	display: block;
	text-align: center;
	align-content: center;
	width: 100%;
}

#holderRight {
	display: block;
	text-align: middle;
	width: calc(100% - 20px);
	padding-left: 10px;
	padding-right: 10px;
}

#splashRight {
	width: calc(100% - 40px);
	max-width: 400px;
	margin-left: auto;
	margin-right: auto;
}

#splashRegister1 {
	display: none;
	width: calc(100% - 40px);
	max-width: 400px;
	margin-left: auto;
	margin-right: auto;
}

#splashRegister2 {
	display: none;
	width: calc(100% - 40px);
	max-width: 400px;
	margin-left: auto;
	margin-right: auto;
}

#splashRegister3 {
	display: none;
	width: calc(100% - 40px);
	max-width: 400px;
	margin-left: auto;
	margin-right: auto;
}

#splashRegister4 {
	display: none;
	width: calc(100% - 40px);
	max-width: 400px;
	margin-left: auto;
	margin-right: auto;
}

p {
	font-size: 18px;
}

h1 {
	font-size: 16px;
}

li {
	line-height: 18px;
	font-size: 12px;
}

.splashInputs {
	width: calc(100% - 10px);
	max-width: 300px;
	font-size: 12px;
}

#loginButton {
	width: 100%;
	max-width: 310px;
	font-size: 12px;
}

#signUpButton {
	width: 100%;
	max-width: 310px;
	font-size: 12px;
}

#logoSplash {
	width: 70%;
	max-width: 200px;
	margin-bottom: 20px;
	margin-left: auto;
	margin-right: auto;
}

.prevButton {
	width: 70px;
	font-size: 12px;
	margin-bottom: 0px;
	margin-right: 20px;
}

.nextButton {
	width: 70px;
	font-size: 12px;
	margin-bottom: 0px;
}

.inputLabel {
	display: block;
	margin-bottom: 10px;
	font-weight: bold;
	color: #ffffff;
	font-size: 12px;
}

#registerP1 {
	font-size: 24px;
}

#registerP2 {
	font-size: 12px;
}

#registerP3 {
	font-size: 12px;
}


#android {
	width: 50px;
}

#facebook {
	width: 50px;
}

#instagram {
	width: 50px;
}

}




@media screen and (max-width: 599px) {

.content {
	padding-left: 20px;
	padding-right: 20px;
	margin-left: 0px;
	margin-right: 0px;
	width: calc(100% - 40px);
}

#android {
	width: 30px;
	margin-top: 10px;
}

#facebook {
	width: 30px;
	margin-top: 10px;
	clear: left;
}

#instagram {
	width: 30px;
	margin-top: 10px;
	clear: left;
}

}