* { margin: 0; padding: 0;}

* {
    backface-visibility:  hidden;
    -webkit-backface-visibility:  hidden;
    -webkit-tap-highlight-color:  transparent;
}


::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 8px;
    height: 8px;
    background-color: rgba(0,0,0,0.1);
}
::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: #FED02E;
}

input, textarea, select, a, button { outline: none; }

html {
    width: 100%;
    height: 100%;
    position: fixed;
}

body, button { /* useragent resets font */
    background-color: #f7f7f7;
    /*background: #f7f7f7; #fc3; #FDC228;*/
    font-family: 'Roboto', sans-serif, 'Arial';
    color: #000066;
    font-size: 13px;
    font-weight: 300;
    line-height: 20px;
    overflow: hidden;
}

body {
    width: 100%;
    height: 100%;
}

@media (orientation: landscape) {

    video.cover {
        -o-object-fit: cover;
        object-fit: cover;
    }

}

h1, h2, h3, h4, h5, h6 {
    margin: 0; padding: 0; font-weight: normal; font-family: inherit; font-size: inherit;
}


a {
    /*color: #1e7ad3;*/
    text-decoration: none;
    color: rgb(30, 140, 190);
    cursor: pointer;
}

a:hover {
    color: rgb(120, 200, 230);
    /*text-decoration: underline;*/
}

p {
    margin-bottom: 10px;
}

svg.icon {
    fill: #1f28b8;
}

label {
    width: 100%;
    font-size: 20px;
    font-weight: 300;
    display: inline-block;
    margin-top: 10px;
    margin-bottom: 8px;
    position: relative;
}

input + label {
    width: auto;
    margin: 0px 10px;
}

/*input:focus + label[data-error]::after {
    content: attr(data-error);
    display: block;
    position: absolute;
    font-size: 12px;
    font-weight: 200;
    width: 100px;
    right: -120px;
    background-color: #79a9ef;
    color: white;
    padding: 8px;
    border-radius: 4px;
}

label[data-error]::before {
    content:'';
    position:absolute;
    right:-6px;
    transform: translateY(35px);
    width:0; height:0;
    border-color: transparent #79a9ef transparent transparent;
    border-width:10px;
    border-style:solid;
}*/

input[type=checkbox] + label:before,
input,
textarea {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 16px;
    color: #535458;
    width: 100%;
    height: 30px;
    border-width: 1px;
    border-style: solid;
    border-color: #a8acbc #babdcc #c0c3d2;
    border-radius: 6px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

input.invalid, textarea.invalid {
    color: firebrick;
}

input[type=checkbox]:focus + label:before,
input[type=text]:focus,
input[type=password]:focus,
input[type=email]:focus,
textarea:focus {
    color: #535458; /* focus never invalid */
    outline: none;
    border-color: #66b1ee;
    -webkit-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
            box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
}

input[type=text],
input[type=password],
input[type=email],
textarea {
    padding: 2px 12px 0 8px;
    height: 35px;
    margin-bottom: 10px;
    /*box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;*/
}

input[type=checkbox] {
    display: none;
}

input[type=checkbox] + label {
    padding-left: 25px;
    text-align: left;
    font-size: 17px;
}

input[type=checkbox] + label:before {
    content: ' ';
    color: #000066;
    display: inline-block;
    position: absolute;
    left: 10px;
    bottom: 15px;

    width: 20px;
    height: 20px;
    margin-right: 10px;
    border-radius: 3px;

    font-size: 16px;
    text-align: center;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);

    cursor: pointer;
}

input[type=checkbox]:checked + label:before {
    content: "\2713";
}

textarea {
    resize: none;
    padding: 6px 12px 6px 8px;
}

button > * {
  pointer-events: none;
}

