* {margin:0 auto;padding:0;box-sizing: border-box;}
body {font-family:'calibri', sans-serif; color:#444; font-size: calc(0.6em + 1vw); line-height:1.4;}

body, html { height: 100%; }
#site {display:grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; min-height:100%; }
header {grid-area:1/1/2/-1;}
main {grid-area:2/1/3/-1;}
footer {grid-area:3/1/4/-1;}

header { width:100%; position:sticky;top:0;background:white; }
header h1 { text-align:center; font-size:1.5em; padding:.25em .75em;font-weight:400;}
header a {text-decoration:none;color:unset;}

nav {display:none;position:absolute;top:0;right:0;background-color: rgba(0, 0, 0, 0.5);z-index:101;padding:3em 2em 1em 2em;}
nav ul {list-style-type: none;width:100%;}
nav ul li {text-align: left;padding: 0.25em;font-size:1.5em;}	
nav ul li a {text-decoration: none;color:white;}
nav ul li:hover > * {color: #222; }
nav ul li:hover {border-bottom:1px solid #FFF; }

#burger {color:#444;position: absolute;top: 0.5em;right: 1.0em;cursor: pointer;z-index:111;}
#burger {font-size:1.25em; padding:.25em .75em;}
#burger i {transition: all 0.5s ease-out;}

footer {width:100%;text-align:center;font-size:0.8em;padding:0.25em;background:white;font-family:'arial', sans-serif;}

main { width:100%;}
main section { width:100%; }

#home { background: url(/images/stefan-smith-smint-wall.jpg) no-repeat center center fixed; background-size: contain; overflow: hidden; height:100%;}

#gallery {max-width:1500px;width:100%;padding:25px 0;display:grid; grid-template-columns: repeat(100,1%); justify-content: center;}
#gallery span {margin:0;padding:5px 0;}
#gallery span:hover {cursor:pointer;}
#gallery span img {width:100%;}

#bio {max-width:1500px;width:100%;padding:25px 0; display:grid; grid-template-columns: repeat(100,1%); }
#bio h2 {font-size:1.25em; padding:0 1em 1em 0;font-weight:400;margin-left:.1em;}
#bio h3 {margin-right: 1em;font-weight:400;font-style:italic;}
#bio img {width:100%;margin-top: .5vh;}
#bio p {padding:0 0 1em 1em;}
#bio .bio p {padding:0 0 1em .25em;}
#bio span {margin:0 .25em;}

/* 
#contact {max-width:600px;width:100%;padding:25px 0; display:grid; grid-template-columns: repeat(100,1%); }
#contact h2 {font-size:1.25em; padding:0 1em 1em 0;font-weight:400;margin-left:.1em;}
#contact h3 {margin-right: 1em;font-weight:400;font-style:italic;}
#contact span {margin:0 .25em;}
#contact label {margin-right:.25em;padding:.25em;}
#contact input:not([type=submit]), #contact textarea {margin:.5em 0 .5em .25em;padding:.25em;}
#contact textarea {min-height:6em;font-family:'calibri', sans-serif;}
#contact input[type=submit] {margin-left:.5em;padding:.25em; font-family:'calibri', sans-serif;}
 */

#contact {display:grid; padding: 1em;grid-template-columns: 1fr minmax(auto,600px) 1fr; grid-template-rows: min(1em) auto;}
#contactform {margin:0 auto;padding: 1em;grid-area: 2/2/3/3;}
/* 	#contactform{box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.24);border: 1px solid #ccc;font-size:0.9em;} */
#contactform p {margin-bottom:1em;}

#contactform input[type="text"], #contactform input[type="email"], #contactform input[type="tel"], #contactform textarea, #contactform button[type="submit"] {
	font-family:'calibri', sans-serif;color:#444;font-size:1em;	width:100%;	padding:.5em;margin: 0 0 1em;border: 1px solid #ccc;}
#contactform textarea {min-height:6em;}
#contactform input[type="text"]:hover,#contactform input[type="email"]:hover,#contactform input[type="tel"]:hover,#contactform textarea:hover { transition: border-color 0.3s ease-in-out; border: 1px solid #444;  cursor:pointer;}
#contactform button[type="submit"] { cursor: pointer; width: 100%; border: none; background: #444; color: #FFF; margin: 0 0 0.5em; padding: 1em;}
#contactform button[type="submit"]:hover { background: #707070;  transition: background-color 0.3s ease-in-out;}
#contactform button[type="submit"]:active { box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);}

.midline {border-left:1px solid #444;}
.w30 {width:30vw;}
.w40 {width:40vw;}
.w80 {width:80vw;max-width:600px;}

.s1 {grid-column-start: span 1 ;}
.s2 {grid-column-start: span 2 ;}
.s3 {grid-column-start: span 3 ;}
.s4 {grid-column-start: span 4 ;}
.s5 {grid-column-start: span 5 ;}
.s6 {grid-column-start: span 6 ;}
.s7 {grid-column-start: span 7 ;}
.s8 {grid-column-start: span 8 ;}
.s9 {grid-column-start: span 9 ;}
.s10 {grid-column-start: span 10 ;}
.s11 {grid-column-start: span 11 ;}
.s12 {grid-column-start: span 12 ;}
.s13 {grid-column-start: span 13 ;}
.s14 {grid-column-start: span 14 ;}
.s15 {grid-column-start: span 15 ;}
.s16 {grid-column-start: span 16 ;}
.s17 {grid-column-start: span 17 ;}
.s18 {grid-column-start: span 18 ;}
.s19 {grid-column-start: span 19 ;}
.s20 {grid-column-start: span 20 ;}
.s21 {grid-column-start: span 21 ;}
.s22 {grid-column-start: span 22 ;}
.s23 {grid-column-start: span 23 ;}
.s24 {grid-column-start: span 24 ;}
.s25 {grid-column-start: span 25 ;}
.s26 {grid-column-start: span 26 ;}
.s27 {grid-column-start: span 27 ;}
.s28 {grid-column-start: span 28 ;}
.s29 {grid-column-start: span 29 ;}
.s30 {grid-column-start: span 30 ;}
.s31 {grid-column-start: span 31 ;}
.s32 {grid-column-start: span 32 ;}
.s33 {grid-column-start: span 33 ;}
.s34 {grid-column-start: span 34 ;}
.s35 {grid-column-start: span 35 ;}
.s36 {grid-column-start: span 36 ;}
.s37 {grid-column-start: span 37 ;}
.s38 {grid-column-start: span 38 ;}
.s39 {grid-column-start: span 39 ;}
.s40 {grid-column-start: span 40 ;}
.s41 {grid-column-start: span 41 ;}
.s42 {grid-column-start: span 42 ;}
.s43 {grid-column-start: span 43 ;}
.s44 {grid-column-start: span 44 ;}
.s45 {grid-column-start: span 45 ;}
.s46 {grid-column-start: span 46 ;}
.s47 {grid-column-start: span 47 ;}
.s48 {grid-column-start: span 48 ;}
.s49 {grid-column-start: span 49 ;}
.s50 {grid-column-start: span 50 ;}
.s51 {grid-column-start: span 51 ;}
.s52 {grid-column-start: span 52 ;}
.s53 {grid-column-start: span 53 ;}
.s54 {grid-column-start: span 54 ;}
.s55 {grid-column-start: span 55 ;}
.s56 {grid-column-start: span 56 ;}
.s57 {grid-column-start: span 57 ;}
.s58 {grid-column-start: span 58 ;}
.s59 {grid-column-start: span 59 ;}
.s60 {grid-column-start: span 60 ;}
.s61 {grid-column-start: span 61 ;}
.s62 {grid-column-start: span 62 ;}
.s63 {grid-column-start: span 63 ;}
.s64 {grid-column-start: span 64 ;}
.s65 {grid-column-start: span 65 ;}
.s66 {grid-column-start: span 66 ;}
.s67 {grid-column-start: span 67 ;}
.s68 {grid-column-start: span 68 ;}
.s69 {grid-column-start: span 69 ;}
.s70 {grid-column-start: span 70 ;}
.s71 {grid-column-start: span 71 ;}
.s72 {grid-column-start: span 72 ;}
.s73 {grid-column-start: span 73 ;}
.s74 {grid-column-start: span 74 ;}
.s75 {grid-column-start: span 75 ;}
.s76 {grid-column-start: span 76 ;}
.s77 {grid-column-start: span 77 ;}
.s78 {grid-column-start: span 78 ;}
.s79 {grid-column-start: span 79 ;}
.s80 {grid-column-start: span 80 ;}
.s81 {grid-column-start: span 81 ;}
.s82 {grid-column-start: span 82 ;}
.s83 {grid-column-start: span 83 ;}
.s84 {grid-column-start: span 84 ;}
.s85 {grid-column-start: span 85 ;}
.s86 {grid-column-start: span 86 ;}
.s87 {grid-column-start: span 87 ;}
.s88 {grid-column-start: span 88 ;}
.s89 {grid-column-start: span 89 ;}
.s90 {grid-column-start: span 90 ;}
.s91 {grid-column-start: span 91 ;}
.s92 {grid-column-start: span 92 ;}
.s93 {grid-column-start: span 93 ;}
.s94 {grid-column-start: span 94 ;}
.s95 {grid-column-start: span 95 ;}
.s96 {grid-column-start: span 96 ;}
.s97 {grid-column-start: span 97 ;}
.s98 {grid-column-start: span 98 ;}
.s99 {grid-column-start: span 99 ;}
.s100 {grid-column-start: span 100 ;}

.spacer {height:1em;}
.left {text-align:left;}
.right {text-align:right;}
.active {display: block;}
.hidden {display: none;}