body {
    background-image: url(images/header.jpg);
    background-size: 100%;
    margin: 0;
    padding: 0;
    z-index: 1;
    background-attachment: fixed;
}

nav {
    background: rgba(255,255,255,0.9);
    text-align: center;
    position: fixed;
    color: #5f4b8b;
    top: 0%;
    width: 100%;
    padding: .5%;
    z-index: 5
}

.small_logo {
   width: 2vw;
   margin-top: -1.5vw;
   margin-bottom: -1.5vw;
}

.facebook {
  width: 1vw;
  padding-bottom: .5vw;
}

.markhead {
  width: 30vw;
  padding-top: 10vw;
  padding-bottom: -10vw;2  ;
  margin-left: 35vw
}

i {
  border: solid white;
  border-width: 0 6px 6px 0;
  display: inline-block;
  padding: 6px;
  margin-left: 49.5vw;
  margin-top: 5vw
}

.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

.down:hover {
  transform: scale(1.2) rotate(45deg);
}

a {
    text-decoration: none;
    color: lightgray;
    font-family: futura_light
}

footer {
  background-color:  #5f4b8b;
  color: white;
  padding: 2%;
  display: flex;
  justify-content: center;
  text-decoration: none;
  z-index: 3;
  position: sticky;
  top: 100%;
  font-family: futura_light
}

.footcol1 {
    display: inline-block;
}

.footcol2 {
    display: inline-block;
    padding-left: 20%
}

.footcol3 {
    display: inline-block;
    padding-left: 20%
}

ul {
  list-style-type: none;
  padding: 0;
  font-size: small;
  color:lightgray;
  text-decoration-color: aqua
}

a:hover {
    text-decoration: none;
    color: gray
}

.navlink {
    color: #5f4b8b;
}

nav a {
    padding-left: 5%;
    padding-right: 5%;
}

.whiteboi {
  background-color: white;
  size: 200vh 100vw;
  margin-top: 30vh
}

@font-face{
  font-family: futura_light;
  src: url(fonts/futura_light.ttf)
}

h5 {
  font-family: arial black
}

img {
  width: 50%;
  display: block;
}

h2 {
  font-family: arial black;
  font-size: 1.5vw
}

p {
  font-family: futura_light;
  font-size: 1.2vw
}

@font-face {
  font-family: out;
  src: url(fonts/helvetica_outline.ttf);
}
h1 {
   font-family: out;
   font-size: 10vw
}

.branding{
    text-align: right;
    padding-top: 15vw;
    padding-bottom: 30vw;
}

.brandimg{
  float: right;
  display: inline-block;
}

.brandimg:hover{
  width: 55%;
  margin-bottom: 5vw;
}


.logos {
    padding-top: 30vw;
    color: black
}

.logoimg:hover {
  transform: scale(1.2);
  margin-bottom: 5vw
}

.publications {
    text-align: right;
    padding-top: 16.5vw;
}

.printimg:hover {
  width: 55%;
  margin-bottom: 5vw
}

.posters {
  padding-top: 20vw;
  text-align: right;
  padding-bottom: 30vw

}

.posterimg {
  display: inline-block;
  float: right;
  width: 50vw
}

.posterimg:hover {
  transform: scale(1.2);
  margin-bottom: 5vw
}
.posterhead {
  display: inline-block;
  font-family: arial black;
  font-size: 2vw;
  float: left;
  margin-left: 50vw;
  color: black
}

.postercopy {
  display: inline-block;
  float: left;
  margin-top: -3.7vw;
  color: black;
  margin-left: 62.5vw
}

.aboutsection {
    padding-top: 30vw;
}

.aboutme {
  margin-top: -5vw;
  margin-left: 26vw;
  position: absolute;
}

.contactsection {
  text-align: left;
  padding-top: 20vw;
  padding-bottom: 15vw;
}

.contactimg {
  margin-left: 50vw;
  display: inline-block;
  width: 48.9vw
}

.aboutimg {
  display: inline-block;
  padding-bottom: 2vw
}
.aboutcopy {
  margin-right: 53vw;
  margin-left: 2vw
}

.contact {
  margin-top: -6vw;
  margin-left: 24.5vw;
  position: absolute;
}

.work {
    position: absolute;
    margin: 7.5vw 17vw;
    width: 40vw
}

.brandtext {
  float: left;
  display: inline-block;
  margin-left: 50vw;
  font-family: arial black;
  font-size: 2vw;
  color: black
}

