/* SASS IMPORTS */
/*--------------*/
/* STANDARD VARIABLES */
/*--------------------*/
/* Google Font Imports */
/*---------------------*/
/* FONT-FACES */
/*------------*/
@font-face {
  font-family: 'Ostrich-Regular';
  src: url("/resources/fonts/ostrich-regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'Ostrich-Bold';
  src: url("/resources/fonts/ostrich-black.ttf") format("truetype");
  font-weight: bold;
  font-style: normal; }
@font-face {
  font-family: 'Ostrich-Rounded';
  src: url("/resources/fonts/ostrich-rounded.ttf") format("truetype");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'Gidole-Regular';
  src: url("/resources/fonts/Gidole-Regular.otf") format("opentype");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'CooperHewitt-Light';
  src: url("/resources/fonts/CooperHewitt-Light.otf") format("opentype");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'CooperHewitt-LightItalic';
  src: url("/resources/fonts/CooperHewitt-LightItalic.otf") format("opentype");
  font-weight: normal;
  font-style: normal; }
/* MIXINS */
/*--------*/
/* Social Media Icons with Hover Transition */
/*------------------------------------------*/
/*
Add transition to containers so they can push in and out.
*/
#layout,
#menu,
.menu-link {
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out; }

/*
This is the parent `<div>` that contains the menu and the content area.
*/
#layout {
  position: relative;
  padding-left: 0; }

#layout.active #menu {
  left: 275px;
  width: 275px; }

#layout.active .menu-link {
  left: 275px; }

/*
The `#menu` `<div>` is the parent `<div>` that contains the `.pure-menu` that
appears on the left side of the page.
*/
#menu {
  margin-top: 0px;
  margin-left: -275px;
  /* "#menu" width */
  width: 275px;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 10;
  z-index: 1000;
  /* so the menu or its navicon stays above all content */
  background: #191818;
  -webkit-overflow-scrolling: touch; }

/*
All anchors inside the menu should be styled like this.
*/
#menu a {
  color: #ffffff;
  font-family: "Ostrich-Regular", sans-serif;
  font-size: 86px;
  border: none;
  text-decoration: none;
  margin-left: 20px;
  padding: 0 0 0 0; }

#menu a.current {
  color: #2a108e; }

/*
Remove all background/borders, since we are applying them to #menu.
*/
#menu .pure-menu,
#menu .pure-menu ul {
  list-style-type: none;
  border: none;
  background: transparent;
  margin: 50px 0 10px 0;
  padding: 0; }
  #menu .pure-menu li,
  #menu .pure-menu ul li {
    margin: 20px 0 20px 0;
    padding: 0; }

/*
Add that light border to separate items into groups.
*/
/*
Change color of the anchor links on hover/focus.
*/
#menu .pure-menu li a:hover,
#menu .pure-menu li a:focus {
  color: #2a108e; }

/*
This styles the selected menu item `<li>`.
*/
#menu .pure-menu-selected,
#menu .pure-menu-heading {
  font-family: "Ostrich-Regular", sans-serif;
  color: #fff; }

/*
This styles a link within a selected menu item `<li>`.
*/
#menu .pure-menu-selected a {
  color: #fff; }

/*
This styles the menu heading.
*/
#menu .pure-menu-heading {
  font-size: 24px;
  color: #fff;
  padding: 30px; }

/*
`.menu-link` represents the responsive menu toggle that shows/hides on
small screens.
*/
@media screen and (max-width: 1023px) {
  .menu-link {
    position: fixed;
    display: block;
    /* show this only on small screens */
    top: 0;
    left: 0;
    /* "#menu width" */
    background: #000;
    background: rgba(0, 0, 0, 0.7);
    font-size: 40px;
    /* change this value to increase/decrease button size */
    z-index: 10;
    width: 2em;
    height: auto;
    padding: 1.8em 1em; }

  .menu-link:hover,
  .menu-link:focus {
    background: #000; }

  .menu-link span {
    position: relative;
    display: block; }

  .menu-link span,
  .menu-link span:before,
  .menu-link span:after {
    background-color: #fff;
    width: 100%;
    height: 0.2em; }

  .menu-link span:before,
  .menu-link span:after {
    position: absolute;
    margin-top: -0.6em;
    content: " "; }

  .menu-link span:after {
    margin-top: 0.6em; } }
/* -- Responsive Styles (Media Queries) ------------------------------------- */
/*
Hides the menu for screens below desktop size, but modify this based on your app's needs. Comment it out to use only the hamburger toggle method on mobile, and eliminate it from the desktop experience.
*/
/* ALL PAGES */
/*-----------*/
#body-photo {
  background-image: url("/resources/images/andy-on-porch_web-crop-color.jpg");
  background-size: 45%;
  background-repeat: no-repeat;
  background-position: 100px;
  background-attachment: fixed; }
  @media screen and (max-width: 1023px) {
    #body-photo {
      -webkit-text-size-adjust: none;
      background-size: 85%;
      background-position: center; } }

