/* ===============================   
   Colour Palette:
   ---------------
   Enkoder Orange:  #FE8104
   Enkoder Gray:  #65646A
   =============================== */

   /* Nav Bar */
@media screen and (max-width: 1199px) {
	#menuToggle
	{
	  display: block;
	  position: relative;
	  top: 50px;
	  padding-left: 50px;
	  
	  z-index: 1;
	  
	  -webkit-user-select: none;
	  user-select: none;
	}

	#menuToggle a
	{
	  text-decoration: none;
	  color: #232323;
	  
	  transition: color 0.3s ease;
	}

	#menuToggle a:hover {
	  color: tomato;
	}


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

	/*
	 * Just a quick hamburger
	 */
	#menuToggle span {
	  display: block;
	  width: 33px;
	  height: 4px;
	  margin-bottom: 5px;
	  position: relative;
	  
	  background: #65646A;
	  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: #232323;
	}

	/*
	 * 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) {
	  transform: rotate(-45deg) translate(0, -1px);
	}

	/*
	 * Make this absolute positioned
	 * at the top left of the screen
	 */
	#menu {
	  position: absolute;
	  width: 100%;
	  margin: -100px 0 0 -50px;
	  padding: 50px;
	  padding-top: 125px;
	  
	  background: #ededed;
	  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: 10px 0;
	  font-size: 22px;
	}

	/*
	 * And let's slide it in from the left
	 */
	#menuToggle input:checked ~ ul {
	  transform: none;
	}

	/* Other*/
	#logo-navigation {
		width: 100%;
	}
	nav {
		margin-top: -20px;
	}

	#logo-navigation img {
		display: block;
	}

	#nav-desktop {
		visibility: hidden;
		height: 0px;
	}

}

@media screen and (max-width: 699px) {
	#logo-navigation img {
		margin: 0px auto;
	}
}

@media screen and (min-width: 700px) and (max-width: 1199px) {
	#logo-navigation img {
		margin: 15px auto;
	}
}

@media only screen and (min-width: 1200px) {
	.nav-mobile {
		visibility: hidden;
		height: 0px;
		margin-top: -20px;
	}

	#logo-navigation {
		margin-top: -55px;
	}

	li {
		list-style-type: none;
	}

	#nav-desktop {
		width: 100%;
		height: 70px;
		background-color: #F7F7F7;
		top: 0;
		z-index: 1;
		position: fixed
	}

	#nav-desktop a {
		text-decoration: none;
		float: left;
	}

	.nav-option {
		display: inline-block;
		margin-right: 25px;
		color: #65646A;
		font-size: 16px;
		margin-top: 10px;
	}

	.desktop-links {
		margin-top: -30px;
	}

	.logo-main-menu {
		margin-right: 30px;
		margin-left: 30px;
	}	
}