@charset "utf-8";

/*Google Fonts*/
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800&display=swap');
@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,600,700,800&display=swap');

/*----------------------------------------------
   [Table Of Content]
------------------------------------------------
  
#. General Styles
#. Typography
#. Background color
#. Button
#. Aside style
#. Video
#. Background image
#. Icon
#. Magnific popup
#. Header
#. Page title
#. Swiper carousel
#. Slider
#. Portfolio
#. Elements
#. Blog
#. Footer
#. Home Page
#. Services Page
#. About Page
#. Projects Page
--primary-color: #e97908;
*/

/*----------------------------------------------
   General Styles
------------------------------------------------*/
:root {
	--primary-color: #0966a5;
	--primary-light: #fcf1e7;
	--primary-dark: #161723;
	--secondary-color: #e97908;
	--thirdly-color: #97cdee;

	--font-color: #313131;
	--g-font-color: #7f8a94;
	--bg-color: #eeeeee;
	--heading-color: #011627;
	--footer-color: #222333;
	--border-radius: 6px;
	--border-radius-full: 15px;
	--border-color: transparent;
	--border-color-light: #ddd;
	--iframe-filter: grayscale(0%);
	--bg-grey: #f4f4f4;
	--bg-lightgrey: #f8f9fa;
	--btn-bg: #e2e8f0;
	--base-font-size: 16px;
	--width:100%;
}

@media (min-width: 1440px) {

	.container,
	.container-sm,
	.container-md,
	.container-lg,
	.container-xl {
		max-width: 1400px;
	}
}

* {
	padding: 0;
	margin: 0;
}

html {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: visible;
	font-size: var(--base-font-size);
}

body {
	font-family: 'Poppins', sans-serif;

	font-weight: 400;
	line-height: 26px;
	overflow-x: hidden;
	background-color: #ffffff;
}

body a,
button,
.btn {
	cursor: pointer !important;
}

.clear {
	clear: both;
}

.main_color {
	color: var(--primary-color);
}

.secon-color {
	color: var(--secondary-color);
}

.article-title {
	font-size: 28px;
	font-weight: 500;
}

.thin-text {
	font-size: 2rem;
	font-weight: 500;
}



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

.d-grid {
	display: grid;
}

.align-self {
	align-self: center;
}

.align-end {
	align-self: end;
}

.row {
	display: flex;
	flex-wrap: wrap;
	margin-right: 0px;
	margin-left: 0px;
}

.helf-contrater {
	padding: 30px 10px;
}

html,
body,
.wrapper {
	height: 100%;
}

.wrapper {
	height: 960px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: #232323;
	font-weight: normal;
	line-height: 1.5;
	font-family: 'Poppins', sans-serif;
	letter-spacing: 0;
	margin: 0;
}

h1,
h2,
h3,
h4 {
	margin-bottom: 15px;
}

h5,
h5 {
	margin-bottom: 10px;
}

img {
	border: none;
	outline: none;
	max-width: 100%;
}

label {
	display: inline-block;
	font-weight: normal;
	margin-bottom: 5px;
	max-width: 100%;
}

a,
.btn,
button {
	transition: all 0.35s ease-in-out;
	-webkit-transition: all 0.35s ease-in-out;
	-moz-transition: all 0.35s ease-in-out;
	-ms-transition: all 0.35s ease-in-out;
	-o-transition: all 0.35s ease-in-out;
	outline: medium none;
}

a img,
iframe {
	border: none;
}

p {
	color: #6d6d6d;
	line-height: 26px;
	margin: 0 0 15px;
	text-transform: none;
	font-weight: 400;
}

hr {
	margin-top: 0;
	margin-bottom: 0;
	border: 0;
	border-top: 1px solid #eee;
}

pre {
	display: block;
	margin: 0 0 30px;
	padding: 9.5px;
	word-wrap: break-word;
	word-break: break-all;
	color: #333;
	border: 1px solid #ededed;
	border-radius: inherit;
	background-color: #f9f9f9;
	font-size: 1rem;
	line-height: 1.42857143;
}

input:focus,
textarea:focus,
select:focus {
	outline: none;
	box-shadow: inherit;
}

ul {
	margin: 0;
	list-style-type: none;
}

a,
a:active,
a:focus,
a:hover {
	outline: none;
	text-decoration: none;
	color: #232323;
}

a:hover {
	color: #232323;
}

a {
	transition: all 0.35s ease-in-out;
	-webkit-transition: all 0.35s ease-in-out;
	-moz-transition: all 0.35s ease-in-out;
	-ms-transition: all 0.35s ease-in-out;
	-o-transition: all 0.35s ease-in-out;
	text-decoration: none;
	font-family: 'Poppins', sans-serif;
}

b,
strong {
	font-weight: 900;
}

.btn.active,
.btn:active {
	background-image: inherit !important;
}

.btn.focus,
.btn:active:focus,
.btn:active:hover,
.btn:focus,
.btn:hover {
	outline: 0;
}

.btn.circle {
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
}

.btn.active,
.btn:active {
	outline: 0;
	-webkit-box-shadow: inherit;
	box-shadow: inherit;
}

input {
	border: 1px solid #e7e7e7;
	border-radius: inherit;
	box-shadow: inherit;
	min-height: 50px;
}

.container-half {
	margin: 0 auto;
	width: 60%;
	padding: 0 15px;
}

.bg-cover {
	background-position: center center;
	background-size: cover;
}

.bg-fixed {
	background-attachment: fixed;
	background-position: center top;
	background-size: cover;
}

.bg-gray {
	background-color: #efefef;
}

.bg-light {
	background-color: #ffffff;
}

.bg-theme {
	background-color: var(--primary-color);
}

.text-light h1,
.text-light h2,
.text-light h3,
.text-light h4,
.text-light h5,
.text-light h6,
.text-light p,
.text-light a {
	color: #ffffff;
}

.shadow {
	position: relative;
	z-index: 1;
}

.shadow.dark::after {
	background: #000000 none repeat scroll 0 0;
	content: "";
	height: 100%;
	left: 0;
	opacity: 0.7;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: -1;
}

.shadow.dark-hard::after {
	background: #232323 none repeat scroll 0 0;
	content: "";
	height: 100%;
	left: 0;
	opacity: 0.3;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: -1;
}

.shadow.dark-hard5::after {
	background: #232323 none repeat scroll 0 0;
	content: "";
	height: 100%;
	left: 0;
	opacity: 0.5;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: -1;
}

.shadow.light::after {
	background: #ffffff none repeat scroll 0 0;
	content: "";
	height: 100%;
	left: 0;
	opacity: 0.3;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: -1;
}

.shadow.theme::after {
	background: var(--primary-color);
	none repeat scroll 0 0;
	content: "";
	height: 100%;
	left: 0;
	opacity: 0.5;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: -1;
}

.shadow.theme-hard::after {
	background: var(--primary-color);
	none repeat scroll 0 0;
	content: "";
	height: 100%;
	left: 0;
	opacity: 0.7;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: -1;
}

.d_none {
	display: none;
}

.default-padding {
	padding-top: 40px;
	padding-bottom: 40px;
}

.default-padding-top {
	padding-top: 480px;
}

.default-padding-bottom {
	padding-bottom: 40px;
}

.default-padding.bottom-less {
	padding-top: 80px;
	padding-bottom: 50px;
}

.default-padding.bottom-30 {
	padding-top: 80px;
	padding-bottom: 30px;
}

.default-padding.bottom-20 {
	padding-top: 80px;
	padding-bottom: 20px;
}

.padding-xl {
	padding-top: 180px;
	padding-bottom: 180px;
}

.carousel-shadow {
	padding-bottom: 65px;
}

.btn {
	display: inline-block;
	font-family: "Poppins", sans-serif;
	font-size: 1.2rem;
	font-weight: 600;
	line-height: 25px;
	text-transform: uppercase;
	-webkit-transition: all 0.35s ease-in-out;
	-moz-transition: all 0.35s ease-in-out;
	-ms-transition: all 0.35s ease-in-out;
	-o-transition: all 0.35s ease-in-out;
	transition: all 0.35s ease-in-out;
	font-weight: 700;
	letter-spacing: 1px;
	overflow: hidden;
}

.btn-md {
	padding: 10px 30px 10px;
}

.btn-sm {
	padding: 8px 35px;
	font-size: 1rem;
}

.btn.btn-sm-pro {
	font-size: 10px;
	font-weight: 600;
	margin-top: 5px;
	padding: 4px 35px;
	display: inline-block;
}

.btn-border-light {
	border: 2px solid #ffffff;
}

.btn.btn-sm-pro.btn-border-light:hover,
.btn.btn-sm-pro.btn-border-light:focus {
	background-color: #ffffff;
	color: var(--primary-color);
	border: 2px solid #ffffff;
}

.btn-dark {
	background-color: var(--primary-color);
	color: #ffffff;
	border: 2px solid var(--primary-color);
}

.btn-dark.border {
	background-color: transparent;
	color: var(--primary-color);
	border: 2px solid var(--primary-color);
}

.btn-dark.border:hover {
	background-color: var(--primary-color);
	color: #ffffff !important;
	border: 2px solid var(--primary-color);
}

.btn.btn-light {
	background: #ffffff none repeat scroll 0 0;
	border: 2px solid #ffffff;
	color: #232323;
}

.btn.btn-light:hover,
.btn.btn-light:focus {
	background: transparent none repeat scroll 0 0;
	border: 2px solid #ffffff;
	color: #ffffff;
}

.btn.btn-light.effect:hover,
.btn.btn-light.effect:focus {
	background-color: var(--primary-color);
	color: #ffffff !important;
	border: 2px solid var(--primary-color);
}

.btn.btn-light.border {
	background: transparent;
	border: 2px solid #ffffff;
	color: #ffffff;
}

.btn.btn-light.border:hover {
	background: #ffffff none repeat scroll 0 0 !important;
	border: 2px solid #ffffff !important;
	color: #232323 !important;
}

.btn-dark:hover,
.btn-dark:focus {
	color: #232323 !important;
	background: transparent;
}

.bg-dark {
	background: #222222 none repeat scroll 0 0;
}

.btn-theme {
	background-color: var(--secondary-color);
	color: #ffffff !important;
	border: 2px solid var(--secondary-color);
	font-weight: 500;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}

.btn-theme.border {
	background-color: transparent;
	color: var(--primary-color);
	!important;
	border: 2px solid var(--primary-color);
}

.btn-theme.border:hover {
	background-color: var(--primary-color);
	color: #ffffff !important;
	border: 2px solid var(--primary-color);
}

.btn-theme.effect:hover,
.btn-theme.effect:focus {
	background: #30393e;
	border: 2px solid #30393e;
	color: #ffffff;
}

.btn.btn-sm-lm {
	font-size: 1rem;
	padding: 4px 35px;
}

.btn.border.btn-light.standard {
	padding-left: 20px;
	padding-right: 50px;
	position: relative;
	z-index: 1;
}

.btn.border.btn-light.standard::after {
	background: #ffffff none repeat scroll 0 0;
	content: "";
	height: 53px;
	position: absolute;
	right: -18px;
	top: -10px;
	transform: skewX(20deg);
	-webkit-transform: skewX(20deg);
	-moz-transform: skewX(20deg);
	-ms-transform: skewX(20deg);
	-o-transform: skewX(20deg);
	width: 50px;
	z-index: -1;
}

.btn.border.btn-light.standard::before {
	color: var(--primary-color);
	content: "\f061";
	font-family: "Font Awesome 5 Free";
	height: 100%;
	position: absolute;
	right: 0;
	width: 25px;
}

.bg-fixed {
	background-attachment: initial;
	background-position: center center;
	background-size: cover;
}

.bg-cover {
	background-position: center center;
	background-size: contain;
}

.container-full {
	padding: 0 15px;
	width: 100%;
}

.oh {
	overflow: hidden;
}

.less-margin {
	margin: 0;
}

/*-- //dark and light mode styling --*/
.navbar .navbar-brand {
	margin: 0;
	padding:5px 0;
	
	font-size: 36px;
	font-weight: 400;
	text-transform: capitalize;
	color: #fff;
	margin: 0;
}

.navbar .navbar-brand span.hny-log {
	font-family: 'Zilla Slab Highlight', cursive;
	font-weight: 700;
	letter-spacing: 2px;
}

.navbar .navbar-brand:hover {
	opacity: 0.95;
}

.navbar .navbar-brand img {
	max-width: 140px;
	transition: all 0.5s ease;
}
.navbar .navbar-brand span {
	font-weight: 500;
	text-transform: uppercase;
	margin: 20px;
}
.navbar-expand-lg .navbar-nav .nav-item {
	padding: 0 1rem;
	transition: all 0.5s ease;
	position: relative;
}

.navbar-expand-lg .navbar-nav .show>.nav-link,
.navbar-expand-lg .navbar-nav .active>.nav-link,
.navbar-expand-lg .navbar-nav .nav-link.show,
.navbar-expand-lg .navbar-nav .nav-link.active,
.navbar-expand-lg .navbar-nav .nav-link:hover {
	color: var(--thirdly-color);
}

.navbar-light .navbar-nav .show>.nav-link,
.navbar-light .navbar-nav .active>.nav-link,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .nav-link.active {
	color: rgba(255, 255, 255, 0.9);
}

.navbar-expand-lg .navbar-nav .nav-link {
	text-transform: capitalize;
	transition: all 0.5s ease;
	padding: 10px 0 10px;
	font-size: 1.2rem;
	font-weight: 500;
	color: #fff;
}
.navbar-expand-lg .navbar-nav a.nav-link:hover {
   
    color: #fff;
}
.navbar-expand-lg a.nav-link.donate.btn.btn-style {
	display: block;
	padding: 0px 30px;
	color: #fff;
	height: 46px;
	font-size: 1rem;
	line-height: 42px;
	text-transform: uppercase;
	font-weight: 600;
	transition: 0.3s ease-in;
	border-radius: 4px;
}

a.dropdown-item {
	text-transform: capitalize;
	transition: all 0.5s ease;
	font-size: 1rem;
	font-weight: 600;
	padding: 5px 24px;
	color: var(--heading-color);
}

a.dropdown-item:hover {
	color: var(--primary-color);
	background: none;
}

a.dropdown-item.active {
	background: transparent;
	color: var(--primary-color);
}

/*菜单*/

.navbar {
	width: 100%;
}
img.top_logo  {
    width: 40px;
}
.top_company_name{
	font-family: 'Poppins', sans-serif;
	padding: 10px 20px;text-transform: uppercase;    font-size: 2rem;
    font-weight: 700;
}
.navbar_conatiner::after {
	content: "";

	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0));
	background: var(--primary-color);
	position: absolute;
	top: 0;

	left: 0;
	right: 0;
	z-index: -1;
	height: 100%;
	
}

header.nav-fixed .navbar_conatiner::after {
	padding: 0px;
	background-color: var(--bg-color);
	height: 80px;
	border-bottom: none;
	box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.05);
	height: 100%;
	min-height: 60px;
}

.dropdown-toggle::after {
	display: inline-block;
	width: 0;
	height: 0;
	margin-left: 0.3em;
	vertical-align: middle;
	content: "";
	border-top: 0.3em solid;
	border-right: 0.3em solid transparent;
	border-left: 0.3em solid transparent;
}

.dropdown-divider {
	height: 1px;
	margin: 0.3rem 0;
	overflow: hidden;
	background-color: #c3d8ed;
	border-top: 1px solid #c3d8ed;
}

.dropdown-menu {
	min-width: 16rem;

}

.dropdown-menu a {
	display: inline-block;
	width: 100%;
	font-size: 1rem;
	color: var(--font-color);
	padding: 0.7rem 2rem;
}

.dropdown-menu a:hover {

	background-color: var(--primary-color);
}

