/* --------------------------------

General

-------------------------------- */

@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,300");

html {
	text-align:center;
	height: 100%;
}

body {
	margin:0;
	padding:0;
	font-family: 'Open Sans', sans-serif;
	text-align:center;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	background-color: #ffffff;

}

h1 {
	font-size: 50px;
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	color: #ffffff;
}

h2 {
	font-size: 14px;
	font-family: 'Open Sans', sans-serif;
	font-weight: 600;
	-webkit-font-smoothing: antialiased;
}


img {

}




/* --------------------------------

Links

-------------------------------- */

#loginPage a {
	text-decoration: none;
	color:rgba(0, 0, 0, .3);

	-webkit-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

a:hover {
	color:#1A91FF;
}




/* --------------------------------

Login Page

-------------------------------- */

.login-bg {
	background-color: #ffffff;
	height: 90vh;
}

.nav-row{
	margin-right: 0px;
	margin-left: 0px;
}

.checkbox {
	margin: 0 auto;
	margin-top: 20px;
	margin-bottom: 60px;
	width: 100%;
}

.checkbox label {
	font-size: 14px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    color: rgba(0, 0, 0, .3);
    float: left;
}

.checkbox .more-link {
	float: right;
}

.alert-danger {
    width: 60%;
    margin: 0 auto;
}

.authentication-text {
	font-size: 15px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 500;
    color: #fff;
    position: absolute;
    position:relative;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    margin-top: 182px;
    margin-top: 20px;
    margin-bottom:20px;
    background-color: #FF4A43;
    padding: 10px;
    border-radius: 6px;
    width: 100%;
    box-shadow: 0 5px 15px rgba(0,0,0,.2);
}

.loginPage .authentication-text {
	margin-top:0px;
}

.forgot-button {
	margin-bottom: 20px;
}

.wrong-text {
	font-size: 15px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 500;
    color: #fff;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    background-color: #FF4A43;
    border: none;
    padding: 10px;
    border-radius: 6px;
    width: 100%;
    box-shadow: 0 5px 15px rgba(0,0,0,.2);
}

.correct-text {
	background-color: #4CCB7C;
}

.authentication-text a {
	color: rgba(255, 255, 255, 0.6);
}

.authentication-text a:hover {
	color: #fff;
}

.set-new-password-form .top-field {
	border-top: 1px solid #ccc;
}

.auth-alert {
    font-size: 15px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 500;
    margin-left: auto;
    margin-right: auto;
    border: none;
    padding: 10px;
    border-radius: 6px;
    width: 100%;
    -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    margin-bottom: 15px;
    background-color: #fff;
    color: #333;
}

.auth-alert--danger {
    color: #fff;
    background-color: #ff4a43;
}

/* --------------------------------

Clock Animation - Currently not used

-------------------------------- */

.clock, .clock * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

.clock:before {
  content: '';
  position: absolute;
  z-index: 2;
  width: 8px;
  height: 8px;
  background: #ffffff;
  left: 50%;
  top: 50%;
  margin: -4px 0 0 -4px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}

.clock {
  border-radius: 100%;
  height: 150px;
  width: 150px;
  position: absolute;
  margin-left: 232px;
  margin-top: 23px;
}

.clock i {
  background: #ffffff;
  height: 0;
  left: 50%;
  position: absolute;
  top: 50%;
  width: 0;
  -moz-border-radius: 40px;
  -webkit-border-radius: 40px;
  border-radius: 40px;
  -webkit-transform-origin: 50% 100%;
  -moz-transform-origin: 50% 100%;
  -o-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  margin: -40px -4px 0;
  padding: 40px 4px 0;
}

.clock p {
  background: #ffffff;
  height: 0;
  left: 50%;
  position: absolute;
  top: 50%;
  width: 0;
  -moz-border-radius: 40px;
  -webkit-border-radius: 40px;
  border-radius: 40px;
  -webkit-transform-origin: 50% 100%;
  -moz-transform-origin: 50% 100%;
  -o-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  margin: -30px -4px 0;
  padding: 30px 4px 0;

  transform: rotate(230deg);
  -webkit-transform: rotate(230deg);
  -moz-transform: rotate(230deg);
}

