/*
Template Name: Rex
Author: MarkUps
Author URI: http://www.markups.io/
Description: Rex - One Page Multipurpose Business HTML5 Template.
Version: 1.0
Tags: light, white,blog,business,multipurpose,one page, single page, custom-colors,Bootstrap,responsive, html5, css3
*/

/* Table of Content
==================================================
#BASIC TYPOGRAPHY
#HEADER
#MENU
#ABOUT
#CALL TO ACTION
#TEAM
#SERVICE
#PORTFOLIO
#COUNTER
#PRICING TABLE
#TESTIMONIAL
#FORM BLOG
#CLIENT
#CONTACT
#FOOTER
#BLOG PAGE
#ERROR PAGE
*/

/*--------------------*/
/* BASIC TYPOGRAPHY */
/*--------------------*/

body, html{
    overflow-x : hidden;
}

body{
    font-family : 'Open Sans', sans-serif;
    font-size   : 16px;
    overflow-x  : hidden !important;
    color       : #838282;
}

ul{
    padding    : 0;
    margin     : 0;
    list-style : none;
}

a{
    text-decoration : none;
    color           : #2F2F2F;
}

a:focus{
    outline         : none;
    text-decoration : none;
}

h1, h2, h3, h4, h5, h6{
    font-family : 'Raleway', sans-serif;
}

h2{
    color          : #FFF;
    font-size      : 30px;
    font-weight    : 700;
    line-height    : 40px;
    margin         : 0;
    padding-bottom : 10px;
}

img{
    border : none;
}

/* Preloader */

#preloader{
    position         : fixed;
    top              : 0;
    left             : 0;
    right            : 0;
    bottom           : 0;
    background-color : #FFF; /* change if the mask should have another color then white */
    z-index          : 99999; /* makes sure it stays on top */
}

.loader{
    font-size         : 10px;
    top               : 300px;
    left              : 45%;
    text-indent       : -9999em;
    width             : 11em;
    height            : 11em;
    border-radius     : 50%;
    position          : relative;
    -webkit-animation : load3 1.4s infinite linear;
    animation         : load3 1.4s infinite linear;
    -webkit-transform : translateZ(0);
    -ms-transform     : translateZ(0);
    transform         : translateZ(0);
}

.loader:before{
    width         : 50%;
    height        : 50%;
    border-radius : 100% 0 0 0;
    position      : absolute;
    top           : 0;
    left          : 0;
    content       : '';
}

.loader:after{
    background    : #FFF;
    width         : 75%;
    height        : 75%;
    border-radius : 50%;
    content       : '';
    margin        : auto;
    position      : absolute;
    top           : 0;
    left          : 0;
    bottom        : 0;
    right         : 0;
}

@-webkit-keyframes load3{
    0%{
        -webkit-transform : rotate(0deg);
        transform         : rotate(0deg);
    }
    100%{
        -webkit-transform : rotate(360deg);
        transform         : rotate(360deg);
    }
}

@keyframes load3{
    0%{
        -webkit-transform : rotate(0deg);
        transform         : rotate(0deg);
    }
    100%{
        -webkit-transform : rotate(360deg);
        transform         : rotate(360deg);
    }
}

/*scrol to top*/

.scrollToTop{
    background         : #F9F9F9 none repeat scroll 0 0;
    border-radius      : 50%;
    bottom             : 60px;
    display            : none;
    font-size          : 25px;
    height             : 55px;
    line-height        : 50px;
    position           : fixed;
    right              : 50px;
    text-align         : center;
    text-decoration    : none;
    width              : 55px;
    -webkit-transition : all 0.5s;
    -o-transition      : all 0.5s;
    transition         : all 0.5s;
    z-index            : 999;
}

.scrollToTop:hover,
.scrollToTop:focus{
    color           : #FFF;
    text-decoration : none;
    outline         : none;
}

/*--------------------*/
/* HOME HEADER */
/*--------------------*/

#header{
    float   : left;
    display : inline;
    width   : 100%;
}

.header-inner{
    display  : inline;
    position : relative;
    float    : left;
    width    : 100%;
}

.header-inner > img{
    width : 100%;
}

.header-overlay{
    background-color : rgba(0, 0, 0, 0.6);
    height           : 100%;
    left             : 0;
    position         : absolute;
    top              : 0;
    width            : 100%;
    z-index          : 10;
}

.header-content{
    float      : left;
    width      : 100%;
    height     : 100%;
    padding    : 275px;
    text-align : center;
    padding-top: 8%;
}

.header-content h2{
    font-size      : 80px;
    font-weight    : bold;
    text-transform : uppercase;
    line-height    : 80px;
}

.header-content h2 span{
    font-weight : normal;
    line-height : 93px;
}

.header-btn-area{
    margin-top : 90px;
    float      : left;
    display    : inline;
    width      : 100%;
    text-align : center;
}

.header-btn-area a{
    margin : 0px 15px;
}

.knowmore-btn{
    border             : 2px solid #FFF;
    border-radius      : 2px;
    color              : #FFF;
    font-size          : 20px;
    font-weight        : bold;
    font-family        : 'Raleway', sans-serif;
    text-transform     : uppercase;
    padding            : 25px 28px;
    -webkit-transition : all 0.5s;
    -moz-transition    : all 0.5s;
    -ms-transition     : all 0.5s;
    -o-transition      : all 0.5s;
    transition         : all 0.5s;
}

.download-btn{
    border             : 2px solid #FFF;
    border-radius      : 4px;
    color              : #FFF;
    font-size          : 20px;
    font-weight        : bold;
    font-family        : 'Raleway', sans-serif;
    text-transform     : uppercase;
    padding            : 25px 28px;
    -webkit-transition : all 0.5s;
    -moz-transition    : all 0.5s;
    -ms-transition     : all 0.5s;
    -o-transition      : all 0.5s;
    transition         : all 0.5s;
}

.knowmore-btn:hover,
.knowmore-btn:focus,
.download-btn:hover,
.download-btn:focus{
    color           : #FFF;
    text-decoration : none;
    outline         : none;

}

/*--------------------*/
/* MENU */
/*--------------------*/

#menu-area{
    float   : left;
    display : inline;
    width   : 100%;
}

.main-navbar{
    background         : #FFF none repeat scroll 0 0;
    border-radius      : 0;
    border-bottom      : 1px solid #E7E7E7;
    border-right       : medium none;
    height             : 100px;
    margin-bottom      : 0;
    -webkit-box-shadow : 0px 2px 4px 0px #F3F3F3;
    -moz-box-shadow    : 0px 2px 4px 0px #F3F3F3;
    box-shadow         : 0px 2px 4px 0px #F3F3F3;
}

.navbar-fixed-top{
    height             : 80px;
    -webkit-transition : all 0.5s;
    -moz-transition    : all 0.5s;
    -ms-transition     : all 0.5s;
    -o-transition      : all 0.5s;
    transition         : all 0.5s;
}

.logo{
    height       : 100px;
    width        : 85px;
    margin-right : 45px;
    margin-top   : -1px;
    padding      : 0;
}

.logo-compressed{
    height : 80px;
    width  : 70px;
}

.logo img{
    height : 100%;
    width  : 100%;
}

#navbar{
    float : left;
    width : 83%;
}

.main-nav{
    display    : inline-block;
    text-align : right;
    width      : 100%;
}

.main-nav li{
    display : inline-block;
    float   : none;
}

.main-nav li a{
    color          : #636363;
    font-size      : 15px;
    padding        : 39px 20px;
    text-transform : uppercase;
}

.less-padding{
    padding : 30px 20px !important;
}

