@import url(https://fonts.googleapis.com/css?family=Roboto);

*,
*:before,
*:after {
    box-sizing: border-box;
}

body {
    margin: 0;
    overflow-x: hidden;
    overflow-y: scroll;

    font-family: "Roboto", sans-serif;

    color: #ccc;
    background-color: rgba(0, 0, 0, .8);
    background-image: url("../assets/pnswebbg.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
}

a {
    text-decoration: none;

    color: rgba(10, 180, 255, .9);
}

a:hover {
    color: rgba(10, 180, 255, .5);
}

video#bgvid {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: -100;

    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;

    transform: translateX(-50%) translateY(-50%);

    background-image: url("../assets/pnswebbg.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
}

.title-bar {
    display: flex;
    padding: 2rem;
    margin-top: 3rem;

    background-color: rgba(0, 0, 0, .7);

    align-items: center;
}

.title-bar .logo img {
    width: 8rem;
    height: 8rem;

    opacity: .7;
}

.title-bar .title {
    padding: 0 0 1rem .5rem;

    font-family: "Impact", sans-serif;
    font-size: 3rem;

    text-decoration: none;
    letter-spacing: .25rem;

    opacity: .7;
    text-shadow: 0 0 .2rem rgb(0, 0, 0);
}

.contact {
    position: absolute;
    bottom: 3rem;

    width: 100%;
    padding: 1rem;

    font-size: 1.5rem;

    opacity: .8;
    background-color: rgba(0, 0, 0, .7);
    text-shadow: 0 0 .2rem rgb(0, 0, 0);
}

.contact > table {
    float: right;
    margin-right: 1.5rem;
}

.contact > table .title {
    text-align: right;
}

.contact > table .name {
    text-align: left;
}

.links {
    float: right;

    font-size: 1rem;
}

.links td {
    padding: .5rem;

    border-right: 1px solid rgba(255, 255, 255, .1);
}

.links td:last-of-type {
    border: none;
}

ul.hidden-links {
    position: absolute;
    top: 15rem;
    right: 0;

    list-style: none;
}

ul.hidden-links li {
    /*display: block;*/
}

ul.hidden-links li a {
    position: relative;
    left: 18rem;

    display: block;
    width: 20rem;
    padding: 1rem;

    font-size: 2rem;

    transition: left .5s, opacity .5s;

    opacity: 0;
    background-color: rgba(0, 0, 0, .7);
}

ul.hidden-links li a:hover {
    position: relative;
    left: 0;

    opacity: 1;
}