label.button,
button {
    position: relative;
    width:100%;
    height: 50px;
    background-color:#FFBC00;
    color:#fff;
    font-size: 26px;
    font-weight: 100;
    text-align: center;
    cursor: pointer;
    border-radius: 5px;
    border: none;
    /*box-shadow: inset 0 1px 0px 0px #ffe79a, 0px 1px 0px #afafaf;*/
    -webkit-box-shadow: 0px 1px 0px #afafaf;
            box-shadow: 0px 1px 0px #afafaf;
    overflow: hidden;
    z-index: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

label.button:active,
button:active {
    -webkit-box-shadow: inset 0px 1px 0px #d89e00;
            box-shadow: inset 0px 1px 0px #d89e00;
    background-color:#f2b100;
    -webkit-transform: translateY(1px);
    transform: translateY(1px);
}

/*button svg {
    height: 100%;
    width: 100%;
}*/

button.login_btn {
    /*text-shadow: 0px 1px 2px #d89e00;*/
}

button.reg_btn {
    margin-top: 30px;
    margin-bottom: 10px;
}

button.swipe:before {
    content: '';
    position: absolute;
    background: #54bf4b;
    bottom: 0;
    left: 0;
    right: 100%;
    top: 0;
    z-index: 1;
    -webkit-transition: right 0.2s ease-in;
    transition: right 0.2s ease-in;
}

button.swipe.toggle:before {
    right: 0;
}

button > .progress {
    position: absolute;
    bottom: 0;
    left: 0;
    top: 0;
    background: #54bf4b;
    z-index: -1;
    -webkit-transition: none 0.3s ease;
    transition: none 0.3s ease;
    -webkit-transition-property: width, top;
    transition-property: width, top;
}

/*button.swipe.progress:before {
    right: att(); not supported only on content!
}*/

button.swipe:after {
    content: 'Success';
    position: absolute;
    left: 0;
    height: 100%;
    width: 100%;
    top: 150%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    line-height: 0;
    z-index: 2;
    opacity: 0;
    -webkit-transition: none 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    transition: none 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    -webkit-transition-property: opacity, top;
    transition-property: opacity, top;
}

button.swipe.toggle:after {
    top: 50%;
    opacity: 1;
    -webkit-transition: top 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    transition: top 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
}

button.blue {
    background-color:#222684;
    color:#fff;
}

button.lightblue {
    background-color:rgb(85, 168, 236);
    color:#fff;
}

/*button:disabled,*/
button.gray {
    background-color:silver;
    color:#fff;
}

button.white {
    background-color:white;
    color:#006;
}

button.small {
    height: 25px;
    font-size: 14px;
    margin-top: 6px;
    margin-bottom: 10px;
}

label.button.files,
button.new_reg_btn {
    height: 25px;
    background-color:#222684;
    color:#fff;
    font-size: 14px;
    margin-top: 6px;
    margin-bottom: 10px;
    /*box-shadow: inset 0 1px 0px 0px #4045c7;*/
}

label.button.files:active,
button.new_reg_btn:active,
button.blue:active {
    -webkit-box-shadow: inset 0px 1px 0px #00137b;
            box-shadow: inset 0px 1px 0px #00137b;
    background-color:#1e2171;
}

button.white:active {
    -webkit-box-shadow: inset 0px 1px 0px silver;
            box-shadow: inset 0px 1px 0px silver;
    background-color:#f8f8f8;
}

/* Tooltip */

.tooltip {
    position: relative;
    margin-bottom: 5px;
    font-size: 12px;
    font-weight: 300;
    z-index: 1;
}

.tooltip::before, .tooltip::after {
    content: '';
    position: absolute;
    bottom: -20px; left: 20px;
    width: 0px; height: 0px;
    border: solid 10px;
    border-color: #a0c7ff transparent transparent transparent;
}

.tooltip::after {
    bottom: -19px;
    border-color: white transparent transparent transparent;
}

.tooltip p { margin: 0px; padding: 8px; }
.tooltip div:first-child {
    background-color: white;
    border: solid 1px #a0c7ff;
    border-radius: 5px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    overflow: hidden;
    height: 100%;
}

.tooltip.error {
    margin: 0px -10px 5px;
}

.tooltip.error::before, .tooltip.error::after {
    border-color: #891919 transparent transparent transparent;
}

.tooltip.error::after {
    border-color: firebrick transparent transparent transparent;
}

.tooltip.error p { padding: 8px; }
.tooltip.error div:first-child {
    background-color: firebrick;
    -webkit-box-shadow: inset 0px 1px 0px #891919;
            box-shadow: inset 0px 1px 0px #891919;
    border: solid 0px #a0c7ff;
    border-radius: 0;
    color: white;
    font-weight: 200;
}

/* Search Box */

.search {
    position: relative;
    margin: 0 auto;
    width: 300px;
}

.search input {
    height: 26px;
    width: 100%;
    padding: 0 12px 0 25px;
    background: white url("../resources/images/loop.png") 8px 6px no-repeat;
    border-radius: 13px;
}

.search input:focus + .results { display: block }

.search .results {
    display: block;
    position: absolute;
    top: 35px;
    left: 0;
    right: 0;
    z-index: 10;
    padding: 0;
    margin: 0;
    border-width: 1px;
    border-style: solid;
    border-color: #cbcfe2 #c8cee7 #c4c7d7;
    /*border-color: #ffebad #ffe79b #ffe186;*/
    border-radius: 3px;
    background-color: #ffd65c;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.search .results li { display: block }

.search .results li:first-child { margin-top: -1px }

.search .results li:first-child:before, .search .results li:first-child:after {
    display: block;
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    left: 50%;
    margin-left: -5px;
    border: 5px outset transparent;
}

.search .results li:first-child:before {
    border-bottom: 5px solid #c4c7d7;
    top: -11px;
}

.search .results li:first-child:after {
    border-bottom: 5px solid #fdfdfd;
    top: -10px;
}

.search .results li:first-child:hover:before, .search .results li:first-child:hover:after { display: none }

.search .results li:last-child { margin-bottom: -1px }

.search .results a {
    display: block;
    position: relative;
    margin: 0 -1px;
    padding: 6px 40px 6px 10px;
    color: #4C4C94;
    text-shadow: 0 1px #ffebad;
    border: 1px solid transparent;
    border-radius: 3px;
}

.search .results a:hover {
    text-decoration: none;
    color: #fff;
    /*text-shadow: 0 1px #ffebad;*/
    text-shadow: 0 -1px rgba(0, 0, 0, 0.8);
    background-color: #1f28b8;
    /*background: linear-gradient(to bottom, #ffd863 0%, #ffdc75 50%, #ffc820 51%, #ffcb29 100%);
    background: linear-gradient(to bottom, #1f28b8 0%, #2129b4 50%, #011686 51%, #001898 100%);
    background: linear-gradient(to bottom, #26257c 0%, #2a2981 50%, #010e66 51%, #0a1877 100%);*/
    -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
            box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
}

.search .results a span { font-weight: 200 }

.search .results a:before {
    content: '';
    width: 15px;
    height: 15px;
    position: absolute;
    top: 50%;
    right: 10px;
    margin-top: -7px;
    background: url("../resources/images/arrow_grey.png") 0 0 no-repeat;
    /*background: linear-gradient(to bottom, #ffd863 0%, #ffdc75 50%, #ffc820 51%, #ffcb29 100%);*/
}

.search .results a:hover:before {
    background: url("../resources/images/arrow.png") 0 0 no-repeat;
}

.lt-ie9 .search input { line-height: 26px }

/* Obis Styles */

#app {

}

#front {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*pointer-events: none;*/

    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */     /* NEW - Chrome */
    display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */

    /* Center Child Vertically Pixel Blurring Fix */
    /*-webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;*/
}

#front.hidden {
    display: none;
}

#back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /*display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;*/

}

#nsvr {
    position: absolute;
    top: 0;
    left: 0;
    /*width: 100vw;
    height: 100vh;*/
    /*-webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;*/
    /*position: absolute;*/
    width: 100%;
    height: 100%;
}

@-webkit-keyframes spinner {
  to {-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}

@keyframes spinner {
  to {-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}

.loading::after {
  content: '';
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  margin-left: -15px;
  border-radius: 50%;
  border: 2px solid #ccc;
  border-top-color: #07d;
  -webkit-animation: spinner .6s linear infinite;
          animation: spinner .6s linear infinite;
}

#spotlayer, #spotslayer .spots {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

#spotlayer.disabled,
#spotlayer.hidden {
    display: none;
}

#spotlayer .spot,
.spotlayer .spot {
    position: absolute;
    text-align: center;
    /* Niet nodig?
    -webkit-transform: translate(-50%, 50%);
    transform: translate(-50%, 50%);*/
}

#spotlayer nav {
    margin: 10px 0px 0px 10px;
}

