body {
  background-color: #f2f2ea;
  margin: 0;
}

#container {
  display: grid;
  margin: 0;
  grid-template-areas: "myHeader myHeader myHeader myHeader myHeader myHeader" "myNav myNav myNav myNav myNav myNav" "myLColumn myLColumn myLColumn myRColumn myRColumn myRColumn" "myFooter myFooter myFooter myFooter myFooter myFooter";
  grid-template-columns: 16.66% 16.66% 16.66% 16.66% 16.66% 16.66%;
}

#header {
  grid-area: myHeader;
  background-color: #06b2da;
  width: 100%;
  margin: 0;
  display: grid;
  grid-template-areas: "myImage myCompany";
  grid-template-columns: 395px;
  -moz-column-gap: 0px;
       column-gap: 0px;
}
#header img {
  grid-area: myImage;
  border: 2px solid black;
  margin: 25px;
  margin-right: 0px;
}
#header h1 {
  grid-area: myCompany;
  text-align: center;
  margin-top: 80px;
  width: 180px;
  justify-content: center;
  align-items: center;
  font-size: 60px;
}

#nav {
  grid-area: myNav;
  background-color: #048abf;
  display: grid;
}
#nav ul {
  width: 100%;
  text-align: center;
  margin: 0;
  padding-left: 0;
}
#nav li {
  display: inline;
  font-size: 25px;
  text-align: center;
  padding: 3%;
}

#left-column {
  grid-area: myLColumn;
}
#left-column p img {
  margin: 25px;
  margin-left: 50px;
  border: 2px solid black;
  width: 85%;
}
#left-column div {
  grid-template-columns: auto auto auto;
  margin-left: 50px;
}
#left-column div img {
  width: 28%;
  border: 2px solid black;
  margin: 5px;
}

#right-column {
  grid-area: myRColumn;
  padding: 25px;
}
#right-column h3 {
  text-align: center;
  margin-bottom: 0px;
}
#right-column div {
  -moz-columns: 2;
       columns: 2;
  padding: 20px 0;
}
#right-column form {
  display: grid;
  background-color: #f29e07;
  border: 4px solid black;
  grid-template-areas: "myH2 myH2" "myP1 myP1" "myP2 myP2" "myP3 myP3" "myP4 myP4";
}
#right-column form h2 {
  grid-area: myH2;
  padding-left: 25px;
}
#right-column form .p1 {
  grid-area: myP1;
  display: grid;
  text-align: end;
  height: 20px;
  grid-template-columns: 25% 70%;
}
#right-column form .p1 label {
  padding-right: 15px;
}
#right-column form .p2 {
  grid-area: myP2;
  display: grid;
  text-align: end;
  grid-template-columns: 25% 70%;
}
#right-column form .p2 label {
  padding-right: 15px;
}
#right-column form .p3 {
  grid-area: myP3;
  display: grid;
  text-align: end;
  grid-template-columns: 25% 70%;
}
#right-column form .p3 label {
  padding-right: 15px;
  padding-top: 15px;
}
#right-column form .p3 textarea[name=Message] {
  height: 120px;
}
#right-column form .p4 {
  grid-area: myP4;
  text-align: center;
  padding-right: 25%;
}
#right-column form .p4 input[name=button] {
  color: white;
  background-color: #0091c0;
  border-radius: 25px;
  border: 1px solid white;
  font-size: 20px;
  padding: 5px;
}
#right-column form .p4 input[name=button2] {
  color: white;
  background-color: #e44906;
  border-radius: 25px;
  border: 1px solid white;
  font-size: 20px;
  margin-left: 15px;
  padding: 5px;
}

#footer {
  grid-area: myFooter;
  background-color: #048abf;
  display: grid;
  grid-template-columns: 50% 50%;
}
#footer h1 {
  display: grid;
  font-size: 50px;
  margin: 0px;
  padding: 20px 50px;
}
#footer div {
  display: grid;
  justify-content: end;
  grid-template-columns: auto auto auto;
}
#footer div img {
  border-radius: 25px;
  width: 50px;
  height: 50px;
  padding: 20px;
}
#footer div img img[alt~=instagram] {
  order: 3;
  padding-right: 40px;
}
#footer div img img[alt~=twitter] {
  order: 2;
}
#footer div img img[alt~=facebook] {
  order: 1;
}

@media screen and (max-width: 750px) {
  #header {
    grid-template-areas: "myImage" "myCompany";
    grid-template-columns: 100%;
    justify-content: center;
  }
  #header img {
    grid-area: myImage;
    border: 2px solid black;
    margin-right: auto;
    margin-left: auto;
  }
  #header h1 {
    grid-area: myCompany;
    text-align: center;
    margin-top: 0px;
    width: auto;
    justify-content: center;
    align-items: center;
    font-size: 60px;
  }
  #left-column {
    grid-area: myLColumn;
  }
  #left-column p img {
    margin: 25px;
    margin-left: 2%;
    border: 2px solid black;
    width: 100%;
  }
  #left-column div {
    grid-template-columns: auto auto;
    margin-left: 2%;
  }
  #left-column div img {
    width: 40%;
    border: 2px solid black;
    margin: 5px;
  }
  #right-column div {
    -moz-columns: 1;
         columns: 1;
  }
}
@media screen and (max-width: 600px) {
  #container {
    display: grid;
    margin: 0;
    grid-template-areas: "myHeader myHeader myHeader myHeader myHeader myHeader" "myNav myNav myNav myNav myNav myNav" "myLColumn myLColumn myLColumn myLColumn myLColumn myLColumn" "myRColumn myRColumn myRColumn myRColumn myRColumn myRColumn" "myFooter myFooter myFooter myFooter myFooter myFooter";
    grid-template-columns: 16.66% 16.66% 16.66% 16.66% 16.66% 16.66%;
  }
  #left-column {
    grid-area: myLColumn;
  }
  #left-column p img {
    margin: 2%;
    border: 2px solid black;
    width: 90%;
  }
  #left-column div {
    grid-template-columns: auto auto auto;
    margin-left: 2%;
  }
  #left-column div img {
    width: 28%;
    border: 2px solid black;
    margin: 5px;
  }
  #right-column div {
    -moz-columns: 2;
         columns: 2;
  }
  #footer {
    grid-area: myFooter;
    background-color: #048abf;
    display: grid;
    grid-template-columns: 50% 50%;
  }
  #footer h1 {
    display: grid;
    font-size: 25px;
    margin: 0px;
    padding: 20px 50px;
  }
  #footer div {
    display: grid;
    justify-content: end;
    grid-template-columns: auto auto auto;
  }
  #footer div img {
    border-radius: 25px;
    width: 25px;
    height: 25px;
    padding: 20px;
  }
  #footer div img img[alt~=instagram] {
    order: 3;
    padding-right: 40px;
  }
  #footer div img img[alt~=twitter] {
    order: 2;
  }
  #footer div img img[alt~=facebook] {
    order: 1;
  }
}/*# sourceMappingURL=style.css.map */