Up.css

@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Assistant:300,400,600,700');
html, body{
	width:100%;
	height:100%;
	font-family:"Assistant";
	-webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
  	text-rendering: optimizeLegibility;
	letter-spacing: .1px;
		
}
div{
	box-sizing:border-box;
}
a{
	text-decoration: none;
}
.comment{
	position:absolute;
	top:20px;
	font-size:18px;
	color:#7B7B7B;
	width:100%;
	text-align: center;
}
.bg{
	width:100%; height:1000px; background:#000;
}
#welcome{
	margin-bottom:30px;
}
.phone{
	width:100%;
	height:100%;
	max-width:375px;
	max-height: 850px;
	background:linear-gradient( #ffffff, #ffffff, #FFFDF4);
	margin: 0 auto;
	position:relative;
	top:0;
	overflow:hidden;
}
.next_btn{
	position:absolute;
	right:0;
	height:100%;
	width:80px;
	border:0px solid #ccc;
	z-index:999;
}
.prev_btn{
	position:absolute;
	left:0;
	height:100%;
	width:80px;
	border:0px solid #ccc;
	z-index:999;
}
.screenwrapper{
	width:100%;
	position:relative;
	margin:0 auto;
	
}
.center{
		transform:translateY(-50%);
	top:50%;
}
.top_onboarding{

}
.sectitle{
	font-weight: 300;
	color:#969696;
	text-align:center;
	width:100%;
	font-size:30px;
	margin-bottom:60px;
}
.status{
	margin-bottom:40px;
	font-size:24px;
}
.name{
	font-weight:400;
}
.titleimg{
	width:255px;
	max-width:100%;
	margin: 0 auto 74px;
	
	
}
.greyccl{
	width:255px;
	max-width:100%;
	height:255px;
	border:10px solid #ededed;
	border-radius:128px;
}
.button{
	width:90%;
	color:#393939;
	font-size:16px;
	font-weight:500;
	padding: 18px 0;
	text-align: center;
	margin:22px auto ;
	max-width:255px;
	border-radius:128px;
	transition:.3s;
	cursor:pointer;
	
}

.dark{
	background:#FFC83B;
}
.light{
	background:#E9974C;
}
.deactive{
	opacity:0;
	display:none;
	transition:.3s;
}

/*firstsc*/

.yellowblob{
	width:401%;
	position:absolute;
	left:0;
}
#yellow1{
	top:-18%;
}
#yellow2{
	width:300%;
	top:40%;
	left:-99.5%;
}
#yellow3{
	top:10%;
	left:200%;
}
#balloon_on{
	width:60px;
	margin-bottom:20px;
	margin-top:-40px;
}
#timer{
	width:100px;
	margin-bottom:20px;
}
#whale{
	margin-top:40px;
	margin-bottom:50px;
}
.onboarding{

}
.card_row{
	display: flex;
	flex-direction: row;
	width:400%;
	position:relative;
	left:0;
	transition:.3;
}
.card_wrapper{
	width:33%;
	padding:60px 37.5px 0;
		display:inline-block;
	

}

.onboardcard{
	position:relative;
	top:0;
	background:linear-gradient(rgba(255,255,255,.9),rgba(255,255,255,.9),rgba(255,255,255,.7));
	border:2px solid #FFDB5C;
	box-shadow: 0px 6px 20px rgba(253,238,199,.5);
	width:100%;
	border-radius: 15px;
	text-align: center;
	padding:60px 10px 0;
	height:480px;
	
	
}
.onboardcard .title{
	font-size:24px;
	font-weight:500;
	font-family:'playfair-display';
	transform:translateY(-30px);
}
.onboardcard img{
	width:80%;
	display: block;
	margin:0 auto 40px;
}
.explanation{
	width:95%;
	margin:0 auto;
	font-size:14px;
	line-height: 1.5;
	color:#000;
	font-weight: 400;
}
.wrap_nav-dot{
	margin:30px auto;
	width:100%;
	text-align: center;
}
.nav-dot{
	width:15px;
	height:15px;
	margin:0 4px;
	border-radius:8px;
	border:2px solid #FFDB5C;
	display: inline-block;
	transition:.3s;
}
.wrap_nav-dot .active{
		background:#FFDB5C;
}

