body{
    margin:0;
}


.hexawindow {
    width: 90%;
    height: 11em;
    position: relative;
    display: inline-block;
    margin-left:auto;
    margin-right:auto;
}

.toggle {
    margin: 0;
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    
    outline: none;
    -webkit-appearance: none;
    border: none;
    
    z-index: 100;
    cursor: pointer;
  }

.hexashutter,
.hexavideo,
.hexathumb {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.hexashutter {
    position:relative;
    transform-origin: center left;
    background-color:#af0000;
    color:#FFF;
    z-index: 10;
}

.hexashutter::before {
    font-size:10vw;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    vertical-align: middle;
    text-align: center;
    color:#FFF;
    content: attr(data-day);
}

.toggle:checked{
    pointer-events: none;
}

.toggle:checked ~ .hexashutter{
    animation-name: openshutter;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

.toggle:hover ~ .hexashutter::before{
    color:gold;
}


@keyframes openshutter{
    from{transform: rotate3d(0,0,0,0deg)}
    to{transform: rotate3d(0,1,0,-90deg)}
}

.hexavideo > iframe {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 4.5%;
    margin-bottom: auto;
    width:60em;
    height:calc(60em/1.77);
}

.hexathumb{
    background-color:#000;
    z-index: 8;
}

.hexaplaybtn{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 70%;
    height: 50%;
    background-color:#af0000;
    border-radius: 2em;
    margin: auto;
}

.hexaplaybtn:hover{
    width: 73.5%;
    height: 52%;
}

.hexaplaysign {
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    width: 0; 
    height: 0;
    margin-left: 25%;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
    border-top: 2.5vw solid transparent;
    border-bottom: 2.5vw solid transparent;
    border-left: 5vw solid white;
    z-index: 9;
}

[data-number]::before {
    font-size:2vw;
    margin-left: 0.2em;
    margin-right: auto;
    margin-top: 0.2em;
    margin-bottom: auto;
    position: absolute;
    color:#FFF;
    content: attr(data-number);
    z-index: 11;
}

[data-title]::before{
    font-size:1.4em;
    margin-left: 0.2em;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: 0.2em;
    position: absolute;
    left:0;
    bottom:0;
    color:#FFF;
    max-height: 2.4em;
    overflow: hidden;
    text-overflow: ellipsis;
    content: attr(data-title);
    z-index: 11;
}

.hexavideo {
    position: absolute;   
    top:0;
    left:0;
    margin-top:5%;
    width: 100%;
    height:90%;
    background-color:#555555aa;
    z-index: 20;
}

.hexaclose {
    width: 3em;
    height: 3em;
    position: absolute;
    z-index:21;
    opacity:100%;
   transform:rotate(45deg);
 -ms-transform:rotate(45deg); /* IE 9 */
 -webkit-transform:rotate(45deg); /* Safari and Chrome */
 margin-left:0.3em;
 margin-top:0.3em;
 }
 
 .hexaclose::before, .hexaclose::after {
   content: "";
   position: absolute;
   z-index: -1;
   background: #fff;
 }
 
 .hexaclose::before {
   left: 50%;
   width: 30%;
   margin-left: -15%;
   height: 100%;
 }
 
 .hexaclose::after {
   top: 50%;
   height: 30%;
   margin-top: -15%;
   width: 100%;
 }

 .hexaclose:hover::after,
 .hexaclose:hover::before{
    box-shadow:2em;
    background: #af0000;
 }

 .hexagrid{
    display:table;
    width:90%;
    height: 100%;
    margin-top:2em;
    margin-left:auto;
    margin-right:auto;
 }

 .hexarow{
    display:table-row;
 }

 .hexacell{
    display:table-cell;
 }

 navbar{
    display:block;
    background-color: #af0000;
    width:100%;
 }

 .hexalink{
     padding:0;
     margin:0;
     display: inline;
 }

 .current > a{
    background-color: #880000
 }

 .hexalink a{
    display: inline-block;
    font-size: 2em;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.hexalink a:hover{
    color:gold;
}