@charset "utf-8";
html, body {
	height: 100%;
	width: 100%;
	margin:0;
	padding:0;
	font-family: 'Open Sans', sans-serif;
	font-weight:300;
	font-size:18px;
	color:#403F41;
}

/* == preloader == */
.preloader {
	position:fixed;
	width:100%;
	height:100%;
	top:0;
	left:0;
	background:#fff;
	z-index:99;
}
.preloader .inner {
	position:absolute;
	left: 50%;
	top: 50%;
	height: 20px;
	width: 100px;
	transform:translate(-50%, -50%);
}
.object{
	width: 20px;
	height: 20px;
	background-color: #61EBBF;
	-moz-border-radius: 50% 50% 50% 50%;
	-webkit-border-radius: 50% 50% 50% 50%;
	border-radius: 50% 50% 50% 50%;
	margin-right: 20px;
	margin-bottom: 20px;
	position: absolute;	
}


#object_one{
	-webkit-animation: object 2s linear infinite;
	 animation: object 2s linear infinite;
	 }
#object_two{ 
	-webkit-animation: object 2s linear infinite -.4s;
	animation: object 2s linear infinite -.4s;
	 }
#object_three{ 
	-webkit-animation: object 2s linear infinite -.8s; 
	animation: object 2s linear infinite -.8s; 
	}
#object_four{ 
	-webkit-animation: object 2s linear infinite -1.2s;
	animation: object 2s linear infinite -1.2s; 
	} 
#object_five{ 
	-webkit-animation: object 2s linear infinite -1.6s; 
	animation: object 2s linear infinite -1.6s; 
	}
	
	
@-webkit-keyframes object{
  0% { left: 100px; top:0}
  80% { left: 0; top:0;}
  85% { left: 0; top: -20px; width: 20px; height: 20px;}
  90% { width: 40px; height: 15px; }
  95% { left: 100px; top: -20px; width: 20px; height: 20px;}
  100% { left: 100px; top:0; }		
	
}		
@keyframes object{
  0% { left: 100px; top:0}
  80% { left: 0; top:0;}
  85% { left: 0; top: -20px; width: 20px; height: 20px;}
  90% { width: 40px; height: 15px; }
  95% { left: 100px; top: -20px; width: 20px; height: 20px;}
  100% { left: 100px; top:0; }
}


/* == elements == */
a {
	text-decoration:none;
	color:#403F41;
}
p {
	padding:0;
	margin:0;
}
img {
	border:0;
}
.clear {
	clear:both;
}

/* == line == */
.line {
	position:relative;
	width:calc(100% - 100px);
	max-width:2200px;
	margin:0 auto;
	border-radius:3px;
}
.line.middle {
	max-width:1340px;
}
.line.full {
	height:100%;
	min-height:550px;
}
.line.full-menu {
	height:calc(100% - 95px);
	min-height:550px;
}
.line.half {
	height:50%;
	min-height:300px;
}

/* == line - colors == */
.line.light {
	background:#f3f3f3;
}
@media screen and (max-width: 1200px) {
	.line.full {
		height:auto;
		min-height:0;
	}
	.line.full-menu {
		height:auto;
		min-height:0;
	}
	.line.half {
		height:auto;
		min-height:0;
	}
}
@media screen and (max-width: 700px) {
	.line {
		width:100%;
		margin:0;
		border-radius:0;
	}
}

/* == icons == */
.ico::before {
	position:absolute;
	display:block;
	width:100%;
	height:100%;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	background-repeat:no-repeat;
	background-size:400% 200%;
	content:'';
}
.ico.white::before {
	filter:invert(1) brightness(100);
}
.ico.nav::before {
	background-image:url(../image/ico-nav.svg);
}
.ico.info::before {
	background-image:url(../image/ico-info.svg);
}
.ico.category::before {
	background-image:url(../image/ico-category.svg);
}
.ico.social.fb::before {
	background-image:url(../image/ico-social-fb.svg);
	background-size:100% 100%;
}
.ico.social.insta::before {
	background-image:url(../image/ico-social-insta.svg);
	background-size:100% 100%;
}
.ico.close::before {
	background-position:33.33% 0;
}
.ico.phone::before {
	background-position:66.66% 100%;
	background-size:400% 200%;
}
.ico.map::before {
	background-position:0% 100%;
	background-size:400% 200%;
}
.ico.mail::before {
	background-position:100% 100%;
	background-size:400% 200%;
}
.ico.time::before {
	background-position:33.33% 100%;
	background-size:400% 200%;
}

/* == top == */
.top {
	position:relative;
	width:100%;
	height:95px;
}
@media screen and (max-width: 700px) {
	.top {
		width:calc(100% - 60px);
		left:30px;
		height:80px;
	}
}

/* == top - logo == */
.top .logo {
	position:relative;
	width:138px;
	height:52px;
	float:left;
	top:21px;
}
.top .logo a {
	position:relative;
	display:block;
	width:100%;
	height:100%;
	background:url(../image/logo.svg) 0 0 no-repeat;
	background-size:100% 100%;
}
@media screen and (max-width: 700px) {
	.top .logo {
		position:relative;
		width:92px;
		height:35px;
		float:left;
		top:22px;
	}
}

/* == top - menu == */
.top .menu {
	position:relative;
	float:right
}
.top .menu ul {
	position:relative;
	display:block;
	margin:0;
	padding:0;
	list-style:none;
	float:left;
}
.top .menu ul li {
	position:relative;
	display:block;
	margin:0;
	padding:0;
	float:left;
	line-height:95px;
}
.top .menu ul li a {
	position:relative;
	display:block;
	padding:0 30px;
	font-size:20px;
	transition: all 0.2s ease-in-out;
}
.top .menu ul li a:hover {
	color: #61EBBF;
}
.top .menu ul li ul {
	position:absolute;
	display:block;
	top:80px;
	left:50%;
	transform:translateX(-50%) scale(0.9,0.7);
	z-index:-1;
	transition: all 0.2s ease-in-out;
	opacity:0;
	transform-origin:50% 0%;
	box-shadow:0 3px 3px rgba(0, 0, 0, 0.2);
}
.top .menu ul li:hover ul {
	opacity:1;
	transform:translateX(-50%) scale(1,1);
	z-index:30;
}
.top .menu ul li ul .arrow {
	position:absolute;
	display:block;
	width:20px;
	height:20px;
	top:0;
	left:50%;
	transform:translateX(-50%) rotate(45deg);
	background:#f3f3f3;
	z-index:1;
	border-radius:3px;
	content:'';
	transition: all 0.2s ease-in-out;
}
.top .menu ul li:hover ul .arrow {
	top:-8px;
}
.top .menu ul li ul li:first-of-type:hover ~ .arrow {
	background:#61EBBF;
}
.top .menu ul li ul li {
	float:none;
	overflow:hidden;
	background:#f3f3f3;
	z-index:2;
}
.top .menu ul li ul li:first-of-type {
	border-radius:2px 2px 0 0;
}
.top .menu ul li ul li:last-of-type {
	border-radius:0 0 2px 2px;
}
.top .menu ul li ul li a {
	padding:0 25px;
	white-space:nowrap;
	line-height:50px;
	font-size:16px;
	min-width:250px;
	color: #403F41;
}
.top .menu ul li ul li:hover a {
	background:#61EBBF;
	color: #403F41;
}
.top .menu .phone {
	position:relative;
	float:left;
	line-height:95px;
	font-size:20px;
	padding:0 0 0 90px;
}
.top .menu .phone a {
	display:block;
	color: #403F41;
	transition: all 0.2s ease-in-out;
}
.top .menu .phone a:hover {
	color: #61EBBF;
}
.top .menu .phone::before {
	position:absolute;
	display:block;
	width:4px;
	height:20px;
	top:50%;
	left:30px;
	border-radius: 2px;
	transform:translateY(-50%);
	background: #403F41;
	content:'';
}
.top .social {
	position:relative;
	display:block;
	float:right;
	overflow:hidden;
	padding:32px 0 0 20px;
}
.top .social a {
	position:relative;
	display:block;
	float:left;
	width:30px;
	height:30px;
	border-radius:3px;
	overflow:hidden;
	margin:0 0 0 10px;
}
.top .social a.fb {
	background-color: #403F41;
}
.top .social a.fb:hover {
	background-color: #3b5998;
}
.top .social a.insta {
	background-color: #403F41;
}
.top .social a.insta:hover {
	background-color: #c13584;
}
.top .social .ico {
	position:relative;
	display:block;
	float:left;
	width:80%;
	height:80%;
	overflow:hidden;
	margin:10%;
	padding:0;
}
@media screen and (max-width: 1200px) {
	.top .menu {
		position:absolute;
		top:95px;
		right:0;
		min-width:350px;
		background:#f3f3f3;
		box-shadow:0 3px 3px rgba(0, 0, 0, 0.1);
		overflow:hidden;
		border-radius:3px;
		z-index:-1;
		opacity:0;
		transition: all 0.3s ease-in-out;
	}
	.top .menu.on {
		z-index:30;
		opacity:1;
	}
	.top .menu ul {
		float:none;
	}
	.top .menu ul::after {
		position:absolute;
		display:block;
		width:calc(100% - 50px);
		height:18px;
		left:25px;
		bottom:-6px;
		font-size:18px;
		line-height:18px;
		white-space:nowrap;
		overflow:hidden;
		z-index:5;
		opacity:0.2;
		content:'- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ';
	}
	.top .menu ul li {
		line-height:50px;
		float:none;
	}
	.top .menu ul li a {
		color:#403F41;
	}
	.top .menu ul li.expand > a {
		pointer-events:none;
		color:#403F41;
	}
	.top .menu ul li:hover a {
		background:#61EBBF;
		color:#403F41;
	}
	.top .menu ul li.expand:hover a {
		background:#f3f3f3;
	}
	.top .menu ul li a {
		padding:0 25px;
	}
	.top .menu ul li a::before {
		position:absolute;
		display:none;
		width:calc(100% - 50px);
		height:18px;
		left:25px;
		bottom:-6px;
		font-size:18px;
		line-height:18px;
		white-space:nowrap;
		overflow:hidden;
		z-index:5;
		opacity:0.2;
		content:'- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ';
	}
	.top .menu ul li.expand a::after {
		position:absolute;
		display:block;
		width:30px;
		height:30px;
		right:10px;
		bottom:10px;
		background:url(../image/ico-nav.svg) 66.66% 0% no-repeat;
		background-size:400% 200%;
		z-index:5;
		transform:rotate(90deg);
		content:'';
		transition: all 0.2s ease-in-out;
	}
	.top .menu ul li.expand.on a::after {
		transform:rotate(-90deg);
	}
	.top .menu ul li.expand ul li a::after {
		display:none;
	}
	.top .menu ul li ul {
		position:relative;
		left:auto;
		top:auto;
		opacity:1;
		z-index:2;
		transform:none;
		box-shadow:none;
		max-height:0;
		overflow:hidden;
		transition: all 0.2s ease-in-out;
	}
	.top .menu ul li:hover ul {
		transform:none;
	}
	.top .menu ul li.on ul {
		max-height:1000px;
	}
	.top .menu ul li ul::before {
		position:absolute;
		display:block;
		width:calc(100% - 50px);
		height:18px;
		left:25px;
		top:-6px;
		font-size:18px;
		line-height:18px;
		white-space:nowrap;
		overflow:hidden;
		z-index:5;
		opacity:0.2;
		content:'- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ';
	}
	.top .menu ul li ul::after {
		position:absolute;
		display:block;
		width:calc(100% - 50px);
		height:18px;
		left:25px;
		bottom:-6px;
		font-size:18px;
		line-height:18px;
		white-space:nowrap;
		overflow:hidden;
		z-index:5;
		opacity:0.2;
		content:'- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ';
	}
	.top .menu ul li ul li a::before {
		position:relative;
		display:block;
		float:left;
		padding:0 10px 0 0;
		white-space:nowrap;
		content:'';
	}
	.top .menu ul li:hover ul li a {
		background:#f3f3f3;
		color:#403F41;
		font-size:16px;
	}
	.top .menu ul li.expand ul li:hover a {
		background:#61EBBF;
		color:#403F41;
	}
	.top .menu ul li ul li a::before {
		position:absolute;
		display:none;
		width:calc(100% - 50px);
		height:18px;
		left:25px;
		bottom:0;
		z-index:5;
		content:'';
		border-bottom:1px solid #403F41;
		opacity:0.05;
	}
	.top .menu .phone {
		position:relative;
		float:right;
		line-height:80px;
		font-size:18px;
		padding:0 20px 0 0;
	}
	.top .menu .phone::before {
		position:absolute;
		display:block;
		width:4px;
		height:20px;
		top:50%;
		left:-20px;
		border-radius: 2px;
		transform:translateY(-50%);
		background: #403F41;
		content:'';
	}
	.top .social {
		display:block;
		float:left;
		padding: 20px 0 0 20px;
	}
	.top .social a {
		position:relative;
		display:block;
		float:left;
		width:40px;
		height:40px;
		border-radius:3px;
		overflow:hidden;
		margin:0 10px 0 0;
	}
	.top .social a.fb {
		background-color: #3b5998;
	}
	.top .social a.insta {
		background-color: #c13584;
	}
}
@media screen and (max-width: 700px) {
	.top .menu {
		top:80px;
	}
}
@media screen and (max-width: 500px) {
	.top .menu {
		width:100%;
		min-width:0;
	}
	.top .menu ul {
		width:100%;
		min-width:0;
	}
	.top .social a {
		margin:0 10px 0 0;
	}
	.top .menu .phone::before {
		display:none;
	}
}

