html {
  font-family: 'Barlow', sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  width: 100%;
  margin: 0;
}

body,
h1,
h2,
h3,
h4,
p {
  color: black;
  text-align: center;
  line-height: 1.5;
  margin: 0;
}

h1 {
  font-size: 36px;
  font-weight: bold;
}

h2 {
  font-size: 24px;
  font-weight: bold;
}

h3,
input {
  font-size: 16px;
  font-weight: normal;
}

h4,
nav {
  font-size: 12px;
  line-height: 20px;
  font-weight: normal;
  text-transform: uppercase;
}

nav {
  font-weight: 600;
}

p {
  font-size: 14px;
  line-height: 24px;
  font-weight: normal;
}

form {
  margin: 0;
}

/* Larger than mobile */

@media (min-width: 500px) {
  h1 {
    font-size: 48px;
  }
  h2 {
    font-size: 36px;
  }
  h3,
  input {
    font-size: 20px;
  }
  nav {
    font-size: 16px;
  }
}

a:link,
a:visited,
a:hover,
a:active {
  text-decoration: none;
  color: #000000;
}

*:focus {
  outline: none;
}

header {
  width: 100%;
  height: 63px;
  margin: 15px auto 45px;
  display: flex;
  align-items: center;
}

#icon {
  width: 63px;
  height: 63px;
  margin-left: 20px;
  flex-shrink: 0;
}

nav {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

/* Larger than mobile */

@media (min-width: 768px) {
  header {
    height: 120px;
    margin: 30px auto 0;
    display: block;
  }
  nav {
    width: 320px;
    margin: 30px auto 0;
  }
}

/* ================================== */

/* ========== MAIN SECTION ========== */

/* ================================== */

main {
  height: 420px;
  position: relative;
}

#sean_and_thomas_logo {
  width: 240px;
  height: 110px;
}

#sean_pic {
  height: 340px;
  position: absolute;
  left: calc((100vw - 320px) / 4);
  bottom: 0px;
}

#thomas_pic {
  height: 340px;
  position: absolute;
  right: calc((100vw - 320px) / 4);
  bottom: 0px;
}

/* iPad Portrait */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
  main {
    height: calc(100vh - 150px);
    max-height: 870px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
  }
  #sean_and_thomas_logo {
    width: 520px;
    height: 225px;
    margin-top: 75px;
  }
  #sean_pic {
    height: 645px;
    left: 0px;
  }
  #thomas_pic {
    height: 645px;
    right: 0px;
  }
}

@media (min-width: 1000px) {
  main {
    height: calc(100vh - 150px);
    max-height: 870px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
  }
  #sean_and_thomas_logo {
    width: 590px;
    height: 220px;
    margin-top: 75px;
  }
  #sean_pic {
    height: 698px;
    left: 13px;
  }
  #thomas_pic {
    height: 698px;
    right: 13px;
  }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
  main {
    height: calc(100vh - 150px);
    min-height: 600px;
    max-height: 870px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
  }
  #sean_pic {
    height: 620px;
    left: 7px;
  }
  #thomas_pic {
    height: 620px;
    right: 7px;
  }
}

@media (min-width: 1200px) {
  #sean_and_thomas_logo {
    height: 270px;
    margin-top: 95px;
  }
  #sean_pic {
    left: 13px;
  }
  #thomas_pic {
    right: 13px;
  }
}

/* ================================== */

/* ========= TAGLINE SECTION ======== */

/* ================================== */

.tagline {
  height: 230px;
  display: flex;
  align-items: center;
  background-color: #B50A0A;
}

.tagline h2 {
  color: #FFFFFF;
  width: 90%;
  margin: 0 auto;
}

/* Larger than mobile */

@media (min-width: 400px) {
  .tagline {
    height: 300px;
  }
  .tagline h2 {
    max-width: 900px;
  }
}

/* ================================== */

/* ========= PROJECT SECTION ======== */

/* ================================== */

.project {
  width: 92%;
  margin: 20px auto 20px;
  display: inline-block;
}

.project h4 {
  margin-bottom: 4px;
}

.arrow {
  width: 21px;
  height: 9px;
  margin: 15px auto 0;
}

.project>div {
  width: 100%;
  height: calc(67vw);
  background-size: cover;
  margin-bottom: 20px;
}

.project #proj_hacksmith {
  background-image: url('img/hacksmith_labs_preview.png');
}

.project #proj_winewed {
  background-image: url('img/wine_wednesday_preview.png');
  background-position: 0px 50%;
}

.project #proj_meowmeow {
  background-image: url('img/meow_meow_facts_preview.png');
}

.project #proj_untold {
  background-image: url('img/untold_yoga_preview.png');
  background-position: 0px 15%;
}

/* Larger than mobile */

@media (min-width: 600px) {
  .project_collection {
    width: 100%;
    max-width: 1200px;
    display: flex;
    flex-flow: row wrap;
    margin: 0 auto;
    padding-top: 70px;
  }
  .project:nth-child(odd) {
    width: 56%;
  }
  .project:nth-child(even) {
    width: 40%;
  }
  .project #proj_meowmeow,
  .project #proj_hacksmith {
    height: calc(37vw);
    max-height: 470px;
  }
  .project #proj_untold,
  .project #proj_winewed {
    height: calc(37vw);
    max-height: 470px;
  }
}

