@import url("https://fonts.googleapis.com/css?family=Anton|Rubik:400,500,700,900");
.brand-image {
  position: absolute;
  top: 0;
  left: 0;
  padding-left: 25px;
  padding-top: 10px;
  height: 50px;
  width: 50px; }

.brand-image img {
  height: inherit;
  width: inherit; }

#menubar-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  margin-right: 25px;
  padding-top: 10px;
  color: white;
  font-size: 20px; }

#menu {
  cursor: pointer;
  font-size: 24px; }

#navbar-wrapper {
  width: 30%;
  background: black;
  color: white;
  font-size: 18px;
  letter-spacing: 2px;
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  transform: translateX(100%);
  transition: 0.1s ease-out;
  font-family: "Anton", sans-serif; }

#navbar-wrapper header ul li {
  display: block;
  margin: 30px 25px 20px 0px;
  cursor: pointer; }

#navbar-wrapper.open {
  transform: translateX(0);
  transition: ease-in 0.3s; }

#close {
  cursor: pointer;
  font-size: 20px; }

a:visited {
  color: white;
  text-decoration: none; }

a:link {
  color: white;
  text-decoration: none; }

a:hover {
  opacity: 0.4;
  transition: ease-in 0.3s; }

a:active {
  color: white; }

html body {
  font-family: 'Rubik', sans-serif;
  padding: 0;
  margin: 0; }

.underline{
  text-decoration:underline;
}
.bold{
  font-weight:900;
}
/*

  MUSIC PAGE STYLES

*/
.music-section-wrapper {
  height: 70vh;
  width: 100%;
  background: url(images/music.jpg) center center no-repeat;
  background-size: cover; }

.section-text {
  height: 70vh;
  background: rgba(0, 0, 0, 0.6); }

.section-title {
  margin: 0;
  color: white;
  letter-spacing: 25px;
  font-size: 40px;
  text-align: center;
  font-family: "Anton", sans-serif; }

.article-wrapper {
  width: 100%; }

#music-wrapper {
  height: 700px;
  color: white;
  display: flex;
  background: black;
  align-items: center; 
  max-width: 100%;}

#music-wrapper .article-text {
  width: 50%;
  background: black; }

#music-wrapper .article-text:first-child {
  letter-spacing: 2px;
  line-height: 1.5;
  text-align: justify; }

#music-wrapper .article-text p {
  max-width: 75%;
  margin: 0px auto auto auto; }

#music-wrapper .article-text .button {
  border: solid 1px white;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-top: 15px;
  letter-spacing: 2px; }

#music-wrapper .article-text .button:hover {
  background: white;
  cursor: pointer;
  color: black;
  transition: ease-in 0.3s; }

#music-wrapper .article-text:nth-child(2) {
  width: 50%; }

#music-wrapper .article-text:nth-child(2) img {
  height:700px;
  width:100%; }

/*

  VIDEOGRAPHY PAGE STYLES

*/
.videography-section-wrapper {
  height: 70vh;
  width: 100%;
  background: url(images/video.jpg) center center no-repeat;
  background-size: cover; }

#videography-wrapper {
  background: black;
  color: white;
  padding-bottom: 5%; }

#videography-wrapper .article-text {
  max-width: 70%;
  height: auto;
  margin: auto;
  padding-top: 5%;
  padding-bottom: 5%;
  text-align: center;
  line-height: 1.5;
  letter-spacing: 1px;
  font-size:20px;
  font-family: "Rubik", sans-serif; }

#videography-wrapper #video {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 25px;
  height: 0;
  max-width: 80%;
  margin: auto; }

#videography-wrapper #video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }
/*

  EDUCATION PAGE STYLES 

*/
.education-section-wrapper {
  height: 70vh;
  width: 100%;
  background: url(images/education.jpg) center center no-repeat;
  background-size: cover; }

#education-wrapper {
  background: black;
  color: white;
  padding-bottom: 5%;
  width: 100%;
  height:auto; }

#education-wrapper .article-text{
  max-width:60%;
  margin:auto;
  text-align: center;
}
#education-wrapper .article-text i{
  font-size: 32px;
  margin-bottom: 20px;
  margin-top: 20px;
  border: solid 5px white;
  border-radius: 50%;
  padding: 25px;
}
#education-wrapper .article-text #lightbulb{
  padding: 23px 30px 23px 30px;
}
#education-wrapper .article-text p{
  margin-top:0px;
  margin-bottom: 0px;
  line-height: 1.5;
  font-size:18px;
  padding-bottom: 25px;
  letter-spacing: 1px;
}
#education-wrapper .article-text .abstract-title{
  border-top:solid 3px;
  padding-top: 25px;  
  font-size:24px;
}
#arrow_one, #arrow_two{
  border: none !important;
  cursor: pointer;
  font-size:24px;
}
.abstract{

}
.hide{
  display: none;
}
/*

  PHOTOGRAPHY PAGE STYLES

*/
.photography-section-wrapper{
  height: 70vh;
  width: 100%;
  background: url(images/photography.jpg) center center no-repeat;
  background-size: cover; }

#photography-wrapper{
  background: black;
  color: white;
  padding-bottom: 5%;
  width: 100%;
  height:auto; }

#photography-wrapper .article-text{
  max-width:60%;
  margin:auto;
  text-align: center;}

