/* -----------------------------------------------------------
TABLE OF CONTENTS:
--------------------------------------------------------------
1) General
2) Page Loader
3) Helper
4) Header
5) Typography
6) Hero
7) Sections
 7.a) portfolio
 7.b) service
 7.c) experience
 7.d) testimonial
 7.e) blog
 7.f) about
 7.g) contact
 7.h) footer
8) Components
 8.a) skills


-------------------------------------------------------------

------------------------------------------------------------*/
/*-----------------------------------------1) General--------------------------------------------------*/
@font-face {
    font-family: 'Glyphter';
    src: url('../fonts/Glyphter.eot');
    src: url('../fonts/Glyphter?#iefix') format('embedded-opentype'), url('../fonts/Glyphter.woff') format('woff'), url('../fonts/Glyphter.ttf') format('truetype'), url('../fonts/Glyphter.svg#Glyphter') format('svg');
    font-weight: normal;
    font-style: normal;
}

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

body,
html {
    left: 0;
    top: 0;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
    font-family: 'Trirong', serif;
    height: 100%;
    width: 100%;
}

body {
    color: #162da1;
    font-size: 18px;
    line-height: 1.7;
    background-color: #fff;
}

a {
    color: #40434e;
    text-decoration: none;
    transition: ease .6s;
    -webkit-transition: ease .6s;
    -moz-transition: ease .6s;
    -o-transition: ease .6s;
    -ms-transition: ease .6s;
}

a:hover {
    text-decoration: none;
    color: #d4d8df;
}

a:focus {
    outline: none;
    color: #999999;
    text-decoration: none;
}

iframe {
    border: none;
    width: 100%;
}

img {
    max-width: 100%;
}

*:focus {
    outline: none;
}

/*----------------------------------------- 2) Preloader --------------------------------------------------*/
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    z-index: 999999;
}

#status {
    width: 200px;
    height: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
    background-image: url(../images/);
    background-repeat: no-repeat;
    background-position: center center;
    text-align: center;
    margin: -40px 0 0 -100px;
}

#status img {
    text-align: center;
    margin-top: -80px;
}

/*----------------------------------------- 3) Helper --------------------------------------------------*/
.no-pad {
    padding: 0 !important;
    margin: 0 !important;
}

.pad-80 {
    padding-top: 80px;
}

.mar-t-50 {
    margin-top: 50px !important;
}

.mar-tm-10 {
    margin-top: -10px;
}

.white-col {
    background: #ffffff;
    padding: none;
}

/*---- span -----*/
.title-small span {
    position: relative;
}

.title-small span:after {
    content: "";
    position: absolute;
    bottom: -20px;
    height: 3px;
    background: #fffffa;
    width: 28px;
    left: 0;
}

.title-small-center span {
    position: relative;
}

.title-small-center span:after {
    content: "";
    display: block;
    margin: 0 auto;
    margin-top: 20px;
    height: 3px;
    background: #fffffa;
    width: 28px;
    left: 0;
}

/*----- background ------*/
.grey-bg {
    background: #f6f6f6;
    padding: 120px 0;
    display: block;
}

.white-bg {
    background: #ffffff;
    padding: 120px 0;
    display: block;
}

/*-------- content --------*/
.content-detail {
    font-weight: 400;
    margin-top: 70px;
    line-height: 30px;
    font-size: 22px;
    letter-spacing: 0.4px;
}

.content-details {
    font-weight: 400;
    margin-top: 40px;
    line-height: 30px;
    font-size: 22px;
}

.pad-bottom {
    padding-bottom: 80px;
}

.text-detail {
    margin-top: 30px;
    color: #40434e;
}

.img-detail {
    margin-top: 10px;
}

.listing-item {
    list-style: none;
    display: inline-block;
    width: 100%;
    padding: 0;
    margin: 0;
}

/*----------------------------------------- 4) Header --------------------------------------------------*/
.header {
    width: 100%;
    z-index: 9999;
}

.for-sticky {
    position: fixed;
    z-index: -1;
    bottom: 0;
    width: 100%;
    height: 80px;
    opacity: 0.8;
    z-index: 1;
    top: 0;
    left: 0;
    border-bottom: 1px solid #f1f1f1;
    display: block;
    padding: 0px 15px 5px 15px;
    background: #ffffff;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.logo-nav {
    padding: 6px 0 10px 0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    width: 60px;
    display: block;
}

