@charset "UTF-8";
/*
	Fluid CSS
	
	1. General
	2. Layout
	3. Additonal
	4. Clears
	5. Breakpoints
*/

/* - - - - - - - - - - - 1. General - - - - - - - - - - - */

html {margin: 0; padding: 0;}
body {margin: 0; padding: 0; overflow-x: hidden;}


/* - - - - - - - - - - - 2. Layout - - - - - - - - - - - */

.main, .full, .half, .third, .quarter, .fifth, .three-quarters, .one-quarter, .one-third, .two-thirds, .eighth, .sixth, .left, .right {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.main {width: 1320px; padding: 0 10px; margin: auto;}
.full {width:100%; padding: 0 10px;}
.half {width: 50%; padding: 0 10px; float: left; margin-bottom: 20px; position: relative;}
.third {width: 33.3%; padding: 0 10px; float: left; margin-bottom: 20px;}
.quarter {width: 25%; padding: 0 10px; float: left; margin-bottom: 20px;}
.fifth {width: 20%; padding: 0 10px; float: left; margin-bottom: 20px;}
.three-quarters {width: 75%; padding: 0 10px; float: left; margin-bottom: 20px;}
.one-quarter {width: 25%; padding: 0 10px; float: left; margin-bottom: 20px;}
.one-third {width: 33.3%; padding: 0 10px; float: left; margin-bottom: 20px;}
.two-thirds {width: 66.6%; padding: 0 10px; float: left; margin-bottom: 20px;}
.eighth {width: 12.5%; padding: 0 10px; float: left; margin-bottom: 20px;}
.sixth {width: 16.6666667%; padding: 0 10px; float: left;}
.left {width: 70%; padding: 0 10px; float: left;}
.right {width: 30%; padding: 0 10px; float: left;}


/* - - - - - - - - - - - 3. Additional - - - - - - - - - - - */

.padded {padding: 50px 10px;}
.padded-more {padding: 80px 10px;}
.padded-content {width: 80%; margin: auto; display: block;}
.align-center {text-align: center;}
.align-right {text-align: right;}
.align-left {text-align: left;}
.justified {text-align: justify;}
.center {margin: auto;}
.indented {padding-left: 20px;}
.relative {position: relative;}
.none {display: none;}
img {border: none;}
.full-image {width: 100%;}
.half-image {width: 50%; margin: auto; display: block;}
.eighty-image {width: 80%; margin: auto;}
.slanted-image {width: 100%;}
.slanted-text-container {margin-top: -80px;}
.grow {transition: all .2s ease-in-out;}
.grow:hover {transform: scale(1.1);}
.early-break-image {display: none;}
.no-bottom {margin-bottom: 0;}
.bottom {margin-bottom: 20px;}
.float-image {float: right; margin: 0 0 20px 20px;}
.float-left {float: left;}
.float-right {float: right;}
.float-image-small {float: right; margin: 0 0 20px 20px;}
hr {width: 100%; background: transparent; border: none; border-top: 2px dotted #b6b6b7; margin: 30px auto 40px auto;}
.mobile-hr {display: none;}
.border {border:1px solid #ccc;}
.end {margin-right: 0!important;}
.rounded-hidden {-moz-border-radius: 6px; border-radius: 6px; overflow: hidden;}
.i-margin {margin-right: 10px;}
.phone-desktop {display: block;}
.phone-mobile {display: none;}
.single-row .half, .single-row .third, .single-row .quarter, .single-row .fifth, .single-row .sixth, .single-row .eighth, .single-row .one-quarter, .single-row .three-quarters {margin-bottom: 0;}
nav #desktop-menu > ul > li > a, .slide-container, .slide-content, .right-box, .image-border, .image-border img, .half-list li {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.bottom-image {position: absolute; bottom: -4px;}


/* - - - - - - - - - - - 4. Clears - - - - - - - - - - - */

.clear {clear: both;}
.section, .main {*zoom: 1;}
.main:before, .main:after, .dark-section:before, .dark-section:after, .menu-section:before, .menu-section:after {display: table; content: ""; line-height: 0; }
.main:after, .dark-section:after, .menu-section:after { clear: both }



/* - - - - - - - - - - - 5. Breakpoints - - - - - - - - - - - */

@media only screen and (max-width: 1280px) {
	.main {width: 100%;}
	.eighth {width: 25%;}

	/* Additional */
}


@media only screen and (max-width: 1200px) {

	/* Additional */
}

@media only screen and (max-width: 1100px) {

	/* Additional */
	.knife-section {background-size: 450px;}
	.plans-section {background-size: 450px;}
	.logo-container {width: 120px;}
	.logo-container img {width: 80px; margin: 10px; padding: 0;}
}


@media only screen and (max-width: 1000px) {
	.quarter {width: 50%;}
	.eighth {width: 25%;}
	.three-quarters {width: 100%; float: none;}
	.one-quarter {width: 100%; float: none;}
	.left {width: 60%;}
	.right {width: 40%;}
	h2 {font-size: 24px;}
	nav {height: auto;}
	#desktop-menu {display: none;}
	.selection {margin-bottom: 20px;}
	.single-row {padding-bottom: 10px;}
	.single-row .quarter {margin-bottom: 20px;}
	.single-row .one-quarter {margin-bottom: 20px;}
	.single-row .three-quarters {margin-bottom: 20px;}
	.text-break {display: inline;}
	.phone-desktop {display: none;}
	.phone-mobile {display: block;}

	/* Additional */
	header {height: 75px; padding-top: 50px; margin-top: 0;}
	.logo-container {height: 75px;}
	.slide-content {height: auto;}
	.slide-title {font-size: 60px; line-height: 60px; font-weight: 300;}
	.footer-left {width: 240px; margin: auto;}
	footer ul {float: none; width: 80%; margin: 10px auto; text-align: center;}
	footer p {text-align: center;}
	.slanted-section {background-size: 150%; height: 300px;}
	.image-border {width: 50%;}
}


@media only screen and (max-width: 900px) {
	h1 {font-size: 34px; line-height:44px;}

	/* Additional */
	.knife-section {background-size: 400px;}
	.plans-section {background-size: 400px;}
}

@media only screen and (max-width: 800px) {
	.one-third {width: 100%; float: none;}
	.two-thirds {width: 100%; float: none;}
	.slanted-image {width: 200%;}
	.half-list li {width: 100%; padding: 10px 0; float: none;}

	/* Additional */
	.kitchen-section {background: #e4e4d9;}
	.knife-section {background: #fff;}
	.plans-section {background: #fff;}
	.knife-image {display: block;}
	.plans-image {display: block;}
	.early-break {width: 100%!important; float: none!important;}
	.early-break-image {display: block;}
	.slide-title {font-size: 40px; line-height: 40px;}
	.bottom-image {width: 350px; height: 320px; margin: auto;}
}

@media only screen and (max-width: 700px) {
	.quarter {width: 50%;}
	.eighth {width: 50%;}
	.home-slideshow-container, .home-slideshow {height: 300px; margin-top: 0;}
	.slide-container {background-size: 1000px; height: 300px;}
	.float-image {width:100%; float: none; margin: 0 0 20px 0;}
	.float-image-small {width:30%;}
		
	/* Additional */	
	.down {display: none;}
	.slide-content {margin-top: 50px;}
}

@media only screen and (max-width: 650px) {
	.left, .right {width: 100%; float: none;}

	/* Additional */
	.right-box img {width:38%; margin: 1%; float: right; padding: 10px; border: 1px solid #ccc; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
	.right-box-content {width:60%; float: left;}
}


@media only screen and (max-width: 600px) {
	.half {width: 100%;}
	.quarter {width: 50%;}
	.eighth {width: 50%;}
	.third {width: 100%; }	
	.main-contact .form-field, .main-contact .form-select {width: 98%; margin-bottom:20px; float: none;}
	.mobile-hr {display: block;}
	.selections .third {margin-bottom: 20px;}
	.single-row {padding-bottom: 10px;}
	.single-row .third {margin-bottom: 20px;}
	.indented {padding-left: 0;}

	/* Additional */
	.bottom-image {position: relative;}
	.slide-subtitle {font-size: 16px; line-height: 20px; font-weight: 400;}
	.button {width: 100%;}
}

@media only screen and (max-width: 550px) {

	/* Additional */
	.slide-title {font-size: 30px; line-height: 34px;}
	.slanted-section {height: 200px;}
	.right-box img {width:100%; margin: 0 0 20px 0; float: none; padding: 0; border: none;}
	.right-box-content {width:100%; float: none;}
	.image-border {width: 100%;}
}

@media only screen and (max-width: 500px) {

	/* Additional */
	h1 {font-size: 30px; line-height: 38px;}
	h3 {font-size: 24px; line-height: 34px;}
}

@media only screen and (max-width: 450px) {
	.quarter {width: 100%;}
	.eighth {width: 100%;}
	.third {width: 100%;}
	.terms {height: auto;}

	/* Additional */
}