body {
		margin: 0;
		padding: 0;
		background: #413b35;
		}

@font-face {
		font-family: 'Cooper';
		src: url('../fonts/cooperhewitt-light-webfont.eot');
		src: url('../fonts/cooperhewitt-light-webfont.eot?#iefix') format('embedded-opentype'),
			 url('../fonts/cooperhewitt-light-webfont.woff2') format('woff2'),
			 url('../fonts/cooperhewitt-light-webfont.woff') format('woff'),
			 url('../fonts/cooperhewitt-light-webfont.ttf') format('truetype'),
			 url('../fonts/cooperhewitt-light-webfont.svg#cooper_hewittlight') format('svg');
		font-weight: normal;
		font-style: normal;
		}
		
.username {
		display: none;
		}
		
.anchor{
		display: block;
		height: 120px; /*same height as header*/
		margin-top: -120px; /*same height as header*/
		visibility: hidden;
	    }
		
header, nav, section, article, aside, footer {
   		display: block;
		}
		
h1, h2, h3, h4, h5, h6, p, a, input, textarea, li {
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		-ms-font-smoothing: antialiased;
		-o-font-smoothing: antialiased;
		font-smoothing: antialiased;
		}
		
h1, p, .etsy-btn {
		margin: 0;
		padding: 0;
		font: 1.3em/1.5em Cooper, Arial, sans-serif;
		color: #fff;
		text-align: center;
		}
		
h2 {
		margin: 30px 0 0 0;
		padding: 0;
		font: 2em/1.5em Cooper, Arial, sans-serif;
		color: #fff;
		text-align: center;
		}
		
h3 {
		margin: 0;
		padding: 0;
		font: 2.5em/1.5em Cooper, Arial, sans-serif;
		color: #fff;
		text-align: center;
		}
		
		
.clearfix:before, .clearfix:after { content: " "; display: table;}
.clearfix:after { clear:both;}

a img {
		border: none;
		}
		
input.error, textarea.error { 
		border: 2px solid red;
		}
		
label.error {
	/* remove the next line when you have trouble in IE6 with labels in list */
		display: block;
		width: 100%;
		color: red;
		font: 1.125em Cooper, Arial, sans-serif;
		}
		
input, textarea {
		-webkit-appearance: none;
		-webkit-border-radius:0; 
		border-radius:0;
		}
		
.contain {
		width: 1000px;
		margin: 0 auto;
		padding: 0;
		}
		
header {
		width: 100%;
		margin: 0;
		padding: 25px 0;
		position: fixed;
		top: 0;
		z-index: 9999;
		-webkit-transition: all .7s ease-in-out;
		-moz-transition: all .7s ease-in-out;
		-ms-transition: all .7s ease-in-out;
		-o-transition: all .7s ease-in-out;
		transition: all .7s ease-in-out;
		}
		
.noBG {
		background-color: none;
		}
		
.BG {
		background-color: rgba(41, 37, 32, .75);
		}
		
header .logo {
		width: 250px;
		margin: 0 0 0 0;
		float: left;
		}
		
header .logo svg {
		float: left;
		margin: 0 20px 0 0;
		}
		
header p {
		font: 1.2em Cooper, Arial, sans-serif;
		color: #fff;
		margin: 12px 0 0 0;
		padding: 0;
		letter-spacing: .2em;
		}
		
nav {
		margin: 8px 0 0 0;
		padding: 0;
		float: right;
		}
		
nav ul {
		margin: 0;
		padding: 0;
		}
		
nav ul li {
		margin: 0 0 0 10px;
		padding: 0;
		float: left;
		list-style-type: none;
		font: 1.3em Cooper, Arial, sans-serif;
		color: #fff;
		}
		
nav a {
		text-decoration: none;
		color: #fff;
		}
		
nav a:hover {
		text-decoration: underline;
		}
		
.main-banner {
		width: 100%;
		height: 670px;
		margin: 0;
		padding: 0;
		background: url(../../images/main_banner.jpg) top center no-repeat;
		z-index: -1;
		}
		