.opacity-nav {
    opacity: 0.8;
    z-index: 2;
}

/*----------- panel ----------*/
.content-wrap {
    -webkit-overflow-scrolling: touch;
    height: 100%;
    width: 100%;
    padding-top: 80px;
}

.content {
    position: absolute;
    width: 100%;
    height: 100%;
}

.content::before {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    content: '';
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    -webkit-transition: opacity 0.4s, -webkit-transform 0s 0.4s;
    transition: opacity 0.4s, transform 0s 0.4s;
    -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
    transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}

/* Menu Button */
.menu-button {
    width: 64px;
    height: 45px;
    position: fixed;
    right: 0;
    margin-top: 13px;
    margin-right: 35px;
    z-index: 1000;
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: none;
}

.menu-button span {
    display: block;
    position: absolute;
    height: 1px;
    width: 100%;
    background: #40434e;
    border-radius: 9px;
    opacity: 1;
    left: 0;
}

.menu-button span:nth-child(1) {
    top: 0px;
}

.menu-button span:nth-child(2) {
    top: 9px;
}

.menu-button span:nth-child(3) {
    top: 18px;
}

.menu-button:hover {
    opacity: 0.6;
}

/* Close Button */
.close-button {
    width: 2em;
    height: 2em;
    position: absolute;
    right: 2em;
    top: 2em;
    overflow: hidden;
    text-indent: 1em;
    font-size: 0.75em;
    border: none;
    background: transparent;
    color: transparent;
}

.close-button::before,
.close-button::after {
    content: '';
    position: absolute;
    width: 3px;
    height: 100%;
    top: 0;
    left: 50%;
    background: #bdc3c7;
}

.close-button::before {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.close-button::after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

/* Menu */
.menu-wrap {
    position: fixed;
    z-index: 1001;
    width: 300px;
    height: 100%;
    right: 0;
    float: right;
    background: #40434e;
    padding: 2.5em 1.5em 0;
    -webkit-transform: translate3d(300px, 0, 0);
    transform: translate3d(300px, 0, 0);
    -webkit-transition: -webkit-transform 0.4s;
    transition: transform 0.4s;
    -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
    transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}

.menu,
.menu-list {
    height: 100%;
    overflow-x: auto;
}

.menu-list {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
}

.menu-list a {
    display: block;
    padding: 1.5em 0;
    -webkit-transform: translate3d(0, 500px, 0);
    transform: translate3d(0, 500px, 0);
    color: #a5a5a5;
    position: relative;
}

.menu-list a:hover,
.menu-list a:active span {
    color: #ffffff;
}

.menu-list,
.menu-list a {
    -webkit-transition: -webkit-transform 0s 0.4s;
    transition: transform 0s 0.4s;
    -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
    transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}

.menu a:nth-child(2) {
    -webkit-transform: translate3d(0, 1000px, 0);
    transform: translate3d(0, 1000px, 0);
}

.menu-list a:nth-child(3) {
    -webkit-transform: translate3d(0, 1500px, 0);
    transform: translate3d(0, 1500px, 0);
}

.menu-list a:nth-child(4) {
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
}

.menu-list a:nth-child(5) {
    -webkit-transform: translate3d(0, 2500px, 0);
    transform: translate3d(0, 2500px, 0);
}

.menu-list a:nth-child(6) {
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
}

.menu-list a span:nth-last-child(1) {
    margin-bottom: 100px;
}

.menu-list a span {
    margin-left: 10px;
    font-weight: 400;
    font-size: 18px;
    letter-spacing: 5px;
    text-transform: uppercase;
    z-index: 2;
    position: absolute;
    margin-bottom: 20px;
    padding: 10px;
}

.menu-list a span:before {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: #ffffff;
    -webkit-transition: width .3s ease;
    transition: width .3s ease;
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    z-index: -1;
}

.menu-list a.active span {
    color: #ffffff !important;
}

.menu-list a.active span:before {
    width: 100%;
}

/* Shown menu */
.show-menu .menu-wrap {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition: -webkit-transform 0.8s;
    transition: transform 0.8s;
    -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
    transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}

.show-menu .menu-list,
.show-menu .menu-list a {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition: -webkit-transform 0.8s;
    transition: transform 0.8s;
    -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
    transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}

.show-menu .menu-list a {
    -webkit-transition-duration: 0.9s;
    transition-duration: 0.9s;
}

.show-menu .content::before {
    opacity: 1;
    -webkit-transition: opacity 0.8s;
    transition: opacity 0.8s;
    -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
    transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

/*----------------------------------------- 5) Typography --------------------------------------------------*/
h1,
h2,
h3,
h4,
h5 {
    letter-spacing: 0.8px;
    font-family: 'Overpass', sans-serif;
}

p {
    letter-spacing: 0.5px;
    font-size: 18px;
    line-height: 34px;
    font-weight: 300;
}

#home h1 {
    line-height: 40px;
    letter-spacing: 0.6px;
}

#home .typed {
    font-weight: 400;
    font-size: 100px;
    line-height: 26px;
    letter-spacing: 1.5px;
    margin: 0 auto;
    opacity: 0.6;
}

