body, div, main, article, footer, nav, img, h1, h2, h3, h4, h5, h6, p, a {
  margin: 0;
  padding: 0;
}


/* SCROLL BAR */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: #d1d2d4;
}
::-webkit-scrollbar-thumb {
  background: #8c95ab;
  border-radius: 3px;
}


/* BUTTONS */
.button {
  cursor: pointer;
  transition: color 0.5s;
}
.markers {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 3px;
  border-radius: 100%;
}


/* TEXT STYLES */
body {
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  font-size: 10pt;
  line-height: 1.5rem;
}

h1 {
  font-family: 'Nixie One', serif;
  font-weight: 400;
  font-size: 24pt;
  letter-spacing: 0.1rem;
  line-height: 24pt;
}
h2 {
  font-weight: 300;
  font-size: 10pt;
  text-transform: uppercase;
  letter-spacing: 0.3rem;
  line-height: 1rem;
}
h3 {
  font-family: 'Nixie One', serif;
  font-weight: 400;
  font-size: 10pt;
  letter-spacing: 0.1rem;
  line-height: 24pt;
}

p {
  text-align: justify;
}

a {
  text-decoration: none;
}


/* IMAGE STYLES */
img {
  max-width: 100%;
  max-height: 100%;
}

.circle {
  border-radius: 100%;
}

img.button {
  transform: scale(95%);
  transition: transform 0.5s;
}

.fillvertical, .fillhorizontal {
  background: #d1d2d4;
  height: 100%;
  overflow: hidden;
}
.fillvertical img {
  height: 100%;
  max-width: none;
}
.fillhorizontal img {
  width: 100%;
  max-height: none;
}

.block {
  display: block;
}
.whiteitem {
  filter: drop-shadow(1px 1px 2px #d1d2d4);
}

.lineheight {
  height: 20pt;
}


/* COLORS */
body {
  background-color: white;
  color: #8c95ab;
}
h1 {
  color: #3c404a;
}
h2, h3 {
  color: #d1d2d4;
}
a, a h1, a h3 {
  color: #007f98;
  transition: color 0.5s;
}
.markers {
  background-color: #d1d2d4;
}
.active {
  background-color: #3c404a;
}

a h1 img {
  filter: invert(35%) sepia(48%) saturate(1306%) hue-rotate(150deg) brightness(99%) contrast(102%);
  transition: filter 0.5s;
}

.whiteout {
  background-color: white;
}


/* GRID */
.grid {
  display: grid;
  grid-gap: 1vw;
  grid-template-columns: 14vw 14vw 14vw 14vw 14vw 14vw;
}
.gallery {
  margin: 5.5vw 5.5vw 11vw;
}

.heading {
  grid-area: heading;
}
.foot {
  grid-area: foot;
}

.area1 {
  grid-area: area1;
}
.area2 {
  grid-area: area2;
}
.area3 {
  grid-area: area3;
}
.area4 {
  grid-area: area4;
}
.area5 {
  grid-area: area5;
}
.area6 {
  grid-area: area6;
}
.area7 {
  grid-area: area7;
}
.area8 {
  grid-area: area8;
}


/* SPACING */
.spacetop {
  margin-top: 12px;
}
.spaceright {
  margin-right: 12px;
}
.spacebottom {
  margin-bottom: 12px;
}
.spaceleft {
  margin-left: 12px;
}

.halfspacetop {
  margin-top: 6px;
}
.halfspaceright {
  margin-right: 6px;
}
.halfspacebottom {
  margin-bottom: 6px;
}
.halfspaceleft {
  margin-left: 6px;
}


/* ALIGNMENT */
.center {
  text-align: center;
}
.right img {
  float: right;
}

.middle {
  align-self: center;
}
.bottom {
  align-self: end;
  vertical-align: bottom;
}


/* NAVIGATION */
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}

nav {
  margin: 1vw 5vw;
}
.logo {
  grid-column-end: span 2;
}


/* LAYOUTS */
#landing {
  grid-template-rows: 7vw 14vw 14vw;
  grid-template-areas:
    '. . . . . .'
    'area3 area1 area1 area1 area1 area4'
    'area3 area2 area2 area2 area2 area4'
    '. . area5 area5 . .';
}

#home {
  margin: 7vw 7vw;
  grid-template-rows: 7vw 14vw 14vw auto;
  grid-template-areas:
    '. . . . . .'
    '. . area1 area1 . .'
    '. area2 area2 area2 area2 .'
    '. area3 area4 area5 area6 .';
}

