@charset "utf-8";
@font-face {
    font-family: glitch;
    src: url(A%20Glitch%20In%20Time.woff)
}

* {
    -WEBKIT-USER-SELECT: none;
}


#menu {
    display: flex;
    justify-content: space-between;
}

#container,
p {
    position: relative
}
#welcomeTitle {
    font-family: glitch;
    display: none;
    font-size: 8rem;
    z-index: 999;
    position: absolute;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    top: 14%;
}

#upper ul li img,
a {
    cursor: pointer
}
#lower,
#medal_li,
aside {
    text-align: center
}
#container:before,
#dev aside:before,
#home aside:before,
#story aside:before {
    content: ''
}
body,
html {
    margin: 0;
    padding: 0;
    font: 1em/1.5em'Josefin Slab', serif;
    font-weight: 400;
    color: #999;
    height: 100%
}
article h1:selection,
article p:selection,
article:selection {
    background: #900000;
    color: #FFF;
    text-shadow: none
}
#container,
#container:before,
#lower,
#upper {
    background: url(../img/dark_dotted.png)
}
a {
    text-decoration: underline;
    color: #FFF;
    font-weight: 600
}
p {
    margin: 0 auto
}
h1 {
    font-size: 1.458em
}
#container {
    height: 100%;
    overflow: hidden
}
#container:before {
    display: block;
    position: absolute;
    width: 4.947916667%;
    top: 143px;
    right: 0;
    left: 95.05208333%;
    z-index: 100;
    bottom: 8.481675393%;
    margin-bottom: 14px
}
#lower,
#upper {
    width: 100%;
    height: 50%;
    z-index: 99
}
#closequote,
#motto,
#openquote,
article,
body {
    transition: all .2s linear;
    -o-transition: all .2s linear;
    -moz-transition: all .2s linear;
    -webkit-transition: all .2s linear
}
.intro_active {
    -webkit-animation-play-state: running!important;
    animation-play-state: running!important;	-ms-animation-play-state: running!important;
}
@keyframes lift {
    from {
        height: 50%
    }
    to {
        height: 129px
    }
}
@keyframes fade {
    from {
        height: 50%;
        display: block
    }
    to {
        height: 0;
        display: none
    }
}
@keyframes shrink {
    from {
        flex-basis: 34.45086705%
    }
    to {
        flex-basis: 284.594px
    }
}
@-webkit-keyframes lift {
    from {
        height: 50%
    }
    to {
        height: 10%
    }
}
@-webkit-keyframes fade {
    from {
        height: 50%;
        display: block
    }
    to {
        height: 0;
        display: none
    }
}
@-webkit-keyframes shrink {
    from {
        flex-basis: 34.45086705%
    }
    to {
        flex-basis: 284.594px;
    }
}
#upper {
    position: absolute;
    min-height: 129px;
    animation: lift 3.5s forwards;
    -webkit-animation: lift 3.5s forwards;
    -webkit-animation-play-state: paused;		-ms-animation-play-state:paused;
    bottom: 50%
}
#upper.intro_active {
    position: relative;
    bottom: auto
}
#upper ul,
#upper ul li {
    padding: 0;
    margin: 0;
    
}
#upper ul {
	position: absolute;
    height: 129px;
    bottom: 0;
    list-style-type: none;
    white-space: nowrap;
    left: 4.947916667%;
    right: 4.947916667%;
    opacity: 0
}
#upper ul li img:hover {
    -webkit-filter: brightness(120%);
    -moz-filter: brightness(120%);
    -ms-filter: brightness(120%);
    -o-filter: brightness(120%);
    filter: brightness(120%)
}
#second_li {

}

#fourth_li {order: 4;}
#fifth_li {order: 5;}

#closequote,
.panel {
    right: 0
}
#medal_li {
    bottom: 0;
    order: 3;
    flex-basis: 34.45086705%;
    position: relative;
    overflow: visible;
	animation: shrink 3s forwards;
    animation-play-state: paused;
    -webkit-animation: shrink 6s forwards;
    -webkit-animation-play-state: paused;		-ms-animation-play-state: paused;
    background-image: url(../img/png/medal_intro_up.png);
    background-position: center 100%;
    background-size: 100%;
    background-repeat: no-repeat;
    padding-top: 200px !important;
    margin-top: -200px !important;
}
#footer_separator,
.content,
.panel {
    bottom: 8.481675393%
}
#top_medal_img {
    cursor: default!important;   
    margin: auto;	
    float: none!important;
    vertical-align: bottom;
    position: absolute;
    bottom: 0;
    left: 0;
	max-width:100%;
	min-height:129px;
	
}
#top_medal_img:hover {
    -webkit-filter: none!important;
    -moz-filter: none!important;
    -ms-filter: none!important;
    -o-filter: none!important;
    filter: none!important
}
.separator {
    position: absolute;
    width: 100%;
    height: 14px;
    background-color: #900000;
    z-index: 98
}
#header_separator {
    top: 129px
}
section {
    width: 50%;
    float: left;
    position: relative;
    height: 100%
}
.content,
.panel {
    top: 0;
    position: absolute;
    padding-top: 143px;
    margin-bottom: 14px;
    background: url(../img/dark_dotted.png)
}
#closequote,
#openquote {
    position: absolute;
    top: 50%;
    width: 10%
}
.content {
    padding-left: 4.947916667%;
    padding-right: 4.947916667%;
    left: 0;
    right: 0;
    z-index: 1
}
.panel {
    left: 100%;
    z-index: 2
}
.panel aside {
    font-size: 0
}
article {
    text-rendering: optimizeLegibility;
    color: #e7e7e7;
    text-align: justify;
    font-size: 1.5em;
    overflow: hidden
}
#responsiveArticle {
    display: none
}
#centered,
#dev aside:before,
#dev aside>img,
#home aside:before,
#story aside:before,
#story aside>img,
#wrapper {
    display: inline-block;
    vertical-align: middle
}
#wrapper {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}
#motto {
    font: italic 700 3.063rem"Times New Roman", Times, serif;
    color: #e7e7e7;
    margin: 0 0 0 13%;
    font-size: 3rem
}
#openquote {
    left: 10%
}
#story article,
aside {
    position: relative
}
aside {
    float: right;
    width: 50%;
    height: 100%;
    font-size: 0
}
#home aside:before {
    height: 100%;
    margin-right: -.25em
}
#dev aside>img,
#story aside>img {
    max-width: 0;
    -webkit-transition: all .6s ease-in-out;
    transition: all .6s ease-in-out;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}