.year {
    font-size: 26px;
    font-weight: 500;
    margin-bottom: 10px;
    font-family: 'Carme', sans-serif;
}

.job {
    font-size: 16px;
    font-weight: 500;
    line-height: 34px;
    letter-spacing: 0.4px;
    text-transform: none;
    color: #40434e;
}

.company {
    font-size: 12px;
    line-height: 14px;
    border: 1px solid #ececec;
    color: #40434e;
    padding: 8px 10px;
    border-radius: 6px;
    display: inline-block;
    margin-top: 5px;
    font-weight: 400;

}

/*----------------------------------------- 6) Hero --------------------------------------------------*/
#home {
    background: url('../images/hero1.jpeg');
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-width: 100%;
    min-height: 100%;
    height: 100%;
    width: 100%;
    display: block;
}

.wrap-hero-content {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.hero-content {
    position: absolute;
    text-align: center;
    min-width: 50%;
    min-height: 50%;
    left: 50%;
    top: 50%;
    padding: 65px;
    background: rgba(255, 255, 255, 0.8);
    outline: 0px none #FFFFFF;
    outline-offset: 8px;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

/*mouse*/
.mouse-icon {
    position: absolute;
    border: 2px solid #40434e;
    background: #ffffff;
    opacity: 0.8;
    border-radius: 13px;
    height: 40px;
    width: 30px;
    margin: 0 auto;
    display: block;
    left: 0;
    right: 0;
    bottom: 30px;
    z-index: 100;
}

.mouse-icon .scroll {
    -webkit-animation-name: scrolling;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 0s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-play-state: running;
    animation-name: scrolling;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-play-state: running;
}

.mouse-icon .scroll {
    position: relative;
    border-radius: 10px;
    background: #40434e;
    width: 4px;
    height: 8px;
    top: 4px;
    margin-left: auto;
    margin-right: auto;
}

@-webkit-keyframes scrolling {
    0% {
        top: 2px;
        opacity: 0;
    }

    30% {
        top: 8px;
        opacity: 1;
    }

    100% {
        top: 16px;
        opacity: 0;
    }
}

@keyframes scrolling {
    0% {
        top: 2px;
        opacity: 0;
    }

    30% {
        top: 8px;
        opacity: 1;
    }

    100% {
        top: 16px;
        opacity: 0;
    }
}


/*----- typed effect ---*/
.typed-cursor {
    opacity: 0;
}


/*----------------------------------------- 7) Sections --------------------------------------------------*/
/*---------- a. portfolio -----------*/
ul.portfolio-image {
    list-style: none;
    position: relative;
    width: 100%;
    height: auto;
    padding: 0;
    margin: 0;
}

ul.portfolio-image li {
    float: left;
    display: block;
    list-style: none;
    position: relative;
    display: inline-block;
    overflow: hidden;
    padding-top: 46%;
}

ul.portfolio-image li:hover {
    cursor: pointer;
}

ul.portfolio-image li:hover img {
    -webkit-filter: grayscale(20%);
    transform: scale(1.15);
}

ul.portfolio-image li:hover .image-bg {
    opacity: 1;
}

ul.portfolio-image li:hover .description-wrap {
    background: rgba(212, 216, 223, 0.6);
}

ul.portfolio-image li img {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    -webkit-filter: grayscale(100%);
    transition: filter, transform, 0.5s;
}

ul.portfolio-image li .decription-wrap {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(212, 216, 223, 0.4);
    padding: 20px;
    transition: background, 0.5s;
}

ul.portfolio-image li .image-bg {
    color: #162da1;
    background: #ffffff;
    background: rgba(212, 216, 223, 0.5);
    font-family: 'Carme', sans-serif;
    font-size: 18px;
    text-transform: none;
    width: 100%;
    height: 100%;
    display: inline-block;
    -ms-transform: translate(-50%, -50%);
    /* IE 9 */
    -webkit-transform: translate(-50%, -50%);
    /* Chrome, Safari, Opera */
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    padding: 20px 0;
    position: relative;
    margin: 0 auto;
    text-align: center;
    opacity: 0;
    transition: opacity, 0.5s;
    letter-spacing: 1.5px;
    font-weight: 300;
    color: transparent;
}

ul.portfolio-image li .desc {
    position: absolute;
    z-index: 1;
    top: 45%;
    left: 0;
    display: table-cell;
    right: 0;
    text-align: center;
    color: #162da1;
    font-size: 22px;
    font-weight: 300;
}


/*---------- b. service -----------*/
.icon-use {
    font-family: 'Glyphter';
    font-size: 54px;
    line-height: 40px;
    color: #162da1;
    margin: 0;
}

.head-sm {
    color: #2b2b2b;
    font-size: 18px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-top: 10px;
    margin-bottom: 20px;
    font-family: 'Carme', sans-serif;
}

.text-grey {
    color: #162da1;
    line-height: 26px;
    margin-bottom: 60px;
}

/*---------- c. experience -----------*/
.wrap-card {
    position: relative;
    box-shadow: 0px 0px 0px #d4d8df;
    box-shadow: 0px 0px 0px #d4d8df;
    transition: all 0.2s ease 0s;
    -webkit-transform: translateY(0px) translateX(0px);
}

.wrap-card:before,
.wrap-card:after {
    display: inline-block;
    position: absolute;
    content: " ";
    width: 100%;
    height: 2px;
    background: #d4d8df;
    -webkit-transform: scaleX(0);
    transition: all 0.2s ease;
}

.wrap-card:before {
    top: 0;
    left: 0;
    -webkit-transform-origin: 0 0;
}

.wrap-card:after {
    bottom: 0;
    left: 0;
    -webkit-transform-origin: 100% 0;
}

.wrap-card:hover {
    box-shadow: 20px 20px 0px #d4d8df;
    -webkit-transform: translateY(-10px) translateX(-10px);
    transition: all 0.2s ease 0.4s;
}

.wrap-card:hover:after,
.wrap-card:hover:before {
    -webkit-transform: scaleX(1);
}

.card {
    background: #ffffff;
    padding: 30px 35px 45px 35px;
    margin-bottom: 30px;

    border: 1px solid rgba(129, 129, 129, 0.1);
}

.card:before,
.card:after {
    display: inline-block;
    position: absolute;
    content: " ";
    width: 2px;
    height: 100%;
    background: #d4d8df;
    -webkit-transform: scaleY(0);
    transition: all 0.2s ease 0.2s;
}

.card:before {
    top: 0;
    left: 0;
    -webkit-transform-origin: 0 100%;
}

.card:after {
    top: 0;
    right: 0;
    -webkit-transform-origin: 0 0;
}

.card:hover:after,
.card:hover:before {
    -webkit-transform: scaleY(1);
}

/*---------- d. testimonial -----------*/
#testimonial {
    background-image: url(../images/testimonial-bg.jpg);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 550px;
}

.list-testimonial {
    display: block;
    width: 100%;
}

.list-testimonial .content-testimonial {
    text-align: center;
    color: #ffffff;
}

.list-testimonial .content-testimonial .testi {
    font-size: 18px;
    line-height: 46px;
    letter-spacing: 2px;
}

.list-testimonial .content-testimonial .people {
    font-size: 14px;
    margin-top: 30px;
    letter-spacing: 2px;
    color: #B7B7B7;
    font-weight: 700;
}

.mask-testimonial {
    background-color: rgba(47, 47, 47, 0.7);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.wrap-testimonial {
    z-index: 1;
    position: relative;
}

/*-------------- e. blog -------------*/
.grid {
    margin-top: 60px;
}

.grid:after {
    content: '';
    display: block;
    clear: both;
}

.grid-item {
    width: 33.333%;
    float: left;
    top: 0px;
    left: 0px;
    overflow: hidden;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
    margin-bottom: 30px;
}

.grid-item .wrap-article {
    border: 1px solid rgba(129, 129, 129, 0.1);
    background: #ffffff;
    padding: 30px 20px;
}

.grid-item .wrap-article img {
    text-align: center;
    display: block;
    margin: 0 auto;
}

.grid-item .wrap-article .img-circle {
    width: 133px;
    height: 133px;
}

.grid-item .wrap-article .fancy {
    line-height: 0.5;
    text-align: center;
    font-size: 16px;
    margin-top: 40px;
    color: #d4d8df;
}

.grid-item .wrap-article .fancy span {
    display: inline-block;
    position: relative;
}

.grid-item .wrap-article .fancy span:before,
.grid-item .wrap-article .fancy span:after {
    content: "";
    margin-top: 1px;
    position: absolute;
    height: 5px;
    border-top: 1px solid #fffffa;
    top: 0;
    width: 60%;
}

.grid-item .wrap-article .fancy span:before {
    right: 100%;
    margin-right: 5px;
}

.grid-item .wrap-article .fancy span:after {
    left: 100%;
    margin-left: 5px;
}

.grid-item .wrap-article .title {
    font-size: 16px;
    padding: 0 10px 0 10px;
    text-align: center;
    letter-spacing: 0.1;
    line-height: 26px;
    text-transform: uppercase;
    font-weight: 700;
}

.grid-item .wrap-article .title:after {
    content: "";
    display: block;
    margin: 0 auto;
    bottom: -20px;
    height: 1px;
    background: #fffffa;
    width: 48px;
    left: 0;
    margin-top: 30px;
}

.grid-item .wrap-article .content-blog {
    margin-top: 30px;
    padding: 0 10px 0 10px;
    text-align: justify;
    color: #5f5f5f;
}

/*---------- f. quote -----------*/
#about {
    min-height: 650px;
    display: inline-block;
    width: 100%;
}

.bg-about {
    background: url('../images/Bullseye-Gradient.svg');
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    padding: 0;
    margin: 0;
    min-height: 660px;
    width: 100%;
    height: 100%;
    float: left;
}

.wrap-about {
    height: 100%;
    width: 100%;
    position: relative;
    display: block;
    min-height: 480px;
}

.wrap-about .w-content {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%);
}