#rethink {
  grid-template-rows: auto 14vw 14vw 14vw 14vw 14vw;
  grid-template-areas:
    '. heading heading heading heading .'
    'area1 area1 area2 area2 area3 area3'
    'area1 area1 area2 area2 area3 area3'
    'area1 area1 area4 area4 area5 area5'
    '. . area4 area4 area5 area5'
    '. . area4 area4 area5 area5'
    '. foot foot foot foot .';
}
#museum {
  grid-template-rows: auto auto 14vw 14vw 14vw 14vw;
  grid-template-areas:
    '. heading heading heading heading .'
    'area4 area4 area4 area4 area1 area2'
    'area3 area3 area3 area5 area5 area5'
    'area3 area3 area3 area5 area5 area5'
    'area3 area3 area3 area5 area5 area5'
    '. . . area5 area5 area5'
    '. foot foot foot foot .';
}
#train {
  grid-template-rows: auto;
  grid-template-areas:
    '. heading heading heading heading .'
    '. area1 area1 area1 area1 .'
    '. foot foot foot foot .';
}
#poipu {
  grid-template-rows: auto auto 14vw 14vw 14vw;
  grid-template-areas:
    '. heading heading heading heading .'
    'area1 area1 area1 area1 area3 area3'
    'area1 area1 area1 area1 area4 area4'
    'area1 area1 area1 area1 area4 area4'
    '. . area2 area2 area4 area4'
    '. . area2 area2 area4 area4'
    '. foot foot foot foot .';
}
#birdwatcher {
  grid-template-rows: auto;
  grid-template-areas:
    '. heading heading heading heading .'
    '. area1 area1 area1 area1 .'
    '. . area2 area2 . .'
    '. foot foot foot foot .';
}
#icn {
  grid-template-rows: auto 14vw 14vw;
  grid-template-areas:
    '. heading heading heading heading .'
    '. area7 area7 area7 area7 area8'
    'area6 area7 area7 area7 area7 area8'
    'area1 area2 area3 area4 area5 area5'
    '. foot foot foot foot .';
}

#swallows {
  grid-template-rows: auto 14vw 14vw 14vw 14vw 14vw 14vw 14vw 14vw;
  grid-template-areas:
    '. heading heading heading heading .'
    '. area1 area1 . . .'
    '. area1 area1 area2 area2 area2'
    '. area1 area1 area2 area2 area2'
    'area3 area3 area4 area4 area5 area5'
    'area3 area3 area4 area4 area5 area5'
    'area6 area6 area4 area4 area5 area5'
    'area6 area6 area7 area7 area7 .'
    '. . area7 area7 area7 .'
    '. foot foot foot foot .';
}
#figures {
  grid-template-rows: auto 14vw 14vw 14vw 14vw 14vw 14vw 14vw;
  grid-template-areas:
    '. heading heading heading heading .'
    '. . area1 area1 area1 .'
    'area2 area2 area1 area1 area1 .'
    'area2 area2 area1 area1 area1 .'
    'area2 area2 . area4 area4 area4'
    '. area3 area3 area4 area4 area4'
    '. area3 area3 area4 area4 area4'
    '. . . area4 area4 area4'
    '. foot foot foot foot .';
}

#photography {
  grid-template-rows: auto 14vw 14vw 14vw 14vw 14vw 14vw 14vw 14vw;
  grid-template-areas:
    '. heading heading heading heading .'
    'area1 area1 area1 area1 area2 .'
    'area1 area1 area1 area1 area3 area3'
    'area1 area1 area1 area1 area3 area3'
    'area4 area4 area4 area5 area5 area5'
    'area4 area4 area4 area5 area5 area5'
    'area6 area6 area8 area8 area8 area8'
    'area6 area6 area8 area8 area8 area8'
    '. area7 area8 area8 area8 area8';
}



/* +++++++++++++++++++++ MOUSE SCREENS +++++++++++++++++++++ */
@media only screen 
  and (pointer: fine) {
    
img.button:hover {
  transform: scale(100%);
}
    
a:hover, a h1:hover, a h3:hover, h1.button:hover, h2.button:hover {
  color: #6fc5d1;
}
a:hover h1 img {
  filter: invert(68%) sepia(33%) saturate(460%) hue-rotate(139deg) brightness(99%) contrast(91%);
}
    
}



/* +++++++++++++++++++++ PHONE +++++++++++++++++++++ */
@media only screen 
  and (orientation: portrait) {
    
img.button {
  transform: scale(100%);
}
    
    
div.spacetop, div.halfspacetop {
  margin-top: 0;
}
div.spaceright, div.halfspaceright {
  margin-right: 0;
}
div.spacebottom, div.halfspacebottom {
  margin-bottom: 0;
}
div.spaceleft, div.halfspaceleft {
  margin-left: 0;
}
    
    
#landing {
  grid-template-rows: 14vh 14vh 14vh 14vh 14vh auto;
  grid-template-areas:
    '. . . . . .'
    'area3 area1 area1 area1 area1 area4'
    'area3 area1 area1 area1 area1 area4'
    'area2 area2 area2 area2 area2 area2'
    'area2 area2 area2 area2 area2 area2'
    '. . area5 area5 . .';
}

#home {
  margin: 5vw;
  grid-template-rows: 14vh 14vh 14vh auto 7vh 7vh;
  grid-template-areas:
    '. . . . . .'
    '. area1 area1 area1 area1 .'
    '. area1 area1 area1 area1 .'
    'area2 area2 area2 area2 area2 area2'
    'area3 area3 area3 area5 area5 area5'
    'area4 area4 area4 area6 area6 area6';
}