/* == top - menu == */
.top .menu-button {
	position:relative;
	display:none;
	float:right;
	width:50px;
	height:50px;
	background:#f3f3f3;
	border-radius:3px;
	margin:21px 0 0 0;
}
.top .menu-button::before, .top .menu-button::after {
	display:block;
	position:absolute;
	width:100%;
	height:100%;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	background-image:url(../image/ico-nav.svg);
	background-size:400% 200%;
	content:'';
	transition: all 0.2s ease-in-out;
}
.top .menu-button::before {
	background-position:0% 0%;
	opacity:1;
}
.top .menu-button::after {
	background-position:33.33% 0%;
	opacity:0;
}
.top .menu-button.on::before, .top .menu-button.on::after {
	transform:translate(-50%, -50%) scale(0.8);
}
.top .menu-button.on::before {
	opacity:0;
}
.top .menu-button.on::after {
	opacity:1;
}
@media screen and (max-width: 1200px) {
	.top .menu-button {
		display:block;
	}
}
@media screen and (max-width: 700px) {
	.top .menu-button {
		margin:15px 0 0 0;
	}
}

/* == grid == */
.grid {
	position:relative;
	width:calc(100% + 50px);
	left:-25px;
}
.full .grid, .full-menu .grid, .half .grid {
	position:relative;
	height:100%;
}
.grid.space-top {
	margin:50px 0 0 0;
}
.grid.space-bottom {
	margin:0 0 50px 0;
}
.grid .box {
	position:relative;
	float:left;
	margin:0 25px 50px 25px;
	overflow:hidden;
	background:#f3f3f3;
	border-radius:3px;
}
.grid .box.left {
	float:left;
}
.grid .box.right {
	float:right;
}
.grid .box.w-1-1 {
	width:calc(100% - 50px);
}
.grid .box.w-1-2 {
	width:calc(50% - 50px);
}
.grid .box.w-1-3 {
	width:calc(33.33% - 50px);
}
.grid .box.w-2-3 {
	width:calc(66.66% - 50px);
}
.grid .box.w-1-4 {
	width:calc(25% - 50px);
}
.grid .box.w-1-5 {
	width:calc(20% - 50px);
}
.grid .box::before {
	position:relative;
	display:block;
	width:100%;
	content:'';
	z-index:-1;
}
.grid .box.p-1-1::before {
	padding:100% 0 0 0;
}
.grid .box.p-1-2::before {
	padding:50% 0 0 0;
}
.grid .box.p-2-3::before {
	padding:75% 0 0 0;
}
.grid .box.auto::before {
	display:none;
}
.full .grid .box::before, .full-menu .grid .box::before, .half .grid .box::before {
	display:none;
}
.full .grid .box.p-1-1, .full-menu .grid .box.p-1-1, .half .grid .box.p-1-1 {
	height:calc(100% - 50px);
}
.full .grid .box.p-1-2, .full-menu .grid .box.p-1-2, .half .grid .box.p-1-2 {
	height:calc(50% - 50px);
}
.grid .box a {
	position:absolute;
	display:block;
	width:100%;
	height:100%;
	top:0;
	left:0;
	z-index:6;
}
.grid .box .image {
	position:absolute;
	width:100%;
	height:100%;
	top:50%;
	left:50%;
	transform-origin:50% 50%;
	transform:translate(-50%, -50%) scale(1);
	background-position:50% 50%;
	background-repeat:no-repeat;
	background-size:cover;
	opacity:1;
	z-index:2;
	transition: all 0.2s linear;
}
.grid .box:hover .image {
	transform:translate(-50%, -50%) scale(1.1);
}
@media screen and (max-width: 1200px) {
	.grid .box::before {
		position:relative;
		display:block;
		width:100%;
		padding:60% 0 0 0;
		content:'';
	}
	.full .grid .box::before, .full-menu .grid .box::before, .half .grid .box::before {
		display:block;
	}
	.grid .box.w-1-2, .grid .box.w-1-3, .grid .box.w-2-3, .grid .box.w-1-4, .grid .box.w-1-5 {
		width:calc(50% - 50px);
	}
	.grid .box.p-1-1 {
		height:auto;
	}
	.grid .box.p-1-2 {
		height:auto;
	}
	.full .grid .box.p-1-1, .full-menu .grid .box.p-1-1, .half .grid .box.p-1-1 {
		height:auto;
	}
	.full .grid .box.p-1-2, .full-menu .grid .box.p-1-2, .half .grid .box.p-1-2 {
		height:auto;
	}
	.grid .box.p-1-1::before, .grid .box.p-1-2::before {
		padding:100% 0 0 0;
	}
}
@media screen and (max-width: 1000px) {
	.full .grid, .full-menu .grid, .half .grid {
		height:auto;
	}
	.grid .box.p-1-1::before, .grid .box.p-1-2::before {
		padding:100% 0 0 0;
	}
	.full .grid .box::before, .full-menu .grid .box::before, .half .grid .box::before {
		display:block;
	}
}
@media screen and (max-width: 700px) {
	.grid {
		width:calc(100% - 60px);
		left:30px;
	}
	.grid.space-top {
		margin:30px 0 0 0;
	}
	.grid.space-bottom {
		margin:0 0 30px 0;
	}
	.grid .box {
		margin:0 0 30px 0;
	}
	.grid .box.w-1-1 {
		width:100%;
	}
	.grid .box.w-1-2 {
		width:100%;
	}
	.grid .box.w-1-3 {
		width:100%;
	}
	.grid .box.w-2-3 {
		width:100%;
	}
	.grid .box.w-1-4 {
		width:100%;
	}
	.grid .box.w-1-5 {
		width:100%;
	}
	.grid .box.p-1-1 {
		height:auto;
	}
	.grid .box.p-1-2 {
		height:auto;
	}
}

