@media only screen and (min-width: 993px) {
	.menu-button{display:none;}
}

@media only screen and (max-width: 992px) {
	#headerMain #logoMain{
	      margin: 20px auto;
	      float: none;
	  }
	  #headerMain .menu{
	    position:absolute;
	    top:0px;
	    width:100%;
	    height:80px;
	    background-color:#e4e4e4;
	    opacity: 0;
	    visibility: hidden;
	  }
	  #headerMain #navTop{
	  	display: inline-grid !important;
	    float: none;
	    padding: 20px 0;
	    width: 720px;
	    height: 80px;
	    margin: 0 auto;
	    height:auto;
	  }
	  #headerMain #navTop a{ font-size:18px; }
	  #headerMain #searchTop .barSearch{ top:20px; }
	  #headerMain #searchTop .btnSearch{ top:25px; }
	  #headerMain.focusSearch #searchTop .barSearch{ width:100%; }

	  .show-menu #headerMain .menu{ top:110px; opacity: 1; visibility: visible;}

	/* Menu Button */
	.menu-button{display:block;}
	.menu-button {
		position: absolute;
		right:20px;
		top:35px;
		z-index: 1000;
		padding: 0;
		width: 40px;
		height: 40px;
		border: none;
		text-indent: 2.5em;
		font-size: 1.5em;
		color: transparent;
		background: transparent;
	}
	.menu-button div{
		width: 100%;
		height: 4px;
		position:absolute;
		background-color:#9560a5;
		border-radius:2px;
	}
	.menu-button .top{
		top:4px;
	}
	.menu-button .middle{
		top:18px;
	}
	.menu-button .bottom{
		top:32px;
	}
	/*.menu-button::before {
		position: absolute;
		top: 0.5em;
		right: 0.5em;
		bottom: 0.5em;
		left: 0.5em;
		background: linear-gradient(#9560a5 15%, transparent 15%, transparent 40%, #9560a5 40%, #9560a5 55%, transparent 55%, transparent 88%, #9560a5 88%);
		content: '';
	}*/

	.menu-button:hover {opacity: 0.6;}

}
@media only screen and (min-width: 769px) {
	.menu-wrap .close-button,
	.menu-wrap .morph-shape{display:none;}
}
@media only screen and (max-width: 768px) {

	/* == HEADER == */
	  #headerMain #logoMain{
	      margin: 20px;
	      float: left;
	  }
	  #headerMain #navTop{
	    float:none;
	    padding: 0;
	    width:100%;
	  }
	  #headerMain #navTop a{
	    font-size:18px;
	    padding:10px;
	    margin:0;
	    float:none;
	    width:100%;
	  }
	  #headerMain #searchTop{
	    width:100%;
	    height:50px;
	    float:none;
	    background-color:#fff;
	    border-radius:20px;
	    margin: 20px 0;
	    position:relative;
	  }
	#headerMain #searchTop .barSearch{ width:100%; top:5px; color:#575656; }
	#headerMain #searchTop .btnSearch{ top:10px; right:10px; }
	#headerMain.focusSearch #searchTop .barSearch{ 
		background:none;
		width: 100%;
	}
	#headerMain.focusSearch #navTop a{ opacity:1; }
	.show-menu #headerMain .menu{top:0; height: auto;}

  /* == MENU == */

	html, 
	body {
		width: 100%;
		height: 100%;
	}

	.container {background: #373a47;}

	.menu-wrap a {color: #b8b7ad;}

	.menu-wrap a:hover,
	.menu-wrap a:focus {color: #c94e50;	}

	.content-wrap {
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
		-webkit-transition: -webkit-transform 0.4s;
		transition: transform 0.4s;
	}

	.content {
		position: relative;
		background: #fff;
	}
/*
	.content::before {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 10;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.3);
		content: '';
		opacity: 0;
		-webkit-transition: opacity 0.4s, -webkit-transform 0s 0.4s;
		transition: opacity 0.4s, transform 0s 0.4s;
		-webkit-transform: translate3d(100%,0,0);
		transform: translate3d(100%,0,0);
	}

	 Close Button */
	.close-button {
		width: 40px;
		height: 40px;
		position: absolute;
		right: 1em;
		top: 1em;
		overflow: hidden;
		text-indent: 16px;
		border: none;
		z-index: 1001;
		background: transparent;
		color: transparent;
	}

	.close-button::before,
	.close-button::after {
		content: '';
		position: absolute;
		width: 4px;
		height: 100%;
		top: 0;
		left: 50%;
		background:#9560a5 ;
		border-radius:2px;
	}

	.close-button::before {
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}

	.close-button::after {
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}

	/* Menu */
	.menu-wrap {
		position: fixed;  
		top: 0;
		z-index: 1001;
		width: 280px;
		height: 100%;
		font-size: 1.15em;
		-webkit-transform: translate3d(-480px,0,0);
		transform: translate3d(-480px,0,0);
		-webkit-transition: -webkit-transform 0.4s;
		transition: transform 0.4s;
	}

	.menu {
		position: relative;
		z-index: 1000;
		padding: 3em 1em 0;
	}

	.menu,
	.close-button {
		opacity: 0;
		-webkit-transform: translate3d(-160px,0,0);
		transform: translate3d(-160px,0,0);
		-webkit-transition: opacity 0s 0.3s, -webkit-transform 0s 0.3s;
		transition: opacity 0s 0.3s, transform 0s 0.3s;
		-webkit-transition-timing-function: cubic-bezier(.17,.67,.1,1.27);
		transition-timing-function: cubic-bezier(.17,.67,.1,1.27);
	}

	.icon-list a {
		display: block;
		padding: 0.8em;
	}

	.icon-list a span {
		margin-left: 10px;
		font-size: 0.85em;
		font-weight: 700;
		vertical-align: middle;
	}

	/* Morph Shape */
	.morph-shape {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		right: 0;
		fill: #e4e4e4;
	}

	/* Shown menu */
	.show-menu .menu-wrap,
	.show-menu .content::before {
		-webkit-transition-delay: 0s;
		transition-delay: 0s;
	}

	.show-menu .menu-wrap,
	.show-menu .menu,
	.show-menu .close-button,
	.show-menu .morph-shape,
	.show-menu .content::before {
		-webkit-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);
	}

	.show-menu .menu,
	.show-menu .close-button {
		opacity: 1;
		-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
		transition: opacity 0.3s, transform 0.3s;
		-webkit-transition-delay: 0.4s;
		transition-delay: 0.4s;
	}

	.show-menu .content::before {
		opacity: 1;
		-webkit-transition: opacity 0.4s;
		transition: opacity 0.4s;
	}


}

@media only screen and (max-width: 480px) {
	.menu-wrap{width:100%;  /*overflow: auto;*/}
	#headerMain #navTop a{ text-align:center; }
	.show-menu{	overflow:hidden; }
}