#spotlayer nav button {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    pointer-events: auto;
    display: inline-block;
    vertical-align: top;
    margin-right: 10px;
    background-color: white;
    -webkit-box-shadow: none;
            box-shadow: none;
    width: auto;
    max-width: 150px;
    -webkit-transition: max-width .3s; /* Safari */
    -webkit-transition: max-width .5s;
    transition: max-width .5s;
    height: 40px;
    border-radius: 20px;
    border: 0;
    overflow: hidden;
    border: 2px solid #1f28b8;
    line-height: 14px;
    color: #1f28b8;
    font-size: 12px;
    font-weight: 300;
    white-space: pre;
}

#spotlayer nav button::after {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    position: absolute;
    content: "";
    left: -2px;
    top: -2px;
    width: 40px;
    height: inherit;
    border-radius: 50%;
    border: 2px solid #1f28b8;
}

#spotlayer nav button>span {
    display: inline-block;
    margin: 0px 14px 0px 42px;
}

#spotlayer nav button svg {
    position: absolute;
    fill: #1f28b8;
    left: 0px;
    top: 0px;
}


#spotlayer.zoom nav button.zoom,
#spotlayer.nav nav button.nav,
#spotlayer.info nav button.info,
#spotlayer nav button.checked {
    background-color: #1f28b8;
    max-width: 40px;
}

#spotlayer.zoom nav button.zoom,
#spotlayer.zoom nav button.zoom::after,
#spotlayer.info nav button.info,
#spotlayer.info nav button.info::after {
    border-color: white;
}

#spotlayer.zoom nav button.zoom svg,
#spotlayer.nav nav button.nav svg,
#spotlayer.info nav button.info svg {
    fill: white;
}

/* Nav Button Types */

#spotlayer nav button.nav {
    display: none;
}

#spotlayer nav button.info svg {
    width: 20px;
    height: 20px;
    -webkit-transform: translate(8px, 7px);
            transform: translate(8px, 7px);
}

#spotlayer nav button.zoom svg {
    width: 40px;
    height: 40px;
    -webkit-transform: translate(-3px, -2px);
            transform: translate(-3px, -2px);
}


#spotlayer nav button.nav svg {
    width: 80%;
    height: 80%;
}

/* Spot Types */

#spotlayer .spot {
    display: none;
}

#spotlayer.zoom .spot.zoom,
#spotlayer.nav .spot.nav,
#spotlayer.info .spot.info,
.spotslayer .spots.info {
    display: block;
}

#spotlayer .spot.zoom::before {
    content: '';
    width: 23px;
    height: 23px;
    display: inline-block;
    border-radius: 50%;
    background-color: white;
    position: absolute;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}

#spotlayer .spot.zoom svg {
    width: 45px;
    height: 45px;
    display: block;
    fill: #1f28b8;
    position: absolute;
    -webkit-transform: translate(-48.5%, -46%);
            transform: translate(-48.5%, -46%);
}

#spotlayer .spot.nav::after {
    content: '';
    width: 8px;
    height: 8px;
    display: inline-block;
    border-radius: 50%;
    border: 2px solid #1f28b8;
    background-color: white;
    -webkit-box-shadow: 0px 0px 0px 2px white;
            box-shadow: 0px 0px 0px 2px white;
    position: absolute;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}

#spotlayer .spot.info::after,
.spotlayer .spot.info::after {
    content: '';
    width: 0;
    height: 0;
    position: absolute;
}

#spotlayer .spot.clickable span {
    border: 2px solid #1f28b8;
    -webkit-box-shadow: 0px 0px 0px 2px white;
            box-shadow: 0px 0px 0px 2px white;
}

#spotlayer .spot.info.bottom::after,
.spotlayer .spot.info.bottom::after {
    /* arrow up */
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 10px solid white;
    top: 10px;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
}

#spotlayer .spot.info.bottom.long::after,
.spotlayer .spot.info.bottom.long::after {
    /* arrow up */
    border-bottom: 50px solid white;
}

#spotlayer .spot.info.top::after,
.spotlayer .spot.info.top::after {
    /* arrow down */
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 10px solid white;
    bottom: 10px;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
}

#spotlayer .spot.info.top.long::after,
.spotlayer .spot.info.top.long::after {
    /* arrow down */
    border-top: 50px solid white;
}

#spotlayer .spot.info.left::after,
.spotlayer .spot.info.left::after {
    /* arrow left */
    border-left: 10px solid white;
    border-bottom: 4px solid transparent;
    border-top: 4px solid transparent;
    right: 10px;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
}

#spotlayer .spot.info.left.long::after,
.spotlayer .spot.info.left.long::after {
    /* arrow left */
    border-left: 50px solid white;
}

#spotlayer .spot.info.right::after,
.spotlayer .spot.info.right::after {
    /* arrow right */
    border-right: 10px solid white;
    border-bottom: 4px solid transparent;
    border-top: 4px solid transparent;
    left: 10px;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
}

#spotlayer .spot.info.right.long::after,
.spotlayer .spot.info.right.long::after {
    /* arrow right */
    border-right: 50px solid white;
}

#spotlayer .spot span,
.spotlayer .spot span {
    position: absolute;
    display: block;
    background-color: white;
    font-size: 12px;
    line-height: 14px;
    padding: 2px 4px;
    border-radius: 6px;
    white-space: pre;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}

#spotlayer .spot.info.bottom span,
.spotlayer .spot.info.bottom span {
    -webkit-transform: translate(-50%, 0%);
            transform: translate(-50%, 0%);
    top: 20px;
}

#spotlayer .spot.info.bottom.long span,
.spotlayer .spot.info.bottom.long span {
    top: 60px;
}

#spotlayer .spot.info.top span,
.spotlayer .spot.info.top span {
    -webkit-transform: translate(-50%, 0%);
            transform: translate(-50%, 0%);
    bottom: 20px;
}

#spotlayer .spot.info.top.long span,
.spotlayer .spot.info.top.long span {
    bottom: 60px;
}

