/* Base styles */
html {
  background-color: #fff;
  color: #333;
  font-size: 18px;
  line-height: 1.5em;
  margin: 0;
  padding: 0; }

body {
  margin: 0;
  padding: 0; }

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

p,
ul {
  margin-bottom: 1rem; }

img {
  max-width: 100%;
  height: auto; }

a {
  color: #283f8b;
  text-decoration: none;
  -webkit-transition: color 150ms ease-in;
  transition: color 150ms ease-in; }

p a {
  text-decoration: underline; }

a:hover {
  color: #111421;
  text-decoration: none; }

body {
  font-family: "Crimson Text", "Georgia", serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5; }

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Open Sans Condensed", "Helvetica", "Arial", sans-serif;
  font-weight: 300;
  margin-top: 1em;
  margin-bottom: 0.5em; }
  h1:first-child,
  h2:first-child,
  h3:first-child,
  h4:first-child,
  h5:first-child,
  h6:first-child {
    margin-top: 0; }

h1 {
  font-size: 42px; }

h2 {
  font-size: 36px; }

h3 {
  font-size: 32px; }

h4 {
  font-size: 24px; }

.body--flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column; }

.main {
  padding: 1.5rem;
  width: 100%; }

.container--tiles {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch; }

.container--content {
  max-width: 750px; }

@media screen and (min-width: 768px) {
  .body--flex {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row; }
  .main {
    min-height: calc(100vh - 3rem);
    margin-left: 300px; } }

/* CSS Components */
.sidebar {
  background-color: #111421;
  opacity: 0.95;
  box-shadow: 0 2px 5px #111421;
  text-align: center;
  width: 100%;
  -webkit-transform: translateY(-102%);
          transform: translateY(-102%);
  -webkit-transition: -webkit-transform 150ms ease-out;
  transition: -webkit-transform 150ms ease-out;
  transition: transform 150ms ease-out;
  transition: transform 150ms ease-out, -webkit-transform 150ms ease-out;
  position: absolute;
  top: 0;
  z-index: 2; }

.logo {
  max-width: 250px;
  margin: 1em auto; }

.logo svg {
  max-width: 250px; }

.sidebar-toggle {
  display: block;
  width: 100%;
  padding: 7px 10px;
  height: 38px;
  background-color: #111421;
  color: #fff;
  font-family: "Open Sans", "Helvetica", "Arial", sans-serif;
  text-align: left;
  position: relative; }

.sidebar-toggle button {
  color: #fff;
  font-size: 1rem;
  border: none;
  background: transparent;
  font-family: "Open Sans", "Helvetica", "Arial", sans-serif;
  font-weight: 300;
  text-transform: uppercase;
  cursor: pointer; }

.sidebar-toggle .fa {
  margin-right: 5px; }

.sidebar-toggle .icon {
  width: 40px;
  display: inline-block;
  position: absolute;
  right: 0;
  top: 0; }

.sidebar.is-active {
  -webkit-transform: translateY(0);
          transform: translateY(0); }

@media screen and (min-width: 768px) {
  .logo {
    margin: 2em auto; }
  .sidebar {
    height: 100%;
    width: 300px;
    position: fixed;
    -webkit-transform: none;
            transform: none;
    box-shadow: none;
    overflow-x: hidden;
    overflow-y: auto;
    opacity: 1; }
  .sidebar-toggle {
    display: none; }
  .sidebar--bg {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center; }
  .bg--celli .sidebar {
    background-image: url(../images/backgrounds/bg-02.jpg); }
  .bg--violin .sidebar {
    background-image: url(../images/backgrounds/bg-04.jpg); }
  .bg--trumpets .sidebar {
    background-image: url(../images/backgrounds/bg-01.jpg); }
  .bg--trumpets2 .sidebar {
    background-image: url(../images/backgrounds/bg-06.jpg); }
  .bg--horns .sidebar {
    background-image: url(../images/backgrounds/bg-03.jpg); }
  .bg--trombones .sidebar {
    background-image: url(../images/backgrounds/bg-05.jpg); }
  .bg--bigband .sidebar {
    background-image: url(../images/backgrounds/bg-bb2.jpg); } }

