* {
  padding: 0;
  margin: 0;
  border: none;
  outline: none;
  list-style: none;
  text-decoration: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box; }

html {
  font-size: 62.5%; }

header,
main,
footer {
  width: 100%;
  height: auto;
  position: relative; }

body {
  background: url('img/bg.png') center;
}
.gridContainer {
  min-width: 375px;
  max-width: 430px;
  margin: 0 auto; 
}
header .logo {
  width: 314px;
  height: 130px;
  margin: 30px auto;
}
main .flex1 {
  margin-top: 60px;
}
.flex1 p {
  width: 314px;
  height: 82px;
  margin: 32px auto;
  background: rgba(19, 19, 19, 0.8);
  border: 1px solid #2D2D2D;
  text-align: center;
  position: relative;
  border-radius: 7px;
}
.flex1 .menu::before,
.flex1 .deli::before,
.flex1 .inst::before,
.flex1 .face::before {
  content:'' ;
  display: block;
  position: absolute;
  z-index: 1;
  width: 50px;
  height: 50px;
  border-radius: 4px;
  margin: 16px;
}
.flex1 .menu::before {
  background: url('img/menu.svg') 100% center no-repeat;
}
.flex1 .deli::before {
  background: url('img/delivery.svg') 100% center no-repeat;
}
.flex1 .inst::before {
  background: url('img/instagram.svg') 100% center no-repeat;
}
.flex1 .face::before {
  background: url('img/facebook.svg') 100% center no-repeat;
}
.flex1 p a {
    display: inline-block;
    width: 100%;
    height: 100%;
    font: 300 2.4rem "Roboto", sans-serif;
    color: #ffffff;
    padding: 25px 0 25px 30px;
}
.flex2 p {
  width: 314px;
  background-color: #FFD741;
  text-align: center;
  margin: 60px auto;
  border-radius: 5px;
}
.flex2 p a {
  display: inline-block;
  width: 100%;
  height: 100%;
  font: 300 2.4rem "Roboto", sans-serif;
  color: #171717;
  margin: 15px auto;
}