/* == grid - offer == */
.grid.offer .title {
	position:absolute;
	width:calc(100% - 80px);
	left:40px;
	bottom:40px;
	z-index:3;
	mix-blend-mode: normal;
}
.grid.offer .title.white {
	color:#fff;
}
.grid.offer .title h3 {
	position:relative;
	font-size:42px;
	line-height:42px;
	font-weight:300;
	text-transform:uppercase;
	padding:0 0 10px 0;
	margin:0;
}
.grid.offer .title h4 {
	position:relative;
	font-size:20px;
	line-height:20px;
	font-weight:300;
	padding:0;
	margin:0;
}
.grid .box.auto:hover .image {
	transform:translate(-50%, -50%) scale(1);
}
.grid.offer .box.auto::before  {
	position:absolute;
	display:block;
	width:100%;
	height:100%;
	top:0;
	left:0;
	content:'';
	z-index:3;
	opacity:0.7;
}
.grid.offer .box.auto .center  {
	position:relative;
	margin:0 auto;
	width:calc(100% - 100px);
	max-width:700px;
	padding:150px 50px;
	text-align:center;
	z-index:4;
}
.grid.offer .box.auto.dark .center {
	color:#fff;
}
.grid.offer .box.auto .center h3  {
	position:relative;
	display: block;
	padding:0 0 40px 0;
	margin:0;
	text-transform:uppercase;
	font-size:62px;
	line-height:62px;
	font-weight:300;
}
.grid.offer .box.auto .center h4  {
	position:relative;
	display: block;
	padding:0;
	margin:0;
	font-size:24px;
	line-height:24px;
	font-weight:300;
}
.grid.offer .box.auto .center a {
    position: relative;
    display: inline-block;
    width: 250px;
	margin:40px 0 0 0;
    line-height: 60px;
    color: #403F41;
    font-size: 16px;
    text-transform: uppercase;
    text-align: center;
    background: #61EBBF;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}
.grid.offer .box.auto .center a:hover {
    color: #403F41;
	background:#fff;
}
.grid.offer .box.auto.dark::before  {
	background:#403F41;
}
.grid.offer .box.auto.light::before  {
	background:#f3f3f3;
}
.grid.offer .box.auto.green::before  {
	background: #61EBBF;
}
@media screen and (max-width: 1500px) {
	.grid.offer .title h3 {
		font-size:32px;
		line-height:32px;
	}
	.grid.offer .title h4 {
		font-size:18px;
		line-height:18px;
	}
}
@media screen and (max-width: 1300px) {
	.grid.offer .title h3 {
		font-size:32px;
		line-height:32px;
	}
	.grid.offer .title h4 {
		font-size:16px;
		line-height:16px;
	}
}
@media screen and (max-width: 1200px) {
	.grid .box.p-1-1::before, .grid .box.p-1-2::before {
		padding:100% 0 0 0;
	}
	.grid.offer .box.auto .center  {
		padding:100px 50px;
	}
	.grid.offer .box.auto .center h3  {
		padding:0 0 30px 0;
		font-size:42px;
		line-height:42px;
	}
	.grid.offer .box.auto .center h4  {
		font-size:18px;
		line-height:18px;
	}
}
@media screen and (max-width: 1000px) {
	.grid.offer .title {
		width:calc(100% - 40px);
		left:20px;
		bottom:20px;
	}
	.grid.offer .title h3 {
		font-size:24px;
		line-height:24px;
	}
	.grid.offer .title h4 {
		font-size:16px;
		line-height:16px;
	}
}
@media screen and (max-width: 700px) {
	.grid.offer .box.auto .center  {
		padding:70px 30px;
		width:calc(100% - 60px);
	}
	.grid.offer .box.auto .center h3  {
		padding:0 0 30px 0;
		font-size:32px;
		line-height:32px;
	}
	.grid.offer .box.auto .center h4  {
		font-size:16px;
		line-height:16px;
	}
}
@media screen and (max-width: 500px) {
	.grid.offer .box.auto .center a {
		width: 100%;
		line-height: 50px;
		font-size: 14px;
	}
}


/* == grid - portfolio == */
.grid.portfolio {
	position:relative;
	padding:50px 0 0 0;
	overflow:hidden;
}
.grid.portfolio .box::after {
	position:absolute;
	display:block;
	width:100%;
	height:100%;
	top:0;
	left:0;
	background: #61EBBF;
	z-index:2;
	opacity:0;
	transition: all 0.2s linear;
	content:'';
}
.grid.portfolio .box:hover::after {
	opacity:0.9;
}
.grid.portfolio .title {
	position:absolute;
	width:calc(100% - 80px);
	height:calc(100% - 80px);
	left:50%;
	top:50%;
	z-index:3;
	transform:translate(-50%, -50%);
	mix-blend-mode: normal;
	transition: all 0.2s linear;
	opacity:0;
}
.grid.portfolio .box:hover .title {
	opacity:1;
}
.grid.portfolio .title h3 {
	position:absolute;
	width:100%;
	padding:0;
	margin:0;
	bottom:calc(50% + 10px);
	text-align:center;
	font-size:32px;
	text-transform:uppercase;
	font-weight:300;
	transition: all 0.2s ease-in-out;
}
.grid.portfolio .box:hover .title h3 {
	bottom:calc(50% + 20px);
}
.grid.portfolio .title h4 {
	position:relative;
	width:100%;
	padding:0;
	margin:0;
	top:calc(50% + 10px);
	text-align:center;
	font-size:16px;
	font-weight:300;
	transition: all 0.2s ease-in-out;
}
.grid.portfolio .box:hover .title h4 {
	top:calc(50% + 20px);
}
.grid.portfolio .title::before {
	position:absolute;
	display:block;
	width:10%;
	height:2px;
	top:50%;
	left:50%;
	background:#403F41;
	border-radius:3px;
	transform:translate(-50%, -50%);
	content:'';
	transition: all 0.2s ease-in-out;
	opacity:0;
}
.grid.portfolio .box:hover .title::before {;
	opacity:1;
	width:100%;
}
@media screen and (max-width: 1500px) {
	.grid.portfolio .title h3 {
		font-size:32px;
		line-height:32px;
	}
	.grid.portfolio .title h4 {
		font-size:18px;
		line-height:18px;
	}
}
@media screen and (max-width: 1300px) {
	.grid.portfolio .title h3 {
		font-size:32px;
		line-height:32px;
	}
	.grid.portfolio .title h4 {
		font-size:16px;
		line-height:16px;
	}
}
@media screen and (max-width: 1000px) {
	.grid.portfolio .title h3 {
		font-size:24px;
		line-height:24px;
	}
	.grid.portfolio .title h4 {
		font-size:16px;
		line-height:16px;
	}
}
@media screen and (max-width: 1000px) {
	.grid.portfolio {
		padding:30px 0 0 0;
	}
}


/* == grid - gallery == */
.grid.gallery {
	position:relative;
	padding:0;
	overflow:hidden;
}
.content .grid.gallery {
	left:-75px;
}
.grid.gallery.margin {
	padding:50px 0 0 0;
}
.grid.gallery .box {
	background:#403F41;
}
.grid.gallery .box.back {
	background:#f3f3f3;
}
.grid.gallery .box a {
	position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top:0;
    left:0;
	transition: all 0.2s ease-in-out;
}
.grid.gallery .box.back:hover a {
	background: #61EBBF;
}
.grid.gallery .box a img {
	position: absolute;
    display: block;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    top: 50%;
    left: 50%;
    object-fit: cover;
    transform: translate(-50%, -50%) scale(1);
    transition: all 0.2s ease-in-out;
}
.grid.gallery .box:hover a img {
	opacity:0.3;
	filter:grayscale(100%);
	width: calc(110% + 4px);
    height: calc(110% + 4px);
}
.grid.gallery .box::after {
	position:absolute;
	display:block;
	width:40px;
	height:40px;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%) scale(1.3);
	background:url(../image/ico-info.svg) 66.66% 0% no-repeat;
	background-size:400% 200%;
	background-position:0 0;
	filter:brightness(600%);
	opacity:0;
	content:'';
	z-index:10;
	transition: all 0.2s ease-in-out;
	pointer-events:none;
}
.grid.gallery .box:hover::after {
	transform:translate(-50%, -50%) scale(1);
	opacity:1;
}
.grid.gallery .box.back::after {
	display:none;
}
.grid.gallery .box.back a .arrow {
	position: absolute;
    display: block;
    width: 50px;
	height:50px;
    top: calc(50% - 50px);
    left: 50%;
	background-image: url(../image/ico-nav.svg);
    background-size: 400% 200%;
	background-position: 100% 0;
    transform: translate(-50%, -50%) rotate(180deg);
    transition: all 0.2s ease-in-out;
}
.grid.gallery .box.back a h2 {
	position: absolute;
    display: block;
    width: 80%;
    top: calc(50% + 50px);
    left: 50%;
	text-align:center;
	text-transform:uppercase;
	font-size:18px;
	font-weight:300;
    transform: translate(-50%, -50%);
    transition: all 0.2s ease-in-out;
}
@media screen and (max-width: 1500px) {
	.grid.gallery .title h3 {
		font-size:32px;
		line-height:32px;
	}
	.grid.gallery .title h4 {
		font-size:18px;
		line-height:18px;
	}
}
@media screen and (max-width: 1300px) {
	.grid.gallery .title h3 {
		font-size:32px;
		line-height:32px;
	}
	.grid.gallery .title h4 {
		font-size:16px;
		line-height:16px;
	}
}
@media screen and (max-width: 1000px) {
	.grid.gallery .title h3 {
		font-size:24px;
		line-height:24px;
	}
	.grid.gallery .title h4 {
		font-size:16px;
		line-height:16px;
	}
}
@media screen and (max-width: 1000px) {
	.grid.gallery {
		padding:30px 0 0 0;
	}
}

