body { background-color: lavender; max-width: 1400px; min-height: 600px; margin: 0px auto; font-family: "Open Sans", Arial, sans-serif; }

#header { background-color: white; display: flex; align-items: center; }
#header a { width: 20%; margin-left: 4%; }
#linklogo { width: 100%; }
#logo { width: 20%; margin-left: 4%; }
h1 { font-size: 2em; width: 50%; text-align: center; }
div#banner { font-size: 1.5em; font-weight: bold; text-align: center; background: linear-gradient(gold, orange); margin: 0px; }
h2 { font-size: 1em; text-align: center;  }
h3 { font-size: 1em; text-align: center;  }
nav a { color: white; background-color: seagreen; text-align: center; text-decoration: none; }

nav.footer { width: 92%; margin-left: 4%; display: flex; justify-content: space-between; }
nav.footer a { padding: 1em; margin-top: 1em; margin-bottom: 1em; border-radius: 2em;}

#footer { background-color: lightgrey; }
p { margin: 1em 2% 1em 2%; }
p.tip { font-weight: bold; font-style: italic; }
li { margin: 0.3em 1em 0.3em 0px; }

img { max-width: 100%; }
.important { font-weight: bold; background-color: greenyellow; }
p.becky { display: none }


/* ------------  Large screens and landscape printing ------------------- */

@media (min-width: 851px) {
	
div#body { display: inline-block; background-color: wheat; }
	
#kitchen1 { width: 35%; }
#kitchen2 { display: none; }
h1 { font-size: 3em; padding-right: 4%; text-align: center; }
h2 { font-size: 2em; }
h3 { font-size: 1.5em; }
section { background-color: white; margin: 25px; padding: 25px; clear: both; }
section.split { display: flex; justify-content: space-around; align-items: center; }
div.left { float: left; padding-right: 40px; }
div.right { float: right; padding-left: 40px; }
div.w20 { width: 20%; }
div.w30 { width: 30%; }
div.w40 { width: 40%; }
div.w60 { width: 60%; }
div.w75 { width: 75%; }
div.w90 { width: 90%; padding-left: 4%;}
img.fit { width: 100%; }
img.border { width:94%; margin-left: 2%; border: red 5px dotted; }

div.below { display: none; }
hr.clear { clear: both; border-style: none; }
	
nav.contents { width: 95%; margin-left: 3%; }
nav.contents a { display: inline-block; width: 24%; padding: 1em; margin: 1% 2% 1% 3%; border-radius: 2em; }
nav.tariffs a { display: inline-block; width: 16%; padding: 0.8em; margin: 1%; border-radius: 2em; }

#copyright { display: inline-block; width: 38%; padding-left: 2%; }
#independent { display: inline-block; width: 58%; }
	
}

/* ------------  Medium screens and portrait printing ------------------ */

@media (min-width: 551px) and (max-width: 850px ) {    /* This is typically the print size too */

body { background-color: white; }

div.center { margin: auto; width: 520px; }
div.center img { width: 100%; }
#logo { width: 16%; margin-left: 3%; }	
#kitchen1 { width: 30%; }
#kitchen2 { display: none; }
h1 { font-size: 2.5em; padding-right: 4%; text-align: center; }
h2 { font-size: 1.8em; }
h3 { font-size: 1.4em; }
section { border-top: wheat 20px solid; }
div.left40 { width: 42%; padding: 0 2% 1% 4%; float: left; }
div.right40 { width: 42%; padding: 0 4% 1% 2%; float: right; }
div.leftfloat { padding: 0 2% 1% 4%; float: left; }
div.side { display: none; }
hr.clear { clear: both; border-style: none; }
img.border { border: red 4px dotted; }

nav.contents { width: 96%; margin-left: 2%; }
nav.contents a { display: inline-block; width: 38%; padding: 1em; margin: 1% 2% 1% 3%; border-radius: 2em; }
nav.tariffs a { display: inline-block; width: 16%; padding: 0.6em; margin: 1% 2% 1% 2%; border-radius: 2em; }

#copyright { display: inline-block; padding-left: 2%; margin-top: 20px; }
	
}

/* ------------  Small screens and mobile phones ------------------ */

@media (max-width: 550px ) {
	
body { background-color: white; min-width: 300px; min-height: 300px; }
	
img { width: 100%; }
#kitchen1 { display: none; }
#kitchen2 { display: block; margin: 0px; }
h1 { font-size: 2em; width: 70%; text-align: center; }
h2 { font-size: 1.3em; }
section { border-top: wheat 20px solid; }
div.side { display: none; }
div.optional { display: none; }
div.leftfloat { padding-right: 4%; float: left; }
hr.clear { display:none }
img.border { border-top: red 3px dashed; border-bottom: red 3px dashed; }


nav { width: 80%; margin-left: 10%; }
nav a { display: block; padding-top: 1em; padding-bottom: 1em; margin-top: 1em; margin-bottom: 1em; border-radius: 2em; }

#copyright { display: inline-block; padding-left: 2%; margin-top: 20px; }

}