.brandcopy {
  display: inline-block;
  float: left;
  padding-left: 2vw;
  margin-top: 3vw;
  color: black
}

.logohead {
  display: inline-block;
  font-family: arial black;
  font-size: 2vw;
  margin-right: 0vw;
  margin-left: 21vw
}

.logocopy {
  display: inline-block;
  margin-right: 50vw;
  float: right;
  margin-top: 3.01vw
}

.printimg {
  display: inline-block;
  float: right;
}

.printhead {
  display: inline-block;
  font-family: arial black;
  font-size: 2vw;
  margin-left: 50vw;
  float: left;
}

.printcopy {
  display: inline-block;
  margin-left: 50vw;
  float: right;
  margin-top: -3.8vw;
  margin-right: 2vw;
  padding-bottom: 18vw;
}

.liqwoodhead {
  font-family: arial black;
  color: white;
  margin-left: 20vw;
  margin-top: 10vw;
  font-size: 2.5vw
}

.liqwoodbody {
    background-image: url(images/liqwoodhead.jpg);
    margin: 0;
    padding: 0;
    z-index: 1;
    background-attachment: fixed;
}

article {
  margin-left: 20vw;
  margin-right: 20vw;
  padding-top: 10vw;
}

.liqwoodlogo {
  padding-top: 5vw;
  padding-bottom: 5vw
}

.liqwoodaudience {
  float: right;
  padding-top: 15vw;
  display: inline-block;
}

.customersliq {
  padding-top: 35vw;
  padding-bottom: 15vw
}

.liqwoodtypeimg {
  width: 60vw;
  padding-top: 5vw;
  padding-bottom: 10vw
}

.liqwoodtypelist {
  font-family: futura_light;
  color: black;
  font-size: 1.2vw;
  list-style-type: circle;
  padding-left: 1.5vw;
}
 .liqwoodcolors {
    margin-left: 50vw
 }

 .liqwoodblack {
  width: 20vw;
  height: 10vw;
  display: inline-block;
  margin-top: -10vw;
  padding-bottom: 15vw
 }

 .liqwoodpurple {
  width: 20vw;
  height: 10vw;
  display: inline-block;
  margin-top: -10vw;
  padding-bottom: 15vw
 }

 .boardgraphics {
  text-align: right;
  margin-left: 10vw
 }

 .sap {
  height: 40vw;
  width: auto;
  display: inline-block;
  padding-top: 5vw;
  padding-right: 5vw;
  padding-bottom: 5vw
 }

 .fatsap {
    height: 40vw;
    width: auto;
    display: inline-block;
    padding-top: 5vw;
    padding-right: 4vw;
    padding-bottom: 5vw  
 }

 .bee {
    height: 40vw;
    width: auto;;
    display: inline-block;
    padding-top: 5vw;
    padding-right: 4vw;
    padding-bottom: 5vw
 }

 .outlaw {
    height: 40vw;
    width: auto;
    display: inline-block;
    padding-top: 5vw;
    padding-bottom: 5vw
 }

.outlawclose {
  width: 28vw;
  height: auto;
  display: inline-block;
  padding-top: 5vw
}

.sapclose {
  width: 28vw;
  height: auto;
  display: inline-block;
  padding-top: 5vw
}

.fatsapclose {
  width: 28vw;
  height: auto;
  display: inline-block;
  padding-top: 5vw
}

.beeclose {
  width: 28vw;
  height: auto;
  display: inline-block;
  padding-top: 5vw
}

.sapboards {
  padding-top: 5vw;
  width: 30vw;
  height: auto;
  padding-left: 15vw;
  padding-bottom: 15vw
}

.sticker1 {
  display: inline-block;
  width: 28vw
}

.sticker2 {
  display: inline-block;
}

.sticker3 {
  display: inline-block;
  width: 28vw;
}

.sticker4 {
  display: inline-block;
  width: 28vw
}

.website {
  padding-top: 5vw;
  width: 60vw;
  padding-bottom: 15vw
}

.og {
  padding-top: 5vw;
  padding-left: 15vw
}

.oglogo {
  width: 20vw;
  padding-left: 20vw
}

.liqwooddrafts {
  padding-top: 5vw;
}

.liqdraft {
  width: 60vw
}

.liqfinal {
  padding-top: 10vw
}

.liqwoodfinal {
  width: 60vw;
  padding-bottom: 15vw
}

.whiteboiliq {
  background-color: white;
  size: 200vh 100vw;
  margin-top: 30vh;
  padding: 0;
}

