/*--- desktop (1600) ---*/
@media screen and (max-width: 1600px) {
    html{ font-size:16px; }
}

/*--- desktop (1440) ---*/
@media screen and (max-width: 1440px) {
    html{ font-size:15px; }
    main{ width:95%; }
}

/*--- desktop (1280) ---*/
@media screen and (max-width: 1280px) {
    html{ font-size:14px; }   
    main{
        width:100%;
        border:none;
    }
}

/*--- desktop (1024) ---*/
@media screen and (max-width: 1023px) {
	html {
		font-size: 16px;
	}
	header{
		margin-top:2.5%;
	}
	header img {
    	width: 60%;
	}
	header button{
		display:block;
		position: relative;
		position: absolute;
		top: 0;
		right: 0;
		width: 3.0rem;
		height: 2.0rem;
		transform: rotate(0deg);
		transition: .5s ease-in-out;
		cursor: pointer;
		background-color: transparent;
		border:none;
		outline: none;
	}
	header button span{
		display: block;
		position: absolute;
		height: 6px;
		width: 100%;
		background: #ad433e;
		border-radius: 0;
		opacity: 1;
		left: 0;
		transform: rotate(0deg);
		transition: .25s ease-in-out;
	}
	header button span:nth-child(1) {
		top: 0;
	}
	header button span:nth-child(2),header button span:nth-child(3) {
		top: calc(50% - 3px);
	}
	header button span:nth-child(4) {
		top:auto;
		bottom: 0;
	}
	header button.open span:nth-child(1) {
		top: 18px;
		width: 0%;
		left: 50%;
	}
	header button.open span:nth-child(2) {
		transform: rotate(45deg);
	}
	header button.open span:nth-child(3) {
		transform: rotate(-45deg);
	}
	header button.open span:nth-child(4) {
		top: 18px;
		width: 0%;
		left: 50%;
	}
	nav{
		position: absolute;
		display:none;
		top:25vw;
		left: -2.5%;
    	width: 105%;
		z-index: 10;
		box-shadow: 0 1rem 1rem rgb(0, 0, 0, 0.25);
	}
	nav ul {
		padding:0;
	    background-color: #fffcf5;
	}
	main nav > ul > li,
	main nav > ul > li:nth-of-type(n+4) {
		float:none;
		margin:0;
		border-top: 1px solid #CCC;
	}
	nav li a {
		display: block;
		padding: 1.25% 0;
	    line-height: 1.75;
	}
	nav li a:hover{
		text-decoration: none;
	}
	nav ul li ul {
    	display: block;
    	position: relative;
    	top: auto;
		left:auto;
	}
	nav ul li ul li a{
		text-align: center;
	}
	section{
		padding: 5% 2.5% 18%;
	    background: url(/images/bunting.svg) center bottom / 60% auto repeat-x;
	}
	section > img + h1 {
		margin-top: 5%;
	}
	section > a.button {
		margin-top: 10%;
	}
	p {
    	width: 95%;
	}
	section.products ul li {
		width: 80%;
		margin: 0 auto;
		padding: 10% 0 0;
	}
	main table.sb td {
        white-space: normal;
	}
}
@media screen and (max-width: 1023px) and (orientation: portrait){
	h1, h2, h3, .products h2 {
	    font-size: 2.5rem;
	}
	section.product > div,
	section.product > div:nth-of-type(odd) {
		margin-top:10%;
		flex-direction: column-reverse;
		overflow: hidden;
	}
	section.product > div:first-child{
		margin-top:0;
		flex-direction: column;
	}
	section.product > div div {
    	width: 100%;
	}
	section.product > div div:first-child, section.product-images > div div {
    	padding-bottom: calc(100% - 1.0rem);
	}
	section.product-images {
		padding-top: 10%;
	}
	section.product-images > div div {
    	width: 100%;
	}
	main table.sb th{
		display:none;
	}
	main table.sb td {
    	display: block;
    	text-align: left !important;
    	padding: 0.25rem 0.5rem;
		line-height: 1.5;
	}
	main table.sb td label{
		display:inline-block;
		padding-right:1em;
		font-weight: bold;
	}
	main table.sb .hmp{
		display:none;
	}
	main table.sb td img{
		vertical-align: bottom;
	}
	main table.sb + p > a:nth-child(2) {
    	padding-left: 0;
		margin-top: 10%;
		display: block;
	}
	main table.sb tr.item td:last-child{
		padding-bottom:7.5%;
		border:0;
	}
}
@media screen and (max-width: 1023px) and (orientation: landscape){
	header img {
    	width: 45%;
	}
	nav{
		top:20vw;
	}
	section {
    	padding: 3.75% 2.5% 13.75%;
    	background: url(/images/bunting.svg) center bottom / 50% auto repeat-x;
	}
	section > a.button {
		margin-top: 5%;
	}
	section.products ul li {
		width: 30%;
		padding: 6.25% 0 0;
	}
}