.group:after {
  content: "";
  display: table;
  clear: both;
}

* {
    padding:0;
    margin:0;
}

body {
  font-family: 'Roboto', sans-serif;
  font-size:62.5%;
  background-color:#eee;
  color:#573368; /* purple */
}

header {
  position:relative;
  width:100%;
  box-sizing: border-box;
  text-align: center;
  padding-top:2.6em;
  background-color:#fff;
}

  #mobnav, #burger {
    display:none;
  }
  
  #mainnav {
    display:block;
  }

  nav {
    float:left;
    width:42.5%;
    padding: 3em 0 3em 5em;
    box-sizing: border-box;
  }

    nav ul {
      list-style: none;
    }
    
      #mainnav li {
        float:left;
      }
      
        #mainnav li a {
          font-size:1.5em;
          font-weight:300;
          margin-right:3em;
          color:#573368; /* purple */
          text-decoration: none;
        }
        
          #mainnav a:hover {
            color:#be7ade; /* pink */
          }
          
          #mainnav:last-child a {
            margin-right:2em;
          }

  .logobox {
    float:left;
    display:block;
    width:15%;
    box-sizing: border-box;
    text-align: center;
  }
    #logo {
      position:relative;
      z-index:5;
      display:inline-block;
      width:15.3em;
      margin-bottom:-4em;
    }
  
    #logo img {
        max-width:100%;
        display:block;
    }
  
  .contact-info {
    padding: 3em 5em 3em 0;
    box-sizing: border-box;
    float:right;
    display:block;
    width:42.5%;
  }
  
    .contact-info p, .social {
      float:right;
      font-size:1.5em;
      font-weight:300;
      color:#573368; /* purple */
    }
    
    .social {
      margin-left:1em;
      margin-top:2px;
    }
    
      .social:last-of-type {
        margin-left:0;
      }

    
    .line {
      float:right;
      margin:0 3em;
      margin-top:-5px;
      width:1px;
      height:35px;
      background-color:#e1dbe4; /* very light pink */
    }

.curve {
  position:absolute;
  width:284px;
  height:53px;
  bottom:-49px;
  left:50%;
  margin-left:-142px;
  background-image:url('../img/curve.png');
  background-repeat: no-repeat;
  z-index: 4;
}
  
footer {
  clear:both;
  background-color:#f2f2f2;
  padding:3em;
  text-align: center;
}

  footer p {
    text-align: center;
    
  }
  
@media screen and (max-width: 1295px) {
  #mainnav li a {
    margin-right:2em;
    font-size:1.3em;
  }
  
  .line {
    margin:0 2em;
    margin-top:-8px;
  }
  
  .contact-info p {
    font-size:1.3em;
  }
}
@media screen and (max-width: 1050px) {
  
  header {
    height:16em;
  }
  
  #mobnav, #burger {
    display:block;
  }
  
  #mainnav {
    display:none;
  }
  
  #mobnav {
    position:relative;
    z-index:4;
    clear:both;
    float:left;
    width:100%;
    padding-top:5em;
    background-color:#fff;
  }
  
    #mobnav li {
      display:block;
      clear:left;
      float:left;
      width:100%;
    }
    
      #mobnav li a {
        display:block;
        background-color:#fff;
        border-top:1px solid #eee;
        padding:1em;
        text-align: center;
        float:left;
        box-sizing: border-box;
        width:100%;
        font-size:1.5em;
        font-weight:300;
        text-decoration: none;
        color:#573368; /* purple */
      }
  
  .logobox {
    position:absolute;
    width:100%;
    text-align: center;
  }
  
  #burger {
    position:relative;
    z-index:5;
    width:37px;
  }
  
    #burger img {
      display:block;
      max-width:100%;
    }
    
  .social, .line {
    display:none;
  }
  
  .contact-info P {
    clear:right;
    margin-bottom:1em;
  }
  
  .curve {
    position:relative;
    clear:both;
    bottom:0;
  }
  
}

@media screen and (max-width: 550px) {
    
    header {
        height:15em;
    }
    
    #logo {
        width:10em;
    }
    
    .curve {
        display:none;
    }
    
    .contact-info {
        display:none;
    }
}

@media screen and (max-width: 350px) {
  
  .logobox {
    position:relative;
    float:right;
    width:auto;
    padding-right:3em;
  }
    
    #logo {
        width:10em;
    }
  
  #burger {
    float:left;
  }
  
  nav {
    padding-left:3em;
  }