@font-face {
  font-family: 'Luciole';
  src: url('../fonts/Luciole-Regular.woff') format('woff');
}

@font-face {
  font-family: 'LucioleBold';
  src: url('../fonts/Luciole-Bold.woff') format('woff');
}

body {
  margin: 0px;
}

body, button, input {
  font-family: 'Luciole', sans-serif;
  font-size : 12pt;
}

body.aphone, body.aphone button, body.aphone input, .aphone p, .aphone {
  font-size : 25pt;
}

body.iphone, body.iphone button, body.iphone input, .iphone p, .iphone {
  font-size : 30pt;
}

a:link, a:visited {
  color: #FFFFFF;
  font-family: 'LucioleBold', sans-serif;
}

button, input  {
  margin : 0.4ch;
}

div {
  padding: 0px;
  margin: 0px;
}

#size-test {
  display: none;
  visibility: hidden;
  width: 12cm;
  height: 10cm;
}

div.top-bar {
  padding: 5pt 1vw 5pt 1vw;
  margin-top: 0px;
  border-top: 0px;
  background-color: #f58533;
  color: white;
  font-size: 25pt;
}

div.top-bar p {
  text-align: center;
  padding: 0px 5% 0px 5%;
}

div.menu-button {
  position: absolute;
  margin-top: 2.2vw;
  width:  6vw;
  height: 6vw;
  right: 2vw;
  top: 1vw;
}

div.menu-button img {
  width: 100%;
}

.menu-content {
  display: none;
  position: absolute;
  background-color: #0081dc;
  width: 12ch;
  right: 0px;
  top: 6vw;
  z-index: 1;
  border-radius: calc(10pt + 0.2vw);
}

.menu-content li {
  list-style: none;
  font-size: larger;
}

.menu-content a {
  text-decoration: none;
  color: white;
}

/* Show the dropdown menu on hover */
.menu-button:hover .menu-content {display: block;}

/* table.content-grid */
td.wide {
  width: 67vw;
}

td.hugefont {
  font-size: 100px;
}

div.subtitle {
  text-align: center;
  padding: 10px 10% 10px 10%;
  color: white;
  background-color: #a9e2ff;
  font-size: larger;
}

div.two-items {
  margin: 0px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

body.wide div.grid-item {
  width: 29vw;
  margin: 2vw;
}

div.grid {
  /* background-color: #0098B2; */
  /* background-color: #333333; */
  background-color: #0081dc;
  padding: 2vw 0px 3vw 0px;
}

div.grid-item p {
  margin-top: 0px;
}

div.grid-item p.last {
  margin-bottom: 0px;
}

body.wide div.grid-item.square {
  width: 29vw;
  height: 29vw;
}

body.wide div.grid-item.borders {
  width: 27vw;
  border: 1vw solid;
  border-radius: 1vw;
}

body.narrow div.grid-item {
  width: 44vw;
  margin: 2vw;
}

body.narrow div.grid-item.square {
  height: 44vw;
}

body.narrow div.grid-item.borders {
  width: 40vw;
  border: 2vw solid;
  border-radius: 2vw;
}

body.reallynarrow.narrow div.grid-item {
  width: 90vw;
  margin: 5vw;
}

body.reallynarrow.narrow div.grid-item.square {
  height: 90vw;
}

body.reallynarrow.narrow div.grid-item.borders {
  width: 86vw;
  border: 2vw solid;
  border-radius: 2vw;
}

div.grid-item img {
  width: 100%;
  margin: 0px !important;
}

img.round {
  width: 96%;
  border: 0.5vw solid #ffdd44 !important;
  border-radius: 50% !important;
}

.c1 {
  color: white;
  background-color: #00CCEE;
  border-color: #00CCEE !important;
}

.c2 {
  color: white;
  background-color: #f58433;
  border-color: #f58433 !important;
}

.c3 {
  color: white;
  background-color: #ffaa00;
  border-color: #ffaa00 !important;
}

.c4 {
  color: white;
  background-color: #7dcf7d;
  border-color: #7dcf7d !important;
}

body.narrow div.carousel {
  width: 100vw;
  height: 83vw;
}

body.wide div.carousel {
  width: 100vw;
  height: 50vw;
}

canvas#CarouselCanvas {
  width: 100%;
  height: 100%;
  background: #444444;
}

img.fullwidth {
  width: 100vw;
  border: 0px;
}

div.body-text {
  background-color: white;
  color: #555;
  padding: 10px calc((100% - min(90%,600pt)) * 0.5) 10px calc((100% - min(90%,600pt)) * 0.5);
  margin: 0px;
  width: min(90%, 600pt);
}

div.body-text.bigfont {
  font-size: 20pt;
}

div.body-text a {
  color : #55e;
}

div.body-text h2 {
  margin-top: 1ch;
}

/*div.body-text img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-radius: 0.5ch;
}*/

img.shadow {
  box-shadow: 0.1ch 0.1ch 0.5ch 0.5ch rgba(50, 50, 50,0.3);
}

.wide div.body-text img {
  width: 100%;
}

img.wide3p2 {
  width: 100%;
  height: 67%;
}

.narrow div.body-text img {
  width: 100%;
}