/*
* Navigation
*/
/*
* Main navigation
*/
.main-navigation {
  font-family: "Open Sans", "Helvetica", "Arial", sans-serif;
  text-transform: uppercase;
  font-weight: 400; }

.main-navigation__list {
  list-style: none;
  padding: 0;
  margin: 0; }

.main-navigation__list li:before {
  content: none; }

.main-navigation__link {
  display: block;
  color: #fff;
  font-size: 1.25rem;
  line-height: 2.5rem;
  text-decoration: none;
  -webkit-transition: background-color 150ms ease-in, color 150ms ease-in;
  transition: background-color 150ms ease-in, color 150ms ease-in; }

.main-navigation__link:hover,
.main-navigation__link.active {
  color: #333;
  background-color: #fff; }

/*
* Social navigation
*/
.social-navigation {
  margin: 1.5rem 0;
  padding-top: 1.5rem;
  border-top: 2px solid #fff; }

.social-navigation__list {
  list-style: none;
  padding: 0;
  margin: 0; }

.social-navigation__list li {
  display: inline; }

.social-navigation__list li + li {
  margin-left: 5px; }

.social-navigation__link {
  background-color: transparent;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 50%;
  font-size: 24px;
  line-height: 40px;
  width: 50px;
  height: 50px;
  display: inline-block;
  padding: 3px;
  -webkit-transition: background-color 150ms ease-in, color 150ms ease-in;
  transition: background-color 150ms ease-in, color 150ms ease-in; }

.social-navigation__link:hover {
  background-color: #fff; }
  .social-navigation__link:hover i {
    color: #333; }

@media screen and (min-width: 768px) {
  .navigation {
    height: auto; } }

.contentblock:after {
  content: "";
  display: table;
  clear: both; }

.contentblock:not(:first-child) h1,
.contentblock:not(:first-child) h2,
.contentblock:not(:first-child) h3,
.contentblock:not(:first-child) h4,
.contentblock:not(:first-child) h5,
.contentblock:not(:first-child) h6 {
  padding-top: 1.5rem;
  border-top: 1px solid #aaa; }

.teammember img {
  width: 200px;
  display: block; }

.contentblock ul {
  list-style: circle;
  padding-left: 1rem; }

@media screen and (min-width: 580px) {
  .contentblock:not(:first-child) {
    margin-top: 3.5em; }
  .contentblock:not(:first-child) h1 + p,
  .contentblock:not(:first-child) h1 + ul,
  .contentblock:not(:first-child) h1 + div,
  .contentblock:not(:first-child) h2 + p,
  .contentblock:not(:first-child) h2 + ul,
  .contentblock:not(:first-child) h2 + div,
  .contentblock:not(:first-child) h3 + p,
  .contentblock:not(:first-child) h3 + ul,
  .contentblock:not(:first-child) h3 + div,
  .contentblock:not(:first-child) h4 + p,
  .contentblock:not(:first-child) h4 + ul,
  .contentblock:not(:first-child) h4 + div,
  .contentblock:not(:first-child) h5 + p,
  .contentblock:not(:first-child) h5 + ul,
  .contentblock:not(:first-child) h5 + div,
  .contentblock:not(:first-child) h6 + p,
  .contentblock:not(:first-child) h6 + ul,
  .contentblock:not(:first-child) h6 + div {
    padding-top: 1.5rem;
    border-top: 1px solid #aaa; }
  .contentblock h1,
  .contentblock h2,
  .contentblock h3,
  .contentblock h4,
  .contentblock h5,
  .contentblock h6 {
    width: 150px;
    float: left;
    line-height: 1.2;
    margin: 0;
    text-align: right;
    font-weight: 300; }
  .contentblock > p,
  .contentblock > ul,
  .contentblock > div {
    margin-left: 180px;
    max-width: 610px; } }

@media screen and (min-width: 768px) {
  .teammember p:nth-child(2) {
    margin-bottom: 0; }
  .teammember img {
    float: left;
    margin-right: 1rem; } }

.tile {
  border: 1px solid #f0f0f0;
  border-radius: 3px;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 400px;
          flex: 1 1 400px;
  margin-bottom: 1.5em;
  min-height: inherit;
  padding: 0;
  margin-right: 0.5rem;
  margin-left: 0.5rem; }

.tile--image {
  color: #fff;
  background-color: #28314f;
  min-height: 280px;
  position: relative; }
  .tile--image .tile--image__background {
    border-radius: 3px;
    background-size: cover;
    background-position: center center;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    -webkit-transition: opacity 150ms ease-in;
    transition: opacity 150ms ease-in; }
  .tile--image .image__description {
    opacity: 0;
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    width: 100%;
    -webkit-transition: opacity 150ms ease-in;
    transition: opacity 150ms ease-in;
    text-align: right;
    font-size: 14px; }
  .tile--image .image__description p {
    margin-bottom: 0; }
  .tile--image .image__title {
    font-family: "Open Sans Condensed", "Helvetica", "Arial", sans-serif;
    font-size: 20px; }
  .tile--image:hover {
    color: #fff; }
    .tile--image:hover .tile--image__background {
      opacity: 0.45; }
    .tile--image:hover .image__description {
      opacity: 1; }

.tile--project {
  color: #333;
  -webkit-transition: background-color 150ms ease-in, color 150ms ease-in;
  transition: background-color 150ms ease-in, color 150ms ease-in; }

.tile--project:hover {
  background-color: #f0f0f0;
  color: #333; }

.project--disabled {
  cursor: default; }

.project__current {
  border-color: #28314f;
  background-color: #28314f;
  color: #fff;
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%; }

.project__current:hover {
  background-color: #1f273e;
  border-color: #1f273e;
  color: #fff; }

.project__content {
  padding: 3rem 1.5rem;
  position: relative; }

.project__header {
  padding-bottom: 0.3rem;
  border-bottom: 1px solid #aaa;
  margin-bottom: 2rem; }

.project__title {
  display: block;
  font-family: "Open Sans Condensed", "Helvetica", "Arial", sans-serif;
  line-height: 1;
  font-size: 32px; }

.project__subtitle {
  font-family: "Open Sans Condensed", "Helvetica", "Arial", sans-serif;
  font-size: 20px;
  margin-left: 0.1em;
  display: block; }

.project__details p {
  font-family: "Crimson Text", "Georgia", serif;
  line-height: 1.1;
  margin-bottom: 0.5em; }

.project__lineup {
  position: absolute;
  right: 1rem;
  top: 1rem;
  opacity: 0;
  -webkit-transition: opacity 150ms ease-in;
  transition: opacity 150ms ease-in; }

.project__lineup ul {
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end; }

.project__lineup li {
  display: block;
  height: 15px;
  font-family: "Open Sans Condensed", "Helvetica", "Arial", sans-serif;
  color: #ccc;
  text-transform: uppercase;
  margin-left: 0.5rem;
  font-size: 0.8rem; }

.project__lineup li:before {
  content: "#"; }

.tile--project:hover .project__lineup {
  opacity: 1; }

@media screen and (min-width: 580px) {
  .project__title {
    font-size: 40px; }
  .project__content {
    padding: 4rem 3rem; } }

ul {
  list-style: none;
  margin-left: 1em; }

.theme--blue ul li:before {
  background-color: #28314f; }

.theme--red ul li:before {
  background-color: #712211; }

.theme--purple ul li:before {
  background-color: #441245; }

.button {
  display: block;
  font-family: "Open Sans Condensed", "Helvetica", "Arial", sans-serif;
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.4rem 1rem;
  margin-bottom: 0.5rem;
  border: 1px solid #28314f;
  background-color: transparent;
  color: #28314f;
  -webkit-transition: color 150ms ease-out, background-color 150ms ease-out;
  transition: color 150ms ease-out, background-color 150ms ease-out; }

.button--large {
  display: block;
  text-align: center;
  width: 100%;
  font-size: 18px;
  padding: 0.4rem 2rem;
  border-width: 2px; }

.button:hover {
  background-color: #28314f;
  color: #fff; }

.button:active {
  background-color: #1f273e;
  border-color: #fff;
  color: #fff; }

.button--disabled,
.button--disabled:hover,
.button--disabled:active,
.button--disabled:focus,
.button--disabled:visited {
  background-color: transparent;
  border-color: #aaa;
  color: #aaa;
  pointer-events: none;
  cursor: default; }

@media screen and (min-width: 768px) {
  .button {
    display: inline-block; }
  .button + .button {
    margin-left: 0.5rem; } }

.expandable__content {
  display: none;
  border-left: 2px solid #aaa;
  padding-left: 1rem; }

.expandable__trigger {
  font-family: "Open Sans Condensed", "Helvetica", "Arial", sans-serif;
  font-size: 1.5rem;
  text-decoration: none;
  color: #283f8b; }

.expandable__trigger .fa {
  margin-left: 5px;
  -webkit-transition: -webkit-transform 150ms ease-in;
  transition: -webkit-transform 150ms ease-in;
  transition: transform 150ms ease-in;
  transition: transform 150ms ease-in, -webkit-transform 150ms ease-in; }

.expandable__trigger:hover {
  color: #28314f; }

.expandable__trigger:hover .fa {
  -webkit-transform: translateY(10%);
          transform: translateY(10%); }

.expandable.is-active .expandable__content {
  display: block; }

.expandable.is-active .fa {
  color: #aaa;
  -webkit-transform: translateY(10%);
          transform: translateY(10%); }

.expandable + .expandable {
  margin-top: 2rem; }

.project-intro h1 {
  margin-bottom: 0;
  line-height: 1em; }

.project-intro p {
  font-size: 1.2rem;
  line-height: 1.2em;
  margin-top: 0.5rem; }

.imagegroup,
.gallery {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between; }

.thumbnail {
  -webkit-box-flex: 0;
      -ms-flex: 0 1 150px;
          flex: 0 1 150px;
  max-width: 150px;
  max-height: 150px;
  margin-bottom: 1rem;
  background-color: #28314f;
  opacity: 1;
  -webkit-transition: opacity 150ms ease-in;
  transition: opacity 150ms ease-in; }

.thumbnail:hover {
  opacity: 0.6; }

img[data-action="zoom"]:hover,
img[data-action="gallery"]:hover {
  cursor: zoom-in; }

.mc-field-group label {
  display: block;
  font-family: "Open Sans Condensed", "Helvetica", "Arial", sans-serif; }

.mc-field-group input {
  font-family: "Crimson Text", "Georgia", serif;
  color: #333;
  border: 1px solid #111421;
  width: 300px;
  max-width: 100%;
  height: 2rem;
  line-height: 2rem;
  margin-bottom: 1rem;
  font-size: 1rem;
  padding: 0.5rem;
  outline: none;
  -webkit-transition: border-color 150ms ease-out;
  transition: border-color 150ms ease-out; }

.mc-field-group input:hover {
  border-color: #aaa; }

.mc-field-group input:focus {
  border-color: #aaa;
  box-shadow: 0 0 5px #aaa; }

input[type="submit"] {
  cursor: pointer; }

.partnerlogo {
  margin-bottom: 1.5rem;
  background-color: #fafafa;
  padding: 0.5rem;
  text-align: center; }

.partnerlogo figcaption {
  color: #999; }

@media screen and (min-width: 580px) {
  .partnerlogos {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between; }
  .partnerlogo--koop,
  .partnerlogo--fortissimo {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc(50% - 1rem);
            flex: 0 0 calc(50% - 1rem);
    max-width: calc(50% - 1rem);
    margin-bottom: 2rem; }
  .partnerlogo--forte {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc(33% - 0.8rem);
            flex: 0 0 calc(33% - 0.8rem);
    max-width: calc(33% - 0.8rem); }
  .partnerlogo--mezzopiano {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc(33% - 0.8rem);
            flex: 0 0 calc(33% - 0.8rem);
    max-width: calc(33% - 0.8rem);
    background-color: transparent;
    padding: 0;
    -ms-flex-item-align: center;
        -ms-grid-row-align: center;
        align-self: center; }
    .partnerlogo--mezzopiano figcaption {
      display: none; }
  .partnerlogo--piano {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc(25% - 0.5rem);
            flex: 0 0 calc(25% - 0.5rem);
    max-width: calc(25% - 0.5rem);
    background-color: transparent;
    padding: 0;
    -ms-flex-item-align: center;
        -ms-grid-row-align: center;
        align-self: center; }
    .partnerlogo--piano figcaption {
      display: none; } }

@media screen and (min-width: 768px) {
  .partnerlogos {
    display: block; } }

@media screen and (min-width: 1024px) {
  .partnerlogos {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; } }