*,::before,::after{box-sizing:border-box}*:focus{outline:none}ul[class],ol[class]{padding:0;list-style:none}dl{height:100%;width:100%;position:relative}body,h1,h2,h3,h4,p,ul[class],ol[class],li,figure,figcaption,blockquote,dl,dd{margin:0}body{min-height:100vh;scroll-behavior:smooth;text-rendering:optimizeSpeed;line-height:1.5}a{text-decoration:none}a:not([class]){text-decoration-skip-ink:auto}img{max-width:100%;display:block}article > * + *{margin-top:1em}input,button,textarea,select{font:inherit}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

@font-face{font-family:system-ui;font-style:normal;font-weight:300;src:local(.SFNS-Light),local(.SFNSText-Light),local(.HelveticaNeueDeskInterface-Light),local(.LucidaGrandeUI),local("Segoe UI Light"),local("Ubuntu Light"),local(Roboto-Light),local(DroidSans),local(Tahoma)}@font-face{font-family:system-ui;font-style:italic;font-weight:300;src:local(.SFNS-LightItalic),local(.SFNSText-LightItalic),local(.HelveticaNeueDeskInterface-Italic),local(.LucidaGrandeUI),local("Segoe UI Light Italic"),local("Ubuntu Light Italic"),local(Roboto-LightItalic),local(DroidSans),local(Tahoma)}@font-face{font-family:system-ui;font-style:normal;font-weight:400;src:local(.SFNS-Regular),local(.SFNSText-Regular),local(.HelveticaNeueDeskInterface-Regular),local(.LucidaGrandeUI),local("Segoe UI"),local(Ubuntu),local(Roboto-Regular),local(DroidSans),local(Tahoma)}@font-face{font-family:system-ui;font-style:italic;font-weight:400;src:local(.SFNS-Italic),local(.SFNSText-Italic),local(.HelveticaNeueDeskInterface-Italic),local(.LucidaGrandeUI),local("Segoe UI Italic"),local("Ubuntu Italic"),local(Roboto-Italic),local(DroidSans),local(Tahoma)}@font-face{font-family:system-ui;font-style:normal;font-weight:500;src:local(.SFNS-Medium),local(.SFNSText-Medium),local(.HelveticaNeueDeskInterface-MediumP4),local(.LucidaGrandeUI),local("Segoe UI Semibold"),local("Ubuntu Medium"),local(Roboto-Medium),local(DroidSans-Bold),local("Tahoma Bold")}@font-face{font-family:system-ui;font-style:italic;font-weight:500;src:local(.SFNS-MediumItalic),local(.SFNSText-MediumItalic),local(.HelveticaNeueDeskInterface-MediumItalicP4),local(.LucidaGrandeUI),local("Segoe UI Semibold Italic"),local("Ubuntu Medium Italic"),local(Roboto-MediumItalic),local(DroidSans-Bold),local("Tahoma Bold")}@font-face{font-family:system-ui;font-style:normal;font-weight:700;src:local(.SFNS-Bold),local(.SFNSText-Bold),local(.HelveticaNeueDeskInterface-Bold),local(.LucidaGrandeUI),local("Segoe UI Bold"),local("Ubuntu Bold"),local(Roboto-Bold),local(DroidSans-Bold),local("Tahoma Bold")}@font-face{font-family:system-ui;font-style:italic;font-weight:700;src:local(.SFNS-BoldItalic),local(.SFNSText-BoldItalic),local(.HelveticaNeueDeskInterface-BoldItalic),local(.LucidaGrandeUI),local("Segoe UI Bold Italic"),local("Ubuntu Bold Italic"),local(Roboto-BoldItalic),local(DroidSans-Bold),local("Tahoma Bold")}

::selection {
  background: rgba(0,0,0,.90);
  color: #fff;
}
::-moz-selection {
  background: rgba(0,0,0,.90);
  color: #fff;
}

/*
light: #E2E3D9
middle: #A1C1BE
dark: #59554E
*/

.relative {
	height: 100%;
	width: 100%;
	position: relative;
}

