@font-face {
    font-family: 'museo700regular';
    src: url('../fonts/museo700regular.html');
    src: local('museo700regular'), url('../fonts/museo700regular-2.html') format('woff'), url('../fonts/museo700regular-3.html') format('truetype');
}
.box1,.box11,.cate-box,.pro-box,.box14,.box16,.box17,.box18,.box2,.box20,.box21,.box3,.box4,.box5,.box5 .icon li a,.box6,.box7,.box8{overflow:hidden}
.box10,.box11,.cate-box,.box14,.box4,.box5,.box6,.box7,.box9{box-shadow:0 0 3px rgba(0,0,0,.3)}
.box10 .icon li a,.box11,.cate-box,.pro-box,.box14,.box6 .icon li a,.box7,.box7 .icon li a,.box8,.box8 .icon li a{text-align:center}
.box11 .icon li,.box11 .icon li a,.box11 .title,.cate-box .icon li,.cate-box .title{
	display:inline-block;}

.cate-box{position:relative}
.cate-box .box-content,.cate-box:after{
	position:absolute;
	transition:all .3s ease 0s;
}
.cate-box:after{
	content: "";
	width: 93%;
	background: rgba(219, 2, 2, 0.83);
	padding-bottom: 120%;
	opacity: 0;
	top: 39%;
	left: 50%;
	transform: rotate(0) translate(-50%,-50%);
	transform-origin: 0 0 0;

}
.cate-box:hover:after{
	/*transform:rotate(-45deg) translate(-50%,-50%);*/
	opacity:1
}
.cate-box img{
	width:100%;
	height:auto;
}
.cate-box .box-content{
	width:100%;
	top:35%;
	left:0;
	opacity:1;
	z-index:1;
}
.cate-box:hover .box-content{
	opacity:1;
}
.cate-box .title{
	font-family: 'Citrus Gothic';
	font-size: 40px;
	padding:10px 0;
	color:#fff;
	margin:0;
}
.cate-box .icon{
	padding:0;
	margin:12px 0 0;
	list-style:none;
}
.cate-box .icon li a{
	display:block;
	width:100%;
	height:45px;
	line-height:45px;
	border:1px solid #fff;
	padding-left: 10px;
	padding-right: 10px;
	font-size:18px;
	color:#fff;
	margin-right:10px;
	transition:all .3s ease 0s;
}
.cate-box .icon li a:hover{
	border-radius:0;
}
@media only screen and (max-width:990px){.cate-box{margin-bottom:20px;}
}




.pro-box{
	position:relative;
	transition:all .2s ease-out 0s;
	border:1px solid #dedede;
}
.pro-box .box-content,.pro-box:after{
	position:absolute;
	left:0px;
	right:0px;
	width: 100%;

}
.pro-box:after{
	content:"";
	display:block;
	background: rgba(26, 153, 10, 0.72);
	top:0px;
	bottom:0px;
	opacity:0;
	transform:rotate3d(-1,1,0,100deg);
	transition:all .4s ease-in-out 0s;

}
.pro-box:hover:after{
	opacity:.9;
	transform:rotate3d(0,0,0,0deg);
}
.pro-box{
	text-align: center;
}
.pro-box img{
	width:90%;
	height:auto;
}
.pro-box .box-content{
	top:45%;
	opacity:0;
	z-index:1;
	-webkit-transform:translate(10%,-30%);
	transform:translate(10%,-30%);
	transition:all .2s ease-out 0s;
}
.pro-box:hover .box-content{
	opacity:1;
	transform:translate(0,-50%);
	transition-delay:.2s;
	border: 1px solid #000;
}
.pro-box .title{
	display:block;
	font-size:22px;
	font-weight:700;
	color:#000;
	font-family: 'Poppins';
    font-weight: 500;
    font-style: normal;
}
.pro-box .post{
	display:block;
	font-size:16px;
	color:#000;
	font-family: 'Poppins';
    font-weight: 500;
    font-style: normal;
}
.pro-box .social{
	padding:0;
	margin:0;
	list-style:none;
}
.pro-box .social li{
	display:inline-block;
}
.pro-box .social li a{
	display:block;
	width:35px;
	height:35px;
	color:#000;
	line-height:35px;
	margin-right: 30px;
	margin-left: 30px;
	transition:all .4s ease-in-out 0s;
	font-size: 22px;
}
.pro-box .social li button{
   display:block;
	width:35px;
	height:35px;
	color:#000;
	line-height:35px;
	margin-right: 30px;
	margin-left: 30px;
	transition:all .4s ease-in-out 0s;
	font-size: 22px;
}
.pro-box .social .fa-eye{
	font-size: 30px;
	padding-top: 5px;
}
.box14 .icon li,.box14 .post{
	display:inline-block;
}
.pro-box .social li a:hover{
	color:#000;
}
@media only screen and (max-width:990px){.pro-box{margin-bottom:30px}
}

.cate-box{
	background: #fff;
	padding: 13px;
}
.text-cate-dets{
	padding: 20px;
}
.text-cate-dets h4{
	font-family: 'museo700regular';
	font-size: 20px;
	color: #d61c1c;
	padding: 0px;
	margin: 0px;
}
.text-cate-dets p{
	padding: 0px;
	margin: 0px;
	letter-spacing: 2px;
}
.view-all-cate{
	font-family: 'museo700regular';
	font-size: 15px;
	color: #000;
	padding: 0px;
	margin: 0px;
	width: 120px;
	height: 45px;
	border: 1px solid #737373;
	line-height: 45px;
	border-radius: 20px;
	margin: 0 auto;
	overflow: hidden;
	cursor: pointer;

}
@media screen and (max-width: 768px) {
	.cate-box::after{
		top: 33%;
       left: 50%;
	}
}