/* RESET ------- */

html, body, div, span, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, cite, code, em, img, strong, sub, sup, b, u, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, output, section, summary, time, mark, audio, video { position: relative; margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; max-width: 100%; font-size: 100%; vertical-align: baseline; border: 0; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; -webkit-box-sizing: border-box; box-sizing: border-box; }



/* FLEX CLASSES ------- */



.flex { display: -webkit-box; display: -ms-flexbox; display: flex; }

.row { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; }

.column { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }

.justify-center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

.justify-around { -ms-flex-pack: distribute; justify-content: space-around; }

.justify-between { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }

.align-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

.align-start { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; }

.flex-wrap { -ms-flex-wrap: wrap; flex-wrap: wrap; }

.gap1 { gap: 1rem; }





/* FONTS ------- */



@font-face {

    font-family: 'serp';

    src: url('fonts/serpntb-webfont.woff2') format('woff2'),

         url('fonts/serpntb-webfont.woff') format('woff');

    font-weight: normal;

    font-style: normal; }

		



/* BODY AND GENERAL STYLES ------- */



html {

	font: normal 16px/1 'Open Sans', sans-serif;

	color: #000;

	-webkit-font-smoothing: antialiased;

	-moz-osx-font-smoothing: grayscale; }



h1, h2, h3, .logo {

	font-family: 'Open Sans', sans-serif;

	color: #fab81e;

	text-transform: uppercase; }



h1, h2, h3 { width: 100%; }



h1 {

	margin: 0 0 10px;

	padding: 18px 0 0;

	font-size: 1.85rem;

	line-height: 1;

	color: #fab81e;

	letter-spacing: -.0025em; }



h1 a {

		display: block;

		width: 100%;

		color: #fff;

		letter-spacing: -.025em;

		text-decoration: none;

		-webkit-transition: all .25s ease-in-out;

		-o-transition: all .25s ease-in-out;

		transition: all .25s ease-in-out; }



h1 a:hover,

