/*

[Main Stylesheet]

Project: CVIT - Multipurpose Personal vCard / CV / Resume Template
Version: 1.0
Author : themelooks.com

[Table of Contents]

1. GENERAL STYLES
    1.1. TYPHOGRAPHY
    1.2. LOGO
    1.3. SECTION TITLE
    1.4. VERTICAL CENTERING
    1.5. BACK BUTTON
    1.6. BREADCRUMB
    1.7. BACK TO TOP BUTTON
    1.8. PRELOADER
    1.9. BROWSER UPGRADE

2. HEADER AREA

3. DEMO PREVIEW AREA

4. COPYRIGHT AREA

5. HELPER CLASSES
    5.1. RESET GUTTER
    5.2. BACKGROUND IMAGE
    5.3. BORDER NONE

*/

/*------------------------------------*\
    1. GENERAL STYLES
\*------------------------------------*/
/* 1.1. TYPHOGRAPHY */
html, body {
    font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
    height: 100%;
}
body {
    background-color: #fff;
    color: #737373;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: 300;
}
p {
    font-size: 14px;
    font-weight: 300;
    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
    line-height: 22px;
    color: #737373;
}
a, .mdl-button {
    font-weight: 500;
    color: #303030;
}
a:hover, a:focus {
    color: #ff5252;
    text-decoration: none;
    outline: none;
}

.form-control::-webkit-input-placeholder {
    color: #fff;
}
.form-control::-moz-placeholder {
    color: #fff;
}
.form-control::-ms-input-placeholder {
    color: #fff;
}
.form-control.error {
    border-color: #ff5252;
}

/* 1.2. LOGO */
.logo {
    display: block;
    color: #fff;
    font-size: 36px;
    line-height: 40px;
    font-weight: 900;
    text-transform: uppercase;
    -webkit-transition: margin .25s;
            transition: margin .25s;
}
.logo span.first,
.logo i.fa {
    color: #ff4718;
}
.logo span.first,
.logo span.second,
.logo i.fa {
    display: inline-block;
    vertical-align: middle;
}
.logo i.fa {
    font-size: 28px;
    line-height: 0;
}

/* 1.3. SECTION TITLE */
.section--title {
    margin-bottom: 30px;
    text-align: center;
	text-transform: uppercase;
}

.section--title h2 {
    position: relative;
    display: inline-block;
    margin-top: -7px;
    margin-bottom: 0;
    padding-bottom: 18px;
    color: #303030;
    font-size: 36px;
    line-height: 41px;
}

.section--title h2:before,
.section--title h2:after {
    content: " ";
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.section--title h2:before {
    bottom: 0;
    width: 100px;
    padding: 4px 0 5px;
    border-style: solid;
    border-width: 1px 0;
    border-color: #737373;
}

.section--title h2:after {
    bottom: 5px;
    width: 200px;
    height: 1px;
    background-color: #303030;
}

/* 1.4. VERTICAL CENTERING */
.vc-parent {
    width: 100%;
    height: 100%;
    display: table;
}
.vc-child {
    display: table-cell;
    vertical-align: middle;
}
.vc-child-bottom {
    display: table-cell;
    vertical-align: bottom;
}

/* 1.5. BACK BUTTON */
.back-button {
    margin-top: 38px;
    display: block;
    -webkit-transition: margin-top .25s;
            transition: margin-top .25s;
}
#topNav.sticky .back-button {
    margin-top: 31px;
}
.back-button span {
    display: block;
    background-color: #fff;
    height: 1px;
}
.back-button:hover span {
    background-color: #ff5252;
}
.back-button span:nth-child(1) {
    -webkit-transform: rotate(-30deg);
        -ms-transform: rotate(-30deg);
            transform: rotate(-30deg);
    width: 13px;
    margin-bottom: 2px;
}
.back-button span:nth-child(2) {
    margin-bottom: 2px;
    margin-left: 2px;
    width: 30px;
}
.back-button span:nth-child(3) {
    -webkit-transform: rotate(30deg);
        -ms-transform: rotate(30deg);
            transform: rotate(30deg);
    width: 13px;
}

/* 1.6. BREADCRUMB */
.breadcrumb {
    background-color: transparent;
    padding: 8px 15px 0;
    margin-top: 22px;
    margin-bottom: 0;
    -webkit-transition: padding .25s;
            transition: padding .25s;
}
#topNav.sticky .breadcrumb {
    padding: 2px 15px 22px;
}
.breadcrumb li a {
    color: #fff;
}
.breadcrumb li a:hover {
    color: #ff5252;
}
.breadcrumb>.active {
    color: #ff5252;
    font-weight: 300;
}

/* 1.7. BACK TO TOP BUTTON */
#backToTop {
    position: fixed;
    bottom: 35px;
    right: 35px;
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transition: opacity .25s ease-in-out;
            transition: opacity .25s ease-in-out;
    z-index: 1;
}
#backToTop.show,
#backToTop.alwaysShow {
    opacity: 1;
    filter: alpha(opacity=100);
}
#backToTop button {
    display: block;
    width: auto;
    height: auto;
    min-width: 50px;
    padding: 6px 0 8px;
    background-color: #f9f9f9;
    border: 2px solid #303030;
    font-size: 32px;
    line-height: 0;
    text-align: center;
    outline: 0;
}

/* 1.8. PRELOADER */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #303030;
    z-index: 999;
}

.preloader--bounce {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
    width: 40px;
    height: 40px;
}

.preloader-bouncer--1,
.preloader-bouncer--2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #fff;
    opacity: 0.6;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
        filter: alpha(opacity=60);
    -webkit-animation: preloaderBouncer 2s infinite ease-in-out;
            animation: preloaderBouncer 2s infinite ease-in-out;
}

