/*============================================

    Template: Umbrella
	Css Name: Main Css
	Version: 1
	Design and Developed by:Umbrella Theme

==============================================
    
    CSS INDEX
    ===================
	
    1. GOOGLE FONT
	2. Header Top Menu Area
	3. Header Banner Area
	4. SECTION TITEL
	5. SECTION ABOUT
	6. SECTION PORTFOLIO
	7. SECTION SERVICE
	8. SECTION TEAM
	9. SECTION QUOTE
	10. SECTION BLOG
	11. SECTION CONTACT
	12. Black Edition Css
	13. ScrollUp
	
===========================================================*/

/* ============= 1. GOOGLE FONT ============= */

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800');
/* ============= 2. Header Top Menu Area ============= */

.header-area {
    left: 0;
    padding: 30px 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 999999;
}

.header-area.stick {
    animation: 300ms ease-in-out 0s normal none 1 running fadeInDown;
    background: #ffffff none repeat scroll 0 0;
    box-shadow: 0 -2px 6px 0 #000;
    position: fixed;
    top: 0;
}

.header-area.stick {
    padding: 25px 0;
}

.header-area.stick .navbar-brand {
    margin-top: -15px;
}

.stick .navbar-brand.logo>img {
    width: 90%;
}

.main-menu li {
    display: inline-block;
}

.stick .main-menu li a {
    color: #d8a641;
}

.main-menu li a {
    color: hsl(0, 0%, 100%);
    font-size: 14px;
    font-weight: 600;
    padding: 0 12px;
    position: relative;
    text-transform: uppercase;
    transition: all 0.4s ease 0s;
}

.main-menu li a:hover {
    color: #ddd;
}

.stick .main-menu li a:hover {
    color: #aaa;
}

.header-area .navbar-brand {
    float: left;
    height: 0;
    line-height: 0;
    margin-top: -15px;
    padding: 0;
    transform: scale(1.2);
}

.main-menu.float-right li:first-child {
    padding-left: 0;
}

.main-menu nav ul li a::before {
    background: #ffffff none repeat scroll 0 0;
    bottom: -5px;
    content: "";
    display: none;
    height: 1px;
    left: 0;
    position: absolute;
    transform: scale(0);
    transition: all 0.3s ease 0s;
    width: 100%;
}

.stick .main-menu nav ul li a::before {
    background: #ffffff none repeat scroll 0 0;
    bottom: -5px;
    content: "";
    display: block;
    height: 1px;
    left: 0;
    position: absolute;
    transform: scale(0);
    transition: all 0.3s ease 0s;
    width: 100%;
}

.stick .main-menu nav ul li a::before {
    background: #000000 none repeat scroll 0 0;
    bottom: -20px;
    height: 2px;
}

.main-menu nav ul li.active a::before,
.main-menu nav ul li a:hover::before {
    transform: scale(1);
}

/* ============= 3. Header Banner Area ============= */

.home-banner {
    background-image: url(img/slide/1.mp4);
}

.home-banner-two {
    background-image: url(img/slide/2.jpg);
}

.home-banner-three {
    background-image: url(img/slide/3.jpg);
}

.vertical-align {
    position: relative;
}

.parallax {
    background-attachment: fixed;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
}

.text-center {
    text-align: center;
}

.vertical-align .container-mid {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    z-index: 200;
}

.banner-title h1 {
    color: #fff;
    font-size: 60px;
    font-weight: 300;
    letter-spacing: 10px;
    line-height: 47px;
    margin-bottom: 37px;
}

.banner-title h3 {
    color: #fff;
    font-size: 20px;
    letter-spacing: 6px;
    margin-bottom: 0;
}

.banner-title {
    border: 1px solid #ddd;
    display: block;
    margin: 0 auto;
    overflow: hidden;
    padding: 50px;
    text-align: center;
    width: 85%;
}

/* ============= 4. SECTION TITEL ============= */

.section-titel {
    position: relative;
    display: block;
}

.section-titel>h3 {
    letter-spacing: 5px;
    margin: 0;
    text-transform: uppercase;
}

