/*
----------------------------------------------------------------------------------------
   1. BASE CSS
    2. TOP AREA
        2.1 MAINMENU AREA
        2.2 SLIDER AREA
    3. ABOUT AREA
        3.1 ABOUT BOTTOM AREA
    4. SERVICE AREA
    5. PORTFOLIO AREA
    6. PROCESS AREA
    7. TEAM AREA
    8. BLOG AREA
    9. CLIENT AREA
    10. CONTACT AREA
    11. FOOTER AREA
    12. SCROLL TO TOP
----------------------------------------------------------------------------------------*/


/*--------------------
   1. BASE CSS
----------------------*/

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600|Raleway:400,500,600,700');
.alignleft {
    float: left;
    margin-right: 15px;
}

.alignright {
    float: right;
    margin-left: 15px;
}

.aligncenter {
    display: block;
    margin: 0 auto 15px;
}

a {
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

a:focus,
a:hover {
    outline: 0 solid;
    text-decoration: none;
}

button:focus {
    outline: 0;
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 15px;
    font-weight: 600;
    font-family: 'Raleway', sans-serif;
}

html,
body {
    height: 100%
}

body {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    line-height: 1.5em;
    font-weight: 400;
    color: #464646;
}

a:hover {
    text-decoration: none
}

.navbar-toggle {
    border: 2px solid #ff6000;
    border-radius: 0;
}

.navbar-toggle .icon-bar {
    background: #ff6000 none repeat scroll 0 0;
}


/* Remove Chrome Input Field's Unwanted Yellow Background Color */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
}

.area-title {
    margin-bottom: 50px;
}

.area-title h2 {
    font-size: 36px;
    letter-spacing: 1px;
    line-height: 1;
    position: relative;
    text-transform: uppercase;
}

.area-title h2 span {
    color: #ff6000;
    font-weight: 700;
}

.area-title-border {
    background: #464646 none repeat scroll 0 0;
    height: 1px;
    margin: 0 auto 40px;
    position: relative;
    width: 190px;
}

.area-title-border::before,
.area-title-border::after {
    background: #464646 none repeat scroll 0 0;
    bottom: -7px;
    content: "";
    height: 100%;
    left: 50%;
    margin-left: -30%;
    position: absolute;
    width: 60%;
}

.area-title-border::after {
    bottom: -14px;
    margin-left: -20%;
    width: 40%;
}

.area-title p {
    margin-bottom: 0;
}

.section-padding {
    padding: 100px 0;
}

.padding-top {
    padding-top: 100px;
}

.padding-bottom {
    padding-bottom: 100px;
}

.no-margin {
    margin: 0;
}

.no-padding {
    padding: 0;
}

.green-bg {
    background: #ff6000;
    color: #fff;
}

.black-bg {
    background: #363636;
    color: #fff;
}

.gray-bg {
    background: #EBEBEB;
}


/*--------------------------
    2. TOP AREA
---------------------------*/

.top-area {
    height: 100%;
    position: relative;
    width: 100%;
}

.top-area-bg {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}


/*.top-area-bg::before {
    background: rgba(0, 0, 0, 0) url("img/slider/slide_1.jpg") no-repeat scroll center center / cover;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}*/


/*---------------------------------
    2.1 MAINMENU AREA
-----------------------------------*/

.header-top-area {
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 999;
}

.mainmenu-area {
    background: rgba(255, 255, 255, 1) none repeat scroll 0 0;
    position: relative;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    z-index: 9999 !important;
}

.navbar-header {
    margin-top: 15px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.navbar {
    border-bottom: 0 none;
    border-top: 0 none;
    margin-bottom: 0;
}

.navbar-brand > img {
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.is-sticky .navbar-brand > img {
    max-width: 80%;
}

ul#nav {
    float: right;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

ul#nav li a {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    color: #464646;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 30px 15px;
    text-transform: uppercase;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    position: relative;
}

ul#nav li a::after {
    background: #ff6000 none repeat scroll 0 0;
    bottom: 0;
    content: "";
    height: 2px;
    left: 0;
    position: absolute;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 0;
}