.wrap-about .w-content td {
    font-family: 'Carme', sans-serif;
    font-size: 20px;
    font-weight: 300;
}

.wrap-about .w-content td.title {
    padding-right: 10px;
    font-weight: 500;
}

.wrap-about .w-content td.break {
    padding-right: 15px;
}

.wrap-about .w-content tr {
    height: 35px;
}

.wrap-about .head-about {
    font-family: 'Carme', sans-serif;
    font-size: 26px;
    line-height: 44px;
    letter-spacing: 0.5px;
    font-weight: 300;
}

.wrap-about .name {
    margin: 40px 0 20px 0;
    font-size: 14px;
}

/*---------- g. contact -----------*/
#contact {
    padding: 120px 0 200px 0;
}

#contact form {
    margin-top: 25px;
}

#contact .slider-masks {
    background-color: rgba(212, 216, 223, 0.5);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

#contact .group {
    position: relative;
    margin-bottom: 65px;
}

#contact input,
#contact textarea {
    font-size: 18px;
    padding: 10px 10px 10px 5px;
    display: block;
    width: 100%;
    border: none;
    border-bottom: 1px solid #2b2b2b;
    background: transparent;
    color: #969696;
    font-size: 18px;
}

#contact input:focus,
#contact textarea:focus {
    outline: none;
    border-bottom: none;
}