.navbar-default .navbar-nav > li > a{
    color              : #636363;
    -webkit-transition : all 0.5s;
    -moz-transition    : all 0.5s;
    -ms-transition     : all 0.5s;
    -o-transition      : all 0.5s;
    transition         : all 0.5s;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus{
    background-color : transparent;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus{
    background-color : transparent;
}

.search-area{
    display  : inline-block;
    float    : right;
    height   : 60px;
    padding  : 0;
    position : relative;
    width    : 5%;
}

.search-area input[type="text"]{
    height             : 100%;
    font-size          : 20px;
    display            : inline-block;
    font-weight        : 100;
    border             : none;
    outline            : none;
    line-height        : 20px;
    color              : #555;
    padding            : 3px 60px 0px 3px;
    width              : 0px;
    position           : absolute;
    top                : 11%;
    right              : 0;
    background         : none;
    z-index            : 3;
    -webkit-transition : width .4s cubic-bezier(0.000, 0.795, 0.000, 1.000);
    transition         : width .4s cubic-bezier(0.000, 0.795, 0.000, 1.000);
    cursor             : pointer;
}

.search-area input[type="text"]:focus{
    width            : 880px;
    z-index          : 1;
    background-color : #FFF;
    cursor           : text;
}

.search-area input[type="submit"]{
    background-image    : url("assets/images/search-icon.png");
    background-position : center center;
    background-repeat   : no-repeat;
    border              : medium none;
    cursor              : pointer;
    display             : inline-block;
    float               : right;
    height              : 35px;
    outline             : medium none;
    position            : absolute;
    right               : 0;
    text-indent         : -10000px;
    top                 : 53%;
    -webkit-transition  : opacity 0.4s ease 0s;
    transition          : opacity 0.4s ease 0s;
    width               : 45px;
    z-index             : 2;
}

.search-area input[type="submit"]:hover{
    opacity : 0.8;
}

/*--------------------*/
/* ABOUT */
/*--------------------*/

#about{
    background-color : #FFF;
    padding          : 70px 0;
    float            : left;
    display          : inline;
    width            : 100%;
}

.welcome-area{
    float   : left;
    display : inline;
    width   : 100%;
}

.title-area{
    display    : inline;
    float      : left;
    padding    : 0 172px;
    position   : relative;
    text-align : center;
    width      : 100%;
}

.tittle{
    color          : #3A3A3A;
    font-size      : 40px;
    margin-bottom  : 0;
    padding-bottom : 18px;
}

.tittle-line{
    background-color : #898989;
    display          : inline-block;
    height           : 3px;
    margin-bottom    : 16px;
    width            : 60px;
}

.welcome-content{
    float      : left;
    display    : inline;
    width      : 100%;
    margin-top : 50px;
}

.wc-table{
    display    : inline-block;
    text-align : center;
}

.wc-table li{
    float : left;
    width : 25%;
}

.single-wc-content{
    float   : left;
    display : inline;
    width   : 100%;
}

.single-wc-content span{
    border-radius      : 100%;
    display            : inline-block;
    font-size          : 35px;
    height             : 117px;
    line-height        : 117px;
    text-align         : center;
    width              : 117px;
    -webkit-transition : all 0.5s;
    -moz-transition    : all 0.5s;
    -ms-transition     : all 0.5s;
    -o-transition      : all 0.5s;
    transition         : all 0.5s;
}

.single-wc-content .wc-tittle{
    color          : #525252;
    text-transform : uppercase;
    font-size      : 18px;
    border-bottom  : 1px solid #BBB;
    margin-top     : 32px;
    padding-bottom : 17px;
}

.single-wc-content p{
    color     : #7D7D7D;
    font-size : 15px;
    padding   : 12px;
}

.single-wc-content:hover .wc-icon{
    color : #FFF;
}

.single-wc-content:hover .wc-tittle{
    padding-bottom : 16px;
}


.about-area{
    margin    : 45px auto;
    max-width : 270px;
}

@media (min-width : 768px){
    .about-area{
        width     : 100%;
        display   : inline;
        float     : left;
        max-width : 100%;
    }
}

.about-left{
    display  : inline;
    float    : left;
    height   : 300px;
    position : relative;
    width    : 445px;
}

.about-left img{
    left     : 23px;
    position : absolute;
    top      : 23px;
}

.introduction-btn{
    color           : #F9FFFD;
    display         : inline-block;
    font-size       : 25px;
    left            : 36%;
    padding         : 18px 16px;
    position        : absolute;
    text-decoration : none;
    top             : 50%;
}

.introduction-btn:hover,
.introduction-btn:focus{
    color           : #F9FFFD;
    text-decoration : none;
    outline         : none;
}

.about-right{
    display      : inline;
    float        : left;
    padding-left : 85px;
    padding-top  : 20px;
    width        : 100%;
}

.about-right .title-area{
    text-align : left;
    padding    : 0px;
}

.about-right .tittle{
    padding-bottom : 47px;
}

.about-right .tittle-line{
    height        : 2px;
    margin-bottom : 35px;
    width         : 100px;
}

.about-right p{
    color         : #535353;
    font-family   : "Raleway", sans-serif;
    margin-bottom : 32px;
}

.about-btn-area{
    float      : left;
    display    : inline;
    margin-top : 14px;
    width      : 100%;
}

.button{
    float                       : left;
    display                     : block;
    margin                      : 1em;
    border                      : none;
    background                  : none;
    color                       : inherit;
    vertical-align              : middle;
    position                    : relative;
    z-index                     : 1;
    -webkit-backface-visibility : hidden;
    -moz-osx-font-smoothing     : grayscale;
}

.button:focus{
    outline : none;
}

.button > span{
    vertical-align : middle;
}

.button-default{
    text-decoration                    : none;
    border-radius                      : 2px;
    overflow                           : hidden;
    font-weight                        : 600;
    font-size                          : 15px;
    padding                            : 0;
    -webkit-transition                 : border-color 0.3s, background-color 0.3s;
    transition                         : border-color 0.3s, background-color 0.3s;
    -webkit-transition-timing-function : cubic-bezier(0.2, 1, 0.3, 1);
    transition-timing-function         : cubic-bezier(0.2, 1, 0.3, 1);
}

.button-default::after{
    content           : attr(data-text);
    position          : absolute;
    width             : 100%;
    height            : 100%;
    top               : 0;
    left              : 0;
    opacity           : 0;
    color             : #3F51B5;
    -webkit-transform : translate3d(0, 25%, 0);
    transform         : translate3d(0, 25%, 0);
}

.button-default > span{
    display : block;
}

.button-default:after{
    color : #FFF;
}

.button-default::after,
.button-default > span{
    padding                            : 12px 21px;
    -webkit-transition                 : -webkit-transform 0.3s, opacity 0.3s;
    transition                         : transform 0.3s, opacity 0.3s;
    -webkit-transition-timing-function : cubic-bezier(0.2, 1, 0.3, 1);
    transition-timing-function         : cubic-bezier(0.2, 1, 0.3, 1);
}

.button-default:hover{
    background-color : rgba(63, 81, 181, 0.1);
    text-decoration  : none;
}

.button-default:hover,
.button-default:focus{
    color : #FFF !important;
}

.button-default:hover::after{
    opacity           : 1;
    -webkit-transform : translate3d(0, 0, 0);
    transform         : translate3d(0, 0, 0);
}

.button-default:hover > span{
    opacity           : 0;
    -webkit-transform : translate3d(0, -25%, 0);
    transform         : translate3d(0, -25%, 0);
}

/*--------------------*/
/* CALL TO ACTION */
/*--------------------*/

#call-to-action{
    display  : inline;
    float    : left;
    position : relative;
    width    : 100%;
    height   : 250px;
    background-image: url(assets/images/call-to-action-bg.png);
    background-size: cover;
}

.call-to-overlay{
    background-color : rgba(0, 0, 0, 0.8);
    position         : absolute;
    left             : 0;
    top              : 0;
    height           : 100%;
    width            : 100%;
}

.call-to-content{
    display    : inline;
    float      : left;
    padding    : 60px 0;
    text-align : center;
    width      : 100%;
}

.call-to-content h2{
    color     : #FFF7F7;
    font-size : 45px;
}

.call-to-content a{
    display    : inline-block;
    float      : none;
    margin-top : 29px;
}

/*--------------------*/
/* TEAM */
/*--------------------*/

#team{
    display : inline;
    padding : 70px 0px;
    float   : left;
    width   : 100%;
}

.team-area{
    display        : inline;
    float          : left;
    padding-bottom : 56px;
    width          : 100%;
}

.team-content{
    display    : inline;
    float      : left;
    margin-top : 18px;
    width      : 100%;
}

.team-grid{
    margin     : 20px 0 0 0;
    padding    : 0;
    list-style : none;
    display    : block;
    text-align : center;
    width      : 100%;
}

.team-grid li{
    display : inline-block;
    height  : 230px;
    margin  : 20px 25px;
    width   : 20%;
}

.team-item{
    width              : 100%;
    height             : 100%;
    border-radius      : 50%;
    position           : relative;
    cursor             : default;
    box-shadow         : inset 0 0 0 16px rgba(255, 255, 255, 0.6),
    0 1px 2px rgba(0, 0, 0, 0.1);

    -webkit-transition : all 0.4s ease-in-out;
    -moz-transition    : all 0.4s ease-in-out;
    -o-transition      : all 0.4s ease-in-out;
    -ms-transition     : all 0.4s ease-in-out;
    transition         : all 0.4s ease-in-out;
}