.preloader-bouncer--2 {
    -webkit-animation-delay: -1s;
            animation-delay: -1s;
}

@-webkit-keyframes preloaderBouncer {
    0%, 100% {
        -webkit-transform: scale(0);
    }

    50% {
        -webkit-transform: scale(1);
    }
}

@keyframes preloaderBouncer {
    0%, 100% {
        -webkit-transform: scale(0);
                transform: scale(0);
    }

    50% {
        -webkit-transform: scale(1);
                transform: scale(1);
    }
}

/* 1.9. BROWSER UPGRADE */
.browserupgrade {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    margin: 0;
    padding: 20px 0;
    color: #fff;
    background-color: #ff9800;
    text-align: center;
}
.browserupgrade a {
	color: #fff;
	text-decoration: underline;
}

/*------------------------------------*\
    2. HEADER AREA
\*------------------------------------*/
#header {
    z-index: 0;
}

.header-item {
    padding: 80px 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    z-index: 0;
}

.header-item-2 .header-img-holder {
    margin-top: 20px;
}

.header-img {
    display: block;
}
.header-img img.img-responsive {
    width: 100%;
}

.header-img .header-img-slider,
.header-img .header-img-inner {
    position: absolute;
    top: 9.5%;
    left: 150px;
    width: 261px;
    cursor: ew-resize;
}
.header-img-slider img {
    max-height: 68.5%;
}

.header-item {
    color: #fff;
    overflow: hidden;
}

.header-item h2 {
    display: inline-block;
    padding: 0px 20px;
    border-left: 5px solid #ff5252;
    font-size: 26px;
    line-height: 36px;
    font-weight: 700;
    text-transform: uppercase;
}
.header-item h2 span {
    color: #adadad;
}

.header-item p {
    padding: 0 20px;
    border-left: 5px solid #fff;
    color: #fff;
    font-size: 16px;
}

.owl-fadeInDown,
.owl-fadeInUp {
    visibility: hidden;
}
.owl-item.active .owl-fadeInDown {
    -webkit-animation: fadeInDown 1s linear 0s;
            animation: fadeInDown 1s linear 0s;
    visibility: visible;
}
.owl-item.active .owl-fadeInUp {
    -webkit-animation: fadeInUp 1s linear 0s;
            animation: fadeInUp 1s linear 0s;
    visibility: visible;
}
.owl-item.active .animate-2x {
    -webkit-animation-duration: 0.55s;
            animation-duration: 0.55s;
}

.header-item a.read-more,
.header-item a.buy-now {
    display: inline-block;
    margin: 15px 10px 0;
    padding: 10px 15px;
    color: #fff;
    background-color: transparent;
    border: 2px solid #fff;
    border-radius: 0;
    font-size: 18px;
    line-height: 22px;
    font-weight: 700;
}

#tubular-container, #tubular-shield {
    position: absolute !important;
    z-index: -2 !important;
    top: 0;
}

.header-items .owl-controls {
    position: absolute;
    bottom: 15px;
    right: 0;
    width: 100%;
    text-align: center;
}
.header-items > .owl-controls { /* Header Slider Verion */
    bottom: 30px;
}
.header-items .owl-pagination {
    display: inline-block;
    overflow: hidden;
}
.header-items .owl-page {
    width: 8px;
    height: 8px;
    float: left;
    margin: 1px 5px;
    border: 1px solid #fff;
    border-radius: 50%;
    -webkit-transition: .25s;
            transition: .25s;
    outline: 0;
}
.header-items .owl-page.active {
    width: 10px;
    height: 10px;
    margin-top: -0.5px;
    margin-left: 4.5px;
    background-color: #fff;
}

/*------------------------------------*\
    3. DEMO PREVIEW AREA
\*------------------------------------*/
#demoPreview {
    padding: 80px 0 74px;
    background-color: #fff;
}

.demo-preview--item {
    margin-top: 30px;
}
.demo-preview--item a {
    display: block;
    text-align: center;
    -webkit-transition: color .25s ease;
            transition: color .25s ease;
}
.demo-preview--item a:hover,
.demo-preview--item a:focus {
    color: #303030;
}
.demo-preview--item h3 {
    position: relative;
    display: inline-block;
    margin-bottom: 0;
    font-size: 24px;
    font-weight: 400;
    text-align: center;
	text-transform: uppercase;
    z-index: 0;
}
.demo-preview--item h3:before {
    content: " ";
    position: absolute;
    top: 13px;
    left: 0;
    width: 0;
    height: 1px;
    background-color: #303030;
    -webkit-transition: width .25s ease-in-out;
            transition: width .25s ease-in-out;
}
.demo-preview--item a:hover h3:before {
    width: 100%;
}

/*------------------------------------*\
    4. COPYRIGHT AREA
\*------------------------------------*/
#copyright {
    padding: 20px 0;
    color: #fff;
    background-color: #1b1b1b;
}
#copyright p {
    margin-bottom: 0;
    text-transform: capitalize;
    color: #fff;
}
#copyright p a {
    color: #fff;
    font-weight: 500;
}

/*------------------------------------*\
    5. HELPER CLASSES
\*------------------------------------*/
/* 5.1. RESET GUTTER */
.no-gutter {
    margin-left: 0;
    margin-right: 0;
}
.no-gutter > [class*='col-'] {
    padding-left: 0;
    padding-right: 0;
}

/* 5.2. BACKGROUND IMAGE */
.bg-img {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.bg-img:before {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(34, 34, 34, 0.8);
}

/* 5.3. BORDER NONE */
.bd-none {
    border: none !important;
}