/* == filter == */
.filter {
	position:relative;
	overflow:hidden;
	width:100%;
}
.filter h3 {
	position:relative;
	display:block;
	overflow:hidden;
	line-height:60px;
	font-size:24px;
	font-weight:300;
	margin:0;
	padding:0 60px 0 0;
	text-transform:uppercase;
	float:left;
}
.filter h3::after {
    position: absolute;
    display: block;
    width: 4px;
    height: 20px;
    top: 50%;
    right: 30px;
    border-radius: 2px;
    transform: translateY(-50%);
    background: #403F41;
    content: '';
}
.filter .box {
	position:relative;
	overflow:hidden;
	height:60px;
	line-height:60px;
	overflow:hidden;
	margin:0 20px 0 0;
	border-radius:3px;
	float:left;
	cursor:pointer;
	transition: all 0.2s ease-in-out;
}
.filter .box label {
	position:relative;
	display:block;
	overflow:hidden;
	height:60px;
	padding:0 30px 0 30px;
	line-height:60px;
	overflow:hidden;
	float:left;
	background:#f3f3f3;
	cursor:pointer;
	transition: all 0.2s ease-in-out;
}
.filter .box:hover label {
	color:#fff;
	background: #403F41;
}
.filter .box input[type="radio"]:checked + label  {
	color:#403F41;
	background: #61EBBF;
	pointer-events:none;
}
.filter .box.active:hover label {
	color:#fff;
	background: #403F41;
}
.filter .box input {
	display:none;
}
@media screen and (max-width: 1550px) {
	.filter {
		position:relative;
		overflow:hidden;
		width: calc(100% - 100px);
    	margin: 0 50px;
	}
	.filter h3 {
		padding:0 0 0 30px;
		width:calc(100% - 30px);
	}
	.filter h3::after {
		width:3px;
		left: 0px;
		right:auto;
	}
}
@media screen and (max-width: 1000px) {
	.filter {
		width: calc(100% - 80px);
    	margin: 0 40px;
	}
	.filter h3 {
		margin:0 0 0 10px;
	}
	.filter .box {
		line-height:50px;
		margin:10px 10px 0 10px;
	}
}
@media screen and (max-width: 750px) {
	.filter {
		width: calc(100% - 60px);
    	margin: 0 30px;
	}
	.filter h3 {
		margin:0;
		line-height:normal;
	}
	.filter .box {
		line-height:50px;
		height:50px;
		width:100%;
		margin:10px 0 0 0;
	}
	.filter .box label {
		width:calc(100% - 40px);
		padding:0 20px;
		line-height:50px;
		height:50px;
	}
}
@media screen and (max-width: 750px) {
	.filter {
		width: calc(100% - 60px);
    	margin: 0 30px;
	}
	.filter h3 {
		font-size:18px;
		margin:0 0 20px 0;
	}
	.filter h3::after {
		height:100%;
	}
	.filter .box {
		line-height:50px;
		height:50px;
		width:100%;
		margin:10px 0 0 0;
	}
	.filter .box label {
		width:calc(100% - 40px);
		padding:0 20px;
		line-height:50px;
		height:50px;
		font-size:16px;
	}
}


/* == gallery - sides == */
.gallery-sides {
	position:relative;
	overflow:hidden;
	width:100%;
	padding:50px 0 0 0;
}
.gallery-sides .left, .gallery-sides .right {
	position:relative;
	overflow:hidden;
	width:calc(50% - 50px);
}
.gallery-sides .left {
	float:left;
}
.gallery-sides .right {
	float:right;
}
@media screen and (max-width: 1000px) {
	.gallery-sides .left, .gallery-sides .right {
		width:100%;
		float:left;
	}
	.gallery-sides .left {
		order:2;
	}
	.gallery-sides .right {
		order:1;
	}
}
@media screen and (max-width: 700px) {
	.gallery-sides {
		width:calc(100% - 40px);
		padding:50px 20px 0 20px;
	}
}

/* == movies == */
.movies {
	position:relative;
	overflow:hidden;
	width:100%;
	padding:50px 0 0 0;
}
.movies .gallery-video {
	position:relative;
	overflow:hidden;
	width:100%;
	margin:0 0 50px 0;
	overflow:hidden;
	border-radius:3px;
}
.movies .gallery-video:last-of-type {
	margin:0;
}
.movies .gallery-video .video {
	position:relative;
	flat:left;
	width:100%;
	padding:56.3% 0 0 0;
}
.movies .gallery-video .video iframe {
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
}
@media screen and (max-width: 1000px) {
	.movies {
		padding:0 0 20px 0;
	}
}
@media screen and (max-width: 700px) {
	.movies .gallery-video {
		width:calc(100% - 60px);
		margin:0 30px 50px 30px;
	}
	.movies .gallery-video:last-of-type {
		margin:0 30px;
	}
}


/* == content == */
.content {
	position:relative;
	width:calc(100% - 100px);
	margin:0 50px;
	display:flex;
	align-items: center
}
.content.block {
	display:block;
}
.content .center {
	width:100%;
	max-width:1300px;
	margin:0 auto;
}
.content .left, .content .right {
	position:relative;
	width:50%;
}
.content .left {
	order:1;
}
.content.block .left {
	float:left;
}
.content .right {
	order:2;
}
.content.block .right {
	float:left;
}
.content .left .inner, .content .right .inner {
	position:relative;
	width:calc(100% - 120px);
	max-width:550px;
}
.content .left .inner {
	right:120px;
	float:right;
}
.content .right .inner {
	left:120px;
	float:left;
}
.content .left.whole .inner, .content .right.whole .inner {
	width:100%;
	max-width:100%;
	left:auto;
	right:auto;
}
@media screen and (max-width: 1550px) {
	.content .left .inner, .content .right .inner {
		width:calc(100% - 50px);
	}
	.content .left .inner {
		right:50px;
	}
	.content .right .inner {
		left:50px;
	}
}
@media screen and (max-width: 1000px) {
	.content {
		display:block;
	}
	.content .left, .content .right {
		width:100%;
	}
	.content .left .inner, .content .right .inner {
		position:relative;
		width:100%;
		max-width:550px;
		left:50%;
		right:auto;
		float:none;
		transform:translateX(-50%);
	}
	.content .left.whole .inner, .content .right.whole .inner {
		max-width:100%;
		left:auto;
		right:auto;
		transform:none;
	}
}
@media screen and (max-width: 750px) {
	.content {
		width:calc(100% - 60px);
		margin:0 30px;
	}
}


/* == content - image == */
.content .image {
	position:absolute;
	width:50%;
	max-width:550px;
	height:calc(100% - 300px);
	background:#ccc;
	border-radius:3px;
	overflow:hidden;
	background-position:50% 50%;
	background-repeat:no-repeat;
	background-size:cover;
}
.content .image.big {
	width:50%;
	max-width:100%;
	height:100%;
}
.content .image.left {
	right:calc(50% + 120px);
}
.content .image.right {
	left:calc(50% + 120px);
}
.content .image.left.big {
	right:calc(50% + 50px);
}
.content .image.right.big {
	left:calc(50% + 50px);
}
.content .image iframe {
	position:absolute;
	width:200%;
	height:200%;
	left:-50%;
	top:-50%;
	z-index:3;
	filter:grayscale(100%);
	opacity:0.8;
}
@media screen and (max-width: 1550px) {
	.content .image {
		height:calc(100% - 120px);
	}
	.content .image.left {
		right:calc(50% + 50px);
	}
	.content .image.right {
		left:calc(50% + 50px);
	}	
}
@media screen and (max-width: 1000px) {
	.content .image, .content .image.big {
		position:absolute;
		width:100%;
		max-width:550px;
		height:300px;
		margin:0 0 80px 0;
	}
	.content .image.left, .content .image.right, .content .image.left.big, .content .image.right.big {
		position:relative;
		left:50%;
		right:auto;
		transform:translateX(-50%);
	}
}