h1 a:focus { color: #fab81e; }



h2 { 

	margin: 0 0 10px; 

	font-size: 1.5rem; }



p {

	margin: 0 0 20px;

	line-height: 1.4; }

	

li, dd { margin: 0 0 10px; }

	

.question {

	margin-bottom: 5px;

	font-weight: bold; }



a { color: #3266ad; }

a:focus { border: 0; outline: 0; }



.btn-wrap a {

	padding: 14px 40px;

	background: #3266ad; 

	font-weight: bold; 

	color: #fff;

	text-decoration: none; 

	white-space: nowrap; 

	border-radius: 5px; 

	transition: background .125s linear; }

	

.btn-wrap a:hover { background: #fc3; color: #333; }





img { max-width: 100%; height: auto; }

img.full { width: 100%; }



/* LAYOUT ------- */



header {

	padding: 30px; 

	background-image: 

		url(images/bg-header.png),

		url(images/bg-header-tiles.png),

		url(images/bg-header-tiles-rev.png);

	background-position: 

		0 -2px,

		0 50%,

		100% 50%;

	background-repeat: 

		repeat,

		no-repeat,

		no-repeat; 

	width: 100%; 

	border-top: 8px solid #333;

	overflow: hidden; }

 

.inner {

	margin: 0 auto;

	padding: 15px 30px;

	max-width: 1100px; }

 

.home .inner {

	display: -webkit-box; display: -ms-flexbox; display: flex;

 -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;

	-webkit-box-align: center; -ms-flex-align: center; align-items: center;

	-ms-flex-wrap: wrap; flex-wrap: wrap; }



.logo { 

	z-index: 2; 

	width: 327px;

	color: #333;

	text-align: center; 

	text-decoration: none;

	}

		

.logo div { cursor: pointer; }

	

.logo :nth-child(1) {

	z-index: 2; 

	margin-bottom: 7px; 

	font: normal 72px/1 'serp', sans-serif; 

	text-align: center;	

	text-decoration: none; 

	border-bottom: 2px solid #333; }

	

.logo :nth-child(2) { 

	display: block; z-index: 2; 

	padding-left: 10px; 

	font: normal 24px/.7 'Open Sans', sans-serif; 

	letter-spacing: 22px; 

	text-align: center; }

	

.logo :nth-child(3) {

	margin: 30px 0 0; 

	font: normal 28px/1 'serp', sans-serif; 

	letter-spacing: 5px; }



.logo-phone { 

	display: -webkit-box; display: -ms-flexbox; display: flex;

	-webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;

	-webkit-box-align: center; -ms-flex-align: center; align-items: center;

	-ms-flex-wrap: wrap; flex-wrap: wrap;

	width: 1000px; }



.phone {

	z-index: 2;

	padding: 0; 

	height: 75px;

	font: normal 48px/1 'Open Sans', sans-serif; 

	color: #333;

	text-decoration: none; 

	border: 0; 	 

	cursor: pointer; }



.phone img {

	display: inline-block; 

	position: relative; top: 0; left: 4px;

	height: 40px;

	width: 40px; }



.phone:hover { color: #3266ad; }



.phone:hover img {

	-webkit-animation: wiggle .07s alternate ease infinite;

	animation: wiggle .07s alternate ease infinite; }



@keyframes wiggle {

	from { transform: rotate(0deg); }

	to   { transform: rotate(30deg); }

}





/* NAV ------- */



nav {

	margin: 0; 

	padding: 10px 0;

	width: 100%; 

	background: #333; 

	text-align: center; }

	

nav ul { 

	display: -webkit-box; display: -ms-flexbox; display: flex;

	-ms-flex-pack: distribute; justify-content: space-around;

	-ms-flex-wrap: wrap; flex-wrap: wrap;

	margin: 0 auto;

	max-width: 1200px; }

	

nav li {

	list-style: none;

	display: inline-block;

	margin: 0;

	padding: 10px 0;

	text-align: center;

	white-space: nowrap; }



nav a {

	display: block;

	height: 100%; 

	width: 100%;

	font-weight: bold;

	line-height: 1;

	font-face: 'Open Sans', sans-serif; 

	color: #fff;

	text-decoration: none; }



nav a:hover,

nav a:focus { color: #fab81e; }





nav-soc {

	display: block;

	padding: 10px; }



nav-soc a {

	display: inline-block;

	width: 40px;

	height: 40px;

	background-repeat: no-repeat;

	background-position: center;

	background-size: 24px 24px;

	border-radius: 5px; }



nav-soc .fb { background-image: url(images/fb.svg); }

nav-soc .tw { background-image: url(images/tw.svg); }



nav-soc a:hover,

nav-soc a:focus { background-color: #fab81e; }



.home nav .home a, 

.about nav .about a,

.faq nav .faq a,

.testimonials nav .testimonials a,

.products nav .products a,

.transformations nav .transformations a,

.contact nav .contact a { color: #fc3; }



.home-01 { border-bottom: 12px solid #333; }



.primary {

	width: calc(100% - 300px); 

}



.test {

	background: #ddd; 

	font-size: 1.5rem; }



.sidebar {

	width: 300px; 

}



/* FOOTER ------- */



footer {

	width: 100%; 

	background: #333; }



.copy {

	margin: 0 auto;

	padding: 40px;

	font-size: .75rem;

	color: #fff;

	line-height: 1.25;

	text-align: center;

	text-transform: uppercase; }



.copy span { white-space: nowrap; }



.copy a { color: #fab81e; text-decoration: none; }

.copy a:hover,

.copy a:focus { color: #fff; }



/* HOME PAGE */



.home .hero { 

	height: calc(100vh - 212px); 

	background-color: #aaa;

	background-image: url(images/kitchen-01.jpg);

	background-position: center top;

	background-repeat: no-repeat; 

	background-size: cover; }

	

.hh-overlay * {

		position: relative;

	  animation: .5s linear both slideLeftFade20; }



.hh-overlay {

	display: flex;

	flex-direction: column;

	justify-content: space-between;

	position: relative;

	padding: 8%;

	height: 100%;

	width: 50%;

	background: rgba(0,0,0, .8);

	font-weight: bold;

	color: #fff;

	animation: .5s ease-out .5s both slideRight; }

	

.bug {

	margin: 0 0 5px 15px;

	padding: 0;

	font-size: 16px;

	color: #F7B72F;

	text-transform: uppercase;

	animation-delay: 2.6s; }

	

.hh-overlay h1 {

	display: block;

	margin: 0 0 20px;

	padding: 0;

	font-weight: 800;

	font-size: 80px;

	font-size: calc( 16px + (80 - 16) * (100vw - 300px)/(2000 - 300) );

	color: #fff;

	text-align: left;

	animation-delay: 1.3s; }

	

.metro {

  margin: 0; 

	font-weight: bold; 

	color: #fff;

  animation-delay: 2s; }

	

.hero ul { 

	margin-left: 50px; 

	color: #f7b72f; }



.hero li { 

	list-style: none; 

	display: flex; 

	align-items: center; }



.hero li:before { 

    content: "";

    display: block; top: 0; left: -1em; 

	position: relative; 

    height: 0;

    width: 0;

	border-color: transparent #f7b72f;

    border-style: solid;

    border-width: 0.3em 0 0.3em 0.45em; }



.hero li:nth-child(1) { animation: .5s cubic-bezier(0.550, 0.085, 0.385, 1.5) 3.6s both slideLeftFade180; }

.hero li:nth-child(2) { animation: .5s cubic-bezier(0.550, 0.085, 0.385, 1.5) 3.9s both slideLeftFade180; }

.hero li:nth-child(3) { animation: .5s cubic-bezier(0.550, 0.085, 0.385, 1.5) 4.2s both slideLeftFade180; }

.hero li:nth-child(4) { animation: .5s cubic-bezier(0.550, 0.085, 0.385, 1.5) 4.5s both slideLeftFade180; }



.on .hh-overlay { left: 0; }

.on .hh-overlay * { left: 0; opacity: 1; }

.on .bug img { top: 0; }



@keyframes slideRight {

	from { transform: translateX(-100%); }

	to   { transform: translateX(0);     }

}



@keyframes slideLeftFade20 {

	from { transform: translateX(20px); opacity: 0; }

	to   { transform: translateX(0);    opacity: 1; }

}



@keyframes slideLeftFade180 {

	from { transform: translateX(180px); opacity: 0; }

	to   { transform: translateX(0);    opacity: 1; }

}



@media (max-width: 700px) {

	.hero ul { margin-left: 20px; }

}



/* HOME DIVS */



[class*="home-"] { background: #ddd; color: #333; }

[class*="home-"]:nth-child(even) { background: #333; color: #fff; }



[class*="home-"] .inner { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; padding: 0; }

[class*="home-"] .inner > div { width: 50%; }



.home-contact .inner { padding: 50px 10%; }



.thanks {

	margin: 20px; 

	padding: 20px; 

	background: #ddd; 

	font-size: 1.2rem; 

	color: #444; }

	

.thanks h3 { color: #444; }



.text { 

	display: -webkit-box; display: -ms-flexbox; display: flex;

	-webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;

	padding: 25px; }

	

.home-test p { 

	display: flex; 

	justify-content: space-between;

	align-items: center; 

	flex-wrap: wrap; 

	margin-bottom: 0; }

	

.home-test cite {

	margin-top: 10px; 

	font-style: normal; 

	font-weight: bold; 

	text-align: left; }

	

blockquote {

	margin: 0 40px 40px; 

	padding: 20px; 

	border-left: 5px solid #3566ab; }

	

blockquote cite {

	display: flex; 

	align-items: center; 

	gap: 1rem;

	margin: 10px 0 0; 

	font-weight: bold; 

	font-style: normal; 

	line-height: 1.3;

}

	

cite img { 

	border-radius: 50%;

}

	



[class*="home-"] 		  h2 { margin: 0 0 10px; color: #333; }

[class*="home-"].dark	h2 { color: #fc3; }



div[class*="home-"]:nth-child(odd) h2:before { color: #333; }



[class*="home-"] .inner p { line-height: 1.6; }



[class*="home-"] .btn-wrap { margin: 10px 0 0; text-align: left; }

[class*="home-"] .btn-wrap a { background: #3266ad; color: #fff; }



[class*="home-"] .btn-wrap a:hover { background: #fc3; color: #3266ad; }



[class*="home-"] .inner > div:not(.text) { line-height: 0; }



div[class*="home-"] h2:before {

	content: '\2605';

	padding-right: 10px; 

	color: #333; }

	

div[class*="home-"].dark h2:before {

	color: #fc3; }





.intro {

	margin-top: 10px;

	padding: 10px;

	background: rgba(25,25,25, .5);

	border-radius: 10px; }



.intro h2, .intro p {

	display: inline-block;

	margin: 0;

	width: 49%; }



.intro h2 {

	font-size: 2rem;

	text-align: center; }



.intro p {

	padding: 20px;

	background: #191919;

	color: #fff;

	border-radius: 10px; }



.home .intro:last-of-type p { text-align: center; }



.home h1 { margin-top: 0px; }





/* INTERNAL PAGES */



body:not(.home) .hero { 

	height: calc(75vh - 212px);

	background: url(images/kitchen-01.jpg) no-repeat left top; background-size: cover; }

	

body.about .hero { 				background: url(images/hero-2.jpg) no-repeat left bottom #aaa; }

body.faq .hero { 				background: url(images/hero-3.jpg) no-repeat left bottom #aaa; }

body.transformations .hero { 	background: url(images/hero-4.jpg) no-repeat left bottom #aaa; }

body.products .hero { 			background: url(images/hero-5.jpg) no-repeat left bottom #aaa; }

body.contact .hero { 			background: url(images/hero-6.jpg) no-repeat left bottom #aaa; }



.owners {

	padding: 20px; 

	background: #eee; }



.owners > div { 

	padding: 10px; 

	width: 50%; 

	overflow: auto; }

	

.owners > div h3 { 

	margin-bottom: 5px; 

	width: 100%; 

	color: #444; }

	

.owners img {

	float: left: 

	height: auto; 

	width: 45%; }



.owners > div p { 

	float: right; 

	padding: 0 10px;

	width: 55%; 

	line-height: 1.4; }



.gallery {

	justify-content: center; 

	gap: .25rem;

}



.gallery img { 

	top: 0; 

	margin: 0 20px 20px 0;

	padding: 10px;

	height: auto; 

	max-width: 280px; 

	background: rgba(0,0,0, .1); 

	border: 1px solid rgba(0,0,0, .35); 

	border-radius: 5px; 

	transition: all .15s linear; }

	

.gallery img:hover {

	top: -4px; 

	background: #fff;

	border: 1px solid transparent; 

	box-shadow: 0 2px 5px rgba(0,0,0, .3); }

	

.fancybox-navigation .fancybox-button { top: calc(50vh - 50px); }



/* SERVICES */



.process {

	counter-reset: process;

}



.process h2 {

	margin-top: 2rem;

}



.process h3 {

	counter-increment: process;

}



.process h3::before {

	counter: process;

	content: counter(process);

	display: inline-grid;

	align-content: center;

	margin: 0 1rem 0 0;

	width: 32px;

	height: 32px;

	background-color: #3266AD;

	color: #fff;

	text-align: center;

	border-radius: 100%;

}





/* CONTACT FORMS */



form {

	min-width: 50%; max-width: 600px; }

	

label { 

	display: block; 

	margin: 0 0 5px; }



input, textarea {

	margin-bottom: 20px;

	padding: 10px;

	width: calc(100% - 22px);

	background: #ddd;

	font: bold 1rem/1 sans-serif;

	border: 1px solid #ccc;

	border-radius: 3px; }



input:focus, textarea:focus { background: #fff; }



textarea { height: 150px; }



[type="submit"] {

	padding: 10px 20px;

	background: #fab81e;

	width: auto;

	color: #27262E;

	border: 0;

	border-radius: 3px;

	cursor: pointer; }



[type="submit"]:active,

[type="submit"]:focus {

	background: #fab81e;

	color: #27262E;

	border: 0; }





/* PAGES ------- */



.left { 

	padding: 20px; 

	width: calc(100% - 400px); }

	

.right {

	padding: 20px; 

	width: 400px; max-width: 100%; }

	

.left h1, .right h1 { padding-top: 0; font-size: 1.5rem; }



.manus { 

	gap: 1rem; 

	margin: 40px 0; 

}



.manus a { 

	margin-bottom: 30px; 

	min-width: 25%; 

	text-align: center; }

	

.modal { display: none;

	opacity: 1; 

	position: fixed; 

	top: calc(50% - 150px); left: calc(50% - 150px); 

	z-index: 999; 

	padding: 20px; 

	width: 300px; max-width: 100%; 

	background: #333;

	color: #fff; 

	border: 5px solid #aaa; 

	border-radius: 10px; 

	animation: slidein 2.5s;

	transform: scale(1.5); }

	

[class*="home-"] .modal { padding: 20px 20px 30px; }

	

.modal h2 { 

	font-size: 2.4rem; 

	color: #fc3 !important;

	text-align: center; }

	

.modal h2:before { content: ''; display: none; }

	

.modal h2 span { display: block; }



.modal h3 { text-align: center; }



.modal p { text-align: center; }

	

.modal a.btn {

	display: block; 

	margin: 0 auto;

	padding: 10px 20px; 

	width: auto; 

	background: #fff; 

	text-align: center; 

	text-decoration: none; }

	

.modal .close {

	position: absolute; top: -12px; right: -12px; 

	display: block;

	margin: 0; 

	padding: 0; 

	height: 24px;

	width: 24px; 

	background: #000;

	font-weight: bold; 

	line-height: 14px; 

	color: #fc3; 

	text-align: center; 

	border: 3px solid #aaa;

	border-radius: 50%; 

	cursor: pointer; }

	

@media (max-width: 475px) {

	.modal { transform: scale(1); }

}



@keyframes fadein {

    from { opacity: 0; }

    to   { opacity: 1; }

}



@keyframes slidein {

    from { left: -100%; }

    to   { left: calc(50% - 150px); }

}



.modal.hide { display: none; }





/* UTILITY CLASSES ----------- */



b, strong, .bold { font-weight: bold; }

i, em { font-style: italic; }

.red { color: #f00; }

[hidden] { visibility: hidden; }

.nopad { padding: 0 !important; }



ul { margin: 20px 0 40px 40px; }

dl { margin: 40px 0 60px 20px; }

dt { margin: 20px 0 10px; font-weight: bold; font-size: 1rem; }

dd { margin: 0 20px 10px; }

li, dd { line-height: 1.5; }

.note { font-size: .8rem; color: #999; text-transform: uppercase; }



/* MOBILE STYLES ------- */



@media (max-width: 1730px) {

	.logo-phone { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; max-width: 100%; }

	.logo { margin-right: 20px; }

}



@media (max-width: 1425px) {

	header { background: url(images/bg-header.png); }

	.phone { font-size: 24px; }

}



@media (max-width: 1024px) {

	[class*="home-"] .inner img { height: 100%; width: auto; }

	.gallery { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

}



@media (max-width: 1000px) {

	.wrap { padding: 0 20px; }

	body.about .hero, body.faq .hero, body.transformations .hero, body.products .hero, body.contact .hero { background-size: 100%; }

	body:not(.home) .hero { padding-bottom: 25%; height: 0; }

}



@media (max-width: 800px) {

	nav {  -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; margin-top: 20px; }

	nav { margin-top: 10px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

	nav li { width: 40%; margin-bottom: 10px; text-align: center; }

	.bug { margin-left: 0; }

	[class*="home-"] .inner > div { width: 100%; }

	[class*="home-"] .inner img { width: 100%; height: auto; }

	.hero { display: none; }

	.left, .right { width: 50%; min-width: 220px; }

	body.transformations h1 { font-size: 1.5rem; }

	.gallery a { width: 100%; text-align: center; }

	.gallery img { margin: 0 0 20px; max-width: 100%; }

}



@media (max-width: 610px) {

	.logo-phone { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

	nav { padding: 0 10px; }

}



@media (max-width: 550px) {

	.inner { padding: 15px; }

	.hh-overlay { width: 100%; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; }

	.hero h1 { font-size: 28px; }

	[class*="home-"] .btn-wrap a { display: inline-block; margin: 0 0 20px; }

	.body:not(.home) .hero { display: none; }

	.left, .right { width: 100%; }

}



@media (max-width: 450px) {

	.intro h2, .intro p { width: 100%; }

	.intro h2 { margin-bottom: 5px; }



}



@media (max-width: 390px) {

	header { padding: 10px; }

	.logo-phone { transform: scale(.75); }

	.logo { margin: 0; }

	.logo :nth-child(1) { font-size: 64px; }

	.logo :nth-child(2) { letter-spacing: 10px; }

}