.team-img-1{
    background-image : url(assets/images/team-member1.png);
}

.team-img-2{
    background-image : url(assets/images/team-member2.png);
}

.team-img-3{
    background-image : url(assets/images/team-member3.png);
}

.team-img-4{
    background-image : url(assets/images/team-member4.png);
}

.team-info{
    position                    : absolute;
    width                       : inherit;
    height                      : inherit;
    padding                     : 50px 0;
    border-radius               : 50%;
    opacity                     : 0;

    -webkit-transition          : all 0.4s ease-in-out;
    -moz-transition             : all 0.4s ease-in-out;
    -o-transition               : all 0.4s ease-in-out;
    -ms-transition              : all 0.4s ease-in-out;
    transition                  : all 0.4s ease-in-out;

    -webkit-transform           : scale(0);
    -moz-transform              : scale(0);
    -o-transform                : scale(0);
    -ms-transform               : scale(0);
    transform                   : scale(0);

    -webkit-backface-visibility : hidden;
}

.team-info p{
    color              : #FFF;
    padding            : 10px 5px;
    font-style         : italic;
    margin             : 0 30px;
    font-size          : 14px;
    opacity            : 0;
    -webkit-transition : all 1s ease-in-out 0.4s;
    -moz-transition    : all 1s ease-in-out 0.4s;
    -o-transition      : all 1s ease-in-out 0.4s;
    -ms-transition     : all 1s ease-in-out 0.4s;
    transition         : all 1s ease-in-out 0.4s;
}

.team-info a{
    border        : 1px solid #FFFEFE;
    border-radius : 50%;
    color         : #FFFEFE;
    display       : inline-block;
    font-size     : 16px;
    opacity       : 0.8;
    height        : 27px;
    margin        : 0 5px;
    text-align    : center;
    width         : 27px;
}

.team-info a:hover{
    opacity : 1;
}

.team-grid li:hover .team-info{
    -webkit-transform : scale(1);
    -moz-transform    : scale(1);
    -o-transform      : scale(1);
    -ms-transform     : scale(1);
    transform         : scale(1);
    opacity           : 1;
}

.team-grid li:hover .team-info p{
    opacity : 1;
}

.team-address{
    display    : inline;
    float      : left;
    margin-top : 26px;
    text-align : center;
    width      : 100%;
}

.team-address p{
    color              : #525252;
    margin-bottom      : 0px;
    font-size          : 22px;
    font-weight        : 600;
    text-transform     : uppercase;
    font-family        : "Raleway", sans-serif;
    -webkit-transition : all 0.5s;
    -moz-transition    : all 0.5s;
    -ms-transition     : all 0.5s;
    -o-transition      : all 0.5s;
    transition         : all 0.5s;
}

.team-address span{
    color       : #777;
    font-size   : 17px;
    font-style  : italic;
    font-family : "Raleway", sans-serif;
}

/*--------------------*/
/* SERVICE */
/*--------------------*/

#service{
    background-color : #F6F6F6;
    float            : left;
    display          : inline;
    padding          : 70px 0;
    width            : 100%;
}

.service_area{
    display : inline;
    float   : left;
    width   : 100%;
}

.service-content{
    display    : inline;
    margin-top : 45px;
    float      : left;
    width      : 100%;
}

.service-table{
    display    : inline-block;
    width      : 100%;
    text-align : center;
}

.single-service{
    display              : inline;
    float                : left;
    margin-bottom        : 15px;
    padding              : 45px 20px;
    position             : relative;
    text-align           : left;
    width                : 100%;
    -w-webkit-transition : all 0.5s;
    -moz-transition      : all 0.5s;
    -ms-transition       : all 0.5s;
    -o-transition        : all 0.5s;
    transition           : all 0.5s;
}

.single-service:after{
    content            : '';
    position           : absolute;
    left               : 0;
    opacity            : 0;
    bottom             : 0;
    height             : 24px;
    width              : 100%;
    -webkit-transition : all 0.5s;
    -moz-transition    : all 0.5s;
    -ms-transition     : all 0.5s;
    -o-transition      : all 0.5s;
    transition         : all 0.5s;
}

.single-service:hover:after{
    opacity : 1;
}

.single-service:hover{
    background-color : #FFF;
}

.single-service .service-icon{
    color         : #BDBDBD;
    font-size     : 55px;
    margin-bottom : 10px;
}

.single-service .service-title{
    color         : #343333;
    font-size     : 25px;
    font-weight   : 600;
    margin-bottom : 30px;
}

.single-service p{
    color : #878787;
}

/*--------------------*/
/* PORTFOLIO */
/*--------------------*/

#portfolio{
    display : inline;
    float   : left;
    padding : 0 0 70px;
    width   : 100%;
}

.portfolio-area{
    display : inline;
    float   : left;
    width   : 100%;
}

.portfolio-content{
    display    : inline;
    float      : left;
    margin-top : 50px;
    width      : 100%;
}

.portfolio-menu{
    display : inline;
    float   : left;
    width   : 100%;
}

.portfolio-menu ul{
    display    : inline-block;
    width      : 100%;
    text-align : center;
}

.portfolio-menu ul li{
    border-bottom      : 1px solid #FFF;
    border-top         : 1px solid #FFF;
    cursor             : pointer;
    display            : inline-block;
    font-family        : "Raleway", sans-serif;
    font-size          : 14px;
    font-weight        : bold;
    margin             : 0 13px;
    padding            : 6px;
    text-transform     : uppercase;
    -webkit-transition : all 0.5s ease 0s;
    -o-transition      : all 0.5s ease 0s;
    transition         : all 0.5s ease 0s;
}

.portfolio-container{
    display     : inline;
    float       : left;
    margin-left : -9px;
    margin-top  : 60px;
    width       : 100%;
}

.single-portfolio{
    display       : inline;
    float         : left;
    margin-bottom : 18px;
    margin-left   : 18px;
    width         : 23.4%;
}

.single-item{
    width    : 100%;
    position : relative;
    overflow : hidden;
}

.single-item > img{
    width              : 100%;
    display            : block;
    -webkit-transition : all 0.5s ease 0s;
    -o-transition      : all 0.5s ease 0s;
    transition         : all 0.5s ease 0s;
}

.single-item > img:hover{
    -webkit-transform : scale(1);
    -ms-transform     : scale(1);
    transform         : scale(1);
}

#mixit-container .mix{
    display : none;
}

.single-item-content{
    background-color   : #000;
    display            : inline;
    opacity            : 0;
    height             : 100%;
    left               : 0;
    position           : absolute;
    text-align         : center;
    top                : 0;
    width              : 100%;
    -webkit-transition : background-color 0.5s linear;
    -moz-transition    : background-color 0.5s linear;
    -o-transition      : background-color 0.5s linear;
    -ms-transition     : background-color 0.5s linear;
    transition         : background-color 0.5s linear;
}

.portfolio-social-icon{
    float              : left;
    display            : inline;
    padding            : 110px 50px;
    width              : 100%;
    -webkit-transition : all 0.5s;
    -moz-transition    : all 0.5s;
    -ms-transition     : all 0.5s;
    -o-transition      : all 0.5s;
    transition         : all 0.5s;
}

.single-item:hover .single-item-content{
    opacity : 1;
}

.single-item-content:hover{
    background-color : rgba(0, 0, 0, 0.8);
}

.portfolio-social-icon a{
    color              : #FFF;
    display            : inline-block;
    font-size          : 14px;
    height             : 40px;
    line-height        : 15px;
    margin             : 0 8px;
    padding            : 12px;
    text-align         : center;
    width              : 40px;
    transform          : scale(0.5);
    -webkit-transition : all 0.7s ease 0s;
    -o-transition      : all 0.7s ease 0s;
    transition         : all 0.7s ease 0s;
}

.single-item-content:hover .fancybox,
.single-item-content:hover .link-btn{
    transform : scale(0.9);
}

.portfolio-title{
    bottom             : 0;
    display            : inline;
    opacity            : 0;
    left               : 0;
    padding-bottom     : 12px;
    position           : absolute;
    text-align         : center;
    width              : 100%;
    -webkit-transition : all 0.7s ease 0s;
    -o-transition      : all 0.7s ease 0s;
    transition         : all 0.7s ease 0s;
}

.single-item:hover .portfolio-title{
    opacity : 1;
}

