@import url('https://fonts.googleapis.com/css?family=Electrolize|Josefin+Sans|Oxygen');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
/*
font-family: 'Oxygen', sans-serif;
font-family: 'Josefin Sans', sans-serif;
font-family: 'Electrolize', sans-serif;
*/

#the-time-box .the-time {
//	font-family: 'Josefin Sans', sans-serif;
//	font-family: 'Electrolize', sans-serif;
	font-family: 'Oxygen', sans-serif;
}
body {
	font-family: Arial, sans-serif;
}
#settings,
#settings i,
#settings .settings-icon,
#settings .toggle-bgcolor,
#settings .toggle-seconds {
	-webkit-transition: all 400ms;
	   -moz-transition: all 400ms;
	    -ms-transition: all 400ms;
	     -o-transition: all 400ms;
	        transition: all 400ms;
}

html {
	height: 100%;
}

body {
	position: relative;
	background-color: #555;
	height: 100%;
	margin: 0;
}
body:hover #settings .settings-icon {
	opacity: 1;
}
#settings .settings-icon {
	opacity: 0;
	padding: 12px 15px;
}
#settings {
	position: absolute;
	top: 0;
	right: 0;
	color: #FFF;
	cursor: pointer;
}
#settings input {
	visibility: hidden;
	position: absolute;
}
#settings .settings-icon:hover i.fa-cog {
	    	transform: rotate(25deg);
        -ms-transform: rotate(25deg);
    -webkit-transform: rotate(25deg);
	color: #ccc;
}
#settings .settings-menu {
	display: none;
	position: absolute;
	top: 50vh;
    right: 0;
    margin: -40vh auto 0 auto;
    width: 100vw;
    text-align: center;
}
#settings .toggle-bgcolor,
#settings .toggle-seconds {
	display: inline-block;
    vertical-align: top;
	width: 220px;
    padding: 30px 40px;
    border: 8px solid #fff;
    border-radius: 15px;
    background-color: rgba(85, 85, 85, 0.5);
    margin: 20px;
}
#settings .toggle-bgcolor:hover,
#settings .toggle-seconds:hover {
	border-color: #bbb;
	color: #bbb;
}
#the-time-box {
	position: relative;
	min-height: 100%;
}
#the-time-box .the-time {
	font-size: 15vw;
    width: 100%;
    text-align: center;
    color: #FFF;

    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);

	position: absolute;
	top: 50%;
	margin: -23vh auto 0 auto;
}
#the-time-box .the-time span.second {
	display: inline-block;
	text-align: left;
	width: 18vw;
}
#the-time-box .the-time span.colon {
	position: relative;
	top: -11px;
	margin: 0 4px;
}

#bg-screen-one,
#bg-screen-two {
	background: no-repeat center center;
	background-size: cover;
	position: absolute;
	width: 100%;
	height: 100%;
}
#bg-screen-one {
	z-index: -1;
	
}
#bg-screen-two {
	z-index: -2;
}