nav { width: 100%; }
#nav_wrapper {position: relative; left: 0;top: 0;z-index:99;width: 100%;transition: top .5s ease-out;border-top:1px solid #ff65cb;border-bottom:1px solid #ff65cb;}
.dropdown {width:100%;}
/*.scroll { top: -90px; }*/
.no-scroll {top: 0;z-index: 9999;}
.btn {padding: 10px 1%;margin: 5px;color: #fff;text-decoration: none;font-family: sans-serif;transition: all 0.1s ease;}
.btn:hover { transition: all 0.1s ease; }
/*
main {max-width: 800px;margin: 0 auto;}
main p { 2em;}
#search {float: right;font-size: 30px;padding: 2px 15px;line-height: 40px;color: #fff;margin: 0;font-weight: 700;-webkit-transform: rotate(181deg); -moz-transform: rotate(181deg);-ms-transform: rotate(181deg);-o-transform: rotate(181deg);transform: rotate(181deg);}
#search:hover { color: #efa666; }
.search_box {clear: both;width: 100%;background: #e8ebf0;padding: 0;margin: 0;height: 0;overflow: hidden;transition: all 0.1s ease-in-out;}
.search_box.active {height: auto;padding: 15px 0;}
.search_box input {width: 80%;font-size: 13px;margin: 0 0 0 15px;padding: 10px; border: none;background: #fff;}
.search_box input:focus { outline: none; }
.search_box input.search_icon {clear: both;width: 10%;height: auto; padding: 10px;margin: 0;margin-left: -5px;border: none; color: #fff;cursor: pointer;background: #8c949d;opacity: 1;transition: all 0.1s ease;}
.search_box input.search_icon:hover { background: #efa666; }
.menu-link { display: none; }
*/
.spinner-master input[type=checkbox] {display: none;}
.menu {width: 100%; height: auto;background: #fff;transition: all 0.3s ease;}
.menu ul {padding: 0px;margin: 0px;list-style: none;position: relative;/*display: inline-block;*/}
.menu > li > ul.sub_menu {min-width: 10em; padding: 4px 0;background-color: #f4f4f4;border: 1px solid #fff;}
.menu ul li { padding: 0px; width:160px;}
.menu ul li  ul{boarder-bottom:#000;}
.menu > ul > li { display: inline-block; }
.menu ul li a {display: block;text-decoration: none;color: #000; font-size: 14px;font-weight:400;text-align:center;}
.menu ul li a:hover {/*background: #f27fb2;*/color: #fff;}
.menu ul li.hover > a {/*background: #f27fb2;*/color: #ff65cb;}
.menu ul li > a { padding: 15px; }
.menu ul ul {display: none;position: absolute;top: 45px;min-width: 160px;/*background: #39484d;*/}
.menu ul li:hover > ul { display: block; }
.menu ul ul > li { position: relative;border-bottom:1px solid #efb9d1;}
.menu ul ul > li a {padding: 10px 15px;width:160px;height: auto;background: #ff65cb;}
.menu ul ul > li a:hover {background: #ff65cb;color: #fff;}
.menu ul ul ul {position: absolute;left: 100%;top: 0;}
#hero {width: 100%;height: auto;background: #e8ebf0;margin: 70px 0 20px 0;}
#hero img {width: 100%;height: auto;}

footer {width: 100%;background: #0099cc;padding: 10px;color: #fff;margin-top: 40px;}
footer a {color: #fff;text-decoration: none;}

/* ============================== media query ==============================  */
@media all and (max-width:960px){
	.example-header .container { width: 100%; }
	#nav_wrapper {position:absolute;top:0; border:0; }
	.spinner-master * {transition: all 0.3s;box-sizing: border-box;}
	.spinner-master {position: relative;margin: 30px;height: 30px;width: 30px;float: right;}
	.spinner-master label {cursor: pointer;position: absolute;z-index: 99;height: 100%;width: 100%;top: 5px;left: 0;}
	.spinner-master .spinner {position: absolute;height: 4px;width: 100%;padding: 0;background-color: #e50065;}
	.spinner-master .diagonal.part-1 {position: relative;float: left;}
	.spinner-master .horizontal {position: relative;float: left;margin-top: 4px;}
	.spinner-master .diagonal.part-2 {position: relative;float: left;margin-top: 4px;}
	.spinner-master input[type=checkbox]:checked ~ .spinner-spin > .horizontal { opacity: 0; }
	.spinner-master input[type=checkbox]:checked ~ .spinner-spin > .diagonal.part-1 {transform: rotate(135deg); -webkit-transform: rotate(135deg);margin-top: 10px;}
	.spinner-master input[type=checkbox]:checked ~ .spinner-spin > .diagonal.part-2 {transform: rotate(-135deg);-webkit-transform: rotate(-135deg);margin-top: -12px;}
	a.menu-link {display: block;color: #fff;float: left;text-decoration: none;padding: 10px 16px;font-size: 1.5em;}
	a.menu-link:hover { color: #efa666; }
	a.menu-link:after {content: "\2630";font-weight: normal;}
	a.menu-link.active:after { content: "\2715"; }
	.menu {clear: both;min-width: inherit;float: none;}
	.menu, .menu > ul ul {overflow: hidden;max-height: 0;border-top:1px solid #e50065;border-bottom:1px solid #e50065;/*background-color: #39484d;*/}
	.menu > li > ul.sub-menu {padding: 0px;border: none;}
	.menu.active, .menu > ul ul.active { max-height: 75em; }
	.menu ul { display: inline;}
	.menu li, .menu > ul > li { display: block; }
	.menu ul li {width:100%;}
	.menu ul li a {font-size:18px;}
	.menu > ul > li:last-of-type a { border: none; }
	.menu li a {color: #fff;display: block;padding: 0.8em;position: relative;}
	.menu li.has-submenu > a:after {content: '+';position: absolute;top: 0;right: 0;display: block;font-size: 1.5em;padding: 0.55em 0.5em;}
	.menu li.has-submenu > a.active:after { content: "-"; }
	.menu ul ul > li a {width:100%;/*background-color: #39484d;*/padding: 20px 0 20px 30px; font-size:16px; color:#fff;}
	.menu ul li a {text-align:left; padding:20px;}
	/*.menu ul li a:hover {background: #4b5f65;color: #fff;}
	.menu ul li.hover > a {background: #4b5f65;color: #fff;}*/
	.menu ul ul, .menu ul ul ul {display: inherit;position: relative;left: auto;top: auto;border: none;}
	/*
	#search { padding: 10px; }
	.search_box {position: absolute;top: 60px;left: 0;z-index: 10;}
	.search_box input { width: 70%; }
	.search_box input.search_icon { width: 17%; }
	#hero { height: 200px; };
	*/
}
@media all and (max-width:640px){
	.spinner-master {margin:20px 20px;}
	.menu ul li a {font-size:16px;}
	.menu ul ul > li a {font-size:15px;}
}