.portfolio-title h4{
    color          : #FFF7F7;
    font-size      : 16px;
    font-weight    : bold;
    margin-bottom  : 0;
    text-transform : uppercase;
}

.portfolio-title span{
    color       : #FFF7F7;
    font-size   : 12px;
    font-family : "Raleway", sans-serif;
}

/*--------------------*/
/* COUNTER */
/*--------------------*/

#counter{
    display  : inline;
    float    : left;
    position : relative;
    width    : 100%;
}

.counter-overlay{
    background-color : rgba(0, 0, 0, 0.8);
    height           : 100%;
    left             : 0;
    position         : absolute;
    top              : 0;
    width            : 100%;
}

.counter-area{
    display : inline;
    float   : left;
    padding : 112px 0;
    width   : 100%;
}

.single-counter{
    display : inline;
    float   : left;
    padding : 0 10px;
    width   : 100%;
}

.single-counter > span{
    display    : block;
    float      : left;
    font-size  : 60px;
    text-align : center;
    width      : 60px;
}

.single-counter .counter-count{
    float       : left;
    margin-left : 20px;
}

.single-counter .counter-count > span{
    color         : #FFF;
    display       : block;
    font-size     : 50px;
    font-weight   : bold;
    margin-bottom : -7px;
    margin-top    : -16px;
}

.single-counter .counter-count > p{
    color       : #FFF;
    font-size   : 18px;
    font-weight : 600;
    margin-left : 5px;
}

/*--------------------*/
/* PRICING TABLE */
/*--------------------*/

#pricing-table{
    display : inline;
    float   : left;
    padding : 70px 0;
    width   : 100%;
}

.pricing-table-area{
    display : inline;
    float   : left;
    width   : 100%;
}

.pricing-table-content{
    display    : inline;
    float      : left;
    margin-top : 60px;
    width      : 100%;
}

.price-table{
    display    : inline-block;
    text-align : center;
    width      : 100%;
}

.price-table li{
    border-bottom  : 1px solid #E4E4E4;
    border-left    : 1px solid #E4E4E4;
    border-top     : 1px solid #E4E4E4;
    display        : inline-block;
    float          : left;
    padding-bottom : 12px;
    width          : 25%;
}

.price-table li:last-child{
    border-right : 1px solid #E4E4E4;
}

.single-price{
    display : inline;
    float   : left;
    width   : 100%;
}

.single-price .price-header{
    color      : #FFF;
    font-size  : 28px;
    margin     : 0;
    padding    : 20px 0;
    position   : relative;
    text-align : center;
}

.single-price .price-header::after{
    bottom      : -30%;
    content     : "";
    font-family : fontAwesome;
    font-size   : 32px;
    left        : 46.5%;
    position    : absolute;
}

.standard-price .price-header::after{
    bottom : -22%;
}

.single-price .price-amount{
    display     : block;
    font-size   : 32px;
    font-weight : 600;
    padding     : 10px 0;
    text-align  : center;
}

.standard-price{
    margin-top : -20px;
}

.standard-price .price-header{
    padding : 30px 0px;
}

.single-price p{
    color         : #5D5D5D;
    font-size     : 18px;
    border-bottom : 1px solid #E4E4E4;
    padding       : 20px 0;
    margin-bottom : 0px;
}

.single-price p:last-of-type{
    border : none;
}

.single-price a{
    -moz-border-bottom-colors : none !important;
    -moz-border-left-colors   : none !important;
    -moz-border-right-colors  : none !important;
    -moz-border-top-colors    : none !important;
    border-image              : none !important;
    border-left               : medium none !important;
    border-right              : medium none !important;
    border-top                : medium none !important;
    display                   : inline-block;
    float                     : none;
    margin-top                : 23px;
}

.single-price a span{
    border  : medium none;
    display : inline-block;
    padding : 12px 65px;
}

.standard-price a{
    color : #FFF !important;
}

/*--------------------*/
/* TESTIMONIAL */
/*--------------------*/

#testimonial{
    display: inline;
    float: left;
    position: relative;
    width: 100%;
    height: 540px;
    background-image: url(assets/images/testimonial-bg.jpg);
    background-size: cover;
}
@media (min-width: 768px){
    #testimonial{
        height: 400px;
    }
}

.testimonial-area{
    display : inline;
    float   : left;
    padding : 70px 0;
    width   : 100%;
}

.testimonial-area .tittle{
    color : #FFF;
}

.testimonial-area .tittle-line{
    background-color : #FFF;
}

.testimonial-conten{
    display    : inline;
    float      : left;
    margin-top : 11px;
    width      : 100%;
}

.testimonial-slider{
    display  : inline;
    float    : left;
    position : absolute;
    width    : 100%;
}

.single-slide{
    display    : inline;
    float      : left;
    padding    : 0 124px;
    text-align : center;
    width      : 100%;
}

.single-slide > p{
    color       : #FFF;
    font-family : "Raleway", sans-serif;
    font-size   : 18px;
    line-height : 35px;
    margin-top  : 55px;
    position    : relative;
}

.single-slide > p::after{
    color       : #FFF;
    content     : "";
    font-family : fontAwesome;
    font-size   : 50px;
    left        : -44px;
    position    : absolute;
    top         : -29px;
}

.single-testimonial{
    display : inline;
    float   : left;
    width   : 100%;
}

.testimonial-thumb{
    border-radius : 50%;
    height        : 107px;
    margin        : 35px auto 0;
    width         : 107px;
}

.single-testimonial p{
    color         : #FFF;
    font-size     : 20px;
    font-weight   : bold;
    margin-bottom : 0px;
}

.single-testimonial span{
    color     : #FFF;
    display   : inline-block;
    font-size : 16px;
}

.testimonial-slider .slick-prev::before{
    border        : 1px solid #FFF;
    border-radius : 50%;
    color         : #FFF;
    content       : "" !important;
    display       : inline-block;
    font-family   : fontAwesome;
    font-size     : 35px;
    height        : 35px;
    line-height   : 31px;
    padding       : 0 10px;
    text-align    : center;
    width         : 35px;
}

.testimonial-slider .slick-next:before{
    color         : #FFF;
    content       : '\f105' !important;
    border        : 1px solid #FFF;
    border-radius : 50%;
    display       : inline-block;
    font-family   : fontAwesome;
    font-size     : 35px;
    height        : 35px;
    line-height   : 31px;
    padding       : 0 10px;
    text-align    : center;
    width         : 35px;
}

.testimonial-slider .slick-prev{
    left    : 0;
    z-index : 9999;
    top     : 35%;
}

.testimonial-slider .slick-next{
    right   : 40px;
    z-index : 9999;
    top     : 35%;
}

/*--------------------*/
/* FORM BLOG */
/*--------------------*/

#from-blog{
    background-color : #F6F6F6;
    display          : inline;
    padding          : 70px 0;
    float            : left;
    width            : 100%;
}

.from-blog-area{
    display : inline;
    float   : left;
    width   : 100%;
}

.from-blog-content{
    display    : inline;
    float      : left;
    margin-top : 60px;
    width      : 100%;
}

.single-from-blog{
    background-color : #FFF;
    display          : inline;
    float            : left;
    width            : 100%;
}

.single-from-blog figure{
    display : inline;
    float   : left;
    width   : 100%;
}

.single-from-blog figure img{
    width : 100%;
}

.single-from-blog .blog-title{
    display : inline;
    float   : left;
    padding : 20px;
    width   : 100%;
}

.single-from-blog .blog-title h2{
    color              : #3E3E3E;
    font-size          : 28px;
    padding-bottom     : 0;
    -webkit-transition : all 0.5s;
    -moz-transition    : all 0.5s;
    -ms-transition     : all 0.5s;
    -o-transition      : all 0.5s;
    transition         : all 0.5s;
}

.single-from-blog .blog-title h2 a{
    -webkit-transition : all 0.5s;
    -moz-transition    : all 0.5s;
    -ms-transition     : all 0.5s;
    -o-transition      : all 0.5s;
    transition         : all 0.5s;
}

.single-from-blog .blog-title h2 a:hover,
.single-from-blog .blog-title h2 a:focus{
    text-decoration : none;
    outline         : none;
}

.single-from-blog .blog-title p{
    color      : #7C7C7C;
    font-size  : 13px;
    font-style : italic;
}

.single-from-blog > p{
    color   : #757575;
    padding : 20px 20px 10px;
}

.single-from-blog .blog-footer{
    display : inline;
    float   : left;
    padding : 0 20px 20px;
    width   : 100%;
}