/*sc3*/
.timerdiv{
	height:500px;
}
.settimer{
	width:100%;
	height:290px;
/*
	border:10px solid #ffdb5c;
	box-shadow:0 6px 30px #FDEEC7;
*/
		border-radius:145px;
	margin:0 auto 60px;
	position:relative;
	top:0;
	padding:0;
}
.settimer img{
position:absolute;
	left:51%;
	transform:translateX(-50%);
	top:-50px;
}
#holder{
	  position:absolute; 
  border-radius:15px;
  cursor:pointer;
	z-index:3;
}
#timevalue{
	position:absolute;
	z-index:2;
	left:50%;
	top:50%;
	transform:translateX(-50%) translateY(-50%);
}
.rndbtn_wrapper{
position:relative;
	width:310px;
	margin:120px auto 14px;
	height:140px;
	transition:.3s;
}
.rnd_button{
	width:88px;
	border-radius:50px;
	color:#fff;
	font-size: 24px;
	line-height: 1;
	padding:32px 0;
	text-align:center;
	position:absolute;
}
/*
.rndbtn_wrapper .dark:before{
	content:"";
	width:100px;
	height:100px;
	z-index:-1;
	top:-9px;
	left:-9px;
	border:3px solid #FFC83B;
	position:absolute;
	border-radius:60px;
}

.rndbtn_wrapper .light:before{
	content:"";
	width:100px;
	height:100px;
	z-index:-1;
	top:-9px;
	left:-9px;
	border:3px solid #E9974C;
	position:absolute;
	border-radius:60px;
}*/
.start{
	right:0;
}
.timeset{
	height:276px;
	width:100%;
	border-top:10px solid #c0c0c0;
	border-bottom:10px solid #c0c0c0;
	display:flex;
	flex-direction: row;
	overflow:hidden;
	padding:0 30px;
	justify-content: center;
}
.timeunit{
	margin:0 20px;
	width:76px;
	font-size:20px;
	font-weight:400;
	color:#c0c0c0;
	display:flex;
	flex-direction: row;
	position:relative;
	align-items: center;

}
.timeunit .active{
	font-weight:600;
	color:#969696;
}
.timenum{
	margin:0 3px 0 28px;
	width:auto;
	font-weight:600;
}
.timeunit ul{
	position: absolute;
	text-align: center;
	list-style: none;
	display:flex;
	flex-direction: column;
	left:0;
	top:0;
	padding-left:0;
	font-size:23px;
}
.timeunit li{
	cursor: pointer;
}
#hr, #min, #sec{
	top:50%;
	transform:translateY(-37px);
}
.handle1{
	opacity:0;
}
/*sc4*/
.timer{
	width:276px;
	height:276px;
	border:10px solid rgba(0,0,0,0);
	box-shadow:0 6px 30px #FDEEC7;
		border-radius:138px;
	margin:0 auto;
	position:relative;
	padding:0;
	z-index: -999;
}
.timer img{
	width:100%;
}
.timer_focus{
	width:266px;
	height:266px;
	overflow:hidden;
		border-radius:138px;
	margin:0 auto;
	position:relative;
	padding:0;
	z-index: -999;
}

@keyframes countdown {
	from{
		stroke-dashoffset:0px;
	}
  to {
    stroke-dashoffset:840px;
  }
}