.navbar-expand-lg .navbar-nav .dropdown-menu {
	width: 300px;
	transform: translateX(-50px);
	background: var(--bg-color);
	border: 1px solid var(--border-color);
	box-shadow: 0px 2px 10px 0px rgb(0 0 0 / 40%);
}



.navbar-expand-lg .navbar-nav .dropdown-menu:before {
	content: '';
	width: 1rem;
	height: 1rem;
	background: var(--bg-color);
	border: 1px solid var(--border-color);
	display: block;
	border-right: none;
	border-bottom: none;
	transform: translateX(-50%) rotateZ(45deg);
	position: absolute;
	top: -7px;
	left: 49%;
	z-index: 1001;
}





.navbar-nav .show>,
.navbar-nav .nav-link.show {
	color: #7C6A6A;
}

nav ul li {
	display: inline-block;
}

nav ul li a,
nav ul li a:after,
nav ul li a:before {
	transition: all .5s;
}

nav ul li a:hover {
	color: #fff;
}

.navbar-nav .nav-link:focus {
	color: #eee;
}


.dropdown-menu {
	min-width: 12rem;
	padding: 1rem 0;
}

.nav-fixed .navbar-expand-lg .navbar-nav .nav-link {
	color: var(--heading-color);
	opacity: 0.95;
}

.nav-fixed .navbar-brand {
	color: var(--heading-color);
}

.nav-fixed .phone a {
	color: #fff;
}

.nav-fixed .phone a span {
	opacity: 1;
	color: #fff;
}

.nav-fixed .navbar-expand-lg .navbar-nav li.nav-item.active .nav-link {
	color: var(--primary-color);
}

.nav-fixed .navbar-expand-lg .navbar-nav li.nav-item .nav-link:hover {
	color: var(--primary-color);
}

.nav-fixed .navbar-expand-lg .navbar-brand span.fa {
	color: var(--primary-color);
}

.nav-fixed .navbar-expand-lg .navbar-brand span.sub-logo {
	color: #272121;
}

.navbar .search-right {
	margin: 0 15px 0 10px;
}

.navbar .search-right a {
	background: rgb(221 221 221 / 42%);
	font-size: 1rem;
	line-height: 25px;
	width: 32px;
	height: 32px;
	line-height: 32px;
	border-radius: 32px;
	padding: 0;
	text-align: center;
	color: #fff;
	display: inline-block;
	border: none;
	margin-top: 8px;
}

.nav-fixed .search-right a {
	color: var(--font-color);
}

.navbar .search-right a:hover {
	background: var(--primary-color);
	color: #fff;
}

.navbar form.search-box {
	display: flex;
}

.navbar .search-right .popup form input[type="search"] {
	font-style: normal;
	font-weight: normal;
	font-size: 1rem;
	line-height: 20px;
	color: #555;
	border: none;
	height: 60px;
	background: #fff;
	padding: 0 20px;
	width: 100%;
	border-radius: 0;
	-webkit-border-top-left-radius: var(--border-radius);
	-webkit-border-bottom-left-radius: var(--border-radius);
	-moz-border-radius-topleft: var(--border-radius);
	-moz-border-radius-bottomleft: var(--border-radius);
	border-top-left-radius: var(--border-radius);
	border-bottom-left-radius: var(--border-radius);
}

.navbar .search-right .popup form button {
	border: none;
	cursor: pointer;
	font-size: 1rem;
	text-align: center;
	color: #fff;
	width: 60px;
	background: var(--primary-color);
	line-height: 35px;
	display: inline-block;
	transition: 0.5s ease-out;
	font-weight: 600;
	display: block;
	height: 60px;
	margin: 0 auto;
	border-radius: 0;
	-webkit-border-top-right-radius: var(--border-radius);
	-webkit-border-bottom-right-radius: var(--border-radius);
	-moz-border-radius-topright: var(--border-radius);
	-moz-border-radius-bottomright: var(--border-radius);
	border-top-right-radius: var(--border-radius);
	border-bottom-right-radius: var(--border-radius);
}

.navbar .search-right .popup form button:hover {
	background: var(--secondary-color);
	color: #fff;
	outline: none;
	border: none;
}

.navbar .search-right .popup form input:focus {
	outline: none;
	border: none;
}

.navbar .search-right .pop-overlay {
	position: fixed;
	top: 0px;
	left: 0;
	right: 0;
	transition: opacity 0ms;
	visibility: hidden;
	opacity: 0;
	z-index: 99;
	background: rgba(25, 23, 23, 0.81);
	box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.85);
	height: 100vh;
}

.navbar .search-right .pop-overlay:target {
	visibility: visible;
	opacity: 1;
}

.navbar .search-right .popup {
	margin: 0rem auto;
	padding: 40px 50px;
	max-width: 700px;
	border-radius: 3px;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}

.navbar .search-right .search-top {
	display: grid;
	grid-template-columns: auto 1fr 1fr;
	grid-gap: 30px;
	margin-top: 24px;
}

.navbar .search-right .search-top h4 {
	font-size: 1.2rem;
	color: #fff;
	margin-bottom: 16px;
}

.navbar .search-right .popup h3 {
	font-size: 6px;
	color: #fff;
	margin-bottom: 16px;
}

.navbar .search-right .search-top span.fa {
	padding-right: 10px;
}

.navbar .search-right .search-top li {
	display: block;
}

.navbar .search-right .search-top li a {
	font-size: 1rem;
	color: #fff;
	line-height: 28px;
}

.navbar .search-right .search-top li a:hover {
	color: #fff;
}

.navbar .search-right .close {
	position: absolute;
	top: 60px;
	right: 40px;
	transition: all 200ms;
	font-size: 40px;
	text-decoration: none;
	color: #fff;
	opacity: 1;
	background: none;
	font-weight: 200;
}

.navbar .search-right .close:hover {
	opacity: 0.8;
	background: none;
}

@media only screen and (max-width: 1440px) {
	.navbar-expand-lg .navbar-nav .nav-item {
		padding: 0 10px;
	}

	.navbar-expand-lg .nav_btn>li {
		padding: 0;
	}
}

@media only screen and (max-width: 1199px) {
	.navbar .navbar-brand img {
		max-width: 109px;
	}

	.navbar-expand-lg .btn-gradient {
		padding: 10px 20px;
		font-size: 1rem;
	}

	.navbar-expand-lg .navbar-nav.nav_btn>li {
		margin-left: 0px;
	}

	.navbar-expand-lg .navbar-nav.nav_btn a.btn {
		padding: 10px 20px;
	}

	.navbar-expand-lg .navbar-nav.nav_btn a {
		font-size: 1rem;
		padding: 0px;
	}
}

@media only screen and (max-width: 991px) {
	.navbar .navbar-brand img {
		max-width: 140px;
	}

	.navbar-toggler {
		border: 0 none;
		font-size: 24px;
	}

	.navbar .search-right {
		margin: 10px auto;
	}

	.navbar-nav {
		-webkit-animation-name: none;
		animation-name: none;
		float: left;
		text-align: center;
		width: 100%;
		background: var(--bg-color);
		padding: 20px;
		margin-top: 16px;
		border-radius: var(--border-radius);
		box-shadow: 0 6px 19px rgba(0, 0, 0, 0.05);
	}

	.navbar-nav:last-child {
		border: 1px solid var(--border-color);
	}

	.navbar-expand-lg .navbar-nav .nav-item {
		-webkit-animation-name: none;
		animation-name: none;
		padding: 0;
	}

	.navbar-expand-lg .navbar-nav.nav_btn>li {
		padding-bottom: 10px;
	}

	.navbar-nav .dropdown-menu {
		text-align: center;

	}

	.dropdown-menu a {
		background: #fff;
	}

	.navbar-expand-lg .navbar-nav .dropdown-menu {
		width: 100%;
		transform: translateX(0);
		background: #fff;
	}

	.navbar-nav .dropdown-menu .dropdown-menu {
		background-color: rgba(0, 0, 0, 0.3);
	}

	.navbar-expand-lg .navbar-nav .nav-item .nav-link.active::before {
		bottom: 0;
	}

	.navbar-expand-lg .navbar-nav .nav-link {
		display: inline-block;
		padding: 10px 0;
		text-align: center;
	}

	header {
		height: auto;
		padding: 17px 0;
	}

	.navbar {
		padding: 0;
	}



	header.nav-fixed {
		height: auto;
		padding: 0.2rem 0;
	}

	.navbar-expand-lg .navbar-nav .nav-link {
		display: block;
		color: var(--heading-color);
	}

	.navbar .search-right a {
		color: var(--heading-color);
	}

	.navbar-toggler-icon {
		background-image: none;
		padding: 0;
		width: 34px;
		height: 34px;
		display: inline-block;
		background: #272121;
		border-radius: 4px;
		text-align: center;
	}

	.navbar-toggler-icon.fa {
		font-size: 1.2rem;
		line-height: 1.2em;
		color: #fff;
		background: var(--primary-color);
		line-height: 34px;
	}

	.navbar-toggler {
		padding: 0rem 0rem !important;
	}
}

@media only screen and (max-width: 480px) {
	.navbar-brand img {
		max-width: 200px;
	}
}

@media only screen and (max-width: 991px) {
	.w3l-top-header {
		position: relative;
		height: 73px;
	}

	.navbar-expand-lg a.nav-link.donate.btn.btn-style {
		display: inline-block;
		padding: 0px 40px;
	}

	button.navbar-toggler .icon-close {
		display: block;
	}

	button.navbar-toggler .icon-expand {
		display: none;
	}

	button.navbar-toggler.collapsed .icon-close {
		display: none;
	}

	button.navbar-toggler.collapsed .icon-expand {
		display: block;
	}

	.cont-ser-position {
		position: absolute;
		right: 50px;
		top: 1rem;
	}
}

@media only screen and (max-width: 568px) {
	.cont-ser-position {
		top: 10px;
	}
}

header {
	position: relative;
}