#contact label {
    color: #2b2b2b;
    font-size: 14px;
    font-weight: normal;
    position: absolute;
    pointer-events: none;
    left: 5px;
    top: 10px;
    transition: 0.2s ease all;
    -moz-transition: 0.2s ease all;
    -webkit-transition: 0.2s ease all;
}

#contact input:focus ~ label,
#contact input:valid ~ label,
#contact textarea:focus ~ label,
#contact textarea:valid ~ label {
    top: -25px;
    font-size: 12px;
    color: #d4d8df;
}

#contact .bar {
    position: relative;
    display: block;
    width: 100%;
}

#contact .bar:before,
#contact .bar:after {
    content: '';
    height: 2px;
    width: 0;
    bottom: 1px;
    position: absolute;
    background: #d4d8df;
    transition: 0.2s ease all;
    -moz-transition: 0.2s ease all;
    -webkit-transition: 0.2s ease all;
}

#contact .bar:before {
    left: 50%;
}

#contact .bar:after {
    right: 50%;
}

#contact input:focus ~ .bar:before,
#contact input:focus ~ .bar:after,
#contact textarea:focus ~ .bar:after,
#contact textarea:focus ~ .bar:before {
    width: 50%;
}

#contact .highlight {
    position: absolute;
    height: 60%;
    width: 100%;
    top: 25%;
    left: 0;
    pointer-events: none;
    opacity: 0.5;
}

