html, body {
  height: 100%;
}

body {
	display: flex;
	flex-direction: column;
	font-family: 'Raleway', sans-serif;
	background: #381839 url('img/texture-bg.png') center top repeat;
	background-size: cover;
}

/*
@media only screen and (max-width: 1000px) {
	body {
		background-size: auto;
	}
}

@media only screen and (max-width: 875px) {
	body {
	    background-size: cover;
	}
}

@media only screen and (max-width: 620px) {
	body {
		background-image: url('img/texture-bg-xs.png');
		background-size: contain;
	}
}
*/

.image-wrapper {
    padding: 0 15px;
    margin: 0 auto;
    text-align: center;
}

.image-wrapper img {
    max-width: 100%;
    height: auto !important;
    margin: 0 auto;
    display: inline-block;
}

.logo {
    margin-top: 73px;
/* 	transform: translateY(73px); */
}

.product {
	position: relative;
    margin-top: 60px;
    padding: 0 60px;
/*     transform: translateY(130px); */
	max-width: 75%;
/* 	bottom: -60px; */
}

@media only screen and (max-width: 768px) {

	.product {
	    padding: 0 30px;
	}
}

@media only screen and (max-width: 400px) {

	.product {
	    padding: 0 15px;
	}
}

.content {
	flex: 1 0 auto;
}

.button-wrapper {
	position: relative;
	z-index: 5;
	display: block;
	text-align: center;
	transform: translateY(-36px);
}

/*
@media only screen and (max-width: 620px) {

	.button-wrapper {
	    transform: translateY(-90px);
	}
}
*/

.button-wrapper a {
	display: inline-block;
	color: #FFF6D3;
	font-weight: bold;
	text-decoration: none;
	padding: 20px 45px;
	line-height: 1;
	letter-spacing: 0.21em;
	background: #381839;
	border: 1px solid #FFF6D3;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.button-wrapper a:hover,
.button-wrapper a:focus {
	color: #381839;
	background: #FFF6D3;
	border: 1px solid #381839;
}

.footer {
	position: relative;
	z-index: 5;
	flex-shrink: 0;
	padding: 0 15px;
	text-align: center;
}

.footer .container {
    transform: translateY(-60px);
}

@media only screen and (max-width: 900px) {

	.footer .container {
	    transform: translateY(-30px);
	}
}

.footer p {
	margin-top: 100px;
    line-height: 1.2;
	color: #FFF6D3;
	letter-spacing: 0.21em;
	font-size: 16px;
	text-transform: uppercase;
}

@media only screen and (max-width: 900px) {

	.footer p {
	    margin-top: 60px;
	}
}

@media only screen and (max-width: 768px) {

	.footer p {
	    font-size: 14px;
	}
}