/* == content - layers == */
.content .layers {
	position:absolute;
	width:50%;
	max-width:550px;
	height:calc(100% - 300px);
	counter-reset: layer;
}
.content .layers.left {
	right:calc(50% + 120px);
}
.content .layers.right {
	left:calc(50% + 120px);
}
.content .layer {
	position:absolute;
	counter-increment: layer;
}
.content .layer.vertical {
	height:100%;
	top:0%;
}
.content .layer.horizontal {
	width:100%;
	bottom:0%;
}
.content .layers.three .layer.vertical {
	width:40%;
}
.content .layers.four .layer.vertical {
	width:30%;
}
.content .layers.five .layer.vertical {
	width:25%;
}
.content .layers.three .layer.vertical:nth-of-type(1) {
	right:0;
	z-index:1;
	top:-10px
}
.content .layers.three .layer.vertical:nth-of-type(2) {
	left:50%;
	transform:translateX(-50%);
	z-index:2;
	top:10px;
}
.content .layers.three .layer.vertical:nth-of-type(3) {
	left:0;
	z-index:3;
	top:-10px
}
.content .layers.four .layer.vertical:nth-of-type(1) {
	right:0;
	z-index:1;
	top:-10px
}
.content .layers.four .layer.vertical:nth-of-type(2) {
	left:60%;
	transform:translateX(-50%);
	z-index:2;
	top:10px;
}
.content .layers.four .layer.vertical:nth-of-type(3) {
	left:40%;
	transform:translateX(-50%);
	z-index:3;
	top:-10px;
}
.content .layers.four .layer.vertical:nth-of-type(4) {
	left:0;
	z-index:4;
	top:10px
}
.content .layers.five .layer.vertical:nth-of-type(1) {
	right:0;
	z-index:1;
	top:-10px
}
.content .layers.five .layer.vertical:nth-of-type(2) {
	left:70%;
	transform:translateX(-50%);
	z-index:2;
	top:10px;
}
.content .layers.five .layer.vertical:nth-of-type(3) {
	left:55%;
	transform:translateX(-50%);
	z-index:3;
	top:-10px;
}
.content .layers.five .layer.vertical:nth-of-type(4) {
	left:20%;
	z-index:4;
	top:10px
}
.content .layers.five .layer.vertical:nth-of-type(5) {
	left:0;
	z-index:5;
	top:-10px
}
.content .layers.three .layer.horizontal {
	height:40%;
}
.content .layers.four .layer.horizontal {
	height:30%;
}
.content .layers.five .layer.horizontal {
	height:25%;
}
.content .layers.three .layer.horizontal:nth-of-type(1) {
	left:-10px;
	z-index:1;
	bottom:0;
}
.content .layers.three .layer.horizontal:nth-of-type(2) {
	left:10px;
	transform:translateY(-50%);
	z-index:2;
	top:50%;
}
.content .layers.three .layer.horizontal:nth-of-type(3) {
	left:-10px;
	z-index:3;
	top:0;
}
.content .layers.four .layer.horizontal:nth-of-type(1) {
	left:-10px;
	z-index:1;
	bottom:0;
}
.content .layers.four .layer.horizontal:nth-of-type(2) {
	left:10px;
	transform:translateY(-50%);
	z-index:2;
	top:60%;
}
.content .layers.four .layer.horizontal:nth-of-type(3) {
	left:-10px;
	transform:translateY(-50%);
	z-index:3;
	top:40%;
}
.content .layers.four .layer.horizontal:nth-of-type(4) {
	left:10px;
	z-index:4;
	top:0;
}
.content .layers.five .layer.horizontal:nth-of-type(1) {
	left:-10px;
	z-index:1;
	bottom:0;
}
.content .layers.five .layer.horizontal:nth-of-type(2) {
	left:10px;
	transform:translateY(-50%);
	z-index:2;
	top:69%;
}
.content .layers.five .layer.horizontal:nth-of-type(3) {
	left:-10px;
	transform:translateY(-50%);
	z-index:3;
	top:51%;
}
.content .layers.five .layer.horizontal:nth-of-type(4) {
	left:10px;
	z-index:4;
	top:19%;
}
.content .layers.five .layer.horizontal:nth-of-type(5) {
	left:-10px;
	z-index:5;
	top:0;
}
.content .layer .front {
	position:absolute;
	top:0%;
	left:0%;
	border-radius:3px;
	z-index:2;
	background:#666;
}
.content .layer.vertical .front {
	height:100%;
}
.content .layer.horizontal .front {
	width:100%;
}
.content .layer.vertical.single .front {
	width:calc(100% - 20px);
}
.content .layer.vertical.double .front {
	width:calc(100% - 40px);
}
.content .layer.vertical.tripple .front {
	width:calc(100% - 60px);
}
.content .layer.horizontal.single .front {
	height:calc(100% - 20px);
}
.content .layer.horizontal.double .front {
	height:calc(100% - 40px);
}
.content .layer.horizontal.tripple .front {
	height:calc(100% - 60px);
}
.content .layer .side {
	position:absolute;
	border-radius:3px;
	z-index:1;
	background:#333;
	overflow:hidden;
	filter:brightness(0.85) contrast(1.3);
}
.content .layer.vertical .side {
	width:80%;
	height:100%;
	top:0%;
	right:0%;
}
.content .layer.horizontal .side {
	width:100%;
	height:80%;
	bottom:0%;
	right:0%;
}
.content .layer .front .inner, .content .layer .side .inner {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-size:cover;
	opacity:0.5;
}
.content .layer span {
	position:absolute;
	display:block;
	width:40px;
	height:40px;
	line-height:40px;
	font-size:24px;
	text-align:center;
	color:#fff;
	font-weight:bold;
	top:50%;
	left:70%;
	border-radius:100%;
	background:#403F41;
	transform:translate(-50%, -50%);
	z-index:10;
}
.content .layer span::before {
	display:block;
	content: counter(layer);
}
.content .layer.vertical span {
	top:50%;
	left:70%;
}
.content .layer.vertical:nth-of-type(2n) span {
	top:calc(50% - 20px);
}
.content .layer.horizontal span {
	bottom:10px;
	top:auto;
	left:50%;
	transform:translate(-50%, 0);
}
.content .layer.horizontal:nth-of-type(2n) span {
	left:calc(50% - 20px);
}
@media screen and (max-width: 1550px) {
	.content .layers {
		height:calc(100% - 120px);
	}
	.content .layers.left {
		right:calc(50% + 50px);
	}
	.content .layers.right {
		left:calc(50% + 50px);
	}	
}
@media screen and (max-width: 1000px) {
	.content .layers {
		position:absolute;
		width:100%;
		max-width:550px;
		height:300px;
		margin:0 0 80px 0;
	}
	.content .layers.left, .content .layers.right {
		position:relative;
		left:50%;
		right:auto;
		transform:translateX(-50%);
	}
	.content .layer span {
		width:30px;
		height:30px;
		line-height:30px;
		font-size:18px;
	}
}
@media screen and (max-width: 500px) {
	.content .layer span {
		width:25px;
		height:25px;
		line-height:25px;
		font-size:14px;
	}
}



/* == samples == */
.samples {
	position:relative;
	width:calc(100% + 50px);
	left:-25px;
	padding:25px 0;
	overflow:hidden;
}
.samples .sample {
	position:relative;
	float:left;
	margin:25px;
	border-radius:3px;
	background:#403F41;
	overflow:hidden;
}
.samples .sample.w-1-1 {
	width:calc(100% - 50px);
}
.samples .sample.w-1-2 {
	width:calc(50% - 50px);
}
.samples .sample.w-1-3 {
	width:calc(33.33% - 50px);
}
.samples .sample.w-1-4 {
	width:calc(25% - 50px);
}
.samples .sample.w-1-5 {
	width:calc(20% - 50px);
}
.samples .sample::before {
	position:relative;
	display:block;
	width:100%;
	float:left;
	content:'';
}
.samples .sample.p-1-50::before {
	padding:50% 0 0 0;
}
.samples .sample.p-1-75::before {
	padding:75% 0 0 0;
}
.samples .sample.p-1-100::before {
	padding:100% 0 0 0;
}
.samples .sample.p-1-150::before {
	padding:150% 0 0 0;
}
.samples .sample.p-1-175::before {
	padding:175% 0 0 0;
}
.samples .sample.p-1-200::before {
	padding:200% 0 0 0;
}
.samples .sample a {
	position:absolute;
	display:block;
	width:100%;
	height:100%;
	z-index:2;
	transition: all 0.2s ease-in-out;
}
.samples .sample a img {
	position: absolute;
    display: block;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    top: 50%;
    left: 50%;
    object-fit: cover;
    transform: translate(-50%, -50%);
    transition: all 0.2s ease-in-out;
	z-index:2;
}
.samples .sample:hover a img {
	opacity:0.3;
	width: calc(110% + 4px);
    height: calc(110% + 4px);
}
.samples .sample::after {
	position:absolute;
	display:block;
	width:40px;
	height:40px;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%) scale(1.3);
	background:url(../image/ico-info.svg) 66.66% 0% no-repeat;
	background-size:400% 200%;
	background-position:0 0;
	filter:brightness(600%);
	opacity:0;
	content:'';
	z-index:10;
	transition: all 0.2s ease-in-out;
	pointer-events:none;
}
.samples .sample:hover::after {
	transform:translate(-50%, -50%) scale(1);
	opacity:1;
}
@media screen and (max-width: 700px) {
	.samples {
		position:relative;
		width:calc(100% + 50px);
		left:-25px;
		padding:0 0 25px 0;
		overflow:hidden;
	}
	.samples .sample {
		position:relative;
		float:left;
		margin:25px;
		border-radius:3px;
		background:#838383;
	}
	.samples .sample.w-1-1 {
		width:calc(100% - 50px);
	}
	.samples .sample.w-1-2 {
		width:calc(50% - 50px);
	}
	.samples .sample.w-1-3 {
		width:calc(50% - 50px);
	}
	.samples .sample.w-1-4 {
		width:calc(50% - 50px);
	}
	.samples .sample.w-1-5 {
		width:calc(50% - 50px);
	}
	.samples .sample.p-1-100::before {
		padding:100% 0 0 0;
	}
	.samples .sample.p-1-50::before, .samples .sample.p-1-75::before {
		padding:50% 0 0 0;
	}
	.samples .sample.p-1-150::before, .samples .sample.p-1-175::before, .samples .sample.p-1-200::before {
		padding:100% 0 0 0;
	}
}
@media screen and (max-width: 500px) {
	.samples {
		position:relative;
		width:calc(100% + 30px);
		left:-15px;
		padding:35px 0;
		overflow:hidden;
	}
	.samples .sample {
		margin:15px;
	}
	.samples .sample.w-1-1 {
		width:calc(100% - 30px);
	}
	.samples .sample.w-1-2 {
		width:calc(50% - 30px);
	}
	.samples .sample.w-1-3 {
		width:calc(50% - 30px);
	}
	.samples .sample.w-1-4 {
		width:calc(50% - 30px);
	}
	.samples .sample.w-1-5 {
		width:calc(50% - 30px);
	}
}


/* == page - title == */
.page-title {
	position:relative;
	width:100%;
	padding:50px 0;
	overflow:hidden;
	text-align:justify;
}
.page-title h2 {
	position:relative;
	width:100%;
	font-size:62px;
	font-weight:300;
	text-align:left;
	text-transform:uppercase;
	padding:0;
	margin:0;
}
.page-title.center h2 {
	font-size:42px;
}
.page-title h3 {
	position:relative;
	width:100%;
	font-size:20px;
	font-weight:300;
	text-align:left;
	padding:5px 0 5px 0;
	margin:0;
}
.page-title.center h3 {
	font-size:18px;
}
.page-title h2, .page-title h3 {
	text-align:center;
}
@media screen and (max-width: 1500px) {
	.page-title h2 {
		font-size:52px;
	}
	.page-title.center h2 {
		font-size:32px;
	}
	.page-title h3 {
		font-size:18px;
	}
}
@media screen and (max-width: 1000px) {
	.page-title h2 {
		font-size:42px;
	}
	.page-title.center h2 {
		font-size:24px;
	}
	.page-title h3 {
		font-size:18px;
	}
	.page-title.center h3 {
		font-size:16px;
	}
}
@media screen and (max-width: 700px) {
	.page-title {
		padding:30px 0 0 0;
	}
	.page-title h2 {
		font-size:32px;
	}
	.page-title.center h2 {
		font-size:20px;
	}
	.page-title h3 {
		font-size:18px;
	}
}
@media screen and (max-width: 500px) {
	.page-title h2 {
		font-size:24px;
	}
	.page-title h3 {
		font-size:18px;
	}
}

