/* -- FONTS -- */
@font-face {
  font-family: 'owl';
  src: url("../fonts/owl.woff2") format("woff2"), url("../fonts/owl.woff") format("woff");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'owr';
  src: url("../fonts/owr.woff2") format("woff2"), url("../fonts/owr.woff") format("woff");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'owri';
  src: url("../fonts/owri.woff2") format("woff2"), url("../fonts/owri.woff") format("woff");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'owb';
  src: url("../fonts/owb.woff2") format("woff2"), url("../fonts/owb.woff") format("woff");
  font-weight: normal;
  font-style: normal; }
/* -- colors -- */
/* -- global elements  -- */
a {
  color: #cccccc;
  text-decoration: none;
  outline: 0; }

b, strong {
  font-family: 'owb';
  font-weight: normal; }

em, i {
  font-family: 'owri';
  font-style: normal; }

h1, h2, p, section > div {
  width: 60%; }

li {
  list-style-type: none; }

/* -- MIXINS -- */
/* -- page setup  -- */
html * {
  margin: 0px;
  padding: 0px; }

body {
  background: #680014 url(../images/background.png) no-repeat top left;
  background-attachment: fixed;
  background-size: 100% 100%;
  color: #cccccc;
  font-family: "owr";
  font-size: 15pt;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale; }

/* -- footer -- */
footer {
  position: fixed;
  bottom: 0px;
  width: 100%;
  height: 1.5em;
  margin-top: 20px;
  padding: 5px;
  background-color: black;
  color: #cccccc;
  font-size: .7em;
  text-align: center; }
  footer a {
    display: inline-block;
    padding: 5px 10px; }
    footer a:hover {
      color: #ead35e; }
    footer a#top {
      float: right;
      top: 0px;
      margin-right: 10%; }
  footer li {
    display: inline-block; }
  footer ul {
    margin: 0px auto; }

/* -- header -- */
header {
  position: fixed;
  top: 0px;
  z-index: 100;
  width: 100%;
  max-height: 12%;
  background-color: rgba(0, 0, 0, 0.4); }
  header #logo img {
    display: block;
    width: 65%;
    margin: 10px auto;
    opacity: .8; }