.section-titel::after {
    background: #595959 none repeat scroll 0 0;
    bottom: -20px;
    content: "";
    height: 2px;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    width: 110px;
}

.section-titel::before {
    background: #fff none repeat scroll 0 0;
    bottom: -38px;
    color: #595959;
    content: "U";
    font-size: 16px;
    font-weight: 700;
    height: 30px;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    width: 30px;
    z-index: 999;
}

.section-titel.titel-bg::before {
    background: #f6f6f6 none repeat scroll 0 0;
}

/* ============= 5. SECTION ABOUT ============= */

.about-content-left {
    background: #fff none repeat scroll 0 0;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    padding: 40px 40px 14px;
}

.about-content-area p {
    line-height: 30px;
    margin-bottom: 24px;
}

.about-content-left h4 {
    text-align: center;
    border-bottom: 1px solid #cccccc;
    color: #333;
    font-size: 21px;
    font-weight: 500;
    line-height: 28px;
    margin-bottom: 20px;
    padding-bottom: 18px;
}

.owl-theme .owl-nav [class*="owl-"] {
    background: #000 none repeat scroll 0 0;
    border: 1px solid #000;
    border-radius: 0;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 16px;
    height: 45px;
    line-height: 40px;
    margin: 0;
    padding: 0;
    text-align: center;
    transition: all 0.3s ease 0s;
    width: 30px;
}

.owl-theme .owl-nav {
    margin-top: 0;
    position: absolute;
    top: 45%;
    width: 100%;
}

.owl-prev {
    left: -40px;
    position: absolute;
    visibility: hidden;
    opacity: 0;
    transition: .4s;
}

.owl-next {
    position: absolute;
    right: -40px;
    visibility: hidden;
    opacity: 0;
    transition: .4s;
}

.about-content-right:hover .owl-prev {
    left: 0;
    visibility: visible;
    opacity: 1;
}

.about-content-right:hover .owl-next {
    right: 0;
    visibility: visible;
    opacity: 1;
}

.owl-theme .owl-nav [class*="owl-"]:hover {
    background: transparent;
    color: #000;
    text-decoration: none;
    border: 1px solid #000;
}

/* ============= 6. SECTION PORTFOLIO ============= */

.portfolio img {
    width: 100%;
    transition: 4s;
}

.portfolio:hover img {
    transform: scale(1.1);
}

.portfolio a {
    display: block;
    margin-bottom: 10px;
    overflow: hidden;
    position: relative;
}

.portfolio a:hover::after,
.portfolio:hover::before {
    opacity: 1;
}

.portfolio a::after {
    background: rgba(0, 0, 0, 0.8) none repeat scroll 0 0;
    content: "";
    left: 10px;
    position: absolute;
    top: 10px;
    opacity: 0;
    transition: .3s;
    right: 10px;
    bottom: 10px;
}

.portfolio-area .col-md-4.col-sm-6.col-xs-12 {
    padding-left: 5px;
    padding-right: 5px;
}

.portfolio-menu button {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: 0 none;
    font-family: open sans;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    margin: 0 15px;
    padding: 0;
    position: relative;
    text-transform: uppercase;
}

.portfolio-menu button::before {
    background: #464646 none repeat scroll 0 0;
    bottom: -5px;
    content: "";
    height: 1px;
    position: absolute;
    transform: scaleX(0);
    transition: all 0.3s ease 0s;
    width: 100%;
}

.portfolio-menu button::after {
    background: #464646 none repeat scroll 0 0;
    content: "";
    height: 1px;
    position: absolute;
    right: 0;
    top: -4px;
    transform: scaleX(0);
    transition: all 0.3s ease 0s;
    width: 100%;
}

.portfolio-menu button:hover:before,
.portfolio-menu button.active:before {
    transform: scaleX(1);
}

.portfolio-menu button:hover:after,
.portfolio-menu button.active:after {
    transform: scaleX(1);
}

.portfolio-title {
    left: 0;
    position: absolute;
    right: 0;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    opacity: 0;
    transition: all 0.3s ease-in-out 0s;
}

.portfolio-title h3 {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 2px;
    transform: translateY(-10px);
    transition: all 0.4s ease-in-out 0s;
    text-transform: uppercase;
}