.single-from-blog .blog-footer a{
    color              : #818181;
    font-size          : 14px;
    margin-right       : 35px;
    -webkit-transition : all 0.5s;
    -moz-transition    : all 0.5s;
    -ms-transition     : all 0.5s;
    -o-transition      : all 0.5s;
    transition         : all 0.5s;
}

.single-from-blog .blog-footer a:hover,
.single-from-blog .blog-footer a:focus{
    text-decoration : none;
    outline         : none;
}

.single-from-blog .blog-footer a span{
    border        : 1px solid;
    border-radius : 50%;
    display       : inline-block;
    line-height   : 14px;
    margin-right  : 3px;
    padding       : 4px 5px;
}

/*--------------------*/
/* CLIENT */
/*--------------------*/

#client{
    background-color : #FFF;
    display          : inline;
    float            : left;
    padding          : 70px 0 55px;
    width            : 100%;
}

.client-area{
    display    : inline;
    float      : left;
    width      : 100%;
    text-align : center;
}

.client-table{
    display       : inline-block;
    margin-bottom : 0;
    text-align    : left;
    width         : 100%;
}

.client-table li{
    display      : inline-block;
    margin-right : 80px;
}

.client-table li:last-child{
    margin-right : 0px;
}

/*--------------------*/
/* CONTACT */
/*--------------------*/

#contact{
    background-image    : url("assets/images/contact-bg.jpg");
    background-position : center center;
    background-repeat   : no-repeat;
    background-size     : cover;
    display             : inline;
    float               : left;
    padding             : 70px 0;
    width               : 100%;
}

.contact-left{
    background-color : rgba(104, 102, 96, 0.5);
    display          : inline;
    float            : left;
    padding          : 30px 40px 10px;
    width            : 100%;
}

.contact-left h2{
    color         : #FAFAFA;
    font-size     : 35px;
    margin-bottom : 35px;
    padding-right : 40px 
}

.single-address{
    display       : inline;
    float         : left;
    margin-bottom : 15px;
    padding-right : 50px;
    width         : 100%;
}

.single-address h4{
    color         : #FAFAFA;
    font-size     : 22px;
    font-weight   : bold;
    margin-bottom : 17px;
}

.single-address p{
    color         : #FAFAFA;
    font-size     : 14px;
    margin-bottom : 5px;
}

.contact-right{
    background-color : rgba(104, 102, 96, 0.5);
    display          : inline;
    float            : left;
    padding          : 30px 40px;
    width            : 100%;
}

.contact-right h2{
    color         : #FAFAFA;
    font-size     : 35px;
    margin-bottom : 48px;
}

.contact-form .form-group input{
    background    : transparent;
    color         : #E1E1E1;
    font-size     : 20px;
    border        : 1px solid #FFF;
    border-radius : 0;
    height        : 45px;
    margin-bottom : 24px;
}

.contact-form .form-group textarea{
    color         : #E1E1E1;
    background    : transparent;
    border        : 1px solid #FFF;
    border-radius : 0;
    height        : 190px;
}

.contact-form .form-control:focus{
    outline    : 0;
    box-shadow : none;
}

.contact-form .form-control::-webkit-input-placeholder{
    color     : #E2E2E2;
    font-size : 20px;
}

.contact-form .form-control:-moz-placeholder{ /* Firefox 18- */
    color     : #E2E2E2;
    font-size : 20px;
}

.contact-form .form-control::-moz-placeholder{ /* Firefox 19+ */
    color     : #E2E2E2;
    font-size : 20px;
}

.contact-form .form-control:-ms-input-placeholder{
    color     : #E2E2E2;
    font-size : 20px;
}

.contact-form button{
    float         : right;
    margin-right  : 0;
    border-radius : 0px;
}

.contact-form.button-default::after,
.contact-form .button-default > span{
    padding : 12px 40px;
}

#google-map{
    display : inline;
    float   : left;
    width   : 100%;
}

/*--------------------*/
/* FOOTER */
/*--------------------*/

#footer{
    background-color : #242424;
    display          : inline;
    float            : left;
    margin-top       : -6px;
    width            : 100%;
}

.footer-top{
    display : inline;
    float   : left;
    width   : 100%;
}

.footer-top-area{
    display    : inline;
    float      : left;
    text-align : center;
    width      : 100%;
}

.footer-logo{
    display : inline-block;
}

.footer-social{
    display : inline;
    float   : left;
    margin  : 40px 0px;
    width   : 100%;
}

.footer-social a{
    border             : 1px solid #505050;
    border-radius      : 50%;
    color              : #B8B8B8;
    display            : inline-block;
    font-size          : 18px;
    height             : 48px;
    line-height        : 48px;
    margin             : 0 9px;
    text-align         : center;
    width              : 48px;
    -webkit-transition : all 0.5s;
    -moz-transition    : all 0.5s;
    -ms-transition     : all 0.5s;
    -o-transition      : all 0.5s;
    transition         : all 0.5s;
}

.footer-social a.facebook:hover{
    background-color : #3B5998;
    border-color     : #3B5998;
    color            : #FFF;
}

.footer-social a.twitter:hover{
    color            : #FFF;
    background-color : #00ACED;
    border-color     : #00ACED;
}

.footer-social a.google-plus:hover{
    color            : #FFF;
    background-color : #DD4B39;
    border-color     : #DD4B39;
}

.footer-social a.youtube:hover{
    color            : #FFF;
    background-color : #B00;
    border-color     : #B00;
}

.footer-social a.linkedin:hover{
    color            : #FFF;
    background-color : #007BB5;
    border-color     : #007BB5;
}

.footer-social a.dribbble:hover{
    color            : #FFF;
    background-color : #EA4C89;
    border-color     : #EA4C89;
}

.footer-social a.instagram:hover{
    color            : #FFF;
    background-color : #fdb954;
    border-color     : #fdb954;
}
.footer-bottom{
    display    : inline;
    border-top : 1px solid #434343;
    float      : left;
    padding    : 40px 0;
    width      : 100%;
    text-align : center;
}

.footer-bottom p{
    color         : #FFF;
    font-size     : 18px;
    margin-bottom : 0px;
}

/*--------------------*/
/* BLOG PAGE */
/*--------------------*/

#blog-banner{
    display  : inline;
    float    : left;
    position : relative;
    width    : 100%;
}

.blog-overlay{
    background-color : rgba(0, 0, 0, 0.8);
    height           : 100%;
    left             : 0;
    position         : absolute;
    top              : 0;
    width            : 100%;
}

.blog-banner-area{
    display : inline;
    float   : left;
    padding : 85px 0;
    width   : 100%;
}

.blog-banner-area h2{
    color          : #FFF;
    font-size      : 40px;
    padding-bottom : 5px;
}

.blog-banner-area .breadcrumb{
    background-color : transparent;
    border-radius    : 0;
    padding-left     : 0;
}

.blog-banner-area .breadcrumb li{
    font-family : "Raleway", sans-serif;
}

.blog-banner-area .breadcrumb li a{
    color           : #FFF;
    font-size       : 18px;
    font-family     : "Raleway", sans-serif;
    text-decoration : none;
}

.blog-banner-area .breadcrumb > li + li::before{
    color   : #CCC;
    content : "/ ";
    padding : 0 0px;
}

#blog{
    background-color : #F8F8F8;
    display          : inline;
    float            : left;
    padding          : 70px 0;
    width            : 100%;
}

.blog-area{
    display : inline;
    float   : left;
    width   : 100%;
}

.blog-archive .single-from-blog{
    margin-bottom : 35px;
}

.blog-archive .single-from-blog figure img{
    height : 400px;
}

.blog-left{
    display : inline;
    float   : left;
    width   : 100%;
}

.blog-pagination{

}

.blog-pagination > li > a,
.blog-pagination > li > span{
    padding            : 8px 18px;
    -webkit-transition : all 0.5s;
    -o-transition      : all 0.5s;
    transition         : all 0.5s;
}

.blog-pagination > li > a:hover,
.blog-pagination > li > span:hover,
.blog-pagination > li > a:focus,
.blog-pagination > li > span:focus{
    color : #FFF;
}

.blog-pagination > li:first-child > a,
.blog-pagination > li:first-child > span{
    border-bottom-left-radius : 0px;
    border-top-left-radius    : 0px;
    margin-left               : 0;
}

.blog-pagination > li:last-child > a,
.blog-pagination > li:last-child > span{
    border-bottom-right-radius : 0px;
    border-top-right-radius    : 0px;
}

