--------------------------------------------------------------------------------------
Theme Name: HORIZON
Theme URI: http://devitfamily.com
Author URI: http://devitfamily.com
Description: 100% Responsive, Highly Customizable, SEO Friendly Business Theme using Twitter Bootstrap Latest, Search Engine Friendly.
Author: BDEXPERT
Version: 1.0
----------------------------------------------------------------------------------------
    1 BASE CSS
    2. TOP AREA
        2.1 SLIDER AREA
        2.2 MAINMENU AREA
    3. SERVICE AREA
    4. FUN FACTS AREA
    5. FAQS AREA
    6. TESTMONIAL AREA
    7. BLOG AREA
    8. CLIENT AREA
    9. FOOTER AREA
        9.1 TWITTER FEED AREA
        9.2 FOOTRE BUTTON AREA
    10. SCROLL TO TOP
    11. ABOUT US PAGE
        11.1 GET IN TOUCH AREA
        11.2 ABOUT DETAILS
        11.3 VIDEO AREA
        11.4 SKILL AREA
        11.5 TEAM AREA
    12.SERVICE PAGE
    13.BLGO PAGE GRID
    14.BLOG PAGE LIST
        14.1 SIDEBAR
    15. SINGLE BLOG
    16. TEAM PAGE
    17. PORTFOLIO PAGE
    18. CONTACT US PAGE
----------------------------------------------------------------------------------------*/


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

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

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

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

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

img {
    max-width: 75%;
    height: auto;
}
div.testimonials{
    margin-left: 200px;
    margin-bottom: 40px
}

.fix {
    overflow: hidden
}

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

html,
body {
    height: 100%
}

body {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    line-height: 26px;
    font-size: 14px;
}

a {
    -webkit-transition: 0.3s;
    transition: 0.3s;
    color: #156889;
}

a:hover {
    text-decoration: none
}


/* 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;
}

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

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

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

.image-bg {
    color: #fff;
    position: relative;
}

.image-bg .area-title h2 {
    color: #fff;
}

.gray-bg {
    background: #F2F2F2;
}

.no-padding {
    padding: 0;
}

.no-margin {
    margin: 0;
}


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

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

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

.top-area-bg::before,
.fact-area-bg::before,
.testmonial-area-bg::before,
.footer-bottom-area-bg::before,
.video-area-bg:before {
    background: rgba(0, 0, 0, 0.8) url("img/pattarn.png") repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.8;
    position: absolute;
    top: 0;
    width: 100%;
}

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

}

.area-title h2 {
    color: #156889;
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 0;
    text-transform: uppercase;
}


/*---------------------------
    2.1 SLIDER AREA
----------------------------*/

.slider-area {
    height: 100%;
}

.home-slider {
    height: 100%;
    width: 100%;
}

.carousel-inner {
    height: 100%;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.carousel-fade .carousel-inner .item {
    -webkit-transition-property: opacity;
    transition-property: opacity;
}

.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
}

.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
}

.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
    left: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.slider-bg-one {
    background: url(img/slider/slide-1.jpg) no-repeat scroll center center;
    background-size: cover;
}

.slider-bg-two {
    background: url(img/slider/slide-2.jpg) no-repeat scroll center center;
    background-size: cover;
}

.slider-bg-three {
    background: url(img/slider/slide-3.jpg) no-repeat scroll center center;
    background-size: cover;
}

.slider-bg-four {
    background: url(img/slider/slide-4.jpg) no-repeat scroll center center;
    background-size: cover;
}

.slider-bg-five {
    background: url(img/slider/slide-5.jpg) no-repeat scroll center center;
    background-size: cover;
}

.carousel-inner > .item {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    height: 100%;
    -webkit-perspective: 1000px;
    perspective: 1000px;
    -webkit-transition: -webkit-transform 0.6s ease-in-out 0s;
    transition: -webkit-transform 0.6s ease-in-out 0s;
    transition: transform 0.6s ease-in-out 0s;
    transition: transform 0.6s ease-in-out 0s, -webkit-transform 0.6s ease-in-out 0s;
    transition: transform 0.6s ease-in-out 0s, -webkit-transform 0.6s ease-in-out 0s;
}

.home-slider.carousel .item .slider-item-bg {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.home-slider.carousel .item .slider-item-bg::before {
    background: #000 rgba(0, 0, 0, 0) url("img/pattarn.png") repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    opacity: 2.5;
    position: absolute;
    top: 0;
    width: 100%;
    opacity: .8;

}

.home-slider.carousel .item .slider-item-bg::after {
    background: #000;
    content: "";
    height: 100%;
    left: 0;
    opacity: .8;
    position: absolute;
    top: 0;
    width: 100%;
}

.slider-text {
    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;
    font-size: 20px;
    height: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
    text-transform:;
    width: 100%;
}

.carousel-indicators li {
    background: #019cdb none repeat scroll 0 0;
    border-radius: 50%;
    height: 15px;
    width: 15px;
    border: 0;
    margin: 0 5px;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    text-align: center;
}

.carousel-indicators .active {
    background-color: #174b5f;
    box-shadow: 0 0 0 3px #000, 0 0 0 6px #019cdb;
    height: 15px;
    margin: 0;
    width: 15px;
}

.slider-text {
    color: #fff;
    font-size: 20px;
    position: relative;
    text-align: center;
    text-transform: ;
    z-index: 9;
}

.slider-text .animation-one {
    -webkit-animation-delay: .5s;
    animation-delay: .5s;
}

.slider-text .animation-two {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}

.slider-text .animation-three {
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s;
}

.slider-text h1 {
    font-size: 48px;
    line-height: 1;
    margin-bottom: 40px;
}

.slider-text h4 {
    font-size: 18px;
    font-weight: 400;
    /*padding:10px 50px;*/
    font-size: 22px;
    line-height: 40px;
    text-align: center;



}

.slider-text ul {
    list-style: outside none none;
    margin: 0;
    margin-top: 40px;
    padding: 0;
    text-align: center;
}

.slider-text ul li {
    display: inline;
}

.slider-text ul li a {
    border: 1px solid;
    color: #8dc63f;
    display: inline-block;
    font-size: 15px;
    letter-spacing: 2px;
    margin: 0 10px;
    padding: 15px 25px;
}

.slider-text ul li a:hover,
.slider-text ul li.active a {
    background: #174b5f none repeat scroll 0 0;
    border: 1px solid #019cdb;
    color: #fff;
}

.slider-text ul li.active a:hover {
    background: transparent;
    color: #019cdb;
}


/*---------------------------
    2.2 MAINMENU AREA
----------------------------*/

.mainmenu-area {
    position: fixed;
    width: 100%;
    z-index: 999;
}

.mainmenu-area.fixed .mainmenu-area-bg {
    opacity: 1;
}

.mainmenu-area-bg {
    background: rgba(255, 255, 255, 1) none repeat scroll 0 0;
    height: 100%;
    left: 0;
    opacity: 1;
    position: absolute;
    top: 0;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 100%;
}

.mainmenu-area:hover {
    overflow: inherit;
}

.navbar-header {
    /*margin-top: 20px;*/
    position: relative;
    z-index: 999;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.mainmenu ul#nav {
    float: none;
    text-align: right;
}

.mainmenu ul#nav li {
    display: inline-block;
    float: none;
}