/* Hands spin infinte */

.clock.running i {
  -webkit-animation: running1 3s infinite linear;
  -moz-animation: running1 3s infinite linear;
  -o-animation: running1 3s infinite linear;
  animation: running1 3s infinite linear;
}

.clock.running p {
  -webkit-animation: running1 36s infinite linear;
  -moz-animation: running1 36s infinite linear;
  -o-animation: running1 36s infinite linear;
  animation: running1 36s infinite linear;
}

@-webkit-keyframes running1 {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@-moz-keyframes running1 {
  0% {
    -moz-transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(360deg);
  }
}

@-ms-keyframes running1 {
  0% {
    -ms-transform: rotate(0deg);
  }
  100% {
    -ms-transform: rotate(360deg);
  }
}

@-o-keyframes running1 {
  0% {
    -o-transform: rotate(0deg);
  }
  100% {
    -o-transform: rotate(360deg);
  }
}

@keyframes spinning {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


/* Hands CORRECT */

.clock.right:before {
	top: 55%;
	left: 47%;
}

.clock.right i {
  -webkit-animation: check1 .5s linear;
  -moz-animation: check1 .5s linear;
  -o-animation: check1 .5s linear;
  animation: check1 .5s linear;
  animation-timing-function: linear;

  top: 56%;
  left: 47%;

  transform: rotate(390deg);
  -webkit-transform: rotate(390deg);
  -moz-transform: rotate(390deg);
}

.clock.right p {
  -webkit-animation: check2 .5s linear;
  -moz-animation: check2 .5s linear;
  -o-animation: check2 .5s linear;
  animation: check2 .5s linear;
  animation-timing-function: linear;

  top: 55%;
  left: 47%;

  margin: -20px -4px 0;
  padding: 20px 4px 0;

  transform: rotate(300deg);
  -webkit-transform: rotate(300deg);
  -moz-transform: rotate(300deg);
}

@-webkit-keyframes check1 {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(390deg);
  }
}

@-moz-keyframes check1 {
  0% {
    -moz-transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(390deg);
  }
}

@-ms-keyframes check1 {
  0% {
    -ms-transform: rotate(0deg);
  }
  100% {
    -ms-transform: rotate(390deg);
  }
}

@-o-keyframes check1 {
  0% {
    -o-transform: rotate(0deg);
  }
  100% {
    -o-transform: rotate(390deg);
  }
}

@keyframes check1 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(390deg);
  }
}


@-webkit-keyframes check2 {
  0% {
    -webkit-transform: rotate(230deg);
  }
  100% {
    -webkit-transform: rotate(300deg);
  }
}

@-moz-keyframes check2 {
  0% {
    -moz-transform: rotate(230deg);
  }
  100% {
    -moz-transform: rotate(300deg);
  }
}

@-ms-keyframes check2 {
  0% {
    -ms-transform: rotate(230deg);
  }
  100% {
    -ms-transform: rotate(300deg);
  }
}

@-o-keyframes check2 {
  0% {
    -o-transform: rotate(230deg);
  }
  100% {
    -o-transform: rotate(300deg);
  }
}

@keyframes check2 {
  0% {
    transform: rotate(230deg);
  }
  100% {
    transform: rotate(300deg);
  }
}




/* Hands INCORRECT */

.clock.wrong:before {
	width: 0px;
	height: 0px;
}

.clock.wrong i {
    -webkit-animation: wrong1 .5s linear;
    -moz-animation: wrong1 .5s linear;
    -o-animation: wrong1 .5s linear;
    animation: wrong1 .5s linear;
    animation-timing-function: linear;
    top: 64%;
    left: 35%;
    margin: -60px -4px 0;
    padding: 60px 4px 0;

    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
}