#photography-wrapper .article-text p{
  margin-top:0px;
  margin-bottom: 0px;
  line-height: 1.5;
  font-size:18px;
  padding-bottom: 25px;
  padding-top: 25px;
  letter-spacing: 1px;


}
/*

    PORTFOLIO STYLES

*/
.portfolio-wrapper{
  padding-top: 5%;
  width: 100%;
  height: auto;
  text-align: center;
}
.portfolio-wrapper #dividers{
  display: inline-block;
  letter-spacing: 2px;
  font-size: 20px;
}
.portfolio-wrapper .button{
  color: black;
  display: inline-block;
  text-align: center;
  font-size: 20px;
  margin-bottom: 3%;
  cursor: pointer;
  letter-spacing: 2px;
}
.portfolio-wrapper .active{
  text-decoration: underline;
}
.flexbox-row{
  max-width: 75%;
  display: flex;
  height:45vh;
  margin: auto;
  justify-content: space-around;
  padding-bottom: 5%;
}
.flexbox-row a{
  width:23%;
}
.flexbox-row img{
  width: 100%;
  height:100%;
  object-fit: cover;

}



/*

  FOOTER STYLES

*/
#contact-wrapper {
  width: 100%;
  height: 100vh;
  font-family: "Rubik", sans-serif; }

#contact-img {
  background: url(images/citynyc.jpg) center center no-repeat;
  height: 40vh;
  background-size: cover; }

#contact-img-text-wrapper {
  height: inherit;
  background: rgba(0, 0, 0, 0.4);
  text-align: center;
  font-size: 48px;
  color: white; }

#contact-info-wrapper {
  height: 35vh;
  color: black;
  text-align: center;
  width: 100%; }

.contact-info-text {
  float: left;
  width: 20%; }

.facebook-big, .instagram-big, .youtube-big, .twitter-big, .vimeo-big {
  font-size: 72px;
  cursor: pointer;
  padding-bottom: auto; }

.social_icon {
  height: 35vh; }

.contact-info-text:hover {
  background: black;
  color: white;
  transition: ease-in 0.4s; }

.email-section {
  cursor: pointer;
  background: black;
  color: white;
  height: 30vh;
  text-align: center;
  font-size: 48px;
  letter-spacing: 2px;}

.email span {
  padding-right: 10px; }

.email-section:hover {
  background: black;
  color: white;
  animation: pulse 3s ease-out infinite normal; 
   }

@keyframes pulse {
  0% {
    background: black;
    color: white; }
  100% {
    color: black;
    background: white; } }

  /*

  MEDIA SCREEN BEGINNING 
  MAX WIDTH 965px

*/ 
@media screen and (max-width:1000px){

}


@media screen and (max-width:988px){


  #music-wrapper .article-text:first-child {
    font-size: 14px;
    text-align: left;

  }
}

/*

  MAX WIDTH 770PX
*/

@media screen and (max-width:770px){
  #navbar-wrapper {
    width: 40%; }
  .section-title {
    font-size: 24px; }
  #music-wrapper {
      height: 600px; }
  #music-wrapper .article-text:nth-child(2) img {
    height:600px;
  }
  #videography-wrapper .article-text {
    font-size: 16px;
  }

.flexbox-row{
  max-width: 100%;
  display: block;
  height:100%;
  padding-bottom: 0%;
}
.flexbox-row a{
  width:48%;
}
.flexbox-row img{
  width: 48%;
  height:100%;
  object-fit: cover;

}


}
/*
  
  MAX WIDTH 718PX

*/
@media screen and (max-width:718px){
  #music-wrapper {
    height: auto;
    display: block;

  }
  #music-wrapper .article-text:first-child{
    width: 100%;
    min-height:50vh;
    padding-top: 25px;
    padding-bottom: 25px;
  }
  #music-wrapper .article-text:nth-child(2){
    width: 100%;
    height: 50vh;
  }
  #music-wrapper .article-text:nth-child(2) img {
    height:inherit;
  }
  #education-wrapper .article-text .abstract-title{
    font-size: 20px;
  }
  #education-wrapper .article-text p{
    font-size: 16px;
  }
}
/*

  MAX WIDTH 545PX

*/
@media screen and (max-width: 545px){
  #navbar-wrapper{
    width:40%;
    background: black;
    color: white;
    font-size: 12px;
    letter-spacing: 2px;
    position: fixed;
    top: 0;
    right:0;
    height: 100%;
    transform:translateX(100%);
    transition:0.3s ease-out;
  }

}
/*

  431PX & SMALLER

*/
@media screen and (max-width: 431px){
  #navbar-wrapper {
    width: 50%; 
  }

  .section-title {
    font-size: 28px;
    letter-spacing: 10px;
  }

  .article-wrapper {
    font-size: 12px;
    max-width: 25rem;
    height: auto; 
  } 
  #photography-wrapper .article-text {
    max-width: 89%;
  }
  #photography-wrapper .article-text p{
    font-size:12px;
  }
  .flexbox-row img{
    width: 100%;
    height:61vh;
    object-fit: cover;
  }
  #education-wrapper .article-text{
    max-width:70%;
    margin:auto;
    text-align: center;
  }
  #education-wrapper .article-text .abstract-title{
    font-size: 18px;
  }
  #education-wrapper .article-text p{
    font-size: 14px;
  }
  #contact-wrapper {
     height: auto  
  }
  .facebook-big, .instagram-big, .youtube-big, .twitter-big, .vimeo-big{
    font-size: 32px;
  }
  #contact-img-text-wrapper {
      font-size: 28px;

  }
  #contact-info-wrapper {
      height: 25vh;
  }
  .social_icon{
    min-height: 25vh;
  }
  .email-section {
      height: 25vh;
      font-size: 30px;
  }
}