#rethink {
  grid-template-rows: auto 14vw 14vw 14vw 14vw 14vw 14vw 14vw 14vw 14vw;
  grid-template-areas:
    'heading heading heading heading heading heading'
    'area1 area1 area1 area1 . .'
    'area1 area1 area1 area1 . .'
    'area1 area1 area1 area1 area2 area2'
    'area1 area1 area1 area1 area2 area2'
    'area1 area1 area1 area1 area3 area3'
    'area1 area1 area1 area1 area3 area3'
    '. area4 area4 area5 area5 .'
    '. area4 area4 area5 area5 .'
    '. area4 area4 area5 area5 .'
    '. foot foot foot foot .';
}
#museum {
  grid-template-rows: auto auto 14vw 14vw auto 14vw 14vw 14vw 14vw 14vw 14vw 14vw;
  grid-template-areas:
    'heading heading heading heading heading heading'
    '. . area1 area1 area2 area2'
    'area3 area3 area1 area1 area2 area2'
    'area3 area3 area1 area1 area2 area2'
    'area4 area4 area4 area4 area4 area4'
    '. area5 area5 area5 area5 area5'
    '. area5 area5 area5 area5 area5'
    '. area5 area5 area5 area5 area5'
    '. area5 area5 area5 area5 area5'
    '. area5 area5 area5 area5 area5'
    '. area5 area5 area5 area5 area5'
    '. area5 area5 area5 area5 area5'
    '. foot foot foot foot .';
}
#train {
  grid-template-rows: auto;
  grid-template-areas:
    'heading heading heading heading heading heading'
    'area1 area1 area1 area1 area1 area1'
    '. foot foot foot foot .';
}
#poipu {
  grid-template-rows: auto auto 14vw 14vw 14vw;
  grid-template-areas:
    'heading heading heading heading heading heading'
    'area1 area1 area1 area1 area1 area1'
    'area3 area3 area4 area4 area4 area4'
    'area2 area2 area4 area4 area4 area4'
    'area2 area2 area4 area4 area4 area4'
    '. . area4 area4 area4 area4'
    '. foot foot foot foot .';
}
#birdwatcher {
  grid-template-rows: auto;
  grid-template-areas:
    'heading heading heading heading heading heading'
    '. area1 area1 area1 area1 .'
    'area2 area2 area2 area2 area2 area2'
    '. foot foot foot foot .';
}
#icn {
  grid-template-rows: auto 14vw 14vw;
  grid-template-areas:
    'heading heading heading heading heading heading'
    'area6 area6 area7 area7 area7 area7'
    'area6 area6 area7 area7 area7 area7'
    'area1 area1 area1 area2 area2 area2'
    'area3 area3 area3 area4 area4 area4'
    'area8 area8 area5 area5 area5 area5'
    '. . area5 area5 area5 area5'
    '. foot foot foot foot .';
}

#swallows {
  grid-template-rows: auto 14vw 14vw 14vw 14vw 14vw 14vw 14vw 14vw;
  grid-template-areas:
    'heading heading heading heading heading heading'
    '. area1 area1 . . .'
    '. area1 area1 area2 area2 area2'
    '. area1 area1 area2 area2 area2'
    'area3 area3 area4 area4 area5 area5'
    'area3 area3 area4 area4 area5 area5'
    'area6 area6 area4 area4 area5 area5'
    'area6 area6 area7 area7 area7 .'
    '. . area7 area7 area7 .'
    '. foot foot foot foot .';
}
#figures {
  grid-template-rows: auto 14vw 14vw 14vw 14vw 14vw 14vw 14vw;
  grid-template-areas:
    'heading heading heading heading heading heading'
    '. . area1 area1 area1 .'
    'area2 area2 area1 area1 area1 .'
    'area2 area2 area1 area1 area1 .'
    'area2 area2 . area4 area4 area4'
    '. area3 area3 area4 area4 area4'
    '. area3 area3 area4 area4 area4'
    '. . . area4 area4 area4'
    '. foot foot foot foot .';
}

#photography {
  grid-template-rows: auto 14vw 14vw 14vw 14vw 14vw 14vw 14vw 14vw 14vw 14vw 14vw 14vw 14vw 14vw;
  grid-template-areas:
    'heading heading heading heading heading heading'
    '. area1 area1 area1 area1 .'
    '. area1 area1 area1 area1 .'
    '. area1 area1 area1 area1 .'
    'area2 area2 area2 area3 area3 area3'
    'area2 area2 area2 area3 area3 area3'
    'area2 area2 area2 area3 area3 area3'
    'area4 area4 area4 area5 area5 area5'
    'area4 area4 area4 area5 area5 area5'
    'area6 area6 area6 area7 area7 area7'
    'area6 area6 area6 area7 area7 area7'
    'area6 area6 area6 area7 area7 area7'
    '. area8 area8 area8 area8 .'
    '. area8 area8 area8 area8 .'
    '. area8 area8 area8 area8 .'
}

nav.grid {
  grid-template-columns: 22.5vw 22.5vw 22.5vw 22.5vw;
  grid-gap: 0;
}
.logo {
  grid-row-start: 1;
  grid-column-start: 1;
  grid-column-end: span 4;
}
    
}