@font-face {
    font-family:"OPTIDiamond-DemiBold";
    src:url("../fonts/OPTIDiamond-DemiBold.ttf.woff") format("woff"),
        url("../fonts/OPTIDiamond-DemiBold.ttf.svg#OPTIDiamond-DemiBold") format("svg"),
        url("../fonts/OPTIDiamond-DemiBold.ttf.eot"),
        url("../fonts/OPTIDiamond-DemiBold.ttf.eot?#iefix") format("embedded-opentype"); 
    font-weight:normal;
    font-style:normal;
}

@keyframes zoom_out {
    from    { top:10%;transform:scale(1.25); }
    to      { top:0%;transform:scale(1); }
}

@keyframes zoom_out_and_invert {
    0%      { filter:invert(0);top:10%;transform:scale(1.25); }
    35%     { filter:invert(0); }
    100%    { filter:invert(1);top:0%;transform:scale(1); }
}

@keyframes fadeout {
    from    { opacity:1; }
    to      { opacity:0; }
}

@keyframes grow_width {
    from    { width:50px; }
    to      { width:400px; }
}


@keyframes slide_up_high {
    from    { bottom:0px; }
    to      { bottom:-160%; }
}

@keyframes slide_slow {
    from    { left:0px; }
    to      { left:-100px; }
}

@keyframes slide_medium {
    from    { left:0px; }
    to      { left:-300px; }
}

@keyframes slide_fast {
    from    { left:0%; }
    to      { left:-200%; }
}

@keyframes scroll_down {
    from    { top:0; }
    to      { top:-300px; }
}

@keyframes zoom_in {
    from    { top:0%;transform:scale(1); }
    to      { top:10%;transform:scale(1.25); }
}

@keyframes zoom_in_and_turn {
    from    { top:-25%;transform:rotate(0deg) scale(1); }
    to      { top:-30%;transform:rotate(15deg) scale(1.5); }
}

@keyframes zoom_in_far_and_fade {
    0%      { opacity:0.9;transform:scale(1); }
    5%      { opacity:0.9;transform:scale(1); }
    60%     {  }
    100%    { transform:scale(7);opacity:0; }
}


@keyframes word_zoom_and_slide_from_left {
    0%      { text-indent:-1000px;transform:scale(2); }
    25%     { text-indent:0px;transform:scale(1); }
}

@keyframes word_zoom_and_slide_from_right {
    0%      { text-indent:1000px;transform:scale(2); }
    25%     { text-indent:0px;transform:scale(1); }
}

@keyframes move_top {
    0%      { top:0; }
    25%     { top:-45%;opacity:1; } 
    75%     { opacity:0;top:-50%; }   
    100%    { opacity:0;top:-50%; }  
}

@keyframes move_bottom {
    0%      { bottom:0; }
    25%     { bottom:-45%;opacity:1; }  
    75%     { opacity:0;bottom:-50%; }
    100%    { opacity:0;bottom:-50%; }  
}