/* ================================== */

/* ====== STAY IN TOUCH SECTION ===== */

/* ================================== */

.stay_in_touch {
  margin-top: 40px;
  padding: 45px 20px 30px;
  background-color: #000000;
}

.stay_in_touch h2,
.stay_in_touch h3 {
  color: #FFFFFF;
  display: block;
}

.stay_in_touch h3 {
  margin: 15px auto;
}

.stay_in_touch input[type=email] {
  width: 100%;
  height: 50px;
  border: solid 1px #FFFFFF;
  background: #000000;
  color: #FFFFFF;
  text-indent: 15px;
}

.stay_in_touch input[type=submit] {
  width: 100px;
  height: 40px;
  margin: 20px auto 0;
  border: none;
  border-radius: 30px;
  background-color: #FFFFFF;
  font-family: 'Barlow', sans-serif;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
}

/* Larger than mobile */

@media (min-width: 400px) {
  .stay_in_touch {
    margin-top: 40px;
    padding: 85px 20px;
  }
  .stay_in_touch h3 {
    width: 40%;
    min-width: 300px;
    max-width: 450px;
    margin: 10px auto 20px;
  }
  .stay_in_touch input[type=email] {
    width: 40%;
    display: block;
    margin: 0 auto;
    min-width: 300px;
    max-width: 390px;
  }
}

/* ================================== */

/* ======= COMING SOON SECTION ====== */

/* ================================== */

.coming_soon_collection {
  padding: 70px 15px 50px;
}

.coming_soon_collection h1 {
  margin-bottom: 30px;
}

.coming_soon_project {
  margin-bottom: 20px;
  padding: 45px 35px;
  border: solid 8px #000000;
}

/* Larger than mobile */

@media (min-width: 400px) {
  .coming_soon_collection {
    width: 100%;
    max-width: 1200px;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    margin: 0 auto;
    padding: 70px 0px 140px;
  }
  .coming_soon_collection h1 {
    width: 100%
  }
  .coming_soon_project {
    width: calc(32% - 24px);
    margin-bottom: 0px;
    padding: 110px 9%;
  }
}

/* ================================== */

/* ======= DAILY DOSE SECTION ======= */

/* ================================== */

.daily_dose {
  padding: 60px 20px 50px;
  background: #F2F2F2;
}

.daily_dose h2 {
  display: inline-block;
  margin-top: 5px;
  color: #B50A0A;
  border-bottom: 2px #B50A0A solid;
}

#instafeed {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  margin: 30px auto 0;
}

#instafeed img {
  width: calc((100vw - 40px)/2 - 5px);
  margin-bottom: 10px;
}

/* Larger than mobile */

@media (min-width: 400px) {
  .daily_dose {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 90px 0;
  }
  #instafeed {
    padding: 45px 100px 0;
  }
  #instafeed>a {
    flex: 1 1 calc(100% / 6);
    margin: 0px calc(100px / 12);
  }
  #instafeed>a:last-child {
    display: none;
  }
  #instafeed img {
    width: 100%;
    margin-bottom: 0px;
  }
}

/* ================================== */

/* ======= WHO WE ARE SECTION ======= */

/* ================================== */

.who_we_are {
  padding: 60px 15px;
}

.who_we_are img {
  width: 100%;
  margin-top: 15px;
}

@media (min-width: 400px) {
  .who_we_are {
    width: 60%;
    min-width: 300px;
    margin: 0 auto;
    padding: 60px 15px;
  }
}

/* Larger than mobile */

@media (min-width: 1000px) {
  .who_we_are {
    width: 100%;
    max-width: 1200px;
    display: flex;
    align-items: center;
    margin: 0 auto;
    padding: 125px 0;
  }
  .who_we_are_text {
    margin-top: -2%;
    flex: 1;
  }
  .who_we_are p {
    width: 65%;
    max-width: 375px;
    margin: 18px auto 0;
  }
  .who_we_are img {
    width: 50%;
    margin-top: 0;
    flex: 1;
  }
}

/* ================================== */

/* ========== FOOTER STUFF ========== */

/* ================================== */

footer .email {
  padding: 55px 0;
  background: #B50A0A;
}

footer .email h2 {
  color: #FFFFFF;
}

footer .instagram {
  padding: 55px 0;
  background: #F2F2F2;
}

footer .bottom {
  width: 100%;
  padding: 80px 0 60px;
  background: #000000;
}

footer .bottom p {
  margin-top: 20px;
  color: #FFFFFF;
}

@media (min-width: 400px) {
  footer {
    display: flex;
    flex-wrap: wrap;
  }
  footer .email,
  footer .instagram {
    width: 50%;
  }
}

@media (min-width: 1000px) {
  footer .email,
  footer .instagram {
    padding: 100px 0;
  }
}