#spotlayer .spot.info.left span,
.spotlayer .spot.info.left span {
    -webkit-transform: translate(0%, -50%);
            transform: translate(0%, -50%);
    right: 20px;
}

#spotlayer .spot.info.left.long span,
.spotlayer .spot.info.left.long span {
    right: 60px;
}

#spotlayer .spot.info.right span,
.spotlayer .spot.info.right span {
    -webkit-transform: translate(0%, -50%);
            transform: translate(0%, -50%);
    left: 20px;
}

#spotlayer .spot.info.right.long span,
.spotlayer .spot.info.right.long span {
    left: 60px;
}

#spotlayer .spot.free span {
    border: 2px solid #ffd65c;
}

/* Open & Closed spot styling */

#spotlayer .spot:not(.open)>:not(:first-child) {
    display: none;
}

#spotlayer .spot.open::after,
#spotlayer .spot.open::before,
#spotlayer .spot.open>:first-child {
    display: none;
}

@media (orientation: landscape) {
    #spotlayer .spot.open {
        /*transform: translateX(25vw);*/
        right: 10%;
        top: 10%;
    }

    #spotlayer .spot .description {
        width: 25vw;
    }
}

@media (orientation: portrait) {
    #spotlayer .spot.open {
        /*transform: translateY(25vh);*/
        top: 10%;
        left: 0; /* center magic?  1/3 */
        right: 0; /* center magic? 2/3 */
    }

    #spotlayer .spot .description {
        max-width: 50vw;
    }
}

#spotlayer .spot .description {
    padding: 10px;
    background-color: white;
    border-radius: 5px;
    margin: auto; /* center magic? 3/3 */
}

#spotlayer .spot .description h1 {
    margin-bottom: 10px;
}

/*#spotlayer .spot:after {
    content: '';
    width: 100%;
    height: 100%;
    display: inline-block;
    border-radius: 50%;
    border: 2px solid white;

    -webkit-animation: pulse 3s ease-out;
    animation: pulse 3s ease-out;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;

}*/

.box {
    position: relative;
    margin: auto;
    border-radius: 8px;
    border: solid 4px #000066;
    /*border-radius: 12px;
    border: solid 8px rgba(0, 0, 102, .6);*/
    background-color: white;
    -webkit-box-shadow: 2px 6px 12px -6px #000;
            box-shadow: 2px 6px 12px -6px #000;
    -ms-flex-negative: 1;
    flex-shrink: 1;

    overflow: hidden;
    z-index: 0;

    /* Center Vertically */
    /*position: relative;
    top: 50%;
    transform: translateY(-50%);*/

    -webkit-transition: none 500ms ease-out;
    transition: none 500ms ease-out;
    -webkit-transition-property: border, border-radius;
    transition-property: border, border-radius;
}

.box.noborder {
    /*width: 100%;
    height: 100%;*/
    border-radius: 0px;
    border: solid 0px #000066;
}

.box > nav {
    position: absolute;
    top: 5px;
    right: 0px;
    z-index: 2;
}

.box > nav ul {
    display: -webkit-box;
    display: -ms-flexbox;      /* TWEENER - IE 10 */     /* NEW - Chrome */
    display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
    list-style: none;
    margin: 0px 3px;
}

.box > nav li {
    width: 22px;
    height: 22px;
    border-radius: 15px;
    background: #000066 no-repeat center;
    -webkit-box-shadow: 1px 3px 6px -3px #333;
            box-shadow: 1px 3px 6px -3px #333;
    margin: 0px 3px;
    -webkit-transition: background-color 100ms ease-out;
    transition: background-color 100ms ease-out;
}

.box > nav li:hover {
    background-color: #66b1ee;
}

.box > nav li:active {
    background-color: #b2dcff;
}

/*.box nav li + li {
    margin-left: 10px;
}*/

.box > nav li.hidden {
    display: none;
}

.box > nav li.back {
    background-image: url(../resources/images/icons/arrow_back.svg);
    background-size: 14px;
    -webkit-box-ordinal-group: 11;
    -ms-flex-order: 10;
    order: 10;
}

.box > nav li.close {
    background-image: url(../resources/images/icons/cross_w.svg);
    background-size: 18px;
}

.box > nav li.fullscreen {
    background-image: url(../resources/images/icons/expand.svg);
    background-size: 12px;
}

/* TODO: rename # to form.login? */

#login {
    margin: 10px;
    text-align: left;
    width: 250px;
}

#login input:nth-of-type(2) {
    margin-bottom: 30px;
}

#login_status {
    display: none;
    font-size: 12px;
    color: firebrick;
    line-height: 14px;
    padding-top: 10px;
}

#login_status::before {
    content: '* ';
    font-weight: 200;
    font-size: 18px;
    color: firebrick;
}

#register {
    margin: 10px;
    text-align: left;
    width: 250px;
}

#offline_select {
    margin: 15px;
    text-align: center;
    width: 400px;
}

#offline_select nav {
}

#offline_select button {
    margin: 10px 20px 25px;
    text-align: center;
    width: 140px;
    height: 140px;
    font-size: 16px;
    font-weight: 300;
    overflow: hidden;
}

#offline_select button span {
    position: relative;
    font-weight: 300;
    top:50px;
}

#offline_select button .progress {
    right: 0;
    top: 100%;
}

button .state0,
button .state1,
button .state2 {
    position: absolute;
    top: 0%;
    width: 100%;
    height: 100%;
    -webkit-transition: none 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    transition: none 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    -webkit-transition-property: left, right, top, bottom;
    transition-property: left, right, top, bottom;
}

/* states to come */
#offline_select button.state0 .state1,
#offline_select button.state0 .state2,
#offline_select button.state1 .state2 {
    top: -100%;
}

/* states passed */
#offline_select button.state1 .state0,
#offline_select button.state2 .state0,
#offline_select button.state2 .state1 {
    top: 100%;
}

/* states active */
#offline_select button.state0 .state0,
#offline_select button.state1 .state1,
#offline_select button.state2 .state2 {
    top: 0%;
}

#offline_select button[name=winx64] .state0 {
    background-image: url("../resources/images/icons/windows.svg");
    background-position: center 30px;
    background-size: 60px 60px;
    background-repeat: no-repeat;
}

