html, button, input, select, textarea,
.pure-g [class *= "pure-u"] {
    /* Set your content font stack here: */
    font-family: 'Open Sans', sans-serif;
    color: #302c2d;
}

.banner {
  background-color: #272833;
  background-image: url("../img/home-banner.jpg");
  background-position: center center;
  background-size: cover;
  min-height: 100vh;
  display: grid;
  margin: 0;
  place-content: center;
}

.header {
  background-color: #272833;
}

.logoimg {
  max-width: 100%;
  max-height: 100%;
  width: 260px;
  height: 51px;
  margin-bottom: 40px;
}

.logo {
  padding: 20px;
}

  .logo, .menu {
    text-align: left;
  }

.intro {
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
  padding-top: 50px;
  color: white;
}

.menu {
  text-align: right;
  padding-top: 15px;
}

#menu {
  margin: 12px 0 0 0;
  -moz-padding-start: 0;
  -webkit-padding-start: 0;
  list-style: none;
}

#menu li {
  display: inline-block;
  margin: 0.4em;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  font-size: 1.08em;
  font-family: 'Oswald', sans-serif;
}

li.active {
  padding: 1em 0.5em;
  color: #00A1B9;
}

#menu li a {
  text-decoration: none;
  padding: 1em 0.5em;
  color: white;
  display: inline-block;
}

#menu li a:hover {
  text-decoration: none;
  color: #00A1B9;
}

.about {
  text-align: center;
  padding: 0 20px 80px 20px;
}

.performance {
  max-width: 600px;
  padding: 20px;
  color:white;
  text-align: center;
  margin: 0 auto;
  flex:1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.more {
  padding: 20px;
  text-align: center;
  margin-bottom: 50px;
  display: block;
}

.more img {
  width: 32px;
  height: 32px;
}

.centre {
  margin: auto;
}

.seek, .about800, .about850  {
  line-height: 1.8em;
  color: white;
  text-align: center;
  font-size: 18px;
  padding: 20px;
}

.line {
  width:100px;
  border-top: 1px solid white;
  margin: 0 auto 10px auto;
}

.lineb {
  width:100px;
  border-top: 1px solid black;
  margin: 0 auto 20px auto;
}

.pos {
  color: #00A1B9;
  padding-bottom: 20px;
}

.loc {
  color: #00A1B9;
  padding-bottom: 0;
}

h1 {
  text-transform: uppercase;
  letter-spacing: 0;
  margin-bottom: 10px;
  font-family: 'Oswald', sans-serif;
  font-size: 2.8em;
  font-weight: 700;
}

h2 {
  text-transform: uppercase;
  letter-spacing: 0;
  text-align: center;
  font-size: 2.4em;
  line-height: 1.1em;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
}

h3 {
   font-family: 'Oswald', sans-serif;
   font-weight: 700;
   color: white;
   text-transform: uppercase;
   font-size: 1.4em;
   letter-spacing: 0;
   margin-bottom: 10px;
}

.aboutus h3 {
  color: #302c2d;
}

.next {
  max-width: 1010px;
  margin: 100px auto;
}

.aboutus {
  max-width: 1010px;
  margin:50px auto 150px auto;
}

.about800 {
  max-width: 700px;
  margin: 0 auto;
}

.about850 {
  max-width: 850px;
  margin: 0 auto;
}

.proj {
  text-align: left;
}

.proj h3, .project1 h3, .project2 h3 {
  margin-bottom: 0;
}

.project1 {
  padding-right: 25px;
  text-align: left;
}

.project2 {
  padding-left: 25px;
  text-align: left;
}

.blue {
  color: #00A1B9;
  text-decoration: none;
}

.blue:hover {
  text-decoration: underline;
}

.next800 {
  max-width: 800px;
  margin: 100px auto;
  font-size: 1.35em;
  color: #999898;
  font-style: italic;
  line-height: 1.55em;
  padding: 20px;
  text-align: center;
}

.column, columnb {
  padding: 20px;
  text-align: center;
  font-size: 0.9em;
  line-height: 1.6em;
}

.columnb {
  color: black;
}

.next-black {
  background-color: #302c2d;
}

.matt, .pete, .karsten {
	width: 200px;
	height: 200px;
  border-radius: 100px;
  margin: 0 auto;
	}

.matt {
  background: url(../img/matttuck.jpg) no-repeat;
}

.pete {
  background: url(../img/pete.jpg) no-repeat;
}

.karsten {
  background: url(../img/karsten.png) no-repeat;
}

.partners {
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
  padding-top: 50px;
  padding-bottom: 50px;
  color: white;
}

.partners .column {
   color: white;
}

.column a {
  color: #00A1B9;
  text-decoration: none;
  font-weight: bold;
  padding: 1em 0;
}

.column a:hover {
  text-decoration: underline;
}

.footer {
  padding: 30px 20px;
  text-align: center;
}

.info {
  color: white;
  font-size: 0.85em;
  padding:10px;
}

.info a, .tiny a {
  color: #00A1B9;
  text-decoration: none;
  padding: 10px 0;
}

.info a:hover, .tiny a:hover {
  text-decoration: underline;
}

.tiny {
  text-transform: uppercase;
  color: white;
  font-size: 0.7em;
}

@media screen and (max-width: 769px) {

  #menu {
    margin-top: 0;
  }

  .intro {
    padding-top: 20px;
  }

  .logo, .menu {
    text-align: center;
    padding-top: 0;
  }

  .more {
    margin-bottom: 0;
  }

  .tiny a {
    padding: 0;
    }

.project2 {
  padding-left: 0;
  padding-right: 25px;
  text-align: left;
}

.project2 .pure-img {
  padding-top: 50px;
}

}

/* Animate */


.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  animation-delay: 1s;
}

@-webkit-keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }

  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0,-4px,0);
    transform: translate3d(0,-4px,0);
  }
}

@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }

  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0,-4px,0);
    transform: translate3d(0,-4px,0);
  }
}

.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}