/* == txt == */
.txt {
	position:relative;
	width:100%;
	padding:150px 0;
	overflow:hidden;
	text-align:justify;
}
.txt.center {
	text-align:center;
}
.txt.small-margin {
	padding:50px 0 0 0;
}
.txt h2 {
	position:relative;
	width:100%;
	font-size:62px;
	font-weight:300;
	text-align:left;
	text-transform:uppercase;
	padding:0;
	margin:0;
}
.txt h3 {
	position:relative;
	width:100%;
	font-size:20px;
	font-weight:300;
	text-align:left;
	padding:5px 0 5px 0;
	margin:0;
}
.txt.center h2, .txt.center h3 {
	text-align:center;
}
.txt .spacing {
	position:relative;
	width:100%;
	height:50px;
}
.txt .indent {
	position:relative;
	padding:0 0 0 100px;
	width:calc(100% - 100px);
}
.txt .indent::before {
	position:absolute;
	display:block;
	width:3px;
	height:100%;
	border-radius:3px;
	left:0;
	top:0;
	background:#403F41;
	content:'';
}
.txt ul {
	position:relative;
	display:block;
	margin:0;
	padding:0;
	list-style:none;
}
.txt ul.flow {
	overflow:hidden;
}
.txt ul li {
	position:relative;
	display:block;
	width:calc(100% - 30px);
	margin:0;
	padding:0 0 15px 30px;
	line-height:24px;
}
.txt ul.flow li {
	width:auto;
	float:left;
	padding:0 15px 15px 30px;
}
.txt ul li::before {
	position:absolute;
	display:block;
	width:15px;
	height:15px;
	left:0;
	top:5px;
	border-radius:100%;
	background: #61EBBF;
	content:'';
}
.txt ul li a {
	transition: all 0.2s linear;
}
.txt ul li a:hover {
	color:#61EBBF;
}
.txt ol {
	position:relative;
	display:block;
	margin:0;
	padding:0;
	list-style:none;
	counter-reset: section;
}
.txt.info-page ol, .txt.info-page ul {
	padding:10px 0 0 0;
}
.txt ol li {
	position:relative;
	display:block;
	width:calc(100% - 40px);
	margin:0;
	padding:0 0 15px 40px;
	line-height:24px;
}
.txt.info-page ol li {
	width:calc(100% - 30px);
	padding:0 0 15px 30px;
}
.txt ol li::before {
	position:absolute;
	display:block;
	width:30px;
	height:30px;
	left:0;
	top:-2px;
	font-size:14px;
	font-weight:bold;
	line-height:30px;
	text-align:center;
	color:#fff;
	background: #403F41;
	border-radius:100%;
	counter-increment: section; 
	content: counters(section, ".") " ";
}
.txt ol li ul li::before { 
	content: '';
}
.txt.info-page ol li::before {
	position:absolute;
	display:block;
	width:20px;
	height:20px;
	left:0;
	top:2px;
	font-size:12px;
	line-height:20px;
}
.txt.info-page ol li ul li::before {
	width:10px;
	height:10px;
	border-radius:3px;
	top:7px;
}
.txt .row {
	position:relative;
	width:calc(100% - 50px);
	padding:0 0 0 50px;
	margin:0 0 20px 0;
	line-height:20px;
}
.txt .row.single-line {
	line-height:40px;
}
.txt .row .ico {
	position:absolute;
	width:40px;
	height:40px;
	left:0;
	top:0;
	border-radius:100%;
	background: #61EBBF;
}
.txt .row .ico::before {
	width:70%;
	height:70%;
	opacity:0.9;
}
@media screen and (max-width: 1500px) {
	.txt {
		padding:60px 0;
		font-size:16px;
	}
	.txt h2 {
		font-size:52px;
	}
	.txt h3 {
		font-size:18px;
	}
}
@media screen and (max-width: 1000px) {
	.txt {
		padding:80px 0;
		font-size:16px;
	}
	.txt h2 {
		font-size:42px;
	}
	.txt h3 {
		font-size:18px;
	}
}
@media screen and (max-width: 700px) {
	.txt {
		padding:50px 0 30px 0;
	}
	.txt.small-margin {
		padding:30px 0;
	}
	.txt .indent {
		padding:0;
		width:100%;
	}
	.txt .indent::before {
		display:none;
	}
	.txt h2 {
		font-size:32px;
	}
	.txt h3 {
		font-size:18px;
	}
}
@media screen and (max-width: 500px) {
	.txt {
		font-size:14px;
		text-align:left;
	}
	.txt h2 {
		font-size:24px;
	}
	.txt h3 {
		font-size:18px;
	}
}

/* == range == */
.range {
	position:absolute!important;
	width:calc(50% + 50px)!important;
	height:calc(100% - 100px);
	top:50%;
	background:#f3f3f3;
	transform:translateY(-50%);
	border-radius:3px;
}
.range.left {
	left:-50px;
}
.range.right {
	right:-50px;
}
.range::before {
	position:relative;
	display:none;
	width:100%;
	padding:50% 0 0 0;
	background:#f3f3f3;
	content:'';
}
.range .map {
	position:absolute;
	display:block;
	width:70%;
	top:50%;
	transform:translateY(-50%);
	content:'';
}
.range.left .map {
	right:50px;
}
.range.right .map {
	left:50px;
}
.range .map::before {
	position:relative;
	display:block;
	width:100%;
	padding:96% 0 0 0;
	float:left;
	background:url(../image/map.svg) 50% 50% no-repeat;
	background-size:100% 100%;
	content:'';
}
.range .map .reg {
	position:absolute;
	display:block;
	width:100%;
	height:100%;
	top:50%;
	left:50%;
	background-size:100% 100%;
	background-repeat:no-repeat;
	transform:translate(-50%, -50%);
}
.range .map .reg.active {
	filter: brightness(0.6) sepia(1) hue-rotate(-239deg) saturate(5)
}
.range .map .reg.ds {
	background-image:url(../image/map-ds.svg);
}
.range .map .reg.kp {
	background-image:url(../image/map-kp.svg);
}
.range .map .reg.lod {
	background-image:url(../image/map-lod.svg);
}
.range .map .reg.lub {
	background-image:url(../image/map-lub.svg);
}
.range .map .reg.lubu {
	background-image:url(../image/map-lubu.svg);
}
.range .map .reg.maz {
	background-image:url(../image/map-maz.svg);
}
.range .map .reg.mp {
	background-image:url(../image/map-mp.svg);
}
.range .map .reg.op {
	background-image:url(../image/map-op.svg);
}
.range .map .reg.pk {
	background-image:url(../image/map-pk.svg);
}
.range .map .reg.pl {
	background-image:url(../image/map-pl.svg);
}
.range .map .reg.pom {
	background-image:url(../image/map-pom.svg);
}
.range .map .reg.sk {
	background-image:url(../image/map-sk.svg);
}
.range .map .reg.sl {
	background-image:url(../image/map-sl.svg);
}
.range .map .reg.wlkp {
	background-image:url(../image/map-wlkp.svg);
}
.range .map .reg.wm {
	background-image:url(../image/map-wm.svg);
}
.range .map .reg.zp {
	background-image:url(../image/map-zp.svg);
}
@media screen and (max-width: 1000px) {
	.range {
		position:relative!important;
		width:100%!important;
		height:auto;
		top:auto;
		right:auto!important;
		left:auto!important;
		background:none;
		transform:none;
		float:left;
	}
	.range .map {
		position:relative;
		display:block;
		width:70%!important;
		top:auto;
		right:auto;
		transform:none;
		margin:auto;
		overflow:hidden;
	}
	.range.left .map, .range.right .map {
		left:auto;
		right:auto;
	}
}
@media screen and (max-width: 1000px) {
	.range .map {
		width:100%!important;
	}
}

/* == form == */
.form {
	position:relative;
	width:calc(100% + 50px);
	max-width:1350px;
	overflow:hidden;
	margin:auto;
	padding:100px 0;
}
.form #enquiry-nr {
	position:absolute;
	top:-5px;
	left:-30px;
	width:2px;
	height:2px;
	margin:0;
	padding:0;
}
.form .success {
	position:relative;
	width:100%;
	text-align:center;
	overflow:hidden;
	opacity:0;
	max-height:0;
	pointer-events:none;
	transition: all 0.2s linear;
}
.form .success.on {
	opacity:1;
	max-height:300px;
}
.form .success h2 {
	width:100%;
	padding:0 0 20px 0;
	margin:0;
	font-size:32px;
	text-transform:uppercase;
	font-weight:300;
}
.form .success h3 {
	margin:0;
	padding:0;
	font-size:24px;
	font-weight:300;
}
.form .col {
	position:relative;
	margin:0 25px;
	float:left;
}
.form .col.one-three {
	width:calc(33.33% - 50px);
}
.form .col.two-three {
	width:calc(66.66% - 50px);
}
.form .col.three-three {
	width:calc(100% - 50px);
}
.form .col .row {
	position:relative;
	width:100%;
	float:left;
	padding:0 0 50px 0;
}
.form .col .row h2 {
	position:relative;
	width:100%;
	float:left;
	padding:0;
	margin:0;
	font-size:62px;
	line-height:60px;
	font-weight:300;
	text-transform:uppercase;
}
.form .col .row input {
	position:relative;
	width:calc(100% - 40px);
	height:20px;
	padding:20px;
	margin:0;
	border:0;
	border-radius:3px;
	background:#F3F3F3;
	font-size:14px;
	font-weight:300;
	font-family: 'Open Sans', sans-serif;
}
.form .col .row textarea {
	position:relative;
	width:calc(100% - 40px);
	height:240px;
	padding:20px;
	margin:0;
	border:0;
	border-radius:3px;
	background:#F3F3F3;
	font-size:14px;
	font-weight:300;
	font-family: 'Open Sans', sans-serif;
}
.form .col .row input.error, .form .col .row textarea.error {
	background:#E49E9E;
}
@media screen and (max-width: 1450px) {
	.form {
		width:calc(100% + 50px);
		left:-25px;
	}
	.form .col .row h2 {
		font-size:52px;
		line-height:50px;
	}
}
@media screen and (max-width: 1000px) {
	.form .col.one-three, .form .col.two-three, .form .col.three-three {
		width:calc(100% - 50px);
	}
	.form .col .row {
		padding:0 0 25px 0;
	}
	.form .col .row h2 {
		font-size:32px;
		line-height:30px;
	}
}
@media screen and (max-width: 700px) {
	.form {
		width:calc(100% - 50px);
		left:0
	}
}

