body{  
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    color: #000;
    background: #fff;
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/* typography */
h1 {
    font-size:1em;
    color: #f1d303;
    padding: 0 10px;
    display: inline-block;
}
 
h3 {
    font-size:22px;
}

p {
    
}

a {
    color:white;
}

/* images and icons */
.ico {
    width: 22px;
}

.logo {
    width: 80px;
    padding: 10px 0;
}
 
#content-wrapper {
    width:960px;
    text-align:left;
    margin:0 auto;
    background:#fff;
    padding:15px;
     
}

/* layout */
header,nav,footer{
    width: 100%;
    display: flex;
    flex-grow: 0;
    box-sizing: border-box;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0 20%;
    font: Avenir, Arial, Sans-serif;
}

header {
}

header:after{
    clear: both;
}

nav {
    background: #3E363F;
    color: #fff;

}

footer{
    flex-direction: row-reverse;
    background: #F1D302;
    padding: 15px 20%;
}

ul li {
    display: inline-block;
}



header .head{
    padding: 5px 0 5px 25px;
    background-size: 22px;
    background-position: center left;
    max-width: 150px;
}

.location-img{
    background: url(img/ico_location.svg) no-repeat;
}

.phone-img{
    background: url(img/ico_phone.svg) no-repeat;
}

.clock-img{
    background: url(img/ico_wrkhrs.svg) no-repeat;
}

.locationmap{
    flex:1 0 ;
}


@media only screen and (max-width: 768px) {
  header,nav,footer {
    padding: 0 25px;
  }
}