.clock.wrong p {
	-webkit-animation: wrong2 .5s linear;
    -moz-animation: wrong2 .5s linear;
    -o-animation: wrong2 .5s linear;
    animation: wrong2 .5s linear;
    animation-timing-function: linear;


    top: 64%;
    left: 62%;
    margin: -60px -4px 0;
    padding: 60px 4px 0;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
}

@-webkit-keyframes wrong1 {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(405deg);
  }
}

@-moz-keyframes wrong1 {
  0% {
    -moz-transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(405deg);
  }
}

@-ms-keyframes wrong1 {
  0% {
    -ms-transform: rotate(0deg);
  }
  100% {
    -ms-transform: rotate(405deg);
  }
}

@-o-keyframes wrong1 {
  0% {
    -o-transform: rotate(0deg);
  }
  100% {
    -o-transform: rotate(405deg);
  }
}

@keyframes wrong1 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(405deg);
  }
}


@-webkit-keyframes wrong2 {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-405deg);
  }
}

@-moz-keyframes wrong2 {
  0% {
    -moz-transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(-405deg);
  }
}

@-ms-keyframes wrong2 {
  0% {
    -ms-transform: rotate(0deg);
  }
  100% {
    -ms-transform: rotate(-405deg);
  }
}

@-o-keyframes wrong2 {
  0% {
    -o-transform: rotate(0deg);
  }
  100% {
    -o-transform: rotate(-405deg);
  }
}

@keyframes wrong2 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-405deg);
  }
}




/* --------------------------------

Hours Logo Parallax AND Correct/Incorrect Animation - Currently Being Used

-------------------------------- */

.logo-animation {
	margin-bottom: 60px;
}

.logo {
	width: 120px;
	height: auto;
	margin: 0 auto;
}

.logo-hands {
	width: 30px;
    height: auto;
    margin: 0 auto;
    margin-top: 25px;
    margin-left: -20px;
    position: absolute;
    z-index: 100;
}

.logo-circle {
	position: relative;
	margin: 0 auto;
	border-radius: 50%;
	width: 120px;
	height: 120px;

	background: #87c6ff; /* Old browsers */
	background: -moz-linear-gradient(top, #8BC7FF 0%, #1890FF 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8BC7FF), color-stop(100%,#1890FF)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #8BC7FF 0%,#1890FF 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #8BC7FF 0%,#1890FF 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #8BC7FF 0%,#1890FF 100%); /* IE10+ */
	background: linear-gradient(to bottom, #8BC7FF 0%,#1890FF 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8BC7FF', endColorstr='#1890FF',GradientType=0 ); /* IE6-9 */
	box-shadow: 0 25px 50px rgba(0,0,0,.2);
}

.foreground {
	margin: auto;
	width: 40%;
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	  -ms-transform: translateY(-50%);
	      transform: translateY(-50%);
}

.foreground img {
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.13);
	display: block;
	width: 100%;
	border-radius: 50%;
	position: relative;
}

.logo-glare {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	background: -webkit-radial-gradient(50% 50%, circle, rgba(255, 255, 255, 0.2) 5%, rgba(255, 255, 255, 0) 70%);
	background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.2) 5%, rgba(255, 255, 255, 0) 70%);
	background-repeat: no-repeat;
	background-size: cover;

	border-radius: 50%;
	width: 120px;
	height: 120px;
}

.wrap {
	position: relative;
	top: 5%;
	-webkit-transform: translateY(-50%);
	  -ms-transform: translateY(-50%);
	      transform: translateY(-50%);
}


/* CORRECT CIRCLE */

.correct-circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  stroke-width: 2;
  stroke-miterlimit: 10;
  stroke: #4CCB7C;
  fill: none;
  animation: correct-stroke 0.6s cubic-bezier(0.45, 0, 0.25, 1) forwards;
}

.correct {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  display: block;
  stroke-width: 4;
  stroke-linecap: round;
  stroke: #ffffff;
  stroke-miterlimit: 10;
  margin: 0 auto;
  box-shadow: inset 0px 0px 0px #4CCB7C;
  animation: correct-fill .4s ease-in-out .4s forwards, scale .4s ease-in-out .9s both;
}

