.container{
	margin-left:auto;
	margin-right:auto;
}

body{
	background-color: #f3ebde;
}

/* MOBILE STYLES ////////////////////////////////////////////////////////////////////////////////////////////////*/
@media only screen and (max-width: 767px){
	.container{
		width:87.5%; /* 280 pixels at a 320 pixel screen width (iPhone 3 / 4 / 5) */
	}

	.flex{
		display: flex;
	}

	header{
		height: 50px;
		position: fixed;
		width: 100%;
		z-index: 3;
		padding-top: 6.25vw;
		z-index: 20;
	}

	a{
		display: block;
		text-decoration: none;
	}

	.headerLogo{
		display: none;
	}

	.burgerMenu{
		height: 9vw;
		width: 12vw;
		padding-top: 3vw;
		background-color: #ffdca5;
		border-radius: 2vw;
		border: 2px solid #d3a55c;
	}

	.line{
		height: 1.5px;
		width: 70%;
		margin-left: auto;
		margin-right: auto;
		background-color: #5f4b40;
		margin-bottom: 2.25vw;
		border-radius: .5vw;
	}

	.linksHolder{
		display: none;
	}

	.linksHolderHolderMobile{
		position: fixed;
		width: 100vw;
		height: 0vh;
		background-color: #ffdca5;
		z-index: 30;
	}

	.close{
		display: none;
		background-color: #fff;
		height: 12vw;
		width: 12vw;
		position: absolute;
		top: 6.25vw;
		left: 6.25vw;
	}

	.linksHolderMobile{
		display: none;
		height: 100vw;
		width: 100vw;
		padding-top: 20vw;
	}

	.headerLink{
		font-family: montserrat;
		width: 80vw;
		text-align: center;
		padding: 7.5vw;
		line-height: 50px;
		color: #5f4b40;
		font-weight: 400;
		transition: color 500ms, font-weight 500ms;
	}

	.linkLine{
		width: 100vw;
		height: .05em;
		background-color: #5e4b40;
	}

	.cart{
		height: 12.84vw;
		width: 12vw;
		border-radius: 2vw;
		margin-left: auto;
		scale: .95;
		transition: scale 500ms;
		background-image: url(../images/cart.png);
		background-size: 100%;
	}

	.cart:hover{
		scale: 1;
		transition: scale 500ms;
	}

	.hero{
		height: 128vw;
		width: 100%;
		overflow: hidden;
	}

	.decalMobile{
		position: absolute;
		width: 102vw;
		height: 48.858vw;
		rotate: -30deg;
		background-image: url(../images/decalMobile.jpg);
		background-size: 100%;
		left: -10vw;
		top: -15vw;
	}

	.headerSpace{
		height: 60vw;
		width: 100%;
	}

	.heroImage{
		display: none;
	}

	.heroLogo{
		width: 71.25vw;
		height: 35.625vw;
		background-image: url(../images/heroLogo.jpg);
		background-size: 100%;
		margin-left: 8.125vw;
		margin-bottom: 3vw;
	}

	.heroInfo{
		z-index: 3;
	}

	.heroInfo br{
		display: none;
	}

	h1{
		font-family: montserrat;
		font-size: 4.25vw;
		width: 75%;
		margin-left: 12.5%;
		text-align: center;
		line-height: 5vw;
		margin-bottom: 3vw;
		color: #362a25;
	}

	.cta{
		font-family: montserrat;
		text-transform: uppercase;
		letter-spacing: 1vw;
		width: 54vw;
		height: 11.020408163265306vw;
		margin-left: 13.875vw;
		scale: .95;
		transition: scale 500ms;
		border-radius: 6vw;
	}

	.cta:hover{
		scale: 1;
		transition: scale 500ms;
	}

	.decalHolder{
		width: 100%;
		height: 85vw;
		overflow: hidden;
		position: relative;
		top: -10vw;
	}

	.heroDecal{
		width: 80vw;
		height: 87.91208791208792vw;
		background-image: url(../images/heroDecal.jpg);
		background-size: 100%;
		position: absolute;
		right: -5vw;
		top: 2vw;
		rotate: 7deg;
		z-index: 0;
	}

	.featuredHeading{
		width: 87.5vw;
		height: 41.3984375vw;
		background-image: url(../images/featuredKits2.png);
		background-size: 100%;
		margin-bottom: 3vw;
		z-index: 3;
	}

	.space{
		height: 1.5vw;
		width: 100%;
	}

	.featuredKitsHolder{
		height: 55vw;
		margin-bottom: 2vw;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.arrowLeft{
		height: 7.919123505976096vw;
		width: 6.95vw;
		background-image: url(../images/leftArrow.jpg);
		background-size: 100%;
		position: absolute;
		left: calc(50% - 43vw);
		top: calc(50% - 6vw);
		transform: translateY(-50%);
		cursor: pointer;

	}

	.arrowRight{
		height: 7.919123505976096vw;
		width: 6.95vw;
		background-image: url(../images/rightArrow.jpg);
		background-size: 100%;
		position: absolute;
		right: calc(50% - 43vw);
		top: calc(50% - 6vw);
		transform: translateY(-50%);
		cursor: pointer;
	}

	.kitsViewport{
		width: 67.6vw;
		height: 55vw; 
		overflow: hidden;
	}

	.kitsImageHolder{
		display: flex;
		flex-wrap: nowrap; 
	}

	.featuredKit{
		width: 67.6vw;  /* match .featureImage */
	    height: 55vw;
	    border-radius: 1vw;
	    flex-shrink: 0;
	    position: relative; 
	    overflow: hidden;
	    margin-right: 1.5vw;
	}

	.featureImage{
		width: 100%;  /* fill the slide exactly */
	    height: 39.396vw;  /* keep your aspect ratio */
	    border-radius: 1vw;
	    background-size: cover;
	    background-position: center;
	    position: relative;
	    margin-bottom: 1.5vw;
	}

	.kitLabel{
		width: 100%;
		position: relative;
		bottom: auto;
		text-align: center;
	}

	.kit1{
		background-color: #fff;
	}

	.kit2{
		background-color: #ccc;
	}

	.kit3{
		background-color: #666;
	}

	.featuredKit h1{
		margin-bottom: 0;
	}

	p{
		font-family: montserrat;
		color: #362a25;
		text-align: center;
	}

	.decal2{
		width: 51.875vw;
		height: 27.70125vw;
		background-image: url(../images/decal2.jpg);
		background-size: 100%;
		margin-left:6.625vw;
		margin-bottom: 4vw;
		transform: reflect;
	}

	footer{
		height: 20vw;
		width: 100vw;
		background-color: #ffdca5;
	}
}

/* DESKTOP STYLES ////////////////////////////////////////////////////////////////////////////////////////////////*/
@media only screen and (min-width: 768px){
	.container{
		/*width:978px;*/
		width: 90%;
	}

	.flex{
		display: flex;
	}

	.linksHolderHolderMobile, .decalMobile{
		display: none;
	}

	header{
		height: 65px;
		background-color: #ffdca5;
		position: fixed;
		width: 100%;
		z-index: 3;
		padding-top: 15px;
		z-index: 20;
	}

	a{
		display: block;
		text-decoration: none;
	}

	.headerLogo{
		height: 50px;
		width: 100px;
		background-image: url(../images/logoSmall.png);
		background-size: 100%;
		scale: .95;
		margin-right: 4vw;
		transition: scale 500ms;
		background-repeat: none;
	}

	.headerLogo:hover{
		scale: 1;
		transition: scale 500ms;
	}

	.linksHolder{
		width: 50vw;
		margin-left: auto;
		margin-right: auto;
	}

	.headerLink{
		font-family: montserrat;
		width: 18.5vw;
		font-size: 14px;
		text-align: center;
		height: 50px;
		line-height: 50px;
		color: #5f4b40;
		font-weight: 400;
		transition: color 500ms, font-weight 500ms;
	}

	.headerLink:hover{
		color: #44342f;
		font-weight: 500;
		transition: color 500ms, font-weight 500ms;
	}

	.cart{
		height: 53.5px;
		width: 50px;
		border-radius: 15px;
		margin-left: auto;
		scale: .95;
		transition: scale 500ms;
		background-image: url(../images/cart.png);
		background-size: 100%;
	}

	.cart:hover{
		scale: 1;
		transition: scale 500ms;
	}

	.heroAnimation{
		width: 100vw;
		height: 50vw;
		position: relative;
	}

	/*.hero{
		height: 50vw;
		width: 100%;
		margin-bottom: 10vw;
	}*/

	.headerSpace{
		height: 5vw;
		width: 100%;
	}

	.heroImage{
		width: 45.75vw;
		height: 44.0115vw;
		position: absolute;
		background-image: url(../images/heroImage.jpg);
		background-size: 100%;
		top: 100px;
		z-index: 1;
	}

	.heroInfo{
		width: 45.75vw;
		padding-top: 7.5vw;
		margin-left: 34vw;
		z-index: 2;
	}

	.heroLogo{
		width: 28.5vw;
		height: 14.25vw;
		background-image: url(../images/heroLogo.jpg);
		background-size: 100%;
		margin-left: 8.625vw;
		margin-bottom: 1.5vw;
	}

	h1{
		font-family: montserrat;
		font-size: 1.5vw;
		text-align: center;
		line-height: 2vw;
		margin-bottom: 1.5vw;
		color: #362a25;
	}

	.cta{
		font-family: montserrat;
		font-size: 1.5vw;
		background-color: #caa767;
		border-radius: 2vw;
		width: 18vw;
		height: 3.5vw;
		margin-left: 13.875vw;
		scale: .95;
		transition: scale 500ms;
		color: #362a25;
		text-align: center;
		line-height: 3.25vw;
		font-weight: 500;
		text-transform: uppercase;
		opacity: 0;
		position: relative;
		top: 41.5vw;
		left: 25vw;
		z-index: 10;
	}

	.cta:hover{
		scale: 1;
		transition: scale 500ms;
	}

	.heroDecal{
		width: 40vw;
		height: 43.956043956043956vw;
		background-image: url(../images/heroDecal.jpg);
		background-size: 100%;
		position: absolute;
		right: 5%;
		top: 35vw;
		rotate: -5deg;
		z-index: 0;
	}


	/*.featuredHeading{
		width: 37vw;
		height: 19.666923076923077vw;
		background-image: url(../images/featuredKits.png);
		background-size: 100%;
	}*/

	.featuredHeadingSpace{
		height: 10vw;
		width: 100%;
	}

	.featuredHeading{
		width: 39.125vw;
		height: 18.511015625vw;
		background-image: url(../images/featuredKits2.png);
		background-size: 100%;
		margin-bottom: 3vw;
	}

	.featuredKitsHolder{
		height: 40vw;
		margin-bottom: 2vw;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.arrowLeft{
		height: 3.489541832669323vw;
		width: 3.0625vw;
		background-image: url(../images/leftArrow.jpg);
		background-size: 100%;
		position: absolute;
		left: 0;
		top: calc(50% - 3.25vw);
		transform: translateY(-50%);
		cursor: pointer;

	}

	.arrowRight{
		height: 3.489541832669323vw;
		width: 3.0625vw;
		background-image: url(../images/rightArrow.jpg);
		background-size: 100%;
		position: absolute;
		right: 0;
		top: calc(50% - 3.25vw);
		transform: translateY(-50%);
		cursor: pointer;
	}

	.kitsViewport{
		width: 80%;
		height: 37vw;  /* same as slide height */
		overflow: hidden;
	}

	.kitsImageHolder {
	    display: flex;
	    flex-wrap: nowrap;
	    transition: transform 0.5s ease-in-out;
	}

	.featuredKit{
		width: 100%;
		height: 37vw;
		border-radius: 1vw;
		flex-shrink: 0;
		position: relative;   /* allow inner content to position relative to slide */
		overflow: hidden;
		margin-right: 1.5vw; /* spacing between slides */
	}

	.featuredKit:last-child{
		margin-right: 0;
	}

	/* Remove absolute positioning from inner elements */
	.featureImage{
		width: 100%;
		height: 30vw;
		background-color: #fff;
		border-radius: 1vw;
		background-size: cover;
		background-position: center;
		position: relative;  /* was absolute */
		margin-bottom: 1.5vw;
	}

	.kitLabel{
		width: 100%;
		position: relative;  /* was absolute */
		bottom: auto;
		text-align: center;
	}

	.kit1{
		background-image: url(../images/pillow.jpg);	
	}

	.kit2{
		background-image: url(../images/glassHangings.jpg);
	}

	.kit3{
		background-image: url(../images/homeStyling.jpg);
	}

	.featuredKit h1{
		margin-bottom: 0;
	}

	p{
		font-family: montserrat;
		color: #362a25;
	}

	/*.decal2{
		width: 51.875vw;
		height: 27.70125vw;
		background-image: url(../images/decal2.jpg);
		background-size: 100%;
		margin-left:6.625vw;
		margin-bottom: 4vw;
		transform: reflect;
	}*/

	footer{
		height: 20vw;
		width: 100vw;
		background-color: #ffdca5;
	}

}