html {
	scroll-behavior: smooth;
	height: 100%;
	width: 100%;
	overflow-x: hidden;
	overflow-y: scroll;
}
body {
	font: 300 16px/1.2 "system-ui";
	height: 100%;
	width: 100%;
	overflow-x: hidden;
	overflow-y: scroll;
	background-color: #f1f1f1;
}
.message {
	height: 40px;
	width: 100%;
	position: relative;
	background: rgba(255,255,255,.45);
	display: flex;
	flex-flow: column;
	align-content: center;
	align-items: center;
	justify-content: center;
	text-transform: uppercase;
	font-size: .9rem;
	display: none;
}
header {
	position: relative;
	height: 140px;
}
header::before {
	content: "";
	height: 85vh;
	width: 100vw;
	position: absolute;
	top: 0;
	left: 0;
	background: #b8d8e3;
	pointer-events: none;
	z-index: -1;
}
header .logo {
	display: block;
	position: absolute;
	top: 30px;
	left: 30px;
	height: 60px;
	width: 300px;
	/* 0.189780839050854 */
}
header .logo svg * {
	fill: #fff;
}
header.inside {
	height: 100px;
}
header.inside .logo {
	top: 20px;
	height: 50px;
	width: 250px;	
	left: 50%;
	margin-left: -125px;
}
header .button {
	display: inline-flex;
	flex-flow: column;
	align-content: center;
	align-items: center;
	justify-content: center;
	text-transform: uppercase;
	font-size: 1rem;
	font-weight: 700;
	position: absolute;
	top: 30px;
	right: 30px;
	height: 60px;
	padding: 0 30px;
	box-shadow: 0 0 0 4px #fff;
	color: fff;
	transition: all .2s ease-in-out;
}
header .button:hover {
	color: #b8d8e3;
	background: #fff;
}
.intro {
	position: relative;
	width: 100vw;
	height: 350px;
	background: url(../images/icons/icons-long.png) repeat-x left 0 center;
	margin: 0 0 40px;	
	animation: iconcycle 55s infinite linear;
}
@keyframes iconcycle {
	0% {
		background-position: 0 center;
	}
	100% {
		background-position: -100% center;
	}
}
.slider {
	width: 622px;
	height: 350px;
	position: relative;
	overflow: hidden;
	margin: 0 auto;
	flex-flow: column;
	align-content: center;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 20px #6396a8;
}
.slider .slides {
	position: absolute;
	top: 0;
	left: 0;
	width: calc(100% * 3);
	height: 100%;
	display: flex;
	animation: slider 10s infinite;
}
.slider .slides:hover {
	animation-play-state: paused;
}
@keyframes slider {
	0%,25% {
		left: 0;
	}
	35%,60% {
		left: -622px;
	}
	70%,90% {
		left: -1244px;
	}
	100% {
		left: 0;
	}
}
.slides > a {
	display: flex;
	flex: 0 0 622px;
	width: 622px;
	height: 350px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	position: relative;
}
.slides > a:nth-of-type(1) {
	background-image: url(../images/slider1.jpg);
}
.slides > a:nth-of-type(2) {
	background-image: url(../images/slider2.jpg);
}
.slides > a:nth-of-type(3) {
	background-image: url(../images/slider3.jpg);
}
.slides > a .title {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	text-align: center;
	text-transform: uppercase;
	font-size: 1.75rem;
	font-weight: 700;
	position: absolute;
	color: #fff;
	padding: 40px;
	background: rgba(0,0,0,.05);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	transition: all .4s .8s ease-in-out;
}
.slides > a:hover .title {
	padding: 30px 40px 70px;
	transition-delay: 0s;
}
.slider .icons {
	height: 100px;
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 0;	
	display: flex;
	flex-flow: row;
	justify-content: space-between;
	align-content: center;
	align-items: center;
	justify-content: center;
}
.slider .icons span {
	width: 20px;
	height: 20px;
	opacity: 0;
	margin: 20px 20px 0;
	display: block;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	transition: all .4s ease-in-out;
}
.slider a:hover .icons span {
	margin: 0 20px;
	opacity: 1;
}
.slider .icons span:nth-of-type(1) {
	background-image: url(../images/icons/wallart.png);
	transition: all .4s ease-in-out;
}
.slider .icons span:nth-of-type(2) {
	background-image: url(../images/icons/pillow.png);
	transition: all .4s .1s ease-in-out;
}
.slider .icons span:nth-of-type(3) {
	background-image: url(../images/icons/bag.png);
	transition: all .4s .2s ease-in-out;
}
.slider .icons span:nth-of-type(4) {
	background-image: url(../images/icons/puzzle.png);
	transition: all .4s .3s ease-in-out;
}
.slider .icons span:nth-of-type(5) {
	background-image: url(../images/icons/phone.png);
	transition: all .4s .4s ease-in-out;
}
.slider .icons span:nth-of-type(6) {
	background-image: url(../images/icons/shirt.png);
	transition: all .4s .5s ease-in-out;
}
.slider .icons span:nth-of-type(7) {
	background-image: url(../images/icons/mask.png);
	transition: all .4s .6s ease-in-out;
}
.slider .icons span:nth-of-type(8) {
	background-image: url(../images/icons/mug.png);
	transition: all .4s .7s ease-in-out;
}
.slider .icons span:nth-of-type(9) {
	background-image: url(../images/icons/card.png);
	transition: all .4s .8s ease-in-out;
}
.grid {
	width: 100%;
	display: flex;
	flex-flow: row;
	align-content: center;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}
