body {

/* font-family: 'Actor', sans-serif;
font-family: 'Khand', sans-serif;
font-family: 'Homenaje', sans-serif;
font-family: 'Prata', serif;
font-family: 'Share', cursive;
font-family: 'Michroma', sans-serif;
font-family: 'Racing Sans One', cursive;
*/
  margin: 0;
  font:normal 75% 'Khand', Arial, Helvetica, sans-serif;
  background-color: black;
}

canvas {
  display: block;
  vertical-align: bottom;
}

#intro {
  height: 100vh;
}

#space-arrow-left {
  position: absolute;
  width: 10%;
  bottom: 10px;
  left: 10px;
  visibility: hidden;
}

#space-arrow-right {
  position: absolute;
  width: 10%;
  bottom: 10px;
  right: 10px;
  visibility: hidden;
}

h1 {
  font-size: 4em;
  margin-top: 5%;
}

#bio {
  padding-left: 5%;
  padding-top: 5%;
  background-color: lightgray;
  height: 50vh;

  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e0e0e0+0,636363+100 */
  background: #e0e0e0; /* Old browsers */
  background: -moz-linear-gradient(-45deg,  #e0e0e0 0%, #636363 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg,  #e0e0e0 0%,#636363 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg,  #e0e0e0 0%,#636363 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0e0e0', endColorstr='#636363',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  

}

#bio2 {
  padding: 10%;
  background-color: white;
}

.big-name {
  font-size: 5em;
  opacity: 0;
  transform: translate3d(-50px, 50px, 50px);
  transition: all .5s ease-out;
  line-height: 90%;
}
.big-name.fade-in {
  opacity: 1;
  transform: translate3d(0,0,0);
}

.big-name-line2 {
  font-size: 1.5em;
  opacity: 0;
  transform: translate3d(-100px, 50px, 50px);
  transition: all .5s ease-out;
  margin-top: 2%;
}
.big-name-line2.fade-in {
  opacity: 1;
  transform: translate3d(0,0,0);
}

.big-name-line3 {
  margin-top: 2%;
  font-size: 1.2em;
  opacity: 0;
  transform: translate3d(-150px, 50px, 50px);
  transition: all .5s ease-out;
}
.big-name-line3.fade-in {
  opacity: 1;
  transform: translate3d(0,0,0);
}

#bio-blurb {
  font-size: 2em;
  max-width: 500px;
}

#bio-left {
  width: 50%;
  float: left;
}
#bio-right {
  width: 50%;
  float: right;
  
}
.portrait {
  width: 70%;

  opacity: 0;
  transform: translate(150px, 50px);
  transition: all .5s ease-out;
  padding-top: 10%;
  padding-left: 5%;
  padding-right: 20px;
}

.portrait.fade-in {
  opacity: 1;
  transform: translate3d(0,0,0);
}
.media-icons-div {
  transform: translate(100px, 50px);
  transition: all .5s ease-out;
  opacity: 0;
  margin-top: 5%;
  margin-bottom: 5%;
}
.media-icons-div.fade-in {
  opacity: 1;
  transform: translate(0, 0);
}

#media-icons {
  width: 80%;
  padding-top: 10%;
}

#reel-div {
  background-color: black;
  color: white;
  margin-left: auto;
  margin-right: auto;
  float: center;
  width: 100%;
  text-align: center;
  height: 100vh;
}

#video1 {
  margin-left: auto;
  margin-right: auto;
}

.networks-div {
  background-color: white;
  /*
  margin-left: auto;
  margin-right: auto;
  padding: 10%;
  */
}
.networks {
  width: 75%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding-top: 15%;
  padding-bottom: 15%;
  /* opacity: 1;
  transition: all .5s ease-in;
  transform: translate(1300px, 150px);*/
}

.networks.fade-in {
  /* opacity: 1;
  transform: translate(0, 0); */
  opacity: 1;
}