.main-banner #full-logo {
		display: block;
		width: 640px;
		height: 239px;
		margin: 180px auto 0 auto;
		padding: 0;
		z-index: 9999;
		}
		
.headline {
		margin: 0;
		padding: 80px 0;
		}
		
.products {
		width: 100%;
		margin: 0;
		padding: 0;
		}
		
.products .item {
		width: 100%;
		margin: 0;
		padding: 0;
		}
		
.products .item .left, .products .item .right {
		width: 50%;
		margin: 0;
		padding: 0;
		float: left;
		position: relative;
		}
		
.products .item img {
		display: block;
		max-width: 100%;
		height: auto;
		margin: 0 auto;
		padding: 0;
		}
		
.x {
		display: block;
		margin: 0;
		padding: 0;
		position: absolute;
		top: 20px;
		left: 20px;
		cursor: pointer;
		z-index: 9999;
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		transform: rotate(45deg);
		-webkit-transition: all .7s ease-in-out;
		-moz-transition: all .7s ease-in-out;
		-ms-transition: all .7s ease-in-out;
		-o-transition: all .7s ease-in-out;
		transition: all .7s ease-in-out;
		}
		
.rota {
		-webkit-transform: rotate(180deg);
		-moz-transform: rotate(180deg);
		-ms-transform: rotate(180deg);
		-o-transform: rotate(180deg);
		transform: rotate(180deg);
		}
		
.products .overlay {
		width: 80%;
		height: 100%;
		margin: 0;
		padding: 0 10%;
		position: absolute;
		top: 0;
		left: 0;
		background: url(../../images/overlay_bg.png) top left repeat;
		-webkit-transition: all .7s ease-in-out;
		-moz-transition: all .7s ease-in-out;
		-ms-transition: all .7s ease-in-out;
		-o-transition: all .7s ease-in-out;
		transition: all .7s ease-in-out;
		}
		
.overlay-hide {
		opacity: 0;
		width: 80%;
		height: 100%;
		margin: 0;
		padding: 0 10%;
		position: absolute;
		top: 0;
		left: 0;
		background: url(../../images/overlay_bg.png) top left repeat;
		-webkit-transition: all .7s ease-in-out;
		-moz-transition: all .7s ease-in-out;
		-ms-transition: all .7s ease-in-out;
		-o-transition: all .7s ease-in-out;
		transition: all .7s ease-in-out;
		}
		
.products .overlay .etsy-btn {
		display: block;
		width: 100px;
		margin: 20px auto 0 auto;
		padding: 10px;
		color: #fff;
		border: 1px solid #fff;
		text-decoration: none;
		-webkit-transition: all .3s ease-in-out;
		-moz-transition: all .3s ease-in-out;
		-ms-transition: all .3s ease-in-out;
		-o-transition: all .3s ease-in-out;
		transition: all .3s ease-in-out;
		}
		
.products .overlay .etsy-btn:hover {
		color: #000;
		border: 1px solid #fff;
		background-color: #fff;
		}

/*
.products .item .left:hover .overlay {
		opacity: 0;
		}
*/	

.products .table {
		display: table;
		width: 100%;
		height: 100%;
		}
		
.products .table-cell {
		display: table-cell;
		vertical-align: middle;
		width: 100%;
		height: 100%;
		}
		
.buy {
		margin: 0;
		padding: 80px 0;
		}
		
.link {
		color: #fff;
		font-weight: bold;
		}
		
footer {
		width: 100%;
		margin: 0;
		padding: 65px 0;
		background: url(../../images/footer_bg.jpg) center center no-repeat;
		background-size: cover;
		}
		
footer h3 {
		margin: 0 0 30px 0;
		}
		
footer .col-form, footer .col-contact {
		width: 50%;
		margin: 0;
		padding: 0;
		float: left;
		}
		
footer .col-contact p {
		text-align: left;
		}
		