.grid > a {
	height: 300px;
	width: 200px;
	padding: 20px;
	background: #fff;
	margin: 10px;
	position: relative;
	display: flex;
	flex-flow: column;
	align-content: center;
	align-items: center;
	justify-content: flex-start;
	cursor: pointer;
	overflow: hidden;
	transition: all .3s ease-in-out;
}
.grid > a:hover {
	padding: 0;
	transition: all .4s ease-in-out;
}
.grid > a::after {
	content: "customize\2192";
	color: #fff;
	font-size: .9rem;
	height: 40px;
	width: 100%;
	line-height: 40px;
	text-align: center;
	text-transform: uppercase;
	position: absolute;
	left: 0;
	bottom: -40px;
	opacity: 0;
	transition: all .4s ease-in-out, letter-spacing .8s ease-in-out;
}
.grid > a:hover::after {
	opacity: 1;
	bottom: 0;
	letter-spacing: .1em;
	background: rgba(184, 216, 227, .4);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}
.grid > a .thumb {
	width: 100%;
	height: 200px;
	margin-bottom: 20px;
	display: block;
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-position: center center;
	transition: all .4s ease-in-out, background-size .7s ease-in-out;
}
.grid > a:hover .thumb {
	height: 100%;
	width: 100%;	
	margin: 0;
	background-size: auto 133%;
}
.grid > a .thumb img {
	max-height: 100%;
	max-width: 100%;
	transition: all .5s ease-in-out;
}
.grid > a:hover .thumb img {	
	height: 120%;
	width: auto;
	max-height: 120%;
	max-width: 99999999px;
}
.grid > a .title {
	display: block;
	position: absolute;
	top: 240px;
	left: 0;
	width: 100%;
	text-align: center;
	text-transform: capitalize;
	color: #906d73;
	font-size: .9rem;
	line-height: 1.4;
	transition: all .2s ease-in-out;
}
.grid > a:hover .title {
	opacity: 0;
}
iframe {
	width: calc(100% - 60px);
	margin: 0 auto;
	height: 820px;
	display: block;
}



@media only screen and (max-width: 560px) {
	
	body {
		font-size: 14px;
	}
	header {
		height: 80px;
		padding-top: 30px;
		margin-bottom: 30px;
	}
	header .logo {
		display: block;
		position: static;
		top: auto;
		left: auto;
		height: 50px;
		width: 250px;
		margin: 0 auto 20px;
		/* 0.189780839050854 */
	}
	header .button {
		display: none;
	}
	.intro {
		position: relative;
		width: 100vw;
		height: 169px;
		background: url(../images/icons/icons-long.png) repeat-x left 0 center;
		margin: 0 0 40px;	
		animation: iconcycle 55s infinite linear;
	}
	.slider {
		width: 300px;
		height: 169px;
	}
	@keyframes slider {
		0%,25% {
			left: 0;
		}
		35%,60% {
			left: -300px;
		}
		70%,90% {
			left: -600px;
		}
		100% {
			left: 0;
		}
	}
	.slides > a {
		display: flex;
		flex: 0 0 300px;
		width: 300px;
		height: 169px;
	}
	.slides > a .title {
		font-size: 1rem;
		padding: 10px 30px;
	}
	.slides > a:hover .title{		
		padding: 10px 30px 30px;
		transition-delay: 0s;
	}
	.slider .icons {
		height: 40px;
	}
	.slider .icons span {
		width: 14px;
		height: 14px;
		margin: 7px 7px 0;
	}
	.slider a:hover .icons span {
		margin: 0 7px;
	}
	
}