.gallery_visible_el_dev,
.gallery_visible_el_story {
    position: relative;
    max-width: 98%!important;
    max-height: 97%;
    padding: 1%;
    background-color: #e7e7e7;
    -webkit-border-radius: 2.5px;
    -moz-border-radius: 2.5px;
    border-radius: 2.5px
}
#dev aside:before,
#story aside:before {
    height: 100%;
    margin-right: -2.5em
}
#dev aside:after,
#story aside:after {
    opacity: .7!important;
    content: attr(data-title);
    font-size: 1rem;
    display: block;
    position: absolute;
    left: 24.7%;
    bottom: 0;
    z-index: 2;
    width: 50%;
    height: 50px;
    background-color: #fff;
    color: #000;
    line-height: 50px;
    font-weight: 700;
    border: 2px solid #900000;
    margin: 0 auto
}
#webrti,
#webrti_back {
    overflow: hidden;
    display: inline-block;
    width: 50%;
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    margin: 0
}
.medal_rti_pre {
    width: 100%;
    height: 100%;
    cursor: pointer;
    float: left
}
#play aside article {
    position: relative
}
#low_img,
#lower,
footer {
    position: absolute
}
#play aside article:after,
#play aside article:before {
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
    width: 50%;
    height: 50px;
    background-color: #fff;
    opacity: .7;
    text-align: center;
    color: #000;
    line-height: 50px;
    font-size: 1rem;
    font-weight: 700;
    border: 2px solid #900000
}
#play aside article:after {
    content: "FRONT"
}
#play aside article:before {
    content: "BACK";
    left: 50%
}
#dev p {
    margin: 15px 0
}
#lower {
    bottom: 0;
    animation: fade 3s;
    animation-play-state: paused;
    animation-fill-mode: forwards;
    -webkit-animation: fade 3s;
    -webkit-animation-play-state: paused;
    -webkit-animation-fill-mode: forwards
}
#low_img {
    left: 4.947916667%;
    right: 4.947916667%;
    opacity: 0
}
#low_img img {
    width: 34.45086705%;
    min-width: 284px
}
footer {
    bottom: 0;
    height: 8.481675393%;
    width: 100%;
    z-index: 3;
    background: url(../img/dark_dotted.png);
    font-weight: 700
}
.software li {
    float: left;
    list-style-type: none;
    margin-right: 10px
}
@media (max-width: 915px) {
    @keyframes lift {
        from {
            height: 50%
        }
        to {
            height: 90px
        }
    }
    #upper {
        min-height: 90px;
    }
    #upper ul,
    #upper ul li {
        height: 80px;
    }
    #welcomeTitle {
        display: block;
        font-size: 4rem
    }
    #header_separator {
        top: 95px;
        z-index: 98;
    }
    #medal_li,
    #low_img {
        display: none
    }
   
    #upper img {
        width: 90px;
        height: auto;
    }
    #home aside {
        display: none
    }
    #home section,
    #story section,
    #play section,
    #dev section,
    #play aside,
    #dev aside,
    #story aside {
        width: 100%;
    }
    #story aside,
    #play aside,
    #dev aside {
        height: 40%
    }
    #play aside article {
        height: 100%
    }
    #story section,
    #play section,
    #dev section {
        height: 60%
    }
    #home .viewport,
    #story .viewport,
    #dev .viewport,
    #play .viewport {
        width: 96.9%;
    }
    .spacer {
        clear: both
    }
    #responsiveArticle {
        display: block;
        position: relative;
    }
    #responsiveArticle #wrapper {
        width: 100%;
        text-align: center;
    }
    #motto {
        margin: 0 auto !important
    }
    #openquote {
        left: 0 !important
    }
}
@media all and (max-width: 1024px) {
    body,
    html {
        font-size: .95em
    }
    .content,
    .panel {
        margin-bottom: 10px;
        padding-top: 139px
    }
    #motto {
        margin-left: 70px;
        font-size: 1.5rem
    }
    #openquote {
        left: 70px
    }
    #closequote,
    #openquote {
        width: 10%
    }
    .separator {
        height: 10px
    }
}
@media (max-width: 1280px) and (min-width: 1025px) {
    body,
    html {
        font-size: .95em
    }
    #motto {
        font-size: 2.3rem
    }
    aside:before {
        margin-right: -1.25em!important
    }
    #closequote,
    #openquote {
        width: 10%
    }
}
.pp_social {
    display: none
}
.pp_description {
    line-height: 25px!important
}
@media (max-width: 450px) {
    #upper img {
        width: 70px;
    }
    #second_li {
        left: 45%;
    }
    #fourth_li {
        right: 45%;
    }
	article {
    font-size: 1.3em;
	}
	h1 {
    font-size: 1.2em;
}

#dev aside:after, #story aside:after {   
    content: 'Image gallerya click links in text at left';
    font-size: 0.7rem;   
    line-height: 20px;
    white-space: pre;
}

}
/*#story, #play, #dev{overflow:scroll}*/