*                                       { box-sizing:border-box;outline:none;user-select:none; }
body                                    { background-color:#000;font-family:"OPTIDiamond-DemiBold",arial; }

header                                  { position:fixed;padding-top:300px;left:0;top:0;height:100vh;width:100%;background:url("../images/overlays/starting_screen.png") center 100px no-repeat #000;z-index:2;overflow:auto;text-align:center;color:#fff;font-family:arial; }
header .start                           { display:none;cursor:pointer;width:150px;margin:20px auto;padding:0px 20px;text-align:left;background-color:#d60d0d;color:#fff;line-height:40px;height:40px;font-size:25px;border-radius:10px;font-weight:700; }
header .start:hover                     { background-color:#0041b6; }
header .loading                         { font-size:30px;margin-bottom:20px; }
header .customization                   { display:none;margin-top:50px; }
header .original                        { font-size:12px;color:#d60d0d;text-decoration:none; }
header .original:hover                  { color:#d60d0d;text-decoration:underline; }
header .lawblock,
header .orderblock                      { display:inline-block;width:300px;margin:0px 50px;text-align:left;overflow:hidden; }
header input                            { width:100%;display:block;margin-bottom:10px;line-height:40px;height:40px;padding:0px 5px;font-size:25px;background-color:transparent;border:0px;color:#fff;border-bottom:2px solid #fff; }
header input[type="color"]              { cursor:pointer;padding:0px;line-height:0px;height:40px;border:0px; } 
header .lawblock input                  { border-color:#0041b6; }
header .orderblock input                { border-color:#d60d0d; }
.running header                         { display:none; }
header.loaded .start,                    
header.loaded .customization            { display:block; }
header.loaded .loading                  { display:none; }

main                                    { position:fixed;left:0;top:0;height:100%;width:100%;z-index:1; }
.running main                           { z-index:3; }
main>div                                { visibility:hidden; }
main div.active                         { visibility:visible;z-index:2; }

.skyline                                { position:absolute;left:0;top:0;height:100%;width:100%;background-color:#000;z-index:1; }
.skyline .image                         { position:absolute;left:0px;top:calc(50% - 50%);height:100%;width:250%;z-index:1;background:url("../images/skyline/skyline.jpg") center center no-repeat;background-size:cover; }
.skyline.active .image                  { animation:slide_slow 2s linear; }

.cops                                   { position:absolute;left:0;top:0;height:100%;width:100%;background-color:#000;z-index:1; }
.cops .image                            { position:absolute;left:calc(50% - 50%);top:calc(50% - 50%);height:100%;width:100%;z-index:1;background:url("../images/cops/cops.jpg") center center no-repeat;background-size:cover; }
.cops.active .image                     { animation:zoom_in 2s linear; }

.lights                                 { position:absolute;left:0;top:0;height:100%;width:100%;background-color:#000;z-index:1; }
.lights .image                          { position:absolute;left:calc(50% - 50%);top:calc(50% - 50%);height:100%;width:800%;z-index:1;background:url("../images/skyline/lights.jpg") center center no-repeat;background-size:cover; }
.lights.active .image                   { animation:slide_fast 500ms linear; }

.law                                    { position:absolute;left:0;top:0;height:100%;width:100%;background-color:#000;z-index:1; }
.law .image                             { position:absolute;left:calc(50% - 50%);top:calc(50% - 50%);height:100%;width:100%;z-index:1;background:url("../images/cops/car.jpg") center center no-repeat;background-size:cover; }
.law .headercontainer                   { z-index:2;position:absolute;left:0;top:0;height:100%;width:100%;display:flex;justify-content:center;align-items:center; }
.law .header                            { z-index:2;position:absolute;font-weight:400;text-align:center;font-size:150px;line-height:150px;text-transform:uppercase;color:#fff; }
.law.active .header                     { opacity:0.8;animation:zoom_in_far_and_fade 2s linear; }
.law .header.schaduw                    { position:absolute;z-index:1;margin-left:-40px;color:#000;text-shadow:0 0 5px #0041b6, 0 0 10px #0041b6, 0 0 15px #0041b6, 0 0 20px #0041b6, 0 0 30px #0041b6, 0 0 40px #0041b6, 0 0 55px #0041b6, 0 0 75px #0041b6; }

.order                                  { position:absolute;left:0;top:0;height:100%;width:100%;background-color:#000;z-index:1; }
.order .image                           { position:absolute;left:calc(50% - 50%);top:calc(50% - 50%);height:100%;width:100%;z-index:1;background:url("../images/court/court.jpg") center center no-repeat;background-size:cover; }
.order .headercontainer                 { z-index:2;position:absolute;left:0;top:0;height:100%;width:100%;display:flex;justify-content:center;align-items:center; }
.order .header                          { z-index:2;position:absolute;font-weight:400;text-align:center;font-size:150px;line-height:150px;text-transform:uppercase;color:#fff; }
.order.active .header                   { opacity:0.8;animation:zoom_in_far_and_fade 2s linear; }
.order .header.schaduw                  { position:absolute;z-index:1;margin-left:-40px;color:#000;text-shadow:0 0 5px #d60d0d, 0 0 10px #d60d0d, 0 0 15px #d60d0d, 0 0 20px #d60d0d, 0 0 30px #d60d0d, 0 0 40px #d60d0d, 0 0 55px #d60d0d, 0 0 75px #d60d0d; }

.flag                                   { position:absolute;left:0;top:0;height:100%;width:100%;background-color:#000;z-index:1; }
.flag .image                            { position:absolute;left:calc(50% - 50%);top:calc(50% - 50%);height:100%;width:200%;z-index:1;background:url("../images/flag/flag.jpg") center center no-repeat;background-size:cover; }
.flag.active .image                     { animation:slide_medium 2000ms linear; }

.prison                                 { position:absolute;left:0;top:0;height:100%;width:100%;background-color:#000;z-index:1; }
.prison.bench .image                    { position:absolute;left:calc(50% - 50%);bottom:0px;height:300%;width:100%;z-index:1;background-size:cover;background:url("../images/prison/bench.jpg") center center no-repeat; }
.prison.bench.active .image             { animation:slide_up_high 1500ms linear; }
.prison.proof .image                    { position:absolute;left:calc(50% - 50%);top:calc(50% - 50%);height:100%;width:100%;z-index:1;background-size:cover;background:url("../images/prison/proof.jpg") center center no-repeat; }
.prison.proof.active .image             { animation:zoom_out 1000ms linear; }
.prison.cell .image                     { position:absolute;left:calc(50% - 50%);top:calc(50% - 50%);height:100%;width:100%;z-index:1;background-size:cover;background:url("../images/prison/cell.jpg") center center no-repeat; }
.prison.cell.active .image              { animation:zoom_out_and_invert 1500ms linear; }

.court                                  { position:absolute;left:0;top:0;height:100%;width:100%;background-color:#000;z-index:1; }
.court.room .image                      { position:absolute;left:calc(50% - 50%);bottom:0px;height:100%;width:100%;z-index:1;background-size:cover;background:url("../images/court/room.jpg") center center no-repeat; }
.court.room.active .image               { animation:zoom_out 1000ms linear; }
.court.judge .image                     { position:absolute;left:calc(50% - 50%);top:calc(50% - 50%);height:100%;width:100%;z-index:1;background-size:cover;background:url("../images/court/judge.jpg") center center no-repeat; }
.court.judge.active .image              { animation:zoom_in 1000ms linear; }
.court.prisoner .image                  { position:absolute;left:-25%;top:-25%;height:150%;width:150%;z-index:1;background-size:cover;background:url("../images/court/prisoner.jpg") center center no-repeat; }
.court.prisoner.active .image           { animation:zoom_in_and_turn 1000ms linear; }
.court.text .image                      { position:absolute;left:calc(50% - 50%);top:0px;height:200%;width:100%;z-index:1;background-size:cover;background:url("../images/court/text.jpg") center center no-repeat; }
.court.text.active .image               { animation:scroll_down 1000ms linear; }

.person                                 { position:absolute;left:0;top:0;height:100%;width:100%;background-color:#000;z-index:1; }
.person .overlay                        { position:absolute;left:0;top:0;height:100%;width:100%; }
.person .overlay.blue                   { z-index:3;background-color:rgba(0,65,182,0.5); }
.person .overlay.rood                   { z-index:3;background-color:rgba(214,13,13,0.5); }
.person .overlay.polkadots              { z-index:2;opacity:0;background:url("../images/overlays/polkadots.png") center center repeat; }
.person.active .overlay.polkadots       { animation:fadeout 1000ms linear; }
.person .textoverlay                    { position:absolute;padding:10px;z-index:4;overflow:hidden; }
.person.active .textoverlay             { animation:grow_width 600ms linear; }
.person .text                           { z-index:2;position:relative;left:0px;bottom:0px;width:500px;font-weight:400;text-align:left;font-size:80px;line-height:80px;text-transform:uppercase;color:#fff; }
.person .text .starring                 { display:block;font-size:40px;font-weight:700;line-height:40px; }
.person .text.schaduw                   { position:absolute;z-index:1;left:5px;bottom:10px;color:#000; }
.person .image                          { position:absolute;left:calc(50% - 50%);top:calc(50% - 50%);height:100%;width:100%;z-index:1;background-size:cover; }
.person.active .image                   { animation:zoom_out 2s linear; }

.person#justin .image                   { background:url("../images/persons/justin.jpg") center center no-repeat; }
.person#justin .textoverlay             { left:calc(50% + 25px);top:15%; }
.person#sjef .image                     { background:url("../images/persons/sjef.jpg") center center no-repeat; }
.person#sjef .textoverlay               { left:calc(50% + 50px);bottom:30%; }
.person#fokje .image                    { background:url("../images/persons/fokje.jpg") center center no-repeat; }
.person#fokje .textoverlay              { left:calc(50% - 400px);top:20%; }
.person#maria .image                    { background:url("../images/persons/maria.jpg") center center no-repeat; }
.person#maria .textoverlay              { left:calc(50% + 300px);bottom:20%; }
.person#indy .image                     { background:url("../images/persons/indy.jpg") center center no-repeat; }
.person#indy .textoverlay               { left:15%;bottom:30%; }
.person#hendy .image                    { background:url("../images/persons/hendy.jpg") center center no-repeat; }
.person#hendy .textoverlay              { left:15%;top:20%; }

.lawandorder                            { position:absolute;left:0;top:0;height:100%;width:100%;background-color:#000;z-index:1; }
.lawandorder .image                     { position:absolute;left:calc(50% - 50%);top:calc(50% - 50%);height:100%;width:100%;z-index:1;background:url("../images/persons/group.jpg") center center no-repeat;background-size:cover; }
.lawandorder .textcontainer             { opacity:1;z-index:2;position:absolute;left:0;top:0;height:100%;width:100%; }
.lawandorder.active .textcontainer      { animation:zoom_out_and_fade_outro 4500ms linear 1500ms; }
.lawandorder .divider                   { position:absolute;left:0;width:100%;height:50%;background-color:#000; }
.lawandorder .divider:nth-child(1)      { top:0; }
.lawandorder.active .divider:nth-child(1)   { animation:move_top 4500ms linear 1500ms; }
.lawandorder .divider:nth-child(2)      { bottom:0; }
.lawandorder.active .divider:nth-child(2)   { animation:move_bottom 4500ms linear 1500ms; }
.lawandorder .lawblock                  { position:relative;height:100%;display:flex;justify-content:center;text-align:center;align-items:center; }
.lawandorder.active .lawblock           { animation:word_zoom_and_slide_from_left 3000ms linear; }
.lawandorder .orderblock                { position:relative;height:100%;display:flex;justify-content:center;text-align:center;align-items:center; }
.lawandorder.active .orderblock         { animation:word_zoom_and_slide_from_right 3000ms linear; }
.lawandorder .header                    { z-index:2;position:absolute;font-weight:400;text-align:center;font-size:280px;line-height:280px;text-transform:uppercase;color:#fff; }
.lawandorder .header.schaduw            { position:absolute;z-index:1;margin-left:-40px;color:#000; }
.lawandorder .lawblock .header.schaduw      { text-shadow:0 0 5px #0041b6, 0 0 10px #0041b6, 0 0 15px #0041b6, 0 0 20px #0041b6, 0 0 30px #0041b6, 0 0 40px #0041b6, 0 0 55px #0041b6, 0 0 75px #0041b6; }
.lawandorder .orderblock .header.schaduw    { text-shadow:0 0 5px #d60d0d, 0 0 10px #d60d0d, 0 0 15px #d60d0d, 0 0 20px #d60d0d, 0 0 30px #d60d0d, 0 0 40px #d60d0d, 0 0 55px #d60d0d, 0 0 75px #d60d0d; }

.bridge                                 { position:absolute;left:0;top:0;height:100%;width:100%;background-color:#000;z-index:1; }
.bridge .image                          { position:absolute;left:0px;top:calc(50% - 50%);height:100%;width:250%;z-index:1;background:url("../images/skyline/bridge.jpg") center center no-repeat;background-size:cover; }
.bridge.active .image                   { animation:slide_slow 2s linear; }

.outro                                  { position:absolute;left:0;top:0;height:100%;width:100%;background-color:#000;z-index:1; }
.outro .textoverlay                     { position:absolute;left:calc(50% + 400px);bottom:10%;padding:10px;z-index:4;overflow:hidden; }
.outro.active .textoverlay              { animation:grow_width 600ms linear; }
.outro .text                            { z-index:2;position:relative;width:500px;left:0px;bottom:0px;font-weight:400;text-align:left;font-size:80px;line-height:80px;text-transform:uppercase;color:#fff; }
.outro .text .createdby                 { display:block;font-size:40px;font-weight:700;line-height:40px; }
.outro .text.schaduw                    { position:absolute;z-index:1;left:5px;bottom:10px;color:#000; }
.outro .image                           { position:absolute;left:0px;top:calc(50% - 50%);height:100%;width:250%;z-index:1;background:url("../images/skyline/skyline.jpg") center center no-repeat;background-size:cover; }
.outro.active .image                    { animation:slide_slow 4500ms linear; }
.outro.active                           { animation:fadeout 1500ms linear 3s; }