/* ------ Fonts ------ */

@font-face {
  font-family: 'univers_lt_std55_roman';
  src: local('UniversLTStd'),
       url('../fonts/universltstd.otf') format('opentype'),
       url('../fonts/universltstd.woff2') format('woff2'),
       url('../fonts/universltstd.woff') format('woff'),
       url('../fonts/universltstd.svg') format('svg'),
       url('../fonts/universltstd.ttf') format('truetype'),
       url('../fonts/universltstd.eot') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'univers_lt_std45_light';
  src: local('UniversLTStd-Light'),
       url('../fonts/universltstd-light.otf') format('opentype'),
       url('../fonts/universltstd-light.woff2') format('woff2'),
       url('../fonts/universltstd-light.woff') format('woff'),
       url('../fonts/universltstd-light.svg') format('svg'),
       url('../fonts/universltstd-light.ttf') format('truetype'),
       url('../fonts/universltstd-light.eot') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'neutraface_2_text_book';
  src: local('Neutra2Text-Book'),
       url('../fonts/neutraface2text-book.otf') format('opentype'),
       url('../fonts/neutraface2text-book.woff2') format('woff2'),
       url('../fonts/neutraface2text-book.woff') format('woff'),
       url('../fonts/neutraface2text-book.svg') format('svg'),
       url('../fonts/neutraface2text-book.ttf') format('truetype'),
       url('../fonts/neutraface2text-book.eot') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}



/* ------ Base Styles ------ */

html {
  background-color: #fff;
  color: #000;
}

body {
  margin: 2.25% 3% 3% 3%;
  font-family: 'univers_lt_std45_light', Helvetica, Arial, sans-serif;
  font-size: 1rem;
}

::-moz-selection {
  background: #eee;
  text-shadow: none; /* Remove text-shadow in selection highlight */
}

::selection {
  background: #eee;
  text-shadow: none; /* Remove text-shadow in selection highlight */
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle; /* Remove the gap between audio, canvas, iframes, images, videos and the bottom of their containers */
  width: 100%;
}

fieldset { /* Remove default fieldset styles */
  border: 0;
  margin: 0;
  padding: 0;
}

textarea { /* Allow only vertical resizing of textareas */
  resize: vertical;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  display: inline;
}

h1 {
  font-family: 'univers_lt_std55_roman', Helvetica, Arial, sans-serif;
  font-size: 1.15rem;
  line-height: 1;
  font-weight: normal;
  font-style: normal;
}

h2 {
  font-family: 'univers_lt_std45_light', Helvetica, Arial, sans-serif;
  font-size: 2.35rem;
  line-height: 1.3;
  font-weight: normal;
  font-style: normal;
}

h3 {
  font-family: 'neutraface_2_text_book', Helvetica, Arial, sans-serif;
  font-size: 4rem;
  line-height: 1;
  font-weight: normal;
  font-style: normal;
}

a,
a:hover,
a:visited {
  text-decoration: none;
  color: #000;
}

ul {
  margin: 0;
  padding: 0;
}

ul > li {
  list-style-type: none;
}

li {
  padding-top: .25rem;
}

.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}

.clearfix::after {
  clear: both;
}



/* ------ Laptop Design ------ */

#intro {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  align-items: start;
  margin-bottom: -1.5%;
}

#intro > div {
  display: flex;
  flex-wrap: wrap;
}

#wordmark {
  flex: 100%;
}

#info {
  margin-top: 3.5%;
  flex: 100%;
}

#name {
  flex: 25%;
}

#description {
  flex: 75%;
  text-align: right;
}

#description h2 {
  position: relative;
  bottom: 7px;
}



.rowt {
  display: flex;
  align-items: start;
  margin-top: 3%;
}

.rowb {
  display: flex;
  align-items: end;
  margin-top: 3%;
}

.rowc {
  display: flex;
  flex-wrap: wrap;
  margin-top: 3%;
}

#sprite1 {
  flex: 69%;
}

#sprite2 {
  flex: 31%;
  padding-left: 3%;
}

#sprite3 {
  flex: 50%;
  padding: 0px 3% 0px 15%;
}

#sprite4 {
  flex: 50%;
}

#samsung1 {
  flex: 77%;
}

#samsung2 {
  flex: 20%;
  padding-left: 3%;
  align-self: end;
}

#samsung3 {
  flex: 42%;
  padding-right: 3%;
  margin-top: 3%;
}

#samsung4 {
  flex: 55%;
  margin-top: 3%;
}

#disney1 {
  flex: 79%;
}

#disney2 {
  flex: 21%;
  padding-left: 3%;
}

#disney3 {
  flex: 52%;
  padding: 0px 3% 0px 6%;
}

#disney4 {
  flex: 48%;
}