#offline_select button[name=macx64] .state0 {
    background-image: url("../resources/images/icons/apple.svg");
    background-position: center 30px;
    background-size: 65px 65px;
    background-repeat: no-repeat;
}

#offline_select button .state1 .preload {
    background-image: url("../resources/images/icons/arrow_circle_w.svg");
    background-position: center;
    width: 100%;
    height: 90%;
    background-size: 90px 90px;
    background-repeat: no-repeat;
}

#offline_select button .state2 {
    background-image: url("../resources/images/icons/drop.svg");
    background-position: center 25px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
}

#offline_select header h1 {
    display: block;
    margin: -15px -15px 0px;
    background-color: white;
    font-size: 21px;
    line-height: 62px;

    -webkit-box-sizing: border-box;

            box-sizing: border-box;
}

#manager_select {
    margin: 15px;
    text-align: center;
    width: 360px;
}

#manager_select button {
    margin-top: 10px;
    height: 60px;
}

#manager_select button[name=make_ppt] {
    background-image: url("../resources/images/icons/powerpoint.svg");
    background-position: 20px 8px;
    background-size: 45px 45px;
    background-repeat: no-repeat;
}

#manager_select button[name=make_show] {
    background-image: url("../resources/images/icons/slideshow_img.svg");
    background-position: 10px;
    background-size: 75px;
    background-repeat: no-repeat;
}

#manager_select button[name=make_video] {
    background-image: url("../resources/images/icons/player.svg");
    background-position: 8px;
    background-size: 75px;
    background-repeat: no-repeat;
}

#manager_select button[name=edit] {
    background-image: url("../resources/images/icons/pencil_white.svg");
    background-position: 25px;
    background-size: 45px;
    background-repeat: no-repeat;
}

#manager_select button[name=trash] {
    background-image: url("../resources/images/icons/trash_white.svg");
    background-position: 20px;
    background-size: 45px;
    background-repeat: no-repeat;
}

#manager {
    margin: 15px;
    text-align: left;
    /*width: 380px;*/
}

#manager header h1 {
    display: block;
    margin: -15px -15px 10px;
    background-color: white;
    border-bottom: solid 4px #000066;
    font-size: 30px;
    line-height: 62px;
    text-align: left;
    padding-left: 20px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

#manager header h1:after {
    content: '';
    position: absolute;
    top: 5px; right: 15px;
    background: url("../resources/images/icons/pencil.svg") center no-repeat;
    height: 45px;
    width: 45px;
}
#manager span.help {
    display: inline-block;
    position: absolute;
    background-image: url("../resources/images/icons/info_round.svg");
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
}

#manager form {
    width: 380px;
}

#manager form.video {
    width: 600px;
}

#manager video {
    display: block;
    margin: 0 auto;
    width: 100%;
    height: 320px;
    margin-bottom: 10px;
}

#manager video:not([src]) {
    border: 1px dashed silver;
    border-radius: 6px;
}

#manager textarea {
    height: 100px;
    margin-bottom: 20px;
}

#manager ol {
    padding: 6px 6px 6px 6px;
    min-height: 80px;
    max-height: 280px;
    overflow-y: auto;
}

#manager ol:empty::before {
    content: 'Er zijn nog geen slides toegevoegd. U kunt slides toevoegen met de bestandsextensie .jpg .jpeg en .png';
    font-size: 15px;
    font-weight: 300;
}

#manager li {
    margin-left: 20px;
}

#manager li {
    margin-left: 20px;
}

#manager li > div {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    width: 100%;
}

#manager label > input[type=file] {
    display:none;
}

/* Manager Buttons */

#manager label.files {
    display: block;
    line-height: 45px;
    font-size: 18px;
    vertical-align:baseline;
    width: 200px;
    height: 45px;
    margin: 8px auto;
    margin-bottom: 20px;
    padding-left: 20px;

    background-image: url(../resources/images/icons/file_up.svg);
    background-size: 39px 39px;
    background-position: 8px;
    background-repeat: no-repeat;
}

#manager label.file,
#manager li button {
    display: block;
    height: 30px;
    width: 30px;
    margin: 2px 0px 0px 4px;
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;
}

#manager label.file {
    background-image: url(../resources/images/icons/file_plus.svg);
    background-size: 26px 26px;
    background-position: center;
}

#manager button.delete {
    background-image: url(../resources/images/icons/trash3_white.svg);
    background-size: 26px 26px;
    background-position: center;
}

/* Menu's & Buttons */

.menu {
    width: 50vw;
    min-width: 320px;
    max-width: 600px;
    background-color: #FDC228;
    position: relative;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.menu ul {
    list-style: none;
    font-size: 24px;
    font-weight: normal;
    position: relative;
    padding: 40px 20px 80px 60px;
}

.menu li {
    line-height: 50px;
    position: relative;
    padding-left: 25px;
    text-align: left;
    cursor: pointer;
    vertical-align: middle;
}

.menu li:before {
    left: -10px;
    top: 20px;
}

#plus {
    fill: #cc0000;

}

.menu li.edit:before {
    background-image: url(../resources/images/icons/plus.svg);
    background-size: 24px 24px;
    opacity: .3;
    -webkit-transition: opacity 200ms ease-out;
    transition: opacity 200ms ease-out;
}

.menu li.edit:hover:before {
    background-image: url(../resources/images/icons/plus.svg);
    background-size: 24px 24px;
    opacity: 1;
}

.menu header span.edit,
.menu li span.edit {
    display: inline-block;
    position: relative;
    bottom: -6px;
    background-image: url("../resources/images/icons/pencil.svg");
    background-repeat: no-repeat;
    background-position: -12px;
    width: 35px;
    height: 35px;
    margin-top: -35px;
    margin-left: 5px;
    opacity: 0;

    cursor: pointer;

    -webkit-transition: none 200ms ease-out;
    transition: none 200ms ease-out;
    -webkit-transition-property: background-position, opacity;
    transition-property: background-position, opacity;
}

.menu header:hover span.edit,
.menu li:hover span.edit {
    display: inline-block;
    opacity: 1;
    background-position: 0px;
}

.menu header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background-color: white;
    border-bottom: solid 4px #000066;
    font-size: 30px;
    line-height: 62px;
    text-align: left;
    width: 100%;
    padding-left: 20px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