.mainmenu ul#nav li > a {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    color: #174b5f;
    display: inline-block;
    font-family: raleway;
    font-weight: 600;
    letter-spacing: 1px;
    padding: 40px 15px;
    position: relative;
    text-transform: uppercase;
}

.mainmenu ul#nav li > a:hover,
.mainmenu ul#nav li.active > a,
.mainmenu ul#nav li:hover > a {
    color: #019cdb;
}

.mainmenu ul#nav li.active a::after {
    background: #019cdb none repeat scroll 0 0;
    bottom: -3px;
    content: "";
    height: 3px;
    left: 0;
    position: absolute;
    width: 100%;
}

.mainmenu ul#nav li ul {
    background: #222222 none repeat scroll 0 0;
    border-top: 3px solid #8dc63f;
    left: 0;
    opacity: 0;
    padding: 0;
    position: absolute;
    text-align: left;
    top: 100px;
    -webkit-transform: scaleZ(0);
    transform: scaleZ(0);
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
    width: 200px;
    z-index: -1;
}

.mainmenu ul#nav li:hover ul {
    opacity: 1;
    top: 60px;
    -webkit-transform: scaleZ(1);
    transform: scaleZ(1);
    z-index: 99;
}

.mainmenu ul#nav li ul li {
    border-bottom: 1px solid #363636;
    display: block;
}

.mainmenu ul#nav li ul li a {
    display: block;
    padding: 10px 15px !important;
}

.mainmenu ul#nav li ul li:last-child {
    border-bottom: 0 none;
}

.mainmenu ul#nav li ul li a:hover {
    background: #8dc63f none repeat scroll 0 0;
    color: #fff;
    display: block;
}

.navbar-toggle {
     /*margin-top: 19px;
    margin-bottom: 23px;*/
    padding: 7px 5px;
    margin-top: 40px;
    border: 1px solid #019cdb;
}

.navbar-toggle span {
    background: #019cdb none repeat scroll 0 0;
}

.mainmenu-area.fixed .navbar-header {
    margin-top: 10px;
}

.mainmenu-area.fixed .mainmenu ul#nav li > a {
    padding: 45px 15px;
}

.mainmenu-area.fixed .mainmenu ul#nav li ul {
    top: 70px;
}

.mainmenu-area.fixed .mainmenu ul#nav li:hover ul {
    top: 49px;
}


/*---------------------------
    3. SERVICE AREA
-----------------------------*/

.row.service-slider .col-lg-4 {
    width: 100%;
}

.blog-slider {
    margin: 0 auto -15px;
}