.liqfooter {
  background-color:  #5f4b8b;
  color: white;
  padding: 2%;
  display: flex;
  justify-content: center;
  text-decoration: none;
  z-index: 3;
  position: sticky;
  top: 100%;
  font-family: futura_light;
}

.arrowrighthead {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  position: absolute;
  margin-left: 94vw;
  margin-top: -3.9vw 
}

.arrowlefthead {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  position: absolute;
  margin-left: 6vw;
  margin-top: -3.9vw
}

.arrowrighthead:hover {
  transform: scale(1.2) rotate(-45deg);
}

.arrowlefthead:hover {
  transform: scale(1.2) rotate(135deg);
}

.arrowright {
  border: solid black;
  border-width: 0 6px 6px 0;
  display: inline-block;
  padding: 6px;
  transform: rotate(-45deg);
  margin-top: -8vw;
  position: absolute;
  margin-left: 59vw;
}

.arrowleft {
  border: solid black;
  border-width: 0 6px 6px 0;
  display: inline-block;
  padding: 6px;
  transform: rotate(135deg);
  margin-top: -8vw;
  position: absolute;
  margin-left: 0vw;
}

.homelink {
  position: absolute;
  font-family: arial black;
  color: black;
  z-index: 5;
  margin-top: -8vw;
  margin-left: 28.5vw;
}

.homelink:hover {
  transform: scale(1.2);
  color: black
}

.arrowright:hover {
  transform: rotate(-45deg) scale(1.2);
}

.arrowleft:hover {
  transform: rotate(135deg) scale(1.2);
}

.marsbody {
    background-image: url(images/billboard.jpg);
    margin: 0;
    padding: 0;
    z-index: 1;
    background-attachment: fixed;
}

.marshead {
  font-family: arial black;
  color: black;
  margin-left: 20vw;
  margin-top: 10vw;
  font-size: 2.5vw
}

.customersmars {
  padding-top: 13.2vw;
  padding-bottom: 15vw
}

.marsaudience {
  float: right;
  padding-top: 15vw;
  display: inline-block;
  padding-left: 1vw
}

 .marscolors {
    margin-left: 30vw
 }

 .marsdrafts {
  padding-top: 5vw
 }

 .marslogodraft{
  height: 20vw;
  width: auto;
  margin-left: 2vw;
  display: inline-block;
 }

 .torch1 {
  height: 15vw;
  width: auto;
  display: inline-block;
  padding-left: 10vw;
}

 .torch2 {
  height: 15vw;
  width: auto;
  display: inline-block;
  padding-right: 10vw;
  transform: rotate(180deg);
}

.marsfinal {
  width: 30vw;
  margin-left: 15vw;
  padding-bottom: 15vw
}

.marsfinal1 {
  margin-left: 10vw;
  padding-top: 5vw;
}

.marsposters{
  padding-left: 12vw
}

.exposter{
  width: 17vw;
  padding-left: 2.1vw;
  display: inline-block;
  padding-top: 5vw;
  padding-bottom: 5vw;
}

.roverbig{
  width: 60vw;
  padding-bottom: 15vw
}

.banner1 {
  width: 17vw;
  padding-left: 2.1vw;
  display: inline-block;
  padding-top: 5vw;
}

.bannercopy {
  margin-right: 15vw
}

.ticket1 {
  width: 15vw;
  margin-left: 10vw;
  padding-top: 5vw;
  display: inline-block;
}

.ticket2 {
  width: 15vw;
  margin-left: 5vw;
  display: inline-block;
  padding-top: 5vw
}

.tickets {
  width: 30vw;
  margin-left: 12vw;
  margin-top: 5vw;
  border: 1px solid black
}

.ticketmock {
  width: 60vw;
  margin-top: 5vw;
  padding-bottom: 15vw
}

.ticketmock1 {
  width: 60vw;
  margin-top: 5vw;
  padding-bottom: 5vw
}

.arrowrightheadblack {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  position: absolute;
  margin-left: 94vw;
  margin-top: -3.9vw;
  border: solid black;
  border-width: 0 6px 6px 0;
}

.arrowleftheadblack {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  position: absolute;
  margin-left: 6vw;
  margin-top: -3.9vw;
  border: solid black;
  border-width: 0 6px 6px 0;
}

.arrowrightheadblack:hover {
  transform: scale(1.2) rotate(-45deg);
}

.arrowleftheadblack:hover {
  transform: scale(1.2) rotate(135deg);
}