body {
  background-color: black; }
  @media screen and (max-width: 1023px) {
    body {
      -webkit-text-size-adjust: none; } }

h1 {
  font-family: "Ostrich-Regular", sans-serif;
  font-size: 115px;
  font-weight: normal;
  color: #ffffff;
  margin: 20px 10px;
  padding: 0; }

h2 {
  font-family: "Ostrich-Rounded", sans-serif;
  font-size: 75px;
  font-weight: normal;
  color: #ffffff;
  margin: 0;
  padding: 0; }

h3 {
  font-family: "CooperHewitt-Light", sans-serif;
  font-size: 45px;
  font-weight: normal;
  color: #ffffff;
  margin: 20px 10px; }

h4 {
  font-family: "CooperHewitt-Light", sans-serif;
  font-size: 30px;
  font-weight: normal;
  color: #ffffff;
  margin: 20px 10px;
  padding: 0; }

h5 {
  font-family: "CooperHewitt-Light", sans-serif;
  font-size: 25px;
  font-weight: normal;
  color: #ffffff;
  margin: 5px 10px;
  padding: 0; }

p {
  font-family: "CooperHewitt-Light", sans-serif;
  font-weight: normal;
  letter-spacing: 1px;
  font-size: 24px;
  color: #ffffff; }

a {
  color: #ffffff; }

a:visited {
  color: #ffffff; }

a:hover {
  color: #2a108e;
  transition: 0.2s; }

a:focus {
  color: #2a108e; }

a:active {
  color: #2a108e; }

a.current {
  color: #2a108e; }

#sitename {
  text-align: right;
  padding: 0;
  font-size: 57.5px;
  position: fixed;
  right: 10px;
  top: 15px;
  z-index: 5; }
  #sitename h1 {
    padding: 0;
    margin: 20px 5px 0px 0; }
  #sitename a {
    text-decoration: none; }
  @media screen and (max-width: 1023px) {
    #sitename h1 {
      font-size: 115px; } }

@media screen and (max-width: 1023px) {
  #black-top-bar {
    z-index: 1;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 175px;
    background-color: black; } }
#navmenu {
  float: right;
  position: fixed;
  right: 10px;
  top: 100px;
  bottom: 0px;
  color: #ffffff; }
  @media screen and (max-width: 1023px) {
    #navmenu {
      display: none; } }
  #navmenu ul {
    text-align: right;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 50px;
    list-style: none;
    padding-left: 0; }
  #navmenu li {
    margin-top: 10px; }
  #navmenu a {
    text-decoration: none; }

.hori-bar-top {
  height: 10px;
  width: 900px;
  margin-left: auto;
  margin-right: auto;
  clear: both;
  border-radius: 2px;
  background-color: #ffffff;
  margin-top: 5px;
  margin-bottom: 40px;
  padding: 0px; }
  @media screen and (min-width: 1440px) {
    .hori-bar-top {
      width: 975px;
      margin-left: auto;
      margin-right: auto; } }
  @media screen and (min-width: 1680px) {
    .hori-bar-top {
      width: 990px;
      margin-left: auto;
      margin-right: auto; } }

.hori-bar-bottom {
  height: 10px;
  width: 900px;
  margin-left: auto;
  margin-right: auto;
  clear: both;
  border-radius: 2px;
  background-color: #ffffff;
  margin-top: 100px;
  margin-bottom: 50px; }

footer {
  clear: both;
  position: relative; }

.social-icon {
  width: 4.5em;
  height: 4.5em;
  background-color: #ffffff;
  outline: 2px black solid; }
@media screen and (min-width: 1024px) {
  .social-icon {
    width: 3em;
    height: 3em;
    background-color: #ffffff;
    outline: 2px black solid; }
  .social-icon:hover {
    background-color: #2a108e;
    outline: 2px black solid;
    transition: 0.2s; }
  .social-icon:visited {
    color: #ffffff; } }

#design-info-index {
  position: fixed;
  right: 20px;
  bottom: 5px;
  margin-bottom: 0px;
  padding: 0px; }
  #design-info-index p {
    font-family: "CooperHewitt-Light", sans-serif;
    font-weight: normal;
    font-size: 12px;
    color: #ffffff;
    margin-bottom: 0;
    padding: 0; }

#design-info {
  position: fixed;
  right: 20px;
  bottom: 5px;
  margin-bottom: 0px;
  padding: 0px; }
  #design-info p {
    font-family: "CooperHewitt-Light", sans-serif;
    font-weight: normal;
    font-size: 12px;
    color: #ffffff;
    margin-bottom: 0;
    padding: 0; }