/* -- navigation -- */
nav {
  display: block;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 150;
  width: 15%;
  height: 10%;
  transition: height,opacity 1s,1s;
  overflow: hidden;
  opacity: .8; }
  nav:hover {
    opacity: 1;
    height: 50%; }
  nav div {
    width: 70%;
    height: 100%;
    margin: 10px 0px 0px 30%;
    text-align: center; }
    nav div img {
      display: inline-block;
      width: 6vh;
      height: 6vh; }
      nav div img:hover {
        top: 0px !important; }
  nav ul {
    display: block;
    position: absolute;
    top: 15px;
    width: inherit;
    text-align: center; }
    nav ul:hover li {
      display: block; }
    nav ul.show {
      display: block; }
    nav ul a {
      display: block;
      padding: 7px 10px;
      border-bottom: 1px dotted #cccccc;
      font-family: "owb";
      font-size: 1.3vw; }
      nav ul a:hover {
        background-color: #680014;
        color: #ead35e; }
    nav ul li {
      display: none;
      background-color: rgba(0, 0, 0, 0.2); }
      nav ul li:hover {
        display: block; }
      nav ul li:nth-child(1) {
        display: block;
        padding-top: 10px;
        background-color: unset; }
        nav ul li:nth-child(1):hover {
          background-color: rgba(0, 0, 0, 0.2); }
    nav ul li:last-child a {
      border-bottom-width: 0px; }

/* nav {
	position:relative;
	top:0;
	left:20px;
	z-index:150;
	width:14%;
	height:16%;
	@include testborder;

	span {
		@include testborder;
		border-color:green;
		}

	
	}
*/
/* -- navigation -- 
nav {
	display:inline-block;
	position:absolute;
	top:18%;
	left:2%;
	z-index:150;
	width:14%;
	height:calc(100% - 18%);
	transition:height,opacity 1s,1s;
	overflow:hidden;
	opacity:.8;
	&:hover {
		transition:height 1s;
		height:500px;
		opacity:1;
		}

	img {
		height:85px;
		max-height:95%;
		} 
	
	>span {
		display:inline-block;
		position:relative;
		bottom:0px;
		width:100%;
		height:7.5vh;
		padding-left:18%;
		background:url(../images/note.svg) no-repeat;
		background-size:contain;
		span {
			position:absolute;
			left:0px;
			bottom:8%;
			font-size:max(1.8vh, 1.4vh);
			text-indent:25%;
			}
		&:hover{
			text-shadow:3px 0px 20px $yellow-o8;
			}
		}

	
	ul {
		display:none;
		position:absolute;
		top:8vh;
		background-color:$black-o2;
		text-align:center;
		&.show {
			display:block;
			}
		a {
			display:block;
			padding:7px 10px;
			border-bottom:1px dotted $white8;
			font-family:$bold;
			font-size:1.3vw;
			&:hover {
				background-color:$backcolor;
				color:$yellow;
				}
			}
		li:last-child a {
			border-bottom-width:0px;
			}		
		}
	}

*/
/* -- content -- */
#content {
  width: 100%;
  height: calc(100vh - 180px);
  margin: 10% auto 0px; }
  #content a {
    color: #ead35e;
    text-decoration: none;
    outline: 0; }
    #content a:hover {
      background-color: #ead35e;
      color: #680014; }
  #content a.toplink {
    display: block;
    clear: both;
    top: 0px;
    width: 60%;
    margin: 0px auto;
    color: #cccccc;
    text-align: right; }
    #content a.toplink:hover {
      background-color: transparent !important;
      color: rgba(234, 211, 94, 0.8);
      text-shadow: 3px 0px 20px #cccccc; }
  #content figure#bioimage {
    display: block;
    position: relative;
    width: 70%;
    margin: 0px auto 1.8em; }
    #content figure#bioimage a.bionotes {
      display: inline-block;
      position: absolute;
      bottom: 14px;
      z-index: 5;
      height: 14%;
      background: url(../images/note.svg) no-repeat left top;
      background-size: contain;
      color: #cccccc;
      font-family: "owb";
      font-size: 1.1em;
      line-height: 3.6em;
      text-decoration: none;
      text-shadow: 2px 2px 4px #680014;
      text-align: right; }
    #content figure#bioimage a#vessela {
      left: 12%;
      width: 138px; }
      #content figure#bioimage a#vessela:hover:after {
        content: "Vessela Bio"; }
    #content figure#bioimage a#erik {
      left: 33%;
      width: 110px; }
      #content figure#bioimage a#erik:hover:after {
        content: "Erik Bio"; }
    #content figure#bioimage a#valerie {
      left: 58%;
      width: 136px; }
      #content figure#bioimage a#valerie:hover:after {
        content: "Valerie Bio"; }
    #content figure#bioimage a#thomasine {
      left: 77%;
      width: 168px; }
      #content figure#bioimage a#thomasine:hover:after {
        content: "Thomasine Bio"; }
    #content figure#bioimage img#main {
      display: block;
      position: relative;
      top: 0px;
      width: 100%;
      margin: 0px auto;
      opacity: .9; }
  #content h1 {
    margin: 0px auto .4em;
    padding: 0px 10px 6px;
    font-family: "owr";
    font-weight: normal;
    font-size: 1.6em;
    text-transform: uppercase;
    letter-spacing: .1em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4); }
  #content h2 {
    margin: 0px auto .4em;
    font-family: "owb";
    color: #ead35e;
    font-weight: normal;
    font-size: 1.3em; }
  #content iframe {
    display: block;
    margin: 10px auto 20px; }
  #content p {
    margin: 0px auto 1.2em;
    line-height: 1.6em;
    letter-spacing: .03em; }
  #content section {
    position: relative;
    clear: both;
    padding-bottom: 10%; }
  #content #performances figure {
    width: 70%;
    margin: 0px auto 1.8em; }
    #content #performances figure img {
      width: 100%; }
  #content #performances ul, #content #concerts ul {
    width: 60%;
    margin: 20px auto; }
    #content #performances ul li, #content #concerts ul li {
      padding: .2em 0px;
      letter-spacing: .03em; }
     #content #concerts li {
     	margin-bottom:.4em;
     	}      
     #content #concerts span {
    	display:block;
    	margin-bottom:.4em;
    	font-weight:bold;
     	} 
     #content #concerts span + span {
    	display:block;
    	font-weight:normal !important;
		line-height:1.1em;
     	} 
  #content #concerts aside {
  		width:60%;
  		margin:2em auto;
  		padding:1%;
  		border:1px solid rgba(255, 255, 255, 0.4);
  		font-size:.9em;
  		line-height:1.5em;
  	}    	
     	
  #content #repertoire div.flex {
    display: flex;
    align-items: flex-start;
    margin: 10px auto; }
    #content #repertoire div.flex div:nth-child(1) {
      margin-right: 2%; }
  #content #repertoire figure {
    width: 60%;
    margin: 20px auto; }
    #content #repertoire figure img {
      width: 100%; }
  #content #repertoire li {
    width: 90%; }
  #content #repertoire h2 {
    margin-bottom: .2em; }
  #content #repertoire ul + h2 {
    margin-top: .4em; }
  #content #media div.flex {
    display: flex;
    align-items: flex-start;
    margin: 10px auto; }
    #content #media div.flex .repertoire {
      width: 45%;
      margin-right: 4%; }
    #content #media div.flex a {
      display: inline-block;
      position: relative;
      top: .18em;
      color: rgba(234, 211, 94, 0.8);
      font-size: 1.8em;
      text-shadow: 1px 1px black; }
      #content #media div.flex a:hover {
        background-color: transparent;
        color: #ead35e;
        text-shadow: 3px 0px 12px #cccccc; }
        #content #media div.flex a:hover *:after {
          content: "Play video"; }
  #content #media div:nth-child(4) {
    width: 60%;
    margin: 10px auto;
    text-align: center; }
  #content #media li {
    width: 80% !important;
    padding: .1em 2% !important;
    font-size: 1.2em;
    line-height: 1.0em; }
    #content #media li span {
      display: inline-block;
      margin-top: .35em;
      font-size: .65em;
      line-height: 1.4em; }
    #content #media li.playing {
      background-color: rgba(0, 0, 0, 0.2); }
  #content #media span {
    display: block;
    margin-bottom: .6em;
    font-family: "owl";
    text-transform: uppercase;
    letter-spacing: .05em; }
  #content #media:nth-child(4) {
    width: 100% !important;
    clear: both;
    margin: 10px auto; }
    #content #media:nth-child(4) h2, #content #media:nth-child(4) span {
      text-align: center; }
  #content #media h2, #content #media ul, #content #repertoire h2, #content #repertoire ul {
    width: 100% !important; }
    #content #media h2 li, #content #media ul li, #content #repertoire h2 li, #content #repertoire ul li {
      padding: .2em 0px;
      letter-spacing: .03em; }
  #content #booking div {
    display: flex;
    align-items: flex-start;
    margin: 20px auto 10%; }
    #content #booking div span {
      display: inline-block; }
  #content #booking span#contact {
    width: 40%;
    margin-right: 10%;
    line-height: 1.4em; }
    #content #booking span#contact address {
      font-style: normal; }
    #content #booking span#contact span {
      margin-bottom: 16px;
      padding-left: 4ch;
      text-indent: -3.5ch; }
  #content #booking span#press {
    padding: 10px 8px 5px;
    border: 1px solid rgba(255, 255, 255, 0.4); }
    #content #booking span#press span, #content #booking span#press img {
      display: block;
      margin-bottom: 8px; }
      #content #booking span#press span.caption, #content #booking span#press img.caption {
        width: calc(100% - 6px);
        margin-left: 6px;
        font-size: .8em; }