div.text-column {
  color: #ddd ;
  background-color: #0d2b67;
}

div.text-block {
  color: #ddd ;
  background-color: #0d2b67;
  /* width: 100%; */
  padding: 10px 10% 10px 10%;
}

div.text-block a {
  color : white;
}


body.narrow div.text-column {
  width: 100%;
  padding: 10px 10% 10px 10%;
}

body.wide div.text-column {
  width: 30%;
  flex: 1 1 40%;
}

body.wide div.text-column p, body.wide div.text-column h3 {
  padding: 0.5ch 5vw 0.5ch 5vw;
}

div.app-stores-separate {
  width: 50%;
  margin: 2vw 25% 2vw 25%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

div.app-stores-inline {
  width: 100%;
  margin: 2vw 0% 2vw 0%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

div.app-stores h2 {
  text-align: center;
  flex: 1 1 90%;
  margin-bottom: 2vw;
  color : #444444;
}

div.app-store {
  flex: 1 1 40%;
  margin: 0px 1vw 0px 1vw;
}

body.reallynarrow div.app-store {
  flex: 1 1 80%;
  margin: 0px 1vw 0px 1vw;
}

div.app-store img {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  height: 100%;
}

div.instruments {
  padding: 10px 20px 10px 20px;
  color: white;
  background-color: #a9e2ff;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

div.instrument {
  margin: 2vw;
  background-color: #0d2b67;
  border-radius: 10px;
  padding: 20px;
}

body.wide div.instrument {
  width: calc(15vw);
  height: calc(24vw);
}

body.narrow div.instrument {
  width: calc(2 * 15vw);
  height: calc(2 * 24vw);
}

div.instrument img {
  position: relative;
  top: -5vw;
}

div.instrument img.flute {
  left: 2vw;
}

div.instrument img.violin {
  left: 1vw;
}

div.instrument h2 {
  font-size: 5vw;
}

div.video {
  width: 100vw;
  height: 56vw;
}

div.gallery-thumbnails {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.gallery-thumbnails div.thumbnail {
  padding: 1ch;
}

.gallery-thumbnails div.thumbnail .landscape {
  width: 300px;
}

.gallery-thumbnails div.thumbnail .portrait {
  width: 200px;
}

.poem {
  text-align: center;
  font-style: italic;
}

div.footer {
  padding: 30px 10% 30px 10%;
  background-color: #041122;
  color: #dddddd;
/*  font-size: smaller;*/
}

.footer-menu li {
  list-style: none;
  font-size: larger;
}

.footer-menu a {
  text-decoration: none;
  color: #dddddd;
  margin-right: 4ch;
  font-size: larger;
  /* color: #0d2b67; */
}

div.error404 {
  color : #444444;
  text-align: center;
  padding: 10px 10% 10px 10%;
}

div.error404 h2 {
  text-align: center;
  padding: 50px 10% 100px 10%;
}

div.error404 a:link, div.error404 a:visited {
  background-color: #60aa38;
  border-radius: 2vw;
  padding: 1.5vw;
  color : white;
  text-decoration: none;
}

div#cookie-question {
  position: fixed;
  display: none;
  bottom: 0px;
  width: 100%;
  background-color: #333;
  color: white;
  text-align: center;
  padding: 1vw 5% 1vw 5%;
  box-shadow: 16px 16px 16px 16px rgba(0,0,0,0.3);
}

.desktop div#cookie-question, .desktop div#cookie-question button {
  font-size: 12pt;
}

div#cookie-question h2 {
  text-align: center;
}

div#cookie-question button {
  padding: 0.4ch;
  color: white;
  border-radius: 0.7ch;
}

div#cookie-question button#accept_all_cookies {
  background-color : #5b5;
  border: 3px solid #fff;
  color : #333;
}

div#cookie-question button#accept_internal_cookies, div#cookie-question button#minimal_cookies {
  background-color : #222;
  border: 3px solid #555;
}

div#cookie-question a {
  color : white;
}

div.cookie-selection {
/*  width: 100%;*/
  padding: 1ch 10% 1ch 10%;
  color : white;
  background-color: #0d2b67;
}

div#cookie-update-feedback {
  display: none;
  position: absolute;
  padding: 1ch;
  left: 0px;
  color: white;
  font-size: larger;
}

.radio {
  -webkit-appearance: none;
  background-color: #a9e2ff;
  border: 0.3ch solid #a9e2ff;
  border-radius: 0.6ch;
  width: 1.2ch;
  height: 1.2ch;
  display: inline-block;
  vertical-align: middle;
}

.radio:checked {
  background-color: #0000bb;
}

h1,h2,h3{
  font-family: 'LucioleBold', sans-serif;
  /* text-transform: uppercase; */
}

h1 {
  text-align: center;
  margin: 2vw;
}

body.wide h1 {
  font-size: 6vw;
  margin: 2vw 2ch 2vw 2ch;
}

body.narrow h1 {
  font-size: 8vw;
  padding-left: 10%;
  padding-right: 10%;
}

.bg-video {
  width: 100%;
  /* height: 10%; */
}

h2 {
  padding: 0px;
  margin: 2vw 0px 2vw 0px;
  text-align: left;
  font-size: 20pt;
}