.circle{
	height:280px;
	width:280px;
	margin:0 auto;
	top:-11px;
	left:50%;
	transform:translateX(-50%) rotateY(-180deg) rotateZ(-90deg);
	position:absolute;
	z-index: 999;
}
circle{
	
stroke-dasharray: 840px;
stroke-dashoffset: 0px;
	stroke:#FFC83B;
	stroke-width:10px;
	fill:none;
	animation: countdown linear forwards;
}
@keyframes countdown2{
	to{
		stroke-dashoffset:200;
	}
	
}
#bar,#bar2{
	
	stroke-width:20px;
	border-radius:5px;
	display:block;
	position:absolute;
	
	
}

#bar{
	stroke:#393939;
	stroke-dasharray: 200;
	stroke-dashoffset:0;
}
#bar2{
	stroke:#c4c4c4;
	
}
.barwrapper{
	width:260px;
	height:10px;
	position:relative;
margin:50px auto 10px;
	
}
.sc2{
	margin:0 auto 10px;
}
.sc2 .leftover_wrap{
	margin-bottom:40px;
}
.sc2 .communitycard{
	margin:0 auto;
	position:relative;
	width:85%;
	border:1px solid #CEA41D;
	height:300px;
	margin-bottom:80px;
	top:0;
	background:linear-gradient(rgba(255,255,255,.9),rgba(255,255,255,.9),rgba(255,255,255,.7));

	box-shadow: 0px 6px 20px rgba(253,238,199,.5);

	border-radius: 15px;
	text-align: center;
	padding:60px 16px 0;
}
.communitycard .title{
	text-align: center;
	font-size:18px;
	font-weight:600;
}
.screenwrapper.sc2{
	margin-top:80px;
}
.leftover_wrap{
	position:relative;
	height:50px;
	
}
#lefttime, #totaltime{
	position:absolute;
	top:-2px;
	right:48px;
	color:#000;
}
#lefttime{
	right:110px;
}
#community{
	width:0;
	height:0;
	border-left:10px solid transparent;
	border-right:10px solid transparent;
	border-top:14px solid #ffc838;
	right:108px;
	position:absolute;
	top:-44px;
}
#commu_title{
	position:absolute;
	left:58px;
	top:-48px;
	color:#828282;
}

.timersc{
	position:absolute;
	font-size:20px;
	transform:translateY(-80px);
	color:#393939;
	transition:.3s;
	opacity:0;
	
}
.timersc.des{
	width:90%;
	left:50%;
	transform:translateX(-50%) translateY(10px);
		margin-top:20px;
	font-size:16px;
}

.btn_wrapper{
	margin:80px auto 14px;
	height:140px;
	transition:.5s;
	
}
#btns{
	display:none;
	opacity:0;
	transition: .5s;
}
.outline{
	color:#E9974C;
	border:5px solid #E9974C;
	padding:13px 0;
	font-weight:600;
}
.greybox{
	background:rgba(0,0,0,0.5);
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	opacity:0;
	display:none;
	transition:.3s;
}
.alert{
	width:90%;
	background:#fff;
	border-radius: 15px;
	padding:60px 32px;
	margin:120px auto;
	text-align:center;
	line-height:1.6;
	
}



/*Sc5*/
#balloonex{
	width:150px;
	margin:0 auto;
	display:block;
}
.narrow{
	width:90%;
	max-width:300px;
	margin:0 auto 60px;
	text-align:center;
}

/*sc6*/


.bln_circle{
	height:280px;
	width:280px;
	margin:0 auto;
	top:-12px;
	left:50%;
	transform:translateX(-50%) rotateY(-180deg) rotateZ(-90deg);
	position:absolute;
}