#reebokcol1 {
  flex: 41%;
  padding-right: 3%;
}

#reebokcol2 {
  flex: 56%;
}

#reebok2 {
  padding-top: 3%;
}

#reebok3 {
  padding: 16% 10%;
}

#lumens1 {
  flex: 73%;
}

#lumens2 {
  flex: 27%;
  padding: 0px 3%;
}

#lumens4 {
  flex: 36%;
}

#lumens5 {
  flex: 64%;
  padding-left: 3%;
}



footer {
  margin-top: 3%;
  font-size: 1.1rem;
  line-height: 1.3;
  display: flex;
  flex-wrap: wrap;
}

footer > div {
  display: flex;
  flex-wrap: wrap;
}

#contact {
  flex: 100%;
  align-items: baseline;
}

#formore {
  flex: 60%;
}

#email {
  flex: 40%;
  text-align: right;
}

#links {
  flex: 100%;
  align-items: end;
  margin-top: 5%;
}

#logo {
  flex: 33.3%;
}

#logo img {
  width: 195px;
}

#copyright {
  flex: 33.3%;
  text-align: center;
}

#network {
  flex: 33.3%;
  text-align: right;
}



/* ------ Breaks ------ */

@media only screen and (min-width: 1800px) {
  header br {
    display: none;
  }

  #intro {
    margin-bottom: -1%;
  }

  #info {
    margin-top: 2.25%;
  }

  h1 {
    font-size: 1.01vw;
  }

  h2 {
    font-size: 1.84vw;
    line-height: 1;
  }

  h3 {
    font-size: 3.5vw;
  }

  #description h2 {
    bottom: 0px;
  }

  footer {
    font-size: .96vw;
  }

  #logo img {
    width: 35%;
  }
}

@media only screen and (min-width: 1070px) and (max-width: 1270px) {
  h1 {
    font-size: 1.39vw;
  }

  h2 {
    font-size: 2.92vw;
    line-height: 1.25;
  }

  h3 {
    font-size: 4.4vw;
  }

  footer {
    font-size: 1.5vw;
  }

  #formore {
    flex: 65%;
  }
  
  #email {
    flex: 35%;
  }

  #logo img {
    width: 45%;
  }
}

@media only screen and (min-width: 700px) and (max-width: 1070px) {
  h1 {
    font-size: 2.19vw;
  }

  h2 {
    font-size: 5.2vw;
    line-height: 1.25;
  }

  h3 {
    font-size: 5.7vw;
  }

  #name {
    flex: 100%;
  }
  
  #description {
    flex: 100%;
    text-align: left;
    margin-top: 19%;
  }
  
  #description h2 {
    bottom: 0px;
  }

  footer {
    font-size: 2.18vw;
    line-height: 1.25;
  }

  #contact {
    align-items: start;
  }

  #formore {
    flex: 49%;
  }
  
  #email {
    flex: 51%;
  }

  #links {
    font-size: 1rem;
  }

  #logo img {
    width: 50%;
  }
}

@media only screen and (max-width: 700px) {
  header br {
    display: none;
  }
  
  h1 {
    font-size: 3.4vw;
  }

  h2 {
    font-size: 6.7vw;
    line-height: 1.25;
  }

  h3 {
    font-size: 12.75vw;
  }
  
  #name {
    flex: 100%;
  }
  
  #description {
    flex: 100%;
    text-align: left;
    margin-top: 25%;
  }
  
  #description h2 {
    bottom: 0px;
  }

  .rowt,
  .rowb,
  .rowc {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    margin: 0px;
  }

  #sprite1,
  #sprite2,
  #sprite3,
  #sprite4,
  #samsung1,
  #samsung2,
  #samsung3,
  #samsung4,
  #disney1,
  #disney2,
  #disney3,
  #disney4,
  #reebok1,
  #reebok2,
  #reebok3,
  #reebok4,
  #lumens1,
  #lumens2,
  #lumens3,
  #lumens4,
  #lumens5 {
    flex: 100%;
    padding: 0px;
    margin-top: 3%;
  }

  #sprite3 {
    order: 2;
  }

  #sprite4 {
    order: 1;
  }

  #samsung3 {
    order: 1;
  }

  #samsung1 {
    order: 2;
  }

  #samsung2 {
    order: 3;
  }

  #samsung4 {
    order: 4;
  }

  #reebokcol1,
  #reebokcol2 {
    flex: 100%;
    padding: 0px;
  }

  footer {
    font-size: 4.2vw;
    line-height: 1.25;
  }

  #formore {
    flex: 100%;
  }
  
  #email {
    flex: 100%;
    text-align: left;
    margin: 3% 0 0 -1%;
  }

  #links {
    margin-top: 10%;
  }

  #logo img {
    width: 60%;
  }
}