/*
Template Name: Blvck - Personal vCard & Resume Template
Version: 1.0
Author: PxlSolutions
Author URI: http://themeforest.net/user/pxlsolutions
Description: CV, Resume, vCard HTML Template

[TABLE OF CONTENTS]

01. Global Styles
02. Preloader
03. Layout
04. Header
05. Main Content
06. Section Welcome
07. Section Fun Facts
08. Section Resume
09. Section Works
10. Section Testimonials
11. Section Blog
12. Section Customers
13. Section Contact
14. Other Elements
15. Responsive
*/
/*-----------------------------------------------------------------*/
/*                      GLOBAL STYLES                              */
/*-----------------------------------------------------------------*/
body {
    color: #1a1a1a;
    background-color: #0C0C0C;
    font-family: "Roboto Slab",serif;
    overflow-x: hidden;
}

h1,h2,h3,h4,h5,h6 {
    font-family: "Montserrat",sans-serif;
}

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

ul {
    padding-left: 15px;
}

li {
    padding: 0 0 10px;
}

/*-----------------------------------------------------------------*/
/*                      LAYOUT                                     */
/*-----------------------------------------------------------------*/
.wrapper {
    width: 1000px;
    margin: 0 auto;
}

/*-----------------------------------------------------------------*/
/*                      HEADER                                     */
/*-----------------------------------------------------------------*/
.header {
    background: #0C0C0C;
    padding: 46px;
    position: fixed;
    height: 100%;
    z-index: 5;
    margin: 0 auto;
}

.header .avatar {
    overflow: hidden;
    width: 165px;
    height: 165px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    border-radius: 50%;
    margin-left: 25px;
}

.header .avatar img {
    width: 100%;
}

.header .name {
	padding: 0px !imporatant;
	margin: 34px 0;
}

.header .name h1 {
    font-family: "Montserrat",sans-serif;
    font-size: 24px;
    font-weight: 400;
    color: #FFF;
    margin: 0 0 5px;
    text-transform: uppercase;
}

.header .name span {
    color: #777676;
    font-family: "Roboto Slab",serif;
    font-size: 15px;
    font-weight: 300;
}
/* === Social Icons === */
.header .social-icons {
    margin: 0 0 34px;
}

.header .social-icons ul {
    list-style: none;
    margin-left: 25px;
    padding: 0;
}

.header .social-icons ul li {
    display: inline-block;
    padding: 0 20px 0 0;
}

.header .social-icons ul li a {
    color: #FFF;
}

.header .social-icons ul li a i {
    font-size: 16px;
}

.header .social-icons ul li:last-child {
    padding-right: 0;
}
/* === Navigation === */
.header .main-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.header .main-nav ul li {
    padding-bottom: 15px;
}

.header .main-nav ul li a {
    color: #bebebe;
    font-family: "Montserrat",sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    position: relative;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.header .main-nav ul li a:hover,.header .main-nav ul li a:focus {
    color: #FFF;
    text-decoration: none;
}

.header .main-nav ul li a:before {
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.header .main-nav ul li a:after {
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.header .main-nav ul li a:hover:before {
    content: '';
    position: absolute;
    left: -8px;
    top: -5px;
    height: 7px;
    width: 7px;
    border-top: solid 2px #FFF;
    border-left: solid 2px #FFF;
}

.header .main-nav ul li a:hover:after {
    content: '';
    position: absolute;
    right: -8px;
    bottom: -5px;
    height: 7px;
    width: 7px;
    border-bottom: solid 2px #FFF;
    border-right: solid 2px #FFF;
}

.header .main-nav ul li:last-child {
    padding-bottom: 0;
}

.header .main-nav ul li.current a {
    color: #FFF;
}

.header .main-nav ul li.current a:before {
    content: '';
    position: absolute;
    left: -8px;
    top: -5px;
    height: 7px;
    width: 7px;
    border-top: solid 2px #FFF;
    border-left: solid 2px #FFF;
}

.header .main-nav ul li.current a:after {
    content: '';
    position: absolute;
    right: -8px;
    bottom: -5px;
    height: 7px;
    width: 7px;
    border-bottom: solid 2px #FFF;
    border-right: solid 2px #FFF;
}

/* === Copyright === */
.header .copyright {
    bottom: 20px;
    position: absolute;
}

.header .copyright span {
    color: #6a6a6a;
    font-family: "Roboto Slab",serif;
    font-size: 12px;
    font-weight: 300;
}


.header .bar,.header .bar:after,.header .bar:before {
    width: 30px;
    height: 3px;
}

.header .bar {
    position: relative;
    transform: translateY(25px);
    background: #fff;
    transition: all 0 300ms;
}

.header .bar.animate {
    background: rgba(255,255,255,0);
}

.header .bar:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 10px;
    background: #fff;
    transition: bottom 300ms 300ms cubic-bezier(0.23,1,0.32,1),transform 300ms cubic-bezier(0.23,1,0.32,1);
}

.header .bar:after {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    background: #fff;
    transition: top 300ms 300ms cubic-bezier(0.23,1,0.32,1),transform 300ms cubic-bezier(0.23,1,0.32,1);
}

.header .bar.animate:after {
    top: 0;
    transform: rotate(45deg);
    transition: top 300ms cubic-bezier(0.23,1,0.32,1),transform 300ms 300ms cubic-bezier(0.23,1,0.32,1);
}

.header .bar.animate:before {
    bottom: 0;
    transform: rotate(-45deg);
    transition: bottom 300ms cubic-bezier(0.23,1,0.32,1),transform 300ms 300ms cubic-bezier(0.23,1,0.32,1);
}