/* SCSS Document */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#flex-container {
  display: flex;
  flex-direction: column;
  width: 1000px;
  margin: 10px auto;
  border: 2px solid #000000;
}

header {
  display: flex;
  flex-direction: row;
  background-color: #009dff;
}
header img {
  border: 1.5px solid #000000;
  margin: 10px;
}

nav ul {
  display: flex;
  justify-content: space-around;
  list-style-type: none;
  background-color: #005eff;
  padding: 10px;
}

#mid {
  display: flex;
  flex-direction: row;
}

footer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: #009dff;
  padding: 15px;
  padding-bottom: 5px;
}

img[alt~=software] {
  width: 110px;
  height: 110px;
  margin: 10px;
}

#left {
  display: flex;
  flex-flow: row wrap;
  width: 50%;
  margin-right: 10px;
  margin-left: 15px;
  padding-left: 15px;
  padding-top: 15px;
}
#left img {
  flex-flow: column wrap;
  border: 1.5px solid #000000;
  margin: 3px;
}

#right {
  display: flex;
  flex-flow: column;
  width: 50%;
  margin-right: 15px;
  margin-left: 10px;
}

img[alt~=social] {
  width: 40px;
  height: 40px;
  border-radius: 25%;
  margin: 10px;
}

img[alt~=web] {
  width: 350px;
}

#col {
  -moz-column-count: 2;
       column-count: 2;
}

#button {
  background-color: #009dff;
  border-radius: 10px;
  padding: 5px;
  border-color: #ffffff;
  color: #ffffff;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  font-size: medium;
}

#button2 {
  background-color: #ff4500;
  border-radius: 10px;
  padding: 5px;
  border-color: #ffffff;
  color: #ffffff;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  font-size: medium;
}

#social {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}

form {
  background-color: #fac108;
  border: 2px solid #000000;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  padding: 15px;
  margin: 20px;
  width: 250px;
}

#form {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

@media only screen and (max-width: 980px) {
  #mid {
    display: flex;
    flex-direction: column;
  }
  #flex-container {
    width: 100%;
    height: auto;
  }
  #left {
    width: 100%;
    height: auto;
  }
  form {
    padding: 10px 0px 10px;
    margin: 10px 0px 10px;
    width: 100%;
    height: auto;
  }
  form input[type~=text], form textarea[name~=Message] {
    width: 100%;
    padding: 10px;
  }
  form h2 {
    font-size: xx-large;
  }
  form p > label {
    font-size: xx-large;
  }
  #right {
    width: 100%;
    height: auto;
    margin-right: 0px;
    margin-left: 0px;
  }
  #right h3 {
    font-size: xx-large;
  }
  #right p {
    font-size: xx-large;
  }
  #col {
    -moz-column-count: 1;
         column-count: 1;
    padding: 10px 0px 10px;
  }
  nav ul {
    font-size: xx-large;
  }
  #button, #button2 {
    font-size: xx-large;
  }
}/*# sourceMappingURL=flex.css.map */