/* HOME PAGE */
/*------------*/
/* BIO PAGE */
/*-------------*/
.body-text {
  width: 60%;
  margin-left: 10px;
  margin-top: 120px; }
  .body-text h4 {
    padding: 30px 10px; }
  @media screen and (max-width: 1023px) {
    .body-text {
      text-align: center;
      width: 85%;
      margin-top: 200px;
      width: 900px;
      margin-left: auto;
      margin-right: auto; }
      .body-text h4 {
        font-size: 60px; } }

/* MUSIC PAGE */
/*-------------*/
.album-info-top {
  width: 58%;
  margin: 150px 10px 0px; }
  .album-info-top h3 {
    text-align: center; }
  .album-info-top .album-credits {
    text-align: center; }
  @media screen and (max-width: 1023px) {
    .album-info-top {
      width: 90%;
      margin-top: 200px;
      width: 900px;
      margin-left: auto;
      margin-right: auto; }
      .album-info-top h3 {
        font-size: 60px; }
      .album-info-top h4 {
        font-size: 45px; }
      .album-info-top h5 {
        font-size: 40px; } }

.album-info {
  width: 58%;
  margin: 100px 10px 0px; }
  .album-info h3 {
    text-align: center; }
  .album-info .album-credits {
    text-align: center; }
  @media screen and (max-width: 1023px) {
    .album-info {
      width: 90%;
      width: 900px;
      margin-left: auto;
      margin-right: auto; }
      .album-info h3 {
        font-size: 60px; }
      .album-info h4 {
        font-size: 45px; }
      .album-info h5 {
        font-size: 40px; } }

#sc-player {
  width: 700px;
  margin-left: 50px;
  margin-top: 50px; }
  @media screen and (max-width: 1023px) {
    #sc-player {
      width: 85%;
      width: 900px;
      margin-left: auto;
      margin-right: auto; } }

#itunes-badge {
  margin-top: 30px;
  margin-left: 245px; }
  #itunes-badge img {
    width: 300px; }
  @media screen and (max-width: 1023px) {
    #itunes-badge {
      margin: 50px 0 0;
      text-align: center; }
      #itunes-badge img {
        width: 400px; } }

/* MEDIA PAGE */
/*---------------*/
.youtube-vid {
  margin: 50px 0px 100px 100px;
  padding-top: 175px;
  width: 650px;
  height: 365px; }
  @media screen and (max-width: 1023px) {
    .youtube-vid {
      width: 850px;
      height: 476px;
      margin-left: auto;
      margin-right: auto; } }

#soundcloud-squareplayer {
  width: 650px;
  margin: 50px 0px 100px 100px; }
  @media screen and (max-width: 1023px) {
    #soundcloud-squareplayer {
      width: 850px;
      margin-left: auto;
      margin-right: auto; } }

.media-image {
  margin: 50px 0px 100px 100px; }
  .media-image img {
    width: 650px; }
  @media screen and (max-width: 1023px) {
    .media-image {
      width: 850px;
      margin-left: auto;
      margin-right: auto; }
      .media-image img {
        width: 850px; } }

/* TEACHING PAGE */
/*---------------*/
/* THOUGHTS PAGE */
/*---------------*/
#thoughts-text {
  width: 60%;
  margin-left: 10px;
  margin-top: 120px; }
  #thoughts-text h4 {
    padding: 20px 10px;
    font-family: "CooperHewitt-LightItalic", sans-serif; }
  @media screen and (max-width: 1023px) {
    #thoughts-text {
      text-align: center;
      width: 85%;
      margin-top: 250px;
      width: 900px;
      margin-left: auto;
      margin-right: auto; }
      #thoughts-text h4 {
        font-size: 60px; } }

/* CONTACT PAGE */
/*---------------*/
#contact-text {
  width: 750px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 150px;
  margin-left: 20px; }
  @media screen and (max-width: 1023px) {
    #contact-text {
      width: 900px;
      margin-left: auto;
      margin-right: auto;
      margin-left: 50px;
      margin-top: 250px; }
      #contact-text h4 {
        font-size: 60px; } }

#contact-form {
  float: left;
  margin: 20px 50px 50px 175px; }
  @media screen and (max-width: 1023px) {
    #contact-form {
      margin-right: 30px;
      margin-left: 50px; } }
  #contact-form p {
    padding: 0;
    margin: 0; }
    @media screen and (max-width: 1023px) {
      #contact-form p {
        font-size: 56px; } }
  #contact-form .row {
    margin-top: 0px;
    margin-bottom: 20px; }
    @media screen and (max-width: 1023px) {
      #contact-form .row {
        font-size: 30px; } }
  @media screen and (max-width: 1023px) {
    #contact-form .pure-button {
      font-size: 36px; } }
  #contact-form .pure-button-primary {
    background-color: #ffffff;
    margin-left: 150px;
    color: black; }
    @media screen and (max-width: 1023px) {
      #contact-form .pure-button-primary {
        margin-left: 300px; } }
  #contact-form .pure-form input:focus {
    border-color: #2a108e; }
  #contact-form .pure-form textarea:focus {
    border-color: #2a108e; }