#contact input:focus ~ .highlight,
#contact textarea:focus ~ .highlight {
    -webkit-animation: inputHighlighter 0.3s ease;
    -moz-animation: inputHighlighter 0.3s ease;
    animation: inputHighlighter 0.3s ease;
}

#contact input[type=submit] {
    border: 1px solid #2b2b2b !important;
    color: #2b2b2b;
    padding: 10px;
    font-weight: 700;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    transition: 0.2s ease all;
    -moz-transition: 0.2s ease all;
    -webkit-transition: 0.2s ease all;
}

#contact input[type=submit]:hover {
    background: #2b2b2b;
    color: #ffffff;
}

@-webkit-keyframes inputHighlighter {
    from {
        background: #5264AE;
    }

    to {
        width: 0;
        background: transparent;
    }
}

@-moz-keyframes inputHighlighter {
    from {
        background: #d4d8df;
    }

    to {
        width: 0;
        background: transparent;
    }
}

@keyframes inputHighlighter {
    from {
        background: #d4d8df;
    }

    to {
        width: 0;
        background: transparent;
    }
}

/*-------------- h. footer ------------------*/
.footer-top {
    width: 100%;
    text-align: center;
    color: #40434e;
    display: table;
}

.socials {
    width: 100%;
    margin: 0;
    padding: 0;
}

.socials * {
    box-sizing: border-box;
    -webkit-transition: all 0.35s ease;
    transition: all 0.35s ease;
}

.socials li {
    display: inline-block;
    list-style: outside none none;
    float: left;
    overflow: hidden;
    width: 33.33333%;
    font-size: 18px;
}

.socials a {
    padding: 0.3em 0.8em;
    color: rgba(255, 255, 255, 0.7);
    position: relative;
    display: inline-block;
    letter-spacing: 1px;
    margin: 0;
    text-decoration: none;
    padding: 25px 0;
    width: 100%;
}

.socials a:before,
.socials a:after {
    position: absolute;
    -webkit-transition: all 0.35s ease;
    transition: all 0.35s ease;
}

.socials a:before {
    bottom: 100%;
    display: block;
    height: 3px;
    width: 100%;
    content: "";
}

.socials a:after {
    padding: 0.3em 0.8em;
    position: absolute;
    bottom: 100%;
    left: 0;
    content: attr(data-hover);
    color: white;
    white-space: nowrap;
    width: 100%;
    padding: 25px 0;
}

.socials li:hover a,
.socials .current a {
    transform: translateY(100%);
}

.facebook {
    background: #969696;
    /*padding: 20px 0;*/
}

.facebook a:after {
    background-color: #527bbb;
}

.twitter {
    background: #ABABAB;
}

.twitter a:after {
    background-color: #77ccf1;
}

.gplus {
    background: #d8d8d8;
}

.gplus a:after {
    background: #f4d83e;
}

.footer-bottom {
    width: 100%;
    background: #40434e;
    padding: 80px 0;
    color: #636363;
}


/*----------------------------------------- 8) Component --------------------------------------------------*/
/*---------------- a. Skills ----------------*/
.skillst {
    margin-top: 30px;
}

.skillst .skillbar {
    width: 100%;
    height: 10px;
    background-color: #f6f6f6;
    position: relative;
    margin-bottom: 60px;
    padding: 2px;
    box-sizing: border-box;
}

.skillst .count-bar {
    width: 100%;
    height: 5px;
    width: 0px;
    position: relative;
}

.skillst .count-bar {
    background-color: #d4d8df;
}

.skillst .count-bar span {
    font-size: 12px;
}

.skillst .title {
    position: absolute;
    line-height: 25px;
    top: -35px;
    left: 0;
    padding-left: 10px;
    font-size: 16px !important;
}