header nav.navbar.border.bootsnav.navbar-fixed.no-background {
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

nav.navbar.bootsnav ul.nav>li>a {
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: 0.05em;
	padding: 33px 15px;
	text-transform: capitalize;
}

header nav.navbar.border.bootsnav.navbar-fixed.no-background ul li a {
	position: relative;
	z-index: 1;
	margin-left: 3px;
}



header nav.navbar.border.bootsnav.navbar-fixed.no-background .attr-nav ul li a {
	border: medium none;
}

header nav.navbar.border.bootsnav.navbar-fixed.no-background ul li a::after {
	background: #ffffff none repeat scroll 0 0;
	bottom: -2px;
	content: "";
	height: 3px;
	left: 0;
	position: absolute;
	width: 0;
	-webkit-transition: all 0.35s ease-in-out;
	-moz-transition: all 0.35s ease-in-out;
	-ms-transition: all 0.35s ease-in-out;
	-o-transition: all 0.35s ease-in-out;
	transition: all 0.35s ease-in-out;
}

header nav.navbar.border.bootsnav.navbar-fixed.no-background ul li a.active::after,
header nav.navbar.border.bootsnav.navbar-fixed.no-background ul li a:hover::after {
	width: 100%;
}

header nav.navbar.border.bootsnav.navbar-fixed.no-background .attr-nav ul li a.active::after,
header nav.navbar.border.bootsnav.navbar-fixed.no-background .attr-nav ul li a:hover::after {
	width: 0;
}

.attr-nav .social.right li {
	margin-left: 20px;
}

.attr-nav .social li a {
	font-size: 1rem;
}

nav.bootsnav.navbar-default.info-topbar .navbar-header {
	display: none;
}

nav.bootsnav.navbar-default.info-topbar ul li a {
	margin-right: 30px;
	padding: 35px 0;
}

nav.bootsnav.navbar-default.info-topbar.active-full ul li a {
	margin-right: 0;
	padding: 35px 20px;
}

.attr-nav>a.btn-theme.effect:hover,
.attr-nav>a.btn-theme.effect,
.attr-nav>a.btn-theme.effect:focus {
	background: var(--primary-color);
	none repeat scroll 0 0;
	border: 2px solid var(--primary-color);
	color: #ffffff !important;
}

nav.bootsnav.navbar-default.info-topbar.sticked ul li a {
	margin-right: 30px;
	padding: 35px 0;
}

.attr-nav.social li {
	display: inline-block;
	padding: 25px 0 !important;
	transition: all 0.35s ease-in-out;
	-webkit-transition: all 0.35s ease-in-out;
	-moz-transition: all 0.35s ease-in-out;
	-ms-transition: all 0.35s ease-in-out;
	-o-transition: all 0.35s ease-in-out;
}

.attr-nav.social li a {
	border: 1px solid #f4f4f4;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	color: var(--primary-color);
	display: inline-block;
	font-size: 1rem;
	height: 40px;
	line-height: 40px;
	margin-left: 10px;
	padding: 0 !important;
	text-align: center;
	width: 40px;
}

nav.navbar.bootsnav.sticked .attr-nav.social li {
	display: inline-block;
	padding: 20px 0 !important;
}

nav.navbar.bootsnav .widget.instagram ul li {
	box-sizing: border-box;
	float: left;
	padding: 0 10px 10px 0;
	width: 33.333%;
	margin: 0;
}

nav.navbar.bootsnav .widget.instagram ul li a {
	padding: 0;
}

nav.navbar.bootsnav .widget.instagram ul li img {
	min-height: 70px;
	width: 100%;
	margin: 0;
}

.bootsnav .side .widget.personal-info .icon {
	display: table-cell;
	vertical-align: middle;
}

.bootsnav .side .widget.personal-info .info {
	display: table-cell;
	padding-left: 15px;
	vertical-align: middle;
}

.bootsnav .side .widget.personal-info .info span {
	display: block;
	float: none;
	text-transform: uppercase;
}

.bootsnav .side .widget.personal-info .icon i {
	background: #f4f4f4 none repeat scroll 0 0;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	color: var(--primary-color);
	font-size: 1.2rem;
	height: 50px;
	line-height: 50px;
	width: 50px;
}

.bootsnav .side .widget.personal-info li {
	margin-bottom: 20px;
}

.navbar .side .widget li:last-child {
	margin-bottom: 0;
}

.bootsnav .side .widget.social li i {
	background: transparent;
}

.bootsnav .side .widget.social li a {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.bootsnav .side .widget.social li.facebook a {
	background: #3b5998 none repeat scroll 0 0;
}

.bootsnav .side .widget.social li.twitter a {
	background: #1da1f2 none repeat scroll 0 0;
}

.bootsnav .side .widget.social li.pinterest a {
	background: #bd081c none repeat scroll 0 0;
}

.bootsnav .side .widget.social li.g-plus a {
	background: #db4437 none repeat scroll 0 0;
}

.bootsnav .side .widget.social li.linkedin a {
	background: #0077b5 none repeat scroll 0 0;
}

.bootsnav .side .widget.social li.dribbble a {
	background: #ea4c89 none repeat scroll 0 0;
}

.utf-site-heading h2 {
	color: #232323;
	display: inline-block;
	font-size: 2rem;
	font-weight: 700;
	padding-bottom: 20px;
	position: relative;
	text-transform: uppercase;
}

.utf-site-heading.clean h2 {
	padding-bottom: 0;
}

.utf-site-heading.clean h2 span {
	color: var(--primary-color);
}

.utf-site-heading h2 span {
	color: var(--primary-color);
}

.utf-site-heading.barber h2 span {
	color: #bc9355;
}

.utf-site-heading p {
	margin: 0;
}

.utf-site-heading.clean h2::after,
.utf-site-heading.clean h2::before {
	display: none;
}

.utf-site-heading h2::before {
	background: var(--primary-color);
	bottom: 5px;
	content: "";
	height: 3px;
	left: 0px;
	position: absolute;
	width: 50px;
	border-radius: 4px;
}

.utf-site-heading.text-center h2::before {
	left: 0;
	right: 0;
	text-align: center;
	margin: 0 auto;
}

.utf-site-heading.text-center h2::after {
	left: 50%;
	margin-left: -40px;
}

.utf-site-heading h2 span {
	color: var(--primary-color);
}

.utf-site-heading {
	margin-bottom: 30px;
	overflow: hidden;
	margin-top: -5px;
}

.carousel-shadow .utf-site-heading {
	margin-bottom: 45px;
}

.carousel-shadow .utf-site-heading {
	margin-bottom: 35px;
}

/* ============================================================== 
  # Page Heading 
=================================================================== */
.position_r {
	position: relative;
}

.utf-page-margin-top {
	margin-top: 80px;
}

.utf-page-heading {
	padding: 100px 0;
}

.utf-page-heading h1 {
	font-size: 3.8rem;
	line-height: 4rem;
	font-weight: 800;
	text-transform: uppercase;
	text-align: center;
	color: var(--thirdly-color);
	margin-bottom: 0;
}

/* ============================================================== 
  # Bradcrumb 
=================================================================== */
.utf-contact-area {
	padding: 20px 0;
}

.utf-breadcrumb-items {
	text-align: center;
}

.utf-breadcrumb-items .breadcrumb {

	background: transparent;
	margin: 0 auto;
	text-align: center;
}

.utf-breadcrumb-items .breadcrumb li {
	font-family: "Poppins", sans-serif;
	font-weight: 500;
	text-transform: capitalize;
	color: var(--font-color);
}

.utf-breadcrumb-items .breadcrumb li a {
	color: var(--primary-color);
}

.breadcrumb>li+li::before {
	color: var(--font-color);
}


.utf-breadcrumb-items .breadcrumb li {
	font-family: "Poppins", sans-serif;
	font-weight: 500;
	text-transform: capitalize;
	color: var(--font-color);
}

.utf-breadcrumb-items .breadcrumb li a {
	color: var(--primary-color);
}

.breadcrumb>li+li::before {
	color: var(--font-color);
	content: "\f105";
	font-family: "Font Awesome 5 Free";
	font-weight: 600;
	padding: 0 5px;
}

.utf-breadcrumb-area .breadcrumb a,
.utf-breadcrumb-area .breadcrumb li {
	font-weight: 600;
	text-transform: uppercase;
}

.utf-breadcrumb-area .breadcrumb li.active {
	color: var(--primary-color);
}

/* ============================================================== 
  # Banner 
=================================================================== */
.utf-banner-area-block {

	width: 100%;
	
}

.banner_content,
.banner_bg {
	width: 100%;
	height: 100%;
}

.banner_content {
	position: relative;
}

.page_banner_bg {
	position: absolute;
	width: 100%;
height: 100%;

	background-position: center center;
	background-size: cover;
	z-index: -1;

	top: 0;
	left: 0;
}

.banner_bg {
	position: absolute;
	width: 100%;
	height: 100%;
	background-attachment: inherit;
	background-position: center center;
	background-size: cover;
	z-index: -1;
}

.banner_content {
	width: 100%;
	max-width: 1200px;
	position: absolute;
	position: relative;
	top: 250px;
	padding: 0 30px;
	margin: 0 auto;
}

.utf-banner-area-block.auto-height,
.utf-banner-area-block.auto-height div {
	width: 100%;
	height: auto;
}

.utf-banner-area-block .utf-box-cell {
	display: table-cell;
	position: absolute;

	vertical-align: middle;
	width: 100%;
}

.utf-banner-area-block {
	position: relative;
	overflow: hidden;
}

.utf-banner-area-block .content {
	overflow: hidden;
	position: relative;
	z-index: 9;
}



.utf-banner-area-block.text-normal h1 {
	font-size: 3.8rem;
	line-height: 4remx;
	font-weight: 800;
	margin-bottom: 20px;
	text-transform: capitalize;
}

.utf-banner-area-block.heading-only h2 {
	font-weight: 500;
	line-height: 1.3;
	margin: 0;
}

.utf-banner-area-block .carousel-control.left {
	left: -50px;
}

.utf-banner-area-block:hover .carousel-control.left {
	left: 0;
}

.utf-banner-area-block:hover .carousel-control.shadow.left {
	left: 20px;
}

.utf-banner-area-block .carousel-control.right {
	right: -50px;
}

.utf-banner-area-block:hover .carousel-control.right {
	right: 0;
}

.utf-banner-area-block:hover .carousel-control.shadow.right {
	right: 20px;
}

.utf-banner-area-block.content-shadow .content {
	padding: 50px;
	position: relative;
	z-index: 1;
}

.utf-banner-area-block.content-shadow .content::after {
	background: #ffffff none repeat scroll 0 0;
	content: "";
	height: 100%;
	left: 0;
	opacity: 0.9;
	position: absolute;
	top: 0;
	border-radius: 10px;
	border: 10px solid rgba(0, 0, 0, 0.08);
	width: 100%;
	z-index: -1;
}

.utf-banner-area-block.content-shadow h1 {
	font-size: 5rem;
	font-weight: 600;
	text-transform: uppercase;
	line-height: 1;
}

.utf-banner-area-block.content-shadow h2 {
	font-size: 3.8rem;
	font-weight: 600;
	text-transform: uppercase;
	margin: 0;
}

.utf-banner-area-block.content-shadow.text-theme h1 {
	color: var(--primary-color);
}

.utf-banner-area-block.content-shadow.text-theme h2 {
	color: var(--primary-color);
}

.utf-banner-area-block span {
	color: var(--primary-color);
}

.utf-banner-area-block.navbar-transparent .content {
	margin-top: 0px;
}

.utf-banner-area-block.solid-transparent .content {
	margin-top: -200px;
}

@media only screen and (max-width: 767px) {}

.utf-banner-area-block.content-shadow.text-normal h2 {
	font-size: 2.1rem;
	line-height: 1.3;
}

.utf-banner-area-block.typed-text h1 span {
	color: var(--primary-color);
}

.utf-banner-area-block.content-shadow.text-normal h1 {
	line-height: 3.8rem;
	margin-bottom: 20px;
	text-transform: capitalize;
}

.utf-banner-area-block.typed-text h1 {
	color: #ffffff;
	font-size: 3.8rem;
	line-height: 4rem;
	font-weight: 900;
	margin-bottom: 20px;
}

.utf-banner-area-block.typed-text h2 {
	color: #ffffff;
	font-weight: 600;
}

.utf-banner-area-block.typed-text span {
	color: var(--primary-color);
}

.utf-banner-area-block.typed-text a,
.utf-banner-area-block.large-heading a,
.utf-box-table a.btn {
	margin-top: 15px;
	margin-right: 10px;
	font-weight: 500;
}

.utf-banner-area-block.large-heading h1 {
	color: #ffffff;
	line-height: 3.8rem;
	font-weight: 900;
	line-height: 1.3;
	margin-bottom: 15px;
	text-transform: capitalize;
}

.utf-banner-area-block.large-heading h2 {
	color: #ffffff;
	font-weight: 600;
	text-transform: capitalize;
}

.utf-banner-area-block.medium-heading h1 {
	color: var(--primary-color);
	font-size: 5rem;
	font-weight: 900;
	line-height: 1;
	margin-bottom: 30px;
	text-transform: capitalize;
}

.utf-banner-area-block.medium-heading h2 {
	color: #ffffff;
	font-weight: 600;
	font-size: 40px;
	text-transform: capitalize;
}

.utf-banner-area-block.medium-heading a {
	margin-top: 25px;
}

.utf-banner-area-block.text-light p {
	padding: 0 10%;
}

.utf-banner-area-block.auto-height .utf-box-cell {
	padding: 200px 0;
}

.utf-banner-area-block.auto-height h1 {
	font-size: 3.4rem;
	font-weight: 800;
	line-height: 1;
	margin-bottom: 25px;
	text-transform: capitalize;
}

.utf-banner-area-block.auto-height.content-shadow h1 {
	margin-bottom: 20px;
}

.utf-banner-area-block.auto-height h2 {
	font-weight: 600;
	line-height: 1.5;
	margin: 0;
	font-size: 22px;
	text-transform: capitalize;
	color: #3a3a3a;
}

.utf-banner-area-block.auto-height.inc-button h1 {
	margin-bottom: 25px;
	font-weight: 600;
}

.utf-banner-area-block.auto-height.inc-button h2,
.utf-banner-area-block.auto-height.inc-button h3,
.utf-box-cell .content h3 {
	margin-bottom: 20px;
	font-weight: normal;
}

.utf-box-cell .content h3 {
	font-size: 1.2rem;
}

.utf-banner-area-block.auto-height.heading-uppercase h1 {
	text-transform: uppercase;
}

.utf-banner-area-block .item h1:first-child,
.utf-banner-area-block .item h2:first-child,
.utf-banner-area-block .item h3:first-child,
.utf-banner-area-block .item h4:first-child,
.utf-banner-area-block .item h5:first-child,
.utf-banner-area-block .item h6:first-child {
	animation-delay: .5s;
}

.utf-banner-area-block .item h1:nth-child(2),
.utf-banner-area-block .item h2:nth-child(2),
.utf-banner-area-block .item h3:nth-child(2),
.utf-banner-area-block .item h4:nth-child(2),
.utf-banner-area-block .item h5:nth-child(2),
.utf-banner-area-block .item h6:nth-child(2) {
	animation-delay: .7s;
}

.carousel-caption h1:nth-child(3),
.carousel-caption h2:nth-child(3),
.carousel-caption h3:nth-child(3),
.carousel-caption h4:nth-child(3),
.carousel-caption h5:nth-child(3),
.carousel-caption h6:nth-child(3) {
	animation-delay: .9s;
}

.utf-banner-area-block .item p {
	animation-delay: .5s;
}

.utf-banner-area-block .item a,
.utf-banner-area-block .item button {
	animation-delay: .7s;
}

.carousel-fade .carousel-inner .item {
	-webkit-transition-property: opacity;
	transition-property: opacity;
}

.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
	opacity: 0;
}

.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
	opacity: 1;
}

.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
	left: 0;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
}

.carousel-fade .carousel-control {
	z-index: 2;
}

@-webkit-keyframes zoom {
	from {
		-webkit-transform: scale(1, 1);
	}

	to {
		-webkit-transform: scale(1.2, 1.2);
	}
}

@-moz-keyframes zoom {
	from {
		-moz-transform: scale(1, 1);
	}

	to {
		-moz-transform: scale(1.2, 1.2);
	}
}

@-o-keyframes zoom {
	from {
		-o-transform: scale(1, 1);
	}

	to {
		-o-transform: scale(1.2, 1.2);
	}
}

@keyframes zoom {
	from {
		transform: scale(1, 1);
	}

	to {
		transform: scale(1.2, 1.2);
	}
}

.carousel-inner .item>.slider-thumb {
	-webkit-animation: zoom 20s;
	animation: zoom 20s;
}

.utf-banner-area-block .carousel-zoom .slider-thumb {
	height: 100%;
	position: absolute;
	width: 100%;
}

#particles-js,
#ripple {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

/* ============================================================== 
  # Portfolio 
=================================================================== */
.utf-portfolio-area-item.default-padding {
	padding-bottom: 65px;
}

.mix-item-menu button {
	background: transparent none repeat scroll 0 0;
	border: medium none;
	font-family: "Poppins", sans-serif;
	font-weight: 600;
	padding: 8px 15px;
	text-transform: uppercase;
	position: relative;
	z-index: 1;
	border-radius: 6px;
	margin: 0 3px;
	box-shadow: 0 0px 10px rgba(0, 0, 0, 0.2);
}

.mix-item-menu.dots button {
	background: #ffffff;
	border: medium none;
	color: #666666;
	font-family: "Poppins", sans-serif;
	font-weight: 600;
	padding: 5px 18px;
	position: relative;
	text-transform: uppercase;
	z-index: 1;
	border-radius: 4px;
	font-size: 1rem;
	margin: 0 3px;
	box-shadow: 0 0px 10px rgba(0, 0, 0, 0.2)
}

.mix-item-menu.dots button.active,
.mix-item-menu.dots button:hover {
	background: var(--primary-color);
	color: #ffffff;
}

.mix-item-menu {
	margin-bottom: 20px;
}

.mix-item-menu.dots button.active::after {
	background: var(--primary-color);
	none repeat scroll 0 0;
}

.mix-item-menu.dots button:last-child::after {
	display: none;
}

.mix-item-menu.center-circle button {
	background: transparent none repeat scroll 0 0;
	border: medium none;
	box-shadow: inherit;
	color: #666666;
	font-family: "Poppins", sans-serif;
	font-weight: 600;
	padding: 10px 20px;
	position: relative;
	text-transform: uppercase;
	z-index: 1;
}

.mix-item-menu.center-circle.text-left button {
	padding-left: 0;
}

.mix-item-menu.center-circle button.active::after {
	background: #f4f4f4 none repeat scroll 0 0;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	content: "";
	height: 20px;
	left: 50%;
	margin-left: -20px;
	margin-top: -10px;
	position: absolute;
	top: 50%;
	width: 20px;
	z-index: -1;
}

.mix-item-menu.center-circle.text-left button.active,
.mix-item-menu.center-circle.text-left button:hover {
	color: var(--primary-color);
}

.mix-item-menu {
	text-align: center;
}

.utf-portfolio-area-item .item-info {
	padding-top: 15px;
}

.utf-portfolio-area-item .item-info h4 {
	margin-bottom: 5px;
	text-transform: capitalize;
	color: #232323;
	font-weight: 600;
}

.utf-portfolio-area-item .text-light .item-info h4 {
	color: #ffffff;
}

.utf-portfolio-area-item .item-info h4 a {
	color: #232323;
}

.utf-portfolio-area-item .item-info h4 a:hover {
	color: var(--primary-color);
}

.utf-portfolio-area-item .item-info .tags a {
	color: #999999;
	display: inline-block;
	padding-right: 5px;
	position: relative;
	z-index: 1;
}

.utf-portfolio-area-item .item-info .tags a:hover {
	color: var(--primary-color);
}

.utf-portfolio-area-item .item-info .tags a::after {
	bottom: 0;
	content: ",";
	position: absolute;
	right: 0;
}

.utf-portfolio-area-item .item-info .tags a:last-child::after {
	display: none;
}

.utf-portfolio-area-item.info-shadow .item-info {
	background: #ffffff;
	text-align: left;
	border-radius: 0 0 6px 6px;
	-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
	-webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
	-o-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
	padding: 25px 30px;
}

.mix-item-menu.category-count button {
	background: #f4f4f4 none repeat scroll 0 0;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
	margin-bottom: 8px !important;
	margin-left: 3px !important;
	margin-right: 3px !important;
	padding: 8px 20px;
	box-shadow: 0 0px 10px rgba(0, 0, 0, 0.2);
}

.mix-item-menu button.active,
.mix-item-menu button:hover {
	background: var(--primary-color);
	color: #ffffff;
}

.mix-item-menu.category-count {
	margin-bottom: 30px;
}

.mix-item-menu.text-left button {
	margin-right: 5px;
}

.mix-item-menu.active-border.text-center button.active::after {
	left: 50%;
	margin-left: -15px;
}

.utf-portfolio-area-item .pf-item {
	float: left;
	padding: 15px;
	width: 33.333%;
}

.utf-portfolio-area-item .pf-item .effect-slide-up {
	border-radius: 6px;
	-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
	-webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
	-o-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}

.utf-portfolio-area-item .col-2 .pf-item {
	width: 50%;
}

.utf-portfolio-area-item .col-4 .pf-item {
	width: 25%;
}

.utf-portfolio-area-item .less-padding .pf-item {
	padding: 0;
}

.utf-portfolio-area-item .pf-item.width {
	width: 66.6667%;
}

.utf-portfolio-area-item .col-2 .pf-item.width {
	width: 100%;
}

.load-button {
	margin-top: 30px;
	overflow: hidden;
	padding-bottom: 15px;
}