.blog-right{
    display : inline;
    float   : left;
    width   : 100%;
}

.single-widget{
    background-color : #FFF;
    border           : 1px solid #F0F0F0;
    display          : inline;
    margin-bottom    : 30px;
    float            : left;
    padding          : 20px 30px;
    width            : 100%;
}

.single-widget h2{
    color          : #444;
    font-size      : 25px;
    line-height    : 25px;
    margin-bottom  : 15px;
    margin-left    : -31px;
    padding-bottom : 0;
    padding-left   : 29px;
    padding-top    : 0;
}

.blog-search{
    display : inline;
    float   : left;
    width   : 100%;
}

.blog-search input[type="text"]{
    background-color : #F5F5F5;
    border           : 1px solid #9D9D9D;
    color            : #444;
    height           : 43px;
    padding          : 5px;
    width            : 100%;
}

.blog-search .button-default{
    margin-bottom : 10px;
    margin-left   : 0;
    margin-top    : 23px;
}

.blog-search .button-default::after,
.blog-search .button-default > span{
    padding : 10px 30px;
}

.follow-us{
    border-top     : 1px solid #D4D4D4;
    display        : inline;
    float          : left;
    padding-bottom : 10px;
    padding-top    : 24px;
    text-align     : center;
    width          : 100%;
}

.follow-us a{
    border        : 1px none transparent;
    border-radius : 50%;
    color         : #FFF;
    display       : inline-block;
    font-size     : 16px;
    height        : 35px;
    line-height   : 35px;
    margin        : 0 5px;
    text-align    : center;
    width         : 35px;
}

.follow-us a.facebook{
    background-color : #3B5998;
    border-color     : #3B5998;
}

.follow-us a.twitter{
    background-color : #00ACED;
    border-color     : #00ACED;
}

.follow-us a.google-plus{
    background-color : #DD4B39;
    border-color     : #DD4B39;
}

.follow-us a.youtube{
    background-color : #B00;
    border-color     : #B00;
}

.follow-us a.linkedin{
    background-color : #007BB5;
    border-color     : #007BB5;
}

.follow-us a.dribbble{
    background-color : #EA4C89;
    border-color     : #EA4C89;
}

.popular-post-widget{
    border-top     : 1px solid #D4D4D4;
    display        : inline;
    float          : left;
    padding-bottom : 15px;
    padding-top    : 24px;
    text-align     : left;
    width          : 100%;
}

.popular-post-widget .media-left{
    float        : left;
    height       : 100px;
    margin-right : 20px;
    width        : 100px;
}

.popular-post-widget .media-heading{
    color     : #505050;
    font-size : 18px;
}

.popular-post-widget .media-heading a{
    -webkit-transition : all 0.5s;
    -moz-transition    : all 0.5s;
    -ms-transition     : all 0.5s;
    -o-transition      : all 0.5s;
    transition         : all 0.5s;
}

.popular-post-widget .media-heading a:hover,
.popular-post-widget .media-heading a:focus{
    text-decoration : none;
    outline         : none;
}

.popular-post-widget .media-body p{
    color     : #7C7C7C;
    font-size : 13px;
}

.instagram-feed{
    border-top     : 1px solid #D4D4D4;
    display        : inline;
    float          : left;
    padding-bottom : 25px;
    padding-top    : 24px;
    text-align     : left;
    width          : 100%;
}

.single-instagram-feed{
    display : inline;
    float   : left;
    width   : 100%;
}

.single-instagram-feed img{
    width : 100%;
}

.instagram-feed .slick-prev,
.instagram-feed .slick-next{
    font-size   : 0;
    height      : 20px;
    line-height : 0;
    margin-top  : -10px;
    padding     : 0;
    position    : absolute;
    top         : 100%;
    width       : 20px;
    z-index     : 999;
}

.instagram-feed .slick-prev{
    left : 28%;
}

.instagram-feed .slick-next{
    right : 29%;
}

.instagram-feed .slick-prev::before,
.instagram-feed .slick-next::before{
    font-family : "fontAwesome";
    font-size   : 28px;
    line-height : 1;
    opacity     : 0.75;
}

.instagram-feed .slick-prev::before{
    content : '\f104';
}

.instagram-feed .slick-next::before{
    content : '\f105';
}

.instagram-feed .slick-dots{
    bottom : -22px;
}

.instagram-feed .slick-dots li button{
    background    : #EEE none repeat scroll 0 0;
    border        : 0 none;
    border-radius : 50%;
    color         : #EEE;
    cursor        : pointer;
    display       : block;
    font-size     : 0;
    height        : 15px;
    line-height   : 0;
    outline       : medium none;
    padding       : 5px;
    width         : 15px;
}

.instagram-feed li button::before{
    color : #EEE;
}

.blog-details{
    background-color : #FFF;
}

.blog-details-content{
    display : inline;
    float   : left;
    padding : 40px;
    width   : 100%;
}

.blog-details-content blockquote{
    color         : #1F1F1F;
    font-size     : 22px;
    margin-bottom : 40px;
    margin-top    : 40px;
}

.blog-details-content > span{
    color       : #464646;
    font-size   : 20px;
    font-weight : bold;
}

.blog-details-content > a{
    color              : #464646;
    font-size          : 18px;
    margin-right       : 4px;
    -webkit-transition : all 0.5s;
    -moz-transition    : all 0.5s;
    -ms-transition     : all 0.5s;
    -o-transition      : all 0.5s;
    transition         : all 0.5s;
}

.blog-details-content h1,
.blog-details-content h2,
.blog-details-content h3,
.blog-details-content h4,
.blog-details-content h5,
.blog-details-content h6{
    color : #464646;
}

.blog-details-content h3{
    margin-top : 10px;
}

.blog-comment{
    display : inline;
    float   : left;
    padding : 0 40px 50px;
    width   : 100%;
}

.blog-comment h2{
    color         : #464646;
    font-family   : "Open Sans", sans-serif;
    font-size     : 25px;
    margin-bottom : 15px;
}

.comment-form .form-group input{
    background-color : #F8F8F8;
    border           : 1px solid #AEAEAE;
    border-radius    : 0;
    color            : #858585;
    font-size        : 18px;
    height           : 40px;
    margin-bottom    : 20px;
}

.comment-form .form-group textarea{
    color            : #858585;
    background-color : #F8F8F8;
    border           : 1px solid #AEAEAE;
    border-radius    : 0;
    font-size        : 18px;
    height           : 190px;
    width            : 80%;
}

.comment-form .form-control:focus{
    outline    : 0;
    box-shadow : none;
}

.comment-form .form-control::-webkit-input-placeholder{
    color     : #858585;
    font-size : 18px;
}

.comment-form .form-control:-moz-placeholder{ /* Firefox 18- */
    color     : #858585;
    font-size : 18px;
}

.comment-form .form-control::-moz-placeholder{ /* Firefox 19+ */
    color     : #858585;
    font-size : 18px;
}

.comment-form .form-control:-ms-input-placeholder{
    color     : #858585;
    font-size : 18px;
}

.comment-form button{
    border-radius : 0;
    float         : left;
    margin-left   : 0;
    margin-right  : 0;
}

.comment-form.button-default::after,
.comment-form .button-default > span{
    padding : 12px 40px;
}

/*--------------------*/
/* ERROR PAGE */
/*--------------------*/

#error-page{
    background-color : #CEFFFE;
    display          : inline;
    float            : left;
    padding          : 150px 0;
    width            : 100%;
}

.error-page-area{
    display : block;
    margin  : 0 auto;
    width   : 670px;
}

.error-no-area{
    background-color : #FFF;
    display          : inline;
    float            : left;
    padding          : 20px;
    width            : 100%;
}

.error-no{
    display    : inline;
    float      : left;
    padding    : 50px;
    text-align : center;
    width      : 100%;
}

.error-no h2{
    color          : #727272;
    font-family    : "Open Sans", sans-serif;
    font-size      : 60px;
    font-weight    : bold;
    text-transform : uppercase;
}

.error-no p{
    font-family       : "Pacifico", cursive;
    font-size         : 80px;
    margin-bottom     : 0;
    -webkit-transform : rotate(-20deg);
    -ms-transform     : rotate(-20deg);
    transform         : rotate(-20deg);
}

.error-message{
    display    : inline;
    float      : left;
    margin-top : 70px;
    text-align : center;
    width      : 100%;
}