@keyframes bal_steps{
	from{
		stroke-dashoffset:0px;
	}
	39.5%{
		stroke-dashoffset:0px;
	}
	40%{
		stroke-dashoffset:336px;
	}
	58%{
		stroke-dashoffset:336px;
	}
	59%{
		stroke-dashoffset:495px;
	}
	96.5%{
		stroke-dashoffset:495px;
	}
  97% {
    stroke-dashoffset:840px;
  }
	to{
		stroke-dashoffset:840px;
	}
}
.hold{
	width:138px;
	height:138px;
	left:50%;
	top:129px;
}
.hold circle{
	stroke:#FF5146;
	animation: inhale linear 9s 3 forwards;
}
.dots{
	background:#ffce51;
	width:30px;
	height:30px;
	border-radius: 15px;
	position:absolute;
	z-index: 999;
		transition:.3s;
}
#hold{
	left:35px;
	bottom:5px;
	animation:colors linear 9s 3 forwards;
}
#inhale{
	right:35px;
	bottom:5px;
	animation: colors2 linear 9s 3 forwards;

}
@keyframes inhale {
	from{
		stroke-dashoffset:0px;
	}
	97%{
		stroke-dashoffset:840px;
	}
  to {
    stroke-dashoffset:840px;
  }
}
@keyframes colors{
	0%{
		background:#ffce51;
	}
	58%{
		background:#ffce51;
	}
	59%{
		background:#E9974C;
	}
	99%{
		background:#E9974C; 
	}
	100%{
		background:#ffce51;
	}
}
@keyframes colors2{
	0%{
		background:#ffce51;
	}
	39%{
		background:#ffce51;
	}
	40%{
		background:#E9974C;
	}
	99%{
		background:#E9974C; 
	}
	100%{
		background:#ffce51;
	}
}
@keyframes floating {
	from{transform: translateY(-50%);
		
	}
	to{
		transform:translateY(-180%);
	}
}

.bln_circle circle{
	
stroke-dasharray: 840px;
stroke-dashoffset: 0px;
	stroke:#FFE8A5;
	stroke-width:10px;
	fill:none;
	animation: inhale linear 9s 3 forwards;
	-webkit-animation: inhale linear 9s 3 forwards;
}
.timercir circle{
	stroke:#E9974C;
	stroke-width:10px;
	fill:none;
	animation: none;
}
.blk circle{
	stroke:#ffce51;
	animation: bal_steps linear 9s 3 forwards;
	-webkit-animation: bal_steps linear 9s 3 forwards;
	
}
.addani{
	animation: floating linear 3s forwards;
}
.settimes{
	position:relative;
	text-align:left;
	top:50%;
	left:50%;
	transform:translateX(-50%) translateY(-40%);
	font-size:40px;
	color:#fff;
	font-weight: 600;
	z-index: 999;
}
#balloon{
	width:54px;
	transition:3s;
	z-index: -999;
}
.blnwrapper{
	z-index:999;
	text-align:center;
	top:calc(50% + 100px);
	transition: 3s;
}
.saveanimal{
	position:absolute;
	bottom:-71%;
	left:50%;
	width:90%;
	transform:translateX(-50%);
	max-width:280px;
	
}
.saveanimal img{
	width:100%;
}
.countwrapper{
	position:relative;
} 
@keyframes countdown {
	from{
		stroke-dashoffset:0px;
	}
  to {
    stroke-dashoffset:880px;
  }
}

.ocean{
	margin:0 auto;
	left:calc(50% - 40px);
	transform:translateX(-50%) translateY(-50%) rotateY(-180deg) rotateZ(-90deg);
	position:absolute;
	z-index: 1;
	width:380px;
	height:380px;
	top:calc(50% - 40px);
	padding:0;
	z-index: 1;
	stroke: #ccc;
	stroke-width:10px;
	stroke-dasharray: 880px;
	stroke-dashoffset: 0px;
}
.ocean circle{
	
stroke-dasharray: 880px;
stroke-dashoffset: 0px;
	stroke:#FFC83B;
	stroke-width:10px;
	fill:none;
	animation:countdown linear 5s 1 forwards;
}
.timerpos{
	top:50%;
	transform:translateY(-40%);
}
.endangercard{
	width:90%;
	left:50%;
	transform:translateX(-50%);
	position:absolute;
	bottom:-120%;
	opacity:0;
	transition:.3s;
	
}
.endangercard .title{
	text-align: center;
	font-size:18px;
	font-weight:600;
}
.endangercard .explanation{
	margin:30px auto 60px;
}
#flash{
	position:absolute;
	z-index: -999;
	bottom:-77.5%;
	width:105%;
	left:-5%;
	opacity:0;
	transition:.6s;
}

