@font-face {font-family:primary; src:url("primary.woff");}
@font-face {font-family:Garnet; src:url("Garnet.woff");}
body{ margin:0px; font-size:17px; font-family: primary, Arial, Helvetica, sans-serif; background-color:#333; color:#DDD; }
p{ line-height:1.8em; }
button{ outline:none; cursor:pointer; border:none; color:#000; background: #444 linear-gradient(#999,#BBB,#999); color:#000; border: 1px solid #555; border-radius: 5px; padding:10px 14px; transition: border 0.3s; font-size: 15px; font-family: myFont, Arial, Helvetica, sans-serif; box-shadow:0px 2px 1px #000; letter-spacing: 1px; }
button:hover{ border: 1px solid #FFF; }
input{ outline:none; background: #000; border:none; font-size:15px; padding: 10px; color: #CCC; border-radius: 5px; border: 1px solid #555; }
a{ outline:none; text-decoration: none; color: #78d0f1; transition: color 0.2s; }
a:hover{ color: #FFF; }

@keyframes flash {
	0% { opacity: 1; }
	50% { opacity: .1; }
	100% { opacity: 1; }
}
.highlightinterface{ animation: flash 0.5s 6; }

#topbar{ position: absolute; width: 100%; background:#222; height: 60px; z-index: 4; }

#logo1{ float: left; background-image: url(logo1.png); background-repeat: no-repeat; background-size: contain; width: 36px; height: 37px; margin:10px 30px 0px 20px; cursor: pointer; opacity:0.7; transition: opacity 0.2s; }
#logo1:hover{ opacity:1; }

#nav-btn{ display: inline-block; margin: 9px 0px 0px 0px; vertical-align: top; background: rgba(0, 0, 0, 0); border: none; padding: 4px 10px; box-shadow: none; }
#nav-btn:hover{ background: rgba(255, 255, 255, 0.1); }
#nav-btn:hover span { background: #EEE; }

.hamburger-menu-icon {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.hamburger-menu-icon span {
display: block;
width: 24px;
height: 4px;
background-color: #AAA;
margin: 5px 0px;
border-radius: 10px;
transition: background 0.3s ease;
}

#menu1{ position: absolute; top:-230px; left:0px; z-index: 3; width:180px; background:#222; transition: top .3s linear; border: 1px solid #444; border-radius:0px 0px 0px 0px; }
#menu1 > a{ 
	margin: 0px 0px 0px 0px;
	display:block;
	background:transparent;
	height: 36px;
	text-align:left;
	padding:15px 20px 5px 20px;
	font-size:15px;
	font-weight: 100;
	letter-spacing: 1px;
	color: #DDD;
	border-bottom: 1px solid #444;
	transition: background 0.2s,color 0.2s,font-size 0.2s;
}
#menu1 > a:last-child{ border-bottom: none; }
/* #menu1 > a:nth-child(even){ background: #2a2a2a; } */
/* #menu1 > a:first-child{ border-top:1px solid #444; } */
#menu1 > a:hover{ background:#333; color:#FFF; text-decoration: none;}

#menu1 > a:hover > span{ opacity: 1; }

#menu1 > a > span{ display: block; float: left; width: 20px; height: 16px; margin-top: 4px; margin-right: 10px; background-image: url(icons.png); opacity: 0.7; transition: opacity 0.2s; }

#menu1 > a:nth-child(1) > span{ background-position: 0px 0px; }
#menu1 > a:nth-child(2) > span{ background-position: 0px -20px; }
#menu1 > a:nth-child(3) > span{ background-position: 0px -40px; }
#menu1 > a:nth-child(4) > span{ background-position: 0px -60px; }
#menu1 > a:nth-child(5) > span{ background-position: 0px -80px; }

main{ min-height: 900px; padding-top: 60px; padding-bottom: 100px; }

#scrolltopbtn{ display:none; position:fixed; bottom:90px; right:10px; width:50px; height:50px; border:none; border-radius:100%; background:rgba(32, 151, 196, 0.7); font-weight:bold; font-size:30px; cursor:pointer; transition:background 0.5s; text-align:center; color: #000; line-height: 40px; }
#scrolltopbtn:hover{ background:rgba(32, 151, 196, 1); }

#breadcrumbs{ margin: 0px 0px 20px 0px; padding:10px 20px; font-size: 13px; text-align: left; background: rgba(0, 0, 0, .2); border-bottom: 1px solid rgba(255, 255, 255, .2); }
#breadcrumbs > span{ margin:0px 12px; font-size: 11px; }

footer { background:#222; padding: 40px 40px 30px 40px; font-size: 14px; }
footer > div { text-align: center; }
footer > div > div { display: inline-block; height: 150px; padding:0px 40px; text-align: left; border-right: 1px solid #555; line-height: 2.2em; }
footer > div > div:nth-child(4) { border-right:none; }
footer > div > div > h4 { margin:4px 0px 5px 0px; font-weight: bold; }
footer > div > p { margin: 0px; text-align: left; border-top:1px solid #555; padding: 5px 5px 0px 5px; }
footer > div > p > a { float: right; }
.redheart { color: red; }
.greendot { color: #50ee50; animation: flash 0.5s infinite; font-size: 17px; }

@media screen and (max-width: 900px) {
	footer > div > div { display: block; height: auto; padding:0px 0px; margin-bottom: 30px; border-right: none; }
	footer > div > p > a { float: none; display: block; margin: 20px 0px 40px 0px; }
}