.load-button i {
	margin-left: 5px;
}

.container-full .pf-item img {
	width: 100%;
}

.overlay-effect {
	position: relative;
	overflow: hidden;
	z-index: 1;
}

.overlay-effect::after {
	background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%) repeat scroll 0 0;
	bottom: 0;
	content: "";
	height: 50%;
	left: 0;
	position: absolute;
	width: 100%;
}

.overlay-effect * {
	-webkit-transition: all 0.6s ease;
	transition: all 0.6s ease;
}

.overlay-effect img {
	width: 100%;
	-webkit-transition: opacity 0.35s;
	transition: opacity 0.35s;
}

.overlay-effect .item-info {
	bottom: 0;
	height: auto;
	left: 0;
	padding: 20px;
	position: absolute;
	top: auto;
	width: 100%;
	z-index: 1;
}

.overlay-effect h4 {
	margin-bottom: 5px;
	text-transform: uppercase;
}

.overlay-effect .item-info span {
	color: #ffffff;
	display: inline-block;
	font-family: "Poppins", sans-serif;
	padding-right: 5px;
	position: relative;
	text-transform: uppercase;
	z-index: 1;
}

.overlay-effect .item-info span::after {
	bottom: 0;
	content: ",";
	position: absolute;
	right: 0;
}

.overlay-effect .item-info span:last-child::after {
	display: none;
}

.overlay-effect .icons {
	position: absolute;
	bottom: 20px;
	left: 20px;
	opacity: 0;
	transform: translateY(-150%);
}

.utf-portfolio-area-item .overlay-effect .icons a {
	background: #ffffff none repeat scroll 0 0;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	color: var(--primary-color);
	display: inline-block;
	height: 40px;
	line-height: 40px;
	text-align: center;
	width: 40px;
}

.overlay-effect:hover .item-info h4,
.overlay-effect.hover .item-info h4,
.overlay-effect.hover .item-info span,
.overlay-effect:hover .item-info span {
	-webkit-transform: translateY(-150%);
	transform: translateY(-150%);
	opacity: 0;
}

.overlay-effect:hover .item-info .icons,
.overlay-effect.hover .item-info .icons {
	opacity: 1;
	-webkit-transform: translateY(0%);
	transform: translateY(0%);
}

.utf-portfolio-area-item .pf-item .item-effect {
	overflow: hidden;
	position: relative;
	z-index: 1;
	border-radius: 6px;
	-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
	-o-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

.utf-portfolio-area-item .pf-item .item-effect::after {
	background: #232323 none repeat scroll 0 0;
	content: "";
	height: 100%;
	left: 0;
	opacity: 0;
	position: absolute;
	top: 0;
	width: 100%;
	transition: all 0.35s ease-in-out;
	-webkit-transition: all 0.35s ease-in-out;
	-moz-transition: all 0.35s ease-in-out;
	-ms-transition: all 0.35s ease-in-out;
	-o-transition: all 0.35s ease-in-out;
}

.utf-portfolio-area-item .pf-item:hover .item-effect::after {
	opacity: 0.6;
}

.item-effect {
	position: relative;
	overflow: hidden;
}

.item-effect img {
	position: relative;
	display: block;
	height: 100%;
	width: 100%;
	opacity: 0.8;
}

.item-effect img {
	max-width: none;
	width: -webkit-calc(100% + 0px) !important;
	width: calc(100% + 0px) !important;
	opacity: 1;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(0px, 0, 0);
	transform: translate3d(0px, 0, 0);
}

.item-effect .bottom-info {
	height: auto;
	left: 0;
	margin-top: -25px;
	position: absolute;
	top: 50%;
	width: 100%;
	z-index: 1;
}

.utf-portfolio-area-item.title-translate .item-effect .bottom-info {
	background: transparent;
}

.item-effect a {
	-webkit-transform: translate3d(0, 0px, 0);
	transform: translate3d(0, 0px, 0);
	text-transform: uppercase;
	font-weight: 600;
}

.item-effect a {
	background: var(--primary-color);
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	color: #ffffff;
	display: inline-block;
	height: 40px;
	line-height: 42px;
	margin-right: 5px;
	opacity: 0;
	text-align: center;
	transition: opacity 0.2s ease 0s, transform 0.35s ease 0s;
	-webkit-transition: opacity 0.2s ease 0s, transform 0.35s ease 0s;
	-moz-transition: opacity 0.2s ease 0s, transform 0.35s ease 0s;
	-ms-transition: opacity 0.2s ease 0s, transform 0.35s ease 0s;
	-o-transition: opacity 0.2s ease 0s, transform 0.35s ease 0s;
	width: 40px;
	font-size: 1.2rem;
}

.item-effect:hover a {
	-webkit-transition-delay: 0.05s;
	transition-delay: 0.05s;
	-webkit-transition-duration: 0.35s;
	transition-duration: 0.35s;
}

.effect-up .pf-item:hover a {
	opacity: 1;
}

.effect-up .pf-item:hover img {
	opacity: 1;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	-webkit-transform: scale(1.2);
	-moz-transform: scale(1.2);
	-ms-transform: scale(1.2);
	-o-transform: scale(1.2);
	transform: scale(1.2);
	-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=30)";
	filter: alpha(opacity=30);
	-webkit-transition: all .5s ease-out;
	-o-transition: all .5s ease-out;
	transition: all .5s ease-out;
}

.effect-up.clean-text .item-effect .bottom-info {
	bottom: 0;
	height: auto;
	left: 0;
	padding: 20px;
	position: absolute;
	top: auto;
	width: 100%;
	z-index: 1;
}

.effect-up.clean-text .item-effect h2,
.effect-up.clean-text .item-effect h3,
.effect-up.clean-text .item-effect h4,
.effect-up.clean-text .item-effect a {
	-webkit-transform: translate3d(0, 110px, 0);
	transform: translate3d(0, 110px, 0);
	text-transform: capitalize;
	font-weight: 500;
}

.effect-up.clean-text .item-effect h2,
.effect-up.clean-text .item-effect h3,
.effect-up.clean-text .item-effect h4 {
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	margin-bottom: 15px;
}