.settime{
	position:absolute;
	text-align:left;
	top:20%;
	left:50%;
	transform:translateX(-50%) translateY(-50%);
	font-size:40px;
	color:#fff;
	font-weight: 600;
	z-index:999;
}
#gif{
	position:absolute;
	z-index: -999;
}
#settime{
	width:100%;
	text-align:center;
	transform:translateY(-175px);
	font-size:50px;
	color:#393939;
	font-weight: 700;
	z-index: -1;
}
/*report*/
.report_section{
margin:30px auto;	
}
.title{
	width:100%;
	position:relative;
	font-size:24px;
	color:#393939;
	font-weight:700;
	padding:0px 20px 14px;
}
.expand{
	height:28px;
	width:28px;
	position:absolute;
	right:20px;
	top:0;
	cursor:pointer;
	
	
}
.island{
	transition:.3s;
	width:100%;
	height:300px;
	position:relative;
	background:linear-gradient(#D6F3FC,rgba(239,247,251,0))
}
.land{
	background:linear-gradient(#8ba85b,#d0ed7b);
	height:100px;
	bottom:0;
	width:100%;
	position:absolute;
}.animaldiv{
	position:relative;
	width:400px;
	height:100%;
	margin:0 auto;
}
#rpda{
	width:90px;
	position:absolute;
	bottom:20%;
}
#pbr{
	width:250px;
	bottom:5%;
	position:absolute;
	right:14%;
}
#bksm{
	width:96px;
	bottom:15%;
	position: absolute;
	right:2%;
}
.date{
	width:90%;
	display:flex;
	border: 1px solid #A67241;
	border-radius:5px;
	margin:0 auto;
}
.datepicker{
	width:25%;
	text-align: center;
	padding: 6px 0;
	border:1px solid #a67241;
	font-size:14px;
	cursor:pointer;
}
.datepicker.active{
	background:#a67241;
	color:#fff;
}
.backbutton{
	padding:20px 0 0;
	color:#E9974C;
	font-size:17px;
	display:flex;
	flex-direction: row;
	align-content: center;
	
}
.backbutton div{
	padding-top:4px;
	padding-left:4px;
}
.icon{
	display:inline;
}
.icon path{
	stroke:#E9974C;
}
.weekrow{
	position:relative;
	margin:10px 0;
	padding:0;
		width:100%;
	text-align: center;
	font-weight:700;
	color:#393939;
	
	
}
.arrow_button{
	background:#a67241;
	width:22px;
	height:22px;
	border-radius: 10px;
	padding:1px; 
	position:absolute;
	top:0;
	left:20px;
	box-shadow: 0 0 8px #a67241;
}
.arrow_button .icon path{
	stroke:#fff;
	transform: translateX(-3px);
}
.reportcard{
	width:98%;
	border-radius: 6px;
	height:200px; 
	margin:0 auto;
	position:relative;
}
.reportcard img{
	position: absolute;
	top:0;
	left:0;
	width:100%;
	
}
.timeinfo{
	color:#ea984b;
	font-size:16px;
	padding-top:12px;
	padding-left:12px;
	font-weight:600;
	font-size:14px;
	letter-spacing: .1px;
}
.bold{
	font-weight:700;
	font-size:24px;
}


.bigger{
	transform:translateX(-218px) translateY(93px) rotate(-90deg);
		width:812px;
			height:375px;
			z-index:999;
}

.time_control{
	width:276px;
	height:276px;
	border:10px solid #FFc83b;
	box-shadow:0 6px 30px #FDEEC7;
		border-radius:138px;
	margin:0 auto;
	position:relative;
	padding:0;
	z-index: -999;
	
}

#knob{
	left:50%;
	transform:translateX(-50%);
	top:-18px;
}