.error-message h4{
    color         : #4B8181;
    font-family   : "Pacifico", cursive;
    font-size     : 65px;
    line-height   : 65px;
    margin-bottom : 50px;
}

.error-message p{
    color     : #4B8181;
    font-size : 30px;
    padding   : 0 138px;
}

.error-message p a{
    color : #4B8181;
}

/*======================///////////////
			start responsive style
=====================///////////////////////*/

@media (max-width : 1199px ){
    .header-content{
        padding : 70px;
    }

    .header-content h2{
        font-size   : 60px;
        line-height : 58px;
    }

    .knowmore-btn{
        font-size : 18px;
        padding   : 20px 25px;
    }

    .download-btn{
        font-size : 18px;
        padding   : 20px 25px;
    }

    .header-btn-area{
        margin-top : 65px;
    }

    .logo{
        margin-right : 0;
    }

    #navbar{
        width : 87%;
    }

    .main-nav li a{
        padding : 39px 16px;
    }

    .search-area input[type="text"]:focus{
        width : 820px;
    }

    .team-grid li{
        height : 198px;
        margin : 20px;
        width  : 20%;
    }

    .team-img-1,
    .team-img-2,
    .team-img-3,
    .team-img-4{
        background-position : center center;
    }

    .team-info{
        padding : 12px 0px;
    }

    .team-info p{
        margin  : 0 32px;
        padding : 10px 0px;
    }

    .team-info a{
        margin : 0 2px;
    }

    .single-service{
        padding : 45px 15px;
    }

    .single-service .service-title{
        font-size : 20px;
    }

    .single-portfolio{
        width : 23%;
    }

    .single-counter > span{
        font-size : 50px;
        width     : 50px;
    }

    .single-counter .counter-count > span{
        font-size : 40px;
    }

    .single-counter .counter-count > p{
        font-size : 14px;
    }

    .single-from-blog .blog-title h2{
        font-size : 25px;
    }

    .single-from-blog .blog-footer a{
        margin-right : 18px;
    }

    .contact-left h2,
    .contact-right h2{
        font-size : 26px;
    }

    .single-address h4{
        font-size : 20px;
    }

    .counter-area{
        padding : 125px 0;
    }

    .blog-archive .single-from-blog figure img{
        height : 320px;
    }
}

@media (max-width : 991px ){
    .header-content{
        padding : 50px;
    }

    .header-content h2{
        font-size   : 50px;
        line-height : 50px;
    }

    .knowmore-btn{
        font-size : 16px;
        padding   : 18px 20px;
    }

    .download-btn{
        font-size : 16px;
        padding   : 18px 20px;
    }

    .header-btn-area{
        margin-top : 20px;
    }

    #navbar{
        width : 86%;
    }

    .search-area{
        width : 3%;
    }

    .main-nav li a{
        font-size : 14px;
        padding   : 39px 7px;
    }

    .less-padding{
        padding : 30px 7px !important;
    }

    .search-area input[type="text"]:focus{
        width : 630px;
    }

    .single-wc-content .wc-tittle{
        font-size : 15px;
    }

    .about-left{
        width  : 100%;
    }

    .about-left img{
        width : 100%;
    }

    .about-right .tittle{
        padding-bottom : 10px;
        font-size      : 28px;
    }

    .about-right .tittle-line{
        margin-bottom : 15px;
    }

    .about-right p{
        font-size     : 14px;
        margin-bottom : 6px;
    }

    .about-btn-area{
        margin-top : 0;
    }

    .call-to-content h2{
        font-size : 30px;
    }

    .team-grid li{
        height : 170px;
        margin : 20px 10px;
        width  : 21%;
    }

    .team-info p{
        font-size : 10px;
    }

    .team-info a{
        font-size : 15px;
        height    : 25px;
        width     : 25px;
    }

    .team-address p{
        font-size : 16px;
    }

    .team-address span{
        font-size : 14px;
    }

    .title-area{
        padding : 0 100px;
    }

    .single-portfolio{
        width : 22.5%;
    }

    .portfolio-social-icon{
        padding : 5px 50px;
    }

    .portfolio-title h4{
        font-size : 13px;
    }

    .counter-area{
        padding : 90px 0;
    }

    .single-counter{
        margin-bottom : 35px;
    }

    .single-price .price-amount{
        font-size : 25px;
    }

    .single-price p{
        font-size : 15px;
    }

    .single-price a span{
        padding : 12px 35px;
    }

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

    .blog-right{
        margin-top : 25px;
    }

    .instagram-feed .slick-prev{
        left : 40%;
    }

    .instagram-feed .slick-next{
        right : 41%;
    }

    .error-message h4{
        font-size   : 50px;
        line-height : 50px;
    }

    .error-message p{
        font-size : 25px;
        padding   : 0 50px;
    }
}

@media (max-width : 767px ){
    .header-content h2{
        font-size   : 35px;
        line-height : 35px;
    }

    .header-content h2 span{
        font-weight : normal;
        line-height : 55px;
    }

    .knowmore-btn{
        font-size : 15px;
        padding   : 15px 18px;
    }

    .download-btn{
        font-size : 15px;
        padding   : 15px 18px;
    }

    .main-nav li{
        display : block;
        float   : left;
        width   : 100%;
    }

    .main-nav li a{
        display : block;
        padding : 8px 7px;
    }

    .less-padding{
        padding : 8px 7px !important;
    }

    #navbar{
        margin-right : 0;
        width        : 104.5%;
    }

    .main-nav{
        background : #CCC none repeat scroll 0 0;
        display    : block;
        margin     : 0;
        text-align : center;
        width      : 100%;
    }

    .navbar-default .navbar-toggle{
        border-color  : #DDD;
        margin-right  : 78px;
        margin-top    : 32px;
        border-radius : 0;
    }

    .navbar-default .navbar-toggle:hover,
    .navbar-default .navbar-toggle:focus{
        background-color : #c41617;
        border-color     : #c41617;
        color            : #FFF;
    }

    .navbar-default .navbar-toggle:hover .icon-bar,
    .navbar-default .navbar-toggle:focus .icon-bar{
        background-color : #FFF;

    }

    .search-area{
        left  : -3px;
        top   : -100px;
        width : 3%;
    }

    .search-area input[type="text"]:focus{
        height : 36px;
        top    : 31px !important;
        width  : 550px;
    }

    .navbar-fixed-top .search-area{
        top : -77px;
    }

    .navbar-fixed-top .navbar-toggle{
        margin-top : 25px;
    }

    .navbar-fixed-top .search-area input[type="text"]:focus{
        top : 23px !important;
    }

    .wc-table li{
        margin-bottom : 20px;
        width         : 50%;
    }

    #about{
        padding : 0 0 50px;
    }

    .about-left{
        height: 250px;
        width : 96%;
    }

    .about-left img{
        height : 100%;
        width  : 100%;
    }

    .about-right{
        margin-top   : 35px;
        padding-left : 0;
    }

    .title-area{
        padding : 0 50px;
    }

    .call-to-content h2{
        font-size : 28px;
    }

    .team-grid li{
        height : 230px;
        margin : 20px 25px 70px;
        width  : 38%;
    }

    .team-img-1, .team-img-2, .team-img-3, .team-img-4{
        background-position : center center;
        background-size     : 100% auto;
    }

    .team-info{
        padding : 30px 18px;
    }

    .team-info p{
        font-size : 15px;
    }

    .single-portfolio{
        width : 30.3%;
    }

    .button-default::after, .button-default > span{
        padding   : 12px 8px;
        font-size : 12px;
    }

    .single-slide > p{
        font-size   : 15px;
        line-height : 28px;
        margin-top  : 37px;
    }

    .contact-left{
        margin-bottom : 30px;
    }

    #blog-banner{
        margin-top : -60px;
    }

    .instagram-feed .slick-prev{
        left : 39%;
    }

    .instagram-feed .slick-next{
        right : 40%;
    }

    #error-page{
        padding : 100px 0;
    }

    .error-page-area{
        width : 500px;
    }

    .error-message h4{
        font-size   : 35px;
        line-height : 35px;
    }

    .error-message p{
        font-size : 20px;
        padding   : 0 45px;
    }

}