.menu header h1 {
    margin-right: 40px;
    text-overflow: ellipsis;
}

.menu header .small {
    font-size: 80%;
}

.menu header img {
    position: absolute;
    top: 5px;
    right: 30px;
}

/* Bullet Style */


.slide.video:first-child:after,
.menu li:before,
.sidebar li:before,
.bullet {
    position: absolute;
    background-size: 20px 20px;
    background-position: center;
    background-repeat: no-repeat;
    background-color: white;
    border-radius: 30px;
    border: solid 3px #000066;
    width: 30px;
    height: 30px;
    margin: -15px;

    /*-webkit-transition: none 200ms ease-out;
    transition: none 200ms ease-out;
    -webkit-transition-property: border, margin;
    transition-property: border, margin;*/
}

.slide.video:hover:first-child:after,
.menu li:hover:before,
.sidebar li:hover:before,
.bullet:hover {
    border: solid 5px #000066;
    margin-left: -17px;
    margin-top: -17px;
}

.sidebar li:before,
.menu li:before {
    display: block;
    content: '';
    position: absolute;
}

/* Slideshow */

.slideshow {
    height: 100%;
    width: 100%;
    /*max-width: 80vh;
    max-height: 80vh;*/
    position: relative;
    /*overflow: hidden;*/
}

.slider {
    display: -ms-flexbox;      /* TWEENER - IE 10 */     /* NEW - Chrome */
    display: -webkit-box;
    display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
    /*-webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;*/
    position: relative;
    align-items: flex-start;
    /*overflow: hidden;*/
     /*height: 100%; important for transition */
}

/*.fullscreen .slider {
    width: 100vw;
    height: 100vh;
}*/

.slide {
    /*max-width: 80vw;
    max-height: 80vh;*/
    /*margin: 0 auto;*/
    text-align: center;
    position: relative;
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;
    /*-webkit-flex-shrink: 1;
    -ms-flex-negative: 1;
    flex-shrink: 1;*/
}

.fullscreen .slider > .slide {
    width: 100vw;
    height: 100vh;
}

.slide > img {
    height: 80vh;
    /*margin-left: auto;
    margin-right: auto;*/
    -o-object-fit: contain;
    object-fit: contain;
}

.slide > video {
    height: 50vh;
    /*z-index: 20;*/
}

.slide > * {
    display: block;
    /*-webkit-transition: none 500ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
    transition: none 500ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
    -webkit-transition-property: width, height;
    transition-property: width, height;*/
}

.slide > .spotlayer {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
}

.fullscreen .slider > .slide > * {
    width: 100%;
    height: 100%;
}

/* Video play button */

.slide.video:first-child:after {
    display: block;
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background-image: url("../resources/images/icons/video.svg");
    background-size: 20px 20px;
    width: 40px;
    height: 40px;
    margin: -20px;
}

.slide.video:hover:first-child:after {
    margin-left: -22px;
    margin-top: -22px;
}

.slide.video.no-controls:after,
.slide.video.playing:after {
    display: none;
}

.slide iframe {
    height: 80vh;
    width: 80vw;
}

.navbutton {
    font-size: 24px;
    /*z-index: 5;*/
}

.navbutton.left {
    position: absolute;
    left: 21px;
    top: 20px;
}

.navbutton.right {
    position: absolute;
    right: 27px;
    top: 20px;
}

/* Bars */
#tabbar .UITabsHolder {
    z-index: 0;
}

#tabbar {
    position: absolute;
    width: 100%;
    bottom: -3px;
}

#tabbar.closed .tab {
    position: relative;
    height: 32px;
}

#tabbar .UITabsHolder:before {
    position: absolute;
    bottom: 0px;
    left: 0px;
    content: '';
    width: 100%;
    border-bottom: solid #006 3px;
    z-index: -1;
}

/*#tabbar .tab:not(.closed) {
    position: relative;

    bottom: -3px;
    border-bottom: solid white 3px;
}*/

#tabbar .tab[name=opties] {

}

/* Menubars */

#menubar,
#navbar {
    position: relative;
    width: 100%;
    height: 100%;

    /*-webkit-transition: none 500ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
    transition: none 500ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
    -webkit-transition-property: -webkit-transform, height;
    transition-property: transform, height;*/
}

#menubar ul,
#navbar ul {
    position: relative;
    list-style: none;

    width: 100%;
    height: 110px;

    /*position: absolute;
    bottom: 0;*/

    -webkit-transition: -webkit-transform 500ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
    transition: -webkit-transform 500ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
    transition: transform 500ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
    transition: transform 500ms cubic-bezier(0.645, 0.045, 0.355, 1.000), -webkit-transform 500ms cubic-bezier(0.645, 0.045, 0.355, 1.000);

    /* Render bug fix for ul.hidden translateY(100%) */
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
}

#navbar ul {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    padding: 0px 10px;
    white-space: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
    text-align: center;
    scroll-behavior: smooth;
}

#menubar ul {
    display: -webkit-box;
    display: -ms-flexbox;      /* TWEENER - IE 10 */     /* NEW - Chrome */
    display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */

    overflow-x: scroll;
    overflow-y: hidden;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -ms-flex-line-pack: center;
    align-content: center;

    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;

    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

#navbar ul.hidden {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    pointer-events: none;
}

#navbar li {
    display: inline-block;
    position: relative;
    /*-webkit-flex-basis: 200px;
    -ms-flex-preferred-size: 200px;
    flex-basis: 200px;
    max-width: 200px;
    min-width: 100px;*/
    margin: 4px 2px;
    height: 82px;
    width: 94px;
    /*box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);*/
    overflow: hidden;
    z-index: 0;
    text-align: center;
    background-position: center;
    background-size: cover;
    border-radius: 4px;

    -webkit-transition: none 150ms cubic-bezier(0.645, 0.045, 0.355, 1.000);

    transition: none 150ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
    -webkit-transition-property: -webkit-transform;
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
}

/* Menubar items */

#menubar svg.icon {
    fill: rgb(2,51,125);
}

#menubar li {
    -ms-flex-preferred-size: 200px;
    flex-basis: 300px;

    text-align: center;
    vertical-align: top;

    white-space: nowrap;

    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