.effect-up.clean-text .item-effect:hover h2,
.effect-up.clean-text .item-effect:hover h3,
.effect-up.clean-text .item-effect:hover h4 {
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

.effect-up.clean-text .item-effect:hover h2,
.effect-up.clean-text .item-effect:hover h3,
.effect-up.clean-text .item-effect:hover h4,
.effect-up.clean-text .item-effect:hover a {
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

.effect-up.clean-text .item-effect a {
	font-size: 1rem;
	height: 40px;
	line-height: 40px;
	width: 40px;
}

/* Effect(3) left slide */
.effect-left-swipe {
	position: relative;
	overflow: hidden;
	background: #232323;
	border-radius: 6px;
	box-shadow: 0 2px 1rem rgba(0, 0, 0, 0.2);
}

.effect-left-swipe * {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all 0.35s ease-in-out;
	-moz-transition: all 0.35s ease-in-out;
	-ms-transition: all 0.35s ease-in-out;
	-o-transition: all 0.35s ease-in-out;
	transition: all 0.35s ease-in-out;
}

.effect-left-swipe img {
	width: 100%;
	position: relative;
	-webkit-transform: scale(1);
	transform: scale(1);
}

.effect-left-swipe:after {
	background: var(--primary-color);
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: -100%;
	content: '';
	-webkit-transition: all 0.35s ease-in-out;
	-moz-transition: all 0.35s ease-in-out;
	-ms-transition: all 0.35s ease-in-out;
	-o-transition: all 0.35s ease-in-out;
	transition: all 0.35s ease-in-out;
	opacity: .9;
}

.effect-left-swipe .icons {
	height: auto;
	bottom: 25px;
	left: 30px;
	position: absolute;
	text-align: left;
	z-index: 1;
	-webkit-transition-delay: 0.2s;
	transition-delay: 0.2s;
}

.effect-left-swipe .icons .cat span {
	color: #ffffff;
	display: inline-block;
	font-family: "Poppins", sans-serif;
	position: relative;
	padding-right: 5px;
}

.effect-left-swipe .icons .cat span::after {
	bottom: 0;
	content: ",";
	position: absolute;
	right: 0;
}

.effect-left-swipe .icons .cat span:last-child::after {
	display: none;
}

.effect-left-swipe .cat,
.effect-left-swipe h4 {
	display: block;
	opacity: 0;
	-webkit-transform: translateX(10px);
	transform: translateX(10px);
}

.swipe-inline .effect-left-swipe .icons {
	bottom: 20px;
	left: 30px;
}

.swipe-inline .effect-left-swipe .cat {
	display: inline-block;
	margin-right: 3px;
	width: auto;
}

.effect-left-swipe h4 {
	font-weight: 500;
	margin-bottom: 5px;
	text-transform: capitalize;
}

.effect-left-swipe .cat {
	display: inline-block;
}

.effect-left-swipe:hover img,
.effect-left-swipe.hover img {
	-webkit-transform: scale(1.2);
	transform: scale(1.2);
}

.effect-left-swipe:hover:after,
.effect-left-swipe.hover:after {
	left: 0;
}

.effect-left-swipe:hover .icons .cat,
.effect-left-swipe.hover .icons .cat,
.effect-left-swipe:hover .icons h4,
.effect-left-swipe.hover .icons h4 {
	opacity: 1;
	-webkit-transform: translateX(0px);
	transform: translateX(0px);
}

.effect-left-swipe:hover h4,
.effect-left-swipe.hover h4,
.effect-left-swipe:hover .cat,
.effect-left-swipe.hover .cat {
	-webkit-transition-delay: 0.2s;
	transition-delay: 0.2s;
}

.effect-left-swipe>a {
	color: var(--primary-color);
	font-size: 1.2rem;
	opacity: 0;
	text-align: center;
	position: absolute;
	right: 0;
	top: 30px;
	background: #ffffff;
	width: 36px;
	height: 36px;
	line-height: 38px;
	border-radius: 4px;
	transition: all 0.35s ease-in-out;
	-webkit-transition: all 0.35s ease-in-out;
	-moz-transition: all 0.35s ease-in-out;
	-ms-transition: all 0.35s ease-in-out;
	-o-transition: all 0.35s ease-in-out;
	z-index: 1;
}

.effect-left-swipe:hover>a,
.effect-left-swipe.hover>a {
	opacity: 1;
	right: 30px;
}

/* Effect(4) slide up */
.effect-slide-up {
	position: relative;
	overflow: hidden;
	background-color: var(--primary-color);
}

.effect-slide-up * {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all 0.35s ease-in-out;
	-moz-transition: all 0.35s ease-in-out;
	-ms-transition: all 0.35s ease-in-out;
	-o-transition: all 0.35s ease-in-out;
	transition: all 0.35s ease-in-out;
}

.effect-slide-up h4 {
	font-weight: 500;
	left: 30px;
	margin: 0;
	opacity: 0;
	position: absolute;
	text-transform: capitalize;
	bottom: 55px;
	-webkit-transition-delay: 0.15s;
	transition-delay: 0.15s;
	-webkit-transform: translateY(10px);
	transform: translateY(10px);
	z-index: 2;
}

.effect-slide-up .category {
	color: #ffffff;
	font-family: "Poppins", sans-serif;
	left: 30px;
	margin: 0;
	opacity: 0;
	position: absolute;
	text-transform: capitalize;
	bottom: 25px;
	-webkit-transition-delay: 0.15s;
	transition-delay: 0.15s;
	-webkit-transform: translateY(10px);
	transform: translateY(10px);
	z-index: 2;
}

.item-middle .effect-slide-up a {
	text-align: center;
	display: block;
	height: 100%;
	width: 100%;
}

.item-middle .effect-slide-up h4 {
	bottom: auto;
	left: 0;
	margin-top: -25px;
	text-align: center;
	top: 50%;
	width: 100%;
}

.item-middle .effect-slide-up .category {
	bottom: auto;
	left: 0;
	margin-top: 3px;
	text-align: center;
	top: 50%;
	width: 100%;
}

.effect-slide-up .category span {
	display: inline-block;
	padding-right: 5px;
	position: relative;
	z-index: 1;
}

.effect-slide-up .category span::after {
	bottom: 0;
	content: ",";
	position: absolute;
	right: 0;
}

.effect-slide-up .category span:last-child::after {
	display: none;
}

.effect-slide-up:hover img,
.effect-slide-up.hover img {
	opacity: 0.15;
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	-webkit-transform: scale(1.2);
	-moz-transform: scale(1.2);
	-ms-transform: scale(1.2);
	-o-transform: scale(1.2);
	transform: scale(1.2);
	-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=30)";
	filter: alpha(opacity=30);
	-webkit-transition: all .5s ease-out;
	-o-transition: all .5s ease-out;
	transition: all .5s ease-out;
}

.effect-slide-up:hover h4,
.effect-slide-up.hover h4,
.effect-slide-up:hover .category,
.effect-slide-up.hover .category {
	-webkit-transform: translateY(0);
	transform: translateY(0);
	opacity: 1;
}

.effect-slide-up:hover:before,
.effect-slide-up.hover:before {
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
	-webkit-transform: skew(-45deg) translateX(50%);
	transform: skew(-45deg) translateX(50%);
}

.effect-slide-up:hover:after,
.effect-slide-up.hover:after {
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
	-webkit-transform: skew(-45deg) translateX(75%);
	transform: skew(-45deg) translateX(75%);
}

/* ============================================================== 
  # Portfolio Details 
=================================================================== */

.portfolio-details-area .pf-item {
	padding: 0;
	width: auto;
	overflow: hidden;
	-moz-box-shadow: -1px 3px 10px 0 rgba(0, 0, 0, 0.06);
	-webkit-box-shadow: -1px 3px 10px 0 rgba(0, 0, 0, 0.06);
	-o-box-shadow: -1px 3px 10px 0 rgba(0, 0, 0, 0.06);
	box-shadow: -1px 3px 10px 0 rgba(0, 0, 0, 0.06);
}

.portfolio-details-area h2 {
	font-weight: 700;
}

.portfolio-details-area h4 {
	line-height: 1.4;
	margin-bottom: 25px;
}

.portfolio-details-area .right-info {
	padding-left: 25px;
}

.portfolio-details-area .left-info a {
	display: block;
	margin-bottom: 30px;
}

.portfolio-details-area .left-info a img {
	border-radius: 6px;
	box-shadow: 0 7px 20px rgba(0, 0, 0, 0.2);
}

.portfolio-details-area .left-info a:last-child {
	margin: 0;
}

.portfolio-details-area .projects-info li {
	border-bottom: 1px solid #e7e7e7;
	display: block;
	font-family: "Poppins", sans-serif;
	font-size: 1rem;
	font-weight: 600;
	margin-bottom: 7px;
	padding-bottom: 7px;
	text-align: left;
	text-transform: capitalize;
}

.portfolio-details-area .projects-info li span {
	color: #868686;
	display: inline-block;
	font-size: 1rem;
	font-weight: 400;
	margin-left: 6px;
	text-transform: capitalize;
}

.portfolio-details-area .projects-info li i {
	color: #666666;
	margin-right: 8px;
}

.portfolio-details-area .projects-info {
	margin: 25px 0;
}

.portfolio-details-area .projects-info li:last-child {
	border: medium none;
	margin: 0;
	padding: 0;
}

.portfolio-details-area .share-projects h4,
.portfolio-details-area .share-projects ul {
	float: left;
}

.portfolio-details-area .share-projects ul li {
	display: inline-block;
}

.portfolio-details-area .share-projects ul li a {
	background: #232323 none repeat scroll 0 0;
	border: medium none;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	color: #ffffff;
	display: inline-block;
	font-size: 1rem;
	height: 40px;
	line-height: 42px;
	margin-right: 5px;
	text-align: center;
	width: 40px;
}

.portfolio-details-area .share-projects ul li.facebook a {
	background: #3b5998 none repeat scroll 0 0;
}

.portfolio-details-area .share-projects ul li.twitter a {
	background: #1da1f2 none repeat scroll 0 0;
}

.portfolio-details-area .share-projects ul li.pinterest a {
	background: #bd081c none repeat scroll 0 0;
}

.portfolio-details-area .share-projects ul li.g-plus a {
	background: #db4437 none repeat scroll 0 0;
}

.portfolio-details-area .share-projects ul li.linkedin a {
	background: #0077b5 none repeat scroll 0 0;
}

.portfolio-details-area .share-projects ul li.dribbble a {
	background: #ea4c89 none repeat scroll 0 0;
}

.portfolio-details-area .share-projects h4 {
	margin: 0;
}

.portfolio-details-area .share-projects {
	overflow: hidden;
}

.portfolio-details-area .utf-site-heading {
	margin-bottom: 30px;
}

.portfolio-details-area .related-projects .pf-item .item-info h4 {
	font-weight: 500;
	margin: 0 0 5px;
	text-transform: capitalize;
}

.portfolio-details-area .related-projects .pf-item .item-info h4 a {
	color: #232323;
}

.portfolio-details-area .related-projects .pf-item .item-info h4 a:hover,
.portfolio-details-area .related-projects .pf-item .item-info a:hover {
	color: var(--primary-color);
}

.portfolio-details-area .related-projects .pf-item .item-info a {
	color: #999999;
	display: inline-block;
	padding-right: 5px;
	position: relative;
	z-index: 1;
}

.portfolio-details-area .related-projects .pf-item .item-info a::after {
	bottom: 0;
	content: ",";
	position: absolute;
	right: 0;
}

.portfolio-details-area .related-projects .pf-item .item-info a:last-child::after {
	display: none;
}

.portfolio-details-area .related-projects .pf-item .item-info {
	padding: 20px 30px;
	border: 2px solid rgba(0, 0, 0, 0.1);
	border-radius: 0 0 6px 6px;
	border-top: 0;
}

.portfolio-details-area .related-projects .owl-dots .owl-dot span {
	background: #ffffff none repeat scroll 0 0;
	border: 6px solid #999999;
	height: 32px;
	width: 32px;
	margin: 5px;
	border-radius: 40px;
	-webkit-transition: all 0.35s ease-in-out;
	-moz-transition: all 0.35s ease-in-out;
	-ms-transition: all 0.35s ease-in-out;
	-o-transition: all 0.35s ease-in-out;
	transition: all 0.35s ease-in-out;

}

.portfolio-details-area .related-projects .owl-dots .owl-dot.active span,
.portfolio-details-area .related-projects .owl-dots .owl-dot:hover span {
	border-color: var(--primary-color);
}

/* ============================================================== 
  # Blog 
=================================================================== */

.utf-blog-area .utf-blog-items .equal-height,
.utf-blog-area .utf-blog-items .utf-single-item {
	margin-bottom: 30px;
}

.utf-blog-area .item .thumb {
	position: relative;
	z-index: 1;
	overflow: hidden;
	border-radius: 6px;
	box-shadow: 0 7px 20px rgba(0, 0, 0, 0.2);
}

.utf-blog-area .item .info .date {
	background: var(--primary-color);
	display: inline-block;
	margin-bottom: 15px;
	text-align: left;
	width: auto;
	border-radius: 4px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.utf-blog-area .item .info .date h4 {
	color: #ffffff;
	font-size: 1rem;
	font-weight: 500;
	margin: 0;
	padding: 6px 15px;
	text-transform: capitalize;
}

.utf-blog-area.single-blog .item .info .date h4 {
	padding: 15px 40px;
}

.utf-blog-area .info {
	background: #ffffff none repeat scroll 0 0;
	padding: 1rem;
}

.utf-blog-area .info h4 {
	font-size: 1.1rem;
	line-height: 1.4rem;
	font-weight: 500;
	text-transform: capitalize;
	color: var(--primary-color);

}

.utf-blog-area .info h4 a:hover {
	color: var(--primary-color);
}

.utf-blog-area .info .meta li {
	color: #999999;
	display: inline-block;
	font-family: "Poppins", sans-serif;
	margin-right: 10px;
}

.utf-blog-area .info .meta li i {
	margin-right: 5px;
	font-weight: 500;
	font-size: 1rem;
	margin-top: -4px;
	vertical-align: middle;
	color: var(--primary-color);
}

.utf-blog-area .info .meta li a {
	color: #999999;
	text-transform: capitalize;
}

.utf-blog-area .info .meta {
	margin-bottom: 15px;
}

.utf-blog-area .info .meta li a:hover {
	color: var(--primary-color);
}

.utf-blog-area .info>a {
	color: var(--primary-color);
	font-weight: 400;
	text-transform: capitalize;
}

.utf-blog-area .info>a i {
	vertical-align: middle;
	-webkit-transition: all 0.35s ease-in-out;
	-moz-transition: all 0.35s ease-in-out;
	-ms-transition: all 0.35s ease-in-out;
	-o-transition: all 0.35s ease-in-out;
	transition: all 0.35s ease-in-out;
}

.utf-blog-area .info>a:hover i {
	padding-left: 6px;
	-webkit-transition: all 0.35s ease-in-out;
	-moz-transition: all 0.35s ease-in-out;
	-ms-transition: all 0.35s ease-in-out;
	-o-transition: all 0.35s ease-in-out;
	transition: all 0.35s ease-in-out;
}

.utf-blog-area .info>a.btn-dark {
	color: #ffffff;
}

.utf-blog-area .info>a:hover {
	color: #232323;
}

.pagi-area nav {
	text-align: center;
}

.pagi-area .pagination {
	margin: 0;
	text-align: center;
}
.pagi-area .pagination li span {
	border: 1px solid #7a7878;
	color: #575757;
	font-weight: 500;
	padding: 10px 18px;
	margin-top: 5px;
}
.pagi-area .pagination li a {
	border: 1px solid var(--primary-color);
	color:var(--primary-color);
	font-weight: 500;
	padding: 10px 18px;
	margin-top: 5px;
}

.pagi-area .pagination li a:hover {
	color: var(--primary-color);
}

.pagi-area .pagination li.active a {
	background: var(--primary-color);
	none repeat scroll 0 0;
	border: 1px solid transparent;
	color: #ffffff;
}

.pagi-area {
	margin-top: 20px;
}

.utf-blog-area.full-blog .info>a {
	margin-top: 5px;
}

.utf-blog-area .item blockquote {
	border-left: 5px solid var(--primary-color);
	color: #414141;
	font-size: 1rem;
	font-style: italic;
	position: relative;
	z-index: 1;
	background: #eaeaea;
	border-radius: 6px;
	padding: 15px 20px;
	font-weight: 500;
}

.utf-blog-area.full-blog .utf-blog-items .equal-height {
	margin-bottom: 30px;
}

.utf-blog-area .item blockquote p {
	margin: 0;
}

.author-bio {
	border: 1px solid rgba(255, 255, 255, 0.8);
	-moz-box-shadow: -1px 3px 10px 0 rgba(0, 0, 0, 0.06);
	-webkit-box-shadow: -1px 3px 10px 0 rgba(0, 0, 0, 0.06);
	-o-box-shadow: -1px 3px 10px 0 rgba(0, 0, 0, 0.06);
	box-shadow: -1px 3px 10px 0 rgba(0, 0, 0, 0.06);
	display: block;
	margin-top: 30px;
	padding: 30px;
	width: 100%;
}

.post-tags {
	margin-top: 35px;
}

.author-bio .avatar {
	display: table-cell;
	vertical-align: top;
	width: 200px;
}

.author-bio .content {
	display: table-cell;
	padding: 0 0 0 30px;
	vertical-align: middle;
}

.author-bio .content p {
	font-style: italic;
	margin: 0;
	padding-left: 20px;
	position: relative;
	z-index: 1;
}

.author-bio .content p::after {
	content: ",,";
	font-family: "Times New Roman";
	font-size: 3.1rem;
	left: -5px;
	letter-spacing: -5px;
	opacity: 0.5;
	position: absolute;
	top: 18px;
	transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-o-transform: rotate(180deg);
}

.author-bio .content h4 {
	font-weight: 500;
	margin-bottom: 0;
	margin-top: 15px;
	padding-left: 20px;
	text-transform: capitalize;
}

.utf-blog-area.single-blog .post-tags span {
	font-family: "Poppins", sans-serif;
	font-size: 1rem;
	font-weight: 600;
	margin-right: 5px;
	text-transform: capitalize;
}

.utf-blog-area.single-blog .post-tags a {
	background: #f4f4f4 none repeat scroll 0 0;
	border: 1px solid transparent;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	color: #232323;
	display: inline-block;
	font-size: 1rem;
	font-weight: 500;
	margin-bottom: 10px;
	margin-right: 5px;
	padding: 3px 15px;
	text-transform: capitalize;
	border: 1px solid #e7e7e7;
}

.utf-blog-area.single-blog .post-tags a:hover {
	background-color: var(--primary-color);
	color: #ffffff;
	border: 1px solid transparent;
}

.utf-blog-area.single-blog.color-yellow .post-tags a:hover {
	color: #ff9800;
}

.responsive-video {
	height: 0;
	padding-bottom: 56.25%;
	padding-top: 25px;
	position: relative;
}

.responsive-video iframe {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

.utf-blog-area.single-blog .info>h2 {
	font-weight: 600;
}

.utf-blog-area.single-blog .utf-blog-items .equal-height {
	margin: 0;
}

.utf-blog-area.single-blog .form-group.submit {
	margin-bottom: 0;
}

.utf-blog-area.single-blog .post-pagi-area {
	border-bottom: 1px solid #e7e7e7;
	margin: 30px 0 40px;
	overflow: hidden;
	padding: 0 0 15px;
}

.utf-blog-area.single-blog .post-pagi-area a {
	display: inline-block;
	font-weight: 600;
	text-transform: uppercase;
}

.utf-blog-area.single-blog .post-pagi-area a:hover {
	color: var(--primary-color);
}

.utf-blog-area.single-blog .post-pagi-area a:last-child {
	float: right;
}

.utf-blog-area.single-blog .post-pagi-area a:first-child i {
	margin-right: 3px;
}

.utf-blog-area.single-blog .post-pagi-area a:last-child i {
	margin-left: 3px;
}

.utf-blog-area.single-blog .info {
	box-shadow: inherit;
	margin-top: 30px;
	padding: 0;
}

.comments-list .commen-item .avatar {
	float: left;
	height: 100px;
	width: 100px;
}

.comments-list .commen-item .content {
	display: table-cell;
	vertical-align: top;
}

.comments-list .commen-item .avatar img {
	height: 80px;
	width: 80px;
	border-radius: 50px;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}

.comments-list .commen-item {
	margin-bottom: 25px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.comments-list .commen-item:last-child {
	margin-bottom: 50px;
}

.comments-area {
	margin-top: 30px;
}

.comments-area .comments-title h2,
.comments-area .comments-title h3,
.comments-area .comments-title h4 {
	font-weight: 600;
	margin-bottom: 25px;
	text-transform: uppercase;
}

.comments-list .commen-item .content h3,
.comments-list .commen-item .content h4,
.comments-list .commen-item .content h5 {
	font-size: 1rem;
	font-weight: 600;
	text-transform: capitalize;
	display: inline-block;
	margin-bottom: 5px;
}

.comments-info a {
	color: #ffffff;
	display: inline-block;
	font-size: 1rem;
	padding: 1px 10px;
	text-transform: uppercase;
	background: var(--primary-color);
	border-radius: 4px;
	float: right;
}

.comments-info a:hover {
	background: #232323;
	color: #ffffff;
}

.color-yellow .comments-info a:hover {
	color: #ff9800;
}

.comments-info a i {
	margin-right: 10px;
}

.comments-form input,
.comments-form textarea {
	border: 2px solid #e7e7e7;
	border-radius: 4px;
	box-shadow: 0 2px 1rem rgba(0, 0, 0, 0.1);
}

.comments-form textarea {
	min-height: 120px;
	padding-top: 10px
}

.utf-blog-area.full-blog.single-blog .form-group.submit {
	margin-bottom: 0;
}

.comments-form button {
	background-color: #232323;
	border: 1px solid transparent;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	color: #ffffff;
	display: inline-block;
	font-family: "Montserrat", sans-serif;
	font-size: 1rem;
	font-weight: 500;
	line-height: 26px;
	margin-top: 20px;
	padding: 9px 25px;
	text-transform: uppercase;
	-webkit-transition: all 0.35s ease-in-out;
	-moz-transition: all 0.35s ease-in-out;
	-ms-transition: all 0.35s ease-in-out;
	-o-transition: all 0.35s ease-in-out;
	transition: all 0.35s ease-in-out;
}

.comments-form button:hover {
	background-color: var(--primary-color);
	border: 1px solid transparent;
	color: #ffffff;
}

.comments-area .commen-item .comments-info {
	margin-bottom: 10px;
	display: block;
	font-size: 1rem;
	font-weight: 500;
	color: #969696;
}

.comments-form .title h2,
.comments-form .title h3,
.comments-form .title h4 {
	font-weight: 700;
	margin-bottom: 25px;
	text-transform: uppercase;
}

.utf-blog-area .contact-comments .comments {
	margin-top: 15px;
}

.utf-blog-area.single .utf-blog-items .item .contact-comments .col-md-6 {
	float: left;
	padding: 0 15px;
}

/* ============================================================== 
  # Video Button Play
=================================================================== */
.video-info.thumb {
	position: relative;
}

.video-info .video-info.thumb img {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	width: 100%;
}

.video-play-button {
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	color: #ffffff;
	font-size: 1.2rem;
	margin: 0;
}

.video-play-button:before {
	content: "";
	position: absolute;
	z-index: 0;
	left: 50%;
	top: 50%;
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	display: block;
	width: 60px;
	height: 60px;
	background: var(--primary-color);
	repeat scroll 0 0;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	-webkit-animation: pulse-border 1500ms ease-out infinite;
	animation: pulse-border 1500ms ease-out infinite;
}

.color-yellow .video-play-button:before {
	background: #ff9800 repeat scroll 0 0;
}

.video-play-button:after {
	content: "";
	position: absolute;
	z-index: 1;
	left: 50%;
	top: 50%;
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	display: block;
	width: 60px;
	height: 60px;
	background: var(--primary-color);
	repeat scroll 0 0;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	transition: all 200ms;
	-webkit-transition: all 200ms;
	-moz-transition: all 200ms;
	-ms-transition: all 200ms;
	-o-transition: all 200ms;
}

.color-yellow .video-play-button:after {
	background: #ff9800 repeat scroll 0 0;
}

.video-play-button:hover,
.video-play-button:focus {
	color: #ffffff;
}

.video-play-button:hover:after {
	background-color: var(--primary-color);
}

.color-yellow .video-play-button:hover:after {
	background-color: #ff9800;
}

@-webkit-keyframes pulse-border {
	0% {
		-webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
		transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
		opacity: 1;
	}

	100% {
		-webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
		transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
		opacity: 0;
	}
}

@keyframes pulse-border {
	0% {
		-webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
		transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
		opacity: 1;
	}

	100% {
		-webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
		transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
		opacity: 0;
	}
}

.video-play-button i {
	display: block;
	position: relative;
	z-index: 3;
	margin-left: 5px;
}

/* ============================================================== 
  # About 
=================================================================== */
.utf-about-area-item.about-us .right-info h4 {
	margin-bottom: 10px;
}

.utf-about-area-item.about-us .right-info h2 {
	margin-bottom: 20px;
}

.about-me.utf-about-area-item .button-info a {
	margin-right: 10px;
}



.utf-about-area-item li {
	font-family: "Poppins", sans-serif;
	font-weight: 600;
	background: var(--primary-color);
	border-radius: 4px;
	padding: 8px 15px;
	margin: 8px;
	font-size: 1rem;
	display: inline-block;
	color: #ffffff;
}

.utf-about-area-item ul {
	display: block;
	margin-top: 20px;
	margin-bottom: -10px;
}

.utf-about-area-item.about-me ul {
	margin-bottom: 0;
}

.about-us.utf-about-area-item .left-info .thumb img {
	width: 100%;
}

.utf-about-area-item h2 {
	font-weight: 600;
}

.utf-about-area-item h4 {
	line-height: 1.4;
	margin-bottom: 20px;
}

.utf-about-area-item .left-info h4 {
	color: #232323;
}

.utf-about-area-item .right-info {
	padding-left: 35px;
}

.utf-about-area-item .right-info a {
	font-size: 1rem;
	margin-top: 20px;
}

.utf-about-area-item li a {
	margin: 0 !important;
}

.utf-about-area-item .button-info {
	position: relative;
}

.utf-about-area-item .button-info .video-play-button {
	left: 55px;
	position: relative;
	top: 20px;
}

.utf-about-area-item .button-info a {
	float: left;
}

.utf-about-area-item .button-info {
	display: block;
	float: left;
	margin-top: 10px;
	width: 100%;
}

.utf-about-area-item .video-play-button {
	color: #ffffff;
	font-size: 1.2rem;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
}

/* ============================================================== 
  # Fun Factor 
=================================================================== */

.utf-fun-factor-area.bottom-less.default-padding {
	padding-bottom: 25px;
}

.fun-fact i {
	color: #ffffff;
	display: inline-block;
	line-height: 3.8rem;
	margin-bottom: 25px;
	padding-bottom: 25px;
	position: relative;
	z-index: 1;
}

.fun-fact i::after {
	background: #ffffff none repeat scroll 0 0;
	bottom: 0;
	content: "";
	height: 2px;
	left: 50%;
	margin-left: -10px;
	position: absolute;
	width: 20px;
}

.fun-fact {
	background: var(--secondary-color) none repeat scroll 0 0;
	padding: 30px 15px;
	border-radius: 6px;
}

.fun-fact .timer {
	color: #ffffff;
	font-family: "Poppins", sans-serif;
	font-size: 3.1rem;
	font-weight: 900;
	margin-bottom: 10px;
	line-height: 40px;
}

.fun-fact .medium {
	color: #ffffff;
	font-family: "Poppins", sans-serif;
	font-size: 1.2rem;
	text-transform: capitalize;
	line-height: 24px;
}

.utf-fun-factor-area .item {
	margin-bottom: 50px;
}

/* ============================================================== 
  # Services 
=================================================================== */
.utf-services-area .utf-services-items .equal-height {
	margin-bottom: 30px;
}

.utf-services-area .utf-services-items .equal-height .item {
	background: #ffffff none repeat scroll 0 0;
	padding: 40px 30px;
	border-radius: 6px;
	position: relative;
	z-index: 1;
	overflow: hidden;
	-moz-box-shadow: 0 2px 15px rgba(0, 0, 0, 0.2);
	-webkit-box-shadow: 0 2px 15px rgba(0, 0, 0, 0.2);
	-o-box-shadow: 0 2px 15px rgba(0, 0, 0, 0.2);
	box-shadow: 0 2px 15px rgba(0, 0, 0, 0.2);
}

.utf-services-area .utf-services-items .item i {
	display: inline-block;
	font-size: 40px;
	margin-bottom: 25px;
	color: #fff;
	background: var(--primary-color);
	width: 90px;
	height: 90px;
	line-height: 90px;
	border-radius: 50px;
	box-shadow: 0 3px 7px rgba(0, 0, 0, 0.2);
}

.utf-services-area .utf-services-items .item h4 {
	font-weight: 600;
	text-transform: uppercase;
}

.utf-services-area .utf-services-items .item p {
	margin: 0;
	color: #6d6d6d;
}

.utf-services-area .utf-services-items .equal-height .item::after {
	background: var(--primary-color);
	left: -100%;
	content: "";
	height: 100%;
	top: 0;
	position: absolute;
	-webkit-transition: all 0.35s ease-in-out;
	-moz-transition: all 0.35s ease-in-out;
	-ms-transition: all 0.35s ease-in-out;
	-o-transition: all 0.35s ease-in-out;
	transition: all 0.35s ease-in-out;
	width: 100%;
	z-index: -1;
}

.utf-services-area .utf-services-items .equal-height .item:hover::after {
	left: 0;
}

.utf-services-area .utf-services-items .equal-height .item i,
.utf-services-area .utf-services-items .equal-height .item h4,
.utf-services-area .utf-services-items .equal-height .item p {
	-webkit-transition: all 0.35s ease-in-out;
	-moz-transition: all 0.35s ease-in-out;
	-ms-transition: all 0.35s ease-in-out;
	-o-transition: all 0.35s ease-in-out;
	transition: all 0.35s ease-in-out;
}

.utf-services-area .utf-services-items .equal-height .item:hover h4,
.utf-services-area .utf-services-items .equal-height .item:hover p {
	color: #ffffff;
}

.utf-services-area .utf-services-items .equal-height .item:hover i {
	background: #ffffff;
	color: var(--primary-color);
}

.utf-services-area .utf-services-carousel .item {
	text-align: center;
	padding: 40px 30px;
	background: #fff;
	border-radius: 10px;
	margin: 8px 0px;
	-moz-box-shadow: 0px 3px 8px 0 rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 0px 3px 8px 0 rgba(0, 0, 0, 0.1);
	-o-box-shadow: 0px 3px 8px 0 rgba(0, 0, 0, 0.1);
	box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.1);
}

.utf-services-area .utf-services-carousel .owl-dots .owl-dot span {
	background: #ffffff;
	border: 3px solid #999999;
	height: 20px;
	-webkit-transition: all 0.35s ease-in-out;
	-moz-transition: all 0.35s ease-in-out;
	-ms-transition: all 0.35s ease-in-out;
	-o-transition: all 0.35s ease-in-out;
	transition: all 0.35s ease-in-out;
	width: 20px;
}

.utf-services-area .utf-services-carousel .owl-dots .owl-dot.active span,
.utf-services-area .utf-services-carousel .owl-dots .owl-dot:hover span {
	border-color: var(--primary-color);
}

.utf-services-area .utf-services-carousel .owl-dots {
	margin-top: 20px !important;
	text-align: left !important;
}

.utf-services-area .utf-services-carousel.utf-services-items .owl-nav {
	margin-top: 30px;
	text-align: center;
}

.utf-services-area .utf-services-carousel.utf-services-items .owl-nav .owl-prev,
.utf-services-area .utf-services-carousel.utf-services-items .owl-nav .owl-next {
	background: var(--primary-color);
	color: #ffffff;
	font-size: 1.2rem;
	height: 40px;
	left: -25px;
	line-height: 40px;
	border-radius: 40px;
	margin-top: -20px;
	padding: 0;
	position: absolute;
	text-align: center;
	top: 50%;
	width: 40px;
	box-shadow: 0px 3px 5px 0 rgba(0, 0, 0, 0.2);
}

.utf-services-area .utf-services-carousel.utf-services-items .owl-nav .owl-next {
	left: auto;
	right: -25px;
}

/* ============================================================== 
  # index product  CATALOGUE
=================================================================== */

.services {
	padding: 7em 0;
}


.icon_info {
	position: relative;
	text-align: center;
	padding: 0px;
	border: 3px solid #f5f5f5;
	background-color: #ffffff;
	transition: all 0.3s ease-out 0s;
	border: 1px solid #d4d8d9;
	-webkit-transition: all .2s ease;
	-moz-transition: all .2s ease;
	-o-transition: all .2s ease;
	-ms-transition: all .2s ease;
	transition: all .2s ease;
	margin-top: 20px;
	overflow: hidden;
	border-radius: 10px;
}

.icon_info:hover {
	-webkit-transition: all .2s ease;
	-moz-transition: all .2s ease;
	-o-transition: all .2s ease;
	-ms-transition: all .2s ease;
	transition: all .2s ease;
	-webkit-transform: translate3d(0, -4px, 0);
	-moz-transform: translate3d(0, -4px, 0);
	-o-transform: translate3d(0, -4px, 0);
	-ms-transform: translate3d(0, -4px, 0);
	transform: translate3d(0, -4px, 0);
	-webkit-box-shadow: 0 10px 15px 0 rgb(0 0 0 / 6%), 0 15px 30px 0 rgb(0 0 0 / 12%);
	box-shadow: 0 10px 15px 0 rgb(0 0 0 / 6%), 0 15px 30px 0 rgb(0 0 0 / 12%);
}

.icon_info:after {
	background: var(--secondary-color);
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: -100%;
	content: '';
	-webkit-transition: all 0.35s ease-in-out;
	-moz-transition: all 0.35s ease-in-out;
	-ms-transition: all 0.35s ease-in-out;
	-o-transition: all 0.35s ease-in-out;
	transition: all 0.35s ease-in-out;
	opacity: .5;
	z-index: 10;
}

.icon_info:before {
	background-color: rgb(252, 252, 252);
	/* 设置背景色以便于观察 */
	width: 100%;
	height: 15%;
	position: absolute;
	bottom: 0;
	left: 0;
	content: '';
	-webkit-transition: all 0.35s ease-in-out;
	-moz-transition: all 0.35s ease-in-out;
	-ms-transition: all 0.35s ease-in-out;
	-o-transition: all 0.35s ease-in-out;
	transition: all 0.35s ease-in-out;
	opacity: .8;
	z-index: 14;
}

.icon_info img {
	width: 100%;
	padding: 0;
}

.icon_info .infor {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
	text-align: center;
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 15%;
	padding: 15px 0;
	font-size: 1.2em;
	-webkit-transition: all 0.35s ease-in-out;
	-moz-transition: all 0.35s ease-in-out;
	-ms-transition: all 0.35s ease-in-out;
	-o-transition: all 0.35s ease-in-out;
	transition: all 0.35s ease-in-out;
	opacity: 1;
	z-index: 15;
}

.icon_info .infor a.infor_title {
	font-size: 1.2em;
	color: var(--font-color);
	font-weight: 500;
}

.icon_info .infor p {
	color: #ffffff;
	display: none;
}

.icon_info:hover:after {
	left: 0;
}

.icon_info:hover::before {
	opacity: 0;
}

.icon_info:hover .infor a.infor_title {
	color: #ffffff;
}

.icon_info:hover .infor p {
	display: block;
}

.icon_info:hover .infor {
	height: 100%;
}


/*-- //services --*/

/*首页产品滚动*/


/* product-center*/
.swiper-container {
	margin: 0 auto;
	position: relative;
	overflow: hidden;
	z-index: 1;
	background: #2b2b2b;

}

.swiper-wrapper {
	position: relative;
	width: 100%;
	z-index: 1;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-transition-property: -webkit-transform;
	-moz-transition-property: -moz-transform;
	-o-transition-property: -o-transform;
	-ms-transition-property: -ms-transform;
	transition-property: transform;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}

.swiper-container-vertical>.swiper-wrapper {
	-webkit-box-orient: vertical;
	-moz-box-orient: vertical;
	-ms-flex-direction: column;
	-webkit-flex-direction: column;
	flex-direction: column;
}

.swiper-container-android .swiper-slide,
.swiper-wrapper {
	-webkit-transform: translate3d(0px, 0, 0);
	-moz-transform: translate3d(0px, 0, 0);
	-o-transform: translate(0px, 0px);
	-ms-transform: translate3d(0px, 0, 0);
	transform: translate3d(0px, 0, 0);
}

.swiper-container {
	width: 100%;
	height: 100%;

}

.swiper-slide {
	text-align: center;
	font-size: 1.2rem;
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
	/* background-size:cover; */
	background-repeat: no-repeat;
	background-position: center center;
}

.swiper-slide {
	-webkit-flex-shrink: 0;
	-ms-flex: 0 0 auto;
	flex-shrink: 0;

	position: relative;
}

.swiper-slide img {
	width: 100%;
	display: block;
}

.swiper-top-prev,
.swiper-top-next {
	position: absolute;
	top: 50%;
	width: 38px;
	height: 38px;
	background: #fff;
	z-index: 100;
	text-align: center;
	line-height: 40px;
	color: #333;
	font-size: 11px;
}

.swiper-top-prev {
	left: 0;
}

.swiper-top-next {
	right: 0;
}

.swiper-top-prev:hover,
.swiper-top-next:hover {
	background: #536DFE;
	color: #fff;
}

.swiper-pagination-bullet {
	width: 16px;
	height: 16px;
	opacity: .5;
	border: #fff 2px solid;
}

.swiper-pagination-bullet-active {
	opacity: 1;
	border: #a7d6f3 1px solid;
}

.pr-swiper-button-next,
.pr-swiper-button-prev {
	position: absolute;
	top: 50%;
	z-index: 10;
	cursor: pointer;

	background-position: center;
	background-repeat: no-repeat;
	width: 46px;
	height: 46px;
	background-size: auto;
}


.pr-swiper-container {
	width: 100%;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	overflow: hidden;
	padding: 10px;
}

.pr-swiper-container .swiper-slide {
	padding: 2px;
	text-align: center;
	/*   height: 500px;Center slide text vertically */
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
	border-radius: 30px;
}

.pr-swiper-pagination {

	left: 0;
	width: 100%;
	position: absolute;
	text-align: center;
	transition: .3s opacity;
	transform: translate3d(0, 0, 0);
	z-index: 10;
}

.pr-swiper-button-prev {
	background: url(img/curr_prev.png) no-repeat center center;
	left: -60px;
	right: auto;
}

.pr-swiper-button-next {
	right: -60px;
	left: auto;

	background-image: url(img/curr_next.png);
}

@media (max-width: 520px) {
	.pr-swiper-button-prev {

		left: 0px;

	}

	.pr-swiper-button-next {
		right: 0px;

	}
}

.pr-swiper-pagination.swiper-pagination-horizontal {
	bottom: -50px;

	left: 0;
	width: 100%;
}

.pr-swiper-pagination.swiper-pagination-horizontal {
	bottom: -50px;

	left: 0;
	width: 100%;
}

.picScroll {
	position: relative;
}

.picScroll ul {
	zoom: 1;
}

.picScroll .pr-div-conenter {

	border: 1px solid #d4d8d9;
	float: left;
	-webkit-transition: all .2s linear;
	transition: all .2s linear;
	position: relative;
	border-bottom: 2px solid #d4d8d9;
	zoom: 1;
	border-radius: 10px;
	overflow: hidden;
}

.picScroll .pr-div-conenter:hover {
	z-index: 2;
	border-bottom: 4px solid var(--primary-color);
	box-shadow: 0px 2px 10px 0px rgb(0 0 0 / 40%);
}

.picScroll .pr-text-contener {
	font-size: var(--base-font-size);
	background-color: #f6f6f4;
	padding: 18px;
	transition: all 0.3s;
	font-family: "siyuan-Regular";
	text-align: left;
}


.picScroll .pr-div-conenter:hover .pr-text-contener {
	background-color: var(--secondary-color);
	transition: all 0.3s;
}

.pr-text-contener a.line-b {
	font-size: 1rem;

}

.picScroll .pr-text-contener a.pr-item-title {
	font-weight: 500;
	font-size: 1em;
	line-height: 1.2em;
	margin-bottom: 5px;
	display: block;
	color: var(--font-color);
	transition: all 0.3s;
	overflow: hidden;
}

.picScroll .pr-div-conenter:hover a {
	color: #fff;
	transition: all 0.3s;
}

.picScroll .pr-img-contener {
	overflow: hidden;
	width: 100%;
	padding: 15px;
	background-color: #fff;

}

.picScroll .pr-img-contener img {
	width: 100%;
	margin: 0 auto;
}

/*end首页产品滚动*/

/*=========================
	/* Swiper Slider top banner
===========================*/
#top_banner {
    width: 100%;
    height: calc(100vw * 0.36 ); /* 16:9设置高度80% */
	margin-top: 70px;
}

#top_banner .swiper-slide {
    background-size: cover;
    /*contain*/

    background-position: bottom center;
}

@media only screen and (max-width: 991px) {
    header .top-container {
        display: none;
    }

    #top_banner .swiper-slide {
        background-position: top center;
    }


}


