@import url('https://fonts.googleapis.com/css?family=Roboto');
.container{
  background-color:#009790;
  max-width: 100%;
  height: 200px;
}

.container2{
  background-color:#FAFAFA;
  max-width: 100%;
  min-height: 150px;
}

.logo{
  max-width: 150px;
  padding-left: 300px;
}
.image{
  height: 120px;
  padding-top: 0px;
}

.big{
  font-family: 'Roboto', sans-serif;
  font-size: 50px;
  color: white;
  text-align: center;
  padding-top: 50px;
}

.small{
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  color: white;
  text-align: center;
  padding-top: 10px;
}

.grey{
  max-width: 50%;
  display: block;
  margin: 0 auto;
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  color: #646261;
  text-align: center;
  padding-top: 50px;
}

.grey a{
  text-decoration: underline;
}

.nav{
  font-family: 'Roboto', sans-serif;
  font-size: 15px;
  color: #646261;
  position: absolute;
    text-align: left;
  left: 68%;
  top: 5%; 
}

a{
  text-decoration: none;
  color: #646261;
}

.nav a{
  color: #646261;
  font-size: 20px;
}

.nav li{
  float: center;
  padding-left: 20px;
  padding-right: 20px;
}

ul {
 list-style: none;
}

.footer{
  max-width: 50%;
  background-color:#009790;
  display: block;
  margin: 0 auto;
  font-family: 'Roboto', sans-serif;
  font-size: 15px;
  color: #646261;
    text-align: center;
  padding-top: 40px;
}

.footer li{
  float: right;
  padding-left: 20px;
  list-style: none;
  font-size: 15px;
  color: #646261;
  position: relative;
  right: 35%;
}

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

.container{
  margin-top: 40px;
}
.big{
  padding-top: 40px;
}

.container2{
  max-height: 70%;
  margin-bottom: 20px;
}

.grey{
  padding-top: 35px;
  max-width: 300px;
}

.footer{
  max-width: 200px;
}

@media only screen and (max-width: 686px)
{
  .nav{
    left: 50%;
  }
}