/* == quote == */
.quote {
	position:relative;
	width:calc(100% + 50px);
	left:-25px;
	padding:150px 0;
}
.quote .fields {
	position:relative;
	display:none;
	width:calc(100% - 50px);
	margin:0 25px 50px 25px;
	height:60px;
	border-radius:3px;
	background:#fff;
	font-size:16px;
}
.quote .fields.on {
	display:block;
}
.quote .fields .close {
	position:absolute;
	width:30px;
	height:30px;
	top:0;
	left:100%;
	border-radius:100%;
	background:#403F41;
	z-index:5;
	cursor:pointer;
	transform:translate(-50%, -50%);
	transition: all 0.2s ease-in-out;
}
.quote .fields .close:hover {
	background: #61EBBF;
}
.quote .fields .close .ico {
	position:absolute;
	width:80%;
	height:80%;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	background-color:transparent;
}
.quote .fields .box {
	position:relative;
	float:left;
}
.quote .fields .box.type {
	width:calc(50% - 50px);
}
.quote .fields .box.effect {
	width:calc(50% - 50px);
}
.quote .fields .box.surface {
	width:100px;
}
.quote .fields .box input {
	position:relative;
	width:calc(100% - 40px);
	height:20px;
	padding:20px;
	border:0;
	margin:0;
	border-radius:3px;
	background:#fff;
	font-family: 'Open Sans', sans-serif;
	transition: all 0.2s linear;
}
.quote .fields .box.error input  {
	background: #E49E9E;
    color: #fff;
}
.quote .fields .box .value {
	position:relative;
	width:calc(100% - 40px);
	padding:20px;
	line-height:20px;
	float:left;
	cursor:pointer;
	transition: all 0.2s linear;
}
.quote .fields .box.effect .value {
	pointer-events:none;
	opacity:0.2;
}
.quote .fields .box.effect.active .value {
	pointer-events:auto;
	opacity:1;
}
.quote .fields .box.error .value  {
	background: #E49E9E;
    color: #fff;
}
.quote .fields .box ul {
	position:absolute;
	width:calc(100% - 20px);
	max-height:60px;
	padding:10px;
	line-height:40px;
	background:#fff;
	overflow:hidden;
	list-style:none;
	border-radius:3px;
	margin:0;
	opacity:0;
	z-index:-1;
	transition: all 0.2s ease-in-out;
}
.quote .fields .box ul.on {
	max-height:1000px;
	opacity:1;
	z-index:3;
}
.quote .fields .box ul.visible {
	display:block!important;
}
.quote .fields .box ul li {
	position:relative;
	margin:0;
	padding:0 10px;
	cursor:pointer;
	transition: all 0.2s ease-in-out;
}
.quote .fields .box ul li:hover {
	background: #61EBBF;
	color:#fff;
}
.quote .spacer {
	position:relative;
	width:calc(100% - 50px);
	margin:0 25px 0 25px;
	height:50px;
	float:left;
}
.quote .spacer::after {
	position:absolute;
	width:100%;
	top:-10px;
	left:0;
	font-size:18px;
	line-height:18px;
	overflow:hidden;
	white-space:nowrap;
	content:'- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -';
}
.quote #enquiry-nr {
	position:absolute;
	top:-25px;
	left:-50px;
	width:5px;
	height:5px;
	borader:0;
	margin:0;
	padding:0;
}
.quote .col {
	position:relative;
	width:100%;
	float:left;
}
.quote .col.half {
	width:50%;
}
.quote .row {
	position:relative;
	width:calc(100% - 50px);
	margin:0 25px 50px 25px;
	float:left;
}
.quote .row input {
	position:relative;
	width:calc(100% - 40px);
	height:20px;
	padding:20px;
	border-radius:3px;
	border:0;
	background:#fff;
	font-family: 'Open Sans', sans-serif;
	transition: all 0.2s linear;
}
.quote .row.error input {
	background: #E49E9E;
	color:#fff;
}
.quote .row textarea {
	position:relative;
	width:calc(100% - 40px);
	min-width:calc(100% - 40px);
	max-width:calc(100% - 40px);
	height:180px;
	min-height:180px;
	padding:20px;
	border-radius:3px;
	border:0;
	background:#fff;
	font-family: 'Open Sans', sans-serif;
}
.quote .success {
	position:relative;
	width:100%;
	text-align:center;
	overflow:hidden;
	opacity:0;
	max-height:0;
	pointer-events:none;
	transition: all 0.2s linear;
}
.quote .success.on {
	opacity:1;
	max-height:300px;
}
.quote .success h2 {
	width:100%;
	padding:0 0 20px 0;
	margin:0;
	font-size:24px;
	text-transform:uppercase;
	font-weight:300;
}
.quote .success h3 {
	margin:0;
	padding:0;
	font-size:18px;
	font-weight:300;
}
@media screen and (max-width: 1400px) {
	.quote .fields {
		font-size:16px;
	}
}
@media screen and (max-width: 1200px) {
	.quote {
		float:left;
		padding:60px 0 55px 0;
	}
	.quote .fields {
		height:auto;
		float:left;
	}
	.quote .fields .box {
		float:float;
	}
	.quote .fields .box input {
		width: calc(100% - 30px);
		padding: 15px;
	}
	.quote .fields .box .value {
		width: calc(100% - 30px);
		padding: 15px;
		line-height: 20px;
	}
	.quote .fields .box.type {
		width:50%;
	}
	.quote .fields .box.effect {
		width:50%;
	}
	.quote .fields .box.surface {
		width:100%;
	}
	.quote .fields .box.surface::after {
		position:absolute;
		width:calc(100% - 30px);
		top:-11px;
		left:15px;
		font-size:18px;
		line-height:18px;
		overflow:hidden;
		white-space:nowrap;
		content:'- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -';
	}
}
@media screen and (max-width: 1000px) {
	.quote {
		padding:0 0 55px 0;
	}
}
@media screen and (max-width: 500px) {
	.quote .fields {
		font-size:14px;
		margin: 0 25px 25px 25px;
	}
	.quote .spacer {
		height:25px;
	}
	.quote .spacer::after {
		position:absolute;
		width:100%;
		top:-10px;
		left:0;
		font-size:18px;
		line-height:18px;
		overflow:hidden;
		white-space:nowrap;
		content:'- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -';
	}
	.quote .col.half {
		width:100%;
	}
	.quote .row {
		margin:0 25px 25px 25px;
	}
	.quote .success {
		width:calc(100% - 60px);
		padding:20px;
		margin:10px;
		background: #61EBBF;
		border-radius:3px;
	}
	.quote .success h2 {
		font-size: 18px;
		padding:0 0 10px 0;
	}
	.quote .success h3 {
		font-size: 16px;
	}
}


/* == buttons == */
.buttons {
	position:relative;
	width:100%;
	overflow:hidden;
	text-align:center;
}
.buttons.margin-bottom {
	padding:0 0 50px 0;
}
.buttons .button {
	position:relative;
	display:block;
	width:250px;
	line-height:60px;
	color:#403F41;
	font-size:16px;
	text-transform:uppercase;
	text-align:center;
	background:#61EBBF;
	border-radius:3px;
	cursor:pointer;
	transition: all 0.2s ease-in-out;
}
.buttons .button:hover {
	color:#fff;
	background:#403F41;
}
.buttons .button.whole {
	width:100%;
}
.buttons .button.left {
	float:left;
}
.buttons .button.right {
	float:right;
}
.buttons .button.center {
	display:inline-block;
}
.buttons .button .dots {
	position:absolute;
	width:auto;
	bottom:0;
	height:8px
}
.buttons .button .dots.left {
	left:-55px;
	margin:0 0 0 0;
}
.buttons .button .dots.right {
	right:-65px;
	margin:0 0 0 0;
}
.buttons .button .dots span {
	display:block;
	width:8px;
	height:8px;
	float:left;
	margin:0 10px 0 0;
	border-radius:100%;
	background:#61EBBF;
	transition: all 0.2s ease-in-out;
}
.buttons .button:hover .dots span {
	background:#403F41;
}
@media screen and (max-width: 700px) {
	.buttons.standalone {
		width:calc(100% - 100px);
		margin:auto;
	}
}
@media screen and (max-width: 500px) {
	.buttons .button {
		position:relative;
		display:block;
		width:200px;
		line-height:50px;
		color:#403F41;
		font-size:14px;
		text-transform:uppercase;
		text-align:center;
		background:#61EBBF;
		border-radius:3px;
		transition: all 0.2s ease-in-out;
	}
}

/* == footer == */
.footer {
	position:relative;
	width:calc(100% - 100px);
	padding:100px 50px;
	margin:50px 0 0 0;
	overflow:hidden;
	font-size:16px;
	letter-spacing:1px;
}
@media screen and (max-width: 500px) {
	.footer {
		padding:50px 50px;
	}
}

