   
/* lists */
.list-full, .list-full li,
.list-auto, .list-auto li { width: 100%; float: left; display: block; position: relative; }
.list-auto, .list-auto li { width: auto; }

/* floats */
.float-l { float: left; }
.float-r { float: right; }

header nav{
	position:relative;
	float:right;
	width:auto;
	height:45px;
	background:none;
	}

header ul {
	margin:0px 30px 0px 0px;
	}

header li a {
	position:relative;
	float:left;
	margin:0px 0px;
	padding:50px 20px 51px 20px;
	background:none;
	border-radius:0px;
	color:#FFF;
	text-transform:uppercase;
	text-decoration:none;
	transition-duration:2.0s;
	}

header li a:hover {
	transition-property:all;
	transition-duration:0.5s;
	background:#296DA0;
	color:#FFC;
	text-decoration:none;
	}

input#control-nav {
	visibility: hidden;
	position: absolute;
	left: -9999px;
	opacity: 0;
	}


@media screen and (max-width: 767px) {
  header nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 250px;
	height:190px;
    border-left: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
	border-radius:0px 0px 0px 7px;
    background: #333;
    overflow-x: auto;
    z-index: 2;
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
    -webkit-transform: translate(100%, 0);
    -ms-transform: translate(100%, 0);
    transform: translate(100%, 0);
  }

  header ul.list-auto {
    padding: 0;
  }

  header ul.list-auto li {
	border:#333;
	padding:5px 10px;
	width: 100%;
  }

  header li a {
	color:#CCC;
	border:1px solid #333;
  }

  header li a:hover {
	border:1px solid #FFC;
	color:#FFC;
	text-decoration:none;
  }

  .control-nav { 
    position: absolute;
    right: 20px;
    top: 20px;
    display: block;
    width: 30px;
    padding: 5px 0;
    border: solid #FFF;
    border-width: 3px 0;
    z-index: 2;
    cursor: pointer;
  }

  .control-nav:before {
    content: "";
    display: block;
    height: 3px;
    background: #FFF;
  }

  .control-nav-close {
    position: fixed; 
    right: 0;
    top: 0;
    bottom: 0;
    left: 0;
    display: block;
    z-index: 1;
    background: rgba(0,0,0,0.4);
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
    -webkit-transform: translate(100%, 0);
    -ms-transform: translate(100%, 0);
    transform: translate(100%, 0);
  }

  /* checked nav */
  input#control-nav {
    display: block;
  }

  input#control-nav:focus ~ .control-nav {
    border-color: #FFF;
    box-shadow: 0px 0px 9px rgba(0,0,0,0.3);
  }

  input#control-nav:focus ~ .control-nav:before {
    background: #000;
  }

  input#control-nav:checked ~ nav,
  input#control-nav:checked ~ .control-nav-close {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }

}

@media screen and (max-width: 480px) {
}
