::-moz-selection {
 background: #abffec;
 color:#2F363B;
 }

::selection {
background: #abffec;
color:#2F363B;
}

 @font-face {
    font-family: "Montserrat";
    src: url('Montserrat-Regular.ttf');
}

@font-face {
    font-family: "Open Sans";
    src: url('OpenSans-Regular.ttf');
}

body {
font-family: "Open Sans", sans-serif;
background-color:#111315;
background-size:cover;
background-position:center;
margin: 0 0 0 0;
padding:0 0 0 0;

min-height: 100vh;

}

h1 {
font-family: "Montserrat", sans-serif;
color:white;
text-align:left;
font-size:17px;
margin:0 0 0 0;
padding:0 0 0 0;

text-transform: uppercase;
}

article {
background-color: #1a1e21;
margin-left:15%;
margin-right:15%;
margin-top:16px;
margin-bottom:16px;
min-height:256px;
padding:16px;
}

#description{
padding:32px;
bottom:0px;
text-shadow: 2px 2px black;
color:white;
position:absolute;
background-color:rgba(17,19,21,0.65);
font-size:12px;
padding-top:16px;
padding-bottom:16px;
width:calc(100% - 64px);

}

a:link {
  text-decoration:none;
}

#poweredBy {
width:auto;
height:32px;
vertical-align:middle;
margin-left:4px;

margin-right:4px;
}

#underlayPoweredText {
color:white;
position:absolute;
bottom:8px;
left:8px;
display:none;
}

#underlayPoweredText:hover {
color: #4cb86f;
}

#underlayText {
  display:none;
  color: white;
  font-family: sans-serif;
  font-size: 12px;
  top: 26px;
  left: 56px;
  position:absolute;
  vertical-align:middle;
}


#popout {
position:absolute;
width:32px;
height:32px;
right:4px;
cursor:pointer;
top:4px;
z-index:10000;
  -webkit-filter: drop-shadow( 2px 5px 6px #000 );
            filter: drop-shadow( 2px 5px 6px #000 );
}

#popout2 {
position:absolute;
width:32px;
height:32px;
right: 4px;
cursor:pointer;
top:36px;
z-index:10000;
  -webkit-filter: drop-shadow( 2px 5px 6px #000 );
            filter: drop-shadow( 2px 5px 6px #000 );
}

#januslink:hover #popoutText2 {
display:block;
top: 42px;
}

#popoutlink:hover #popoutText {
display:block;
}

#popoutText {
right:42px;
display:none;
top:12px;
position:absolute;
z-index:10000;
color: #4cb86f;
font-family: "Montserrat",sans-serif;
  -webkit-filter: drop-shadow( 2px 5px 6px #000 );
            filter: drop-shadow( 2px 5px 6px #000 );
}

#popoutText2 {
right:42px;
display:none;
top:12px;
position:absolute;
z-index:10000;
color: #4cb86f;
font-family: "Montserrat",sans-serif;
  -webkit-filter: drop-shadow( 2px 5px 6px #000 );
            filter: drop-shadow( 2px 5px 6px #000 );
}

#cursorCapture {
background-color:transparent;
width:100%;
height:100%;
cursor:pointer;
position:absolute;

}


#cursorCapture:hover {
background-color: rgba(256,256,256,0.1);
}


#alternatePopout{
background-color:transparent;
width:100%;
height:100%;
cursor:pointer;
display:none;
position:absolute;
}

#alternatePopout:hover {
background-color: rgba(256,256,256,0.1);
}


#play{
position:absolute;
text-align:center;
left: calc(50% - 32px);
top:50%;
width:64px;
height:64px;
  -webkit-filter: drop-shadow( 2px 5px 6px #000 );
            filter: drop-shadow( 2px 5px 6px #000 );
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
cursor:default;
}


@media screen and (max-width: 256px) {
#description{
text-align:center;
width:100%;
padding:0;

}

h1 {
text-align:center;
padding-bottom:16px;
padding-top:16px;
padding-left:16px;
padding-right:16px;
}

#descriptionText {
display:none;

}


}



@media screen and (max-width: 400px) {

#popoutlink {
display:none;
}
#januslink {
display:none;
}


#cursorCapture {
display:none;
}

#alternatePopout {
display:block;
}
}