/* == footer - links == */
.footer .footer-links {
	position:relative;
	float:left;
}
.footer .footer-links .col {
	position:relative;
	float:left;
	width:250px;
}
.footer .footer-links .col h3 {
	position:relative;
	width:100%;
	padding:0 0 40px 0;
	margin:0;
	font-size:18px;
	font-weight:300;
	text-transform:uppercase;
}
.footer .footer-links .col h3::after {
	position:absolute;
	display:block;
	width:30px;
	height:2px;
	bottom:15px;
	left:0;
	background:#403F41;
	transform:translateY(-50%);
	opacity:0.07;
	content:'';
}
.footer .footer-links .col ul {
	position:relative;
	display:block;
	padding:0;
	margin:0;
	list-style:none;
}
.footer .footer-links .col ul li {
	position:relative;
	display:block;
	padding:0;
	margin:0;
	line-height:30px;
}
.footer .footer-links .col ul li a {
	position:relative;
	display:block;
	color: #403F41;
	transition: all 0.2s ease-in-out;
}
.footer .footer-links .col ul li a:hover {
	color:#61EBBF;
}
@media screen and (max-width: 1000px) {
	.footer .footer-links {
		width:100%;
	}
	.footer .footer-links .col {
		position:relative;
		float:left;
		width:50%;
	}
}
@media screen and (max-width: 500px) {
	.footer .footer-links .col {
		width:100%;
	}
	.footer .footer-links .col:last-of-type {
		padding:50px 0 0 0;
	}
	.footer .footer-links .col h3::after {
		width:100%;
	}
}

/* == footer - contact == */
.footer .footer-contact {
	position:relative;
	float:right;
	white-space:nowrap;
	color:#666;
}
.footer .footer-contact h3 {
	position:relative;
	width:100%;
	padding:0 0 40px 0;
	margin:0;
	font-size:18px;
	font-weight:300;
	text-transform:uppercase;
}
.footer .footer-contact h3::after {
	position:absolute;
	display:block;
	width:30px;
	height:2px;
	bottom:15px;
	left:0;
	background:#403F41;
	transform:translateY(-50%);
	opacity:0.07;
	content:'';
}
.footer .footer-contact .row {
	position:relative;
	display:block;
	padding:0;
	margin:0;
	line-height:30px;
}
.footer .footer-contact .row.time {
	padding:50px 0 0 0;
}
.footer .footer-contact .row a {
	position:relative;
	color: #2c2c2c;
	transition: all 0.2s ease-in-out;
}
.footer .footer-contact .row a:hover {
	color:#61EBBF;
}
@media screen and (max-width: 1000px) {
	.footer .footer-contact {
		width:100%;
		padding:50px 0 0 0;
	}
	.footer .footer-contact h3::after {
		width:100%;
	}
}

/* == bottom == */
.bottom {
	position:relative;
	width:100%;
	line-height:50px;
	font-size:14px;
}
.bottom .cpr {
	position:relative;
	float:left;
	opacity:0.8;
}
.bottom .dsgn {
	position:relative;
	float:right;
	opacity:0.8;
}
.bottom .dsgn a {
	position:relative;
	color: #403F41;
	transition: all 0.2s ease-in-out;
}
.bottom .dsgn a:hover {
	color:#000;
}
@media screen and (max-width: 700px) {
	.bottom .cpr {
		padding:0 0 0 50px;
	}
	.bottom .dsgn {
		padding:0 50px 0 0;
	}
}
@media screen and (max-width: 500px) {
	.bottom .cpr, .bottom .dsgn {
		font-size:12px;
	}
}


/* == carousel == */
.owl-carousel {
	display: none;
	position: relative;
	width: 100%;
	-ms-touch-action: pan-y;
}
.owl-carousel .owl-wrapper {
	display: none;
	position: relative;
	-webkit-transform: translate3d(0px, 0px, 0px);
}
.owl-carousel .owl-wrapper-outer {
	overflow: hidden;
	position: relative;
	width: 100%;
	height:100%;
}
.owl-carousel .owl-wrapper-outer .owl-wrapper {
	overflow: hidden;
	position: relative;
	width: 100%;
	height:100%;
}	
.owl-carousel .owl-item {
	float: left;
	overflow: hidden;
	position: relative;
	width: 100%;
	height:100%;
}


/* == fancybox == */
.fancybox-wrap,
.fancybox-skin,
.fancybox-outer,
.fancybox-inner,
.fancybox-image,
.fancybox-wrap iframe,
.fancybox-wrap object,
.fancybox-nav,
.fancybox-nav span,
.fancybox-tmp
{
	padding: 0;
	margin: 0;
	border: 0;
	outline: none;
	vertical-align: top;
}

.fancybox-wrap {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 8020;
}

.fancybox-skin {
	position: relative;
	padding:0 !important;
	color: #242424;
	text-shadow: none;
}

.fancybox-opened {
	z-index: 8030;
}
.fancybox-outer, .fancybox-inner {
	position: relative;
}

.fancybox-inner {
	overflow: hidden;
}

.fancybox-type-iframe .fancybox-inner {
	-webkit-overflow-scrolling: touch;
}

.fancybox-error {
	color: #444;
	margin: 0;
	padding: 15px;
	white-space: nowrap;
}

.fancybox-image, .fancybox-iframe {
	display: block;
	width: 100%;
	height: 100%;
}
.fancybox-image {
	max-width: 100%;
	max-height: 100%;
	border-radius:3px;
	overflow:hidden;
	opacity:0;
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
	transition: all 0.3s ease-in-out;
}
.fancybox-opened .fancybox-image {
	opacity:1;
}
#fancybox-loading {
	position: fixed;
	top: 50%;
	left: 50%;
	margin-top: -22px;
	margin-left: -22px;
	opacity: 0.8;
	cursor: pointer;
	z-index: 8060;
}

#fancybox-loading div {
	width: 44px;
	height: 44px;
}

.fancybox-close {
	position: absolute;
	top: -20px;
	right: -20px;
	width: 40px;
	height: 40px;
	cursor: pointer;
	z-index: 8040;
	opacity:0;
	background:#fff;
	border-radius:100%;
	transition: all 0.2s ease-in-out;
}
.fancybox-opened .fancybox-close {
	opacity:0.8;
}
.fancybox-opened .fancybox-close:hover {
	opacity:1;
	background: #61EBBF;
}
.fancybox-close::before {
	display:block;
	position: absolute;
	width:70%;
	height:70%;
	top:50%;
	left:50%;
	background: url(../image/ico-nav.svg) 33% 0 no-repeat;
    background-size: 400% 200%;
	transform:translate(-50%, -50%);
	opacity:1;
	content:'';
	z-index:1;
	transition: all 0.2s ease-in-out;
}
.fancybox-close:hover::before {
	opacity:1;
}
.fancybox-nav {
	position: absolute;
	top: 0;
	width: 40%;
	height: 100%;
	cursor: pointer;
	z-index: 8040;
	transition: all 0.3s ease-in-out;
}
.fancybox-prev {
	left: -20px;
}
.fancybox-next {
	right: -20px;
}
.fancybox-nav span {
	position: absolute;
	top: 50%;
	width: 40px;
	height: 40px;
	transform-origin:50% 50%;
	transform:translateY(-50%);
	cursor: pointer;
	z-index: 8040;
	background:#fff;
	border-radius:100%;
	opacity:0.8;
	transition: all 0.2s ease-in-out;
}
.fancybox-next:hover span, .fancybox-prev:hover span {
	opacity:1;
	background: #61EBBF;
}
.fancybox-nav span::before {
	position: absolute;
	top: 50%;
	left:50%;
	width: 80%;
	height: 80%;
	background-image: url(../image/ico-nav.svg);
	background-size:400% 200%;
	background-position: 65% 0%;
	z-index: 2;
	transform-origin:50% 50%;
	transform: translate(-50%, -50%);
	content:'';
}
.fancybox-nav:hover span::before {
	
}
.fancybox-prev span {
	left: 0px;
}
.fancybox-prev span::before {
	transform: translate(-50%, -50%) rotate(180deg);
}
.fancybox-next span {
	right: 0px;
}

.fancybox-nav:hover span {
	visibility: visible;
}

.fancybox-tmp {
	position: absolute;
	top: -99999px;
	left: -99999px;
	visibility: hidden;
	max-width: 99999px;
	max-height: 99999px;
	overflow: visible !important;
}

/* Overlay helper */

.fancybox-lock {
    overflow: hidden !important;
    width: auto;
}

.fancybox-lock body {
    overflow: hidden !important;
}

.fancybox-lock-test {
    overflow-y: hidden !important;
}

.fancybox-overlay {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	display: none;
	z-index: 8010;
	background:rgba(36, 36, 36, 0.8);
}

.fancybox-overlay-fixed {
	position: fixed;
	bottom: 0;
	right: 0;
}

.fancybox-lock .fancybox-overlay {
	overflow: auto;
	overflow-y: scroll;
}

/* Title helper */

.fancybox-title {
	visibility: hidden;
	position: relative;
	text-shadow: none;
	z-index: 8050;
}

.fancybox-opened .fancybox-title {
	visibility: visible;
}

.fancybox-title-float-wrap {
	position: absolute;
	bottom: 10px;
	left: 10px;
	max-width:calc(100% - 20px);
	z-index: 8050;
}

.fancybox-title-float-wrap .child {
	display: inline-block;
	padding: 2px 10px;
	background: #fff;
	color: #403F41;
	border-radius:3px;
	line-height: 24px;
	cursor:default;
}

.fancybox-title-outside-wrap {
	position: relative;
	margin-top: 10px;
	color: #fff;
}

.fancybox-title-inside-wrap {
	padding-top: 10px;
}

.fancybox-title-over-wrap {
	position: absolute;
	bottom: 0;
	left: 0;
	color: #fff;
	padding: 10px;
	background: #000;
	background: rgba(0, 0, 0, .8);
}
@media screen and (max-width: 700px) {
	.fancybox-title-float-wrap .child {
		font-size:16px;
		line-height:20px;
		padding:2px 8px;
	}
}
@media screen and (max-width: 500px) {
	.fancybox-title-float-wrap .child {
		font-size:14px;
		line-height:18px;
		padding:2px 8px;
	}
}