/*html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;} body {line-height: 1;}ol, ul{list-style:none;} blockquote, q{quotes:none;} blockquote:before, blockquote:after, q:before, q:after{content:'';content:none;} :focus{outline:0;} ins{text-decoration:none;} del{text-decoration:line-through;} table{border-collapse:collapse; border-spacing:0;}*/

#login { display: none; }
#new-aardvark { display: none; }
#show-free-aardvarks { display: none; }
#show-aardvarks .item { background-color:white; border:0; padding:10px; }
body {background-color: #ccffcc; text-align: left; color: #002800; font-family: Verdana, Arial, Helvetica, sans-serif; text-decoration: none; font-size: 16px; font-style:normal; font-weight: normal; border: 0; padding: 0; }
h2 {margin-bottom: 0;}
a {text-align: left; color: #002800; font-family: Verdana, Arial, Helvetica, sans-serif; text-decoration: underline; }
a:hover {background-color: #ffff84; text-align: left; color: #002800; text-decoration: underline; }
.location {background-color: #ffff84; text-align: left; color: #002800; text-decoration: none; padding: 1px; font-weight: bold; padding: 0 10px 0 10px; white-space: nowrap; }
.button {background-color: #ffff84; text-align: left; color: #002800; text-decoration: none; padding: 2px; border: 1px solid #002800; border-radius: 5px; font-weight: bold; cursor: pointer; }
.mainspace { min-height: 200px; }
hr { color:#002800; background-color:#002800; height: 1px; border: 0; padding:0; }
.training-price { font-weight: bold; }
.training-label { font-style: italic; }
.training-tutor, a.training-tutor { font-style: italic; }
.holiday-row { display: flex; border:0; padding:0; }
.holiday-row img { width:400px; border:0; padding-right:10px; }
.holiday-row p { border:0; padding:0; }
.holiday-row div { border:0; padding:0; }
.whole-space { display: flex; border:0; padding:0; }
.text-space { width: 60%; }
.graphic-space { width: 40%; }
.full-width { width: 100%; border:0; padding:0; }
.half-width { width: 50%; border:0; padding:0; }
.shout {font-size: 2em; background-color: #ffff84; color: #ff0000; text-align: center; }
.footer {font-size: 0.8em; text-align: center; color: #7a7a7a; }
.footer a { color: #7a7a7a; }
.footer a:hover { background-color: #ffff84; color: #002800; }
.container { display: flex; }
.membership-links { display: flex; flex-direction: column; width:30%; background-color: #ffff84; color: #002800; }
.membership-links a { text-align: center; height:30%; text-decoration: none; font-size: 200%; font-weight: bold; }
.membership-text { width:70%; padding-left:10px; }
.profile-foto { width: 10%; padding-right: 5px; padding-bottom: 5px; float: left; }


.clearfix::after {
    content: "";
    clear: both;
    display: table;
}
.modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transform: scale(1.1);
    transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
}
.modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 1rem 1.5rem;
    width: 24rem;
    border-radius: 0.5rem;
}
.close-button {
    float: right;
    width: 1.5rem;
    line-height: 1.5rem;
    text-align: center;
    cursor: pointer;
    border-radius: 0.25rem;
    background-color: lightgray;
}
.close-button:hover {
    background-color: darkgray;
}
.show-modal {
    opacity: 1;
    visibility: visible;
    transform: scale(1.0);
    transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}
.trigger { visibility: hidden; }
.delete {cursor: pointer; }

nav a, nav ul, nav li { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; text-decoration: none; }
header { background: #fff url(img/strap.png) no-repeat center; width: 100%; height: 179px; position: relative; top: 0; left: 0; z-index: 100;}
#logo{ margin: 0; float: left; width: 200px; height: 179px; background: url(img/logo-40.png) no-repeat center; display: block;}
nav { float: right; padding: 20px; }
#menu-icon { display: none; width: 40px; height: 40px; background: #006600 url(img/menu-icon.png) center; border-radius: 4px;}
nav a:hover#menu-icon { background-color: #002800; border-radius: 4px 4px 4px 4px; }
nav ul { list-style: none; }
nav li { display: inline-block; float: left; padding:5px; background: #006600; }
nav li a { color: #ffff84; text-decoration: none; font-weight: bold; padding: 0 5px 0 5px; text-decoration: none; }
nav li:hover { background-color: #002800; text-decoration: none; }
nav a:hover { background-color: #002800; text-decoration: none; color: #ffff84; }
form {
  box-sizing: border-box;
  padding: 2rem;
  border-radius: 1rem;
  background-color: hsl(0, 0%, 100%);
  border: 4px solid hsl(0, 0%, 90%);
  gap: 2rem;
}

input[type="text"],
input[type="email"],
select,
textarea {
  font: 1.25rem / 1.5 sans-serif;
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border-radius: 1rem;
}

button[type="submit"] {
  background-color: hsl(213, 73%, 50%);
  color: white;
}
.clearfix::after { content: ""; clear: both; display: table; }
/*phone*/
@media only screen and (max-width : 1000px) {
	header { position: relative; }
	#menu-icon { display:inline-block; }
	nav ul, nav:active ul { display: none; position: absolute; background: #006600; border: 0; right: 20px; top: 60px; width: 30%; }
	nav li { text-align: center; width: 100%; margin: 0; }
	nav:hover ul { display: block; }
	.holiday-row { display: flex; flex-direction: column; }
	.holiday-row img { width:100%; padding:0;}
	.whole-space { flex-direction: column; }
	.text-space { width: 100%; }
	.graphic-space { width: 100%; }
	.container { display: flex; flex-direction: column; }
	.membership-links { width:100%; }
	.membership-text { width:100%; padding-left:0; }
	.profile-foto { width: 100px; padding-right: 2px; padding-bottom: 2px; float: left; }

}