body{

background-color: #6479F9;
margin: 0px;
height: 100%;
min-height: 100%;
overflow:hidden;
}
/*'
p{
	text-shadow: -1px 1px #6E888E;
}
*/

#container{
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: absolute;
	text-align: center;
	top:0;
}

#result{
margin: 0 auto;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
font-size: 30px;
color: white;
z-index:2;
width:32%;
left: 34%;
text-align: center;
position: absolute;
top:45%;
}

#textLayer{
margin: 0 auto;
font-family: 'Open Sans', sans-serif;
font-size: 50px;
color: white;
z-index:2;
}

#buttonlist {
position: absolute;
top: 0px;
left: 0px;
margin:0;
padding: 0;
z-index: 9;	
/*background-color: #000000;
opacity: 0.5;*/
}

.listbutton {
height: 500px;
width: 2000px;
}

.listbuttonA:hover{
	cursor:pointer;
}

#myCanvas {
position: absolute;
top: 0px;
z-index: -1;
}

.about{
	margin-top: 10px;
	z-index: 21;
	text-align: center;
	position: relative;
}

#aboutwindow{
	font-family: 'Open Sans', sans-serif;
	position: absolute;
	font-weight: 400;
	z-index: 25;
	left:50%;
	text-align: left;
	color: #f2615a;
	margin-top: 5%;
	width: 500px;
	margin-left: -250px;
	}

.info{
	display: block;
	margin: auto;
}


#like{
	position: absolute;
	margin-right: 0;
	right: 0%;
	display: none;
}

.title{
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	font-size: 50px;
}

#shareLink{
position: absolute;
top:74%;
z-index: 13;
cursor: pointer;
margin-left: -28px;
left:50%;
}

#sharebtn{
height: 22px;
width:60px;	
background-image: url(share.svg);
background-repeat: no-repeat; 
background-size: 60px 22px;
}

#sharebtn:hover{
opacity:0.85;
}


#login{
	z-index: 20;
	position: absolute;
	/*margin-right: 20px;
	left:50%;
	margin-left: -30px;

	left:25%;
	*/
	top: 3000%;
	text-align: center;
	width: 100%;
	display: block;

}

.remBtn
{display: none !important;}

.abtlink{
	text-decoration: none;
	color: #1e1e1e;
}

#oldestDiv{
position: absolute;
top:22%;
left:50%;
margin-left: -100px;
z-index:9;
}

.ageImg{
width: 50px;
height: 50px;
border-radius: 25px;
	-webkit-border-radius: 25px;
	-moz-border-radius: 25px;
float:left;
}

#youngestDiv{
position: absolute;
top:32%;
left:50%;
margin-left: -100px;
z-index:9;
}

.ageDetails{
	position:fixed;
	font-family: 'Open Sans', sans-serif;
	font-size: 18px;
	color: white;
	margin: 0px;
	padding-left: 70px;
	text-align: left;
}

.footer{
margin: auto;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
font-weight: 600;
color: white;
display: inline-block;
z-index: 32;
cursor:pointer;
position:relative;
}


.invisible{
visibility:hidden;
}


#option1{
font-family: 'Open Sans', sans-serif;
font-weight: 700;
font-size: 30px;
color: white;
position: relative;
top:15%;
}


#step{
/*font-family: 'Philosopher', serif;*/
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 13px;
color: white;
position: relative;
top:5%;
opacity: 1;
}

#option2{
font-family: 'Open Sans', sans-serif;
font-weight: 700;
font-size: 30px;
color: white;
position: absolute;
top:76%;
width: 100%;
text-align: center;
opacity: 0;

-webkit-transition: opacity 0s ease-out;
       -moz-transition: opacity 0s ease-out;
        -ms-transition: opacity 0s ease-out;
         -o-transition: opacity 0s ease-out;
            transition: opacity 0s ease-out;

/*cursor:pointer;*/
}

#option2.fadein {
    opacity: 1;

-webkit-transition: opacity 0.5s ease-in;
       -moz-transition: opacity 0.5s ease-in;
        -ms-transition: opacity 0.5s ease-in;
         -o-transition: opacity 0.5s ease-in;
            transition: opacity 0.5s ease-in;

}

#cover{
	width: 100%;
	height: 50px;
	top: 80%;
	z-index: 20;
	background-color: rgb(84,104,204);
	position: absolute;
}


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

h1 {font-size:2em;}

#aboutwindow{
	width:90%;
	margin: auto;
	font-size: 14px;
	display: block;
	left: 5%;
}

#result{
	font-size: 16px;
	font-weight: 400;
	width: 44%;
	left:28%;
}

.about{
	text-align: left;
	/*padding: 10px;*/
	margin: 0px;
	position:inherit;
	text-align: center;
	font-weight: 400;
}

.info{
	display: block;
	margin: auto;
	font-weight: 400;
}

.footer{
	/*float: right;
	text-align: right;*/
	bottom:10px;
	position: absolute;
	font-size: 13px;
	width: 50%;
	left: 25%;
}

#textLayer{
	font-size: 35px;
	margin-top: -50px;
}

#option2{
	top:72%;
	width: 50%;
	left:25%;
}

#option2.end{
	font-size: 20px;
	top:74%;
	width: 80%;
	left:10%;
}

#step{
	font-size: 13px;
	margin-top: 2px;
	width: 76%;
	left: 12%;
	top: 0%;
}

#login{
	/*display: inline !important;*/
	margin-right: 0;
	display: inherit;
	top:76%;
	width: 80% !important;
	left: 10%;
	margin-right: 0px !important;

	/*left: 50%;
	width: 10%  !important; */
}

.title{
	font-size: 30px;
	margin:0;
	padding-top: 20px;
}

.ageImg{
width: 40px;
height: 40px;
border-radius: 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
float:left;
}

.ageDetails{
	position:fixed;
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	color: white;
	margin: 0px;
	padding-left: 70px;
	text-align: left;
}

#like{
	position: absolute;
	display: none;
}

#youngestDiv{
top:25%;
}

#oldestDiv{
top:16%;
}

#shareLink{
top:77%;