*{-webkit-tap-highlight-color:rgba(0,0,0,0);outline: none;font-family:sans-serif;color:#333;margin:0;padding:0;fill:#999;font-size:20px;box-sizing: border-box;}
html::-webkit-scrollbar{display:none;}
svg{width:32px;height:32px;}

@keyframes slideupin{
	0%{transform:translate(0,50px)}
	100%{transform:translate(0,0)}
}

@keyframes slidedownout{
	0%{transform:translate(-100%,0);}
	100%{transform:translate(-100%,0)}
}

.v.in{
	animation:slideupin .2s ease-out forwards;
}

.v.out{
	animation:slidedownout .0s ease-out forwards;
}

button,input{
	border:none;
	background:none;
}

html,body{
	height:100%;-webkit-user-select:none; user-select:none;
}

header,section,footer{
	width:100%;
}

header{
  height:50px;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  position: fixed;
  z-index:2;
  width:100%;
  //background:#fff;
}

header .info,.back,.logoo{
	display:flex;
	justify-content:center;
	align-items:center;
}

header .back{
	visibility:hidden;
}

header .info{
	grid-column: 5;
}

/*header .back::before{ font-weight:1;
	content:"";
	width:60px;
	height:60px;
	border-radius:50%;
	background:rgba(245,245,245,1);
	position:absolute;
	z-index:-5;
}*/

.plan.v{
	position:absolute;
	width:100%;
	top:20%;
	padding:0 30px;
	font-size:105%;
	transform:translate(-100%,0);
	font-size:70%;
	text-align:center;
}

.plan.v h1{
	font-size:150%;
	padding:30px 0;
}

.plan.v .plans{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	padding-bottom:50px;
}

.pl{
	font-size:80%;
	padding:20px 10px;
	border-radius:100px;
	line-height:100%;
}

.pl.active{
	background: rgba(118,160,156,1);
	color:#fff;
}

.plan.v .pay{padding-bottom:70px;}

.tor{
	position:absolute;
	width:100%;
	top:50px;
	padding:0 30px;
	transform:translate(-100%,0);
}

.tor *{font-size:90%;}

.tor h1{padding:20px; 0;font-size:110%;}
.tor h2{padding:10px 0;}

.code-v{
	position:absolute;
	width:100%;
	top:40%;
	padding:0 30px;
	display:grid;
	grid-template-columns:repeat(4,1fr);
	grid-gap:15px;
	transform:translate(-100%,0);
}

.code-v input{
	background:rgba(245,245,255,1);
	font-size:200%;
	padding:15px;
	width:100%;
	text-align:center;
}

.settings.v{
	position:absolute;
	width:100%;
	top:50px;
	padding: 0 20px;
	transform:translate(-100%,0);
}

.settings .profile svg{
	height:28px;
}

.settings>.title{
	padding:20px 0;
}

.settings .title h1{
	font-size:150%;
}

.settings .title h2{
	color:#777;
	padding:10px 0;
	font-size:90%;
}

.settings .profile .options{
	display:grid;
	grid-template-columns:repeat(12,1fr);
	grid-template-rows:repeat(6,1fr);
	grid-column-gap:10px;
}

.settings .profile .options>div{
	height:40px;
}

.settings .profile .email-text{
	grid-column:span 11;
	font-size:90%;
}

.settings .profile .plan{
	grid-column:span 1;
	font-size:80%;
}

.settings .profile .expire{
	grid-column:3/13;
	font-size:80%;
}

.settings .profile .payment{
	grid-column:span 12;
	text-align: center;
}

.settings .profile .payment button{
	font-size:80%;
	color:#fff;
	border-radius:50px;
	padding:25px;
	background:rgba(118,160,156,1);
}

.settings .body .signout{
	padding-bottom:70px;
	text-align:center;
}

.settings .body .signout button{
	border:2px solid rgba(248,248,248,1);
	padding:25px;
	border-radius:100px;
	font-size:80%;
	color:#e55;
}

.home{
	position:absolute;
	width:100%;
	top:70px;
	transform:translate(-100%,0);
}

.home .profile{
	height:70px;
	background:rgba(231,253,247,1);
}

.home .profile .pix{
	height:70px;
	width:70px;
	border-radius:50%;
	background:#fff;
}

.home .alerts{
	padding-bottom:70px;
}

.home .title h1{
	height:40px;
	font-size:110%;
	padding:30px;
}

.home .alert{
	display:grid;
	grid-template-columns:repeat(6,1fr);
	grid-template-rows:repeat(2,1fr);
	grid-gap:0 7px;
	padding: 10px 30px;
	//border-bottom:.5px solid #eee;
}

.home .alert>div{
	display:flex;
	font-size:80%;
}

.home .alert .ticker{
	position:relative;
	grid-row:1 / span 2;
	z-index:1;
	width:70px;
	height:70px;
	font-size:70%;
	font-weight:bold;
	justify-content:center;
	align-items:center;
}

.home .alert .ticker::before{
	content:"";
	height:70px;
	width:70px;
	border-radius:50%;
	position:absolute;
	left:0;
	z-index:-1;
}

.home .alert.blitz .ticker::before{
	background:rgba(238,255,238,1);
}

.home .alert.mid .ticker::before{
	background:rgba(255,255,238,1);
}

.home .alert.lo .ticker::before{
	background:rgba(255,238,238,1);
}

.home .alert .time{
	font-size:60%;
	grid-column:2/5;
	grid-row: 2;
}

.home .alert .hi{
	font-size:70%;
	grid-column:6;
	grid-row:2;
}

.home .alert .price{
	grid-column:2;
	grid-row: 1;
	align-items:flex-end;
}

.home .alert .percent{
	grid-column:6;
	grid-row:1;
	align-items:flex-end;
	font-size:60%;
}

.home .alert .rv{
	grid-column:5;
	grid-row: 1 / span 2;
	align-items:center;
	justify-content:center;
	font-size:60%;
}

div.landing{
	top:70px;
	width:100%;
	position: absolute;
	background:url("../img/motivation.svg") no-repeat;
	background-size:90%;
	background-position:top center;
	text-align:center;
	padding-top:80%;
	transform:translate(-100%,0);
}

div.landing h1{
	font-size:130%;
	//text-shadow:0 0 3px rgba(118,160,156,1);
	//color:rgba(255,255,255,1);
}

div.landing h2{
	height:50px;
	font-size:80%;
	font-weight:100;
}

div.landing .signin{
	font-size:80%;
	padding-top:40px;
	padding-bottom:70px;
}

div.landing .signin button{
	border:2px solid rgba(248,248,248,1);
	font-size:97%;
}

div.landing button{
	height:70px;
	width:150px;
	border-radius:40px;
}

div.landing .signup button{
	background:rgba(118,160,156,1);
	color:#fff;
	font-size:80%;
}

section{
  //padding-bottom:10%;
  position: absolute;
  top:50px;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  grid-template-rows:repeat(7,1fr);
  grid-gap:10px;
  padding: 0 30px;
  transform:translate(-100%,0);
  background:#fff;
}

section input{
	width:100%;
	height:100%;
	border:none;
	background:rgba(250,250,255,1);
	padding:0 20px;
	border-radius:10px;
}

section .logo h1{font-size:130%;color:rgba(118,160,156,1);}
section .logo path{fill:rgba(118,160,156,1);}

section>div{
	background:rgba(125,185,179,0);
	display:flex;
	justify-content:center;
	align-items:center;
	height:70px;
}

section .logo{
	grid-column: span 5;
	display:flex;
	justify-content:center;
	align-items:center;
}

section .email{
	grid-column: span 5;
}

section .pass{
	grid-column: span 5;
}

section .send{
	grid-column: span 5;
	background:rgba(118,160,156,1);
	border-radius:50px;
	color:#fff;
	display:flex;
	justify-content:center;
	align-items:center;
	font-size:90%;
	transition: .03s;
}

section.signup .send{
	background:rgba(96,118,160,1);
}

section.signup .logo *{
	color:rgba(96,118,160,1);
	fill:rgba(96,118,160,1);
}

section .forgot{
	grid-column: span 5;
	border-radius:50px;
	grid-row: 5;
	font-size:80%;
	display:none;
}

section .tog{
	grid-column:4/6;
	border:2px solid rgba(248,248,248,1);
	border-radius:50px;
	grid-row: 6;
	font-size:80%;
}

section .google{
	grid-column:1/span 3;
	grid-row: 6;
	font-size:80%;
	display:none;
}

footer{
  background:rgba(255,255,255,1);
  height:70px;
  position: fixed;
  bottom: 0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  z-index:2;
  visibility:hidden;
}

footer>div{
	display:flex;
	justify-content:center;
	align-items:center;
}

footer .active path{
	fill:#222;
}

footer .refresh{
	//grid-column: 3;
}

footer .alerts{
	//visibility:hidden;
}

footer .settings{
	//visibility:hidden;
}

@keyframes toas{
	0%{transform:translate(0,150px);}
	5%{transform:translate(0);visibility:visible;}
	80%{transform:translate(0)}
	100%{transform:translate(0,150px);visibility:hidden;}
}

.notify{
	position:fixed;
	width:100%;
	bottom:70px;
	text-align:center;
	font-size:80%;
	transform:translate(0,150px);
}

.notify.anim{
	animation:toas 4s ease-out;
}