@media (max-width: 720px) {
    header {
        padding: 8px 0;
    }

    .navbar-logo {

        height: 40px;
        width: 90px;

    }

    #top_banner {
        /*
        height: calc(100vw * 0.44 + 80px);
        */
        margin-top: 60px;
    }

    #top_banner .swiper-slide {

        background-size: contain;

        background-position: top center;
    }

    .w3l-banner:before {

        height: 5px;
        min-height: 5px;
    }

    .swiper-button-next,
    .swiper-button-prev {

        width: calc(var(--swiper-navigation-size)/ 44 * 10);
        height: var(--swiper-navigation-size);

    }

    .swiper-button-next:after,
    .swiper-button-prev:after {

        font-size: calc(var(--swiper-navigation-size)* 0.75);

    }
}


#slide {
    top: -0px;
    margin-bottom: -0px;
}

.caption {
    background: #03A9F4;
    padding: 34px;
}

.caption h1 {
    color: #fff;
    margin: 0;
    font-weight: 300;
}

.caption h1 span {
    font-weight: 700;
}

.swiper-container {
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    z-index: 1;
    background: #2b2b2b;

}

.swiper-wrapper {
    position: relative;
    width: 100%;
    z-index: 1;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    -ms-transition-property: -ms-transform;
    transition-property: transform;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

.swiper-container-vertical>.swiper-wrapper {
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}

.swiper-container-android .swiper-slide,
.swiper-wrapper {
    -webkit-transform: translate3d(0px, 0, 0);
    -moz-transform: translate3d(0px, 0, 0);
    -o-transform: translate(0px, 0px);
    -ms-transform: translate3d(0px, 0, 0);
    transform: translate3d(0px, 0, 0);
}

.swiper-container {
    width: 100%;
    height: 100%;

}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    /* background-size:cover; */
    background-repeat: no-repeat;
    background-position: center center;
}