#menubar li.left {
    /*min-width: 310px;*/
}

#menubar li.center {
    min-width: 200px;
}

#menubar li.right {

}

input[type=checkbox] + label,
#menubar button {
    display: inline-block;
    vertical-align: top;
    width: auto;
    font-size: 16px;
    font-weight: 300;
    border-radius: 6px;
    padding: 0px 10px 0px 10px;
    -webkit-box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.3);
            box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.3);
    margin: 0px 5px;
}

#menubar button[name=logout] {
    background-image: url(../resources/images/icons/exit_semi_left.svg);
    background-repeat: no-repeat;
    background-size: 40px;
    background-position: 5px center;
    padding-left: 45px;
}

#menubar button[name=newuser] {
    width: 50px;
    padding: 0px;
}

#menubar button[name=newuser] svg {
    width: 40px;
    height: 50px;
}

#menubar button[name=offline] {
    background-image: url(../resources/images/icons/offline4.svg);
    background-repeat: no-repeat;
    background-size: 50px;
    background-position: 5px center;
    padding-left: 55px;
}

#menubar button[name=update] {
    background-image: url(../resources/images/icons/drop_box.svg);
    background-repeat: no-repeat;
    background-size: 45px;
    background-position: 5px center;
    padding-left: 55px;
}

#menubar button[name=credits] {
    background-image: url(../resources/images/icons/info_block.svg);
    background-repeat: no-repeat;
    background-size: 50px;
    background-position: 5px center;
    background-position: 5px center;
    padding-left: 55px;
}

#menubar label[for=spot_switch] {
    float: left;
    position: relative;
    padding: 5px 10px 5px 45px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Menubar Slider */

#menubar .rotate_slider {
    display: inline-block;
    width: 200px;
}

#menubar .rotate_slider {
    display: inline-block;
    width: 200px;
}

#menubar .rotate_slider:before {
    content: '';
    position: absolute;
    top: -32px;
    height: 100px;
    width: 200px;
    background-color: aqua;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background: transparent url("../resources/images/icons/rotate_grad.svg") center no-repeat;
}

#menubar .rotate_slider .bar {
    width: 100%;
    height: 8px;
    border-radius: 4px;
    -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.3);
            box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.3);
    background-color: ghostwhite;
}

#menubar .rotate_slider .handle {
    position: absolute;
    width: 8px;
    height: 16px;
    border-radius: 8px;
    -webkit-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.4);
            box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.4);
    background-color: white;
    border: solid 2px #006;
}

#menubar .spacer {
    width: 100px;
    height: 10px;
}

@media (max-width: 600px) {

    .menu header h1 {
        font-size: 20px;
    }

    #menubar li.left {
        /*min-width: 130px;*/
    }

    #menubar button[name=credits],
    #menubar button[name=logout],
    #menubar button[name=offline] {
        padding: 0;
        width: 50px;
        color: transparent;
        background-position: center center;
    }

}

@media (max-width: 850px) {

    .menu header img {
        display: none;
    }

}

/* Navbar items */

#navbar li:hover {
    /*border: solid 3px #000066;
    margin: 1px;
    border-radius: 6px;*/
    -webkit-transform: scale(1.04);
    transform: scale(1.04);
}

#navbar li:active {
    -webkit-transform: scale(.98);
    transform: scale(.98);
}

#navbar .icon {
    /*display: none;*/
    position: absolute;
    bottom: 0px;
    left: 0px;
    height: 25px;
    width: 25px;
    border-radius: 0px 20px 0px 0px;
    background-color: white;
    /*background-repeat: no-repeat;
    background-position: 20% 80%;*/
}

#navbar .icon svg {
    fill: rgb(2,51,125);
    width: 18px;
    height: 18px;
    position: absolute;
    left: 1px;
    bottom: 2px;
}

/* Sidebar */

.sidebar {
    position: absolute;
    top: 30px;
    left: 30px;
    -webkit-transition: left 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    transition: left 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
}

.sidebar.hidden {
    left: -50px;
}

.sidebar li:before {
    width: 40px;
    height: 40px;
    background-color: white;
    background-size: 28px 28px;
    -webkit-box-shadow: 2px 6px 12px -6px #000;
            box-shadow: 2px 6px 12px -6px #000;
}

.sidebar li {
    height: 60px;
    cursor: pointer;
}

.sidebar ul {
    padding: 0;
    list-style-type: none;
}

#navbar .icon.logout,
.sidebar li.logout:before {
    display: block;
    background-image: url("../resources/images/icons/exit_semi_left.svg");
    background-size: 28px;
}

#navbar .icon.home,
.sidebar li.home:before {
    display: block;
    background-image: url("../resources/images/icons/home.svg");
    background-size: 28px;
}

#navbar .icon.inside,
.sidebar li.inside:before {
    display: block;
    background-image: url("../resources/images/icons/doors.svg");
    background-size: 28px;
}

#navbar .icon.antenne,
.sidebar li.antenne:before {
    display: block;
    background-image: url("../resources/images/icons/antenne.svg");
    background-size: 28px;
}

#navbar .icon.video,
.sidebar li.video:before {
    display: block;
    background-image: url("../resources/images/icons/video.svg");
    background-size: 20px;
}

.sidebar li.fullscreen:before {
    display: block;
    background-image: url("../resources/images/icons/fullscreen.svg");
    background-size: 26px;
}

#navbar .icon.kiosk,
.sidebar li.kiosk:before {
    display: block;
    background-image: url("../resources/images/icons/kiosk.svg");
    background-size: 28px;
}

#navbar .icon.info,
.sidebar li.info:before {
    display: block;
    background-image: url("../resources/images/icons/info_block.svg");
    background-size: 28px;
}

#navbar .icon.clock,
.sidebar li.clock:before {
    display: block;
    background-image: url("../resources/images/icons/clock.svg");
    background-size: 40px;
}

.sidebar li.download:before {
    display: block;
    background-image: url("../resources/images/icons/offline3.svg");
    background-size: 36px;
}

/* Controlbar */

#joystick {
    position: absolute;
    left: calc(50% - 75px);
    bottom: 0px;
    width: 150px;
    height: 150px;
    transform: scale(1);
    /* text-align: center; */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: bottom 550ms cubic-bezier(0.645, 0.045, 0.355, 1.000), transform 0.5s;
}

