@import url(./titillium.css);
@import url(./fontawesome.css);
@import url(./flickity.css);

html, body{
	background: #e7e7e7;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	font-family: 'titillium', Calibri;
}
a{
	text-decoration: none;
	color: #000000;
}
img{
	border:0;
	display: block;
}
ul{
	margin: 0;
	padding: 0;
	list-style: none;
}
.start {
	flex: 1 0 0;
}
.intro {
	max-width: 90em;
	min-width: 20em;
	margin: 0 auto;
	position: relative;
}
.header{
	position: fixed;
	background: #e7e7e7;
	z-index: 100;
	right: 0;
	left: 0;
	height: 3rem;
}
.header.active{
	border-bottom: 0.0625rem solid #cbcbcb;
	box-shadow: 0 0.25rem 0.5rem #0000000d;
}
.header .logo{
	display: inline-block;
	vertical-align: middle;
}
.header .logo a{
	display: block;
}
.header .logo a img{
	height: 3rem;
	padding: 0.5rem 1rem;
	box-sizing: border-box;
}
.header ul.header-menus{
	display: inline-block;
	vertical-align: middle;
	font-size: .85rem;
}
.header ul.header-menus li{
	display: inline-block;
	padding: 0 1rem;
}
.header ul.header-menus li a{
	color: #000000;
	font-weight: 600;
	display: inline-block;
	padding: 0 1rem;
	position: relative;
}
.header ul.header-menus li a i{
	font-size: .75rem;
	top: 0.35rem;
	margin-left: 0.5rem;
	position: absolute;
	transition: .25s margin-left;
}
.header ul.header-menus li a:hover i{
	margin-left: .75rem;
}
.header .responsive-menu{
	text-align: right;
	vertical-align: middle;
	float: right;
	font-size: 1.5rem;
	box-sizing: border-box;
	padding: 0.5rem;
	height: 3rem;
	cursor: pointer;
	display: none;
}
.responsive-right{
	position: fixed;
	right: 0;
	top: 0;
	bottom: 0;
	width: 15rem;
	background: #fff;
	z-index: 300;
	display: none;
	border-left: .0625rem solid #e7e7e7;
}
.responsive-right .logo{
	box-sizing: border-box;
	padding: 1rem;
	height: 5rem;
}
.responsive-right .logo img{
	width: 10rem;
	margin: auto;
}
.responsive-right ul.menus{
	font-size: 1rem;
	margin-top: 1rem;
	overflow-y: auto;
	height: calc(100% - 6rem);
}
.responsive-right ul.menus li+li{
	border-top: .0625rem solid #e7e7e7;
}
.responsive-right ul.menus li a{
	color: #000000;
	font-weight: 600;
	padding: 0.5rem;
	box-sizing: border-box;
	display: block;
}
.footer{
	padding: 2rem 1rem 1rem 1rem;
	text-align: center;
	font-size: .85rem;
	font-weight: 100;
	background: #dfdfdf;
    margin-top: 2rem;
}
.product{
	max-width: 50rem;
	margin: auto;
	margin-top: 3rem;
	box-sizing: border-box;
	padding: 1rem;
}
.product h1{
	font-size: 2.5rem;
	margin: 0 0 2rem 0;
}
.product .intoimage{
	position: relative;
}
.product .intoimage:before{
	content: '';
	background: #007c7f;
	position: absolute;
	max-width: 35rem;
	height: 75%;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
	border-radius: 1rem;
}
.product img{
	width: 100%;
	max-width: 25rem;
	margin: 1rem auto;
	box-sizing: border-box;
	border-radius: 1rem;
	position: relative;
}
.product .text ul{
	margin: 0 2rem;
	list-style: inside;
}
.product i{
	font-size: .8rem;
}
.product .category{
	display: inline-block;
	color: #000000;
	border-radius: 0.5rem;
	padding: 0.25rem 0.5rem;
}
.product .category:hover{
	color: #007c7f;
}
.product .category h2{
	margin: 0;
	padding: 0;
	font-size: .85rem;
	font-weight: 100;
}
.pagestart{
	margin-top: 3rem;
	box-sizing: border-box;
	padding: 1rem;
}
.pcatgory .category{
	display: inline-block;
	color: #000000;
	padding: 0.25rem 0.5rem;
}
.pcatgory .category:hover{
	color: #007c7f;
}
.pcatgory .category h2,
.pcatgory h2.active{
	margin: 0;
	padding: 0;
	font-size: .85rem;
	font-weight: 100;
}
.pcatgory i{
	font-size: .8rem;
}
.pcatgory h2.active{
	display: inline-block;
	padding: 0.25rem 0.5rem;
	font-weight: 700;
}
.pcatbar{
	background: #ffffff;
	padding: 1rem;
	border-radius: 1rem;
	border: 0.0625rem solid #d5d5d5;
	display: inline-block;
	box-sizing: border-box;
	width: 18rem;
	margin: 1rem 0 0 0;
}
.pcatbar ul{
	font-weight: 600;
}
.pcatbar ul li{
	line-height: 1.75rem;
}
.pcatbar ul li a{
	display: block;
	color: #000000;
}
.post-notfound ul li a {
    color: #000000;
    font-weight: 600;
}
.pcatbar ul li a:hover,
.post-notfound ul li a:hover{
	color: #007c7f;
}
.pcatbar ul.subing{
	font-weight: 400;
	padding: 0.5rem 0 0.5rem 1.5rem;
	font-size: .8rem;
}
.prlist{
	display: flex;
	align-items: flex-start;
}
.pallprbar{
	padding: 1rem 0 0 1rem;
	box-sizing: border-box;
	width: calc(100% - 20rem);
}
.pallprbar ul.plist{
	width: 100%;
	display: table;
}
.pallprbar ul.plist li{
	width: 25%;
	display: inline-block;
	padding: 0.5rem;
	box-sizing: border-box;
}
.pallprbar ul.plist li a{
	width: 100%;
	height: 16rem;
	display: block;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	border-radius: 0.5rem;
	position: relative;
	overflow: hidden;
}
.pallprbar ul.plist li a .newsborder {
	background: #007c7f;
	color: #ffffff;
	padding: 0.5rem 1rem;
	box-sizing: border-box;
	bottom: 0;
	right: 0;
	left: 0;
	position: absolute;
}
.pallprbar ul.plist li a .newsborder p {
	font-size: 1rem;
	font-weight: 700;
	overflow: hidden;
	height: 2.5rem;
	line-height: 1.25rem;
	margin: 0;
}
.posts-paging{
	display: table;
	width: 100%;
	padding: 1rem;
	box-sizing: border-box;
}
.posts-paging .next-page,
.posts-paging .prve-page{
	background: #000000;
    color: #ffffff;
    padding: .5rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 1rem;
    display: inline-block;
}
.posts-paging .next-page.deadtive,
.posts-paging .prve-page.deadtive,
.posts-paging .next-page.deadtive:hover,
.posts-paging .prve-page.deadtive:hover{
	cursor: no-drop;
	background: #d3d3d3;
	user-select: none;
}
.posts-paging .next-page:hover,
.posts-paging .prve-page:hover{
	background: #007c7f;
}
.posts-paging .next-page{
	float: right;
}
.posts-paging .prve-page{
	float: left;
}
.post-notfound{
	margin-top: 2rem;
}
form p{
	text-align: left;
}
input,
textarea{
    width: 100%;
    font-family: 'titillium', Calibri;
    padding: 0.5rem 1rem;
    box-sizing: border-box;
    font-size: .8rem;
    border: 0.0625rem solid #b3b3b3;
    border-radius: 0.5rem;
    margin-top: 0.5rem;
    outline: none;
    direction: ltr;
}
input[type=submit] {
	font-family: 'titillium', Calibri;
}
.cover{
	background: #a7a7a7ba;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	position: fixed;
	cursor: pointer;
	opacity: 0;
	z-index: 250;
	pointer-events: none;
	user-select: none;
	transition: .25s all;
}
.partners{
	text-align: center;
}
.partners h1,
.hsolutions h1{
	font-size: 1.25rem;
	text-align: center;
}
.partners ul li{
	display: inline-block;
	margin: 0 0.5rem;
}
.partners ul li img{
	border-radius: 100%;
	width: 6rem;
	display: block;
}
ul.productslist{
	width: 100%;
	display: table;
}
ul.productslist li{
	width: 20%;
	display: inline-block;
	padding: 0.5rem;
	box-sizing: border-box;
}
ul.productslist li a{
	width: 100%;
	height: 16rem;
	display: block;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	border-radius: 0.5rem;
	position: relative;
	overflow: hidden;
}
ul.productslist li a .newsborder {
	background: #007c7f;
	color: #ffffff;
	padding: 0.5rem 1rem;
	box-sizing: border-box;
	bottom: 0;
	right: 0;
	left: 0;
	position: absolute;
}
ul.productslist li a .newsborder p {
	font-size: 1rem;
	font-weight: 700;
	overflow: hidden;
	height: 2.5rem;
	line-height: 1.25rem;
	margin: 0;
}
ul.productslist li a.more{
	background: #dddddd;
	border: 0.2rem dashed #b5b5b5;
	box-sizing: border-box;
	padding: 6rem 0;
	font-weight: 700;
	font-size: 2rem;
	text-align: center;
}
.hsolutions{
	padding-top: 2rem;
}
.slider li{
	width: 100%;
}
.slider img{
	width: 100%;
	border-radius: 1rem;
	display: block;
}
@media only screen and (max-width: 75em){
	.pallprbar ul.plist li,
	ul.productslist li{
		width: 33.333333%;
	}
}
@media only screen and (max-width: 60em){
	.pallprbar ul.plist li,
	ul.productslist li{
		width: 50%;
	}
}
@media only screen and (max-width: 50em){
	.header .responsive-menu{
		display: block;
	}
	.header ul.header-menus{
		display: none;
	}
	.responsive-right{
		display: block;
		transform: translate(100%, 0);
		transition: .25s transform;
	}
	.responsive-right.active{
		transform: translate(0, 0);
	}
	.header,
	.footer,
	.intro{
		transition: .25s transform;
	}
	.header.open,
	.footer.active,
	.intro.active{
		transform: translate(-15rem, 0);
	}
	.product .category:hover,
	.post-notfound ul li a:hover{
		color: #000000;
	}
	.pallprbar ul.plist li,
	ul.productslist li{
		width: 100%;
	}
	.prlist{
		display: block;
	}
	.pcatbar{
		width: 100%;
		display: block;
	}
	.pallprbar,
	.posts-paging{
		padding: 0;
		width: 100%;
	}
	.pallprbar ul.plist li{
		padding: 0.5rem 0;
	}
	.posts-paging .next-page,
	.posts-paging .prve-page{
		display: block;
		float: unset;
		margin: .5rem 0;
	}
	.cover.active {
	    opacity: 1;
	    user-select: all;
	    pointer-events: all;
	}
	.partners ul li img{
		width: 4rem;
	}
}