ul#nav li.active a::after,
ul#nav li:hover a::after {
    width: 100%;
}

ul#nav li a:hover,
ul#nav li.active a {
    color: #fff;
    background: #34495e
}

.is-sticky ul#nav li a {
    padding: 20px 15px;
}

.is-sticky .navbar-header {
    margin-top: -3px;
}

.is-sticky .mainmenu-area {
    background: #ebebeb;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
    z-index: 99999;
}


/*-----------------------------------
    2.2 SLIDER AREA
-------------------------------------*/

.slider-area {
    height: 100%;
    width: 100%;
    position: relative;
    font-weight: 900;
    color: #fff;
}

.slider-area h1 {
    font-size: 72px;
    font-weight: 700;
    text-transform: uppercase;
    color: #ff6000;
}

.slider-area h2 {
    font-size: 36px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 40px;
}

.slider-area p {
    margin-bottom: 40px;
}

.slider-area a {
    border: 1px solid;
    border-radius: 5px;
    color: #fff;
    display: inline-block;
    font-size: 13px;
    letter-spacing: 1px;
    margin-left: 5px;
    margin-right: 5px;
    padding: 10px;
    text-transform: uppercase;
    width: 200px;
}

.slider-area a:hover {
    color: #fff;
    background: #ff6000 none repeat scroll 0 0;
    border-color: #ff6000;
}

.home-button a {
    border: 0 none;
    bottom: 0;
    font-size: 35px;
    height: 50px;
    left: 50%;
    margin-left: -25px;
    padding: 5px 0 0;
    position: absolute;
    text-align: center;
    width: 50px;
    z-index: 9;
    color: #fff;
}

.home-button a:hover {
    background: inherit;
}

