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

.topbar{
	width:100%;
	padding:0px;
	margin
}

.toplogo{
	margin:auto;
	display:block;
	position:relative;
	align-content: center;
	}

.toplogo img{
	margin:auto;
	display:block;
	width:15%;
	height: auto;
}


#menu a
{
  	text-decoration: none;
  	color:rgba(0,51,128,0.50);
	font-family:'Source Sans Pro', sans-serif;
	line-height: 10px;
	letter-spacing: 0.4em;
  	text-align: center;
  	transition: color 0.3s ease;
	display: block;
	z-index: 9;
}

#menu a:hover
{
     background-color: rgba(180,226,252,0.34);
  	 color:#003380;	
	 font-weight: bold;
	 
}
 

#menuToggle
{
  display: block;
  position:fixed;
  top: 25px;
  right: 32px;  
  z-index: 10;
  
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle input
{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: 0px;
  left: -5px;
  
  cursor: pointer;
  
  opacity: 0; /* hide this */
  z-index: 11; /* and place it over the hamburger */
  
  -webkit-touch-callout: none;
}

/*
 * Just a quick hamburger
 */
#menuToggle span
{
  display: block;
  width: 27px;
  height: 2px;
  margin-bottom: 5px;
  position: relative;
  
  background:#003380;
  border-radius: 3px;
  
  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;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

/* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #003380;
}

/*
 * But let's hide the middle one.
 */
#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

/*
 * Ohyeah and the last one should go the other direction
 */
#menuToggle input:checked ~ span:nth-last-child(2)
{
  opacity: 1;
  transform: rotate(-45deg) translate(0, -1px);
}

/*
 * Make this absolute positioned
 * at the top left of the screen
 */
#menu
{
	position: absolute;
	width: 300px;
	margin: 30px 0 0 0;
	padding: 50px;
	padding-top: 50px;
	right: -40px;
	background: rgba(255,255,255,.9);
    list-style-type: none;
	-webkit-font-smoothing: antialiased;
	/* to stop flickering of text in safari */
  
	transform-origin: 0% 0%;
	transform: translate(100%, 0);
	transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
	}


#menu li
{
  padding: 38px 0;
  font-size:14px;
  
}

/*
 * And let's fade it in from the left
 */
#menuToggle input:checked ~ ul
{
  transform: scale(1.0, 1.0);
  opacity: 1;
}

/*--- Media Queries --*/
@media screen and (min-width: 1024px) {
	
	.topbar{
		display:none;
	}
	

}
@media screen and (max-width: 1024px) {
	.topbar{
		visibility:visible;
	}
	.rightside{
		width: 100%;
		margin-left:0px;
	}
	.sidebar{
		display: none;
	}
	
}
@media screen and (max-width: 768px) {
 .topbar{
		visibility:visible;
	}
	.sidebar{
		display: none;
	}
	
	
}
@media screen and (max-width: 320px) {
	
	.topbar{
		visibility:visible;
	}
	
	#menu
	{
	position: absolute;
	width: 200px;
	margin: 20px 0 0 0;
	padding: 50px;
	padding-top: 30px;
	right: -40px;
	background: rgba(255,255,255,.8);	
    list-style-type: none;
	-webkit-font-smoothing: antialiased;
	/* to stop flickering of text in safari */
  
	transform-origin: 0% 0%;
	transform: translate(100%, 0);
	transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
	}
	
	.sidebar{
		display: none;
	}
	
	
	
}