.correct-check {
  transform-origin: 50% 50%;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: correct-stroke 0.4s cubic-bezier(0.45, 0, 0.25, 1) 0.8s forwards;
}

.correct-scale-hide {
    animation: correct-scale-hide .4s ease-in-out .4s both;
}

@keyframes correct-scale-hide {
  0% {
    transform: scale(1);
  }
  40% {
  	transform: scale(1.4);
  }
  80% {
	transform: scale(.8);
	background-color: #ffffff;
	border-radius: 50%;
  }
  100% {
/*
	top: 35px;
    left: 49px;
    height: 8px;
    width: 8px;
*/
    height: 0px;
    width: 0px;
    background-color: #ffffff;
	border-radius: 50%;
  }
}

@-webkit-keyframes correct-scale-hide {
  0% {
    transform: scale(1);
  }
  40% {
  	transform: scale(1.4);
  }
  80% {
	transform: scale(.8);
	background-color: #ffffff;
	border-radius: 50%;
  }
  100% {
/*
	top: 35px;
    left: 49px;
    height: 8px;
    width: 8px;
*/
    height: 0px;
    width: 0px;
    background-color: #ffffff;
	border-radius: 50%;
  }
}

@-moz-keyframes correct-scale-hide {
  0% {
    transform: scale(1);
  }
  40% {
  	transform: scale(1.4);
  }
  80% {
	transform: scale(.8);
	background-color: #ffffff;
	border-radius: 50%;
  }
  100% {
/*
	top: 35px;
    left: 49px;
    height: 8px;
    width: 8px;
*/
    height: 0px;
    width: 0px;
    background-color: #ffffff;
	border-radius: 50%;
  }
}

@keyframes correct-stroke {
  100% {
    stroke-dashoffset: 0;
  }
}

@-webkit-keyframes correct-stroke {
  100% {
    stroke-dashoffset: 0;
  }
}

@-moz-keyframes correct-stroke {
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes correct-scale {
  0%, 100% {
    transform: none;
  }
  50% {
    transform: scale3d(1.1, 1.1, 1);
  }
}

@-webkit-keyframes correct-scale {
  0%, 100% {
    transform: none;
  }
  50% {
    transform: scale3d(1.1, 1.1, 1);
  }
}

@-moz-keyframes correct-scale {
  0%, 100% {
    transform: none;
  }
  50% {
    transform: scale3d(1.1, 1.1, 1);
  }
}

@keyframes correct-fill {
  100% {
    box-shadow: inset 0px 0px 0px 80px #4CCB7C;
  }
}

@-webkit-keyframes correct-fill {
  100% {
    box-shadow: inset 0px 0px 0px 80px #4CCB7C;
  }
}

@-moz-keyframes correct-fill {
  100% {
    box-shadow: inset 0px 0px 0px 80px #4CCB7C;
  }
}




/* INCORRECT CIRCLE */

.incorrect-circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  stroke-width: 2;
  stroke-miterlimit: 10;
  stroke: #F24B46;
  fill: none;
  animation: incorrect-stroke 0.6s cubic-bezier(0.45, 0, 0.25, 1) forwards;
}

.incorrect {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  display: block;
  stroke-width: 4;
  stroke-linecap: round;
  stroke: #ffffff;
  stroke-miterlimit: 10;
  margin: 0 auto;
  box-shadow: inset 0px 0px 0px #F24B46;
  animation: incorrect-fill .4s ease-in-out .4s forwards, scale .4s ease-in-out .9s both;
}

.incorrect-check {
  transform-origin: 50% 50%;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: incorrect-stroke 0.4s cubic-bezier(0.45, 0, 0.25, 1) 0.8s forwards;
}

.incorrect-scale-hide {
  animation: incorrect-scale-hide .4s ease-in-out .4s both;
}

