/* Reset */
* {
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
}

/* Font / Disable Selection / Background Image */

@font-face {
    font-family: RalewayRegular;
    src: url("font/ralewayregular.otf")
    format("opentype");
}

html {
    font-family: "RalewayRegular", sans-serif;
    -webkit-user-select: none;  
    -moz-user-select: none;     
    -ms-user-select: none; 
    -o-user-select: none;
    user-select: none;     
}

html, body {
    width: 100%;
    min-height:100%;
}

/* Transitions */

div.social img {
    transition: opacity 0.3s;
    -webkit-transition: opacity 0.3s;
    -moz-transition: opacity 0.3s;
    -o-transition: opacity 0.3s;
}

/* Content */

div.bg {
    width: 100%;
    height: 100%;
    z-index: 2;
    position: fixed;
    background-image: url("img/bg.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

div.mask {
    position: fixed;
    z-index: 10;
    width: 420px;
    height: 670px;
    top: 50%;
    left: 50%;
    margin-left: -210px;
    margin-top: -335px;
    border-radius: 4px;
    overflow: hidden;
}

    div.blur {
        -webkit-filter: blur(10px);
        -moz-filter: blur(10px);
        -o-filter: blur(10px);
        -ms-filter: blur(10px);
        filter: blur(10px);   
        display: block;
        z-index: 1;
        position: absolute;
        width: 100%;
        height: 100%;
        background-image: url("img/bg.jpg");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center center;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

div.content {
    width: 420px;
    height: 670px;
    position: fixed;
    z-index: 10;
    left: 50%;
    top: 50%;
    margin-left: -210px;
    margin-top: -335px;
    border-radius: 4px;
}

    div.content div.pic {
        width: 150px;
        height: 150px;
        border-radius: 150px;
        margin: auto;
        margin-top: 70px;
        background-image: url("img/pic.jpg");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 230px;
    }

    div.content h1, div.content h2, div.content p {
        text-align: center;
        font-weight: 400;
        cursor: default
    }
    
    div.content h1 {
        margin-top: 40px; 
        color: #fff;
        font-size: 24px;
    }

    div.content h2 {
        font-size: 20px;
        margin-top: 5px;
        color: #22254b;
        position: relative;
    }

        div.content h2:after {
            content: "";
            position: absolute;
            border: 1px solid #fff;
            width: 50px;
            margin-top: 43px;
            margin-left: -97px;
        }

    div.content p {
        color: #fff;
        margin-top: 41px;
        line-height: 22px;
        font-size: 15px
    }

    div.content div.social {
        text-align: center;
        margin-top: 75px;
    }

        div.content div.social img {
            width: 34px;
            margin: 30px;
        }

        div.content div.social img:hover {
            opacity: 0.4;
        }