*,*:after,*:before {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.clearfix:before,.clearfix:after {
	display: table;
	content: '';
}

.clearfix:after {
	clear: both;
}

body {
	margin: 0;
	padding: 0;
	
	background-color:  #FFFFFF; 
	
	animation-name: clor;
	animation-duration: 10s;
	animation-iteration-count: infinite;
	font-family: "Merriweather";  
	 
	 
	/* cursor: url(https://z.res.netease.com/pc/zt/20180609163225/img/common/icon-pointer_41f86a2.png),pointer!important;
	 */
	
	cursor: url(http://hooowie.com/cursor_shadow.png),pointer!important;
}


a:hover{cursor:url(http://hooowie.com/cursor_shadow_a.png), pointer!important;}



@font-face {
	font-family:"Merriweather"; 
	src:url(../font/Merriweather.ttf);
}

@-webkit-keyframes clor{
	0%{
		background-color:#FFFFFF;		
	}
	50%{
		background-color: #f8f8f8;	
	}
	100%{
		background-color:#FFFFFF;
	}			
}			
			


a {
	outline: none;
	color: #77d45b;
	text-decoration: none
}


.hidden {
	position: absolute;
	overflow: hidden;
	width: 0;
	height: 0;
	pointer-events: none
}

.codrops-header {
	padding: 2em 1em 4em;
	text-align: center
}

.codrops-header h1 {
	margin: .5em 0 0;
	letter-spacing: -1px;
	font-size: 3em;
	line-height: 1;
	font-weight: 400
}

.codrops-header h1 span {
	display: block;
	padding: .5em 0 1em;
	color: #999;
	font-weight: 400;
	font-size: .45em;
	letter-spacing: 0 ;
}

.codrops-links {
	position: relative;
	display: inline-block;
	text-align: center;
	white-space: nowrap
}

.codrops-links::after {
	position: absolute;
	top: 0;
	left: 50%;
	width: 1px;
	height: 100%;
	background: rgba(255,255,255,.1);
	content: '';
	-webkit-transform: rotate3d(0,0,1,22.5deg);
	transform: rotate3d(0,0,1,22.5deg)
}

.codrops-icon {
	display: inline-block;
	margin: .5em;
	padding: 0 0;
	width: 1.5em;
	text-decoration: none
}

.codrops-icon span {
	display: none
}

.codrops-icon:before {
	margin: 0 5px;
	text-transform: none;
	font-weight: 400;
	font-style: normal;
	font-variant: normal;
	font-family: codropsicons;
	line-height: 1;
	speak: none;
	-webkit-font-smoothing: antialiased
}

.codrops-icon--drop:before {
	content: "\e001"
}

.codrops-icon--prev:before {
	content: "\e004"
}

.codrops-demos {
	margin: 2em 0 0
}

.codrops-demos a {
	display: inline-block;
	margin: 0 .5em
}

.codrops-demos a.current-demo {
	color: #fff
}

.content {
	padding: 1em 0 3em;
	max-width: 1080px;
	margin: 0 auto
}

.content--related {
	text-align: center;
	font-weight: 700;
	padding: 0 1em
}

.media-item {
	display: inline-block;
	padding: 1em;
	vertical-align: top;
	-webkit-transition: color .3s;
	transition: color .3s
}

.media-item__img {
	max-width: 100%;
	opacity: .3;
	-webkit-transition: opacity .3s;
	transition: opacity .3s
}

.media-item:hover .media-item__img,.media-item:focus .media-item__img {
	opacity: 1
}

.media-item__title {
	margin: 0;
	padding: .5em;
	font-size: 1em
}

body #cdawrap {
	top: 15px;
	right: auto;
	left: 15px;
	background-color: rgba(0,0,0,.6);
	border: none
}

body #cdawrap .carbon-text {
	color: #ebebeb
}

@media screen and (max-width:50em) {
	.codrops-header {
		padding: 2em 5%
	}
}

@media screen and (max-width:40em) {
	.codrops-header h1 {
		font-size: 2.15em
	}
}

/* --------------------------------------------------------------- */


/* style1 */
.grid {
	position: relative;
	margin: 0 auto
}

.js .grid::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	pointer-events: none;
	background: #252323 url(../img/loading.svg) no-repeat 50% 75px;
	background-size: 60px auto;
	-webkit-transition: opacity .3s;
	transition: opacity .3s
}

.js .grid--loaded::after {
	opacity: 0
}



.grid__item {
	
	
	/* padding: 10px; */
	
	  border-radius: 20px;
	  background-color: rgb(255, 255, 255);
	  /*  background: darkred;*/
	 
	     width: 220px;
	  height:240px;
	transition-duration: 0.5s;
	/* transition-timing-function: cubic-bezier(0.85, 0.24, 0.19, 0.81); */
	 transition-timing-function: cubic-bezier(0.85, -2.48, 0.06, 2.59);
/*	transition-timing-function:cubic-bezier(0.63, 0.61, 0, 2.72);*/
	margin: 1.25rem;
	
	border: 4px #F8F8F8 solid;
	/* box-sizing: border-box; */
	box-sizing: content-box;
	
}


/*



 .grid__item img{
	display: none;
	width: 220px;
	border-top-right-radius: 20px;
	border-top-left-radius: 20px;
} */

.grid__item .bglogo{
	width: 220px;
	height: 108px;
	background-image:url(../img/website/hu.png) ,url(../img/website/dribbble.png);
	background-position: bottom ,center;
	background-repeat: no-repeat;
	border-top-right-radius: 16px;
	border-top-left-radius: 16px;
}

.grid__item .bglogo1{
	
	background-image:url(../img/website/hu.png) ,url(../img/website/uicol.png);
}
.grid__item .bglogo2{
	background-size:100%;
	/* background-color: #0c5df5; */
	background-image:url(../img/website/hu.png) ,url(../img/website/BEHANCE.png);
}

.grid__item .bglogo3{
	
	background-image:url(../img/website/hu.png) ,url(../img/website/pinterest.jpg);
	background-size: 100%;
}

.grid__item .bglogo4{
	
	background-image:url(../img/website/hu.png) ,url(../img/website/uimovement.png);
	background-size: 100%;
}

.grid__item .bglogo5{
	
	background-image:url(../img/website/hu.png) ,url(../img/website/getwaves.png);
	background-size: 140%;
}

.grid__item .bglogo6{
	
	background-image:url(../img/website/hu.png) ,url(../img/website/uigarage.png);
	background-size: 100%;
}

.grid__item .bglogo7{
	
	background-image:url(../img/website/hu.png) ,url(../img/website/uimovement.png);
	background-size: 100%;
}





.grid__item .txt{
	margin: 20px 10px;
	text-align: right;
	
}


.grid__item  a{
	color: #333333;
}


.grid__item .txt b{
	
	font-size: 1.125rem;
	
}
.grid__item .txt i{
	color: #666;
	display: block;
	margin-top: 1rem;
	font-size: 0.75rem;
}

.grid__item .txt span{
	
	margin-top: 0.4rem;
	color: #999;
	
	font-size: 0.75rem;
	display: block;
	opacity: 0;
	
	/* transition-timing-function: cubic-bezier(0.85, -2.48, 0.06, 2.59); */
	transition-delay: 0.35s;
}

.grid__item:hover span{
	
	
	opacity: 1;
}



.grid__item:hover{
	
	/* filter: blur(2px); */
	/* filter: blur(10px); box-shadow:0px 10px 15px white; */
	/* transform: scale(0.9,1); */
	
	
	box-shadow: 0px 37px 46.06px 2.94px rgba(0, 0, 0, 0.2);
	-webkit-box-shadow: 0px 37px 46.06px 2.94px rgba(0, 0, 0, 0.2);
	margin-top:-0.5rem ;
	transform: rotatez(-5deg)  ;
	-webkit-transform: rotatez(-5deg)  ;
	border-radius: 14px;
	
	
}

.grid__item:hover{
	 height:260px;
} 

/* .grid__item:hover{
	animation-delay:0.5s;
	animation-name: tb;
	animation-duration: 3s;
	animation-iteration-count: infinite;
}
 */

@-webkit-keyframes tb{
	0%{
		margin-top: -6px;
	}
	50%{
		margin-top: 6px;
	}
	100%{
		margin-top: -6px;
	}
}


/* --------------------------------------------------------------- */



.grid__item--current {
	opacity: 0!important
}







.img-wrap {
	display: block
}

.img-wrap:focus,.img-wrap:hover {
	outline: none
}

.img-wrap img {
	display: block;
	max-width: 100%
}

.preview {
	position: fixed;
	z-index: 1000;
	top: 0;
	left: 0;
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-ms-flex-line-pack: center;
	-webkit-align-content: center;
	align-content: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
	width: 100%;
	height: 100%;
	pointer-events: none
}

.preview--open {
	pointer-events: auto
}

.overlay {
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none
}

.overlay circle {
	-webkit-transition: fill-opacity .3s,-webkit-transform 0s .3s;
	transition: fill-opacity .3s,transform 0s .3s;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
	-webkit-transform: scale3d(0,0,1);
	transform: scale3d(0,0,1);
	fill: #1f1d1d;
	fill-opacity: 0
}

.preview--open .overlay circle {
	-webkit-transition: -webkit-transform .4s;
	transition: transform .4s;
	-webkit-transform: scale3d(1,1,1);
	transform: scale3d(1,1,1);
	fill-opacity: 1
}

.clone {
	position: fixed;
	z-index: 110;
	-webkit-transition: -webkit-transform .6s cubic-bezier(.5,1,.2,1);
	transition: transform .6s cubic-bezier(.5,1,.2,1);
	-webkit-backface-visibility: hidden
}

.original {
	position: relative;
	z-index: 120;
	display: block;
	object-fit: contain;
	-webkit-transition: opacity .2s;
	transition: opacity .2s;
	-webkit-backface-visibility: hidden
}

.preview--open .animate {
	-webkit-transition: -webkit-transform .6s,opacity .2s;
	transition: transform .6s,opacity .2s
}

.animate {
	-webkit-transition: -webkit-transform .3s,opacity .2s;
	transition: transform .3s,opacity .2s
}

.description {
	color: #fff
}

.js .description--grid {
	display: none
}

.description--preview {
	position: fixed;
	z-index: 140;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 2em 1em;
	text-align: center;
	opacity: 0;
	background: linear-gradient(180deg,transparent,#1f1d1d);
	-webkit-transition: opacity .3s,-webkit-transform .3s;
	transition: opacity .3s,transform .3s;
	-webkit-transform: translate3d(0,100%,0);
	transform: translate3d(0,100%,0)
}

.preview--open .description--preview {
	opacity: 1;
	-webkit-transition-delay: .2s;
	transition-delay: .2s;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0)
}

.action {
	font-size: 1.5em;
	margin: 0;
	padding: 0;
	cursor: pointer;
	vertical-align: top;
	color: #6bd68a;
	border: none;
	background: 0 0
}

.action:hover,.action:focus {
	color: #6bd68a;
	outline: none
}

.action--close {
	position: fixed;
	z-index: 150;
	top: 0;
	right: 0;
	padding: 1em;
	opacity: 0;
	-webkit-transition: opacity .3s,-webkit-transform .3s;
	transition: opacity .3s,transform .3s;
	-webkit-transform: scale3d(.6,.6,1);
	transform: scale3d(.6,.6,1)
}

.preview--image-loaded .action--close {
	opacity: 1;
	-webkit-transform: scale3d(1,1,1);
	transform: scale3d(1,1,1)
}

.text-hidden {
	position: absolute;
	display: block;
	overflow: hidden;
	width: 0;
	height: 0;
	color: transparent
}