.service-slider .owl-nav > div,
.blog-slider .owl-nav > div,
.team-slider .owl-nav > div {
    display: inline-block;
    font-size: 60px;
    height: 60px;
    margin-top: -30px;
    position: absolute;
    text-align: center;
    top: 50%;
    width: 60px;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.service-slider .owl-nav > div:hover,
.blog-slider .owl-nav > div:hover,
.team-slider .owl-nav > div:hover {
    color: #019cdb;
}

.service-slider .owl-nav .owl-next,
.blog-slider .owl-nav .owl-next,
.team-slider .owl-nav .owl-next {
    right: -35px;
}

.service-slider .owl-nav .owl-prev,
.blog-slider .owl-nav .owl-prev,
.team-slider .owl-nav .owl-prev {
    left: -35px;
}

.single-service {
    position: relative;
}

.single-service > a{
    -moz-box-align: center;
    -moz-box-direction: normal;
    -moz-box-orient: vertical;
    -moz-box-pack: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: rgba(0, 0, 0, .5);
    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;
    font-size: 26px;
    height: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 9999999;
}
.single-service > a:hover {
    color: #019cdb;
    background: rgba(0, 0, 0, .8);
}

.single-service > h5 {
    padding-left: 80px;
    padding-top: 60px;
    -moz-box-align: center;
    -moz-box-direction: normal;
    -moz-box-orient: vertical;
    -moz-box-pack: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: rgba(0, 0, 0, .5);
    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;
    font-size: 18
    px;
    height: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 9999999;
}



/*-------------------------------
    4. FUN FACTS AREA
---------------------------------*/

.fun-facts-area {
    color: #fff;
    font-size: 14px;
    position: relative;
    text-align: center;
   
}

.fact-area-bg {
    background: rgba(0, 0, 0, 0) url("img/fact_area_bg.jpg") no-repeat fixed center center / cover;
    -webkit-filter: blur(1px);
    filter: blur(1px);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.facts-icon {
    color: #019cdb;
    font-size: 80px;
    margin-bottom: 11px;
    margin-top: 67px;
}

.single-facts h3 {
    font-size: 18px;
    line-height: 1;
    margin-bottom: 8px;
    font-family: 'Montserrat', sans-serif;
}


/*-------------------------------
    5. FAQS AREA
---------------------------------*/

.single-faqs {
    box-shadow: 0 0 8px #019cdb;
    margin: 15px 0;
    background-color: #FFF;
    transition: transform .5s;
    padding: 20px;
    text-align: justify;
}

.single-faqs:hover {
  -ms-transform: scale(1.2); /* IE 9 */
  -webkit-transform: scale(1.2); /* Safari 3-8 */
  transform: scale(1.2); 
}

.single-faqs h3 {
    font-size: 19px;
    font-weight: 500;
    letter-spacing: 1px;
    margin-bottom: 20px;
    margin-top: 5px;
    text-align: center;
    color: #019cdb;

}


/*---------------------------------
    6. TESTMONIAL AREA
----------------------------------*/

.testmonial-area {
    position: relative;
}

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

.testmonail-author-image {
    margin-bottom: 30px;
}

.author-name-and-designation {
    margin-bottom: 25px;
}

.author-name-and-designation h5 {
    color: #019cdb;
    font-size: 18px;
    font-weight: 400;
    text-transform: uppercase;
}

.author-name-and-designation a {
    color: #8dc63f;
    margin-left: 5px;
    text-transform: uppercase;
}

.testmonial-slider .carousel-indicators {
    bottom: -20px;
}

.testmonial-area .author-details {
    margin-bottom: 50px;
}


/*----------------------------
    7. BLOG AREA
------------------------------*/

.blog-slider .col-lg-4 {
    width: 100%;
}

.single-blog {
    font-family: raleway;
    margin-bottom: 15px;
}

.post-details h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.post-details {
    box-shadow: 0 6px 6px #019cdb;
    padding: 20px;
}

p.postmeta,
p.postmeta a {
    color: #898989;
    font-family: open sans;
    margin-bottom: 10px;
}

p.postmeta > a:hover {
    color: #019cdb;
}

a.read-more {
    color: #019cdb;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

a.read-more i {
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

a.read-more:hover i {
    padding-left: 15px;
}


/*---------------------------
    8. CLIENT AREA
-----------------------------*/

.client-area .owl-carousel .owl-item img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    width: auto;
}


/*----------------------------
    9. FOOTER AREA
-----------------------------*/


/*----------------------------
    9.1 TWITTER FEED AREA
-----------------------------*/

.footer-top-area.twitter-feed {
    background: #008fd5 none repeat scroll 0 0;
    color: #fff;
    padding: 30px 0;
    font-style: italic;
    font-size: 15px;
    letter-spacing: 0.5px;
}

.twitter-icon {
    font-size: 60px;
}

.single-twitter-slide a {
    color: #ebebeb;
    font-style: italic;
}

.twitter-feed .owl-nav > div {
    display: inline-block;
    font-size: 40px;
    height: 40px;
    text-align: center;
    width: 40px;
}

.twitter-feed .owl-nav {
    bottom: -15px;
    position: absolute;
    right: 0;
}


/*-------------------------------
    9.2 FOOTRE BUTTON AREA
--------------------------------*/

.footer-bottom-area {
    position: relative;
    padding-bottom: 20px;
    padding-top: 50px;
}

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

.s_footer h3 {
    font-size: 18px;
    margin-bottom: 30px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

ul.quick-links,
ul.footer-blog-post,
ul.footer-social-bookmark {
    list-style: outside none none;
    margin: 0;
    padding: 0;
}

ul.quick-links li,
ul.footer-blog-post li {
    border-bottom: 1px solid #898989;
    display: block;
}

ul.quick-links li:last-child,
ul.footer-blog-post li:last-child {
    border-bottom: 0 none;
}

ul.quick-links li a {
    color: #fff;
    display: block;
    letter-spacing: 1px;
    padding: 8px 0;
    text-transform: uppercase;
}

ul.quick-links li a:hover {
    color: #019cdb;
    padding-left: 14px;
}

.footer-blog-post a {
    color: #fff;
    font-weight: 600;
}

.footer-post-tilte a,
.footer-blog-post a:hover {
    color: #019cdb;
}

.footer-post-tilte a:hover {
    color: #fff;
}

.footer-subscriber p {
    margin-bottom: 25px;
}

.subscriber-form {
    background: rgba(52, 52, 52, 0.7) none repeat scroll 0 0;
    border: 1px solid #4a4a4a;
    height: 35px;
    position: relative;
    width: 100%;
    margin-bottom: 50px;
}

.subscriber-form input[type="email"] {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: medium none;
    height: 35px;
    padding-left: 10px;
}

.subscriber-form > button {
    background: #8dc63f none repeat scroll 0 0;
    border: medium none;
    height: 33px;
    letter-spacing: 1px;
    padding: 5px 10px;
    position: absolute;
    right: 0;
    text-transform: uppercase;
    top: 0;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.subscriber-form > button:hover {
    background: #fff none repeat scroll 0 0;
    color: #8dc63f;
}

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

ul.footer-social-bookmark li a {
    /*background: #1769ff none repeat scroll 0 0;
    border-radius: 50%;
    color: #000000;
    
    
    padding-top: 4px;
    text-align: center;
    width: 30px;*/
    display: inline-block;
    font-size: 16px;
    height: 30px;
    width: 30px;
    margin: 0 2px;
    background-color:transparent;
}


ul.footer-social-bookmark li a img{
    transition: transform .2s;
    }

ul.footer-social-bookmark li a img:hover{
    -ms-transform: scale(1.5); /* IE 9 */
  -webkit-transform: scale(1.5); /* Safari 3-8 */
  transform: scale(1.5);
    }

ul.footer-social-bookmark li a:hover {
    color: #fff;
}

ul.footer-social-bookmark li.behance a {
    background: #fb3958;
}

ul.footer-social-bookmark li.instagram a {
    background: #fb3958;
}

ul.footer-social-bookmark li.linkedin a {
    background: #0077b5;
}

ul.footer-social-bookmark li.google-plus a {
    background: #f44336;
}

ul.footer-social-bookmark li.facebook a {
    background: #3b5998;
}

ul.footer-social-bookmark li.twitter a {
    background: #4099ff;
}

ul.footer-social-bookmark li.youtube a {
    background: #e52d27;
}

.footer-copyright {
    background: #222222 none repeat scroll 0 0;
    color: #fff;
    padding: 20px 0;
    text-align: center;
    letter-spacing: 2px;
}

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

.footer-copyright a {
    color: #019cdb;
}


/*----------------------------------
    10. SCROLL TO TOP
-----------------------------------*/

a.scrolltotop {
    background: #019cdb none repeat scroll 0 0;
    bottom: 20px;
    color: #fff;
    font-size: 30px;
    height: 50px;
    padding-top: 7px;
    position: fixed;
    right: 10px;
    text-align: center;
    width: 50px;
    z-index: 999999;
    display: none;
    z-index: 999;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    cursor: pointer;
}

a.scrolltotop:hover {
    background: #000;
}


/*---------------------------------
    11. ABOUT US PAGE
-----------------------------------*/

@font-face {
    font-family: 'NellaSueDEMO';
    src: url('fonts/NellaSueDEMO.eot');
    src: url('fonts/NellaSueDEMO.eot') format('embedded-opentype'), url('fonts/NellaSueDEMO.woff2') format('woff2'), url('fonts/NellaSueDEMO.woff') format('woff'), url('fonts/NellaSueDEMO.ttf') format('truetype'), url('fonts/NellaSueDEMO.svg#NellaSueDEMO') format('svg');
}

.top-area.single-page {
    max-height: 500px;
    position: relative;
}

.page-barner {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    background-attachment: fixed !important;
}

.about-page .page-barner {
    background: rgba(0, 0, 0, 0) url("img/about/about.jpg") no-repeat scroll center bottom / cover;
}

.page-barner::before {
    background: #000 none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    opacity: -0.5;
    position: absolute;
    top: 0;
    width: 100%;
}

.page-barner::after {
    background: rgba(0, 0, 0, 0) url("img/pattarn.png") repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.page-barner-area {
    -moz-box-align: center;
    -moz-box-direction: normal;
    -moz-box-orient: vertical;
    -moz-box-pack: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    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;
    padding-top: 120px;
    position: absolute;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
    font-weight: 400 !important;
}

.barner-text h1 {
    display: inline-block;
    font-family: "NellaSueDEMO";
    font-size: 51px;
    position: relative;
    text-transform: capitalize;
}

.barner-text h1::before {
    background: #fff none repeat scroll 0 0;
    content: "";
    height: 5px;
    left: -120px;
    margin-top: -2.5px;
    position: absolute;
    top: 50%;
    width: 100px;
}

.barner-text h1::after {
    background: #fff none repeat scroll 0 0;
    content: "";
    height: 5px;
    margin-top: -2.5px;
    position: absolute;
    right: -120px;
    top: 50%;
    width: 100px;
}

.barner-text > h3 {
    font-weight: 400;
}


/*----------------------------------
    11.1 GET IN TOUCH AREA
----------------------------------*/

.get-in-touch-area {
    background: #ebebeb none repeat scroll 0 0;
    padding: 50px 0;
    text-transform: uppercase;
}

.get-in-touch-hidding > h2 {
    font-size: 24px;
    font-weight: 400;
    margin-bottom: 0;
}

.get-in-touch {
    text-align: right;
}

a.get-in-touch-button {
    background: #019cdb none repeat scroll 0 0;
    color: #fff;
    font-size: 24px;
    padding: 5px 16px;
}

a.get-in-touch-button:hover {
    background: #fff;
    color: #156889;
}


/*----------------------------------
    11.2 ABOUT DETAILS
------------------------------------*/

.single-about-img {
    margin-bottom: 30px;
}

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

.first-letter {
    font-size: 30px;
    float: left;
    margin-right: 10px;
    background: #323232;
    color: #fff;
    width: 40px;
    height: 40px;
    padding-top: 6px;
    text-align: center;
}

.about-details-text blockquote {
    border-left: inherit;
    color: #b7b7b7;
    font-size: 18px;
    margin-top: 50px;
    padding-left: 70px;
    padding-top: 20px;
    position: relative;
}

.about-details-text blockquote::after {
    content: "\f0b1";
    font-family: icofont;
    font-size: 40px;
    height: 30px;
    left: 0;
    position: absolute;
    top: 0;
    width: 30px;
}


/*---------------------------------
    11.3 VIDEO AREA
----------------------------------*/

.video-area {
    position: relative;
}

.video-button-area {
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    font-size: 60px;
    padding: 80px 0;
    width: 100%;
}

.video-button-area h2 {
    font-size: 60px;
    font-family: "NellaSueDEMO";
    text-transform: capitalize;
}

a.video-button {
    border: 3px solid;
    border-radius: 50%;
    color: #fff;
    height: 100px;
    padding-left: 15px;
    padding-top: 20px;
    text-align: center;
    width: 100px;
}

a.video-button:hover {
    color: #8dc63f;
}


/*----------------------------------
    11.4 SKILL AREA
------------------------------------*/

.pie-title-center {
    display: inline-block;
    position: relative;
    text-align: center;
    margin-bottom: 30px;
    margin-top: 50px;
}

.pie-value {
    display: block;
    position: absolute;
    font-size: 40px;
    height: 40px;
    top: 50%;
    left: 0;
    right: 0;
    margin-top: -20px;
    line-height: 40px;
}

.pie-title-center canvas {
    background: #2e2e2e none repeat scroll 0 0;
    border-radius: 50%;
    box-shadow: 0 0 0 5px #101010;
}

.single-skill h4 {
    font-weight: 400;
    font-size: 20px;
}


/*------------------------------
    11.5 TEAM AREA
--------------------------------*/

.team-slider .col-lg-4 {
    width: 100%;
}

.single-team {
    text-align: justify;
}

.team-thumbnail {
    overflow: hidden;
}

.team-thumbnail img {
    -webkit-transition: all 0.8s ease 0s;
    transition: all 0.8s ease 0s;
}

.single-team:hover .team-thumbnail img {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
    opacity: .5;
}

.name-description {
    border-bottom: 1px solid #d7d7d7;
    margin-bottom: 20px;
    margin-top: 30px;
    padding-bottom: 10px;
}

.name-description > h3 {
    color: #156889;
    font-size: 24px;
    text-transform: uppercase;
}

.name-description h5 {
    color: #008fd5;
}

.member-social-profile ul {
    list-style: outside none none;
    margin: 0;
    padding: 0;
}

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

.member-social-profile ul li a {
    background: #343434 none repeat scroll 0 0;
    color: #fff;
    display: inline-block;
    height: 30px;
    margin-right: 10px;
    padding-top: 5px;
    text-align: center;
    width: 30px;
}

.member-social-profile ul li a:hover {
    background: #8dc63f;
}


/*------------------------------
    12.SERVICE PAGE
--------------------------------*/

.service-page .page-barner {
    background: rgba(0, 0, 0, 0) url("img/service/service-bg.jpg")no-repeat scroll center center / cover;
}

.row.service-list {
    margin-bottom: -30px;
    overflow: hidden;
}

.service-page .single-service {
    margin-bottom: 104px;
}

.service-image {
    margin-bottom: 20px;
    margin-left: 130px;
}

.service-details h3 {
    margin-bottom: 25px;
}

.service-details h3 a {
    color: #060606;
    font-size: 18px;
    text-transform: uppercase;
}

row.team-testmonial {
    display: block;
    margin-top: 35px;
}

.panel-group {
    border: 1px solid #ddd;
}

.features_hidding {
    border-bottom: 1px solid #ebebeb;
    position: relative;
}

.panel.single_features {
    box-shadow: inherit;
}

.panel-group .panel + .panel {
    margin-top: 0;
}

.single_features h4 {
    margin-bottom: 0;
}

.single_features h4 a {
    display: block;
    font-family: open sans;
    font-size: 18px;
    font-weight: 400;
    text-transform: uppercase;
}

.panel.single_features.active .features_hidding a {
    color: #8dc63f;
}

.single_features h4 a:hover {
    color: #8dc63f;
}

.single_features h4 a {
    display: block;
    font-family: open sans;
    font-size: 18px;
    font-weight: 400;
    padding: 13px 0 13px 60px;
    position: relative;
    text-transform: uppercase;
}

.single_features h4 a i {
    border-right: 1px solid #ebebeb;
    height: 50px;
    left: 0;
    padding-top: 13px;
    position: absolute;
    text-align: center;
    top: 0;
    width: 50px;
}

.panel.single_features.active {
    background: #fafafa none repeat scroll 0 0;
}

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

.features_content {
    padding: 10px 15px;
    text-align: justify;
    position: relative;
}

.features_content::after {
    background: #ebebeb none repeat scroll 0 0;
    bottom: 0;
    content: "";
    height: 1px;
    left: 0;
    position: absolute;
    width: 100%;
}

.service-details-area .single-service-img {
    margin-bottom: 30px;
}

.service-features > h3,
.service-download-content h3 {
    color: #000000;
    font-size: 18px;
    margin-bottom: 50px;
    text-transform: uppercase;
}

.service-download-content {
    text-align: justify;
}

a.download-button {
    background: #fff none repeat scroll 0 0;
    border: 1px solid;
    display: block;
    font-size: 24px;
    margin-top: 50px;
    padding: 15px 0;
    text-align: center;
    text-transform: uppercase;
}

a.download-button:hover {
    background: #8dc63f none repeat scroll 0 0;
    border: 1px solid #8dc63f;
    color: #fff;
}

.team-testmonial-slide-area {
    border: 1px solid #EBEBEB;
    padding: 50px 0;
}

.team-testmonial-slider {
    padding-left: 70px;
    padding-top: 20px;
    position: relative;
    color: #b7b7b7;
    font-weight: 600;
}

.team-testmonial-slider::after {
    content: "";
    font-family: icofont;
    font-size: 40px;
    height: 40px;
    left: 0;
    position: absolute;
    top: 0;
    width: 40px;
}

.testmonial-member-name {
    color: #555555;
    font-weight: 700;
    text-transform: uppercase;
}

.testmonial-member-name > span {
    color: #008fd5;
}

.team-testmonial .carousel-indicators {
    bottom: -20px;
}

.team-testmonial .carousel-indicators li {
    background: #b7b7b7 none repeat scroll 0 0;
    border-radius: 0;
    height: 4px;
    width: 25px;
}

.team-testmonial .carousel-indicators li.active {
    background: #008FD5 none repeat scroll 0 0;
    box-shadow: 0 0 0;
}


/*------------------------------
    13.BLGO PAGE GRID
--------------------------------*/

.blog-grid .single-blog {
    margin-bottom: 30px;
}


/*-------------------------------
    14.BLOG PAGE LIST
--------------------------------*/

.blog-page .page-barner {
    background: rgba(0, 0, 0, 0) url("img/blog/blog-barner.jpg")no-repeat scroll center center / cover;
}

.blog-posts .post-thumbnail img {
    margin-bottom: 20px;
    width: 100%;
}

.single-blog h3 {
    font-weight: 600;
    margin-bottom: 20px;
    text-transform: uppercase;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.single-blog h3:hover a {
    color: #019cdb;
}

.blog-post-meta {
    margin-bottom: 15px;
}

.blog-post-meta > a {
    color: #898989;
    margin-right: 20px;
}

.blog-post-meta > a:hover {
    color: #8dc63f;
}

.blog-post-meta > a i {
    padding-right: 5px;
}

a.blog-readmore {
    border-bottom: 3px solid #8dc63f;
    color: #101010;
    display: inline-block;
    font-weight: 700;
    margin-bottom: 50px;
}

a.blog-readmore:hover {
    color: #8dc63f;
}

a.blog-readmore i {
    font-weight: 700;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

a.blog-readmore:hover i {
    padding-left: 10px;
}

.blog-pagination {
    border-top: 1px solid #e1e1e1;
    padding-top: 30px;
}

.blog-grid .blog-pagination {
    border-top: 0 none;
}

.blog-grid .blog-pagination .pagination {
    margin: 0;
    margin-top: 20px;
}

.blog-pagination .pagination {
    margin-bottom: 0;
}

ul.pagination li a {
    border-radius: 5px;
    display: inline-block;
    margin-right: 5px;
    text-transform: uppercase;
    color: #060606;
}

ul.pagination li.active a,
ul.pagination li.next:hover a,
ul.pagination li:hover a {
    background: #8dc63f none repeat scroll 0 0;
    border: 1px solid transparent;
    color: #fff;
}

ul.pagination li.next a {
    background: #060606 none repeat scroll 0 0;
    border: 1px solid;
    color: #fff;
    padding-left: 20px;
    padding-right: 20px;
}


/*------------------------------
    14.1 SIDEBAR
--------------------------------*/

.single-sidebar {
    margin-bottom: 50px;
}

.single-sidebar:last-child {
    margin-bottom: 0;
}

.search-form {
    background: #f7f7f7 none repeat scroll 0 0;
    height: 40px;
    position: relative;
    width: 100%;
}

.search-form > input[type="text"] {
    background: transparent none repeat scroll 0 0;
    border: 0 none;
    height: 40px;
    padding: 6px 6px 6px 12px;
    width: calc(100% - 44px);
}

.search-form > button {
    background: #8dc63f none repeat scroll 0 0;
    border: medium none;
    color: #fff;
    font-size: 20px;
    height: 40px;
    width: 40px;
}

.search-form {
    background: #f7f7f7 none repeat scroll 0 0;
    height: 40px;
    position: relative;
    width: 100%;
}

.search-form > input[type="text"] {
    background: transparent none repeat scroll 0 0;
    border: 0 none;
    height: 40px;
    padding: 6px 6px 6px 12px;
    width: calc(100% - 44px);
}

.search-form > button {
    background: #8dc63f none repeat scroll 0 0;
    border: medium none;
    color: #fff;
    font-size: 20px;
    height: 40px;
    width: 40px;
}

.single-sidebar {
    margin-bottom: 50px;
}

.sidebar-title {
    border-bottom: 3px solid #ebebeb;
    margin-bottom: 20px;
}

.sidebar-title > h3 {
    color: #060606;
    display: inline-block;
    font-size: 18px;
    padding-bottom: 20px;
    position: relative;
    text-transform: uppercase;
    margin-bottom: 0;
}

.sidebar-title > h3::after {
    background: #8dc63f none repeat scroll 0 0;
    bottom: -3px;
    content: "";
    display: inline-block;
    height: 3px;
    left: 0;
    position: absolute;
    width: 100%;
}

ul.catagoryes,
ul.recent-post,
ul.tags {
    list-style: outside none none;
    margin: 0;
    padding: 0;
}

ul.catagoryes li,
ul.recent-post li {
    display: block;
    margin-bottom: 10px;
}

ul.catagoryes li:last-child,
ul.recent-post li:last-child {
    margin-bottom: 0;
}

ul.catagoryes li a {
    color: #898989;
    letter-spacing: 0.5px;
    padding: 5px;
}

.blog-sidebar {
    margin-left: 40px;
}

ul.catagoryes li a span {
    color: #8dc63f;
    padding-left: 30px;
}

ul.recent-post li a {
    color: #060606;
    font-weight: 600;
}

ul.tags li {
    display: inline;
}

ul.tags li a {
    display: inline-block;
    font-weight: 600;
    padding: 10px 10px 10px 0;
}

.single-sidebar a:hover {
    color: #8dc63f;
}

.popular-post .single-post {
    margin-bottom: 20px;
    min-height: 70px;
    padding-left: 80px;
    position: relative;
}

.popular-post .post-thumbnail {
    height: 70px;
    left: 0;
    position: absolute;
    top: 0;
    width: 70px;
}

.popular-post .post-details {
    box-shadow: inherit;
    padding: 0;
}


/*------------------------------
    15. SINGLE BLOG
-------------------------------*/

.single-blog.single-post {
    line-height: 26px;
    text-align: justify;
}

.single-blog.single-post .highligh-text {
    border-left: 0 none;
    color: #898989;
    font-size: 16px;
    font-style: italic;
    margin-bottom: 40px;
    margin-top: 40px;
    padding-left: 70px;
    position: relative;
}

.single-blog.single-post .highligh-text::after {
    content: "\f0b1";
    font-family: icofont;
    font-size: 40px;
    height: 40px;
    left: 0;
    position: absolute;
    top: 0;
    width: 40px;
}

.author-img {
    position: absolute;
    width: 200px;
}

a.author-link {
    background: #323232 none repeat scroll 0 0;
    bottom: 0;
    color: #fff;
    font-size: 16px;
    left: 0;
    padding: 15px;
    position: absolute;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
}

.blog-author {
    border-top: 1px solid #ddd;
    margin: 50px 0;
    min-height: 160px;
    padding-top: 50px;
}

.blog-author .author-details {
    background: #f5f5f5 none repeat scroll 0 0;
    min-height: 160px;
    padding: 15px 15px 15px 213px;
}

.author-details > p {
    margin-bottom: 0;
}

.author-name-title > span {
    display: block;
    font-weight: 400;
    margin-top: 5px;
}

.post-comment > h5 {
    color: #060606;
    font-family: open sans;
    margin-bottom: 50px;
    text-transform: uppercase;
}

.single-comment {
    background: whitesmoke none repeat scroll 0 0;
    padding: 20px 20px 20px 120px;
    position: relative;
    margin-bottom: 20px;
}

.single-comment:nth-child(2n+1) {
    border-left: 3px solid #898989;
    margin-left: 40px;
}

.comment-avator {
    height: 80px;
    left: 20px;
    position: absolute;
    top: 20px;
    width: 80px;
}

.comment-text a {
    color: #363636;
}

.comment-text h5 span {
    color: #636363;
    font-weight: 400;
}

.comment-text a.repaly {
    color: #636363;
    float: right;
}

.comment_submit {
    margin-top: 50px;
}

.comment_submit h4 {
    color: #000000;
    display: block;
    font-size: 18px;
    margin-bottom: 50px;
    text-transform: uppercase;
}

.comment_submit input,
.comment_submit textarea {
    border: 1px solid #e1e1e1;
    color: #060606;
    padding: 10px;
    width: 100%;
}

.comment_submit textarea {
    height: 120px;
    padding: 10px;
    width: 100%;
}

.comment_submit button {
    background: transparent none repeat scroll 0 0;
    border: 2px solid;
    color: #8dc63f;
    font-weight: 600;
    margin-top: 20px;
    padding: 10px 20px;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.comment_submit button:hover {
    color: #060606;
}

.post-pagination-button {
    border-top: 1px solid #ebebeb;
    margin-top: 40px;
    padding-top: 30px;
}

.post-pagination-button ul {
    list-style: outside none none;
    margin: 0;
    padding: 0;
}

.post-pagination-button ul li.next {
    float: right;
}

.post-pagination-button ul li.previous {
    float: left;
}

.post-pagination-button ul li a {
    color: #424345;
    font-weight: 600;
}

.post-pagination-button ul li a:hover {
    color: #8dc63f;
}


/*--------------------------------
    16. TEAM PAGE
---------------------------------*/

.team-area.section-padding.team-page {
    padding-top: 50px;
    padding-bottom: 20px;
}

.team-page .page-barner {
    background: rgba(0, 0, 0, 0) url("img/team/team-barner.jpg")no-repeat scroll center center / cover;
}
.team-page2 .page-barner{
    background: rgba(0, 0, 0, 0) url("img/team/career.jpg")no-repeat scroll center center / cover;
}

.about-single-team-member .member-social-profile {
    margin-top: 50px;

}

.team-page .single-team {
    text-align: center;
    margin-bottom: 50px;
}

.team-page .single-team:hover .team-thumbnail img {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-filter: blur(0);
    filter: blur(0);
}

.single-team-project-img {
    position: relative;
}

.single-team-project-view {
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: rgba(141, 198, 63, 0.8) none repeat scroll 0 0;
    color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    width: 100%;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

.single-team-project-img > img {
    min-height: 249px;
    width: 100%;
}

.single-team-project-img:hover .single-team-project-view {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}


/*-----------------------------
    17. PORTFOLIO PAGE
-------------------------------*/

.portfolio-page .page-barner {
    background: url("img/portfolio/portfolio-barner.jpg") no-repeat scroll center bottom / cover;
}

.portfolio-page .area-title {
    margin-bottom: 30px;
}

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

.portfolio-menu ul {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    font-size: 14px;
    list-style: outside none none;
    margin: 0;
    padding: 0;
    text-align: center;
    text-transform: uppercase;
}

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

.portfolio-menu ul li.uk-active {
    color: #000;
    font-weight: 600;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.row.portfolio-list {
    margin-bottom: -30px;
}

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

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

.portfolio-bg-1 {
    background: url(img/portfolio/1.jpg)no-repeat scroll 0 0;
    background-size: cover;
}

.portfolio-bg-2 {
    background: url(img/portfolio/2.jpg)no-repeat scroll 0 0;
    background-size: cover;
}

.portfolio-bg-3 {
    background: url(img/portfolio/3.jpg)no-repeat scroll 0 0;
    background-size: cover;
}

.portfolio-bg-4 {
    background: url(img/portfolio/4.jpg)no-repeat scroll 0 0;
    background-size: cover;
}

.portfolio-bg-5 {
    background: url(img/portfolio/5.jpg)no-repeat scroll 0 0;
    background-size: cover;
}

.portfolio-bg-6 {
    background: url(img/portfolio/6.jpg)no-repeat scroll 0 0;
    background-size: cover;
}

.portfolio-bg-7 {
    background: url(img/portfolio/7.jpg)no-repeat scroll 0 0;
    background-size: cover;
}

.portfolio-bg-8 {
    background: url(img/portfolio/8.jpg)no-repeat scroll 0 0;
    background-size: cover;
}

.portfolio-bg-9 {
    background: url(img/portfolio/9.jpg)no-repeat scroll 0 0;
    background-size: cover;
}

.portfolio-bg-10 {
    background: url(img/portfolio/10.jpg)no-repeat scroll 0 0;
    background-size: cover;
}

.portfolio-bg-11 {
    background: url(img/portfolio/11.jpg)no-repeat scroll 0 0;
    background-size: cover;
}

.portfolio-bg-12 {
    background: url(img/portfolio/12.jpg)no-repeat scroll 0 0;
    background-size: cover;
}

.portfolio-details {
    -moz-box-align: center;
    -moz-box-direction: normal;
    -moz-box-orient: vertical;
    -moz-box-pack: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: rgba(141, 198, 63, 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;
    padding: 20px;
    position: absolute;
    text-align: center;
    top: 0;
    -webkit-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    width: 100%;
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
    opacity: 0;
    z-index: 99;
}

.brand-description > h3 {
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.portfolio-button {
    margin-top: 10px;
}

a.portfolio-view {
    width: 35px;
    height: 35px;
    border: 1px solid;
    color: #fff;
    display: inline-block;
    margin: 0 7px;
    font-size: 20px;
    padding-top: 5px;
}

a.portfolio-view:hover {
    color: #8dc63f;
    background: #fff;
    border-color: #fff;
}

.portfolio-details::after {
    border-left: 1px solid #fff;
    border-top: 1px solid #fff;
    content: "";
    height: 0%;
    left: 20px;
    position: absolute;
    top: 20px;
    width: 0%;
    -webkit-transition: 0.9s;
    transition: 0.9s;
    opacity: 0;
    z-index: -1;
}

.portfolio-details::before {
    border-bottom: 1px solid #fff;
    border-right: 1px solid #fff;
    bottom: 20px;
    content: "";
    height: 0%;
    position: absolute;
    right: 20px;
    width: 0%;
    -webkit-transition: 1s;
    transition: 1s;
    opacity: 0;
    z-index: -1;
}

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

.single-portfolio:hover .portfolio-details::before,
.single-portfolio:hover .portfolio-details::after {
    width: 100%;
    height: 100%;
    opacity: 1;
}


/*-------------------------------
    18. CONTACT US PAGE
--------------------------------*/

.contact-page .page-barner {
    background: url("img/contact-page-barner.jpg") no-repeat scroll center bottom / cover;
}

.contact-area .area-title {
    font-size: 15px;
}

.contact-area .area-title h2 {
    margin-bottom: 30px;
    text-transform: uppercase;
}

.contact-and-address-detais .contact-form input,
.contact-and-address-detais .contact-form button {
    margin-bottom: 10px;
}

.google-map-and-contact-form-area {
    position: relative;
}

.contact-and-address-detais {
    padding-top: 15px;
    bottom: 0;
    height: 80%;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 80%;
}

.contact-and-address-detais > div {
    background: #f3f2f3 none repeat scroll 0 0;
    padding-bottom: 30px;
   
}

.contact-form input[type=text],
.contact-form input[type=email],
.contact-form textarea {
    border-radius: 0;
    box-shadow: 0 0 0;
    margin-bottom: 50px;
    max-height: 150px;
    padding: 16px 15px;
    min-height: 50px;
}

.s-contact-address {
    margin: 40px 0;
    padding-left: 120px;
    position: relative;
}

.s-contact-icon {
    color: #019cdb;
    font-size: 60px;
    height: 60px;
    left: 28px;
    position: absolute;
    text-align: center;
    width: 60px;
}

.s-contact-address h4 {
    font-size: 18px;
    text-transform: uppercase;
}

.contact-form .form-control,
.contact-form .form-control:focus {
    border: 1px solid rgba(75, 75, 75, 0.47);
    box-shadow: 0 0 0 #fff !important;
    outline: 0 none;
}

.contact-form button {
    background: #019cdb none repeat scroll 0 0;
    border: 1px solid transparent;
    color: #fff;
    margin-left: 15px;
    padding: 10px 20px;
    text-transform: uppercase;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.contact-form button:hover {
    background: #fff none repeat scroll 0 0;
    border: 1px solid;
    color: #156889;
}
.newslidertxt{
    /*padding-left: 51px;*/
    text-align: center;
    margin-top: 118px;
}
#box    {
    width:300px;
    height:200px;
    box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
    border-bottom:2px solid #fff;
    border-right:2px solid #fff;
    margin:5% auto 0 auto; 
    background:url(img/service/7.jpg);
    background-size:cover;
    border-radius:5px;
    overflow:hidden;}
    #box1    {
    width:300px;
    height:200px;
    box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
    border-bottom:2px solid #fff;
    border-right:2px solid #fff;
    margin:5% auto 0 auto; 
    background:url(img/service/2.png);
    background-size:cover;
    border-radius:5px;
    overflow:hidden;}
    #box2    {
    width:300px;
    height:200px;
    box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
    border-bottom:2px solid #fff;
    border-right:2px solid #fff;
    margin:5% auto 0 auto; 
    background:url(img/service/3.jpg);
    background-size:cover;
    border-radius:5px;
    overflow:hidden;}
    #box3    {
    width:300px;
    height:200px;
    box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
    border-bottom:2px solid #fff;
    border-right:2px solid #fff;
    margin:5% auto 0 auto; 
    background:url(img/service/6.jpg);
    background-size:cover;
    border-radius:5px;
    overflow:hidden;}
    #box4    {
    width:300px;
    height:200px;
    box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
    border-bottom:2px solid #fff;
    border-right:2px solid #fff;
    margin:5% auto 0 auto; 
    background:url(img/service/4.jpg);
    background-size:cover;
    border-radius:5px;
    overflow:hidden;}
    #box5    {
    width:300px;
    height:200px;
    box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
    border-bottom:2px solid #fff;
    border-right:2px solid #fff;
    margin:5% auto 0 auto; 
    background:url(img/service/5.jpg);
    background-size:cover;
    border-radius:5px;
    overflow:hidden;}

#overlay    {  
    background:rgba(49, 112, 143, 0.7);
    text-align:center;
    padding:68px 0 100px 0;
    opacity:0;
   -webkit-transition: opacity .25s ease;}

#box:hover #overlay {
   opacity:1;}

#box2:hover #overlay {
   opacity:1;}
#box3:hover #overlay {
   opacity:1;}
#box4:hover #overlay {
   opacity:1;}
#box5:hover #overlay {
   opacity:1;}
#box1:hover #overlay {
   opacity:1;}

#plus       {
    font-family:Helvetica;
    font-weight:900;
    color:rgba(255,255,255,.85);
    font-size:25px;}
 .overlaytxt{
        color: #ccc;
    font-size: 14px;
    padding: 7px;
    font-weight: 100;
}

