@font-face {
    font-family: robotothin;
    src: url("../fonts/Roboto-Thin.ttf");
}

@font-face {
    font-family: robotolight;
    src: url("../fonts/Roboto-Light.ttf");
}

body {
    font-family: robotolight;
}

hr {
    margin: 0;
    padding: 0;
    opacity: 0.3;
    height: 1px;
    margin-top: 60px;
    width: 100%;
}

.pageCounter {
    z-index: 3;
    position: fixed;
    right: 24px;
    bottom: 10px;
    font-size: 55px;
    font-family: robotothin;
    text-shadow: 2px 2px 1px #000000;
    visibility: hidden;
	color: #bfbfbf;
}

.leftArrow {
    z-index: 3;
    position: fixed;
    left: 16px;
    top: 50%;
    font-size: 55px;
    cursor: pointer;
    font-family: robotothin;
    text-shadow: 2px 2px 2px #000000;
	color: #bfbfbf;
}

.rightArrow {
    z-index: 3;
    position: fixed;
    right: 16px;
    top: 50%;
    font-size: 55px;
    cursor: pointer;
    font-family: robotothin;
    text-shadow: 2px 2px 2px #000000;
	color: #bfbfbf;
}

.bgOverlay {
    z-index: 1;
    height: 100%;
    width: 100%;
    position: fixed;
    overflow: auto;
    top: 60px;
    left: 0px;
    background-image: linear-gradient(to right, rgba(0,0,0,0.60) 40%, rgba(22, 22, 22, 0) 40% );
}

.pagetitle {
	font-size: 20px;
}

.desc {
    display: none;
}

.img {
    max-width: 100%;
    height: auto;
}

.logo {
    display: block;
    margin: auto;
}

.logoround {
    display: block;
    margin: auto;
	border-radius: 8px;
}

a {
    text-decoration: none;
}

    a.portfolio:link {
        color: #499afe;
        text-decoration: none;
    }

    a.portfolio:visited {
        color: #499afe;
        text-decoration: none;
    }

    a.portfolio:hover {
        color: #69acff;
        text-decoration: none;
    }

    a.portfolio:active {
        color: #499afe;
        text-decoration: none;
    }

.nametitle {
    margin-left: 15px;
    font-size: x-large;
    float: left;
    text-decoration: none;
}

.container {
    position: relative;
    margin: 0 auto;
    width: 94%;
    max-width: 1400px;
}

.video {
    display: block;
    margin: auto;
}

.indexcontent {
    z-index: 2;
    position: relative;
    padding-top: 60px;
}

.content {
    z-index: 2;
    position: relative;
    padding: 5%;
    padding-top: 200px;
}

    .content p {
        margin-bottom: 10px;
    }

.aboutcontent {
    z-index: 2;
    position: relative;
    padding: 5%;
    padding-top: 200px;
}

.smallmenu {
    display: none;
    float: right;
    margin-right: 15px;
    margin-top: 5px;
}

#header {
    z-index: 3;
    position: fixed;
    width: 100%;
    height: 60px;
    line-height: 60px;
    background: rgba(0, 0, 0, 0.55);
    font-family: robotothin;
    color: white;
}

    #header h1 {
        top: 0px;
        margin: 0px;
        text-transform: uppercase;
        font-size: 1.2em;
    }

#nav {
    position: absolute;
    right: 0;
    top: -24px;
    height: 60px;
    font-size: x-large;
}

    #nav ul li {
        float: left;
        list-style: none;
    }

        #nav ul li a {
            display: block;
            color: white;
            text-decoration: none;
            padding: 0 10px;
            text-shadow: 1px 1px 3px #000000;
        }

.overlay {
    z-index: 1;
    height: 100%;
    width: 100%;
    position: fixed;
    overflow: auto;
    top: 0px;
    left: 0px;
    background-color: #000000;
    opacity: 0.0;
}

@media only screen and (max-width: 699px) {
    .content {
        padding-top: 220px;
    }

    .selfportrait {
        max-width: 100%;
    }

    .smallmenu {
        display: block;
    }

    #menu {
        display: none;
    }

    #header .container {
        width: 100%;
    }

    #header h1 {
        padding-left: 3%;
    }

    #nav {
        width: 100%;
        top: 60px;
        font-size: larger;
    }

        #nav ul {
            background: rgba(0, 0, 0, 0.12);
            width: 100%;
            margin: 0px;
        }

            #nav ul li {
                float: none;
            }

                #nav ul li a {
                    padding: 10px 3%;
                    line-height: 20px;
                    border-top: 1px solid #333;
                }

    .rightArrow {
        font-size: x-large;
        right: 3px;
    }

    .leftArrow {
        font-size: x-large;
        left: 3px;
    }

    hr {
        display: none;
    }

    .bgOverlay {
        z-index: 1;
        height: 100%;
        width: 100%;
        position: fixed;
        overflow: auto;
        top: 60px;
        left: 0px;
        background-color: rgba(0,0,0,0.55);
        background-image: none;
    }

    .nametitle {
        font-size: 18px;
    }

    .aboutcontent {
        padding-top: 40px;
    }
}

.video_wrapper {
    position: relative;
    padding-bottom: 56.25%;
}

iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}