.skillst .count-bar .count {
    position: absolute;
    line-height: 18px;
    top: -28px;
    right: -20px;
    width: 40px;
    height: 18px;
    color: #162da1;
    text-align: center;
    background-color: #2b2b2b;
}

.skillst .count-bar .count span {
    position: relative;
    display: block;
}

.skillst .count-bar .count span:after {
    position: absolute;
    left: 50%;
    margin-left: -4px;
    top: 18px;
    content: "";
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
}

.skillst .count-bar .count {
    background-color: #d4d8df;
}

.skillst .count-bar .count span:after {
    border-top: 4px solid #d4d8df;
}

.shadow {
    background: #ffffff;
    color: #40434e;
    font-family: inherit;
    text-shadow: #162da1 1px 1px, #162da1 0px 0px, #162da1 1px 1px, #162da1 2px 2px, #162da1 3px 3px, #162da1 4px 4px, #162da1 5px 5px, #162da1 6px 6px, #162da1 7px 7px, #162da1 8px 8px, #162da1 9px 9px, #162da1 10px 10px, #162da1 11px 11px, #162da1 12px 12px, #162da1 13px 13px, #162da1 14px 14px, #162da1 15px 15px, #162da1 16px 16px, #162da1 17px 17px, #162da1 18px 18px, #162da1 19px 19px, #162da1 20px 20px, #162da1 21px 21px, #162da1 22px 22px, #162da1 23px 23px, #162da1 24px 24px, #162da1 25px 25px, #162da1 26px 26px, #162da1 27px 27px, #162da1 28px 28px, #162da1 29px 29px, #162da1 30px 30px, #162da1 31px 31px, #162da1 32px 32px, #162da1 33px 33px, #162da1 34px 34px, #162da1 35px 35px, #162da1 36px 36px, #162da1 37px 37px, #162da1 38px 38px, #162da1 39px 39px, #162da1 40px 40px, #162da1 41px 41px, #162da1 42px 42px, #162da1 43px 43px, #162da1 44px 44px, #162da1 45px 45px, #162da1 46px 46px, #162da1 47px 47px, #162da1 48px 48px, #162da1 49px 49px, #162da1 50px 50px, #162da1 51px 51px, #162da1 52px 52px, #162da1 53px 53px, #162da1 54px 54px, #162da1 55px 55px, #162da1 56px 56px, #162da1 57px 57px, #162da1 58px 58px, #162da1 59px 59px, #162da1 60px 60px, #162da1 61px 61px, #162da1 62px 62px, #162da1 63px 63px, #162da1 64px 64px, #162da1 65px 65px, #162da1 66px 66px, #162da1 67px 67px, #162da1 68px 68px, #162da1 69px 69px, #162da1 70px 70px, #162da1 71px 71px, #162da1 72px 72px, #162da1 73px 73px, #162da1 74px 74px, #162da1 75px 75px, #162da1 76px 76px, #162da1 77px 77px, #162da1 78px 78px, #162da1 79px 79px, #162da1 80px 80px, #162da1 81px 81px, #162da1 82px 82px, #162da1 83px 83px, #162da1 84px 84px, #162da1 85px 85px, #162da1 86px 86px, #162da1 87px 87px, #162da1 88px 88px, #162da1 89px 89px, #162da1 90px 90px, #162da1 91px 91px, #162da1 92px 92px, #162da1 93px 93px, #162da1 94px 94px, #162da1 95px 95px, #162da1 96px 96px, #162da1 97px 97px, #162da1 98px 98px, #162da1 99px 99px, #162da1 100px 100px, #162da1 101px 101px, #162da1 102px 102px, #162da1 103px 103px, #162da1 104px 104px, #162da1 105px 105px, #162da1 106px 106px, #162da1 107px 107px, #162da1 108px 108px, #162da1 109px 109px, #162da1 110px 110px, #162da1 111px 111px, #162da1 112px 112px, #162da1 113px 113px, #162da1 114px 114px, #162da1 115px 115px, #162da1 116px 116px, #162da1 117px 117px, #162da1 118px 118px, #162da1 119px 119px;
}

.bg-flat-mountains {
    background: url('../images/Flat-Mountains.svg');
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    padding: 0;
    margin: 0;
    min-height: 660px;
    width: 100%;
    height: 100%;
    float: right;
}

.project-container {
    overflow: hidden;
    position: relative;
}

.project-container img {
    width: 100%;
}