.portfolio-title span {
    color: #ddd;
    display: inline-block;
    font-size: 14px;
    letter-spacing: 2px;
    line-height: 16px;
    transform: translateY(10px);
    transition: all 0.4s ease-in-out 0s;
}

.portfolio:hover .portfolio-title {
    opacity: 1
}

.portfolio:hover .portfolio-title h3,
.portfolio:hover .portfolio-title span {
    transform: translateY(0px);
}

.view-more {}

.view-more a {
    border: 1px solid #ddd;
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 25px;
    text-transform: uppercase;
}

/* ============= 7. SECTION SERVICE ============= */

.service-header h3 {
    font-size: 17px;
    font-weight: 400;
}

.single-service>p {
    font-size: 13px;
    margin: 0;
}

.col-md-4.col-sm-6:nth-child(-n+3) .single-service {
    margin-bottom: 30px;
}

.single-service {
    padding: 0 50px;
    text-align: center;
    background: #fff none repeat scroll 0 0;
    border: 1px solid transparent;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    padding: 50px;
    transition: all 0.3s ease 0s;
}

.service-header i {
    color: #555;
    display: inline-block;
    font-size: 42px;
    font-weight: normal;
    transition: .3s;
}

.single-service:hover .service-header i {
    color: #000;
}

.single-service:hover {
    box-shadow: none;
    border: 1px solid #e5e5e5;
}

/* ============= 8. SECTION TEAM ============= */

.team {
    height: 100%;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    text-align: center;
    width: 100%;
}