.member-of-div {
  height: 15vh;
  background-color: #AAAAAA;
  padding: 5%;
}
.ascap-div {
  display: block;
  width: 50%;
  float: left;
}
.ascap-img {
  width: 25%;
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  margin-bottom: auto;
  display: block;
  
}
.pma-div {
  display: block;
  width: 50%;
  float: right;
  margin-top: 20px;
}
.pma-img {
  width: 25%;
  margin-left: auto;
  margin-right: auto;

  display: block;
}
  .proud {
    margin-left: auto;
    margin-right: auto;
    font-size: 3em;
    width: 60vw;
    border: 1px solid black;
  
  }

  #footer {
    background-color: #444;
    color: #CCC;
    height: 25vh;
    width: 100vw;
    font-size: 2em;
  }

  #footer-text {
    padding-top: 20px;
    text-align: center;
  }


/* ---- particles.js container ---- */

#particles-js {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #000000;
  background-image: url("images/js_logo_main.png");
  background-repeat: no-repeat;
  background-size: 50%;
  background-position: 50% 50%;
}

/* ---- stats.js ---- */

.count-particles{
  background: #000022;
  position: absolute;
  top: 48px;
  left: 0;
  width: 80px;
  color: #13E8E9;
  font-size: .8em;
  text-align: left;
  text-indent: 4px;
  line-height: 14px;
  padding-bottom: 2px;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: bold;
}

.js-count-particles{
  font-size: 1.1em;
}

#stats,
.count-particles{
  -webkit-user-select: none;
}

#stats{
  border-radius: 3px 3px 0 0;
  overflow: hidden;
}

.count-particles{
  border-radius: 0 0 3px 3px;
}


.contact-div {
  background-color:lightpink; 
}

p.thanks {
  color: white;
  font-size:2em;
}

/* icons! */

.smi-facebook {
	background: url('images/social_media_icons.png') no-repeat -4px -8px;
	width: 91px;
	height: 91px;
  border: 0;
  display: inline-block;
}
.smi-facebook:hover {
	background: url('images/social_media_icons.png') no-repeat -4px -104px;
	width: 91px;
	height: 91px;
  border: 0;
  display: inline-block;
}

.smi-twitter {
	background: url('images/social_media_icons.png') no-repeat -101px -8px;
	width: 91px;
	height: 91px;
  border: 0;
  display: inline-block;
}
.smi-twitter:hover {
	background: url('images/social_media_icons.png') no-repeat -101px -104px;
	width: 91px;
	height: 91px;
  border: 0;
  display: inline-block;
}

.smi-soundcloud {
	background: url('images/social_media_icons.png') no-repeat -4px -217px;
	width: 91px;
	height: 92px;
  border: 0;
  display: inline-block;
}
.smi-soundcloud:hover {
	background: url('images/social_media_icons.png') no-repeat -4px -314px;
	width: 91px;
	height: 91px;
  border: 0;
  display: inline-block;
}

.smi-linkedin {
	background: url('images/social_media_icons.png') no-repeat -101px -217px;
	width: 91px;
	height: 92px;
  border: 0;
  display: inline-block;
}
.smi-linkedin:hover {
	background: url('images/social_media_icons.png') no-repeat -101px -314px;
	width: 91px;
	height: 91px;
  border: 0;
  display: inline-block;
}

.smi-imdb {
	background: url('images/social_media_icons.png') no-repeat -198px -217px;
	width: 91px;
	height: 92px;
  border: 0;
  display: inline-block;
}
.smi-imdb:hover {
	background: url('images/social_media_icons.png') no-repeat -198px -314px;
	width: 91px;
	height: 91px;
  border: 0;
  display: inline-block;
}



@media only screen and (max-device-width: 480px) {
/* define mobile specific styles come here */
  #bio {
    padding-left: 5%;
    padding-top: 5%;
    background-color: lightgray;
    height: 17vh;
    
  }

  #bio-blurb {
    padding-top: 9%;
    font-size: 3.3em;
    max-width: 90%;
  }

  .member-of-div {
    height: 8vh;
    background-color: #AAAAAA;
    padding: 5%;
  }

  .big-name {
    font-size: 6em;
  }

  .big-name-line2 {
    font-size: 3em;
  }

  .big-name-line3 {
    font-size: 2em;
  }

  #media-icons {
    width: 90%;
    padding-top: 8%;
    padding-bottom: 8%;
  }

  .networks {
    width: 75%;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }



}