@font-face {
  font-family: perpetua;
  src: url("perpetua/Perpetua.ttf");
}
@font-face {
font-family: jura;
  src: url('Jura_1-007/Jura-Regular.ttf');
}

a {
  color: inherit;
}

body {
  background-color: #152931; #192d55;
  font: 16pt verdana;
  color: #fff; #c0e7a8; #ceffa6;
}

div#content {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  background-color: black;
  .left: 135px;
  top: 10px;
  height: 500px;
  width: 1068px;
  /*border: 9px double black;*/
}

#background {
  background-color: black;
  background-image: url("graphics/piano_with_chopin.png");
  background-repeat: no-repeat;
  background-size: 100%;
  /*height: 290px;*/
  /*width: 500px;*/
  height: 500px;
  width: 500px;
  position:absolute;
  right: 0px;
  top: 0px;
}

#logo {
  position: relative;
  top: 10px;
  left: 0px;
  float:left;
}

header {
  color: #fff; #C6E4C0;
  /*position: absolute;*/
  /*top: 0px;*/
  /*left: 40px;*/
  text-transform: uppercase;
  width: 45%;
  margin-left: 40px;
  padding-top: 20px;
}

header h1 {
  position: relative;
  font: 28pt Dosis, sans-serif;
  text-align: right;
  margin: 0;
}

header h1 em {
  font-size: 40pt;
  font-style: normal;
}

header h2 {
  font: 18pt Dosis, sans-serif;
}

#contact {
  width: 45%; /* same as header */
  display: inline-block;
  margin-left: 30px;
  position: absolute;
  bottom: 20px;
  font: 12pt verdana;
  line-height: 32px;
}

#contact a {
  text-decoration: none;
}

#contact .social-media {
  margin-bottom: -8px;
  margin-left: 8px;
  float: right;
  position: relative;
  top: 4px;
}


#info {
  position: absolute;
  bottom: 120px;
  left: 30px;
  font-style: italic;
}

#studio-info, #studio-updates {
  display:none;
}

#menu {
  width: 50%;
  text-align: center;
  margin-left: 30px;
  margin-top: 100px;
}

.contentbox {
  position: absolute;
  padding: 35px;
  padding-top: 20px;
  visibility: hidden;
  color: black;
  background-color: lightgray;
  line-height: 200%;
  font: 11pt verdana, sans-serif;
  
}

.spacer {
  width: 10px;
  display: inline-block;
}

#bio {
  top: 100px;
}
#login {
  top: 100px;
}
#loginInvalid {
  text-align: center;
  color: #fff; #37465A; #5a6a7f;
}

#studio-updates {
  
}

#studio-info {
  
}




#caption {
  position: absolute;
  top: 470px;
  width: 1068px;
  text-align: center;
  font-style: italic;
  font-size: 12pt;
}

#shadow {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 615px;
  opacity: 0.95;
  background-color: black;
  visibility: hidden;
}

#photostrip {
  position: absolute;
  width: 1068px;
  height: 100px;
  bottom: -120px;
  background-color: black;
  background-image: url("graphics/photostrip_staff_white.png");
  background-repeat: no-repeat;
}
#closephoto, #closetext {
  position: absolute;
  left: 100px;
  top: 100px;
  width: 11px;
  height: 14px;
  color: black;
  background-color: transparent;
  background-image: url("graphics/closephoto.png");
  background-position: center;
  background-repeat: no-repeat;
  /*border: 2px solid black;*/
  visibility: hidden;
  z-index: 2;
  margin-left: 3px;
  margin-top: 0px;
  background-size:11px 14px;
}
#closephoto:hover, #closetext:hover {
  cursor: pointer;
}

div.photo {
  position: absolute;
  top: 22px;
  margin: 0px;
  /*border: 2px solid black;*/
}

div.photo:hover {
  cursor: pointer;
}

.external:after {
  content: url('graphics/external_link.png')
}

.link {
  background-color: #bbb; #86B396; #A0CCB0; #95ce8a; #71aa66; #c0e7a8; rgba(12, 88, 34, 0.5);
  /*border: 10px double black;*/
  padding: 0.4em;
  display: inline-block;
  margin-bottom: 10px;
  margin-right: 35px;
  color: black;
  font: 12pt verdana;
  width: 120px;
  height: 1em;
  text-decoration: none;
}

#info {
  visibility: hidden;
}


/* BREAKPOINTS */

@media only screen  and (max-device-width : 1000px)