* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html, body {
    font-size: 16px;
    font-family: 'Roboto', sans-serif;
}

h1, h2 { font-family: 'Montserrat', sans-serif; color: #212121; }
a:hover, a:active, a:visited, a:link { color: inherit; text-decoration: none; }

.top-header { color: #212121; overflow: hidden; padding: 5px 0; border-bottom: 2px solid #ff5500; font-size: 0.8rem; }
.top-header .container { margin: 0 auto; width: 80%; }
.top-header .mail a { float: left; }
.top-header .mail i { color: #212121 !important; }
.top-header .socials { float: right; }
.top-header .socials .social-container {
    display: block;
    overflow: hidden;
    float: left;
    margin-left: 20px;
}
.top-header .social-container i { float: left; margin-right: 5px; }
.top-header .social-container span { float: right; line-height: 200%; }
.top-header .social-container:hover { color: #ff5500 !important; }

.header {
    min-height: 500px;
    background-image: url("../img/banner3.png");
    background-size: cover;
    background-position: center;
    position: relative;
    color: #fff;
}
.header .content { width: 80%; margin: 0 auto; padding-top: 200px; }
.header .content h1 { display: inline-block; color: #fff !important; font-size: 5rem; padding-bottom: -10px; margin-bottom: 40px; position: relative; border-bottom: 12px solid #ff9865; }
/*.header .content h1:before {*/
/*    content: "";*/
/*    position: absolute;*/
/*    left: 0;*/
/*    bottom: 0;*/
/*    height: 1px;*/
/*    width: 210px;*/
/*    border-bottom: 12px solid #ff9865;*/
/*}*/
.header .content p { font-size: 1.3rem; }

.about-me { position: relative; }
.about-me .image {
    left: 0;
    right: 50%;
    background-image: url("../img/avatar.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    top: 0;
    bottom: 0;
}
.about-me .text {
    left: 50%;
    right: 0;
    position: relative;
    top: 0;
    padding: 100px;
    max-width: 50%;
    background-color: #eaeaea;
}
.about-me .text h1 {
    margin-bottom: 15px;
}

.btn {
    padding: 15px 20px;
    border-radius: 25px;
    text-decoration: none;
    font-size: 1.2rem;
}
.btn-primary {
    color: #fff;
    background-color: #f50;
}
.btn-primary:hover {
    background-color: #f30;
}
.footer {
    background-color: #212121;
    color: #fff;
    padding: 10px 0;
    font-size: 0.9rem;
}
.footer .container { width: 80%; margin: 0 auto; overflow: hidden; }
.footer .container .left { float: left; }
.footer .container .right { float: right; }
.footer .container a:hover { color: #ff5500; }

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}
@media screen and (max-width: 800px) {
    .about-me .text { padding: 30px 75px; }
}
@media screen and (max-width: 750px) {
    .about-me .image { display: none; }
    .about-me .text { left: 0; max-width: 100%; float: none; }
}
@media screen and (max-width: 700px) {
    .header { min-height: 350px; }
    .header .content { padding-top: 100px; }
    .header .content h1 { font-size: 3.5rem; }
}
@media screen and (max-width: 600px) {
    .top-header .mail { float: none; text-align: center; }
    .top-header .mail a, .top-header .mail .social-container i, .top-header .mail .social-container span { float: none; }
    .top-header .mail .social-container i { font-size: 0.9rem; }
    .top-header .socials { display: none; }
}
@media screen and (max-width: 500px) {
    .header .content h1 { font-size: 3rem; }
    .about-me .text { padding: 100px 50px; }
}
@media screen and (max-width: 425px) {
    .header .content { text-align: center; }
    .header .content h1 { font-size: 2rem; border-bottom-width: 5px; }
}
@media screen and (max-width: 400px) {
    .about-me .text { padding: 100px 25px; }
}
@media screen and (max-width: 375px) {
    .btn {
        font-size: 0.9rem;
    }
}
@media screen and (max-width: 330px) {
    .btn {
        padding: 15px 10px;
        border-radius: 25px;
        text-decoration: none;
        font-size: 0.8rem;
    }
    .btn-primary {
        color: #fff;
        background-color: #f50;
    }
    .btn-primary:hover {
        background-color: #f30;
    }
}