@import url('https://fonts.googleapis.com/css?family=Arimo');
html {
	background-color:#e0e0e0;
	color: white;
	font-family: 'Arimo', sans-serif;
}
/* width */
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #ecf0f7; 
	border-radius: 2px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    background: #959fb2; 
	border-radius: 2px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #aab4ca; 
}
#wrapper {
	position:fixed;
	left:0px;
	top:0px;
	padding:0px;
	margin:0px;
	
	height:100%;
	width:100%;
}
titlebar {
	position:fixed;
	left:0px;
	top:0px;
	padding:0px;
	margin:0px;
	
	width: 100%;
	height: calc(80px);
	overflow:hidden;
	background-color:#4f0000;
	box-shadow:0px 2px 4px rgba(0,0,0,0.1);
	user-select: none;
	z-index:990;
}
titlebar h1 {
	font-size:calc(7px + 3.3vw);
	height:60%;
	overflow:hidden;
	position:absolute;
	left:calc(143px);
	top:calc(38px - 4vw);
	padding:0px;
	margin:0px;
}
phonenumber {
	font-size:12px;
	position:absolute;
	right:2px;
	top:2px;
	padding:2px;
	margin:0px;
	background-color:rgba(255, 255, 255,0.1);
	border-radius:2px;
}
num {
	display:inline;
	color:rgb(200,176,137);
	user-select: text;
}
#titleimg {
	position:absolute;
	left:4px;
	top:8px;
	padding:0px;
	margin:0px;
	
	height:170%;
	transition: transform 250ms, filter 250ms;
	filter: drop-shadow(0px 0px 8px rgba(0,0,0,0.3));
	cursor:pointer;
	z-index:991;
}
#titleimg:hover {
	transform:scale(1.05,1.05);
	filter: drop-shadow(0px 4px 8px rgba(0,0,0,0.6));
}
#titleimg:active {
	transform:scale(1.01,1.01);
}

nav {
	position:absolute;
	text-align:center;
	width: calc(125px + 20vw);
	bottom:calc(-10px + 5.5vw);
	right:0px;
	margin: 4px;
	padding: 0px;
	font-size:calc(10px + 2vw);
	height:33%;
}
nav ul li {
	text-decoration:none;
	display:inline-block;
}
a.navbutton {
	background-color:rgba(0, 0, 0,0.1);
	border-radius:2px;
	padding:2px;
	cursor:pointer;
	z-index:995;
	transition: transform 250ms, filter 250ms, background-color 250ms;
}
a.navbutton.active {
	background-color:rgba(255, 255, 255,0.1);
	box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.3);
	color:rgb(200,176,137);
	bottom: calc(1px);
}
a.navbutton:hover:not(.active) {
	background-color:rgba(224, 224, 224,0.1);
	box-shadow: 0px 2px 16px 0px rgba(0,0,0,0.05);
	transform:scale(2,2);
}

main {
	position:fixed;
	left:0px;
	bottom:0px;
	padding:0px;
	margin:0px;
	
	width: 100%;
	height: calc(100% - 80px);
	overflow:hidden;
}
#cFrame {
	position:absolute;
	left:0px;
	bottom:0px;
	padding:0px;
	margin:0px;
	
	width:100%;
	height:100%;
}

footer {
	position:fixed;
	left:0px;
	bottom:0px;
	padding:0px;
	margin:0px;
	
	height:50px;
	width:100%;
	overflow:hidden;
	font-size:10px;
	display:none;
}
copyright {
	position:absolute;
	right:2px;
	bottom:2px;
	padding:2px;
	margin:2px;
	background-color:rgba(0, 0, 0,0.1);
	border-radius:2px;
}
medialinks {
	position:absolute;
	left:2px;
	bottom:2px;
	padding:2px;
	margin:2px;
	background-color:rgba(0, 0, 0,0.1);
	border-radius:2px;
}
@media only screen and (min-width: 800px) { /*desktop*/
	titlebar h1 {
		font-size:38px;
		left:calc(143px);
		top:calc(14px);
	}
	phonenumber {
		font-size:18px;
		right:5px;
		top:5px;
		border-radius:4px;
	}
	nav {
		width: 275px;
		bottom:28px;
		right:2px;
		font-size:calc(24px);
	}
}