/* set correct box model */
* {
  box-sizing:border-box;
}
html {
  margin:0px;
  padding:0px;
}
body {
  background-color:#cdd7eb;
  font-family:Arial, Helvetica, sans-serif;
  margin:0;
  padding:0;
}

.floatright {
  float: right;
  clear:right;
  padding:0px 0px 10px 10px;
}

.floatleft {
  float: left;
  clear: left;
  padding:0px 10px 10px 0px;
}

/* flexbox container */
.holy-grail-flexbox {
  display:flex;
  flex-wrap:wrap;
}

.header {
  width:100%;
  padding: 1vh 0px;
  position: fixed;
}
.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  padding: 1vh 15%;
  color: #BE1E2D;
}

.main-content, .aboutuspage, .left-sidebar, .right-sidebar {
    height: 100vh;
}


/* columns (mobile) */
.holy-grail-flexbox > * {
  width:100%;
}

/* background colors */
.holy-grail-flexbox > .header {background:#fff}
.holy-grail-flexbox > .main-content {background:#f97171}
.holy-grail-flexbox > .aboutuspage {background:#eee}
.holy-grail-flexbox > .left-sidebar {background:#666}
.holy-grail-flexbox > .right-sidebar {background:#666}
.holy-grail-flexbox > .footer {background:#fff}




nav {
  font-size: .9em;
  text-align: center;
}
nav ul {
  margin:0px;
  list-style-type:none;
  align-items: stretch; /* Default */
  justify-content: space-between;
}
nav li {
  flex: 0 1 auto; /* Default */
  padding:0px 1%;
  list-style-type: none;
  display: inline-block;
}
nav a {
  text-decoration:none;
  color:#000;
  font-weight:bold;
}
nav a:hover {
  color:#BE1E2D;
}
nav a:click {
  color:#BE1E2D;
}
p {
    display: inline-block;
}
h1, h2, h3, h4, h5 {
  color:#BE1E2D;
  padding:0px;
}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  background-color: #fff;
}
th {
  background-color: #BE1E2D;
  color: #fff;
  font-weight: bold;
}
td, th {
  height: 1.1em;
  border: 1px solid #BE1E2D;
  text-align: left;
  padding: 4px;
}
tr:nth-child(even) {
  background-color: #dddddd;
}

#couchsurf {
  height: 500px;
  padding: 2.5vh 2.5vw;
  text-align: center;
  background-image: url('assets/superlong background image.jpg');
  -webkit-animation: 12s linear infinite running slidein;
  animation: 12ßs linear infinite running slidein;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;

  -webkit-animation-iteration-count: 500;
  animation-iteration-count: 500;

  -webkit-animation-direction: reverse;
  animation-direction: reverse;
  overflow: hidden;
}

@keyframes slidein {
  from {background-position: top;background-size:auto 500px; }
  to {background-position: -100px 0px;background-size:auto 500px;}
}


#dogsurfing {
  position:relative;
  margin-top: -1.5vh;
  width: 420px;
  z-index: 100;
}

.aboutus {
  height: 200px;
}

.aboutuspage {
  width: 100%;
  height: 100vh;
  padding: 0px 2vh 2vh 2vh;
  text-align: left;
  vertical-align: middle;
  overflow: scroll;
}
.aboutuspage img {
  height:auto;
  width:30vw;
}

#mainabout  {
  height:calc(100vh - 500px);
  width:100%;
  padding: 2vh 2vw;
}
#mainabout quote {
  display: block;
  margin: 0px;
  padding: 10px;
  text-align: center;
  color:#fff;
  font-size: 1.2em;
  font-weight: bold;
  line-height: 1.5em;
}

#couchsurf #logo {
  width:100%;
  container-type: normal;
  margin:0px;
  margin-top: 4vh;
}

#testimonialspage #logo {
  margin-top: 6vh;
}
.aboutuspage #logo {
  width:100%;
  margin-top: 6vh;
}

#aboutuspage img {
  height:150px;
  width:auto;
}
#aboutuspage h1 {
  text-align: center;
  margin: 0px;
  font-size: 2em;
  line-height: 1em;
}
#aboutuspage p {
  text-align: left;
}

quote {
  padding-top:2vh;
}
/* desktop breakpoint */
@media (min-width:640px) {
  .holy-grail-flexbox > .header {
    order:-2; /* header first */
  }
  .holy-grail-flexbox > .left-sidebar {
    /* left sidebar second (first in second row) */
    order:-1; 
  }
  .holy-grail-flexbox > .main-content {
    width:70%;
  }
   .holy-grail-flexbox > .aboutuspaage {
    width:70%;
    padding:5vh 2vw;
  }
  .holy-grail-flexbox > .left-sidebar,
  .holy-grail-flexbox > .right-sidebar {
    width:15%;
  }
}

/* mobile breakpoint */
@media (max-width:639px) {
  .holy-grail-flexbox > .left-sidebar,
  .holy-grail-flexbox > .right-sidebar {
    display:none;
  }
  .aboutuspage {
    padding: 0px 5vw;
  }
  .header {
    width:100vw;
    margin:auto;
    padding: 1vh 0px;
  }
  nav ul {
    align-items: center; /* Default */
    justify-content: space-between;
  }
  nav li {
    display:block;
    clear:both;
    line-height: 20px;
    padding:0px .5%;
  }
  #couchsurf #logo {
    margin-top: 13vh;
  }
  #dogsurfing {
    position:relative;
    margin-top: -2vh;
    width: 350px;
    z-index: 60;
  }
}