@charset "utf-8";
/* CSS Document */

body,td,th {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	padding:0px;
	margin:0px auto;
     
    width: 1366px;
    height: 768px;
    
    overflow: hidden;
	background-color:rgba(0,0,0, 1);
}

#main_container {
	position:relative;
	top:20px;
	padding:0px;
	width: 1300px;
    height:725px;
	margin: 0 auto;	
    background: #000;
/*	background-color:rgba(250,50,50, .25);	*/
    overflow: hidden;
}

#world_container {
    /* background-color: aqua;*/
    width: 800px;
    height:450px;
    padding:0; margin: 0;     
}

#info_container {
    position:relative;
/*    float:right;*/
    height: 450px;
    width: 100%;
	margin: 20px 0;
/*    float: left;*/
/*	background-color:rgba(50,250,50, .25);	*/
}        

canvas {
    position: relative;
    background-color:#000;
    margin: 0 auto;
	width: 800px;
    height:450px;
}

#canvas {
    left:75px;
}
/*
#canvasContainer {
    position: absolute;
    left: 0; top:0;
    padding: 0; margin: 0;
    background-color: aqua;

}
*/

h3 {color:#666; margin-top: 30px;}

a {text-decoration: none;}

.blur {
	-webkit-filter: blur(4px);
	filter: blur(4px);
}

#maskedman {
    position: absolute;
    left:0;
    top:0;
    width:323px;
    height: 450px;
}

#yourLife {
    display: block;
    position: relative;
    height: 450px;
    width: 274px;  
    margin-right: 50px;
/*    background-color: cornflowerblue;*/

    float: right;
}
#yourLife img {
    height: 110%;
    width: 110%;  
}

.clip_svg {
    -webkit-clip-path: url(#maskedman); 
    -moz-clip-path: url(#maskedmMan); 
    clip-path: url(#maskedman); 
}

#dobSelect {
     margin: 0 auto;
}

#ageContainer {  /* label to display current age of person*/
    position: relative;
    display: block;
    top: 450px;
    left: 250px;
}

header h1, h3{
    text-align: center;
    margin: 0;
    padding: 5px;
	color: #fff;
}

h3 {
    font-size: .75em;
}

#loaderIcon {
    display: block;
    margin-left: auto;
    margin-right: auto 
}

#slider, #controls {
    position: relative;
    width: 650px;
	background-color: bisque;
/*    margin: 0 auto;*/
}

/*
#controls{
    bottom: -20px;    
 }
*/

#sliderVal {
    position: relative;
    text-align: center;
    color: #fff;
    width:50px;
    height: 20px;
    margin: 0 auto;
}

/* hides the spin-button for firefox */
input[type=number] {
	-moz-appearance:textfield;
}

/* hides the spin-button for chrome*/
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}