footer .col-contact p .copyright {
		font: .7em/.5em Cooper, Arial, sans-serif;
		}
		
footer img {
		margin: 0 0 15px 0;
		}
		
form input, form textarea {
		width: 400px;
		margin: 10px 0;
		padding: 15px 10px;
		border: none;
		font: 1.125em Cooper, Arial, sans-serif;
		background: #413b35;
		color: #fff;
		}
		
.submit {
		display: block;
		width: inherit;
		padding: 10px 20px;
		background-color: #000000;
		color: #413b35;
		background: #fff;
		font: bold 1.5em Cooper, Arial, sans-serif;
		cursor: pointer;
		-webkit-transition: all .3s ease-in-out;
		-moz-transition: all .3s ease-in-out;
		-ms-transition: all .3s ease-in-out;
		-o-transition: all .3s ease-in-out;
		transition: all .3s ease-in-out;
		}
		
.submit:hover {
		background-color: #413b35;
		color: #fff;
		}
		
		
		
/*==  RESPONSIVE TABLET  =========================================================================================================================================*/	

@media screen and (min-width : 761px) and (max-width : 999px){
	
.contain {
		width: 730px;
		margin: 0 auto;
		padding: 0;
		}
		
.hide {
		display: none;
		}
		
.table-cell h3 {
		font: 2em/1.5em Cooper, Arial, sans-serif;
		}
		
form input, form textarea {
		width: 300px;
		margin: 10px 0;
		padding: 15px 10px;
		border: none;
		font: 1.125em Cooper, Arial, sans-serif;
		background: #413b35;
		}
	
}

/*==  RESPONSIVE PHONE  =========================================================================================================================================*/	
		
@media screen and (max-width : 760px){

.hide, .hide-phone {
		display: none;
		}

.contain {
		width: 90%;
		margin: 0 auto;
		padding: 0 5%;
		}
		
header {
		position: inherit;
		}
		
header .logo {
		width: 250px;
		margin: 0 auto;
		float: none;
		}
		
nav {
		width: 280px;
		margin: 25px auto 0 auto;
		padding: 0;
		float: none;
		text-align: center;
		}
		
nav ul li {
		margin: 0 0 0 10px;
		padding: 0;
		float: left;
		list-style-type: none;
		font: 1.1em Cooper, Arial, sans-serif;
		color: #fff;
		}
		
.main-banner {
		width: 100%;
		height: 600px;
		margin: 0;
		padding: 0;
		background: url(../../images/main_banner.jpg) top center no-repeat;
		z-index: -1;
		}
		
.main-banner #full-logo {
		display: block;
		width: 90%;
		margin: 90px auto 0 auto;
		}
		
h2 {
		margin: 30px 0 0 0;
		padding: 0 5%;
		font: 1.4em/1.5em Cooper, Arial, sans-serif;
		color: #fff;
		text-align: center;
		}
		
.headline {
		margin: 0;
		padding: 80px 5%;
		}
		
.products {
		display: block;
		margin: 0;
		padding: 0;
		}
		
.products .item {
		display: block;
		margin: 0;
		padding: 0;
		}
		
.products .item .left, .products .item .right {
		display: block;
		width: 100%;
		margin: 0;
		padding: 0;
		}
		
.products .item .right {
		display: none;
		}
		
.buy {
		margin: 0;
		padding: 80px 5%;
		}
		
footer .col-form, footer .col-contact {
		width: 90%;
		margin: 0 auto;
		padding: 0;
		float: none;
		}
		
footer .col-form {
		margin: 0 auto 80px auto;
		}
		
form input, form textarea {
		width: 95%;
		margin: 10px auto;
		padding: 15px 10px;
		border: none;
		font: 1.125em Cooper, Arial, sans-serif;
		background: #413b35;
		}
		
footer .col-contact p {
		text-align: center;
		}
		
footer img {
		display: block;
		width: 280px;
		margin: 0 auto 15px auto;
		}
		
		

}