@media (max-width : 480px ){
    .header-content{
        padding : 20px;
    }

    .header-content h2{
        font-size   : 25px;
        line-height : 25px;
    }

    .header-content h2 span{
        font-weight : normal;
        line-height : 43px;
    }

    .knowmore-btn{
        font-size : 14px;
        padding   : 10px 15px;
    }

    .download-btn{
        font-size : 14px;
        padding   : 10px 15px;
    }

    #navbar{
        width : 106%;
    }

    .title-area{
        padding : 0 15px;
    }

    .search-area input[type="text"]{
        font-size : 15px;
    }

    .search-area input[type="text"]:focus{
        height : 35px;
        top    : 32px !important;
        width  : 350px;
    }

    .call-to-content h2{
        font-size : 20px;
    }

    .team-grid{
        padding : 0 75px;
    }

    .team-grid li{
        height : 300px;
        margin : 20px 0 70px;
        width  : 100%;
    }

    .team-info{
        padding : 70px 18px;
    }

    .team-info p{
        font-size : 18px;
    }

    .single-portfolio{
        margin-left : 8px;
        width       : 100%;
    }

    #counter img{
        height : 354px;
        width  : 100%;
    }

    .counter-area{
        padding : 40px 0;
    }

    .single-counter > span{
        font-size  : 50px;
        text-align : center;
        width      : 100%;
    }

    .single-counter .counter-count{
        margin-left : 0;
        margin-top  : 20px;
        text-align  : center;
        width       : 100%;
    }

    .single-price .price-header{
        font-size : 20px;
        padding   : 10px 0;
    }

    .single-price .price-header::after{
        bottom : -43%;
    }

    .standard-price .price-header{
        padding : 20px 0;
    }

    .standard-price .price-header::after{
        bottom : -32%;
    }

    .single-price .price-amount{
        font-size : 16px;
    }

    .single-price p{
        font-size : 14px;
    }

    .single-price a span{
        padding : 12px 20px;
    }

    .button-default::after, .button-default > span{
        font-size : 10px;
    }

    .single-slide{
        padding : 0 100px;
    }

    .single-slide > p{
        font-size   : 14px;
        line-height : 26px;
        margin-top  : 20px;
    }

    .single-slide > p::after{
        font-size : 40px;
        top       : -10px;
    }

    .testimonial-thumb{
        margin : 20px auto 0;
    }

    .client-table{
        padding-left : 30px;
    }

    .instagram-feed .slick-prev{
        left : 34%;
    }

    .instagram-feed .slick-next{
        right : 35%;
    }

    #error-page{
        padding : 80px 0;
    }

    .error-page-area{
        width : 350px;
    }

    .error-no{
        padding : 20px;
    }

    .error-no h2{
        font-size : 45px;
    }

    .error-no p{
        font-size : 50px;
    }

    .error-message h4{
        font-size   : 35px;
        line-height : 35px;
    }

    .error-message p{
        font-size : 20px;
        padding   : 0 45px;
    }

}

@media (max-width : 360px ){
    .header-inner > img{
        height : 100%;
        width  : 100%;
    }

    .header-content{
        padding : 30px;
    }

    .header-content h2{
        font-size   : 20px;
        line-height : 18px;
    }

    .header-content h2 span{
        font-weight : normal;
        line-height : 35px;
    }

    .header-btn-area{
        margin-top : 00px;
    }

    .header-btn-area a{
        display : block;
        margin  : 10px 15px;
    }

    .knowmore-btn{
        font-size : 14px;
        padding   : 7px 8px;
    }

    .download-btn{
        font-size : 14px;
        padding   : 7px 8px;
    }

    #navbar{
        width : 108.3%;
    }

    .title-area{
        padding : 0 10px;
    }

    .tittle{
        font-size      : 20px;
        padding-bottom : 5px;
    }

    .title-area p{
        font-size : 14px;
    }

    .search-area input[type="text"]{
        font-size : 14px;
    }

    .search-area input[type="text"]:focus{
        height : 35px;
        top    : 32px !important;
        width  : 250px;
    }

    .wc-table li{
        margin-bottom : 20px;
        width         : 100%;
    }

    .about-right{
        margin-top : 45px;
    }

    .about-right .tittle{
        font-size      : 20px;
        padding-bottom : 5px;
    }

    .about-right .tittle-line{
        width : 60px;
    }

    .call-to-content h2{
        font-size : 20px;
    }

    .team-grid{
        padding : 0 55px;
    }

    .team-grid li{
        height : 220px;
    }

    .team-info{
        padding : 20px 10px;
    }

    .team-info p{
        font-size : 14px;
    }

    .portfolio-container{
        margin-left : 0;
    }

    .portfolio-menu ul li{
        font-size : 12px;
        margin    : 0 7px 5px;
        padding   : 8px;
    }

    .single-portfolio{
        width       : 100%;
        margin-left : 0px;
    }

    .portfolio-social-icon{
        padding : 105px 50px;
    }

    #counter img{
        height : 354px;
        width  : 100%;
    }

    .counter-area{
        padding : 40px 0;
    }

    .single-counter > span{
        font-size : 40px;
    }

    .single-counter .counter-count > span{
        font-size : 30px;
    }

    .single-counter .counter-count > p{
        font-size : 12px;
    }

    .price-table li{
        margin-bottom : 20px;
        width         : 100%;
        border        : 1px solid #E4E4E4;
    }

    .single-price a span{
        font-size : 14px;
    }

    .single-price .price-amount{
        font-size : 16px;
    }

    .single-price p{
        font-size : 14px;
    }

    .button-default::after, .button-default > span{
        font-size : 14px;
    }

    .standard-price{
        margin-top : 0;
    }

    .single-slide{
        padding : 0 50px;
    }

    .introduction-btn{
        font-size : 20px;
    }

    .header-content h2{
        margin-bottom : 10px;
    }

    .contact-left h2, .contact-right h2{
        font-size     : 20px;
        margin-bottom : 10px;
    }

    .single-address h4{
        font-size : 18px;
    }

    .single-address p{
        font-size : 13px;
    }

    .contact-right{
        padding : 30px 20px;
    }

    .contact-form .form-group input{
        font-size : 16px;
        height    : 40px;
    }

    .footer-social a{
        font-size   : 15px;
        height      : 40px;
        line-height : 40px;
        margin      : 0 5px;
        width       : 40px;
    }

    .blog-archive .single-from-blog figure img{
        height : 250px;
    }

    .instagram-feed .slick-prev{
        left : 26%;
    }

    .instagram-feed .slick-next{
        right : 27%;
    }

    .single-widget h2{
        font-size   : 20px;
        line-height : 20px;
    }

    .blog-pagination > li > a,
    .blog-pagination > li > span{
        padding : 6px 15px;
    }

    .follow-us a{
        font-size   : 15px;
        height      : 32px;
        line-height : 32px;
        margin      : 0 2px;
        width       : 32px;
    }

    .blog-details-content{
        padding : 25px;
    }

    .blog-comment{
        padding : 0 25px 40px;
    }

    .blog-details-content blockquote{
        font-size     : 18px;
        margin-bottom : 30px;
        margin-top    : 30px;
    }

    #error-page{
        padding : 60px 0;
    }

    .error-page-area{
        width : 250px;
    }

    .error-no{
        padding : 20px;
    }

    .error-no h2{
        font-size : 35px;
    }

    .error-no p{
        font-size : 40px;
    }

    .error-message h4{
        font-size   : 25px;
        line-height : 20px;
    }

    .error-message p{
        font-size : 16px;
        padding   : 0 15px;
    }

}

@media (max-width : 320px ){
    .search-area input[type="text"]:focus{
        width : 210px;
    }

    .search-area input[type="text"]{
        font-size : 12px;
    }

    #navbar{
        width : 109%;
    }

    .team-grid{
        padding : 0 35px;
    }

    .team-info{
        padding : 25px 10px;
    }

    .footer-social a{
        font-size   : 14px;
        height      : 35px;
        line-height : 35px;
        margin      : 0 2px;
        width       : 35px;
    }

    .footer-bottom p{
        font-size : 15px;
    }

    .blog-archive .single-from-blog figure img{
        height : 200px;
    }

    .instagram-feed .slick-prev{
        left : 23%;
    }

    .instagram-feed .slick-next{
        right : 24%;
    }

    .blog-pagination > li > a,
    .blog-pagination > li > span{
        padding : 4px 13px;
    }

    .follow-us a{
        font-size   : 14px;
        height      : 30px;
        line-height : 30px;
        margin      : 0 2px;
        width       : 30px;
    }

    .popular-post-widget .media-left{
        margin-right  : 0;
        text-align    : center;
        width         : 100%;
        margin-bottom : 15px;
    }

    .popular-post-widget .media-left a{
        display : inline-block;
    }

    .popular-post-widget .media-body{
        text-align : center;
    }

}