body, html {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Barlow', sans-serif;
  background-color: #FFC200;

}

h1 {
  color: black;
  font-size: 70px;
  float: right;
  padding-right: 90px;
}

p {
  line-height: 1.5;
  font-size: 17px;
}


#first {
  float: left;
  width: 500px;
  padding-left: 21%;
  margin-bottom: 90px;
  text-align: justify;

}

#second{
  float: right;
  width: 500px;
  margin-bottom: 90px;
   text-align: justify;
   padding-right: 8%;
}

img {
  width: 100%;
}

@media (max-width: 1416px) {
  #first {
    margin-bottom: 0;
  }
  #second {
    float: left;
    padding-right: 0;
    padding-left: 21%;
  }
 } 



#main {
  padding-top: 200px;
  padding-left: 21%;
  padding-right: 0;
  margin: 0;
  width: 75%;


}

  .button_container {
        border: 1px solid #ddd;
        margin: 0 10px 10px 0;
        padding: 20px;
        width: 250px;
        height: 250px;
        float: left;
        overflow: hidden;
        box-sizing: border-box;
        text-align: center;
      }

      .button_container a {
         width: 200px;
         height: 200px;
         display: block;
      }

      a#btn_nostalgia {
       background-image: url(http://i.imgur.com/wSpCFUQ.jpg);
       background-size: cover;
      }
      

      a#btn_nostalgia:hover {
        background-image: url(nostalgia_b.png);

      }

        a#btn_orange {
        background-image: url(https://images-na.ssl-images-amazon.com/images/I/31DdDRktRcL._SS500.jpg);
        background-size: cover;
      }

      a#btn_orange:hover {
        background-image: url(orange_b.png);
      }

      a#btn_blonde {
        background-image: url(https://images.complex.com/complex/images/c_scale,w_1100/fl_lossy,pg_1,q_auto/d5u4l7licrjurkufxuo1/blonde-big);
        background-size: cover;
      }
      

      a#btn_blonde:hover {
        background-image: url(blonde_b.png);
      }

       a#btn_lonny {
         background-image: url(https://s-media-cache-ak0.pinimg.com/originals/1a/90/44/1a904497a2fe8f492a608f08b898dfb0.jpg);
         background-size: cover;
      }
      

      a#btn_lonny:hover {
        background-image: url(lonny_b.png);
      }

       a#btn_provider {
        background-image: url(https://cdn.shopify.com/s/files/1/0847/8186/files/FOprovider2-1_1024x1024.jpg?v=1503886732);
        background-size: cover;
      }
      

      a#btn_provider:hover {
        background-image: url(provider_b.png);
      }

       a#btn_endless {
        background-image: url(https://static1.squarespace.com/static/55a00c92e4b0789ce5f8fedf/592caa28d482e9898c76e178/592caa29c534a5adf897b36c/1496099371345/fc13f72db56b44bba688c1b216e96887.1000x1000x1.jpg);
        background-size: cover;
      }
      

      a#btn_endless:hover {
        background-image: url(endless_b.png);
      }

       a#btn_lens {
        background-image: url(http://cdn.albumoftheyear.org/album/2017/78174-lens.jpg);
        background-size: cover;
      }
      

      a#btn_lens:hover {
        background-image: url(lens_b.png);
      }

      a#btn_biking {
        background-image: url(https://i1.sndcdn.com/artworks-000217030097-td0o8x-t500x500.jpg);
        background-size: cover;
      }
      

      a#btn_biking:hover {
        background-image: url(biking_b.png);

      }

      a#btn_swim {
        background-image: url(https://images.genius.com/8a7f0b830b07d967861df3f03d60e1c4.1000x1000x1.jpg);
        background-size: cover;
      }
      

      a#btn_swim:hover {
        background-image: url(swim_b.png);
      }


      a#btn_novacane {
        background-image: url(https://images.genius.com/b7542d103eb0217c152d7b507ed71d19.1000x1000x1.jpg);
        background-size: cover;
      }
      

      a#btn_novacane:hover {
        background-image: url(novacane_b.png);
      }

      a#btn_you {
       background-image: url(https://images.genius.com/dc39dd864f6a3c818be8ad2ea354dec3.325x325x1.png);
        background-size: cover;
      }
      

      a#btn_you:hover {
        background-image: url(you_b.png);
      }

      a#btn_chanel {
        background-image: url(https://images.complex.com/complex/images/c_fill,g_center,w_1200/fl_lossy,pg_1,q_auto/ajjhzuignqcqew5e8l18/frank-ocean-chanel-cover);
        background-size: cover;
      }
      

      a#btn_chanel:hover {
        background-image: url(chanel_b.png);
      }

/*
      div#test {
        width: 200px;
        height: 200px;
        background-color: #fff;
        background-image: url(https://images.genius.com/dc39dd864f6a3c818be8ad2ea354dec3.325x325x1.png);
        background-size: cover;
        color: green;
        text-indent: -10000px;
        transition: all .0s;
      }

      div#test:hover {
        text-indent: 0;
        background-image: none;
        display: block;
      }
*/

.dropdown {
  float: left;
  overflow: hidden;
   padding-left: 90px;
   padding-top: 60px;

}

.dropdown .dropbtn {
  border: none;
  outline: none;
  color: black;
  background-color: inherit;
  font-size: 50px;

}


.dropdown-content {
  display: none;
  position: absolute;
  min-width: 150px;
  z-index: 100;
}

@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


.dropdown-content a {
  float: none;
  color: black;
  padding: 5px;
  font-weight: 400;
  text-decoration: none;
  display: block;
  text-align: left;
  border-bottom: 2px solid hsla(360, 100%, 100%, 0);
  font-size: 22px;
  animation-name: fadein;
  animation-duration: 2s;
}

.dropdown-content a:hover {
  border-bottom: 2px solid #f1f1f1;
}

.dropdown:hover .dropdown-content {
  display: block;
}