/*MOBILE MENU*/

/* Nav Trigger */

.nav-trigger {
  /* critical styles - hide the checkbox input */
  
  position: absolute;
  clip: rect(0, 0, 0, 0);
}

label[for="nav-trigger"] {
  /* critical positioning styles */
  
  position: absolute;
  left: 15px;
  top: -13px;
  z-index: 2;
  /* non-critical apperance styles */
  cursor: pointer;
  padding: 9px 10px;
  line-height: 1;
  border: 1px solid #8bc2d1; 
  background:#fff;
  font-size:15px; 
  text-align:center;
  border-radius:20px;
    box-shadow: 0 0 20px rgba(0,0,0,.15);
  border: 0; 
  background:#8bc2d1;
  
  
  display:none;
}


label[for="nav-trigger"] i{color: #8bc2d1;color: #fff;}
label[for="nav-trigger"] .svgIcon {
	height: 100%;
    width: 50px;
    padding: 0 0;
	cursor: pointer;
    fill: #000;
	opacity: .2;
}


@media(max-width: 992px){
	.navigation {
	  /* critical sizing and position styles */
	  width: 300px;
	  height: 100%;
	  position: absolute;
	  top: 0;
	  right: 0;
	  bottom: 0;
	  left: 0;
	  z-index: 0;
	  /* non-critical appearance styles */
	  list-style: none;
	background: #fff;
	box-shadow: inset -6px -10px 10px rgba(0,0,0,.05);
	border-right: 1px solid #8bc2d1;
   }
   .site-wrap {
	  /* Critical position and size styles */
	  min-height: 100%;
	  min-width: 100%;
	  background-color: #f6f6f6;
	  /* Needs a background or else the nav will show through */
	  position: relative;
	  top: 0;
	  bottom: 100%;
	  left: 0;
	  z-index: 1;
	  padding-top: 30px;

    }
	
	.site-wrap:after{
	content: "";
	position: absolute;
	top:0;
	right:0;
	float: right;
	width:100%;
	height:0;
	border-top: 1px solid #8bc2d1;	
}
  /* Make the Magic Happen */
  label[for="nav-trigger"]{display:block;}
  .nav-trigger + label,
  .site-wrap {
	transition: left 0.2s;
	overflow:hidden;
  }

  .nav-trigger:checked + label {
	left: 280px;
	box-shadow: 0 0 7px rgba(0,0,0,.1);
  }
  	.nav-trigger:checked + label .svgIcon{
		fill: #8bc2d1;
		opacity: 1;
	}
  .nav-trigger:checked ~ .site-wrap {
	left: 300px;
  }
  
  body {
	/* Without this, the body has excess horizontal scroll when the menu is open */
	
	overflow-x: hidden;
  }
  
  /* Micro reset */
  
  *,
  *:before,
  *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
  }
  
  html,
  body {
	height: 100%;
	width: 100%;
  }
}