#joystick.pushed { bottom: 110px; }
#joystick.open { bottom: 50px; }
#joystick.pushed.open { bottom: 160px; }

#joystick.hidden {
    bottom: 0px;
    transform: scale(0);
}

#joystick .pad {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#joystick .pad::after {
    content: '';
    width: 45px;
    height: 45px;
    border: solid 2px white;
    border-radius: 50%;
    transition: width 0.5s, height 0.5s, border 0.5s;
    border: solid 2px transparent;
}

#joystick.open .pad::after {
    width: 100%;
    height: 100%;
    /*background: radial-gradient(#0000000d, #ffffff5e);*/
    border: solid 2px white;
}

#joystick .handle {
    position: relative;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    box-sizing: border-box;
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.4);
    background-color: white;
    border: solid 2px #006;
    text-align: center;
}

#joystick .handle .icon {
    fill: rgb(2,51,125);
    width: 80%;
    height: 100%;
    margin: 0 auto;
}

/* Credits */

#credits {
    width: 70vw;
    max-width: 850px;
    min-width: 260px;
    text-align: center;
    margin: 15px;
}

#credits header {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    margin-bottom: 40px;
}

#credits header > * {

}

#credits header .text {
    /*height: 80px;*/
    text-align: right;
    margin-left: 20px;

    -webkit-box-flex: 2;
    -ms-flex-positive: 2;
    flex-grow: 2;
    -ms-flex-negative: 1;
    flex-shrink: 1;
}

#credits header .logos {
    height: 70px;
    text-align: left;
    margin-left: 20px;
    margin-bottom: 10px;

    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

#credits header img {
    height: 100%;
    display: inline;
}

#credits h3 {
    font-size: 14px;
    margin-bottom: 20px;
    margin-top: 0px;
}

#credits h4 {
    font-size: 16px;
    font-weight: 300;
    margin-bottom: 2px;
    margin-top: 10px;
}

#credits .people p {
    color: #006;
    font-weight: 300;
}

#credits .people div {
    color: #006;
    font-weight: 300;
}

#credits .table {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;

    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

#credits footer {
    text-align: center;
}

#credits .column {
    text-align: center;
    width: 100%;
   /* box-shadow: -10px 0px 7px -7px rgba(0,0,0,.2);*/
}

#credits .column.people > div {
    margin-bottom: 40px;
    margin-top: 40px;
}

#credits .producers {

}

#credits h3 {
    width: 100%;
}

#credits .producers div {
    position: relative;
    margin-bottom: 30px;
}

#credits .producers img {
    bottom: 100%;
    height: 50px;
}

#credits img.logo-thestaggard {
    height: 75px;
}

#credits .poster img:hover {
    top: -3px;
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
    -webkit-box-shadow: 0px 10px 7px -4px rgba(0,0,0,.1);
            box-shadow: 0px 10px 7px -4px rgba(0,0,0,.1);
}

#credits .poster img:active,
#credits .poster img {
    position: relative;
    top:0;
    width: 65%;
    -webkit-box-shadow: 0px 3px 5px -1px rgba(0,0,0,.3);
            box-shadow: 0px 3px 5px -1px rgba(0,0,0,.3);
    -webkit-transition: none 250ms ease;
    transition: none 250ms ease;
    -webkit-transition-property: width top;
    -webkit-transition-property: top, box-shadow, -webkit-transform;
    transition-property: top, box-shadow, -webkit-transform;
    -webkit-transition-property: top, -webkit-transform, -webkit-box-shadow;
    transition-property: top, -webkit-transform, -webkit-box-shadow;
    transition-property: transform, top, box-shadow;
    transition-property: transform, top, box-shadow, -webkit-transform, -webkit-box-shadow;
    transition-property: transform, top, box-shadow, -webkit-transform;
}

@media (max-width: 600px) {

    #credits header {
        flex-direction: column;
    }

    #credits header .text {
        text-align: center;
    }

    #credits header .logos {
        order: -1;
        text-align: center;
    }

    #credits .column.people {

    }

    #credits .table {
        flex-direction: column;
    }

    #credits {
        max-height: 80vh;
        overflow-y: scroll;
        overflow-x: hidden;
    }
}

#verify {
    margin: 20px 10px;
    text-align: center;
    width: 300px;
}

#verify header h1 {
    display: block;
    margin: ;
    font-size: 26px;
    line-height: 30px;
    text-align: center;
}

#verify p {
    text-align: center;
    margin: 20px 0px;
}

#verify-email {
    text-align: center;
    margin: 40px;
    font-size: 13px;
}

/* SVG */

#plus-svg {
    content: url("data:image/svg+xml; utf8, <svg width='100%' height='100%' viewBox='0 0 133 133' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;'><g id='plus'><path d='M75.6636,31.6367C75.6636,29.1063 73.6123,27.0549 71.0818,27.0549L61.9182,27.0549C59.3877,27.0549 57.3364,29.1063 57.3364,31.6367L57.3364,101.363C57.3364,103.894 59.3877,105.945 61.9182,105.945L71.0818,105.945C73.6123,105.945 75.6636,103.894 75.6636,101.363L75.6636,31.6367Z'/><path d='M101.363,75.6636C103.894,75.6636 105.945,73.6123 105.945,71.0818L105.945,61.9182C105.945,59.3877 103.894,57.3364 101.363,57.3364L31.6367,57.3364C29.1063,57.3364 27.0549,59.3877 27.0549,61.9182L27.0549,71.0818C27.0549,73.6123 29.1063,75.6636 31.6367,75.6636L101.363,75.6636Z'/></g></svg>");
}

/* Transitions */

.circleOut {
    -webkit-transition: 0.4s cubic-bezier(1, -1, 0, 2);
    transition: 0.4s cubic-bezier(1, -1, 0, 2);
    -webkit-clip-path: circle(1px at center);
            clip-path: circle(1px at center);
}

.circleIn {
    -webkit-transition: 0.4s cubic-bezier(1, -1, 0, 2);
    transition: 0.4s cubic-bezier(1, -1, 0, 2);
    -webkit-clip-path: circle(vmax at center);
            clip-path: circle(vmax at center);
}