.treebody {
    background-image: url(images/treebody.jpg);
    margin: 0;
    padding: 0;
    z-index: 1;
    background-attachment: fixed;
}

.treeaudience {
  float: left;
  padding-top: 0vw;
  display: inline-block;
  padding-left: 1vw;
  width: 20vw
}

.treelogo1 {
  padding-top: 5vw
}

.brandcircles {
  float: right;
  padding-top: 18vw;
  display: inline-block;
  padding-left: 1vw;
  width: 25vw
}

.adventure {
  padding-left: 12.9vw;
  padding-top: 3.2vw;
  width: 25vw;
  padding-bottom: 15vw
}

.treetype1 {
  display: inline-block;
  width: 25vw;
  padding-top: -3vw;
  padding-bottom: 5vw
}

.treetypecopy {
  padding-bottom: 2vw
}

.treetype2 {
  display: inline-block;
  width: 33vw;
  padding-bottom: 5vw
}

.treetypecopy2 {
  padding-bottom: 5vw
}

.treecolors {
    margin-left: 25vw;
    padding-top: 5vw
 }

 .sketch1 {
  width: 10vw;
  padding-left: 7.5vw;
  display: inline-block;
  padding-bottom: 5vw
 }

 .treefinal {
  width: 40vw;
  margin-left: 10vw;
  padding-bottom: 15vw
}

.treelogocopy {
  margin-right: 10vw
}

.brandguide {
  padding-top: 5vw;
  width: 60vw
}

.brandguide1 {
  padding-top: 5vw;
  width: 60vw;
  padding-bottom: 15vw
}

.uncobody {
    background-image: url(images/unco.jpg);
    margin: 0;
    padding: 0;
    z-index: 1;
    background-attachment: fixed;
}

.laptop {
  width: 50vw;
  padding-top: 5vw
}

.window {
  width: 50vw;
  padding-top: 10vw;
  margin-left: 10vw;
  margin-bottom: 5vw
}

.table {
  width: 50vw;
  margin-left: 10vw;
  padding-bottom: 15vw
}

.boujeelogo {
  padding-top: 5vw;
  width: 30vw;
  margin-left: 15vw
}

.boujeelogo2 {
  width: 30vw;
  padding-top: 10vw;
  margin-left: 15vw
}

.boujeelogo3 {
  width: 30vw;
  padding-top: 5vw;
  margin-left: 15vw
}

.boujeehelmet {
  width: 40vw;
  padding-top: 10vw;

}
.boujeehelmet2 {
  width: 40vw;
  padding-bottom: 15vw;
  padding-left: 20vw;
  padding-top: 5vw
}

.humdrumprocess {
  padding-top: 5vw;
  margin-left: 5vw
}

.humdrumdrafts {
  padding-top: 2vw;
  width: 40vw;
  margin-left: 10vw
}

.humdrumlogo {
  width: 60vw;
  padding-top: 15vw
}

.humdrumgif {
  width: 40vw;
  padding-top: 10vw;
  margin-left: 10vw;
  padding-bottom: 15vw
}

.downhill {
  display: inline-block;
  width: 10vw
}

.call2 {
  display: inline-block;
  width: 10vw;
  padding-left: 8.3vw;
}

.call2:hover {
  display: inline-block;
  width: 10vw;
  padding-left: 8.3vw;
  transform: scale(1.2);
}

.liqlogo {
  display: inline-block;
  width: 20vw;
  position: relative;
  top: -1vw;
  padding-left: 10vw
}

.liqlogo:hover {
  display: inline-block;
  width: 20vw;
  position: relative;
  top: -1vw;
  padding-left: 8vw;
  transform: scale(1.2);
  padding-right: 2vw
}

.univ101 {
  display: inline-block;
  width: 15vw;
  padding-top: 10vw
}

.imfirst {
  display: inline-block;
  width: 10vw;
  padding-left: 10vw
}

.jc{
  display: inline-block;
  width: 10vw;
  padding-left: 13.3vw
}

.jc:hover{
  display: inline-block;
  width: 10vw;
  padding-left: 13.3vw;
  transform: scale(1.2);
}

.rare {
  display: inline-block;
  width: 10vw;
  padding-top: 10vw
}

.rare:hover {
  display: inline-block;
  width: 10vw;
  padding-top: 10vw;
  transform: scale(1.2);
}

.call1 {
  display: inline-block;
  width: 10vw;
  padding-left: 15vw
}

.call1:hover {
  display: inline-block;
  width: 10vw;
  padding-left: 15vw;
  transform: scale(1.2);
}

