html, body { padding: 5% 10% 5% 10%; color: #000; background-color: #ffffff; font-family: 'Lora', serif; }

a { text-decoration: none; }

p.intro a { color: #4a7aff; }

a:hover { text-decoration: underline; }

a:active { color: #4a7aff; }

h1 { padding-bottom: 0.5em; font-size: 2em; font-family: 'Josefin Sans', sans-serif; text-transform: uppercase; letter-spacing: 2px; line-height: 125%; color: #4a7aff; }

h2 { font-size: 0.75em; font-family: 'Josefin Sans', sans-serif; text-transform: uppercase; letter-spacing: 2px; line-height: 100%; color: #999; padding-top: 1em; }

h3 { font-size: 1.25em; letter-spacing: 2px; line-height: 100%; color: #000; margin-top: 10px; }


p { font-size: 1.15em; line-height: 150%; }

img { max-width: 100%; }


/* start wip */

#nav { width: 100%; padding-top: 10px; padding-bottom: 8em; }

#heading { float: left; width: 60%; }

#menu { float: left; width: 40%; display: block; margin-left: auto; margin-right: auto; text-align: right; }

#menu ul { text-transform: uppercase; font-size: .9em; margin-right: 0; padding-top: 10px; }

#nav ul li { display: inline; letter-spacing: 2px; font-family: 'Josefin Sans', sans-serif; text-transform: uppercase; letter-spacing: 2px; }

#nav ul li a { text-decoration: none; }

.container {
  display: grid;
  grid-template-columns: 48% 48%;
  grid-gap: 40px;
  padding: 5px 5px 5px 0;
}

.container_single {
  display: grid;
  grid-template-columns: 100%;
  grid-gap: 5px;
  padding: 5px 5px 5px 0;
}

.container_single p { margin-top: 5px; }

.container_sub {
  display: grid;
  grid-template-columns: 33% 33% 34%;
  grid-gap: 30px;
  padding: 5px 5px 5px 0;
}

.container_sub  p { font-size: 1em; } 

.item-1 { background-color: #fff; }

.item-2 { background-color: #fff; }

.item-3 { background-color: #fff; }

.item-4 { background-color: #fff; }

.footer { grid-column: 1/4; background-color: #fff; margin-top: 40px; }

.footer h2 { color: #4a7aff; text-align: center; padding: 5%; }

.footer h3 { color: #4a7aff; text-align: right; font-size: 1em; }

@media screen and (max-width: 768px) { body { padding: 0% 1% 2% 1%; } #heading { width: 100%; } #menu { width: 100%; text-align: left; } ul { padding-left: 0; margin-left: 0; } h1 { padding-top: 2em; } .column { width: 100%; } img { display: block; padding-top: 40px; padding-left: 0px; margin-left: auto; margin-right: auto; } .container { display: grid; grid-template-columns: 100%; } .container_sub { display: grid; grid-template-columns: 100%; } }


/* end wip */