/*!
 * Kite Menu (http://codehim.com)
 * Copyright 2019 Asif Mughal
 * Licensed under MIT 
 */

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.kite-menu {
	font-family: 'Quicksand', sans-serif;
	width: 100%;
	height: 80px;
	line-height: 80px;
	color: rgba(255, 255, 255, 0.7);
	position: relative;
	overflow: hidden;
}

.kite-menu,
.kite-menu.expand {
	transition: all ease-in-out .4s;
	-webkit-transition: all ease-in-out .4s;
	-moz-transition: all ease-in-out .4s;
}

.kite-menu.expand-1x {
	height: 800px;
	
	background: rgba(26, 26, 26, 0.96);
    z-index: 2;
}

.kite-menu.expand-2x {
	height: 160px;
}


/* Text Shaodw */

.kite-menu.text-shadow {
	text-shadow: 1px 0.5px rgba(0, 0, 0, 0.4);
	-webkit-text-shadow: 1px 0.5px rgba(0, 0, 0, 0.4);
}


/* Box Shadow*/

.kite-menu.box-shadow {
	box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
}


/* Menu Logo */

.kite-menu .kite-logo {
    /* display: inline-block;*/
    position: absolute;
    display: block!important;
    z-index: 999;
}


.kite-menu .kite-logo img {
    height: 80px!important;
    width: auto!important;
    display: block!important;
}

/* A wrapper for hamburger icon*/

.kite-menu-trigger {
	position: absolute;
	right: 10px;
	top: 15px;
	-webkit-appearance: none;
}


/* Hamburger Icon */


/* Originally Designed by Luís Carvalho 
https://codepen.io/luiscarvalho/ 
*/

#hamburger {
	-webkit-tap-highlight-color: transparent;
	cursor: pointer;
	padding: 25px 35px 16px 0px;
}

#hamburger span,
#hamburger span:before,
#hamburger span:after {
	cursor: pointer;
	border-radius: 4px;
	height: 2px;
	width: 30px;
	background: rgb(255, 255, 255);
	position: absolute;
	display: inline-block;
	content: '';
}

#hamburger span:before {
	top: -10px;
}

#hamburger span:after {
	bottom: -10px;
}


/*
#hamburger span, #hamburger span:before, #hamburger span:after {
  transition: all 200ms ease-in-out;
}
*/

#hamburger span,
#hamburger span:before,
#hamburger span:after {
	-webkit-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
	-moz-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
	-o-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
	transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
	/* easeInOutCubic */
}

#hamburger.active span {
	background-color: transparent;
}

#hamburger.active span:before,
#hamburger.active span:after {
	top: 0;
}

#hamburger.active span:before {
	transform: rotate(45deg);
}

#hamburger.active span:after {
	transform: translateY(-10px) rotate(-45deg);
	top: 10px;
}


/* Menu Links */

.links-wrapper {
    position: absolute;
    margin-top: 110px;
    left: 0;
    right: 0;
    display: block;
}

.menu-links {
	list-style: none;
	width: 100%;
	text-align: center;
	line-height:20px!important;
}

.menu-links li {
	display: inline;
	margin: 5px;

}

.menu-links li a {
    text-decoration: none;
    color: #ff0000;
    /* for zombies browser*/
    -webkit-tap-highlight-color: transparent;
    color: rgba(255, 0, 0, 0.9);
    padding: 5px;
    display: block;
    font-size: 22px;
}

.menu-links li a:hover {
    color: #fff;
	transition: .5s;
}



.menu-links li ul {

}

.menu-links li ul a {
    text-decoration: none;
    color: #fff;
    /* for zombies browser*/
    -webkit-tap-highlight-color: transparent;
    color: rgba(255, 255, 255, 0.50);
    padding: 5px;
    display: block;
    font-size: 22px;
}

.menu-links li ul  a:hover {
	color: #fff;
	transition: .5s;
}




/* Kite Search */

.kite-search-trigger {
	-webkit-tap-highlight-color: transparent;
	width: 35px;
	height: 35px;
	line-height: 60px;
	text-align: center;
	border-radius: 50%;
	position: absolute;
	cursor: pointer;
	right: 60px;
	top: 10px;
	font-size: 22px;
	color: #fff;
}

.kite-search-trigger:hover {
	background: rgba(0, 0, 0, 0.2);
}

.kite-search {
	display: block;
	position: absolute;
	top: 50px;
	text-align: center;
	width: 100%;
	display: none;
}

.kite-search form {
	margin: 0;
}



/*手機板* 460px以下(包含460px)*/
@media only screen and (max-width: 460px) {
	

.kite-search form {
    margin-top: 20px;
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 0;
}
}
	
.kite-search input[type="text"] {
	background: rgba(255, 255, 255, 0.99);
	padding: 10px;
	border: 0;
	outline: 0;
	border-radius: 20px 0 0 20px;
	width: 120px;
	transition: all 200ms ease-in-out;
}

.kite-search input[type="text"]:focus {
	width: 220px;
	transition: all 200ms ease-in-out;
}

.kite-search .search-btn {
	padding: 10px;
	border: 0;
	outline: 0;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	background: #ddd;
	color: #aaa;
	border-radius: 0 50% 50% 0;
	margin-left: -5px;
}

.kite-search .search-btn:hover {
	background: #eee;
}


/* Kite Menu on Large Screens */

@media only screen and (min-width: 480px) {
	.kite-search-trigger {
		display: none;
	}
	.kite-search {
		position: absolute;
		display: block;
		top: 0;
		right: 60px;
		text-align: right;
	}
}


/* Kite Menu Themes */

.default {
    background: #ff0000;
    position: fixed;/*固定作用 */
    top: 0px;
    z-index: 99;	
}

.lush {
	background: #56ab2f;
	/* fallback for old browsers */
	background: -webkit-linear-gradient(to right, #a8e063, #56ab2f);
	/* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to right, #a8e063, #56ab2f);
	/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.deep-purple {
	background: #673AB7;
	/* fallback for old browsers */
	background: -webkit-linear-gradient(to right, #512DA8, #673AB7);
	/* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to right, #512DA8, #673AB7);
	/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.rainbow {
	background: #00F260;
	/* fallback for old browsers */
	background: -webkit-linear-gradient(to right, #0575E6, #00F260);
	/* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to right, #0575E6, #00F260);
	/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.instagram {
	background: #833ab4;
	/* fallback for old browsers */
	background: -webkit-linear-gradient(to right, #fcb045, #fd1d1d, #833ab4);
	/* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to right, #fcb045, #fd1d1d, #833ab4);
	/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.dimigo {
	background: #ec008c;
	/* fallback for old browsers */
	background: -webkit-linear-gradient(to right, #fc6767, #ec008c);
	/* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to right, #fc6767, #ec008c);
	/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.deep-space {
	background: #000000;
	/* fallback for old browsers */
	background: -webkit-linear-gradient(to right, #434343, #000000);
	/* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to right, #434343, #000000);
	/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}