.swiper-slide {
    -webkit-flex-shrink: 0;
    -ms-flex: 0 0 auto;
    flex-shrink: 0;

    position: relative;
}

.swiper-slide img {
    width: 100%;
    display: block;
}

.swiper-top-prev,
.swiper-top-next {
    position: absolute;
    top: 50%;
    width: 38px;
    height: 38px;
    background: #fff;
    z-index: 100;
    text-align: center;
    line-height: 40px;
    color: #333;
    font-size: 11px;
}

.swiper-top-prev {
    left: 0;
}

.swiper-top-next {
    right: 0;
}

.swiper-top-prev:hover,
.swiper-top-next:hover {
    background: #536DFE;
    color: #fff;
}

.swiper-pagination-bullet {
    width: 16px;
    height: 16px;
    opacity: .5;
    border: #fff 2px solid;
}

.swiper-pagination-bullet-active {
    opacity: 1;
    border: #a7d6f3 1px solid;
}

.pr-swiper-button-next,
.pr-swiper-button-prev {
    position: absolute;
    top: 50%;
    z-index: 10;
    cursor: pointer;

    background-position: center;
    background-repeat: no-repeat;
    width: 46px;
    height: 46px;
    background-size: auto;
}


/* ==============================================================
  # PrContact Area 
=================================================================== */
.pr_list_contact {}

.pr_list_contact .pr-item-conenter {
	overflow: hidden;
	position: relative;
	background-color: #fff;
	width: 100%;
	min-height: 100%;
	border-radius: 3px;
	border: 1px solid #69727d;
	transition: all .25s;

}

.pr_list_contact .pr-item-conenter:hover {

	border-bottom: 4px solid var(--primary-color);
	box-shadow: 0px 2px 10px 0px rgb(0 0 0 / 40%);
	border: 0
}

.pr_list_contact .pr-text-contener a.pr-item-title {
	font-weight: 500;
	font-size: 1.1em;
	line-height: 1.2em;
	margin-bottom: 5px;
	display: block;
	color: var(--font-color);
	transition: all 0.3s;
	overflow: hidden;
	text-align: center;
	padding: 20px 0;
}

.side_menu_items .heading_title {
	color: var(--primary-color);
	font-size: 1.8rem;
	font-weight: 500;
	text-transform: none;
	padding: 0 10px 10px 10px;
	border-bottom: 1px solid;
}

.side_menu_items ul.side_list_menu {
	padding: 0px;
	margin: 0px;
	list-style: none;
}

.side_menu_items ul.side_list_menu li a {
	display: block;
	width: 100%;
	font-size: 1.1rem;
	font-weight: 400;
	text-transform: none;
	padding: 10px 10px;
	margin: 0px 0px 0px 0px;
	border-style: solid;
	border-width: 0px 0px 1px 0px;
	border-color: #c0bebe;
}

.side_menu_items ul.side_list_menu li a.active {
	color: #fff;
	background-color: var(--primary-color);
}

/* ============================================================== 
  # Contact Area 
=================================================================== */
.utf-contact-area h2 {
	font-size: 22px;
	font-weight: 600;
	position: relative;
	margin-bottom: 22px;
	padding-bottom: 5px;
}

.utf-contact-area h2:after {
	background: var(--primary-color);
	position: absolute;
	content: '';
	left: 0px;
	bottom: -7px;
	height: 3px;
	width: 40px;
	border-radius: 30px;
}

.utf-contact-area h4,
.utf-contact-area h4 a {
	line-height: 1.6;
	margin-bottom: 30px;
	font-size: 1rem;
	font-weight: 400;
	color: #616161;
}

.utf-contact-area h4 a:hover {
	color: var(--primary-color);
}

.utf-contact-area .right-info {
	padding-left: 35px;
}

.utf-contact-area .right-info a {
	margin-top: 10px;
}

.utf-contact-area .address-info i,
.utf-contact-area .address-info p {
	display: table-cell;
	vertical-align: middle;
}

.utf-contact-area .address-info p {
	font-family: "Poppins", sans-serif;
	font-weight: 500;
	margin: 0;
	padding-left: 20px;
	font-size: 1rem;
}

.utf-contact-area .address-info p span,
.utf-contact-area .address-info p span a {
	color: #888888;
	display: block;
	font-weight: normal;
	font-size: 1rem;
}

.utf-contact-area .address-info p span a:hover {
	color: var(--primary-color);
}

.utf-contact-area .address-info i {
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	color: #787777;
	font-size: 26px;
	height: 50px;
	line-height: 50px;
	text-align: center;
	width: 50px;
}

.utf-contact-area .address-info li {
	margin-bottom: 10px;
	background: #fff;
	padding: 5px;

}

.utf-contact-area .utf-contact-form input {
	-moz-border-bottom-colors: none;
	-moz-border-left-colors: none;
	-moz-border-right-colors: none;
	-moz-border-top-colors: none;
	border: 2px solid #e7e7e7;
	border-radius: 4px;
	box-shadow: 0 2px 1rem rgba(0, 0, 0, 0.1);
	padding: 6px 1rem;
}

.utf-contact-area .utf-contact-form input:focus,
.utf-contact-area .utf-contact-form textarea:focus {
	border-color: #66afe9;
	outline: 0;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}

.utf-contact-area .utf-contact-form textarea {
	-moz-border-bottom-colors: none;
	-moz-border-left-colors: none;
	-moz-border-right-colors: none;
	-moz-border-top-colors: none;
	border: 2px solid #e7e7e7;
	border-radius: 4px;
	box-shadow: 0 2px 1rem rgba(0, 0, 0, 0.1);
	padding: 10px 1rem;
	min-height: 120px;
}

.utf-contact-area .utf-contact-form button {
	background: var(--secondary-color);
	none repeat scroll 0 0;
	border: medium none;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	color: #ffffff;
	display: inline-block;
	font-family: "Poppins", sans-serif;
	font-weight: 600;
	margin-top: 15px;
	padding: 10px 30px;
	text-transform: uppercase;
}

.utf-contact-area .utf-contact-form button i {
	margin-left: 5px;
}

.utf-contact-area .utf-contact-form .loader {
	margin-left: 5px;
}

.utf-contact-form-area .alert-notification {
	margin-top: 15px;
	padding: 0;
}

.utf-contact-form-area .alert-notification .alert-error {
	background: #e7e7e7 none repeat scroll 0 0;
	color: red;
	margin-top: 0;
	text-align: left;
}

.utf-contact-form-area.bg-fixed .alert-notification .alert-error {
	background: #ffffff none repeat scroll 0 0;
	color: red;
	margin-top: 0;
	text-align: left;
}

.google-maps-area iframe {
	height: 400px;
	margin-bottom: 60px;
	width: 100%;
	border: 5px solid rgba(0, 0, 0, 0.12);
	border-radius: 10px;
}

/* ============================================================== 
  # Team 
=================================================================== */
.utf-team-area .item {
	position: relative;
}

.utf-team-area .item .info {
	background: #ffffff none repeat scroll 0 0;
	padding: 30px;
	position: relative;
	text-align: center;
	border-radius: 0 0 6px 6px;
	-moz-box-shadow: 0px 3px 10px 0 rgba(0, 0, 0, 0.15);
	-webkit-box-shadow: 0px 3px 10px 0 rgba(0, 0, 0, 0.15);
	-o-box-shadow: 0px 3px 10px 0 rgba(0, 0, 0, 0.15);
	box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.15);
}

.utf-team-area .info p {
	margin: 0;
}

.utf-team-area .item .info h4,
.utf-team-area .item .info h4 a {
	font-weight: 600;
	margin-bottom: 5px;
	text-transform: capitalize;
}

.utf-team-area .item .info h4 a:hover {
	color: var(--primary-color);
}

.utf-team-area .item .info span {
	color: var(--primary-color);
	display: block;
	font-family: "Poppins", sans-serif;
	font-weight: 500;
	margin-bottom: 15px;
	text-transform: capitalize;
}

.utf-team-area .item .social li {
	display: inline-block;
}

.utf-team-area .item .social li a {
	background: #ffffff none repeat scroll 0 0;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	color: #ffffff;
	display: inline-block;
	height: 40px;
	line-height: 42px;
	margin: 0 3px;
	text-align: center;
	width: 40px;
}

.utf-team-area .item .social li.facebook a {
	background: #3b5998 none repeat scroll 0 0;
}

.utf-team-area .item .social li.twitter a {
	background: #1da1f2 none repeat scroll 0 0;
}

.utf-team-area .item .social li.pinterest a {
	background: #bd081c none repeat scroll 0 0;
}

.utf-team-area .item .social li.g-plus a {
	background: #db4437 none repeat scroll 0 0;
}

.utf-team-area .item .social li.linkedin a {
	background: #0077b5 none repeat scroll 0 0;
}

.utf-team-area .item .social li.dribbble a {
	background: #ea4c89 none repeat scroll 0 0;
}

.utf-team-area .thumb {
	position: relative;
	z-index: 1;
	overflow: hidden;
	border-radius: 6px 6px 0 0;
}