@keyframes incorrect-scale-hide {
  0% {
    transform: scale(1);
  }
  40% {
  	transform: scale(1.4);
  }
  80% {
	transform: scale(.8);
	background-color: #ffffff;
	border-radius: 50%;
  }
  100% {
/*
	top: 13px;
    left: 58px;
    height: 8px;
    width: 8px;
*/
    height: 0px;
    width: 0px;
    background-color: #ffffff;
	border-radius: 50%;
  }
}

@-webkit-keyframes incorrect-scale-hide {
  0% {
    transform: scale(1);
  }
  40% {
  	transform: scale(1.4);
  }
  80% {
	transform: scale(.8);
	background-color: #ffffff;
	border-radius: 50%;
  }
  100% {
/*
	top: 35px;
    left: 49px;
    height: 8px;
    width: 8px;
*/
    height: 0px;
    width: 0px;
    background-color: #ffffff;
	border-radius: 50%;
  }
}

@-moz-keyframes incorrect-scale-hide {
  0% {
    transform: scale(1);
  }
  40% {
  	transform: scale(1.4);
  }
  80% {
	transform: scale(.8);
	background-color: #ffffff;
	border-radius: 50%;
  }
  100% {
/*
	top: 35px;
    left: 49px;
    height: 8px;
    width: 8px;
*/
    height: 0px;
    width: 0px;
    background-color: #ffffff;
	border-radius: 50%;
  }
}

@keyframes incorrect-stroke {
  100% {
    stroke-dashoffset: 0;
  }
}

@-webkit-keyframes incorrect-stroke {
  100% {
    stroke-dashoffset: 0;
  }
}

@-moz-keyframes incorrect-stroke {
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes incorrect-scale {
  0%, 100% {
    transform: none;
  }
  50% {
    transform: scale3d(1.1, 1.1, 1);
  }
}

@-webkit-keyframes incorrect-scale {
  0%, 100% {
    transform: none;
  }
  50% {
    transform: scale3d(1.1, 1.1, 1);
  }
}

@-moz-keyframes incorrect-scale {
  0%, 100% {
    transform: none;
  }
  50% {
    transform: scale3d(1.1, 1.1, 1);
  }
}

@keyframes incorrect-fill {
  100% {
    box-shadow: inset 0px 0px 0px 80px #F24B46;
  }
}

@-webkit-keyframes incorrect-fill {
  100% {
    box-shadow: inset 0px 0px 0px 80px #F24B46;
  }
}

@-moz-keyframes incorrect-fill {
  100% {
    box-shadow: inset 0px 0px 0px 80px #F24B46;
  }
}




/* --------------------------------

Big Screens

-------------------------------- */

@media all and (min-width: 1800px)
{

.center {
	width: 50%;
	height: 80%;
}

}



/* --------------------------------

Mobile

-------------------------------- */

@media all and (max-width: 1300px)
{


}

@media all and (max-width: 820px)
{

.footer-line {
	float: none;
	line-height: 30px !important;
	padding: 0px;
}

.footer-links-line {
	float: none;
	padding: 6px;
}

}

@media all and (max-width: 768px)
{
	.sign-up-button {
		margin-top: 25px;
		margin-right: 20px;
	}

	.hours-logo-small {
		margin-left: 20px;
	}

	.center1 {
		width: auto !important;
		height: 490px;
	}

}


@media all and (max-width: 660px)
{
	.logo-animation {
		display: none;
	}

	.field {
		width: 100%;
		border-radius: 0px;
		border-left: none;
		border-right: none;
	}

	.password-field {
		width: 100%;
		border-radius: 0px;
		border-left: none;
		border-right: none;
	}

	.auth-button,
	.login-button {
		width: 100%;
		border-radius: 0px;
	}

	.checkbox {
		width: 80%;
	}
}

@media all and (max-width: 560px)
{
	.wrap {
		top: 0%;
	}

}

@media all and (max-width: 390px)
{
	.wrap {
		top: 5%;
	}

}

@media all and (max-width: 320px )
{

	.logo-circle {
		display: none;
	}

	.center1 {
		top: 230px;
	}
}

/*** End Mobile ***/