#logo {	
	width: 100%;
	height: 100px;
	position: relative;	
	background-image: url(../../../../resource/sealteqLogoBlue.png);
	background-repeat: no-repeat;
	background-position:center; 
	background-color:#014a99;	
	background-size: auto 90%;
	float: center;	
	margin-top:0px;	
}
 


#logo #state {
	float: right;
	position: relative;
	z-index:99;
	right: 10px;
	width:  100px;
	height: 100px;
	top:10px;	
	/*border-radius: 25px;*/
}
.online {
	/*background-color: #66cc66;*/
	background-image: url(../../../../resource/stateOnline.png);
	background-repeat: no-repeat;
	background-position:center; 
	background-size: auto 100%;
}
.offline {
	background-image: url(../../../../resource/stateOffline.png);
	background-repeat: no-repeat;
	background-position:center; 
	background-size: auto 100%;
}

#logo #topnav {
		position: relative;
	float: left;
	z-index:99;
	left: 20px;
	width: 90px;
	height: 75px;
	top:20px;	
	border-radius: 25px;
}
#logo #goHomeLogo {
	float: left;
	position: relative;
	z-index:99;
	left: 40px;
	width: calc(100% - 200px);
	height: 125px;
}			 
#logo #topnav #menu span{
	background-color: #fff;
	display: block;
    width: 90px;
    height: 15px;
    margin-bottom: 10px;
    position: relative;
    /*background: #cdcdcd;*/
    border-radius: 8px;
    z-index: 1;
    transform-origin: 4px 0px;
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), opacity 0.55s ease;
}






#logo #topnav #menuclose  .left{
	background-color: #fff;
	display: block;
    width: 90px;
    height: 15px;
    margin-bottom: 10px;
	margin-left: 10px;
    position: relative;
    border-radius: 8px;
    z-index: 1;
    transform-origin: 4px 0px;
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), opacity 0.55s ease;	
    opacity: 1;
    transform: rotate(45deg) translate(-2px, -1px);
 
}
#logo #topnav #menuclose  .right{
	background-color: #fff;
	display: block;
    width: 90px;
    height: 15px;
    margin-bottom: 10px;
	margin-left: 10px;	
    position: relative;
    border-radius: 8px;
    z-index: 1;
    transform-origin: 35px 30px;
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), opacity 0.55s ease;	
	transform: rotate(-45deg) translate(0, -1px);
}


#logo #topnav input {
    display: block;
    width: 40px;
    height: 32px;
    position: absolute;
    top: -7px;
    left: -5px;
    cursor: pointer;
    opacity: 0;
    z-index: 2;
    -webkit-touch-callout: none;
}
/*
.topnav #myLinks {
  display: none;
}

.topnav a {
  color: white;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 50px;
  display: block;
}

.topnav a.icon {
  background: black;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.active {
  background-color: #4CAF50;
  color: white;
}
 
*/


@media (orientation: landscape) {
	#logo {	
		height: 55px;
	}
	#logo #state {
		width:  20px;
		height: 20px;
	}
	#logo #topnav {	
		height: 50px;
		top:10px;	
	}
	#logo #topnav #menu span{
		width: 50px;
		height: 8px;
		margin-bottom: 5px;
		border-radius: 4px;
	}	
	#logo #topnav #menuclose  .left{
		width: 50px;
		height: 8px;
		margin-bottom: 10px;
		margin-left: 10px;
		position: relative;
		border-radius: 8px;
		z-index: 1;
		transform-origin: 4px 0px;
		transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), opacity 0.55s ease;	
		opacity: 1;
		transform: rotate(45deg) translate(-2px, -1px);
	 
	}
	#logo #topnav #menuclose  .right{
		width: 50px;
		height: 8px;
		margin-bottom: 10px;
		margin-left: 10px;	
		border-radius: 4px;
		z-index: 1;
		transform-origin: 15px 11px;
		transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), opacity 0.55s ease;	
		transform: rotate(-45deg) translate(0, -1px);
	}	
#logo #state {
	float: right;
	position: relative;
	z-index:99;
	right: 15px;
	width:  75px;
	height: 75px;
	top:0px;	
	/*border-radius: 25px;*/
}
	.online {
	/*background-color: #66cc66;*/
	background-image: url(../../../../resource/stateOnline.png);
	background-repeat: no-repeat;
	background-position:center; 
	background-size: auto 100%;
}
.offline {
	background-image: url(../../../../resource/stateOffline.png);
	background-repeat: no-repeat;
	background-position:center; 
	background-size: auto 100%;
}

#logo #topnav {
		position: relative;
	float: left;
	z-index:99;
	left: 20px;
	width: 90px;
	height: 75px;
	top:20px;	
	border-radius: 25px;
}
#logo #goHomeLogo {
	float: left;
	position: relative;
	z-index:99;
	left: 40px;
	width: calc(100% - 200px);
	height: 75px;
}		
	#logo {	
	width: 100%;
	height: 75px;
	position: relative;	
	background-image: url(../../../../resource/sealteqLogoBlue.png);
	background-repeat: no-repeat;
	background-position:center; 
	background-color:#014a99;	
	background-size: auto 90%;
	float: center;	
	margin-top:0px;	
}
}