.service-image2{
    max-width: 110px;
}

.career-img{
    max-width: 100%
}
.product-img{
   
    margin-left: 50px;
}
.b-clor {
    color: #008ccb;
}
#logo-ticker {
    margin: 0px auto;
   padding-bottom: 70px;
    background-color: #fff;
    width: 100%;
    position: relative;
}
   #logo-ticker .footer-logo-slider {
        display: inline-block;
        list-style: none;
        margin: 0;
        padding: 8px 0;
        height: 120px;
        width: 100%;
        overflow: hidden;
        position: absolute;
   }
.footer-logo-slider > ul {
    position: relative;
    display: inline-block;
}

.footer-logo-slider li {
    display: inline-block;
   height: 74px;
    width: 245px;
    padding: 5px;
    position: absolute;
    top: 0;
}
.logo {
    display: inline-block;
    height: 100%;
    width: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    top: 0;
  }
     



  h2 {
    color: #ffffff;
    word-spacing: 5px;
    font-size: 30px;
    font-weight: 700;
    margin-bottom:30px;
    font-family: 'Raleway', sans-serif;
}

/*
==============================================
pulse
==============================================
*/
.box{
    height: 300px;
    width: 300px;
    transition: transform .5s;
    background: linear-gradient(to right, #FFF 50%, #4fa9e1 50%);
     background-size: 200% 100%;
 background-position: right bottom;
 transition: all 2s ease;

}
.box:hover{
    background-position: left bottom;
    -ms-transform: scale(1.2); /* IE 9 */
  -webkit-transform: scale(1.2); /* Safari 3-8 */
  transform: scale(1.2);
    /*animation-name: pulse;
    -webkit-animation-name: pulse;  

    animation-duration: 1.5s;   
    -webkit-animation-duration: 1.5s;

    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;*/
}

@keyframes pulse {
    0% {
        transform: scale(0.9);
        opacity: 0.7;       
    }
    50% {
        transform: scale(1);
        opacity: 1; 
    }   
    100% {
        transform: scale(0.9);
        opacity: 0.7;   
    }           
}

@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scale(0.95);
        opacity: 0.7;       
    }
    50% {
        -webkit-transform: scale(1);
        opacity: 1; 
    }   
    100% {
        -webkit-transform: scale(0.95);
        opacity: 0.7;   
    }           
}
.vision{
    border: solid #008cc9 2px;
    padding:20px;
    border-radius: 20px;
}