.utf-team-area .thumb:before {
	opacity: 0.8;
	background: linear-gradient(to bottom, transparent 40%, #000000);
	transition: opacity .3s;
	position: absolute;
	height: 100%;
	width: 100%;
	display: block;
	top: 0;
	left: 0;
	content: "";
	z-index: 0;
}

.utf-team-area .item:hover .thumb:before {
	opacity: 0.8;
	background: linear-gradient(to bottom, transparent 40%, #000000);
	transition: opacity .3s;
	position: absolute;
	height: 100%;
	width: 100%;
	display: block;
	top: 0;
	left: 0;
	content: "";
	z-index: 0;
}

.utf-team-area .thumb .social {
	bottom: -100px;
	left: 0;
	padding: 15px;
	position: absolute;
	text-align: center;
	width: 100%;
	-webkit-transition: all 0.35s ease-in-out;
	-moz-transition: all 0.35s ease-in-out;
	-ms-transition: all 0.35s ease-in-out;
	-o-transition: all 0.35s ease-in-out;
	transition: all 0.35s ease-in-out;
}

.utf-team-area .item:hover .social {
	bottom: 0;
}

.utf-team-area .utf-team-items .owl-dots .owl-dot span {
	background: #ffffff none repeat scroll 0 0;
	border: 6px solid #999999;
	height: 16px;
	margin: 5px;
	border-radius: 40px;
	-webkit-transition: all 0.35s ease-in-out;
	-moz-transition: all 0.35s ease-in-out;
	-ms-transition: all 0.35s ease-in-out;
	-o-transition: all 0.35s ease-in-out;
	transition: all 0.35s ease-in-out;
	width: 16px;
}

.utf-team-area .utf-team-items .owl-dots .owl-dot.active span,
.utf-team-area .utf-team-items .owl-dots .owl-dot:hover span {
	border-color: var(--primary-color);
}

.carousel-shadow .owl-stage-outer {
	margin: 0 -15px;
	padding: 15px;
}

/* ============================================================== 
  # Clients 
=================================================================== */
.utf-clients-area .clients-items.utf-clients-carousel .owl-dots {
	margin-bottom: -10px;
	margin-top: 20px;
}

.utf-clients-area .clients-items img {
	margin: auto;
	width: auto;
}

.utf-clients-area .clients-items .item {
	background: rgb(255, 255, 255, 1);
	border-radius: 6px;
	padding: 10px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
	margin: 8px 5px;
}

.utf-clients-area .clients-items .owl-dots .owl-dot span {
	background: #ffffff none repeat scroll 0 0;
	border: 3px solid #999999;
	height: 20px;
	-webkit-transition: all 0.35s ease-in-out;
	-moz-transition: all 0.35s ease-in-out;
	-ms-transition: all 0.35s ease-in-out;
	-o-transition: all 0.35s ease-in-out;
	transition: all 0.35s ease-in-out;
	width: 20px;
}

.utf-clients-area .clients-items .owl-dots .owl-dot.active span,
.utf-clients-area .clients-items .owl-dots .owl-dot:hover span {
	border-color: var(--primary-color);
}

.utf-clients-area.bg-theme .clients-items .owl-dots .owl-dot span {
	border: 3px solid #e9e9e9;
}

.utf-clients-area.bg-theme .clients-items .owl-dots .owl-dot.active span,
.utf-clients-area.bg-theme .clients-items .owl-dots .owl-dot:hover span {
	background: var(--primary-color);
	none repeat scroll 0 0 !important;
}

.utf-clients-area .clients-items .owl-nav {
	margin: 0;
}

.utf-clients-area .clients-items .owl-nav .owl-prev,
.utf-clients-area .clients-items .owl-nav .owl-next {
	background: var(--primary-color);
	color: #ffffff;
	font-size: 1.2rem;
	height: 40px;
	left: -30px;
	line-height: 40px;
	border-radius: 40px;
	margin-top: -20px;
	padding: 0;
	position: absolute;
	text-align: center;
	top: 50%;
	width: 40px;
	box-shadow: 0px 3px 5px 0 rgba(0, 0, 0, 0.2);
}

.utf-clients-area .clients-items .owl-nav .owl-next {
	left: auto;
	right: -30px;
}

/* ============================================================== 
  # Footer 
=================================================================== */
footer {
	line-height: 50px;
	padding: 30px 0;
}

footer p {
	line-height: 50px;
	margin: 0;
}

footer .copyright a {
	color: var(--primary-color);
}

footer .utf-footer-social li {
	display: inline-block;
}

footer .utf-footer-social li a {
	background: #232323 none repeat scroll 0 0;
	border: medium none;
	color: #ffffff;
	display: inline-block;
	font-size: 1rem;
	height: 40px;
	line-height: 42px;
	text-align: center;
	width: 40px;
	margin-right: 5px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

footer .utf-footer-social li.facebook a {
	background: #3b5998 none repeat scroll 0 0;
}

footer .utf-footer-social li.twitter a {
	background: #1da1f2 none repeat scroll 0 0;
}

footer .utf-footer-social li.pinterest a {
	background: #bd081c none repeat scroll 0 0;
}

footer .utf-footer-social li.g-plus a {
	background: #db4437 none repeat scroll 0 0;
}

footer .utf-footer-social li.linkedin a {
	background: #0077b5 none repeat scroll 0 0;
}

footer .utf-footer-social li.dribbble a {
	background: #ea4c89 none repeat scroll 0 0;
}

footer.bg-dark .copyright {
	border-color: #303030;
}

footer .menu li {
	display: inline-block;
}

footer .menu li a {
	color: #666666;
	padding: 5px 1rem;
	position: relative;
	text-transform: uppercase;
	z-index: 1;
	font-weight: 500;
}

footer.bg-dark .menu li a {
	color: #ffffff;
}

footer .menu li a:hover {
	color: var(--primary-color);
}

footer.bg-dark .copyright {
	border-color: #303030 !important;
}

footer.centerd .copyright {
	border-top: 1px solid #e7e7e7;
	line-height: inherit;
	margin-top: 20px;
	padding-top: 20px;
}

footer.centerd .copyright p {
	line-height: inherit;
}

footer.centerd.bg-dark .copyright p {
	color: #ffffff;
}

footer.centerd .logo {
	margin-bottom: 20px;
}

footer.centerd {
	line-height: inherit;
}

footer.centerd .utf-footer-social {
	margin-bottom: 20px;
}

footer .menu li a::after {
	background: #ffffff none repeat scroll 0 0;
	content: "";
	height: 2px;
	position: absolute;
	right: -2px;
	top: 50%;
	transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	width: 2px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
}

footer.bg-light .menu li a::after {
	background-color: var(--primary-color);
}

footer .menu li:last-child a::after {
	display: none;
}

footer .copyright.border {
	border-top: 1px solid;
	margin-top: 25px;
	padding-top: 20px;
}

footer.bg-light .copyright.border {
	border-color: #e7e7e7;
}

/* ============================================================== 
  # 404 
=================================================================== */
.utf-error-page-area h1 {
	font-size: 150px;
	font-weight: 900;
	line-height: 110px;
	margin-bottom: 30px;
}

.utf-error-page-area a {
	margin-top: 15px;
	font-weight: 600;
}

.utf-error-page-area h2 {
	font-weight: 600;
}

.utf-error-page-area h1 {}

/* ============================================================== 
  # Demo 
=================================================================== */
.utf-demo-area .utf-single-item {
	box-shadow: 0 0 10px #cccccc;
	position: relative;
	z-index: 1;
	padding: 15px;
}

.utf-demo-area .item {
	margin-bottom: 50px
}

.utf-demo-area .utf-single-item .info {
	background: #f3f6f8 none repeat scroll 0 0;
	color: #333;
	padding: 15px 10px;
	text-align: center;
	margin-top: 15px;
}

.utf-demo-area .utf-single-item .info h4 {
	color: #232323;
	font-size: 1rem;
	font-weight: normal;
	text-transform: uppercase;
	margin: 0;
}

.utf-banner-area-block .demo-banner h1 {
	font-weight: 700;
	margin-bottom: 30px;
}

.utf-banner-area-block .demo-banner img {
	height: auto;
	margin-bottom: 20px;
	max-height: 150px;
}

.utf-demo-area .def-heading h2 {
	font-weight: 900;
	margin: 30px 0;
	text-transform: uppercase;
	color: #333333;
}

.demo-footer {
	padding-bottom: 80px;
}

footer.demo .copyright {
	margin-top: 15px;
}

.utf-demo-area .comming-soon.item img {
	opacity: 0.3;
}

.utf-banner-area-block.demo-banner {
	padding: 50px 0;
}


.linght-text .item_text {

	font-size: 1.2em;
	font-weight: 500;
	margin-bottom: 10px;
}

.fix_item_enter {
	position: relative;
	display: flex;
	justify-content: center;
	/* 水平居中 */
	flex-wrap: wrap;
	/* 允许换行 */
	align-items: center;
	/* 当flex项在交叉轴上不占据整个空间时，可以使用这个属性确保它们在该轴上居中 */
}

.flex_list_container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}

.flex_list_item {
	flex-basis: 200px;
	/* 设置每个子元素的基础宽度 */
	margin: 5px;
	/* 子元素间的间隔 */
	/* 更多样式 */
}

.bg_radius_item {
	text-align: left;
	background-color: #fff;
	border-radius: 10px;
	color: var(--font-color);
	padding: 10px;
	margin-bottom: 20px;
}

.item_img {
	margin: 10px 0;
}

.item_radius_img {
	margin: 15px 0;
	border-radius: 50%;
}

.item_title {
	font-size: 1.5em;
	color: var(--font-color);
	margin-bottom: 8px;
}

.item_text {
	font-size: 1em;
	color: var(--font-color);
	margin: 0;
	padding: 0;
}

.services_area {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 4%;
}

.services_item {


	padding: 10px;
}

.services_item img {
	width: 100%;
}

.services_item span {
	display: inline-block;
	width: 100%;
	padding: 10px;
	font-size: 1.2em;
	background-color: #ffffff;

}


/* fellback */
.form-contrainer {
	width: 100%;
	margin: 0px auto;
	padding: 0 20px;
}

.form_inner {
	background-color: #fff;
	padding: 40px;
}

.twice-two {
	display: grid;
	grid-gap: 20px;
	grid-template-columns: 1fr 1fr;
	margin-bottom: 10px;
	position: relative
}

.twice {
	margin-bottom: 20px;
	position: relative
}

.form-control {
	background-color: #ffffff;
	border-color: #BABABA;
}

.form-control {
	font-size: 1.2em;
}

.bg-fixed {
	background-attachment: fixed;
	background-position: center top;
	background-size: cover;
}

.bg-w100 {
	background-attachment: fixed;
	background-position: center top;
	background-size: 100% auto;
}

/* Preloader Animaion 右下快捷菜单 */
.right-fit-muem {
	position: fixed;
	width: 68px;
	z-index: 9999;
	bottom: 50px;
	margin-top: --100px;
	box-shadow: -3px 0px 8px -2px rgba(0, 0, 0, 0.3);
	right: 10px;
	-moz-transition: all 0.4s ease;
	-webkit-transition: all 0.4s ease;
	transition: all 0.4s ease;
	padding: 0px;
	border-radius: var(--border-radius);
	background: #fff;
}

.right-fit-muem.active {
	right: 0;
}

.right-fit-muem li {
	display: block;
	width: 100%;
	text-align: center;
	line-height: 8px;
	font-size: 1rem;
	margin: 5px 0;
	padding: 5px 0;
}

.right-fit-muem li:hover {
	transform: scale(1.1);
	transition: 0.4s ease-in-out;
	background: var(--primary-color);
	border: transparent;
	color: #fff;
}

.right-fit-muem .icon {
	width: 100%;
	height: 30px;
	text-align: center;

	color: var(--secondary-color);
	cursor: pointer;
	top: 0;

}

.right-fit-muem ul li i {
	line-height: 30px;
	font-size: 1.2rem;
	width: 100%;
}

.right-fit-muem ul li span {
	white-space: inherit;
	word-break: break-word;
	text-align: center;

	font-size: 0.9rem;
	line-height: 1rem;
}



/* end Preloader Animaion */


/* popup 弹出框*/
.search-popup {
	position: fixed;
	z-index: 11000;
	visibility: hidden;
}

.search-popup.showed {
	visibility: visible;
	opacity: 1;
}

.navbar form.search-box {
	display: flex;

}


.search-popup .popup form input[type="search"] {
	font-style: normal;
	font-weight: normal;
	font-size: 1rem;
	line-height: 20px;
	color: #555;
	border: none;
	height: 60px;
	background: #fff;
	padding: 0 20px;
	width: 80%;
	border-radius: 0;
	-webkit-border-top-left-radius: var(--border-radius);
	-webkit-border-bottom-left-radius: var(--border-radius);
	-moz-border-radius-topleft: var(--border-radius);
	-moz-border-radius-bottomleft: var(--border-radius);
	border-top-left-radius: var(--border-radius);
	border-bottom-left-radius: var(--border-radius);
	margin: 0;
}

.search-popup .popup form button {
	border: none;
	cursor: pointer;
	font-size: 1rem;
	text-align: center;
	color: #fff;
	width: 60px;
	height: 60px;
	background: var(--primary-color);
	line-height: 35px;
	display: inline-block;
	transition: 0.5s ease-out;
	font-weight: 600;
	vertical-align: top;
	border-radius: 0;
	-webkit-border-top-right-radius: var(--border-radius);
	-webkit-border-bottom-right-radius: var(--border-radius);
	-moz-border-radius-topright: var(--border-radius);
	-moz-border-radius-bottomright: var(--border-radius);
	border-top-right-radius: var(--border-radius);
	border-bottom-right-radius: var(--border-radius);
	padding: 0;
	margin: 0;
}

.search-popup .popup form button:hover {
	background: var(--secondary-color);
	color: #fff;
	outline: none;
	border: none;
}

.search-popup .popup form input:focus {
	outline: none;
	border: none;
}

.search-popup .pop-overlay {
	position: fixed;
	top: 0px;
	left: 0;
	right: 0;
	transition: opacity 0ms;
	z-index: 99;
	background: rgba(25, 23, 23, 0.81);
	box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.85);
	height: 100vh;
}



.search-popup .popup {
	margin: 0rem auto;
	padding: 40px 50px;
	max-width: 700px;
	border-radius: 3px;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}

.search-popup .search-top {
	display: grid;
	grid-template-columns: auto 1fr 1fr;
	grid-gap: 30px;
	margin-top: 24px;
}

.search-popup .search-top h4 {
	font-size: 1.2rem;
	color: #fff;
	margin-bottom: 16px;
}

.search-popup .popup h3 {
	font-size: 6px;
	color: #fff;
	margin-bottom: 16px;
}

.search-popup .search-top span.fa {
	padding-right: 10px;
}

.search-popup .search-top li {
	display: block;
}

.search-popup .search-top li a {
	font-size: 1rem;
	color: #fff;
	line-height: 28px;
}

.search-popup .search-top li a:hover {
	color: #fff;
}

.search-popup .close-search-button {
	position: absolute;
	top: 10px;
	right: 24px;
	transition: all 200ms;
	font-size: 40px;
	text-decoration: none;
	color: #fff;
	opacity: 1;
	background: none;
	font-weight: 200;
}

.search-popup .close-search-button:hover {
	opacity: 0.8;
	background: none;
}

/*end search pop

/*============
prinfor
============*/

/******************************产品展示*****************/
.products_show {
	padding-top: 40px;
}

.big_pic {
	width: 100%;
	height: 480px;
	overflow: hidden;
}

.main_pic {
	width: 400px;
	height: 400px;
	overflow: hidden;
	float: left;
	margin-right: 20px;
	background-color: #CC99FF;
}

.main_pic img {
	width: 400px;
	height: auto;
}

.pro_name {
	padding: 15px;
	font-size: 20px;
	color: #000;
	text-align: left;
	font-weight: bold;
}

.pro_infor {
	padding: 0;
	margin: 0px;
	display: block;
	float: right;
	width: 320px;
}

.pro_infor li {

	padding: 0 0 0 10px;
	margin: 0px;
	list-style-type: none;
	line-height: 30px;
	height: 30px;
}

.pro_infor li span {
	width: 100px;
	height: 20px;
	color: rgb(0, 122, 207);
	padding: 3px 20px 3px 3px;
	font-weight: bold;
}

.pro_infor .cpms {
	background-color: #EFEFEF;
	padding: 15px;
}

.pro_infor li p {
	line-height: 21px;
}

.pro_showcon {
	line-height: 30px;
	margin-top: 20px;
	padding-top: 60px;
	background: url(image/pr_infor_top.png) no-repeat left top;
}

.page {
	border-top: dotted 1px #aaaaaa;
	margin-top: 50px;
	padding-top: 5px;
	padding-bottom: 10px;
	line-height: 20px;
	color: #000;
	border-top-style: double;
}

.tr {
	text-align: right;
}

/*大图*/
.tb-pic a {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}

.tb-pic a img {
	vertical-align: middle;
}

.tb-pic a {}


.tb-s310 {
	margin-bottom: 20px;
}

.tb-s310:hover {

	animation-name: hvr-pop;
	animation-duration: .3s;
	animation-timing-function: linear;
	animation-iteration-count: 1;
}

.tb-s310,
.tb-s310 img {
	display: inline-block;
	width: 100%;
	top: 0px;
	left: 0px;
	text-align: center;

}


/* 产品推荐*/
.list_cnotenner {
	width: 100%;
	padding: 0;
	float: left;
	overflow: hidden;

}

#prlist_inner {
	width: 100%;
	height: 68px;
	margin-top: 10px;
	position: relative;
	overflow: hidden;


}

#prlist_carousel div {
	border: 1px solid #999;
	background: #fff;
	width: 52px;
	height: 52px;
	float: left;
	padding: 2px;
	margin: 0 5px;
	text-align: center;
	overflow: hidden;
}

#prlist_carousel div.tb-selected {
	border: 2px solid rgb(247, 52, 52);

}

#prlist_carousel em {
	font-size: 12px;
	font-family: 宋体, Arial, Helvetica, sans-serif;
	font-style: normal;
}

#prlist_carousel img {
	width: 50px;
	height: 50px;
	padding: 0px;
	margin: 0px;
}


#prlist_prev,
#prlist_next {
	display: block;
	width: 20px;
	height: 45px;
	margin-top: -20px;
	position: absolute;
	z-index: 2;

}

#prlist_prev {

	background: url(/images/ui-prev1.png ) no-repeat;
	left: 50%;
	margin-left: -200px;
}

#prlist_prev:hover {
	background: url(/images/ui-prev.png ) no-repeat;
}

#prlist_next {
	background: url(/images/ui-next1.png ) no-repeat;
	right: 50%;
	margin-right: -200px;
}

#prlist_next:hover {
	background: url(/images/ui-next.png ) no-repeat;
}

.pr_main_div h2 {
	font-size: 1.75rem;
	font-weight: bold;
	color: var(--primary-color);
	line-height: 2rem;
	padding-bottom: 2rem;
}

.pr_main_div .pr_shot_content {

	padding-bottom: 2rem;
}

.pr_main_div .pr_item {
	font-size: 1.2rem;
	margin-bottom: 2rem;
}

/*产品明细页选项卡*/
.tabs_control {
	width: 100%;
	background: white;
	border-radius: 5px;
}

.tabs_control .tabs_item {

	display: flex;
	justify-content: left;
	align-items: center;
	background: #eeeeee;
}

.tabs_control .tabs_item div {
	height: 60px;
	display: flex;
	justify-content: left;
	align-items: center;
	font-size: 1.2rem;
	font-weight: 500;
	text-align: center;
	cursor: pointer;
	padding: 0 20px;
	color: var(--g-font-color);
}

.tabs_control .tabs_item span {}

.tabs_control .tabs_content {
	width: 100%;
}

.tabs_control img {
	width: 100%;
	max-width: 96%;
	padding: 3%;
}

.tabs_control .tabs_content div {
	margin: 20px 30px;
	display: none;
	text-align: left;
}



.tabs_control .tabs_item div.active {
	background: white;
	border-top: var(--secondary-color) 4px solid;
	color: var(--primary-color);
}

.tabs_control .tabs_item div:hover {
	background: #f6f6f6;
}