.fleur {
  display: inline-block;
  width: 10vw;
  padding-left: 13.3vw;
}

.hdblk {
  display: inline-block;
  width: 20vw;
  padding-top: 10vw;
  padding-bottom: 2vw
}

.marsblk {
  display: inline-block;
  width: 10vw;
  padding-left: 5vw
}

.treeblk {
  display: inline-block;
  width: 10vw;
  padding-left: 13.3vw;
  padding-bottom: 2vw
}

.boi {
  padding-bottom: 15vw
}

.ffbody {
    background-image: url(images/print_header.jpg);
    margin: 0;
    padding: 0;
    z-index: 1;
    background-attachment: fixed;
}

.ff {
  width: 19vw;
  display: inline-block;
  padding-top: 5vw;
}

.ffbig {
  width: 60vw;
  padding-top: 5vw;
  padding-bottom: 15vw
}

.ff1 {
  width: 19vw;
  padding-left: 1.3vw;
  display: inline-block;
  padding-top: 5vw;
}

.odebody {
    background-image: url(images/odebig.jpg);
    margin: 0;
    padding: 0;
    z-index: 1;
    background-attachment: fixed;
}

.ode1 {
  display: inline-block;
  width: 25vw;
  padding-right: 8vw;
  padding-bottom: 8vw;
  padding-top: 2vw
}

.ode2 {
  display: inline-block;
  width: 25vw;
  padding-right: 0vw;
  padding-bottom: 8vw;
  padding-top: 2vw
}

.ode3 {
  display: inline-block;
  width: 25vw;
  padding-right: 8vw;
  padding-bottom: 8vw
}

.ode4 {
  display: inline-block;
  width: 25vw;
  padding-right: 0vw;
  padding-bottom: 8vw
}

.odebig {
  width: 60vw;
  padding-bottom: 15vw
}

.starbody {
    background-image: url(images/starmock.jpg);
    margin: 0;
    padding: 0;
    z-index: 1;
    background-attachment: fixed;
}

.star1 {
  display: inline-block;
  width: 29vw;
  padding-bottom: 5vw;
  padding-top: 5vw;
  margin-left: .5vw
}

.star2 {
  display: inline-block;
  width: 29vw;
  padding-bottom: 5vw;
  padding-top: 5vw
}

.star3 {
  width: 60vw;
  padding-bottom: 15vw
}

.posterbody {
    background-image: url(images/poster_mock.jpg);
    margin: 0;
    padding: 0;
    z-index: 1;
    background-attachment: fixed;
}

.dance{
  border: 1px solid black;
  margin-top: 10vw;
  display: inline-block;
  margin-bottom: 15vw
}

.drowsy{
  border: 1px solid black;
  display: inline-block;
  float: right;
  margin-bottom: 15vw;
}

.drowsy2{
  border: 1px solid black;
  float: right;
  width: 20vw;
  margin-bottom: 2vw;
  margin-left: 2vw
}

.drowsy3{
  border: 1px solid black;
  float: right;
  width: 20vw;
  margin-left: 2vw;
  margin-bottom: 2vw
}

.springdance{
  border: 1px solid black;
  display: inline-block;
}

.typedance {
  display: inline-block;
  width: 28vw;
  padding-left: 2vw;
  margin-top: 10vw;
  position: absolute;
}

.drowsytext {
  display: inline-block;
  width: 25vw;
  padding-left: 2vw;
  position: absolute;
  margin-top: 69vw;
  margin-left: -30vw;
  text-align: right;
}

.chap {
  width: 26vw;
}

.springtext {
  width: 27vw;
  display: inline-block;
  padding-left: 2vw;
  position: absolute;
  margin-top: 2vw
}

.aboutyo {
  color: black
}

.aboutyo:hover {
  color: black
}

/* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
  width: 40vw; /* Full width */
  padding: 12px; /* Some padding */  
  border: 1px solid #ccc; /* Gray border */
  border-radius: 4px; /* Rounded borders */
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  margin-top: 0.5vw; /* Add a top margin */
  margin-bottom: 1vw; /* Bottom margin */
  resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

/* Style the submit button with a specific background color etc */
input[type=submit] {
  background-color: black;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
  background-color: #5f4b8b;
}

/* Add a background color and some padding around the form */
.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
  width: 40vw;
  margin-left: 53.5vw;
  opacity: .8;
  position: relative;
  margin-top: -29vw;
  height: 24vw
}

#contact:hover {
  color: black
}

#contact {
  color: black
}