@font-face {
  font-family: "Ave Fedan";
  src: url(fonts/ave_fedan.ttf) format("truetype");
}

@font-face {
  font-family: "Fontello";
  src: url(fonts/fontello.ttf) format("truetype");
}

@font-face {
  font-family: "KeepCalm";
  src: url(fonts/keep_calm.ttf) format("truetype");
}

html,
body {
  padding: 0;
  margin: 0;
  font-family: "KeepCalm", Geneva, Verdana, sans-serif;
  background: #ffffff;
  color: #000000;
}

a {
  text-decoration: none;
  color: #000000;
}

#nav {
  position: fixed;
  top: 0;
  left: 0;
  height: 48px;
  width: 100%;
  z-index: 100;
  box-shadow: 0 2px 5px rgba(220, 220, 220, 0.9);
  background: rgba(220, 220, 220, 0.7);
}

#nav #young_jimmy_logo {
  display: block;
  margin: 0 auto;
  height: 48px;
  z-index: 105;
}

#menu,
#menu_pulldown {
  position: fixed;
  left: 0px;
  top: 0px;
  z-index: 101;
  display: block;
  text-align: center;
  font-weight: 600;
  color: #757575;
}

#menu_panel {
  position: fixed;
  z-index: 102;
  width: 200px;
  top: 48px;
  left: 0;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
  display: none;
  background: #EEEEEE;
}

.menu_item {
  font-size: 22px;
  line-height: 22px;
  padding: 12px;
  vertical-align: middle;
  font-family: "KeepCalm", "Ave Fedan", Edition, "Lucida Grande",
    "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
  border: 1px solid #E0E0E0;
}

.menu_item:hover {
  color: #0047f7;
  background: #f4f4f4;
}

.menu_item .material-icons {
  margin-right: 14px;
  display: inline-block;
  vertical-align: middle;
}

#menu li {
  display: inline-block;
  margin-right: 20px;
  font-family: "KeepCalm", "Ave Fedan", Edition, "Lucida Grande",
    "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
}

.button:hover,
#menu_pulldown:hover,
a:hover {
  color: #0047f7;
}

#menu_pulldown {
  margin-left: 10px;
  margin-top: 10px;
  cursor: pointer;
}

#menu_pulldown i,
#controls .button i {
  font-size: 28px;
}

#footer {
  margin: 40px auto;
  font-family: arial;
  font-size: 12px;
  text-align: center;
  color: #e0e0e0;
}

#footer img {
  width: 240px;
}

#social_links {
  position: fixed;
  right: 20px;
  top: 10px;
  z-index: 101;
  display: block;
  text-align: center;
}

.social_link {
  display: inline-block;
  width: 20px;
  margin-right: 20px;
  margin-top: 4px;
  vertical-align: middle;
  filter: grayscale(100%);
}

.social_link:hover {
  filter: none;
}

.link,
.button {
  cursor: pointer;
}

.button {
  font-size: 48px;
  line-height: 24px;
  vertical-align: middle;
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-evenly;
  align-items: center;
  align-content: flex-start;
  text-align: center;
}

h1 {
  margin-top: 60px;
  text-align: center;
}

.box_side {
  flex-grow: 1;
}

.box_side .material-icons {
  font-size: 48px;
}

.box_main {
  flex-grow: 8;
}

.box {
  display: inline-block;
  vertical-align: middle;
  margin: 20px;
  font-size: 24px;
}

.youtube_iframe {
  width: 100%;
  max-width: 1000px;
  height: 420px;
}

.album_cover {
  width: 100%;
  max-width: 600px;
  min-height: 350px;
}

#div_subscribe {
  text-align: center;
  margin: 0 auto;
  max-width: 80%;
}

.album_title {
  position: relative;
  font-weight: 200;
  font-family: "KeepCalm", "Ave Fedan", Edition, "Lucida Grande",
    "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
  font-size: 16px;
  text-align: center;
  vertical-align: middle;
}

#div_bio {
  position: relative;
  width: 80%;
  max-width: 1200px;
  margin: 0 auto;
  color: #616161;
  max-height: 200px;
  overflow-y: hidden;
}

#div_bio #read_more {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  margin: 0;
  padding: 30px 0;
  background-image: linear-gradient(to bottom, transparent, #ffffff);
  cursor: pointer;
}

#button_read_more {
  display: inline-block;
  background: #aaaaaa;
  color: #ffffff;
  padding: 9px 18px;
  margin: 0 auto;
  border-radius: 3px;
  font-weight: 400;
  font-size: 13px;
  font-family: Arial, Helvetica, sans-serif;
  transition: all 0.23s ease-in-out 0s;
}

.quote {
  padding: 20px;
  background: #EEEEEE;
  font-style: italic;
  font-family: Retina, Helvetica Neue, Helvetica, Arial, sans-serif;

}

#button_read_more:hover,
#mc_embed_signup .button:hover {
  color: #0047f7;
  background: #858585;
}

#twitter {
  margin: 40px auto;
  max-width: 640px;
  width: 80%;
  text-align: center;
}


@media all and (max-width: 1279px) {

  #menu,
  #social_links {
    display: none;
  }

  #menu_pulldown {
    display: block;
  }
}

@media all and (max-width: 599px) {
  .big_img {
    width: 100%;
  }
}

@media all and (min-width: 600px) and (max-width: 1279px) {
  .big_img {
    width: 85%;
  }
}

@media all and (min-width: 1280px) {

  #menu,
  #social_links {
    display: block;
  }

  #menu_pulldown {
    display: none;
  }

  .big_img {
    width: 70%;
  }
}

#div_press {
  text-align: center;
  margin: 0 auto;
}

#div_press ul {
  list-style-type: none;
}

.press_logos {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: flex-start;
  max-width: 640px;
}

.press_logo {
  margin: 20px;
}

.press_logo img {
  max-height: 100px;
  max-width: 150px;
}

.yearbook_img {
  float: right;
  margin: 10px 10px 0px 10px;
  width: 80px;
}

.photos {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  align-content: center;
  margin: 0px auto;
  text-align: center;
}
.photo {
  width: 300px;
  margin: 5px;
}