body {
	-ms-hyphens: auto; /* ab IE10 */
  -moz-hyphens: auto; /* seit Firefox 6 */
  -webkit-hyphens: auto; /* seit Safari 5.1 (OS X), Safari 4.1 (iOS) */
  hyphens: auto;
}

body, p, ul, li, h1, h2, h3, h4, h5, h6 {
    font-family: 'Josefin Sans';
    color: black;
	-ms-hyphens: auto; /* ab IE10 */
  -moz-hyphens: auto; /* seit Firefox 6 */
  -webkit-hyphens: auto; /* seit Safari 5.1 (OS X), Safari 4.1 (iOS) */
  hyphens: auto;
}

  .control.icon-play {
     display:inline-block;
      margin-top: 3px;
     width: 0;
     height: 0;
     border-left: 10px solid transparent;
     border-right: 10px solid transparent;
     border-bottom: 18px solid #000;
     -moz-transform: rotate(90deg);
     -ms-transform: rotate(90deg);
     -o-transform: rotate(90deg);
     -webkit-transform: rotate(90deg);
}
.control.icon-pause {
  display:inline-block;
  margin-top: 3px;
  width: 18px;
  height: 18px;
  border-style: solid;
  border-width: 20px;
  border-color: #000;
  border-style: double;
  border-width: 0px 18px 0px 18px;
  border-width: 0px 0px 0px 18px;
}

.topnav {
  overflow: hidden;
  background-color:;
}
.topnav a {
  height: auto;
  float: left;
  display: block;
  color: #000;
  text-align: center;
  padding: 16px 10px 0px 16px;
  text-decoration: none;
}

.topnav a:hover {
  background-color:;
  color: #000;
}

.topnav a.active {
  background-color:;
  color: 000;
  font-size: 3vh;
}

.topnav .icon {
  display: none;
  font-size: 3.4vh;
  margin-right: 24px;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

/* Container for flexboxes */
.row {
  font-family: 'Josefin Sans';
  width: 100%;
  display: -webkit-flex;
  display: flex;
    margin: 0 auto;
    padding: 0px 0px 0px 0px;
    z-index: 1;
}

.column1 {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding: 6px;
  height: 0 auto;
}

.column2 {
  -webkit-flex: 2;
  -ms-flex: 2;
  flex: 2;
  padding: 6px;
  height: 0 auto; 
}

.column3 {
  -webkit-flex: 3;
  -ms-flex: 3;
  flex: 3;
  padding: 6px;
  margin: 0vw;
  height: 0 auto; 
}
.column4 {
  -webkit-flex: 4;
  -ms-flex: 4;
  flex: 4;
  padding: 6px;
  margin: 0vw;
  height: 0 auto; 
}
.column5 {
  -webkit-flex: 5;
  -ms-flex: 5;
  flex: 5;
  padding: 6px;
  margin: 0vw;
  height: 0 auto; 
}
.column6 {
  -webkit-flex: 6;
  -ms-flex: 6;
  flex: 6;
  padding: 6px;
  margin: 0vw;
  height: 0 auto; 
}
.column7 {
  -webkit-flex: 7;
  -ms-flex: 7;
  flex: 7;
  padding: 6px;
  height: 0 auto; 
}

.column8 {
  -webkit-flex: 8;
  -ms-flex: 8;
  flex: 8;
  padding: 6px;
  height: 0 auto; 
}

.column9 {
  -webkit-flex: 9;
  -ms-flex: 9;
  flex: 9;
  padding: 6px;
  margin: 0vw;
  height: 0 auto; 
}
.column10 {
  -webkit-flex: 10;
  -ms-flex: 10;
  flex: 10;
  padding: 6px;
  margin: 0vw;
  height: 0 auto; 
}
.column11 {
  -webkit-flex: 11;
  -ms-flex: 11;
  flex: 11;
  padding:0vw;
  margin: 6px;
  height: 0 auto; 
}
.column12 {
  -webkit-flex: 12;
  -ms-flex: 12;
  flex: 12;
  padding: 6px;
  margin: 0vw;
  height: 0 auto; 
}

/* Style the footer */
.footer {
    font-family: 'Josefin Sans'; 
    bottom:  5px;
    padding-bottom: 10px;
    height: auto;
	float:left;
	width:80%;
	color: #53BDE5;
	font-size:1vh;
	text-align:center;
	background-color:transparent;
    opacity: .5;
}
.footer a {
    color: #000;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
  .row {
    -webkit-flex-direction: column;
    flex-direction: column;
  }
}



body {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
  grid-auto-rows: 130px;
  place-items:center;
}


* {
  box-sizing: border-box;
}