.home-button a i {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

.pogoSlider {
    height: 100%;
    overflow: hidden;
    position: relative;
    text-align: center;
    width: 100%;
    padding-bottom: 0;
}

.pogoSlider-slide {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-size: cover;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    opacity: 0;
    overflow: hidden;
    -webkit-perspective: 1300px;
    perspective: 1300px;
    position: absolute;
    width: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding-top: 100px;
}

.pogoSlider-slide:after {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    content: "";
    background: #000;
    opacity: 0.6;
    z-index: -1;
}

.pogoSlider-nav {
    display: none;
}


/*-----------------------------
    3. ABOUT AREA
-------------------------------*/

.about-area .area-title {
    margin-bottom: 50px;
    position: relative;
}

.about-area .area-title::after {
    background: #ff6000;
    bottom: -10px;
    content: "";
    height: 2px;
    left: 0;
    position: absolute;
    width: 150px;
}

.about-image {
    box-shadow: 0 0 0 20px #ebebeb inset;
    margin-left: 60px;
    margin-top: 0px;
    position: relative;
}

.about-image img {
    -webkit-transform: translateY(-60px) translateX(-60px);
    transform: translateY(-60px) translateX(-60px);
   /* width: 100%;*/
    z-index: 1;
}

a.readmore {
    background: #ff6000 none repeat scroll 0 0;
    color: #fff;
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 2px;
    margin-top: 40px;
    padding: 13px;
    text-align: center;
    text-transform: capitalize;
    width: 200px;
}

a.readmore:hover {
    background: #464646;
    color: #fff;
}


/*-----------------------------
    3.1 ABOUT BOTTOM AREA
------------------------------*/

.about-bottom-content {
    border-right: 2px solid;
    padding-right: 20px;
    position: relative;
    min-height: 180px;
    overflow: hidden;
}

.about-bottom-content h4 {
    letter-spacing: 1px;
    line-height: 1.5em;
    margin-bottom: 30px;
    text-transform: uppercase;
}

.about-bottom-image {
    min-height: 180px;
    position: relative;
}

.about-bottom-image img {
    bottom: 0;
    left: 0;
    margin-bottom: -110px;
    max-width: 100%;
    position: absolute;
}


/*-----------------------------
    4. SERVICE AREA
------------------------------*/

.row.no-margin.service-menu {
    margin-bottom: 60px;
}

.single-service-tab {
    border-bottom: 1px solid;
    position: relative;
    text-align: center;
}

.single-service-tab::after {
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-top: 20px solid;
    content: "";
    height: 0;
    left: 50%;
    margin-left: -25px;
    position: absolute;
    width: 0;
    opacity: 0;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.single-service-tab a {
    color: #fff;
    display: block;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.single-service-tab a p {
    margin-bottom: 20px;
}

.single-service-tab .service-icon {
    background: #fff none repeat scroll 0 0;
    border: 1px solid;
    border-radius: 50%;
    color: #ff6000;
    display: block;
    font-size: 60px;
    height: 100px;
    margin: 0 auto 20px;
    padding-top: 20px;
    width: 100px;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.single-service-tab.active a {
    color: #ff6000;
}

.single-service-tab.active a .service-icon {
    background: #ff6000 none repeat scroll 0 0;
    border-color: #ff6000;
    color: #fff;
}

.single-service-tab.active {
    border-color: #ff6000;
}

.single-service-tab.active::after {
    border-top-color: #ff6000;
    opacity: 1;
}

.image-two {
    position: absolute;
    right: 0;
    bottom: 0;
}

.custom_animateed {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.animate_service_content {
    -webkit-animation: animate_service_content;
    animation: animate_service_content;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.animate_service_img {
    -webkit-animation: animate_service_img;
    animation: animate_service_img;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes animate_service_content {
    0% {
        -webkit-transform: translateY(50px);
        transform: translateY(50px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes animate_service_content {
    0% {
        -webkit-transform: translateY(50px);
        transform: translateY(50px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@-webkit-keyframes animate_service_img {
    0% {
        -webkit-transform: translateX(50px);
        transform: translateX(50px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@keyframes animate_service_img {
    0% {
        -webkit-transform: translateX(50px);
        transform: translateX(50px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

.service-area a.readmore:hover {
    background: #fff;
    color: #ff6000;
}


/*-----------------------------
    5. PORTFOLIO AREA
------------------------------*/

.portfolio-menu {
    margin-bottom: 40px;
}

.portfolio-menu ul {
    list-style: outside none none;
    margin: 0;
    padding: 0;
    text-align: center;
}

.portfolio-menu ul li {
    cursor: pointer;
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1px;
    padding: 5px 10px;
    text-transform: uppercase;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.portfolio-menu ul li:hover,
.portfolio-menu ul li.active {
    color: #ff6000;
    text-decoration: line-through;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.single-portfolio {
    margin-bottom: 30px;
    overflow: hidden;
    position: relative;
}

.portfolio-img img {
    width: 100%;
}

.portfolio-details {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.8) none repeat scroll 0 0;
    color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    left: 0;
    opacity: 0;
    padding: 40px;
    position: absolute;
    top: 0;
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
    width: 100%;
    text-align: center;
}

.portfolio-details h4 {
    letter-spacing: 2px;
    margin-bottom: 30px;
    text-transform: uppercase;
}

a.view-portfolio {
    background: #fff none repeat scroll 0 0;
    border-radius: 50%;
    color: #ff6000;
    font-size: 20px;
    height: 50px;
    margin-top: 15px;
    padding-top: 13px;
    text-align: center;
    width: 50px;
}

a.view-portfolio:hover {
    background: #ff6000 none repeat scroll 0 0;
    color: #fff;
}

.single-portfolio:hover .portfolio-details {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}


/*-----------------------------------
    6. PROCESS AREA
------------------------------------*/

.process-area {
    position: relative;
    color: #fff;
}

.area-bg {
    background: rgba(0, 0, 0, 0) url("img/process_area_bg.jpg") no-repeat scroll center center / cover;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.area-bg::after {
    background: rgba(0, 0, 0, 0.8) none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.single-process {
    font-size: 24px;
    letter-spacing: 2px;
    text-align: center;
}

.process-icon {
    font-size: 60px;
    height: 125px;
    margin-bottom: 20px;
    margin-left: 15px;
    margin-top: 15px;
    padding-top: 30px;
    position: relative;
    width: 125px;
    z-index: 1;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.process-icon::before {
    border: 1px solid;
    content: "";
    height: 100%;
    left: -15px;
    position: absolute;
    top: -15px;
    width: 100%;
    z-index: -1;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.process-icon::after {
    background: #ff6000 none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.single-process:hover .process-icon::after {
    background: #fff none repeat scroll 0 0;
}

.single-process:hover .process-icon {
    color: #ff6000;
}


/*------------------------------
    7. TEAM AREA
-------------------------------*/

.member-name-and-image {
    position: relative;
}

.member-img img {
    width: 100%;
}

.member-img {
    overflow: hidden;
    position: relative;
}

.member-details {
    background: rgba(32, 200, 158, 0.8) none repeat scroll 0 0;
    bottom: -100px;
    color: #fff;
    left: 0;
    opacity: 0;
    padding: 30px;
    position: absolute;
    text-align: center;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 100%;
}

.single-team:hover .member-details {
    bottom: 0;
    opacity: 1;
}

.member-details h4 {
    letter-spacing: 2px;
    text-transform: uppercase;
}

.member-social-bookmark {
    margin-top: 20px;
}

.member-social-bookmark ul {
    list-style: outside none none;
    margin: 0;
    padding: 0;
    text-align: center;
}

.member-social-bookmark ul li {
    display: inline;
}

.member-social-bookmark ul li a {
    border: 1px solid;
    border-radius: 50%;
    color: #fff;
    display: inline-block;
    font-size: 15px;
    height: 40px;
    margin: 0 5px;
    padding-top: 7px;
    text-align: center;
    width: 40px;
}

.member-social-bookmark ul li a:hover {
    background: #fff none repeat scroll 0 0;
    border-color: #fff;
    color: #ff6000;
}

.single-team:hover .member-name-and-image::after {
    opacity: 0.5;
}

.member-name-and-title {
    letter-spacing: 2px;
    padding: 20px;
    text-align: center;
    text-transform: uppercase;
}


/*------------------------------
    8. BLOG AREA
--------------------------------*/

.post-thumbnail {
    margin-bottom: 30px;
    overflow: hidden;
    position: relative;
}

.post-thumbnail img {
    width: 100%;
}

.meta-date {
    position: absolute;
    width: calc(100% - 31%);
    height: 50px;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    text-align: center;
    font-size: 22px;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding-top: 13px;
    background: rgba(32, 200, 158, 0.8) none repeat scroll 0 0;
    left: -50px;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.meta-date a {
    color: #fff;
}

.post-title-and-meta {
    margin-bottom: 30px;
}

.post-title-and-meta h4 {
    margin-bottom: 10px;
    text-transform: uppercase;
}

.post-meta a {
    font-weight: 600;
    margin-right: 10px;
}

.post-title-and-meta a {
    color: #464646;
}

.post-title-and-meta a:hover {
    color: #ff6000;
}

.post-meta a i {
    margin-right: 5px;
}

.single-blog-post:hover .meta-date {
    left: 0;
}


/*-----------------------------------
    9. CLIENT AREA
------------------------------------*/

.client-feedback-content {
    position: relative;
    text-align: center;
}

.quate-icon {
    background: #ff6000 none repeat scroll 0 0;
    border-radius: 10px 10px 0 0;
    color: #fff;
    font-size: 40px;
    height: 90px;
    margin: 0 auto 30px;
    padding-top: 30px;
    text-align: center;
    width: 80px;
}

.single-client {
    display: inline-block;
    float: left;
    padding: 5px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 50%;
}

.single-client img {
    width: 100%;
}

.single-client:hover,
.single-client.active {
    box-shadow: 0 0 10px #ddd;
}


/*------------------------------
    10. CONTACT AREA
-------------------------------*/

.contact-area {
    position: relative;
    color: #fff;
}

.contact-area .area-title-border:before,
.service-area .area-title-border:before,
.contact-area .area-title-border:after,
.service-area .area-title-border:after,
.contact-area .area-title-border,
.service-area .area-title-border {
    background: #fff;
}

.contact-address-details {
    background: #ff6000 none repeat scroll 0 0;
    text-align: center;
}

.single-contact {
    padding: 20px;
    border-bottom: 2px solid;
}

.single-contact:last-child {
    border-bottom: 0 none;
}

.contact-address-details a {
    color: #fff;
}

.contact-icon {
    border: 1px solid #fff;
    border-radius: 50%;
    font-size: 30px;
    height: 60px;
    margin: 0 auto 20px;
    padding-top: 15px;
    width: 60px;
    background: #fff;
    color: #ff6000;
}

.form-control {
    background: transparent none repeat scroll 0 0;
    border-radius: 0;
    box-shadow: 0 0 0 #ff6000;
    margin-bottom: 20px;
    max-height: 150px;
    min-height: 50px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    color: #fff;
}

.form-control:focus {
    border-color: #ff6000;
    box-shadow: 0 0 3px #ff6000;
}

.contact-form textarea {
    height: 150px;
}

.contact-form button {
    background: #ff6000 none repeat scroll 0 0;
    border: 0 none;
    color: #ffffff;
    float: right;
    font-weight: 700;
    letter-spacing: 4px;
    padding: 10px 30px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 100%;
    border: 1px solid transparent;
}

.contact-form button:hover {
    background: #fff none repeat scroll 0 0;
    color: #ff6000;
}

.contact-area .alert-success {
    background: #ff6000;
    border-color: #ff6000;
    color: #fff;
}


/*------------------------------
    11. FOOTER AREA
-------------------------------*/

.footer-area {
    background: #272727 none repeat scroll 0 0;
    border-top: 1px solid #ff6000;
    color: #fff;
    padding: 30px 0;
}

.footer-copyright p {
    margin-bottom: 0;
}

.footer-copyright a.footer-logo {
    border-bottom: 2px solid;
    display: block;
    margin-bottom: 5px;
    margin-right: 10px;
    max-width: 300px;
    padding-bottom: 10px;
}

.footer-copyright a {
    color: #ff6000;
}

.footer-copyright ul {
    list-style: outside none none;
    margin: 0;
    padding: 0;
    text-align: right;
}

.footer-copyright ul li {
    display: inline;
}

.footer-copyright ul li a {
    border-radius: 50%;
    color: #ff6000;
    display: inline-block;
    font-size: 16px;
    height: 35px;
    margin-right: 4px;
    padding-top: 6px;
    text-align: center;
    width: 35px;
}

.footer-copyright ul li a:hover {
    background: #ff6000 none repeat scroll 0 0;
    color: #fff;
}


/*------------------------------
    12. SCROLL TO TOP
-------------------------------*/

a.scrolltotop {
    background: #ff6000 none repeat scroll 0 0;
    bottom: 20px;
    color: #fff;
    display: none;
    font-size: 20px;
    height: 50px;
    padding-top: 10px;
    position: fixed;
    right: 20px;
    text-align: center;
    width: 50px;
    z-index: 99;
    box-shadow: 0 0 0 7px transparent;
}

a.scrolltotop:hover {
    box-shadow: 0 0 0 0 #272727;
    background: #272727;
}

.about-details p{text-align:justify; line-height:24px;}