.team .mask {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    text-align: center;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.team h2 {
    color: #fff;
    font-size: 22px;
    padding-top: 48%;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.team p {
    color: #ddd;
    font-size: 14px;
    letter-spacing: 2px;
    line-height: 2;
    position: relative;
    text-align: center;
}

.team a.info i {
    background: #fff none repeat scroll 0 0;
    color: #000;
    display: inline-block;
    font-size: 18px;
    height: 30px;
    line-height: 30px;
    margin: 0 5px 0 0;
    padding: 0;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 30px;
    transition: .3s;
}

.team a.info i:hover {
    background: #333 none repeat scroll 0 0;
    color: #fff;
}

.team img {
    width: 200%;
    -webkit-transition: all 2s ease-in-out;
    -moz-transition: all 2s ease-in-out;
    -o-transition: all 2s ease-in-out;
    transition: all 2s ease-in-out;
}

.team .mask {
    background-color: #000;
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.team h2 {
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    background: transparent;
    margin: 20px 40px 0px 40px;
}

.team p {
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
}

.team a.info {
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
}

.team:hover .mask {
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 0.8;
}

.team:hover img {
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -o-transform: scale(1.5);
    -ms-transform: scale(1.5);
    transform: scale(1.5);
}

.team:hover h2 {
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-animation: fadeInDown 1s;
    animation: fadeInDown 1s;
}

.team:hover p {
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-animation: fadeInUp 1.5s;
    animation: fadeInUp 1.5s;
}

.team:hover a.info {
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-animation: fadeIn 2s;
    animation: fadeIn 2s;
}

/* ============= 9. SECTION QUOTE ============= */

.quote-text h2 {
    color: #fff;
    font-size: 30px;
    font-weight: 300;
    line-height: 48px;
    text-align: center;
    letter-spacing: 2px;
}

.quote-text span {
    color: #fff;
    display: inline-block;
    font-weight: 600;
    letter-spacing: 2px;
    margin-top: 10px;
    text-transform: uppercase;
}

.quote-text span::before {
    content: "- ";
}

.quote-text {
    margin: 0 auto;
    padding: 0 115px;
}

.quote-area {
    display: block;
    overflow: hidden;
    position: relative;
}

.quote-area::after {
    background: rgba(0, 0, 0, 0.7) none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -99;
}

/* ============= 10. SECTION BLOG ============= */

.blog-top-desc {}

.blog-top-desc h4 {
    line-height: 20px;
}

.blog-top-desc strong {
    text-transform: uppercase;
}

.blog-date {
    width: 75px;
    height: 70px;
    display: inline-block;
    float: left;
    background: #2A2A2A;
    color: #fff;
    font-weight: 600;
    text-align: center;
    margin-right: 20px;
    line-height: 20px;
    padding-top: 10px;
    margin-bottom: 15px;
}

.blog-btm-desc {
    margin: 30px 0px 0px;
}

.blog-btm-desc p {
    margin-bottom: 26px;
}

.blog-btm-desc .readmore {
    text-transform: uppercase;
}

.blog-btm-desc .readmore i {
    margin-left: 0px;
    transition: .3s;
}

.blog-btm-desc .readmore:hover i {
    margin-left: 5px;
}

/* ============= 11. SECTION CONTACT ============= */

.contact-content-area {
    display: block;
    overflow: hidden;
    position: relative;
}

.contact-content-area::before {
    background-color: rgba(0, 0, 0, 0.7);
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.contact-left h3 {
    color: #fff;
    font-size: 18px;
    letter-spacing: 2px;
    line-height: 24px;
    margin-bottom: 30px;
}

.contact-info li {
    color: #fff;
    display: block;
    letter-spacing: 2px;
    margin-bottom: 25px;
}

.contact-info li a {
    color: #fff;
}

.contact-info li a:hover,
.footer-copyright>p a:hover {
    color: #ddd;
}

.contact-info i {
    background: #fff none repeat scroll 0 0;
    color: #323232;
    height: 30px;
    line-height: 30px;
    margin-right: 15px;
    text-align: center;
    width: 30px;
}

.contact-content-area .section-titel>h3 {
    color: #fff;
}

.contact-content-area .section-titel::before {
    display: none;
}

.contact-content-area .section-titel::after {
    background: #fff none repeat scroll 0 0;
}

.form-single input,
.form-textarea textarea {
    background: transparent none repeat scroll 0 0;
    border: 1px solid #fff;
    color: #fff;
    margin-bottom: 30px;
}

.form-button button {
    background: #000 none repeat scroll 0 0;
    border: medium none;
    box-shadow: none;
    color: #fff;
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    overflow: hidden;
    padding: 12px 25px;
    text-transform: uppercase;
}

.form-button button:hover {
    background: #d8a641 none repeat scroll 0 0;
}

.footer-copyright>p {
    font-size: 13px;
    letter-spacing: 1px;
    margin: 0;
}

.footer-copyright>p a {
    color: #fff;
}

#map {
    width: 100%;
    height: 350px;
}

/* ============= 12. Black Edition Css ============= */

.black-edition {
    background: #000 none repeat scroll 0 0;
}

.black-edition .section-titel::before {
    background: #000 none repeat scroll 0 0;
    color: #fff;
}

.black-edition .section-titel::after {
    background: #fff none repeat scroll 0 0;
}

.black-edition .portfolio-menu button::before,
.black-edition .portfolio-menu button::after {
    background: #ffff none repeat scroll 0 0;
}

.black-edition .portfolio-menu button,
.black-edition .service-header h3,
.black-edition .single-service>p,
.black-edition .single-service:hover .service-header i,
.black-edition .service-header i,
.black-edition .section-titel>h3,
.black-edition .blog-top-desc h4,
.black-edition .blog-top-desc strong,
.black-edition .blog-btm-desc p,
.black-edition .blog-btm-desc .readmore,
.black-edition .about-content-left h4 {
    color: #fff;
}

.black-edition .single-service,
.black-edition .about-content-left {
    background: transparent none repeat scroll 0 0;
    border: 1px solid #fff;
}

.black-edition .about-content-area p {
    color: #f8f8f8
}

/* ============= 13. ScrollUp ============= */

#scrollUp {
    background: #000 none repeat scroll 0 0;
    border-radius: 0px;
    bottom: 15px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    color: #fff;
    font-size: 28px;
    height: 40px;
    line-height: 35px;
    position: fixed;
    right: 15px;
    text-align: center;
    transition: all 0.3s ease 0s;
    width: 40px;
    z-index: 200;
}

#scrollUp:hover {
    background: #555;
}