/* --                           -- */
/* -- @media for small screens -- */
/* --                         -- */
@media (max-width: 600px) {
  body {
    background: #680014 url() !important;
    font-size: 11pt;
    line-height: 1.4em; }

  footer {
    padding: 2px 1em 8px !important;
    font-family: 'owr' !important;
    font-size: .75em !important; }
    footer a {
      padding: 2px 3px; }
      footer a#top {
        margin-right: 3.5%; }

  header img {
    width: 90% !important; }

  nav {
    display: none; }

  h1, h2, p, section > div {
    width: 80%;
    margin-left: 10%;
    margin-right: 10%; }

  h1 {
    font-size: 6vw !important; }

  h2 {
    font-size: 5vw !important; }

  #content {
    padding-top: 10%; }
    #content a.toplink {
      width: 80% !important; }
    #content figure#bioimage {
      width: 86%;
      margin: 0px auto 1.2em; }
      #content figure#bioimage a.bionotes {
        display: none !important; }
    #content p {
      margin-bottom: .9em !important; }

  #performances figure {
    width: 85% !important;
    margin: 20px auto; }
  #performances ul, #concerts ul {
    width: 80% !important;
    margin-left: 10%;
    margin-right: 10%; }

  #repertoire div.repertoire, #media div.repertoire {
    width: 100% !important; }
  #repertoire div.repertoire + div.repertoire, #repertoire ul + h2, #media div.repertoire + div.repertoire, #media ul + h2 {
    margin-top: .8em !important; }
  #repertoire div.flex, #media div.flex {
    display: block !important; }
    #repertoire div.flex + div.repertoire, #media div.flex + div.repertoire {
      width: 90% !important; }
  #repertoire figure, #media figure {
    width: 80% !important;
    margin: 0px auto; }
    #repertoire figure img, #media figure img {
      width: inherit;
      height: auto; }
  #repertoire h2 + ul, #media h2 + ul {
    margin-top: .2em !important; }

  #media iframe {
    width: 80% !important;
    height: 80% !important;
    margin: 5px auto; }
  #media li {
    padding: .03em 2% !important; }
    #media li span {
      font-family: 'owr' !important; }

  #booking div {
    display: block !important;
    align-items: unset !important; }
    #booking div span#contact, #booking div span#press {
      display: block !important;
      width: 100% !important;
      margin: 5px auto 10px; }
    #booking div #press img {
      width: inherit;
      height: auto; } 
      
  #content #concerts aside {
  		width:80%;
  		}       
      
      }
@media screen and (max-width: 1400px) and (max-height: 780px) {
  body {
    font-size: 13pt; }

  a#vessela {
    width: 125px !important; }

  a#erik {
    width: 95px !important; }

  a#valerie {
    width: 120px !important; }

  a#thomasine {
    width: 150px !important; }

  header img {
    width: 55% !important; }

  nav {
    height: 72%; }
    nav img {
      width: 7vh !important;
      height: 7vh !important; } }
@media screen and (max-height: 900px) {
  nav img {
    width: 7vh !important;
    height: 7vh !important; } }

/*# sourceMappingURL=style.css.map */