@import url(http://fonts.googleapis.com/css?family=Lato:400,700,900);
@import url(http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic);

/*
Template Name: Melon
Description: HTML3 / CSS3 Template
Version: 1.1
Author: Abo Elwafa


1. General
    1.1 Main Styles
    1.2 Anchor
2. Typography
    2.1 Headings & paragraph styles
    2.2 Selection Color
    2.3 Colors #39F rgba(225, 7, 7, 1)
3. Background Slider
    3.1 image
    3.2 Overlayer
    3.3 list
    3.4 Typography
    3.5 Captions
    3.6 Anchor
    3.7 Direction Nav
4. Menu
    4.1 Main Menu
        4.1.1 Wrapper
        4.1.2 list
        4.1.3 items
        4.1.4 Anchor
    4.2 Hidden Menu
        4.2.1 Wrapper
        4.2.2 items
        4.2.3 icon
        4.2.4 Search
        4.2.5 DropDown Menu
        4.2.6 SubMenu
        4.2.7 logo
        4.2.8 Active
    4.3 Menu Social icons
        4.3.1 Wrapper
        4.3.2 list
        4.3.3 Anchor
5. Sections
    5.1 Section Title
    5.2 Home Section
    5.3 White Section
    5.4 Gray Section
    5.5 Blur Section
    5.6 Blog Section
    5.7 Blog Timeline
    5.8 Blur2 Section
6. Feature Boxs
    6.1 Wrapper
    6.2 feature-box-style1
        6.2.1 Wrapper
        6.2.2 Title
        6.2.3 icon
        6.2.4 Typography
    6.3 feature-box-style2
        6.3.1 Wrapper
        6.3.2 Title
        6.3.3 icon
        6.3.4 Containt
        6.3.5 Typography
        6.3.6 Hover
    6.4 feature-box-style3
        6.4.1 Wrapper
        6.4.2 icon
        6.4.3 Typography
        6.4.4 Hover
    6.5 feature-box-style4
        6.5.1 Wrapper
        6.5.2 Title
        6.5.3 icon
        6.5.4 Containt
        6.5.5 Typography
        6.5.6 Hover
    6.6 feature-box-style5
        6.6.1 Wrapper
        6.6.2 icon
        6.6.3 Hover
        6.6.4 Typography
    6.7 feature-box-style6
        6.7.1 Wrapper
        6.7.2 Title
            6.7.2.1 icon
            6.7.2.2 Anchor
        6.7.3 Containt
        6.7.4 Typography
        6.7.5 Hover
7. Latest Works
    7.1 Wrapper
    7.2 items
    7.3 Overlayer
    7.4 Title Caption
    7.5 image
    7.6 Hover
8. Project OverView
    8.1 Wrapper
    8.2 Typography
9. Project Details
    9.1 Wrapper
    9.2 items
    9.3 Hover
10.3 Presentaion Details
    10.3.1 Wrapper
    10.3.2 items
    10.3.3 icons
    10.3.4 Button
11. Attention Box
    11.1 Wrapper
    11.2 Typography
    11.3 Button
    11.4 attention box small
12. breadcrumb
    12.1 breadcrumb wrapper
    12.2 Page Title
    12.3 list
    12.4 items
    12.5 Typography
13. Timeline Graph
    13.1 Wrapper
    13.2 list
    13.3 line
    13.4 Date
        13.4.1 container (divided by 2 left & right)
            13.4.1.1 container (odd)
            13.4.1.2 container (even)
        13.4.2 Typography
    13.5 post (divided by 2 left & right)
        13.5.1 even posts
        13.5.2 odd posts
    13.6 Timeline Graph title
    13.7 Timeline Graph triangle
        13.7.1 triangle (even)
        13.7.2 triangle (odd)
    13.8 Timeline Graph icons
    13.9 Hover
14. Text Widget
    14.1 Wrapper
    14.2 Title
    14.3 Typography
    14.4 image
15. Testimonial Slider
    15.1 Necessary Styles
    15.2 Direction Nav
    15.3 testimonial Wrapper
        15.3.1 Arrow
        15.3.2 client
            15.3.2.1 image
            15.3.2.2 Typography
16. Our Team
    16.1 Team Slider
        16.1.1 Necessary Styles
        16.1.2 Direction Nav
    16.2 Team style1
        16.2.1 Wrapper
        16.2.2 items
        16.2.3 image cover
        16.2.4 Member image
        16.3.5 Title Caption
17. About Me
    17.1 Wrapper
    17.2 image Cover
    17.3 image
    17.4 info
    17.5 Typography
18. Personal Details
    18.1 Wrapper
    18.2 items
    18.3 title
    18.4 Value
19. Member Social icons
    19.1 Wrapper
    19.2 items
    19.3 Anchor
20. Accordion
    20.1 Container
    20.2 Anchor
    20.3 Arrow
    20.4 Content
21. Circle Progress Bar
    21.1 Wrapper
    21.2 item
    21.3 icon
    21.4 Typography
22. Video
23. Pricing Boxs
    23.1 Wrapper
    23.2 Pricing Box
        23.2.1 Wrapper
        23.2.2 Title & Price Wrapper
        23.2.3 Details
        23.2.4 Typography
        23.2.5 Button
        23.2.6 Hover
24. Team grid
    24.1 Wrapper
    24.2 items
    24.3 image
    24.4 Title Caption
    24.5 Containt
    24.6 Social icons
        24.6.1 Wrapper
        24.6.2 list
        24.6.3 items
        24.6.4 Anchor
        24.6.5 Hover
25. 404 Error
26. Sitemap
    26.1 Wrapper
    26.2 list
    26.3 items
27. Portfolio grid
    27.1 Portfolio Filter
        27.1.1 Wrapper
        27.1.2 items
        27.1.3 Anchor
    27.2 Portfolio grid 4 Columns
        27.2.1 Wrapper
        27.2.2 items
        27.2.3 image figure
        27.2.4 Title Caption
        27.2.5 image overlayer
    27.3 Portfolio grid 3 Columns
        27.3.1 Wrapper
        27.3.2 items
        27.3.3 image figure
        27.3.4 Title Caption
        27.3.5 image overlayer
    27.4 Portfolio grid 2 Columns
        27.4.1 Wrapper
        27.4.2 items
        27.4.3 image figure
        27.4.4 Title Caption
        27.4.5 image overlayer
    27.5 isotope
28. Project Slider
    28.1 Necessary Styles
    28.2 Direction Nav
    28.3 image Overlay
29. Quote Slider
    29.1 Wrapper
    29.2 Content
30. Skills Tags
    30.1 Wrapper
    30.2 items
    30.3 Hover
31. Blog ( Normal Blog )
    31.1 Loading
    31.2 Wrapper
    31.3 Article
    31.4 Post Wrapper
    31.5 Simple Post
    31.6 Standard Post
    31.7 Audio Post
    31.8 Video Post
    31.9 Quote Post
    31.10 Link Post
    31.11 Slider Post
        31.11.1 Necessary Styles
        31.11.2 Direction Nav
        31.11.3 image Overlay
    31.12 Post Thumbnail
    31.13 Post Title
    31.14 Post Containt
    31.15 Post Meta
        31.15.1 Post Author
        31.15.2 Post Date
        31.15.3 Post Comment
32. Blog ( Timeline Blog )
    32.1 Wrapper
    32.2 Article
    32.3 Border
33. Load More
34. Single Post
    34.1 Wrapper
    34.2 Title
    34.3 Tags
        34.3.1 Wrapper
        34.3.2 list
        34.3.3 items
        34.3.4 Anchor
        34.3.5 Post Meta
            34.3.5.1 Comment
            34.3.5.2 catagory
    34.4 Author Box
        34.4.1 Wrapper
        34.4.2 image
        34.4.3 Title
        34.4.4 Content
    34.5 Related Posts
        34.5.1 Wrapper
        34.5.2 list
        34.5.3 items
        34.5.4 image
        34.5.5 Hover
    34.6 Post Comments
        34.6.1 Wrapper
        34.6.2 list
        34.6.3 items
        34.6.4 Avatar
        34.6.5 Containt
        34.6.6 Author
        34.6.7 Meta
            34.6.7.1 Wrapper
            34.6.7.2 Date
            34.6.7.3 Time
        34.6.8 Comment
            34.6.8.1 Wrapper
        34.7 Comments Form
            34.7.1 Title
            34.7.2 Wrapper
35. Sidebar
    35.1 Wrapper
    35.2 Widget
        35.2.1 Wrapper
        35.2.2 Title
        35.2.3 Containt
    35.3 Categories widget
        35.3.1 list
        35.3.2 items
    35.4 Recent Posts widget
        35.4.1 list
        35.4.2 list
        35.4.3 image
        35.4.4 Containt
    35.5 Twitter widget
        35.5.1 Wrapper
        35.5.2 Twitter Username
        35.5.3 List
        35.5.4 items
    35.6 Tags widget
        35.6.1 list
        35.6.2 items
        35.6.3 Anchor
    35.7 Text widget
    35.8 Archive widget
        35.8.1 list
        35.8.2 items
36. Map
37. Contact Details
    37.1 icon
    37.2 Wrapper
    37.3 items
    37.4 title
    37.5 Value
38. Form
    38.1 Wrapper
    38.2 Label
    38.3 Textarea
    38.4 form-control
    38.5 success message
    38.6 error message
39. To Top
    39.1 Wrapper
    39.2 Anchor
40. Footer
    40.1 Wrapper
    40.2 Footer Widget
        40.2.1 Wrapper
        40.2.2 Title
    40.3 Recent Posts Widget
        40.3.1 list
        40.3.2 items
        40.3.3 image
        40.3.4 Containt
        40.3.5 Date
    40.4 Description Box
        40.4.1 Wrapper
        40.4.2 Typography
    40.5 Twitter Feed
        40.5.1 Wrapper
        40.5.2 Twitter Username
        40.5.3 List
        40.5.4 items
    40.6 Flickr Feed
        40.6.1 Wrapper
        40.6.2 items
        40.6.3 Anchor
    40.7 Toggle
41. Copyright
42. Override Bootstrap
    42.1 blockquote
    42.2 panel
    42.3 tooltip
    42.4 col
    42.5 btn
    42.6 thumbnail
    42.7 modal
    42.8 Progress Bar
43. Responsive
    43.1 TABLET  : 1024px
    43.2 TABLET  : 768px
    43.3 Phone   : 480px
    43.4 Phone   : 320px
*/
/* ==========================================================================
   1. General
========================================================================== */
/* 1.1 Main Styles
---------------------------------------------------------------------------*/
body {
    margin: 0;
    color: #747474;
    font-weight: 400;
    padding: 50px 0 0 0;
    background-color: #ffffff;
    -webkit-text-size-adjust: 100%;
    -webkit-overflow-scrolling: touch;
    -webkit-font-smoothing: antialiased;
    font: 16px/24px "PT Sans", Helvetica, Arial, sans-serif;
	
}

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */
.browsehappy { margin: 0.2em 0; background-color: #cccccc; color: #000000; padding: 0.2em 0; }

/* 1.2 Anchor
---------------------------------------------------------------------------*/
a { color:#39F; }
a,
a > * {
    outline: none;
    cursor: pointer;
    text-decoration: none;

    -webkit-transition: all 0.3s ease-in-out;
       -moz-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
         -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
}
a:focus,
a:hover {
    outline: none;
    color: #333333;
    text-decoration: none;
}

/* ==========================================================================
   2. Typography
========================================================================== */
/* 2.1 Headings
---------------------------------------------------------------------------*/
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    padding: 0;
    color: #333333;
    letter-spacing: 1px;
    font-family: "Lato", Helvetica, Arial, sans-serif;

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

h1 { font-size: 36px; font-weight: 700; line-height: 46px; padding: 0 0 10px; }
h2 { font-size: 30px; font-weight: 700; line-height: 39px; padding: 0 0 11px; }
h3 { font-size: 20px;rgba  font-weight: 400; line-height: 27px; padding: 0 0 13px; }
h4 { font-size: 18px; font-weight: 400; line-height: 24px; padding: 0 0 14px; }
h5 { font-size: 16px; font-weight: 400; line-height: 22px; padding: 0 0 14px; }
h6 { font-size: 14px; font-weight: 400; line-height: 19px; padding: 0 0 15px; }

h4 strong { font-weight: 400; }


/* 2.2 Selection Color
---------------------------------------------------------------------------*/
::selection {
    color: #ffffff;
    text-shadow: none;
    background-color: #39F;
}

::-webkit-selection {
    color: #ffffff;
    text-shadow: none;
    background-color: #39F;
}

::-moz-selection {
    color: #ffffff;
    text-shadow: none;
    background-color: #39F;
}


/* 2.3 Colors
---------------------------------------------------------------------------*/
.base-color { color: #39F; }
.base-slider-bg-color { background-color: rgba(51, 153, 255, 0.6) !important; }




/* ==========================================================================
   3. Background Slider
========================================================================== */
/* 3.1 image
---------------------------------------------------------------------------*/
div.backstretch img {
    -webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 30s linear;
       -moz-animation: imageAnimation 30s linear;
        -ms-animation: imageAnimation 30s linear;
         -o-animation: imageAnimation 30s linear;
            animation: imageAnimation 30s linear;
}

/* 3.2 Overlayer
---------------------------------------------------------------------------*/
.backstretch-overlayer {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    width: 100%;
    height: auto;
    position: fixed;
    overflow: hidden;
    background: transparent url(../images/patterns/overlay-pattern.png) repeat;
}

/* 3.3 list
---------------------------------------------------------------------------*/
.flexslider.home-slider {
    background: none;

    -webkit-border: none;
       -moz-border: none;
         -o-border: none;
            border: none;

    -webkit-box-shadow: none;
       -moz-box-shadow: none;
         -o-box-shadow: none;
            box-shadow: none;
}
.home-slider ul.slides li { height: 550px; text-align: center; }

/* 3.4 Typography
---------------------------------------------------------------------------*/
.home-slider ul.slides h1,
.home-slider ul.slides h3 {
    margin: 0;
    width: auto;
    color: #ffffff;
    line-height: 1;
    font-size: 40px;
    font-weight: 400;
    letter-spacing: 1px;
    display: inline-block;
    padding: 9px 10px 16px 10px;
    background-color: rgba(0, 0, 0, 0.6);
}
.home-slider ul.slides h3 {
    font-size: 30px;
    padding: 10px 10px 15px 10px;
}

/* 3.5 Captions
---------------------------------------------------------------------------*/
.caption-animation { position: relative; }
.flex-caption {
    top: 0;
    left: 0;
    width: 100%;
    height: 550px;
    overflow: hidden;
    position: absolute;
    text-align: center;
}
.caption-1,
.caption-2,
.caption-3 {
    left: 0;
    top: 155px;
    width: 100%;
    position: absolute;
    text-align: center;
}
.caption-2 { top: 250px; }
.caption-3  {
    top: 335px;
    height: 60px;
}

/* 4.6 Anchor
---------------------------------------------------------------------------*/
.caption-3 a {
    width: 60px;
    height: 60px;
    color: #ffffff;
    font-size: 24px;
    line-height: 60px;
    text-align: center;
    display: inline-block;
    background-color: rgba(0, 0, 0, 0.6);

    -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
         -o-border-radius: 50%;
            border-radius: 50%;
}
.caption-3 a:hover { background-color: rgba(51, 153, 255, 0.6); }

/* 3.7 Direction Nav
---------------------------------------------------------------------------*/
.home-slider .flex-control-nav {
    z-index: 3;
    bottom: 40px;
    height: 11px;
}
.home-slider .flex-control-paging li a { background-color: rgba(0, 0, 0, 0.7); }
.home-slider .flex-control-paging li a.flex-active,
.home-slider .flex-control-paging li a:hover { background-color: rgba(51, 153, 255, 0.8); }




/* ==========================================================================
   4. Menu
========================================================================== */
/* 4.1 Main Menu
========================================================================== */
/* 4.1.1 Wrapper
---------------------------------------------------------------------------*/
.gn-menu-main {
    margin: 0;
    padding: 0;
    z-index: 7000;
    list-style: none;
    line-height: 50px;
    text-transform: none;

    background-repeat: repeat;
    background-position: center top;
    -webkit-overflow-scrolling: touch;
    background-color: rgba(255, 255, 255, 0.8);

    -webkit-box-shadow: 0 1px 0 0 rgba(5, 38, 57, 0.05);
       -moz-box-shadow: 0 1px 0 0 rgba(5, 38, 57, 0.05);
         -o-box-shadow: 0 1px 0 0 rgba(5, 38, 57, 0.05);
            box-shadow: 0 1px 0 0 rgba(5, 38, 57, 0.05);

    background-image: none, -webkit-linear-gradient(90deg, rgba(255, 255, 255, .8) 0%, #fffffe 100%);
    background-image: none, -moz-linear-gradient(90deg, rgba(255, 255, 255, .8) 0%, #fffffe 100%);
    background-image: none, -ms-linear-gradient(90deg, rgba(255, 255, 255, .8) 0%, #fffffe 100%);
    background-image: none, -o-linear-gradient(90deg, rgba(255, 255, 255, .8) 0%, #fffffe 100%);
    background-image: none, linear-gradient(360deg, rgba(255, 255, 255, .8) 0%, #fffffe 100%);
}
.gn-menu-main {
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    position: fixed;
}
.gn-menu-main:before {
    left: 0;
    top: 100%;
    content: '';
    width: 100%;
    height: 26px;
    z-index: 6998;
    position: absolute;
    background: url(../images/shadow.png) no-repeat center top;
}
.gn-menu-main:after {
        display: table;
        clear: both;
        content: "";
}

/* 4.1.2 list
---------------------------------------------------------------------------*/
.gn-menu-main ul {
    margin: 0;
    padding: 0;
    z-index: 7000;
    list-style: none;
    line-height: 50px;
    text-transform: none;
    -webkit-overflow-scrolling: touch;
}

/* 4.1.3 items
---------------------------------------------------------------------------*/
.gn-menu-main > li {
    float: left;
    height: 50px;
    display: block;
    text-align: center;

    -webkit-border-right: 1px solid #e4e4e4;
       -moz-border-right: 1px solid #e4e4e4;
         -o-border-right: 1px solid #e4e4e4;
            border-right: 1px solid #e4e4e4;
}
.gn-menu-main li.gn-trigger {
    width: 50px;
    position: relative;

    -webkit-touch-callout: none;
      -webkit-user-select: none;
       -khtml-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none;
}


/* 4.1.4 Anchor
---------------------------------------------------------------------------*/
.gn-menu-main a {
    height: 50px;
    display: block;
    color: #747474;
}
.gn-menu-main a i { color: #747474; }
.gn-menu-main a:hover i { color: #39F; }
.gn-menu-main > li > a {
    padding: 0 10px;
    font-size: 24px;
    line-height: 50px;
    text-transform: uppercase;
}
.no-touch .gn-menu-main a:hover,
.no-touch .gn-menu li.gn-search-item:hover,
.no-touch .gn-menu li.gn-search-item:hover a {
    color: #333333;
}
a.gn-dropdown {
    width: 230px;
    position: relative;
}


/* 4.2 Hidden Menu
========================================================================== */
/* 4.2.1 Wrapper
---------------------------------------------------------------------------*/
.gn-menu-wrapper {
    left: 0;
    bottom: 0;
    top: 50px;
    width: 50px;
    z-index: 7000;
    position: fixed;
    overflow: hidden;

    background-repeat: repeat;
    background-position: center top;
    -webkit-overflow-scrolling: touch;
    background-color: rgba(255, 255, 255, 0.8);

    -webkit-box-shadow: 0 1px 0 0 rgba(5, 38, 57, 0.05);
       -moz-box-shadow: 0 1px 0 0 rgba(5, 38, 57, 0.05);
         -o-box-shadow: 0 1px 0 0 rgba(5, 38, 57, 0.05);
            box-shadow: 0 1px 0 0 rgba(5, 38, 57, 0.05);

    background-image: none, -webkit-linear-gradient(90deg, rgba(255, 255, 255, .8) 0%, #fffffe 100%);
    background-image: none, -moz-linear-gradient(90deg, rgba(255, 255, 255, .8) 0%, #fffffe 100%);
    background-image: none, -ms-linear-gradient(90deg, rgba(255, 255, 255, .8) 0%, #fffffe 100%);
    background-image: none, -o-linear-gradient(90deg, rgba(255, 255, 255, .8) 0%, #fffffe 100%);
    background-image: none, linear-gradient(360deg, rgba(255, 255, 255, .8) 0%, #fffffe 100%);

    -webkit-border-top: 1px solid #e4e4e4;
       -moz-border-top: 1px solid #e4e4e4;
         -o-border-top: 1px solid #e4e4e4;
            border-top: 1px solid #e4e4e4;

    -webkit-border-right: 1px solid #e4e4e4;
       -moz-border-right: 1px solid #e4e4e4;
         -o-border-right: 1px solid #e4e4e4;
            border-right: 1px solid #e4e4e4;

    -webkit-transform: translateX(-50px);
       -moz-transform: translateX(-50px);
        -ms-transform: translateX(-50px);
         -o-transform: translateX(-50px);
            transform: translateX(-50px);

    -webkit-transition: -webkit-transform 0.3s, width 0.3s;
       -moz-transition: -moz-transform 0.3s, width 0.3s;
        -ms-transition: -ms-transform 0.3s, width 0.3s;
         -o-transition: -o-transform 0.3s, width 0.3s;
            transition: transform 0.3s, width 0.3s;
}
.gn-menu-wrapper.gn-open-all,
.gn-menu-wrapper.gn-open-part {
    -webkit-transform: translateX(0px);
       -moz-transform: translateX(0px);
        -ms-transform: translateX(0px);
         -o-transform: translateX(0px);
            transform: translateX(0px);
}
.gn-menu-wrapper.gn-open-all { width: 230px }
.gn-menu-wrapper.gn-open-all .gn-submenu li { height: 50px }
.gn-scroller {
        width: 246px;
        height: 100%;
        position: absolute;
        overflow-y: scroll;
		overflow-x: hidden;

}
.gn-menu { text-align: left; }

/* 4.2.2 items
---------------------------------------------------------------------------*/
.gn-menu li.gn-search-item  {
    -webkit-box-shadow: 0 1px 0 0 rgba(5, 38, 57, 0.05);
       -moz-box-shadow: 0 1px 0 0 rgba(5, 38, 57, 0.05);
         -o-box-shadow: 0 1px 0 0 rgba(5, 38, 57, 0.05);
            box-shadow: 0 1px 0 0 rgba(5, 38, 57, 0.05);
}
.gn-menu li a {
    -webkit-box-shadow: 0 1px 0 0 rgba(5, 38, 57, 0.05);
       -moz-box-shadow: 0 1px 0 0 rgba(5, 38, 57, 0.05);
         -o-box-shadow: 0 1px 0 0 rgba(5, 38, 57, 0.05);
            box-shadow: 0 1px 0 0 rgba(5, 38, 57, 0.05);
}

/* 4.2.3 icon
---------------------------------------------------------------------------*/
.gn-menu li a i {
    speak: none;
    width: 50px;
    line-height: 50px;
    text-align: center;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
}
.no-touch .gn-icon-menu:hover,
.no-touch .gn-icon-menu.gn-selected:hover,
.gn-icon-menu.gn-selected,
.gn-icon-menu.gn-selected i {
    color: #39F !important;
}



/* 4.2.4 Search
---------------------------------------------------------------------------*/
.gn-search-item i {
    speak: none;
    width: 50px;
    line-height: 50px;
    text-align: center;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
}
.gn-search-item form {
    width: 140px;
    position: relative;
    display: inline-block;
}

input.gn-search {
    padding: 0;
	height: 24px;
    width: 140px;
    outline: none;
    color: #747474;
    cursor: pointer;
    font-weight: 400;
	line-height: 24px;
    position: relative;
    background: transparent;

    -webkit-border: none;
       -moz-border: none;
         -o-border: none;
            border: none;
}

.gn-search::-webkit-input-placeholder,
.gn-search:-moz-placeholder,
.gn-search::-moz-placeholder,
.gn-search:-ms-input-placeholder,
.gn-search:focus::-webkit-input-placeholder,
.no-touch .gn-menu li.gn-search-item:hover .gn-search:focus::-webkit-input-placeholder,
.no-touch .gn-menu li.gn-search-item:hover input.gn-search,
.no-touch .gn-menu li.gn-search-item:hover .gn-search::-webkit-input-placeholder,
.no-touch .gn-menu li.gn-search-item:hover .gn-search:-moz-placeholder,
.no-touch .gn-menu li.gn-search-item:hover .gn-search::-moz-placeholder,
.no-touch .gn-menu li.gn-search-item:hover .gn-search:-ms-input-placeholder {
        color: #747474;
}

input.gn-search:focus {
        cursor: text;
}

/* 4.2.5 DropDown Menu
---------------------------------------------------------------------------*/
.gn-dropdown:after {
    right: 17px;
    color: #39F;
    content: "\f107";
    position: absolute;
    font-family: 'FontAwesome';
}

.gn-dropdown.gn-highlight { color: #333333; }
.gn-dropdown.gn-highlight i { color: #39F; }

/* 4.2.6 SubMenu
---------------------------------------------------------------------------*/
.gn-submenu li {
    height: 0;
    overflow: hidden;

    -webkit-transition: height 0.3s;
       -moz-transition: height 0.3s;
        -ms-transition: height 0.3s;
         -o-transition: height 0.3s;
            transition: height 0.3s;
}
.gn-submenu li a {
    color: #999999;
    position: relative;
    padding-left: 30px;
}
.gn-submenu li a:after {
    top: 49px;
    left: 30px;
    content: '';
    height: 1px;
    width: 200px;
    position: absolute;
    background-color: #e4e4e4;
}
.gn-submenu li a:hover { padding-left: 40px; }


/* 4.2.7 logo
---------------------------------------------------------------------------*/
.logo{
	background-color:#39F;
	}

.logo a {
    color: #333333;
    letter-spacing: 1px;
    font-size: 30px !important;
    line-height: 50px !important;
    font-family: "Lato", Helvetica, Arial, sans-serif;
}
.logo a img {
    width: 218px;
    height: 30px;
    margin-top: -8px;
}

/* 4.2.8 Active
---------------------------------------------------------------------------*/
.gn-active {
    color: #39F !important;
    font-size: 18px !important;
}
.gn-active i { color: #39F !important; }
.gn-active:hover { color: #333333 !important; }


/* 4.3 Menu Social icons
---------------------------------------------------------------------------*/
/* 4.3.1 Wrapper
---------------------------------------------------------------------------*/
#menu-social-icons {
    float: right;

    -webkit-border-right: none;
       -moz-border-right: none;
         -o-border-right: none;
            border-right: none;
}

/* 4.3.2 list
---------------------------------------------------------------------------*/
.menu-social-icons li {
    float: left;
    width: 50px;
    display: inline-block;
}

/* 4.3.3 Anchor
---------------------------------------------------------------------------*/
.menu-social-icons li a {
    font-size: 20px;
    line-height: 50px;

    -webkit-box-shadow: inset 1px 0 #e4e4e4;
       -moz-box-shadow: inset 1px 0 #e4e4e4;
         -o-box-shadow: inset 1px 0 #e4e4e4;
            box-shadow: inset 1px 0 #e4e4e4;
}
.menu-social-icons li a:hover { color: #39F !important; }



/* ==========================================================================
   5. Sections
========================================================================== */
/* 5.1 Section Title
---------------------------------------------------------------------------*/
.section-title {
    width: 100%;
    position: relative;
    margin: 0 0 50px 0;
    padding: 0 0 10px 0;
    text-align: center;
}

.section-title:after {
    left: 0;
    top: 100%;
    content: '';
    width: 100%;
    height: 1px;
    position: absolute;

    background-image: -webkit-linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0));
    background-image: -moz-linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0));
    background-image: -ms-linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0));
    background-image: -o-linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0));
    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0));
}

.section-title .main-title h2 {
    color: #39F;
    font-size: 38px;
    font-weight: 400;
    padding: 0 0 9px;
    line-height: 49px;
}

.short-section-title {
    width: 100%;
    text-align: left;
    position: relative;
    margin: 0 0 30px 0;
}
.short-section-title:after {
    left: 0;
    top: 100%;
    width: 100%;
    height: 1px;
    content: '';
    position: absolute;

    background-image: -webkit-linear-gradient(360deg, rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0));
    background-image: -moz-linear-gradient(360deg, rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0));
    background-image: -ms-linear-gradient(360deg, rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0));
    background-image: -o-linear-gradient(360deg, rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0));
    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0));
}


/* 5.2 Home Section
---------------------------------------------------------------------------*/
#home-section {
    height: 550px;
    overflow: hidden;
    text-align: center;
}

/* 5.3 White Section
---------------------------------------------------------------------------*/
.white-section {
    margin: 0;
    width: 100%;
    height: 100%;
    padding: 50px 0 20px;
    background-color: #fefefe;
}

/* 5.4 Gray Section
---------------------------------------------------------------------------*/
.gray-section {
    margin: 0;
    width: 100%;
    height: 100%;
    padding: 50px 0 20px;
    background-color: #f8f8f8;

    -webkit-border-top: 1px solid #e4e4e4;
       -moz-border-top: 1px solid #e4e4e4;
         -o-border-top: 1px solid #e4e4e4;
            border-top: 1px solid #e4e4e4;

    -webkit-border-bottom: 1px solid #e4e4e4;
       -moz-border-bottom: 1px solid #e4e4e4;
         -o-border-bottom: 1px solid #e4e4e4;
            border-bottom: 1px solid #e4e4e4;
}

/* 5.5 Blur Section
---------------------------------------------------------------------------*/
.blur-section {
    margin: 0;
    width: 100%;
    padding: 50px 0 20px;
    background: transparent url(../images/background/1.jpg) fixed center bottom;
}

/* 5.6 Blog Section
---------------------------------------------------------------------------*/
.blog-section {
    margin: 0;
    width: 100%;
    height: 100%;
    padding: 30px 0 0px;
    background-color: #fafafa;
}

/* 5.7 Blog Timeline
---------------------------------------------------------------------------*/
.blog-timeline-section {
    margin: 0;
    width: 100%;
    height: 100%;
    padding: 60px 0 0;
    background-color: #fafafa;
}

/* 5.8 Blur2 Section
---------------------------------------------------------------------------*/
.blur2-section {
    margin: 0;
    width: 100%;
    position: relative;
    padding: 50px 0 20px;
    background: transparent url(../images/background/2.jpg) fixed center center;
}


/* ==========================================================================
   6. Feature Boxs
========================================================================== */
/* 6.1 Wrapper
========================================================================== */
.feature-boxs-wrapper {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow: hidden;
}
.feature-boxs-wrapper1 {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow: hidden;
}
.feature-box-containt p:last-child { margin-bottom: 0; }

/* 6.2 feature-box-style1
========================================================================== */
/* 6.2.1 Wrapper
---------------------------------------------------------------------------*/
.feature-box-style1 {
    width: 100%;
    padding: 0 15px;
    position: relative;
    margin: 0 0 30px 0;
}
.feature-boxs-wrapper1 .col-md-4:after {
    top: 0;
    right: 0;
    width: 1px;
    content: '';
    height: 100%;
    position: absolute;

    background-image: -webkit-linear-gradient(270deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0));
    background-image: -moz-linear-gradient(270deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0));
    background-image: -ms-linear-gradient(270deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0));
    background-image: -o-linear-gradient(270deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0));
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0));
}
.feature-boxs-wrapper1 .col-md-4:last-child:after { display: none; }

/* 6.2.2 Title
---------------------------------------------------------------------------*/
.feature-box-style1 .feature-box-title {
    width: 100%;
    height: 40px;
    overflow: hidden;
    margin-bottom: 20px;
}

/* 6.2.3 icon
---------------------------------------------------------------------------*/
.feature-box-style1 .feature-box-title i {
    padding: 0;
    float: left;
    width: 40px;
    height: 40px;
    color: #ffffff;
    font-size: 20px;
    line-height: 40px;
    margin: 0 10px 0 0;
    text-align: center;
    display: inline-block;
    background-color: #333333;

    -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
         -o-border-radius: 50%;
            border-radius: 50%;
}

/* 6.2.4 Typography
---------------------------------------------------------------------------*/
.feature-box-style1 .feature-box-title h3 {
    margin: 0;
    padding: 0;
    float: left;
    line-height: 40px;
    display: inline-block;
}


/* 6.3 feature-box-style2
========================================================================== */
/* 6.3.1 Wrapper
---------------------------------------------------------------------------*/
.feature-box-style2 {
    padding: 0;
    width: 100%;
    overflow: hidden;
    margin: 0 0 30px 0;
}

/* 6.3.2 Title
---------------------------------------------------------------------------*/
.feature-box-style2 .feature-box-title { text-align: center; }

/* 6.3.3 icon
---------------------------------------------------------------------------*/
.feature-box-style2 .feature-box-title i {
    width: 60px;
    height: 60px;
    color: #ffffff;
    font-size: 30px;
    line-height: 60px;
    text-align: center;
    background-color: #333333;

    -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
         -o-border-radius: 50%;
            border-radius: 50%;

    -webkit-transition: all 0.3s ease-in-out;
       -moz-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
         -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
}
.feature-box-style2 .feature-box-title i.fa-mobile { font-size: 40px; }

/* 6.3.4 Containt
---------------------------------------------------------------------------*/
.feature-box-style2 .feature-box-containt {
    margin-top: -30px;
    text-align: center;
    background-color: #ffffff;
    padding: 50px 20px 0;

    -webkit-border: 1px solid #e4e4e4;
       -moz-border: 1px solid #e4e4e4;
         -o-border: 1px solid #e4e4e4;
            border: 1px solid #e4e4e4;
}

/* 6.3.5 Typography
---------------------------------------------------------------------------*/
.feature-box-style2 .feature-box-containt h3 { padding-bottom: 12px; }
.feature-box-style2 .feature-box-containt p:last-child {
    margin-bottom: 20px;
}

/* 6.3.6 Hover
---------------------------------------------------------------------------*/
.feature-box-style2:hover .feature-box-title i {
    background-color: #333333;

    -webkit-transform: rotate(360deg);
       -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
         -o-transform: rotate(360deg);
            transform: rotate(360deg);
}


/* 6.4 feature-box-style3
========================================================================== */
/* 6.4.1 Wrapper
---------------------------------------------------------------------------*/
.feature-box-style3 {
    padding: 0;
    width: 100%;
    overflow: hidden;
    margin: 0 0 30px 0;
}

/* 6.4.2 icon
---------------------------------------------------------------------------*/
.feature-box-style3 .feature-box-containt i {
    padding: 0;
    float: left;
    width: 46px;
    height: 46px;
    color: #39F;
    font-size: 24px;
    line-height: 42px;
    margin: 0 8px 0 0;
    text-align: center;
    display: inline-block;
    background-color: #ffffff;

    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
         -o-border-radius: 5px;
            border-radius: 5px;

    -webkit-border: 2px solid #39F;
       -moz-border: 2px solid #39F;
         -o-border: 2px solid #39F;
            border: 2px solid #39F;

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

/* 6.4.3 Typography
---------------------------------------------------------------------------*/
.feature-box-style3 .feature-box-title h3 {
    text-align: center;
}
.feature-box-style3 .feature-box-containt p { margin-left: 52px; }
/* 6.4.4 Hover
---------------------------------------------------------------------------*/
.feature-box-style3:hover .feature-box-containt i {
    color: #ffffff;
    background-color: #333333;

    -webkit-border: 2px solid #333333;
       -moz-border: 2px solid #333333;
         -o-border: 2px solid #333333;
            border: 2px solid #333333;
}


/* 6.5 feature-box-style4
========================================================================== */
/* 6.5.1 Wrapper
---------------------------------------------------------------------------*/
.feature-box-style4 {
    padding: 0;
    width: 100%;
    overflow: hidden;
    margin: 0 0 30px 0;
}

/* 6.5.2 Title
---------------------------------------------------------------------------*/
.feature-box-style4 .feature-box-title {
    text-align: center;
    margin-top: -30px;
}

/* 6.5.3 icon
---------------------------------------------------------------------------*/
.feature-box-style4 .feature-box-title i {
    width: 60px;
    height: 60px;
    color: #ffffff;
    font-size: 30px;
    line-height: 60px;
    text-align: center;
    background-color: #333333;

    -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
         -o-border-radius: 50%;
            border-radius: 50%;

    -webkit-transition: all 0.3s ease-in-out;
       -moz-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
         -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
}
.feature-box-style4 .feature-box-title i.fa-mobile { font-size: 40px; }

/* 6.5.4 Containt
---------------------------------------------------------------------------*/
.feature-box-style4 .feature-box-containt {
    margin: 0;
    text-align: center;
    padding: 20px 20px 50px;
    background-color: #ffffff;

    -webkit-border: 1px solid #e4e4e4;
       -moz-border: 1px solid #e4e4e4;
         -o-border: 1px solid #e4e4e4;
            border: 1px solid #e4e4e4;
}

/* 6.5.5 Typography
---------------------------------------------------------------------------*/
.feature-box-style4 .feature-box-containt h3 {
    line-height: 24px;
    padding-bottom: 17px;
}
.feature-box-style4 .feature-box-containt p:last-child {
    margin-bottom: 0;
}

/* 6.5.6 Hover
---------------------------------------------------------------------------*/
.feature-box-style4:hover .feature-box-title i {
    background-color: #333333;

    -webkit-transform: rotate(360deg);
       -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
         -o-transform: rotate(360deg);
            transform: rotate(360deg);
}


/* 6.6 feature-box-style5
========================================================================== */
/* 6.6.1 Wrapper
---------------------------------------------------------------------------*/
.feature-box-style5 {
    padding: 0;
    width: 100%;
    overflow: hidden;
    margin: 0 0 30px 0;
    position: relative;
}

/* 6.6.2 icon
---------------------------------------------------------------------------*/
.feature-box-style5 .feature-box-containt i {
    float: left;
    width: 40px;
    height: 40px;
    color: #ffffff;
    margin-top: 4px;
    font-size: 20px;
    line-height: 40px;
    text-align: center;
    background-color: #39F;

    -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
        -ms-border-radius: 50%;
         -o-border-radius: 50%;
            border-radius: 50%;
}
.feature-box-containt i.fa-mobile { font-size: 30px !important; margin-top: 5px; }

/* 6.6.3 Hover
---------------------------------------------------------------------------*/
.feature-box-style5:hover h3 { color: #39F; }

/* 6.6.4 Typography
---------------------------------------------------------------------------*/
.feature-box-style5 .feature-box-title h3 {
    text-align: center;

    -webkit-transition: all 0.3s ease-in-out;
       -moz-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
	     -o-transition: all 0.3s ease-in-out;
	        transition: all 0.3s ease-in-out;
}
.feature-box-style5 .feature-box-containt p {
    margin-bottom: 0;
    margin-left: 50px;
}


/* 6.7 feature-box-style6
========================================================================== */
/* 6.7.1 Wrapper
---------------------------------------------------------------------------*/
.feature-box-style6 {
    padding: 0;
    width: 100%;
    overflow: hidden;
    margin: 0 0 30px 0;
    position: relative;
}

/* 6.7.2 Title
---------------------------------------------------------------------------*/
.feature-box-style6 .feature-box-title {
    width: 100%;
    text-align: center;
    margin-bottom: 15px;
}

/* 6.7.2.1 icon
---------------------------------------------------------------------------*/
.feature-box-style6 .feature-box-title i {
    width: 60px;
    height: 60px;
    display: block;
    color: #ffffff;
    font-size: 30px;
    line-height: 60px;
    text-align: center;
    margin: 0 auto 20px;
    background-color: #39F;

    -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
        -ms-border-radius: 50%;
         -o-border-radius: 50%;
            border-radius: 50%;

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

/* 6.7.2.2 Anchor
---------------------------------------------------------------------------*/
.feature-box-style6 .feature-box-title a {
    font-size: 22px;
    font-weight: 400;
    line-height: 22px;
}

/* 6.7.3 Containt
---------------------------------------------------------------------------*/
.feature-box-style6 .feature-box-containt { text-align: center; }

/* 6.7.4 Typography
---------------------------------------------------------------------------*/
.feature-box-style6 .feature-box-containt p { margin-bottom: 0; }

/* 6.7.5 Hover
---------------------------------------------------------------------------*/
.feature-box-style6:hover .feature-box-title i { background-color: #333333; }




/* ==========================================================================
   7. Latest Works
========================================================================== */
/* 7.1 Wrapper
---------------------------------------------------------------------------*/
.latest-works {
    padding: 0;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    list-style: none;
    text-align: center;
}

/* 7.2 items
---------------------------------------------------------------------------*/
.latest-works li {
    float: left;
    padding: 4px;
    width: 360px;
    overflow: hidden;
    position: relative;
    display: inline-block;
    margin: 0 15px 30px 15px;
    background-color: #ffffff;

    -webkit-border: 1px solid #e4e4e4;
       -moz-border: 1px solid #e4e4e4;
         -o-border: 1px solid #e4e4e4;
            border: 1px solid #e4e4e4;
}

.latest-works li .img-figure {
    margin: 0;
    z-index: 0;
    height: auto;
    overflow: hidden;
    position: relative;
}

/* 7.3 Overlayer
---------------------------------------------------------------------------*/
.img-figure-overlayer {
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.5);

    -webkit-border: 4px solid #ffffff;
       -moz-border: 4px solid #ffffff;
         -o-border: 4px solid #ffffff;
            border: 4px solid #ffffff;

    -webkit-transition: all 0.3s ease-in-out;
       -moz-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
         -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
}
.img-figure-overlayer a {
    top: 50%;
    width: 40px;
    height: 40px;
    color: #ffffff;
    font-size: 20px;
    margin-top: -20px;
    line-height: 40px;
    position: absolute;
    text-align: center;
    background-color: #39F;

    -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
         -o-border-radius: 50%;
            border-radius: 50%;
}
.img-figure-overlayer a:first-child {
    left: 50%;
    line-height: 42px;
    margin-left: -45px;
}
.img-figure-overlayer a:last-child {
    right: 50%;
    margin-right: -45px;
}

/* 7.4 Title Caption
---------------------------------------------------------------------------*/
.latest-works li .title-caption {
    left: 0;
    z-index: 2;
    width: 100%;
    bottom: 4px;
    height: auto;
    overflow: hidden;
    position: absolute;
}

.latest-works li .title-caption span {
    padding: 10px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 400;
    position: relative;
    letter-spacing: 1px;
    background-color: rgba(227, 224, 226, 0.2);
    font-family: "Lato", Helvetica, Arial, sans-serif;
}
.latest-works li .title-caption span:before {
    top: 0;
    left:0;
    content:'';
    z-index: -1;
    width: 100%;
    height: 100%;
    position:absolute;
    background-color: rgba(0, 0, 0, 0.5);
}
.latest-works li .title-caption span:first-child {
    float: left;
    margin-left: 4px;
}
.latest-works li .title-caption span:last-child {
    float: right;
    font-size: 18px;
    margin-right: 4px;
}

/* 7.5 image
---------------------------------------------------------------------------*/
.latest-works li .img-figure img {
    width: 100%;
    display: block;
    position: relative;
}

/* 7.6 Hover
---------------------------------------------------------------------------*/
.latest-works li:hover .img-figure-overlayer { opacity: 1;}

.img-figure-overlayer a:hover {
    color: #ffffff;
    background-color: #333333;
}



/* ==========================================================================
   8. Project OverView
========================================================================== */
/* 8.1 Wrapper
---------------------------------------------------------------------------*/
.project-OverView {
    overflow: hidden;
    position: relative;
    margin-bottom: 30px;
}
.modal-body .project-OverView { margin-bottom: 0; }

/* 8.2 Typography
---------------------------------------------------------------------------*/
.project-OverView p:last-child { margin-bottom: 0; }

.project-OverView h3.head-title {
    padding-bottom: 0;
    margin-bottom: 10px;
}
.head-title {
    position: relative;
}
.project-OverView .head-title:after {
    right: 0;
    bottom: 0;
    width: 100%;
    content: '';
    height: 1px;
    position: absolute;

    background-image: -webkit-linear-gradient(180deg, rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0));
    background-image: -moz-linear-gradient(180deg, rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0));
    background-image: -ms-linear-gradient(180deg, rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0));
    background-image: -o-linear-gradient(180deg, rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0));
    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0));
}

.project-OverView h3.head-title span {
    margin-bottom: -1px;
    padding-bottom: 10px;
    display: inline-block;
}




/* ==========================================================================
   9. Project Details
========================================================================== */
/* 9.1 Wrapper
---------------------------------------------------------------------------*/
.project-details {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow: hidden;
    list-style: none;
    text-align: center;
}
.col-md-6 .project-details { margin-bottom: 20px; }

/* 9.2 items
---------------------------------------------------------------------------*/
.project-details li {
    padding: 0;
    width: 120px;
    height: 120px;
    color: #333333;
    font-size: 22px;
    line-height: 100px;
    text-align: center;
    margin: 20px 10px 0;
    display: inline-block;
    font-family: "Lato", Helvetica, Arial, sans-serif;

    -webkit-border-radius: 20%;
       -moz-border-radius: 20%;
         -o-border-radius: 20%;
            border-radius: 20%;

    -webkit-border: 10px solid #e4e4e4;
       -moz-border: 10px solid #e4e4e4;
         -o-border: 10px solid #e4e4e4;
            border: 10px solid #e4e4e4;

    -webkit-transition: all 0.3s ease-in-out;
       -moz-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
         -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
}
.project-details li a i {
    display: block;
    font-size: 26px;
    margin-top: -1px;
    line-height: 100px;
}
.col-md-6 .project-details li { margin: 0 7px 10px; }




/* ==========================================================================
   10. Presentaion
========================================================================== */
/* 10.1 Wrapper
---------------------------------------------------------------------------*/
.presentaion {
    margin: 0;
    padding: 0;
    width: 100%;
}
.presentaion .col-md-6 .col-md-6 { padding: 0; }
.presentaion .col-md-6 .col-md-6:last-child { margin-bottom: 10px; }

/* 10.2 image
---------------------------------------------------------------------------*/
.presentaion img {
    width: 100%;
    margin-bottom: 30px;
}

/* 10.3 Presentaion Details
---------------------------------------------------------------------------*/
/* 10.3.1 Wrapper
---------------------------------------------------------------------------*/
.presentation-details {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow: hidden;
    list-style: none;
}

/* 10.3.2 items
---------------------------------------------------------------------------*/
.presentation-details li {
    padding: 0;
    display: block;
    margin: 0 0 10px 1px;
}

/* 10.3.3 icons
---------------------------------------------------------------------------*/
.presentation-details li i {
    color: #39F;
    margin-right: 10px;
}

/* 10.3.4 Button
---------------------------------------------------------------------------*/
.presentaion a.btn { margin-bottom: 30px; }




/* ==========================================================================
   11. Attention Box
========================================================================== */
/* 11.1 Wrapper
---------------------------------------------------------------------------*/
.attention-box {
    height: auto;
    padding: 30px;
    display: block;
    max-width: 75%;
    position: relative;
    margin: 0 auto 30px;
    background-color: #ffffff;

    -webkit-border: 1px solid #e4e4e4;
       -moz-border: 1px solid #e4e4e4;
         -o-border: 1px solid #e4e4e4;
            border: 1px solid #e4e4e4;

    -webkit-border-left: 1px solid #39F;
       -moz-border-left: 1px solid #39F;
         -o-border-left: 1px solid #39F;
            border-left: 1px solid #39F;
}
.attention-box:after {
    left: 0;
    top: 100%;
    content: '';
    width: 100%;
    height: 26px;
    z-index: 6998;
    position: absolute;
    background: url(../images/shadow.png) no-repeat center top;
}

/* 11.2 Typography
---------------------------------------------------------------------------*/
.attention-box h3 { width: 80%; }
.attention-box p { margin-bottom: 0; }

/* 11.3 Button
---------------------------------------------------------------------------*/
.attention-box .btn {
    top: 38px;
    right: 30px;
    position: absolute;
}

/* 11.4 attention box small
---------------------------------------------------------------------------*/
.attention-box-small {
    height: auto;
    padding: 30px;
    display: block;
    max-width: 75%;
    position: relative;
    margin: 0 auto 30px;
    background-color: #ffffff;

    -webkit-border: 1px solid #e4e4e4;
       -moz-border: 1px solid #e4e4e4;
         -o-border: 1px solid #e4e4e4;
            border: 1px solid #e4e4e4;

    -webkit-border-left: 1px solid #39F;
       -moz-border-left: 1px solid #39F;
         -o-border-left: 1px solid #39F;
            border-left: 1px solid #39F;
}
.attention-box-small:after {
    left: 0;
    top: 100%;
    content: '';
    width: 100%;
    height: 26px;
    z-index: 6998;
    position: absolute;
    background: url(../images/shadow.png) no-repeat center top;
}
.attention-box-small h3 { width: 80%; line-height: 48px; padding-bottom: 0; }
.attention-box-small .btn {
    top: 30px;
    right: 30px;
    position: absolute;
}




/* ==========================================================================
   12. breadcrumb
========================================================================== */
/* 12.1 breadcrumb wrapper
---------------------------------------------------------------------------*/
.breadcrumb-wrapper {
    width: 100%;
    padding: 30px 0;
    margin: 0;
    position: relative;
    background-color: #f8f8f8;

    -webkit-border-top: 1px solid #e4e4e4;
       -moz-border-top: 1px solid #e4e4e4;
         -o-border-top: 1px solid #e4e4e4;
            border-top: 1px solid #e4e4e4;

    -webkit-border-bottom: 1px solid #e4e4e4;
       -moz-border-bottom: 1px solid #e4e4e4;
         -o-border-bottom: 1px solid #e4e4e4;
            border-bottom: 1px solid #e4e4e4;

}
.breadcrumb-wrapper:after {
    left: 0;
    top: 100%;
    content: '';
    width: 100%;
    height: 15px;
    z-index: 6998;
    position: absolute;
    background: url(../images/breadcrumb-shadow.png) no-repeat center top;
}

/* 12.2 Page Title
---------------------------------------------------------------------------*/
.gn-menu-main > li.page-title > h3 {
    color: #39F;
    padding: 0 10px;
    margin-top: 0;
    font-weight: 400;
    line-height: 50px;
}

/* 12.3 list
---------------------------------------------------------------------------*/
.breadcrumb {
    padding: 0;
    margin-bottom: 0;
    list-style: none;
    text-align: center;
    background-color: transparent;

    -webkit-border-radius: 0;
       -moz-border-radius: 0;
         -o-border-radius: 0;
            border-radius: 0;
}

/* 12.4 items
---------------------------------------------------------------------------*/
.breadcrumb > li + li:before,
.breadcrumb > .active {
  color: #333333;
}

/* 12.5 Typography
---------------------------------------------------------------------------*/
.page-description h3 {
    font-weight: 400;
    margin-top: 10px;
    padding-bottom: 0;
    text-align: center;
}




/* ==========================================================================
   13. Timeline Graph
========================================================================== */
/* 13.1 Wrapper
---------------------------------------------------------------------------*/
.timeline-graph {
    overflow: hidden;
    list-style: none;
    position: relative;
    margin: 0 0 30px 0;
    padding: 40px 0 0 0;
}

/* 13.2 list
---------------------------------------------------------------------------*/
.timeline-graph li { margin-top: -54px; display: block; }
.timeline-graph li:first-child { margin-top: 0; }

/* 13.3 line
---------------------------------------------------------------------------*/
.timeline-graph:before {
    top: 0;
    left: 50%;
    width: 6px;
    height: 100%;
    margin-left: -3px;
    content: '';
    position: absolute;

    background: rgba(204, 204, 204, 1);
    background: -moz-linear-gradient(top, rgba(204, 204, 204, 0) 0%, rgba(204, 204, 204, 1) 8%, rgba(204, 204, 204, 1) 92%, rgba(204, 204, 204, 0) 100%);
    background: -webkit-linear-gradient(top, rgba(204, 204, 204, 0) 0%, rgba(204, 204, 204, 1) 8%, rgba(204, 204, 204, 1) 92%, rgba(204, 204, 204, 0) 100%);
    background: -o-linear-gradient(top, rgba(204, 204, 204, 0) 0%, rgba(204, 204, 204, 1) 8%, rgba(204, 204, 204, 1) 92%, rgba(204, 204, 204, 0) 100%);
    background: -ms-linear-gradient(top, rgba(204, 204, 204, 0) 0%, rgba(204, 204, 204, 1) 8%, rgba(204, 204, 204, 1) 92%, rgba(204, 204, 204, 0) 100%);
    background: linear-gradient(to bottom, rgba(204, 204, 204, 0) 0%, rgba(204, 204, 204, 1) 8%, rgba(204, 204, 204, 1) 92%, rgba(204, 204, 204, 0) 100%);
}

/* 13.4 Date
---------------------------------------------------------------------------*/
/* 13.4.1 container (divided by 2 left & right)
---------------------------------------------------------------------------*/
/* 13.4.1.1 container (odd)
---------------------------------------------------------------------------*/
.timeline-graph > li .tm-dt {
    float: left;
    margin: -32px 10px 0;
}
/* 13.4.1.2 container (even)
---------------------------------------------------------------------------*/
.timeline-graph > li:nth-child(even) .tm-dt {
    float: right;
    margin: -32px 10px 0 0;
}

/* 13.4.2 Typography
---------------------------------------------------------------------------*/
.timeline-graph > li .tm-dt span {
    color: #ffffff;
    font-size: 18px;
    padding: 9px 10px;
    text-align: left;
    background-color: #39F;
}
.timeline-graph > li:nth-child(even) .tm-dt span {
    text-align: right;
}

/* 13.5 post (divided by 2 left & right)
---------------------------------------------------------------------------*/
/* 13.5.1 even posts
---------------------------------------------------------------------------*/
.timeline-graph > li .tm-label {
    width: 47%;
    position: relative;
    margin: -40px 0 0 53%;
    padding: 15px 15px 5px;
    background-color: #ffffff;

    -webkit-border: 1px solid #e4e4e4;
       -moz-border: 1px solid #e4e4e4;
         -o-border: 1px solid #e4e4e4;
            border: 1px solid #e4e4e4;
}
/* 13.5.2 odd posts
---------------------------------------------------------------------------*/
.timeline-graph > li:nth-child(odd) .tm-label {
    margin: -40px 0 0 0;
}

/* 13.6 Timeline Graph title
---------------------------------------------------------------------------*/
.timeline-graph > li .tm-label h4 {
    margin: 0 0 10px 0;
    padding: 0 0 10px 0;
    position: relative;
}
.timeline-graph > li .tm-label h4:after {
    left: 0;
    top: 100%;
    width: 100%;
    height: 1px;
    content: '';
    position: absolute;

    background-image: -webkit-linear-gradient(360deg, rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0));
    background-image: -moz-linear-gradient(360deg, rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0));
    background-image: -ms-linear-gradient(360deg, rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0));
    background-image: -o-linear-gradient(360deg, rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0));
    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0));
}

.timeline-graph > li:hover .tm-label h4 { color: #39F; }

/* 13.7 Timeline Graph triangle
---------------------------------------------------------------------------*/
/* 13.7.1 triangle (even)
---------------------------------------------------------------------------*/
.timeline-graph > li .tm-label:before {
    width: 0;
    height: 0;
    top: 10px;
    right: 100%;
    content: " ";
    position: absolute;

    -webkit-border: solid transparent;
       -moz-border: solid transparent;
         -o-border: solid transparent;
            border: solid transparent;

    -webkit-border-width: 10px;
       -moz-border-width: 10px;
         -o-border-width: 10px;
            border-width: 10px;

    -webkit-border-right-color: #e4e4e4;
       -moz-border-right-color: #e4e4e4;
         -o-border-right-color: #e4e4e4;
            border-right-color: #e4e4e4;
}
.timeline-graph > li .tm-label:after {
    width: 0;
    height: 0;
    top: 11px;
    right: 100%;
    content: " ";
    position: absolute;

    -webkit-border: solid transparent;
       -moz-border: solid transparent;
         -o-border: solid transparent;
            border: solid transparent;

    -webkit-border-width: 9px;
       -moz-border-width: 9px;
         -o-border-width: 9px;
            border-width: 9px;

    -webkit-border-right-color: #ffffff;
       -moz-border-right-color: #ffffff;
         -o-border-right-color: #ffffff;
            border-right-color: #ffffff;
}

/* 13.7.2 triangle (odd)
---------------------------------------------------------------------------*/
.timeline-graph > li:nth-child(odd) .tm-label:before {
    right: -20px;

    -webkit-border-left-color: #e4e4e4;
       -moz-border-left-color: #e4e4e4;
         -o-border-left-color: #e4e4e4;
            border-left-color: #e4e4e4;

    -webkit-border-right-color: transparent;
       -moz-border-right-color: transparent;
         -o-border-right-color: transparent;
            border-right-color: transparent;
}
.timeline-graph > li:nth-child(odd) .tm-label:after {
    right: -18px;

    -webkit-border-left-color: #ffffff;
       -moz-border-left-color: #ffffff;
         -o-border-left-color: #ffffff;
            border-left-color: #ffffff;

    -webkit-border-right-color: transparent;
       -moz-border-right-color: transparent;
         -o-border-right-color: transparent;
            border-right-color: transparent;
}

/* 13.8 Timeline Graph icons
---------------------------------------------------------------------------*/
.timeline-graph > li .tm-icon {
    top: 0;
    left: 50%;
    z-index: 99;
    speak: none;
    width: 40px;
    height: 40px;
    color: #ffffff;
    font-size: 24px;
    line-height: 40px;
    position: relative;
    text-align: center;
    font-style: normal;
    font-weight: normal;
    margin: 0 0 0 -20px;
    font-variant: normal;
    text-transform: none;
    background-color: #39F;
    -webkit-font-smoothing: antialiased;

    -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
         -o-border-radius: 50%;
            border-radius: 50%;

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

/* 13.9 Hover
---------------------------------------------------------------------------*/
.timeline-graph li:hover .tm-icon { background-color: #333333; }
.timeline-graph li:hover .tm-label { background-color: #e4e4e4; }
.timeline-graph li:hover .tm-label p { color: #333333; }

.timeline-graph > li:hover .tm-label:after {
    -webkit-border-right-color: #e4e4e4;
       -moz-border-right-color: #e4e4e4;
         -o-border-right-color: #e4e4e4;
            border-right-color: #e4e4e4;
}
.timeline-graph > li:nth-child(odd):hover .tm-label:after {
    -webkit-border-left-color: #e4e4e4;
       -moz-border-left-color: #e4e4e4;
         -o-border-left-color: #e4e4e4;
            border-left-color: #e4e4e4;

    -webkit-border-right-color: transparent;
       -moz-border-right-color: transparent;
         -o-border-right-color: transparent;
            border-right-color: transparent;
}




/* ==========================================================================
   14. Text Widget
========================================================================== */
/* 14.1 Wrapper
---------------------------------------------------------------------------*/
.text-widget {
    padding: 0;
    overflow: hidden;
    margin-bottom: 30px;
}
.text-widget .progress:last-child { margin-bottom: 0; }
/* 14.2 Title
---------------------------------------------------------------------------*/
.text-widget-title {
    width: 100%;
    text-align: left;
    position: relative;
    margin: 0 0 30px 0;
}
.text-widget-title:after {
    left: 0;
    top: 100%;
    width: 100%;
    height: 1px;
    content: '';
    position: absolute;

    background-image: -webkit-linear-gradient(360deg, rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0));
    background-image: -moz-linear-gradient(360deg, rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0));
    background-image: -ms-linear-gradient(360deg, rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0));
    background-image: -o-linear-gradient(360deg, rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0));
    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0));
}

/* 14.3 Typography
---------------------------------------------------------------------------*/
.text-widget-title h3 { font-weight: 400; }
.text-widget p:last-child { margin-bottom: 0; }

/* 14.4 image
---------------------------------------------------------------------------*/
.text-widget-img {
    float: left;
    margin-bottom: 10px;
    margin-right: 10px;
    padding: 4px;
    background-color: #ffffff;
    border: 1px solid #e4e4e4;
}
.text-widget-img img {
    width: 178px;
    height: 100px;
}




/* ==========================================================================
   15. Testimonial Slider
========================================================================== */
/* 15.1 Necessary Styles
---------------------------------------------------------------------------*/
.flexslider.testimonial-flexslider {
    margin: 0;
    padding: 0;
    background-color: transparent;

    -webkit-border: none;
       -moz-border: none;
         -o-border: none;
            border: none;

    -webkit-border-radius: 0;
       -moz-border-radius: 0;
        -ms-border-radius: 0;
         -o-border-radius: 0;
            border-radius: 0;

    -webkit-box-shadow: none;
       -moz-box-shadow: none;
         -o-box-shadow: none;
            box-shadow: none;
}

/* 15.2 Direction Nav
---------------------------------------------------------------------------*/
.testimonial-flexslider .flex-direction-nav a  {
    top: 0;
    right: 0;
    opacity: 1;
    width: 20px;
    height: 30px;
    color: #39F;
    text-shadow: none;
    text-align: right;
    position: absolute;
    margin: -30px 0 0 0;
}
.testimonial-flexslider .flex-direction-nav .flex-prev {
    left: auto;
    right: 20px;
    text-align: left;
}
.testimonial-flexslider .flex-direction-nav .flex-next {
    right: 0;
    text-align: right;
}
.testimonial-flexslider:hover .flex-prev {
    opacity: 1;
    left: auto;
}
.testimonial-flexslider:hover .flex-next {
    opacity: 1;
}
.testimonial-flexslider:hover .flex-next:hover,
.testimonial-flexslider:hover .flex-prev:hover {
    opacity: 1;
    color: #333333;
}
.testimonial-flexslider .flex-direction-nav a:before  {
    font-size: 20px;
    line-height: 33px;
}

/* 15.3 testimonial Wrapper
---------------------------------------------------------------------------*/
.testimonial {
    margin: 0;
    position: relative;
    padding: 20px 20px 10px;
    background-color: #ffffff;

    -webkit-border: 1px solid #e4e4e4;
       -moz-border: 1px solid #e4e4e4;
         -o-border: 1px solid #e4e4e4;
            border: 1px solid #e4e4e4;
}


/* 15.3.1 Arrow
---------------------------------------------------------------------------*/
.arrow-down {
    width: 0;
    height: 0;
    position:relative;
    margin: 0 0 0 33px;

    -webkit-border-top: 10px solid #e4e4e4;
       -moz-border-top: 10px solid #e4e4e4;
         -o-border-top: 10px solid #e4e4e4;
            border-top: 10px solid #e4e4e4;

    -webkit-border-left: 10px solid transparent;
       -moz-border-left: 10px solid transparent;
         -o-border-left: 10px solid transparent;
            border-left: 10px solid transparent;

    -webkit-border-right: 10px solid transparent;
       -moz-border-right: 10px solid transparent;
         -o-border-right: 10px solid transparent;
            border-right: 10px solid transparent;
}
.arrow-down:before {
    content: '';
    width: 0;
    height: 0;
    left: -33px;
    bottom: 1px;
    position: absolute;
    margin: 0 0 0 23px;

    -webkit-border-top: 10px solid #e4e4e4;
       -moz-border-top: 10px solid #e4e4e4;
         -o-border-top: 10px solid #e4e4e4;
            border-top: 10px solid #ffffff;

   -webkit-border-left: 10px solid transparent;
      -moz-border-left: 10px solid transparent;
        -o-border-left: 10px solid transparent;
           border-left: 10px solid rgba(0, 0, 0, 0);

  -webkit-border-right: 10px solid transparent;
     -moz-border-right: 10px solid transparent;
       -o-border-right: 10px solid transparent;
          border-right: 10px solid rgba(0, 0, 0, 0);
}


/* 15.3.2 client
---------------------------------------------------------------------------*/
.client {
    height: auto;
    overflow: hidden;
    margin: 0 0 0 8px;
}

/* 15.3.2.1 image
---------------------------------------------------------------------------*/
.client div.thumbnail {
    float: left;
    margin: 0 10px 0 0;
}
.client div.thumbnail img{
    width: 60px;
    height: 60px;
}

/* 15.3.2.2 Typography
---------------------------------------------------------------------------*/
.testimonial p { margin-bottom: 10px !important; }
.client strong {
    color: #39F;
    display: block;
    padding-top: 11px;
}
.client span {
    display: block;
    font-size: 12px;
}
.client p {
    color: #333333;
    text-align: left;
    margin: 0 0 0 25px;
}




/* ==========================================================================
   16. Our Team
========================================================================== */
/* 16.1 Team Slider
========================================================================== */
/* 16.1.1 Necessary Styles
---------------------------------------------------------------------------*/
.col-md-12.nopad { padding: 0; }
.flexslider.team-flexslider {
    padding: 0;
    margin: 0 0 19px 0;
    background-color: transparent;

    -webkit-border: none;
       -moz-border: none;
         -o-border: none;
            border: none;

    -webkit-border-radius: 0;
       -moz-border-radius: 0;
        -ms-border-radius: 0;
         -o-border-radius: 0;
            border-radius: 0;

    -webkit-box-shadow: none;
       -moz-box-shadow: none;
         -o-box-shadow: none;
            box-shadow: none;
}

/* 16.1.2 Direction Nav
---------------------------------------------------------------------------*/
.team-flexslider .flex-control-nav {
    bottom: 0;
    height: 11px
}
.team-flexslider .flex-control-paging li a { background-color: rgba(0, 0, 0, 0.7); }
.team-flexslider .flex-control-paging li a.flex-active,
.team-flexslider .flex-control-paging li a:hover { background-color: #39F; }

/* 16.2 Team style1
---------------------------------------------------------------------------*/
/* 16.2.1 Wrapper
---------------------------------------------------------------------------*/
.team-style1 {
    width: 100%;
    margin: 0 auto;
    padding: 0 1px;
    overflow: hidden;
    list-style: none;
    text-align: center;
}

/* 16.2.2 items
---------------------------------------------------------------------------*/
.team-style1 li {
    float: left;
    width: 262px;
    overflow: hidden;
    position: relative;
    display: inline-block;
    padding: 4px 4px 0 4px;
    margin: 0 15px 30px 15px;
    background-color: #ffffff;

    -webkit-border: 1px solid #e4e4e4;
       -moz-border: 1px solid #e4e4e4;
         -o-border: 1px solid #e4e4e4;
            border: 1px solid #e4e4e4;
}

/* 16.2.3 image cover
---------------------------------------------------------------------------*/
.team-style1 li .img-cover {
    margin: 0;
    width: 100%;
    overflow: hidden;
    position: relative;
}
.team-style1 li .img-cover img { width: 100%; }

/* 16.2.4 Member image
---------------------------------------------------------------------------*/
.team-style1 li .member-img {
    z-index: 2;
    padding: 4px;
    width: 128px;
    height: 128px;
    overflow: hidden;
    position: relative;
    margin: -64px auto 15px;
    background-color: #ffffff;

    -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
         -o-border-radius: 50%;
            border-radius: 50%;

    -webkit-transition: all 0.3s ease-in-out;
       -moz-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
	     -o-transition: all 0.3s ease-in-out;
	        transition: all 0.3s ease-in-out;
}
.team-style1 li .member-img .img-shine {
    top: -185px;
    content: '';
    left: -185px;
    width: 180px;
    height: 180px;
    position: absolute;

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

    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);

    background: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0)50%, rgba(255, 255, 255, 0.4)100%);
    background: -moz-linear-gradient(0deg, rgba(255, 255, 255, 0)50%, rgba(255, 255, 255, 0.4)100%);
    background: -ms-linear-gradient(0deg, rgba(255, 255, 255, 0)50%, rgba(255, 255, 255, 0.4)100%);
    background: -o-linear-gradient(0deg, rgba(255, 255, 255, 0)50%, rgba(255, 255, 255, 0.4)100%);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0)50%, rgba(255, 255, 255, 0.4)100%);
}

.team-style1 li .member-img img {
    width: 100%;

    -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
         -o-border-radius: 50%;
            border-radius: 50%;
}

/* 16.3.5 Title Caption
---------------------------------------------------------------------------*/
.team-style1 li .title-caption {
    z-index: 1;
    overflow: hidden;
}
.team-style1 li .title-caption h3.name { padding-bottom: 10px; }
.team-style1 li .title-caption p.title {
    margin-bottom: 15px;
    letter-spacing: 1px;
}




/* ==========================================================================
   17. About Me
========================================================================== */
/* 17.1 Wrapper
---------------------------------------------------------------------------*/
.about-me-wrapper { width: 100%; }
.about-me { width: 100%; }

/* 17.2 image Cover
---------------------------------------------------------------------------*/
.about-me .img-cover {
    z-index: 1;
    position: relative;
}

/* 17.3 image
---------------------------------------------------------------------------*/
.about-me .member-img {
    width: 150px;
    height: 150px;
    margin: -150px 0 30px 30px;
    z-index: 2;
    position: relative;
}

/* 17.4 info
---------------------------------------------------------------------------*/
.about-me .member-info {
    z-index: 3;
    position: relative;
    margin: -104px 0 30px 180px;
}

/* 17.5 Typography
---------------------------------------------------------------------------*/
.about-me .member-info h2,
.about-me .member-info h3 {
    padding: 0 10px;
    padding-bottom: 0;
    text-transform: uppercase;
}
.about-me .member-info h2 {
    color: #ffffff;
    font-weight: 400;
    margin-right: 5px;
    margin-bottom: 5px;
    background-color: rgba(0, 0, 0, 0.5);
}




/* ==========================================================================
   18. Personal Details
========================================================================== */
/* 18.1 Wrapper
---------------------------------------------------------------------------*/
 ul.personal-details {
    padding: 0;
    list-style: none;
    overflow: hidden;
    margin: 0 0 9px 0;
}

/* 18.2 items
---------------------------------------------------------------------------*/
ul.personal-details li {
    padding: 0;
    width: 100%;
    float: left;
    display: block;
    margin: 0 0 5px 0;
}

/* 18.3 Title
---------------------------------------------------------------------------*/
ul.personal-details li span.title {
    float: left;
    color: #333333;
    text-align: left;
    font-weight: bold;
    letter-spacing: 1px;
    font-family: "Lato", Helvetica, Arial, sans-serif;
}

/* 18.4 Value
---------------------------------------------------------------------------*/
ul.personal-details li span.value {
    float: right;
    text-align: right;
}




/* ==========================================================================
   19. Member Social icons
========================================================================== */
/* 19.1 Wrapper
---------------------------------------------------------------------------*/
.member-social-icons {
    margin: 0;
    padding: 0;
    position: relative;
    text-align: center;
}
.member-social-icons ul {
    margin: 0;
    padding: 0;
    overflow: hidden;
    list-style: none;
    text-align: center;
}

/* 19.2 items
---------------------------------------------------------------------------*/
.member-social-icons ul li {
    padding: 0;
    width: 30px;
    height: 30px;
    margin: 0 0 0 10px;
    display: inline-block;
}
.member-social-icons ul li:first-child { margin: 0; }

/* 19.3 Anchor
---------------------------------------------------------------------------*/
.member-social-icons ul li a {
    width: 30px;
    height: 30px;
    display: block;
    color: #ffffff;
    font-size: 18px;
    line-height: 30px;
    text-align: center;
    background-color: #39F;

    -webkit-border-radius: 50px;
       -moz-border-radius: 50px;
         -o-border-radius: 50px;
            border-radius: 50px;
}
.member-social-icons ul li a:hover { background-color: #333333; }




/* ==========================================================================
   20. Accordion
========================================================================== */
/* 20.1 Container
---------------------------------------------------------------------------*/
.ac-container {
    margin: 0 auto;
}
.ac-container ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.ac-container ul li {
    z-index: 20;
    height: 40px;
    display: block;
    padding: 0 10px;
    overflow: hidden;
    margin-bottom: 2px;
    position: relative;
    background-color: #ffffff;

    -webkit-border: 1px solid #e4e4e4;
       -moz-border: 1px solid #e4e4e4;
         -o-border: 1px solid #e4e4e4;
            border: 1px solid #e4e4e4;
}

/* 20.2 Anchor
---------------------------------------------------------------------------*/
.ac-container ul li > a {
    outline:none;
    color: #333333;
    display: block;
    font-size: 18px;
	line-height: 38px;
	position: relative;

	-webkit-transition: all 0.2s ease-in-out;
       -moz-transition: all 0.2s ease-in-out;
        -ms-transition: all 0.2s ease-in-out;
	     -o-transition: all 0.2s ease-in-out;
	        transition: all 0.2s ease-in-out;
}
.ac-container ul li a:hover { padding-left: 5px; }
.ac-container ul li a:hover:after { color: #333333; }


/* 20.3 Arrow
---------------------------------------------------------------------------*/
.ac-container ul li a:after {
    top: 0;
	right: 0;
	width: 24px;
	height: 24px;
    color: #39F;
    content: "\f078";
    text-align: right;
    position: absolute;
    font-family: 'FontAwesome';
}
.ac-container ul li.ac-open  a:after {
	color: #333333;
    content: "\f077";
}

/* 20.4 Content
---------------------------------------------------------------------------*/
.ac-content {
    display: none;
    padding: 10px 0;
    overflow: hidden;
}




/* ==========================================================================
   21. Circle Progress Bar
========================================================================== */
/* 21.1 Wrapper
---------------------------------------------------------------------------*/
.circle-progress-wrapper ul {
    margin: 0;
    padding: 0;
    width: 100%;
    list-style: none;
    text-align: center;
}
.circle-progress-wrapper ul li {
    margin: 0 10px;
    position: relative;
    display: inline-block;
}

/* 21.2 item
---------------------------------------------------------------------------*/
.round-skill {
    padding: 0;
    width: 100%;
    overflow: hidden;
    text-align: center;
    margin: 0 auto 30px;

    -webkit-transition-duration: 0.3s;
       -moz-transition-duration: 0.3s;
        -ms-transition-duration: 0.3s;
         -o-transition-duration: 0.3s;
            transition-duration: 0.3s;
}
.round-skill input { display: none; }

/* 21.3 icon
---------------------------------------------------------------------------*/
.round-skill div.facebook_Count,
.round-skill div.youtube_Count {
    padding: 0;
    width: 100%;
    color: #ffffff;
    font-size: 24px;
    font-weight: 400;
    overflow: hidden;
    line-height: 27px;
    margin: -114px 0 0;
    text-align: center;
    letter-spacing: 1px;
    vertical-align: middle;
    font-family: "Lato",Helvetica,Arial,sans-serif;
}

/* 21.4 Typography
---------------------------------------------------------------------------*/
.round-skill h2 {
    padding: 0;
    width: 100%;
    color: #ffffff;
    font-size: 24px;
    font-weight: 400;
    overflow: hidden;
    line-height: 27px;
    text-align: center;
    margin: -114px 0 0;
}
.round-skill h3 {
    padding: 0;
    width: 100%;
    color: #39F;
    overflow: hidden;
    text-align: center;
    margin: 10px 0 43px;
}




/* ==========================================================================
   22. Video
========================================================================== */
.videos {
    padding: 4px;
    margin-bottom: 30px;
    background-color: #ffffff;

    -webkit-border: 1px solid #e4e4e4;
       -moz-border: 1px solid #e4e4e4;
         -o-border: 1px solid #e4e4e4;
            border: 1px solid #e4e4e4;
}
iframe {
    -webkit-border: none;
       -moz-border: none;
         -o-border: none;
            border: none;
}




/* ==========================================================================
   23. Pricing Boxs
========================================================================== */
/* 23.1 Wrapper
---------------------------------------------------------------------------*/
.pricing-boxs .col-md-3,
.pricing-boxs .col-md-4 {
    padding: 0;
    overflow: visible;
}


/* 23.2 Pricing Box
========================================================================== */
/* 23.2.1 Wrapper
---------------------------------------------------------------------------*/
.pricing-box,
.feature-pricing-box {
    padding: 0;
    width: 100%;
    overflow: hidden;
    text-align: center;
    margin: 0 0 30px 0;
    position: relative;
    background-color: #ffffff;

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

    -webkit-box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.2);
       -moz-box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.2);
         -o-box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.2);
            box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.2);
}

/* 23.2.2 Title & Price Wrapper
---------------------------------------------------------------------------*/
.pricing-box .price {
    background-image: -webkit-linear-gradient(270deg, rgba(68, 68, 68, 1), rgba(51, 51, 51, 1));
    background-image: -moz-linear-gradient(270deg, rgba(68, 68, 68, 1), rgba(51, 51, 51, 1));
    background-image: -ms-linear-gradient(270deg, rgba(68, 68, 68, 1), rgba(51, 51, 51, 1));
    background-image: -o-linear-gradient(270deg, rgba(68, 68, 68, 1), rgba(51, 51, 51, 1));
    background-image: linear-gradient(180deg, rgba(68, 68, 68, 1), rgba(51, 51, 51, 1));

}
.feature-pricing-box .price {
    background-image: -webkit-linear-gradient(270deg, rgba(225, 7, 7, 0.6), rgba(225, 7, 7, 1));
    background-image: -moz-linear-gradient(270deg, rgba(225, 7, 7, 0.6), rgba(225, 7, 7, 1));
    background-image: -ms-linear-gradient(270deg, rgba(225, 7, 7, 0.6), rgba(225, 7, 7, 1));
    background-image: -o-linear-gradient(270deg, rgba(225, 7, 7, 0.6), rgba(225, 7, 7, 1));
    background-image: linear-gradient(180deg, rgba(225, 7, 7, 0.6), rgba(225, 7, 7, 1));
}

/* 23.2.3 Details
---------------------------------------------------------------------------*/
.pricing-box ul,
.feature-pricing-box ul {
	padding: 0 20px;
    list-style: none;
    margin: 0 0 40px 0;
}
.pricing-box li,
.feature-pricing-box li {
	padding: 10px 0;
    cursor: default;

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

    -webkit-border-bottom: 1px dashed #e4e4e4;
       -moz-border-bottom: 1px dashed #e4e4e4;
         -o-border-bottom: 1px dashed #e4e4e4;
            border-bottom: 1px dashed #e4e4e4;
}

/* 23.2.4 Typography
---------------------------------------------------------------------------*/
.pricing-box .price h3,
.pricing-box .price h1,
.feature-pricing-box .price h3,
.feature-pricing-box .price h1 {
    color: #ffffff;
    padding: 10px 0;
    font-weight: 400;
    text-transform: uppercase;

}
.pricing-box .price h3 { background-color: #333333; }
.pricing-box .price h1,
.feature-pricing-box .price h1 {
    font-size: 50px;
    padding: 20px 0;
    margin-bottom: 20px;
}
.pricing-box .price h1 span,
.feature-pricing-box .price h1 span {
    font-size: 30px;
    text-transform: uppercase;
}
.feature-pricing-box .price h3 { background-color: #39F; }

/* 23.2.5 Button
---------------------------------------------------------------------------*/
.feature-pricing-box .btn-black { background-color: #39F !important; }
.feature-pricing-box .btn-black:hover,
.feature-pricing-box .btn-black:focus,
.feature-pricing-box .btn-black:active,
.feature-pricing-box .btn-black.active,
.feature-pricing-box .btn-black-o:hover,
.feature-pricing-box .btn-black-o:focus,
.feature-pricing-box .btn-black-o:active,
.feature-pricing-box .btn-black-o.active {
    color: #ffffff;
    background-color: #333333 !important;
}

/* 23.2.6 Hover
---------------------------------------------------------------------------*/
.pricing-box:hover,
.feature-pricing-box:hover {
    z-index: 3;

    -webkit-transform: scale(1.02);
       -moz-transform: scale(1.02);
         -o-transform: scale(1.02);
            transform: scale(1.02);

    -webkit-box-shadow: 0 2px 5px 2px rgba(0, 0, 0, 0.3);
       -moz-box-shadow: 0 2px 5px 2px rgba(0, 0, 0, 0.3);
         -o-box-shadow: 0 2px 5px 2px rgba(0, 0, 0, 0.3);
            box-shadow: 0 2px 5px 2px rgba(0, 0, 0, 0.3);
}
.pricing-box li:hover,
.feature-pricing-box li:hover {
    color: #39F;
}




/* ==========================================================================
   24. Team grid
========================================================================== */
/* 24.1 Wrapper
---------------------------------------------------------------------------*/
.team-grid {
    width: 100%;
    padding: 0 1px;
    margin: 0 auto;
    overflow: hidden;
    list-style: none;
    text-align: center;
}

/* 24.2 items
---------------------------------------------------------------------------*/
.team-grid li {
    float: left;
    width: 262px;
    padding: 4px;
    overflow: hidden;
    position: relative;
    display: inline-block;
    margin: 0 15px 30px 15px;
    background-color: #ffffff;

    -webkit-border: 1px solid #e4e4e4;
       -moz-border: 1px solid #e4e4e4;
         -o-border: 1px solid #e4e4e4;
            border: 1px solid #e4e4e4;
}

/* 24.3 image
---------------------------------------------------------------------------*/
.team-grid li .img-figure {
    margin: 0;
    z-index: 0;
    height: auto;
    overflow: hidden;
    position: relative;
}
.team-grid li .img-figure img {
    width: 252px;
    height: 252px;
    display: block;
    position: relative;

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

/* 24.4 Title Caption
---------------------------------------------------------------------------*/
.team-grid li .title-caption {
    width: 100%;
    height: auto;
    overflow: hidden;
    position: relative;
    background-color: rgba(225, 7, 7, 1);
}
.team-grid li .title-caption:after {
    top: 0;
    left: 0;
    z-index: 1;
    content: '';
    width: 100%;
    height: 50px;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.1);
}

.team-grid li .title-caption span {
    z-index: 2;
    padding: 10px;
    color: #ffffff;
    font-size: 18px;
    font-weight: 400;
    position: relative;
    letter-spacing: 1px;
    background-color: transparent;
    font-family: "Lato", Helvetica, Arial, sans-serif;
}
.team-grid li .title-caption span:first-child {
    float: left;
}
.team-grid li .title-caption span:last-child {
    float: right;
}

/* 24.5 Containt
---------------------------------------------------------------------------*/
.team-grid li .containt {
    margin-top: 10px;
    text-align: left;
    padding: 4px 4px;
}

/* 24.6 Social icons
---------------------------------------------------------------------------*/
/* 24.6.1 Wrapper
---------------------------------------------------------------------------*/
.team-grid li .social-icons {
    margin: 0;
    position: relative;
    text-align: center;
    padding: 17px 0 0 0;
}
.team-grid li .social-icons:after {
    left: 0;
    top: 0;
    width: 100%;
    height: 1px;
    content: '';
    position: absolute;

    background-image: -webkit-linear-gradient(360deg, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0));
    background-image: -moz-linear-gradient(360deg, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0));
    background-image: -ms-linear-gradient(360deg, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0));
    background-image: -o-linear-gradient(360deg, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0));
    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0));
}

/* 24.6.2 list
---------------------------------------------------------------------------*/
.team-grid li .social-icons ul {
    margin: 0;
    padding: 0;
    overflow: hidden;
    list-style: none;
    text-align: center;
}

/* 24.6.3 items
---------------------------------------------------------------------------*/
.team-grid li .social-icons ul li {
    padding: 0;
    float: none;
    width: 30px;
    height: 30px;
    margin: 0 0 6px 6px;
    display: inline-block;

    -webkit-border: none;
       -moz-border: none;
         -o-border: none;
            border: none;
}
.team-grid li .social-icons ul li:first-child { margin: 0 0 6px 0; }

/* 24.6.4 Anchor
---------------------------------------------------------------------------*/
.team-grid li .social-icons ul li a {
    width: 30px;
    height: 30px;
    display: block;
    color: #ffffff;
    font-size: 18px;
    line-height: 30px;
    text-align: center;
    background-color: #39F;

    -webkit-border-radius: 50px;
       -moz-border-radius: 50px;
         -o-border-radius: 50px;
            border-radius: 50px;
}

/* 24.6.5 Hover
---------------------------------------------------------------------------*/
.team-grid li .social-icons ul li a:hover { background-color: #333333; }
.team-grid li:hover .img-figure img {
    -webkit-transform: rotate(-10deg) scale(1.3);
       -moz-transform: rotate(-10deg) scale(1.3);
        -ms-transform: rotate(-10deg) scale(1.3);
         -o-transform: rotate(-10deg) scale(1.3);
            transform: rotate(-10deg) scale(1.3);
}




/* ==========================================================================
   25. 404 Error
========================================================================== */
.error_404 {
    margin: 45px 0 62px 0;
    text-align: center;
}
.error_404 h1 { margin-bottom: 10px; }
.error_404 i {
    margin: 40px 0;
    font-size: 120px;
    font-weight: 700;
    line-height: 100px;
}


/* ==========================================================================
   26. Sitemap
========================================================================== */
/* 26.1 Wrapper
---------------------------------------------------------------------------*/
.sitemap {
    padding: 0;
    width: 100%;
    margin: 0 0 30px 0;
}

/* 26.2 list
---------------------------------------------------------------------------*/
.sitemap ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.sitemap ul ul { margin: 5px 0 0 20px; }

/* 26.3 items
---------------------------------------------------------------------------*/
.sitemap ul li {
    display: block;
    margin: 0 0 5px 0;
    position: relative;
    padding: 0 0 0 15px;
}
.sitemap ul li:before {
    top: 0;
    left: 0;
    font-size: 8px;
    color: #333333;
    content: "\f111";
    line-height: 24px;
    position: absolute;
    font-family: 'FontAwesome';
}
.sitemap ul li li:before { content: "\f10c"; }




/* ==========================================================================
   27. Portfolio grid
========================================================================== */
/* 27.1 Portfolio Filter
========================================================================== */
/* 27.1.1 Wrapper
---------------------------------------------------------------------------*/
.portfolioFilter {
    width: 100%;
    text-align: center;
}
.portfolioFilter ul {
    z-index: 2;
    padding: 0;
    list-style: none;
    text-align: center;
    margin-bottom: 20px;
}

/* 27.1.2 items
---------------------------------------------------------------------------*/
.portfolioFilter ul li {
    margin: 0 10px 10px 0;
    display: inline-block;
    background-color: #39F;

    -webkit-transition: all 0.3s ease-in-out;
       -moz-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
	     -o-transition: all 0.3s ease-in-out;
	        transition: all 0.3s ease-in-out;
}
.portfolioFilter ul li:last-child { margin-right: 0; }
.portfolioFilter ul li:hover {
    background-color: #333333;
}

/* 27.1.3 Anchor
---------------------------------------------------------------------------*/
.portfolioFilter a {
    z-index: 2;
    color: #ffffff;
    display: block;
    font-size: 16px;
    padding: 6px 12px;
    text-align: center;
    position: relative;
    white-space: nowrap;
    font-weight: normal;
    letter-spacing: 1px;
    text-decoration:none;
    vertical-align: middle;
    font-family: "Lato", Helvetica, Arial, sans-serif;

    -webkit-touch-callout: none;
      -webkit-user-select: none;
       -khtml-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
           -o-user-select: none;
}
.selected { background: #333333; }


/* 27.2 Portfolio grid 4 Columns
========================================================================== */
/* 27.2.1 Wrapper
---------------------------------------------------------------------------*/
.portfolio-grid-4 {
    width: 100%;
    padding: 0 1px;
    margin: 0 auto;
    overflow: hidden;
    list-style: none;
    text-align: center;
}

/* 27.2.2 items
---------------------------------------------------------------------------*/
.portfolio-grid-4 li {
    padding: 0;
    float: left;
    width: 262px;
    overflow: hidden;
    position: relative;
    display: inline-block;
    margin: 0 15px 30px 15px;
    background-color: #ffffff;
}

/* 27.2.3 image figure
---------------------------------------------------------------------------*/
.portfolio-grid-4 li .img-figure {
    margin: 0;
    z-index: 0;
    height: auto;
    overflow: hidden;
    position: relative;
}
.portfolio-grid-4 li .img-figure img {
    width: 262px;
    height: 148px;
    display: block;
    position: relative;
}

/* 27.2.4 Title Caption
---------------------------------------------------------------------------*/
.portfolio-grid-4 li .title-caption {
    left: 0;
    bottom: 0;
    z-index: 2;
    width: 100%;
    height: auto;
    overflow: hidden;
    position: absolute;
}
.portfolio-grid-4 li .title-caption span {
    padding: 10px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 400;
    position: relative;
    letter-spacing: 1px;
    background-color: rgba(227, 224, 226, 0.2);
    font-family: "Lato", Helvetica, Arial, sans-serif;
}
.portfolio-grid-4 li .title-caption span:before {
    top: 0;
    left: 0;
    content:'';
    z-index: -1;
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.5);
}
.portfolio-grid-4 li .title-caption span:first-child { float: left; }
.portfolio-grid-4 li .title-caption span:last-child {
    float: right;
    font-size: 18px;
}

/* 27.2.5 image overlayer
---------------------------------------------------------------------------*/
.portfolio-grid-4 li .img-figure-overlayer {
    top: -100%;
    opacity: 1;
    width: 100%;
	height: 100%;
    display: block;
	position: absolute;

    -webkit-border: none;
       -moz-border: none;
         -o-border: none;
            border: none;
}

/* 27.3 Portfolio grid 3 Columns
========================================================================== */
/* 27.3.1 Wrapper
---------------------------------------------------------------------------*/
.portfolio-grid-3 {
    padding: 0;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    list-style: none;
    text-align: center;
}

/* 27.3.2 items
---------------------------------------------------------------------------*/
.portfolio-grid-3 li {
    padding: 0;
    float: left;
    width: 360px;
    overflow: hidden;
    position: relative;
    display: inline-block;
    margin: 0 15px 30px 15px;
    background-color: #ffffff;
}

/* 27.3.3 image figure
---------------------------------------------------------------------------*/
.portfolio-grid-3 li .img-figure {
    margin: 0;
    z-index: 0;
    height: auto;
    overflow: hidden;
    position: relative;
}
.portfolio-grid-3 li .img-figure img {
    width: 360px;
    height: 203px;
    display: block;
    position: relative;
}

/* 27.3.4 Title Caption
---------------------------------------------------------------------------*/
.portfolio-grid-3 li .title-caption {
    left: 0;
    bottom: 0;
    z-index: 2;
    width: 100%;
    height: auto;
    overflow: hidden;
    position: absolute;
}
.portfolio-grid-3 li .title-caption span {
    padding: 10px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 400;
    position: relative;
    letter-spacing: 1px;
    background-color: rgba(227, 224, 226, 0.2);
    font-family: "Lato", Helvetica, Arial, sans-serif;
}
.portfolio-grid-3 li .title-caption span:before {
    top: 0;
    left:0;
    content:'';
    z-index: -1;
    width: 100%;
    height: 100%;
    position:absolute;
    background-color: rgba(0, 0, 0, 0.5);
}
.portfolio-grid-3 li .title-caption span:first-child { float: left; }
.portfolio-grid-3 li .title-caption span:last-child {
    float: right;
    font-size: 18px;
}

/* 27.3.5 image overlayer
---------------------------------------------------------------------------*/
.portfolio-grid-3 li .img-figure-overlayer {
    top: -100%;
    opacity: 1;
    width: 100%;
	height: 100%;
    display: block;
	position: absolute;

    -webkit-border: none;
       -moz-border: none;
         -o-border: none;
            border: none;
}


/* 27.4 Portfolio grid 2 Columns
========================================================================== */
/* 27.4.1 Wrapper
---------------------------------------------------------------------------*/
.portfolio-grid-2 {
    padding: 0;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    list-style: none;
    text-align: center;
}

/* 27.4.2 items
---------------------------------------------------------------------------*/
.portfolio-grid-2 li {
    padding: 0;
    float: left;
    width: 555px;
    overflow: hidden;
    position: relative;
    display: inline-block;
    margin: 0 15px 30px 15px;
    background-color: #ffffff;
}

/* 27.4.3 image figure
---------------------------------------------------------------------------*/
.portfolio-grid-2 li .img-figure {
    margin: 0;
    z-index: 0;
    height: auto;
    overflow: hidden;
    position: relative;
}
.portfolio-grid-2 li .img-figure img {
    width: 555px;
    height: 313px;
    display: block;
    position: relative;
}

/* 27.4.4 Title Caption
---------------------------------------------------------------------------*/
.portfolio-grid-2 li .title-caption {
    left: 0;
    bottom: 0;
    z-index: 2;
    width: 100%;
    height: auto;
    overflow: hidden;
    position: absolute;
}
.portfolio-grid-2 li .title-caption span {
    padding: 10px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 400;
    position: relative;
    letter-spacing: 1px;
    background-color: rgba(227, 224, 226, 0.2);
    font-family: "Lato", Helvetica, Arial, sans-serif;
}
.portfolio-grid-2 li .title-caption span:before {
    top: 0;
    left:0;
    content:'';
    z-index: -1;
    width: 100%;
    height: 100%;
    position:absolute;
    background-color: rgba(0, 0, 0, 0.5);
}
.portfolio-grid-2 li .title-caption span:first-child { float: left; }
.portfolio-grid-2 li .title-caption span:last-child {
    float: right;
    font-size: 18px;
}

/* 27.4.5 image overlayer
---------------------------------------------------------------------------*/
.portfolio-grid-2 li .img-figure-overlayer {
    top: -100%;
    opacity: 1;
    width: 100%;
	height: 100%;
    display: block;
	position: absolute;

    -webkit-border: none;
       -moz-border: none;
         -o-border: none;
            border: none;
}

/* 27.5 isotope
---------------------------------------------------------------------------*/
.isotope,
.isotope .isotope-item {
    -webkit-transition-duration: 0.8s;
       -moz-transition-duration: 0.8s;
        -ms-transition-duration: 0.8s;
         -o-transition-duration: 0.8s;
            transition-duration: 0.8s;
}
.isotope {
    -webkit-transition-property: height, width;
       -moz-transition-property: height, width;
        -ms-transition-property: height, width;
         -o-transition-property: height, width;
            transition-property: height, width;
}
.isotope .isotope-item {
    -webkit-transition-property: -webkit-transform, opacity;
       -moz-transition-property: -moz-transform, opacity;
        -ms-transition-property: -ms-transform, opacity;
         -o-transition-property: -o-transform, opacity;
            transition-property: transform, opacity;
}
/**** disabling Isotope CSS3 transitions ****/
.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
    -webkit-transition-duration: 0s;
       -moz-transition-duration: 0s;
        -ms-transition-duration: 0s;
         -o-transition-duration: 0s;
            transition-duration: 0s;
}
/**** Isotope Filtering ****/
.isotope-item { z-index: 2; }
.isotope-hidden.isotope-item { z-index: 1; }




/* ==========================================================================
   28. Project Slider
========================================================================== */
/* 28.1 Necessary Styles
---------------------------------------------------------------------------*/
.flexslider.project-flexslider {
    padding: 4px;
    margin: 0 0 30px 0;

    -webkit-box-shadow: none;
       -moz-box-shadow: none;
         -o-box-shadow: none;
            box-shadow: none;

    -webkit-border-radius: 0;
       -moz-border-radius: 0;
        -ms-border-radius: 0;
         -o-border-radius: 0;
            border-radius: 0;

    -webkit-border: 1px solid #e4e4e4;
       -moz-border: 1px solid #e4e4e4;
         -o-border: 1px solid #e4e4e4;
            border: 1px solid #e4e4e4;
}

/* 28.2 Direction Nav
---------------------------------------------------------------------------*/
.project-flexslider .flex-direction-nav a  {
    top: 100%;
    opacity: 1;
    width: 40px;
    height: 40px;
    color: #ffffff;
    text-shadow: none;
    text-align: center;
    position: absolute;
    margin: -44px 0 0 0;
    background-color: #39F;
}
.project-flexslider .flex-direction-nav .flex-prev {
    left: auto;
    right: 40px;
}
.project-flexslider .flex-direction-nav .flex-next {
    right: 4px;
    text-align: center;
}
.project-flexslider:hover .flex-prev {
    opacity: 1;
    left: auto;
}
.project-flexslider:hover .flex-next {
    opacity: 1;
    right: 4px;
}
.project-flexslider:hover .flex-next:hover,
.project-flexslider:hover .flex-prev:hover {
    opacity: 1;
    color: #ffffff;
    background-color: #333333;
}
.project-flexslider .flex-direction-nav a:before  {
    font-size: 20px;
    line-height: 40px;
}

/* 28.3 image Overlay
---------------------------------------------------------------------------*/
.project-flexslider .img-figure-overlay {
    top:0;
    left:0;
    z-index: 1;
    opacity: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(0, 0, 0, .3);

    -webkit-transition: all 0.3s ease-in-out;
       -moz-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
         -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
}
.project-flexslider .img-figure-overlay a {
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    color: #ffffff;
    font-size: 18px;
    line-height: 40px;
    margin-top: -20px;
    margin-left: -20px;
    position: absolute;
    text-align: center;
    background-color: #39F;

    -webkit-border-radius: 50%;
	   -moz-border-radius: 50%;
	     -o-border-radius: 50%;
	        border-radius: 50%;
}
.project-flexslider .img-figure-overlay a:hover { background-color: #333333; }
.project-flexslider li:hover .img-figure-overlay { opacity: 1; }




/* ==========================================================================
   29. Quote Slider
========================================================================== */
/* 29.1 Wrapper
---------------------------------------------------------------------------*/
.cbp-qtrotator {
	width: 100%;
	max-width: 800px;
    position: relative;
    margin: 0 auto 30px;
}

/* 29.2 Content
---------------------------------------------------------------------------*/
.cbp-qtrotator .cbp-qtcontent {
	top: 0;
	z-index: 0;
	opacity: 0;
	width: 100%;
    padding: 20px 0 0;
    position: absolute;

    -webkit-border-top: 1px solid #e4e4e4;
       -moz-border-top: 1px solid #e4e4e4;
         -o-border-top: 1px solid #e4e4e4;
            border-top: 1px solid #e4e4e4;

    -webkit-border-bottom: 1px solid #e4e4e4;
       -moz-border-bottom: 1px solid #e4e4e4;
         -o-border-bottom: 1px solid #e4e4e4;
            border-bottom: 1px solid #e4e4e4;
}
.cbp-qtrotator .cbp-qtcontent.cbp-qtcurrent,
.no-js .cbp-qtrotator .cbp-qtcontent {
	opacity: 1;
	z-index: 100;
    position: relative;
}
.cbp-qtrotator .cbp-qtcontent:before,
.cbp-qtrotator .cbp-qtcontent:after {
	content: " ";
	display: table;
}
.cbp-qtrotator .cbp-qtcontent:after {
	clear: both;
}
.cbp-qtprogress {
	top: 0;
    width: 0%;
    height: 1px;
	z-index: 1000;
    position: absolute;
	background-color: #39F;
}




/* ==========================================================================
   30. Skills Tags
========================================================================== */
/* 30.1 Wrapper
---------------------------------------------------------------------------*/
.skills-tag {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow: hidden;
    text-align: center;
}

/* 30.2 items
---------------------------------------------------------------------------*/
.skills-tag li {
    float: left;
    margin: 0 10px 10px 0;
    display: inline-block;
}
.skills-tag li a {
    display: block;
    color: #333333;
    padding: 5px 10px;
    background-color: #e4e4e4;
}

/* 30.3 Hover
---------------------------------------------------------------------------*/
.skills-tag li a:hover {
    color: #ffffff;
    background-color: #333333;
}




/* ==========================================================================
   31. Blog ( Normal Blog )
========================================================================== */
/* 31.1 Loading
---------------------------------------------------------------------------*/
.loading {
    width: 100%;
    display: block;
    color: #333333;
    font-size: 30px;
    text-align: center;
}

/* 31.2 Wrapper
---------------------------------------------------------------------------*/
.blog-normal {
    opacity: 0;
    width: 100%;
    position: relative;
}

/* 31.3 Article
---------------------------------------------------------------------------*/
.blog-normal article {
    width: 50%;
    position: relative;
    padding: 0 15px 30px;
}
article.right-post { padding-right: 0; }
article.left-post { padding-left: 0; }

/* 31.4 Post Wrapper
---------------------------------------------------------------------------*/
article .post-wrapper {
    padding: 15px;
    overflow: hidden;
    position: relative;
    background-color: #ffffff;

    -webkit-border: 1px solid #e4e4e4;
       -moz-border: 1px solid #e4e4e4;
         -o-border: 1px solid #e4e4e4;
            border: 1px solid #e4e4e4;
}
article .post-wrapper:before {
    right: 0;
    bottom: 0;
    z-index: 3;
    padding: 0;
    content: "";
    width: 47px;
    height: 47px;
    position: absolute;
    background-color: #39F;
}
article .post-wrapper:after {
    right: 0;
    bottom: 0;
    z-index: 3;
    width: 47px;
    height: 47px;
    color: #ffffff;
    font-size: 20px;
    font-weight: 400;
    line-height: 47px;
    text-align: center;
    position: absolute;
    padding: 1px 0 0 4px;
    font-family: 'FontAwesome';
}

/* 31.5 Simple Post
---------------------------------------------------------------------------*/
article .post-wrapper.simple-post:after { content: "\f044"; }

/* 31.6 Standard Post
---------------------------------------------------------------------------*/
article .post-wrapper.standard-post:after { content: "\f0f6"; }

/* 31.7 Audio Post
---------------------------------------------------------------------------*/
article .post-wrapper.audio-post:after { content: "\f001"; }
article .post-wrapper.audio-post .post-thumbnail iframe { width: 100%; }
article .post-wrapper.audio-post .post-thumbnail { margin-bottom: 8px; }

/* 31.8 Video Post
---------------------------------------------------------------------------*/
article .post-wrapper.video-post:after { content: "\f03d"; }

/* 31.9 Quote Post
---------------------------------------------------------------------------*/
article .post-wrapper.quote-post:after { content: "\f10e"; }
.single-post blockquote { margin-bottom: 10px; }
article .quote-post .post-thumbnail {
    position: relative;
    padding: 15px 45px;
    background-color: #e4e4e4;
}
article .quote-post .post-thumbnail:before {
    top: 15px;
    left: 15px;
}
article .quote-post .post-thumbnail:before,
article .quote-post .post-thumbnail:after {
    color: #39F;
    font-size: 25px;
    content: "\f10d";
    line-height: 25px;
    font-style: normal;
    position: absolute;
    font-family: 'FontAwesome';
}
article .quote-post .post-thumbnail:after {
    right: 15px;
    bottom: 15px;
    content: "\f10e";
}
article .quote-post .post-thumbnail h2 {
    font-weight: 400;
    text-align: center;
}
article .quote-post .post-thumbnail p.quoter {
    color: #39F;
    font-size: 24px;
    font-weight: 400;
    line-height: 31px;
    text-align: center;
    font-family: "Lato", Helvetica, Arial, sans-serif;
}

/* 31.10 Link Post
---------------------------------------------------------------------------*/
article .post-wrapper.link-post:after { content: "\f0c1"; }
article .link-post .post-thumbnail {
    padding: 15px;
    background-color: #e4e4e4;
}
article .link-post .post-thumbnail a {
    color: #333333;
    font-weight: 400;
}
article .link-post .post-thumbnail a:hover { color: #39F; }

/* 31.11 Slider Post
---------------------------------------------------------------------------*/
article .post-wrapper.slider-post:after { content: "\f03e"; }

/* 31.11.1 Necessary Styles
---------------------------------------------------------------------------*/
article .post-wrapper .flexslider.post-flexslider {
    margin: 0;
    padding: 0;

    -webkit-border: none;
       -moz-border: none;
         -o-border: none;
            border: none;

    -webkit-box-shadow: none;
       -moz-box-shadow: none;
         -o-box-shadow: none;
            box-shadow: none;

    -webkit-border-radius: 0;
       -moz-border-radius: 0;
        -ms-border-radius: 0;
         -o-border-radius: 0;
            border-radius: 0;
}
article .post-wrapper .post-flexslider .slides li img { width: 100%; }

/* 31.11.2 Direction Nav
---------------------------------------------------------------------------*/
article .post-wrapper .post-flexslider .flex-direction-nav a  {
    top: 100%;
    opacity: 1;
    width: 40px;
    height: 40px;
    color: #ffffff;
    text-shadow: none;
    text-align: center;
    position: absolute;
    margin: -40px 0 0 0;
    background-color: #39F;
}
article .post-wrapper .post-flexslider .flex-direction-nav .flex-prev {
    left: auto;
    right: 40px;
}
article .post-wrapper .post-flexslider .flex-direction-nav .flex-next {
    right: 0;
    text-align: center;
}
article .post-wrapper .post-flexslider:hover .flex-prev {
    opacity: 1;
    left: auto;
}
article .post-wrapper .post-flexslider:hover .flex-next {
    right: 0;
    opacity: 1;
}
article .post-wrapper .post-flexslider:hover .flex-next:hover,
article .post-wrapper .post-flexslider:hover .flex-prev:hover {
    opacity: 1;
    color: #ffffff;
    background-color: #333333;
}
article .post-wrapper .post-flexslider .flex-direction-nav a:before  {
    font-size: 20px;
    line-height: 40px;
}

/* 31.11.3 image Overlay
---------------------------------------------------------------------------*/
article .post-wrapper .post-flexslider .img-figure-overlay {
    top:0;
    left:0;
    z-index: 1;
    opacity: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(0, 0, 0, .3);

    -webkit-transition: all 0.3s ease-in-out;
       -moz-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
         -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
}
article .post-wrapper .post-flexslider .img-figure-overlay a {
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    color: #ffffff;
    font-size: 18px;
    line-height: 40px;
    margin-top: -20px;
    margin-left: -20px;
    position: absolute;
    text-align: center;
    background-color: #39F;

    -webkit-border-radius: 50%;
	   -moz-border-radius: 50%;
	     -o-border-radius: 50%;
	        border-radius: 50%;
}
article .post-wrapper .post-flexslider .img-figure-overlay a:hover { background-color: #333333; }
article .post-wrapper .post-flexslider li:hover .img-figure-overlay { opacity: 1; }


/* 31.12 Post Thumbnail
---------------------------------------------------------------------------*/
article .post-wrapper .post-thumbnail {
    width: 100%;
    overflow: hidden;
    margin-bottom: 15px;
}
article .post-wrapper .post-thumbnail img { width: 100%; }
article .post-wrapper .post-thumbnail p { margin-bottom: 0; }

/* 31.13 Post Title
---------------------------------------------------------------------------*/
article .post-wrapper .post-title {
    font-size: 24px;
    font-weight: 400;
    margin: 0 0 15px;
    line-height: 31px;
    padding: 0 0 15px;
    position: relative;
    letter-spacing: 1px;
    font-family: "Lato", Helvetica, Arial, sans-serif;
}
article .post-wrapper .post-title:after {
    left: 0;
    top: 100%;
    width: 100%;
    height: 1px;
    content: '';
    position: absolute;

    background-image: -webkit-linear-gradient(360deg, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0));
    background-image: -moz-linear-gradient(360deg, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0));
    background-image: -ms-linear-gradient(360deg, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0));
    background-image: -o-linear-gradient(360deg, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0));
    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0));
}

/* 31.14 Post Containt
---------------------------------------------------------------------------*/
article .post-wrapper .post-containt {
    width: 100%;
    overflow: hidden;
}

/* 31.15 Post Meta
---------------------------------------------------------------------------*/
article .post-wrapper .post-meta {
    font-size: 14px;
    margin-top: 5px;
    overflow: hidden;
    padding-top: 15px;
    line-height: 17px;
    position: relative;
}
article .post-wrapper .post-meta:after {
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    content: '';
    position: absolute;

    background-image: -webkit-linear-gradient(360deg, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0));
    background-image: -moz-linear-gradient(360deg, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0));
    background-image: -ms-linear-gradient(360deg, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0));
    background-image: -o-linear-gradient(360deg, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0));
    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0));
}

/* 31.15.1 Post Author
---------------------------------------------------------------------------*/
article .post-wrapper .post-meta .post-author {
    float: left;
    position: relative;
    padding: 0 12px 0 16px;
}
article .post-wrapper .post-meta .post-author a { color: #747474; }
article .post-wrapper .post-meta .post-author a:hover { color: #333333; }
article .post-wrapper .post-meta .post-author:before {
    top: 0;
    left: 0;
    color: #39F;
    content: "\f007";
    line-height: 17px;
    position: absolute;
    font-family: 'FontAwesome';
}

/* 31.15.2 Post Date
---------------------------------------------------------------------------*/
article .post-wrapper .post-meta .post-date {
    float: left;
    position: relative;
    padding: 0 12px 0 18px;
}
article .post-wrapper .post-meta .post-date:before {
    top: 0;
    left: 0;
    color: #39F;
    content: "\f073";
    line-height: 17px;
    position: absolute;
    font-family: 'FontAwesome';
}

/* 31.15.3 Post Comment
---------------------------------------------------------------------------*/
article .post-wrapper .post-meta .post-comment {
    float: left;
    position: relative;
    padding: 0 0 0 18px;
}
article .post-wrapper .post-meta .post-comment a { color: #747474; }
article .post-wrapper .post-meta .post-comment a:hover { color: #333333; }
article .post-wrapper .post-meta .post-comment:before {
    top: 0;
    left: 0;
    color: #39F;
    content: "\f086";
    line-height: 17px;
    position: absolute;
    font-family: 'FontAwesome';
}




/* ==========================================================================
   32. Blog ( Timeline Blog )
========================================================================== */
/* 32.1 Wrapper
---------------------------------------------------------------------------*/
.blog-timeline {
    opacity: 0;
    width: 100%;
    position: relative;
}
.blog-timeline:before {
    top: 0;
    left: 50%;
    width: 6px;
    content: '';
    height: 100%;
    margin-left: -3px;
    position: absolute;

    background: rgba(228, 228, 228, 1);
    background: -moz-linear-gradient(top, rgba(228, 228, 228, 0) 0%, rgba(228, 228, 228, 1) 8%, rgba(228, 228, 228, 1) 92%, rgba(228, 228, 228, 0) 100%);
    background: -webkit-linear-gradient(top, rgba(228, 228, 228, 0) 0%, rgba(228, 228, 228, 1) 8%, rgba(228, 228, 228, 1) 92%, rgba(228, 228, 228, 0) 100%);
    background: -o-linear-gradient(top, rgba(228, 228, 228, 0) 0%, rgba(228, 228, 228, 1) 8%, rgba(228, 228, 228, 1) 92%, rgba(228, 228, 228, 0) 100%);
    background: -ms-linear-gradient(top, rgba(228, 228, 228, 0) 0%, rgba(228, 228, 228, 1) 8%, rgba(228, 228, 228, 1) 92%, rgba(228, 228, 228, 0) 100%);
    background: linear-gradient(to bottom, rgba(228, 228, 228, 0) 0%, rgba(228, 228, 228, 1) 8%, rgba(228, 228, 228, 1) 92%, rgba(228, 228, 228, 0) 100%);
}

/* 32.2 Article
---------------------------------------------------------------------------*/
.blog-timeline article {
    width: 50%;
    position: relative;
    padding: 0 30px 30px;
}

/* 32.3 Border
---------------------------------------------------------------------------*/
.blog-timeline article.right-post:after {
    left: 0;
    top: 50%;
    width: 27px;
    height: 6px;
    content: " ";
    position: absolute;
    margin: -10px 0 0 3px;
    background-color: #e4e4e4;
}
.blog-timeline article.left-post:after {
    right: 0;
    top: 50%;
    width: 27px;
    height: 6px;
    content: " ";
    position: absolute;
    margin: -10px 3px 0 0;
    background-color: #e4e4e4;
}




/* ==========================================================================
   33. Load More
========================================================================== */
.load-more {
    text-align: center;
    margin: 0 0 30px 0;
}




/* ==========================================================================
   34. Single Post
========================================================================== */
/* 34.1 Wrapper
---------------------------------------------------------------------------*/
.single-post {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin-bottom: 30px;
    background-color: #ffffff;

    -webkit-border: 1px solid #e4e4e4;
       -moz-border: 1px solid #e4e4e4;
         -o-border: 1px solid #e4e4e4;
            border: 1px solid #e4e4e4;
}
.single-post article .post-wrapper {
    padding: 15px;
    overflow: hidden;
    position: relative;
    background-color: #ffffff;

    -webkit-border: none;
       -moz-border: none;
         -o-border: none;
            border: none;
}

/* 34.2 Title
---------------------------------------------------------------------------*/
.single-post article .post-wrapper .post-title {
    padding: 0;
    color: #39F;
    font-weight: 400;
    position: relative;
}
.single-post article .post-wrapper .post-title h3 {
    color: #39F;
    font-weight: 400;
    padding: 0 0 15px;
}

/* 34.3 Tags
---------------------------------------------------------------------------*/
/* 34.3.1 Wrapper
---------------------------------------------------------------------------*/
.post-tags {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 15px 15px 10px;

    -webkit-border-top: 1px solid #e4e4e4;
       -moz-border-top: 1px solid #e4e4e4;
         -o-border-top: 1px solid #e4e4e4;
            border-top: 1px solid #e4e4e4;
}

/* 34.3.2 list
---------------------------------------------------------------------------*/
.post-tags ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* 34.3.3 items
---------------------------------------------------------------------------*/
.post-tags ul li {
    float: left;
    overflow: hidden;
    margin: 0 5px 5px 0;
    display: inline-block;
}

/* 34.3.4 Anchor
---------------------------------------------------------------------------*/
.post-tags ul li a {
    display: block;
    color: #333333;
    padding: 5px 10px;
    background-color: #e4e4e4;
}
.post-tags ul li a:hover {
    color: #ffffff;
    background-color: #39F;
}

/* 34.3.5 Post Meta
---------------------------------------------------------------------------*/
/* 34.3.5.1 Comment
---------------------------------------------------------------------------*/
.single-post article .post-wrapper .post-meta .post-comment {
    float: left;
    position: relative;
    padding: 0 12px 0 18px;
}

/* 34.3.5.2 catagory
---------------------------------------------------------------------------*/
article .post-wrapper .post-meta .post-catagory {
    float: left;
    position: relative;
    padding: 0 0 0 18px;
}
article .post-wrapper .post-meta .post-catagory a { color: #747474; }
article .post-wrapper .post-meta .post-catagory a:hover { color: #333333; }
article .post-wrapper .post-meta .post-catagory:before {
    top: 0;
    left: 0;
    color: #39F;
    content: "\f07b";
    line-height: 17px;
    position: absolute;
    font-family: 'FontAwesome';
}

/* 34.4 Author Box
---------------------------------------------------------------------------*/
/* 34.4.1 Wrapper
---------------------------------------------------------------------------*/
.post-author-box {
    width: 100%;
    padding: 15px;
    overflow: hidden;
    position: relative;
    margin-bottom: 30px;
    background-color: #ffffff;

    -webkit-border: 1px solid #e4e4e4;
       -moz-border: 1px solid #e4e4e4;
         -o-border: 1px solid #e4e4e4;
            border: 1px solid #e4e4e4;
}

/* 34.4.2 image
---------------------------------------------------------------------------*/
.author-box-img {
    float: left;
    padding: 4px;
    margin-right: 10px;
    display: inline-block;
    background-color: #ffffff;

    -webkit-border: 1px solid #e4e4e4;
       -moz-border: 1px solid #e4e4e4;
         -o-border: 1px solid #e4e4e4;
            border: 1px solid #e4e4e4;
}
.author-box-img img {
    width: 67px;
    height: 67px;
}

/* 34.4.3 Title
---------------------------------------------------------------------------*/
.author-box-title h3 { padding: 0; }

/* 34.4.4 Content
---------------------------------------------------------------------------*/
.author-box-content p { margin: 0; }


/* 34.5 Related Posts
========================================================================== */
/* 34.5.1 Wrapper
---------------------------------------------------------------------------*/
.related-posts {
    width: 100%;
    padding: 15px;
    overflow: hidden;
    position: relative;
    margin-bottom: 30px;
    background-color: #ffffff;

    -webkit-border: 1px solid #e4e4e4;
       -moz-border: 1px solid #e4e4e4;
         -o-border: 1px solid #e4e4e4;
            border: 1px solid #e4e4e4;
}

/* 34.5.2 list
---------------------------------------------------------------------------*/
.related-posts ul {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow: hidden;
    list-style: none;
}

/* 34.5.3 items
---------------------------------------------------------------------------*/
.related-posts li {
    margin: 0;
    float: left;
    padding: 4px;
    width: 261px;
    overflow: hidden;
    position: relative;
    display: inline-block;
    background-color: #ffffff;

    -webkit-border: 1px solid #e4e4e4;
       -moz-border: 1px solid #e4e4e4;
         -o-border: 1px solid #e4e4e4;
            border: 1px solid #e4e4e4;
}
.related-posts li:nth-child(2) { margin: 0 16px; }
.related-posts li .img-figure {
    margin: 0;
    z-index: 0;
    height: auto;
    overflow: hidden;
    position: relative;
}

/* 34.5.4 image
---------------------------------------------------------------------------*/
.related-posts li .img-figure img {
    width: 100%;
    display: block;
    position: relative;
}

/* 34.5.5 Hover
---------------------------------------------------------------------------*/
.related-posts li:hover .img-figure-overlayer { opacity: 1; }
.related-posts .img-figure-overlayer a:first-child {
    left: 50%;
    line-height: 42px;
    margin-left: -20px;
}


/* 34.6 Post Comments
---------------------------------------------------------------------------*/
/* 34.6.1 Wrapper
---------------------------------------------------------------------------*/
.post-comments {
    width: 100%;
    padding: 15px;
    overflow: hidden;
    position: relative;
    margin-bottom: 30px;
    background-color: #ffffff;

    -webkit-border: 1px solid #e4e4e4;
       -moz-border: 1px solid #e4e4e4;
         -o-border: 1px solid #e4e4e4;
            border: 1px solid #e4e4e4;
}

/* 34.6.2 list
---------------------------------------------------------------------------*/
.post-comments ul {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow: hidden;
    list-style: none;
}

/* 34.6.3 items
---------------------------------------------------------------------------*/
.post-comments ul li {
    margin: 0;
    padding: 0;
    float: right;
    display: block;
    max-width: 100%;
    overflow: hidden;
}
.post-comments ul li ul li { margin-left: 90px; }

/* 34.6.4 Avatar
---------------------------------------------------------------------------*/
.post-comments ul li .avatar {
    width: 60px;
    height: 60px;
    padding: 4px;
    float: left;
    background-color: #ffffff;

    -webkit-border: 1px solid #e4e4e4;
       -moz-border: 1px solid #e4e4e4;
         -o-border: 1px solid #e4e4e4;
            border: 1px solid #e4e4e4;
}
.post-comments ul li .avatar img { width: 100%; }

/* 34.6.5 Containt
---------------------------------------------------------------------------*/
.post-comments .containt { margin: 0 0 0 75px; }

/* 34.6.6 Author
---------------------------------------------------------------------------*/
.post-comments .comments-author {
    width: 100%;
    display: block;
    color: #333333;
    margin-top: 5px;
    overflow: hidden;
}

/* 34.6.7 Meta
---------------------------------------------------------------------------*/
/* 34.6.7.1 Wrapper
---------------------------------------------------------------------------*/
.comments-meta {
    width: 100%;
    display: block;
    font-size: 14px;
    overflow: hidden;
    line-height: 17px;
    margin: 10px 0 0 0;
}

/* 34.6.7.2 Date
---------------------------------------------------------------------------*/
.comments-meta .comments-date {
    float: left;
    position: relative;
    padding: 0 10px 0 17px;
}
.comments-meta .comments-date:before {
    top: 0;
    left: 0;
    color: #39F;
    content: "\f073";
    line-height: 17px;
    position: absolute;
    font-family: 'FontAwesome';
}

/* 34.6.7.3 Time
---------------------------------------------------------------------------*/
.comments-meta .comments-time {
    float: left;
    position: relative;
    padding: 0 10px 0 16px;
}
.comments-meta .comments-time:before {
    top: 0;
    left: 0;
    color: #39F;
    content: "\f017";
    line-height: 17px;
    position: absolute;
    font-family: 'FontAwesome';
}

/* 34.6.8 Comment
---------------------------------------------------------------------------*/
/* 34.6.8.1 Wrapper
---------------------------------------------------------------------------*/
.comments-comment {
    width: 100%;
    display: block;
    overflow: hidden;
    margin: 15px 0 0 0;
}
.comments-comment p:last-child { margin-bottom: 0; }
.main-comment {
    padding: 15px;
    margin: 0 0 15px 0;
    background-color: #fafafa;

    -webkit-border: 1px solid #e4e4e4;
       -moz-border: 1px solid #e4e4e4;
         -o-border: 1px solid #e4e4e4;
            border: 1px solid #e4e4e4;
}


/* 34.7 Comments Form
---------------------------------------------------------------------------*/
/* 34.7.1 Title
---------------------------------------------------------------------------*/
.comments-form h3 { margin: 15px 0 15px 0; }

/* 34.7.2 Wrapper
---------------------------------------------------------------------------*/
.commentsForm {
    padding: 0;
    width: 100%;
    overflow: hidden;
    margin: 0 auto 0;
}




/* ==========================================================================
   35. Sidebar
========================================================================== */
/* 35.1 Wrapper
---------------------------------------------------------------------------*/
.sidebar {
    overflow: hidden;
    margin-bottom: 30px;
    padding: 15px 15px 0 15px;
    background-color: #ffffff;

    -webkit-border: 1px solid #e4e4e4;
       -moz-border: 1px solid #e4e4e4;
         -o-border: 1px solid #e4e4e4;
            border: 1px solid #e4e4e4;
}
.sidebar a { color: #333333; }
.sidebar a:hover { color: #39F; }

/* 35.2 Widget
---------------------------------------------------------------------------*/
/* 35.2.1 Wrapper
---------------------------------------------------------------------------*/
.widget {
    width: 100%;
    position: relative;
    margin-bottom: 20px;
    padding-bottom: 20px;
}
.widget:after {
    left: 0;
    top: 100%;
    width: 100%;
    height: 1px;
    content: '';
    position: absolute;

    background-image: -webkit-linear-gradient(360deg, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0));
    background-image: -moz-linear-gradient(360deg, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0));
    background-image: -ms-linear-gradient(360deg, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0));
    background-image: -o-linear-gradient(360deg, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0));
    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0));
}

/* 35.2.2 Title
---------------------------------------------------------------------------*/
.widget-title {
    width: 100%;
    position: relative;
    margin-bottom: 10px;
}
.widget-title h3 { padding-bottom: 10px; }

/* 35.2.3 Containt
---------------------------------------------------------------------------*/
.widget-containt {
    width: 100%;
    overflow: hidden;
}

/* 35.3 Categories widget
---------------------------------------------------------------------------*/
/* 35.3.1 list
---------------------------------------------------------------------------*/
.categories ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* 35.3.2 items
---------------------------------------------------------------------------*/
.categories ul li {
    position: relative;
    padding-left: 10px;
    margin-bottom: 10px;

    -webkit-transition: all 0.3s ease-in-out;
       -moz-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
         -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
}
.categories ul li:last-child { margin-bottom: 0; }
.categories ul li:before {
    left: 0;
    color: #39F;
    content: "\f105";
    font-style: normal;
    position: absolute;
    font-family: 'FontAwesome';
}
.categories ul li a:hover { padding-left: 5px; }


/* 35.4 Recent Posts widget
---------------------------------------------------------------------------*/
/* 35.4.1 list
---------------------------------------------------------------------------*/
.recent-posts ul {
    margin: 0;
    padding: 0;
    overflow: hidden;
    list-style: none;
}

/* 35.4.2 list
---------------------------------------------------------------------------*/
.recent-posts ul li {
    padding: 0;
    display: block;
    overflow: hidden;
    margin-bottom: 15px;
}
.recent-posts ul li:last-child { margin-bottom: 0; }

/* 35.4.3 image
---------------------------------------------------------------------------*/
.recent-posts .post-thumbnail {
    float: left;
    margin-right: 5px;
    position: relative;
}
.recent-posts .post-thumbnail a { display: block; }
.recent-posts .post-thumbnail img {
    width: 50px;
    height: 50px;

    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
         -o-border-radius: 5px;
            border-radius: 5px;
}
.recent-posts .post-thumbnail:hover { opacity: 0.7; }

/* 35.4.4 Containt
---------------------------------------------------------------------------*/
.recent-posts .post-title { overflow: hidden; }
.recent-posts .post-title h5 { padding-bottom: 10px; }
.recent-posts .post-date { overflow: hidden; }
.recent-posts .post-date h6 {
    padding: 0;
    color: #747474;
}


/* 35.5 Twitter widget
---------------------------------------------------------------------------*/
/* 35.5.1 Wrapper
---------------------------------------------------------------------------*/
.twitter-feed .tweetfeed  { height: 100%; }

/* 35.5.2 Twitter Username
---------------------------------------------------------------------------*/
.twitter-feed .tweetfeed ul li a i.fa-twitter {
    float: left;
    width: 20px;
    height: 30px;
    font-size: 20px;
    text-align: left;
    line-height: 30px;
    margin-left: -30px;
}
.twitter-feed .tweetfeed ul li a i.fa-twitter { color: #39F; }
.twitter-feed .tweetfeed ul li a:hover i.fa-twitter { color: #333333; }

/* 35.5.3 List
---------------------------------------------------------------------------*/
.twitter-feed .tweetfeed ul {
    margin: 0;
    padding: 0;
    float: left;
    height: 100%;
    text-align: left;
    list-style: none;
    overflow: hidden;
}

/* 35.5.4 items
---------------------------------------------------------------------------*/
.twitter-feed .tweetfeed ul li,
.twitter-feed .tweet span {
    width: 100%;
    display: block;
    padding: 0 0 10px 30px;

    -webkit-border: none;
       -moz-border: none;
         -o-border: none;
            border: none;
}
.twitter-feed .tweetfeed ul li:last-child { padding-bottom: 0; }


/* 35.6 Tags widget
---------------------------------------------------------------------------*/
/* 35.6.1 list
---------------------------------------------------------------------------*/
.tags ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* 35.6.2 items
---------------------------------------------------------------------------*/
.tags ul li {
    float: left;
    overflow: hidden;
    margin: 0 5px 5px 0;
    display: inline-block;
}

/* 35.6.3 Anchor
---------------------------------------------------------------------------*/
.tags ul li a {
    display: block;
    padding: 5px 10px;
    background-color: #e4e4e4;
}
.tags ul li a:hover {
    color: #ffffff;
    background-color: #39F;
}


/* 35.7 Text widget
---------------------------------------------------------------------------*/
.text p:last-child { margin-bottom: 0; }


/* 35.8 Archive widget
---------------------------------------------------------------------------*/
/* 35.8.1 list
---------------------------------------------------------------------------*/
.archive ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* 35.8.2 items
---------------------------------------------------------------------------*/
.archive ul li {
    position: relative;
    padding-left: 10px;
    margin-bottom: 10px;

    -webkit-transition: all 0.3s ease-in-out;
       -moz-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
         -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
}
.archive ul li:last-child { margin-bottom: 0; }
.archive ul li:before {
    left: 0;
    color: #39F;
    content: "\f105";
    font-style: normal;
    position: absolute;
    font-family: 'FontAwesome';
}
.archive ul li a:hover { padding-left: 5px; }




/* ==========================================================================
   36. Map
========================================================================== */
#map,
#map1 {
    width: 100%;
    height: 350px;
    margin: 0 auto;
    display: block;
}
#map { height: 387px; }


/* ==========================================================================
   37. Contact Details
========================================================================== */
.contact .col-md-4 { padding: 0 20px; }
.contact .col-md-4:after {
    top: 0;
    right: 0;
    content: '';
    width: 1px;
    height: 100%;
    position: absolute;

    background-image: -webkit-linear-gradient(270deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0));
    background-image: -moz-linear-gradient(270deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0));
    background-image: -ms-linear-gradient(270deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0));
    background-image: -o-linear-gradient(270deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0));
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0));
}
.contact .col-md-4:last-child:after { display: none; }

/* 37.1 icon
---------------------------------------------------------------------------*/
.contact .col-md-4:before {
    top: 0;
    right: 5px;
    z-index: 1;
    width: 30px;
    height: 30px;
    float: right;
    color: #39F;
    font-size: 25px;
    text-align: right;
    line-height: 30px;
    position: absolute;
    margin: 0 15px 0 0;
    font-family: 'FontAwesome';
}
.contact .col-md-4:nth-child(1):before { content: "\f041"; }
.contact .col-md-4:nth-child(2):before { content: "\f192"; }
.contact .col-md-4:nth-child(3):before { content: "\f017"; }
.contact .col-md-4:hover:before {
    -webkit-animation: flash 1s;
	   -moz-animation: flash 1s;
        -ms-animation: flash 1s;
         -o-animation: flash 1s;
	        animation: flash 1s;
}

/* 37.2 Wrapper
---------------------------------------------------------------------------*/
ul.contact-details {
    padding: 0;
    list-style: none;
    overflow: hidden;
    margin: 0 0 30px 0;
}

/* 37.3 items
---------------------------------------------------------------------------*/
ul.contact-details li {
    padding: 0;
    width: 100%;
    float: left;
    display: block;
    margin: 0 0 10px 0;
}
ul.contact-details li:last-child { margin-bottom: 0; }

/* 37.4 title
---------------------------------------------------------------------------*/
ul.contact-details li span.title {
    float: left;
    color: #333333;
    font-size: 15px;
    text-align: left;
    font-weight: bold;
    letter-spacing: 1px;
    font-family: "Lato", Helvetica, Arial, sans-serif;
}

/* 37.5 Value
---------------------------------------------------------------------------*/
ul.contact-details li span.value {
    float: right;
    font-size: 16px;
    text-align: right;
}




/* ==========================================================================
   38. Form
========================================================================== */
/* 38.1 Wrapper
---------------------------------------------------------------------------*/
.contactForm {
    padding: 0;
    width: 100%;
    overflow: hidden;
    margin: 0 auto 20px;
}

/* 38.2 Label
---------------------------------------------------------------------------*/
.contactForm .control-label {
	padding: 0;
	width: 100%;
    display: block;
    margin: 0 0 10px 0;
    font-weight: normal;
}
.contactForm .control-label span { color: #39F; }

/* 38.3 Textarea
---------------------------------------------------------------------------*/
.contactForm textarea {
	width: 100%;
    margin: 0 auto 10px;
    height: 155px !important;
}

/* 38.4 form-control
---------------------------------------------------------------------------*/
.contactForm .form-control {
	width: 100%;
    height: auto;
	padding: 11px 5px;
    margin: 0 auto 10px;
	background-color: #ffffff;

    -webkit-border-radius: 0;
       -moz-border-radius: 0;
         -o-border-radius: 0;
            border-radius: 0;

    -webkit-box-shadow: none;
       -moz-box-shadow: none;
         -o-box-shadow: none;
            box-shadow: none;

    -webkit-border: 1px solid #e4e4e4;
       -moz-border: 1px solid #e4e4e4;
         -o-border: 1px solid #e4e4e4;
            border: 1px solid #e4e4e4;
}
.contactForm .form-control:hover,
.contactForm .form-control:focus {
    box-shadow: none;
    -webkit-border: 1px solid #39F;
       -moz-border: 1px solid #39F;
         -o-border: 1px solid #39F;
            border: 1px solid #39F;
}

/* 38.5 success message
---------------------------------------------------------------------------*/
.success {
	width: 100%;
	float: left;
    padding: 10px;
    color: #ffffff;
    background-color: #39F;
}

/* 38.6 error message
---------------------------------------------------------------------------*/
.error {
	top: 0;
    z-index: 2;
    float: right;
    color: #39F;
    position: relative;
    margin: -44px 10px 0 0;
}




/* ==========================================================================
   39. To Top
========================================================================== */
/* 39.1 Wrapper
---------------------------------------------------------------------------*/
.topcontrol {
    top: 0;
    left: 50%;
    z-index: 1;
    height: 25px;
    display: block;
    margin-left: -25px;
    position: absolute;
    text-align: center;
}

/* 39.2 Anchor
---------------------------------------------------------------------------*/
.topcontrol a {
    width: 50px;
    height: 25px;
    color: #eeeeee;
    display: block;
    margin: 0 auto;
    font-size: 24px;
    line-height: 25px;
    position: relative;
    background-color: #333333;

    -webkit-border-radius: 0 0 50px 50px;
       -moz-border-radius: 0 0 50px 50px;
         -o-border-radius: 0 0 50px 50px;
            border-radius: 0 0 50px 50px;

    -webkit-transition: all 0.3s ease-in-out;
       -moz-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
         -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
}
.topcontrol a:hover { color: #39F; }
.topcontrol a i {
    left: 50%;
    top: -4px;
    margin-left: -8px;
    position: absolute;
}




/* ==========================================================================
   40. Footer
========================================================================== */
/* 40.1 Wrapper
---------------------------------------------------------------------------*/
.footer {
    z-index: 6999;
    color: #999999;
    position: relative;
    background-color: #333333;

    -webkit-border-top: 8px solid #333333;
       -moz-border-top: 8px solid #333333;
         -o-border-top: 8px solid #333333;
            border-top: 8px solid #333333;

    -webkit-transition: all 0.3s ease-in-out;
       -moz-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
         -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
}
.footer .col-md-9 { padding: 50px 0 20px; }
.footer a { color: #eeeeee }
.footer a:hover { color: #39F; }


/* 40.2 Footer Widget
---------------------------------------------------------------------------*/
/* 40.2.1 Wrapper
---------------------------------------------------------------------------*/
.footer .footer-widget {
    overflow: hidden;
    margin: 0 0 30px 0;
}
.footer .col-md-9 .col-md-4:last-child .footer-widget { margin-bottom: 20px; }

/* 40.2.2 Title
---------------------------------------------------------------------------*/
.footer-widget-title h3 {
    color: #eeeeee;
    overflow: hidden;
    font-weight: 400;
    margin-bottom: 7px;
}

/* 40.3 Recent Posts Widget
---------------------------------------------------------------------------*/
/* 40.3.1 list
---------------------------------------------------------------------------*/
.footer-widget-recent-posts ul {
    margin: 0;
    padding: 0;
    overflow: hidden;
    list-style: none;
}

/* 40.3.2 items
---------------------------------------------------------------------------*/
.footer-widget-recent-posts ul li {
    margin: 0;
    display: block;
    padding: 10px 0;
    overflow: hidden;

    -webkit-border-top: 1px solid #444444;
       -moz-border-top: 1px solid #444444;
         -o-border-top: 1px solid #444444;
            border-top: 1px solid #444444;

    -webkit-border-bottom: 1px solid #232323;
       -moz-border-bottom: 1px solid #232323;
         -o-border-bottom: 1px solid #232323;
            border-bottom: 1px solid #232323;
}
.footer-widget-recent-posts ul li:first-child {
    -webkit-border-top: none;
       -moz-border-top: none;
         -o-border-top: none;
            border-top: none;
}
.footer-widget-recent-posts ul li:last-child {
    padding-bottom: 0;

    -webkit-border-bottom: none;
       -moz-border-bottom: none;
         -o-border-bottom: none;
            border-bottom: none;
}

/* 40.3.3 image
---------------------------------------------------------------------------*/
.footer-widget-recent-posts .post-thumbnail {
    float: left;
    position: relative;
    margin-right: 10px;
}
.footer-widget-recent-posts .post-thumbnail a { display: block; }
.footer-widget-recent-posts .post-thumbnail img {
    width: 50px;
    height: 50px;

    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
         -o-border-radius: 5px;
            border-radius: 5px;
}
.footer-widget-recent-posts .post-thumbnail:hover { opacity: 0.7; }

/* 40.3.4 Containt
---------------------------------------------------------------------------*/
.footer-widget-recent-posts .post-containt { overflow: hidden; }
.footer-widget-recent-posts .post-title { overflow: hidden; }
.footer-widget-recent-posts .post-title h5 { padding-bottom: 10px; }

/* 40.3.5 Date
---------------------------------------------------------------------------*/
.footer-widget-recent-posts .post-date { overflow: hidden; }
.footer-widget-recent-posts .post-date h6 {
    padding: 0;
    color: #999999;
}


/* 40.4 Description Box
---------------------------------------------------------------------------*/
/* 40.4.1 Wrapper
---------------------------------------------------------------------------*/
.footer .description-box {
    padding: 15px;
    overflow: hidden;
    text-align: left;
    background-color: #232323;
}

figure {
    margin: 5px;
	overflow: hidden;
    position: relative;
    background: #222222;
}
figcaption {
    top: 0;
    z-index: 11;
    padding: 10px;
	width: 100%;
	height: 100%;
    position: absolute;
}
figcaption h3 {
    color: #eeeeee;
	margin: 0 0 20px 0;

    -webkit-transition: -webkit-transform 0.3s;
       -moz-transition: -moz-transform 0.3s;
        -ms-transition: -ms-transform 0.3s;
         -o-transition: -o-transform 0.3s;
	        transition: transform 0.3s;
}
figcaption p {
    color: #747474;
    font-size: 18px;

    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
       -moz-transition: opacity 0.3s, -moz-transform 0.3s;
        -ms-transition: opacity 0.3s, -ms-transform 0.3s;
         -o-transition: opacity 0.3s, -o-transform 0.3s;
	        transition: opacity 0.3s, transform 0.3s;
}
figcaption h3,
figcaption p {
    -webkit-transition-delay: 0.05s;
	   -moz-transition-delay: 0.05s;
        -ms-transition-delay: 0.05s;
         -o-transition-delay: 0.05s;
            transition-delay: 0.05s;

	-webkit-transform: translateY(20px);
       -moz-transform: translateY(20px);
        -ms-transform: translateY(20px);
         -o-transform: translateY(20px);
	        transform: translateY(20px);
}
figcaption,
figcaption h3,
figcaption p {
    -webkit-transition-timing-function: cubic-bezier(0.250, 0.250, 0.115, 1); /* older webkit */
	-webkit-transition-timing-function: cubic-bezier(0.250, 0.250, 0.115, 1.445);
       -moz-transition-timing-function: cubic-bezier(0.250, 0.250, 0.115, 1.445);
        -ms-transition-timing-function: cubic-bezier(0.250, 0.250, 0.115, 1.445);
         -o-transition-timing-function: cubic-bezier(0.250, 0.250, 0.115, 1.445);
	        transition-timing-function: cubic-bezier(0.250, 0.250, 0.115, 1.445);

	-webkit-backface-visibility: hidden;
       -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
         -o-backface-visibility: hidden;
	        backface-visibility: hidden;
}

/* Style for SVG */
svg {
    top: -1px; /* fixes rendering issue in FF */
	z-index: 10;
	width: 101%;
	height: 100%;
    position: absolute;
}
svg path { fill: #232323; }

a:hover figcaption p { opacity: 0; }
a:hover figcaption p {
    opacity: 0;

	-webkit-transition-delay: 0s;
       -moz-transition-delay: 0s;
        -ms-transition-delay: 0s;
         -o-transition-delay: 0s;
	        transition-delay: 0s;

	-webkit-transition-duration: 0.1s;
       -moz-transition-duration: 0.1s;
        -ms-transition-duration: 0.1s;
         -o-transition-duration: 0.1s;
	        transition-duration: 0.1s;
}


/* 40.5 Twitter Feed
---------------------------------------------------------------------------*/
/* 40.5.1 Wrapper
---------------------------------------------------------------------------*/
.tweetfeed  { height: 100%; }

/* 40.5.2 Twitter Username
---------------------------------------------------------------------------*/
.tweetfeed ul li a i.fa-twitter {
    float: left;
    width: 20px;
    height: 30px;
    font-size: 20px;
    text-align: left;
    line-height: 30px;
    margin-left: -30px;
}

/* 40.5.3 List
---------------------------------------------------------------------------*/
.tweetfeed ul {
    margin: 0;
    padding: 0;
    float: left;
    height: 100%;
    text-align: left;
    list-style: none;
    overflow: hidden;
}

/* 40.5.4 items
---------------------------------------------------------------------------*/
.tweetfeed ul li,
.tweet span {
    width: 100%;
    display: block;
    padding: 10px 0 10px 30px;

    -webkit-border-top: 1px solid #444444;
       -moz-border-top: 1px solid #444444;
         -o-border-top: 1px solid #444444;
            border-top: 1px solid #444444;

    -webkit-border-bottom: 1px solid #232323;
       -moz-border-bottom: 1px solid #232323;
         -o-border-bottom: 1px solid #232323;
            border-bottom: 1px solid #232323;
}
.tweetfeed ul li:first-child {
    -webkit-border-top: none;
       -moz-border-top: none;
         -o-border-top: none;
            border-top: none;
}
.tweetfeed ul li:last-child {
    padding-bottom: 0;

    -webkit-border-bottom: none;
       -moz-border-bottom: none;
         -o-border-bottom: none;
            border-bottom: none;
}


/* 40.6 Flickr Feed
---------------------------------------------------------------------------*/
/* 40.6.1 Wrapper
---------------------------------------------------------------------------*/
.footer .flickr-feed {
    margin: 0;
    width: 100%;
    overflow: hidden;
    list-style: none;
    text-align: center;
    padding: 10px 0 0 0;
}

/* 40.6.2 items
---------------------------------------------------------------------------*/
.footer .flickr-feed li {
    padding: 0;
    margin: 0 0 10px 0;
    display: inline-block;

    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
         -o-border-radius: 5px;
            border-radius: 5px;
}
.footer .flickr-feed li:nth-child(2),
.footer .flickr-feed li:nth-child(5),
.footer .flickr-feed li:nth-child(8),
.footer .flickr-feed li:nth-child(11) { margin: 0 10px 10px; }
.footer .flickr-feed li img {
    width: 80px;
    height: 80px;
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
         -o-border-radius: 5px;
            border-radius: 5px;
}

/* 40.6.3 Anchor
---------------------------------------------------------------------------*/
.footer .flickr-feed li:hover { opacity: 0.7; }


/* 40.7 Toggle
---------------------------------------------------------------------------*/
.footer-toogle {
    top: 0;
    right: 0;
    width: 55px;
    height: 55px;
    z-index: 7000;
    display: block;
    text-align: right;
    position: absolute;
    padding: 8px 6px 0 0;

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

    background-image: -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0) 50%, #333333 50%, #333333 100%);
    background-image: -moz-linear-gradient(45deg, rgba(0, 0, 0, 0) 50%, #333333 50%, #333333 100%);
    background-image: -ms-linear-gradient(45deg, rgba(0, 0, 0, 0) 50%, #333333 50%, #333333 100%);
    background-image: -o-linear-gradient(45deg, rgba(0, 0, 0, 0) 50%, #333333 50%, #333333 100%);
    background-image: linear-gradient(45deg, rgba(0, 0, 0, 0) 50%, #333333 50%, #333333 100%);
}
.footer-toogle i {
    color: #eeeeee;
    cursor: pointer;

    -webkit-transition: all 0.3s ease-in-out;
       -moz-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
         -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
}
.footer-toogle i:hover { color: #39F; }




/* ==========================================================================
   41. Copyright
========================================================================== */
.footer .copyright {
    height: auto;
    text-align: left;
    padding: 13px 0 12px;
    background-color: #232323;

    -webkit-transition: all 0.3s ease-in-out;
       -moz-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
         -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
}
.footer .copyright .col-md-9 { padding: 0 15px; }
.footer .copyright p { margin: 3px 0; }

/* 41.2 Socila icons
---------------------------------------------------------------------------*/
.footer .copyright .social-icons {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow: hidden;
    list-style: none;
    text-align: center;
}
.footer .copyright .social-icons li {
    padding: 0;
    width: 30px;
    height: 30px;
    margin-left: 3px;
    display: inline-block;
}
.footer .copyright .social-icons li:first-child { margin-left: 0; }
.footer .copyright .social-icons li a {
    display: block;
    font-size: 16px;
    line-height: 30px;
    background-color: #333333;
    border-radius: 50%;
}


/* ==========================================================================
   42. Override Bootstrap
========================================================================== */
/* 42.1 blockquote
---------------------------------------------------------------------------*/
blockquote footer { color: #39F; }
blockquote footer:before { content: '― '; }
blockquote {
    -webkit-border-left: 5px solid #39F;
       -moz-border-left: 5px solid #39F;
         -o-border-left: 5px solid #39F;
            border-left: 5px solid #39F;
}

/* 42.2 panel
---------------------------------------------------------------------------*/
.panel-heading h3 { padding-bottom: 0; }
.panel {
    margin-bottom: 30px;
    background-color: #ffffff;

    -webkit-box-shadow: none;
       -moz-box-shadow: none;
         -o-box-shadow: none;
            box-shadow: none;

    -webkit-border-radius: 0;
       -moz-border-radius: 0;
         -o-border-radius: 0;
            border-radius: 0;

    -webkit-border: solid 1px #e4e4e4;
       -moz-border: solid 1px #e4e4e4;
         -o-border: solid 1px #e4e4e4;
            border: solid 1px #e4e4e4;
}
.panel-default > .panel-heading {
    background-color: #e4e4e4;

    -webkit-border-color: #e4e4e4;
       -moz-border-color: #e4e4e4;
         -o-border-color: #e4e4e4;
            border-color: #e4e4e4;
}
.panel-heading {
    -webkit-border-radius: 0;
       -moz-border-radius: 0;
         -o-border-radius: 0;
            border-radius: 0;
}

/* 42.3 tooltip
---------------------------------------------------------------------------*/
.tooltip {
    z-index: 999;
    font-weight: 400;
    letter-spacing: 1px;
    font-family: "Lato", Helvetica, Arial, sans-serif;
}

/* 42.4 col
---------------------------------------------------------------------------*/
.col-xs-1,
.col-sm-1,
.col-md-1,
.col-lg-1,
.col-xs-2,
.col-sm-2,
.col-md-2,
.col-lg-2,
.col-xs-3,
.col-sm-3,
.col-md-3,
.col-lg-3,
.col-xs-4,
.col-sm-4,
.col-md-4,
.col-lg-4,
.col-xs-5,
.col-sm-5,
.col-md-5,
.col-lg-5,
.col-xs-6,
.col-sm-6,
.col-md-6,
.col-lg-6,
.col-xs-7,
.col-sm-7,
.col-md-7,
.col-lg-7,
.col-xs-8,
.col-sm-8,
.col-md-8,
.col-lg-8,
.col-xs-9,
.col-sm-9,
.col-md-9,
.col-lg-9,
.col-xs-10,
.col-sm-10,
.col-md-10,
.col-lg-10,
.col-xs-11,
.col-sm-11,
.col-md-11,
.col-lg-11,
.col-xs-12,
.col-sm-12,
.col-md-12,
.col-lg-12 {
    overflow: hidden;
}

/* 42.5 btn
---------------------------------------------------------------------------*/
.btn:focus { outline: none; }
.btn {
    -webkit-border: 2px solid transparent;
       -moz-border: 2px solid transparent;
         -o-border: 2px solid transparent;
            border: 2px solid transparent;

    -webkit-transition: all 0.3s ease-in-out;
       -moz-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
         -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
}
.btn:active,
.btn.active {
    -webkit-box-shadow: none;
       -moz-box-shadow: none;
         -o-box-shadow: none;
            box-shadow: none;
}
.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
    text-decoration: line-through;
}

.btn.btn-main,
.btn.btn-black {
    -webkit-border-radius: 0;
       -moz-border-radius: 0;
         -o-border-radius: 0;
            border-radius: 0;
}

.btn-main:active,
.btn-main.active,
.btn-main-o:active,
.btn-main-o.active,
.btn-black:active,
.btn-black.active,
.btn-black-o:active,
.btn-black-o.active {
    background-image: none;
}

.btn-main,
.btn-main-o {
    color: #ffffff;
    letter-spacing: 1px;
    background-color: #39F;
}

.btn-black,
.btn-black-o {
    color: #ffffff;
    letter-spacing: 1px;
    background-color: #333333;
}

.btn-main:hover,
.btn-main:focus,
.btn-main:active,
.btn-main.active,
.btn-main-o:hover,
.btn-main-o:focus,
.btn-main-o:active,
.btn-main-o.active {
    color: #ffffff;
    background-color: #333333;
}

.btn-black:hover,
.btn-black:focus,
.btn-black:active,
.btn-black.active,
.btn-black-o:hover,
.btn-black-o:focus,
.btn-black-o:active,
.btn-black-o.active {
    color: #ffffff;
    background-color: #39F;
}
.btn.btn-main-o,
.btn.btn-black-o {
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
         -o-border-radius: 4px;
            border-radius: 4px;
}

/* 42.6 thumbnail
---------------------------------------------------------------------------*/
.thumbnail {
    margin-bottom: 30px;

    -webkit-border-radius: 0;
       -moz-border-radius: 0;
         -o-border-radius: 0;
            border-radius: 0;

    -webkit-border: 1px solid #e4e4e4;
       -moz-border: 1px solid #e4e4e4;
         -o-border: 1px solid #e4e4e4;
            border: 1px solid #e4e4e4;
}

/* 42.7 modal
---------------------------------------------------------------------------*/
.modal { z-index: 7001; }
h3.modal-title { padding-bottom: 0; }
.modal-body { overflow: hidden; }
.modal-body .thumbnail { margin-bottom: 20px; }
.modal-footer { margin-top: 0; }
.modal-dialog {
    width: 720px;
    padding-left: 0;
    padding-right: 0;
    margin: 0 auto;
}

/* 42.8 Progress Bar
---------------------------------------------------------------------------*/
.progress {
    height: 30px;

    -webkit-border-radius: 0;
       -moz-border-radius: 0;
         -o-border-radius: 0;
            border-radius: 0;
}
.progress-bar {
    font-size: 14px;
    font-weight: 400;
    line-height: 30px;
    text-align: right;
    padding: 0 10px 0;
    letter-spacing: 1px;
    font-family: "Lato", Helvetica, Arial, sans-serif;
}
.progress-bar span:first-child { float: left; }
.progress-bar span:last-child {
    position: relative;
    padding-right: 10px;
}
.progress-bar span:last-child:after {
    right: 0;
    content: '%';
    width: 10px;
    height: 15px;
    position: absolute;
}
.progress-bar-main { background-color: #39F; }
.progress-striped .progress-bar-main {
    background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(0, 0, 0, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(0, 0, 0, 0.15)), color-stop(0.75, rgba(0, 0, 0, 0.15)), color-stop(0.75, transparent), to(transparent));

    background-image: -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0.15) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.15) 50%, rgba(0, 0, 0, 0.15) 75%, transparent 75%, transparent);

    background-image: -moz-linear-gradient(45deg, rgba(0, 0, 0, 0.15) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.15) 50%, rgba(0, 0, 0, 0.15) 75%, transparent 75%, transparent);

    background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.15) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.15) 50%, rgba(0, 0, 0, 0.15) 75%, transparent 75%, transparent);
}




/* ==========================================================================
   43. Responsive
========================================================================== */
/* 43.1 TABLET  : 1024px
---------------------------------------------------------------------------*/
@media only screen and (max-width: 1199px) {


    /* ==========================================================================
       7. Latest Works
    ========================================================================== */
    /* 7.2 items
    ---------------------------------------------------------------------------*/
    .latest-works li { width: 293px; }


    /* ==========================================================================
       9. Project Details
    ========================================================================== */
    /* 9.2 items
    ---------------------------------------------------------------------------*/
    .project-details li {
        width: 110px;
        height: 110px;
        line-height: 95px;

        -webkit-border: 7px solid #e4e4e4;
           -moz-border: 7px solid #e4e4e4;
             -o-border: 7px solid #e4e4e4;
                border: 7px solid #e4e4e4;
    }
    .col-md-6 .project-details li { margin: 0 0 10px; }


    /* ==========================================================================
       11. Attention Box
    ========================================================================== */
    .attention-box:after { display: none; }

    /* 11.2 Typography
    ---------------------------------------------------------------------------*/
    .attention-box h3 { width: 100%; }

    /* 11.3 Button
    ---------------------------------------------------------------------------*/
    .attention-box .btn {
        top: 0;
        right: 0;
        width: 100%;
        margin-top: 20px;
        position: relative;
    }

    /* 11.4 attention box small
    ---------------------------------------------------------------------------*/
    .attention-box-small:after { display: none; }
    .attention-box-small h3 { width: 100%; }
    .attention-box-small .btn {
        top: 0;
        right: 0;
        width: 100%;
        margin-top: 20px;
        position: relative;
    }


    /* 16.2 Team style1
    ---------------------------------------------------------------------------*/
    /* 16.2.2 items
    ---------------------------------------------------------------------------*/
    .team-style1 li { width: 212px; }


    /* ==========================================================================
       24. Team grid
    ========================================================================== */
    /* 24.1 Wrapper
    ---------------------------------------------------------------------------*/
    .team-grid { padding: 0; }

    /* 24.2 items
    ---------------------------------------------------------------------------*/
    .team-grid li { width: 293px; }

    /* 24.3 image
    ---------------------------------------------------------------------------*/
    .team-grid li .img-figure img {
        width: 283px;
        height: 283px;
    }


    /* 27.2 Portfolio grid 4 Columns
    ========================================================================== */
    .portfolio-grid-4 li .title-caption span:last-child { display: none; }

    /* 27.2.2 items
    ---------------------------------------------------------------------------*/
    .portfolio-grid-4 li { width: 212px; }

    /* 27.2.3 image figure
    ---------------------------------------------------------------------------*/
    .portfolio-grid-4 li .img-figure img {
        width: 212px;
        height: 119px;
    }
    /* 7.3 Overlayer
    ---------------------------------------------------------------------------*/
    .portfolio-grid-4 li .img-figure-overlayer { z-index: 3; }

    /* 27.3 Portfolio grid 3 Columns
    ========================================================================== */
    /* 27.3.2 items
    ---------------------------------------------------------------------------*/
    .portfolio-grid-3 li { width: 293px; }

    /* 27.3.3 image figure
    ---------------------------------------------------------------------------*/
    .portfolio-grid-3 li .img-figure img {
        width: 293px;
        height: 165px;
    }

    /* 27.4 Portfolio grid 2 Columns
    ========================================================================== */
    /* 27.4.2 items
    ---------------------------------------------------------------------------*/
    .portfolio-grid-2 li { width: 440px; }

    /* 27.4.3 image figure
    ---------------------------------------------------------------------------*/
    .portfolio-grid-2 li .img-figure img {
        width: 440px;
        height: 248px;
    }


    /* 34.5 Related Posts
    ========================================================================== */
    /* 34.5.3 items
    ---------------------------------------------------------------------------*/
    .related-posts li { width: 212px; }
    .related-posts li:nth-child(2) { margin: 0 14px; }


    /* ==========================================================================
       40.6 Flickr Feed
    ========================================================================== */
    .footer .flickr-feed li img {
        width: 64px;
        height: 64px;
    }


    /* 41.2 Socila icons
    ---------------------------------------------------------------------------*/
    .footer .copyright .social-icons li { margin-left: 1px; }


}




/* 43.2 TABLET  : 768px
---------------------------------------------------------------------------*/
@media only screen and (max-width: 990px) and (min-width: 768px) {


    /* 4.1.1 Wrapper
    ---------------------------------------------------------------------------*/
    .gn-menu-main:before { display: none; }


    /* 6.2 feature-box-style1
    ========================================================================== */
    /* 6.2.1 Wrapper
    ---------------------------------------------------------------------------*/
    .feature-boxs-wrapper1 .col-md-4 {
        overflow: visible;
        padding-bottom: 15px;
        margin-bottom: 15px;
    }
    .feature-boxs-wrapper1 .feature-box-style1 {
        padding: 0;
        margin-bottom: 0;
    }
    .feature-boxs-wrapper1 .col-md-4:after {
        top: 100%;
        width: 100%;
        height: 1px;

        background-image: -webkit-linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0));
        background-image: -moz-linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0));
        background-image: -ms-linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0));
        background-image: -o-linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0));
        background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0));
    }


    /* ==========================================================================
       7. Latest Works
    ========================================================================== */
    /* 7.2 items
    ---------------------------------------------------------------------------*/
    .latest-works li { width: 345px; }
    .my-work li:last-child,
    .related-projects li:last-child {
        float: none;
        margin: 0 auto;
    }


    /* ==========================================================================
       9. Project Details
    ========================================================================== */
    /* 9.2 items
    ---------------------------------------------------------------------------*/
    .project-details li {
        width: 120px;
        height: 120px;
        line-height: 100px;
        margin: 20px 10px 0;
    }
    .col-md-6 .project-details li { margin: 0 10px 10px; }


    /* ==========================================================================
       10. Presentaion
    ========================================================================== */
    /* 10.1 Wrapper
    ---------------------------------------------------------------------------*/
    .presentaion .col-md-6 .col-md-6 {
        width: 50%;
        float: left;
    }
    .presentaion .col-md-6:last-child { margin-bottom: 30px; }


    /* ==========================================================================
       11. Attention Box
    ========================================================================== */
    /* 11.1 Wrapper
    ---------------------------------------------------------------------------*/
    .attention-box { max-width: 100%; }

    /* 11.4 attention box small
    ---------------------------------------------------------------------------*/
    .attention-box-small { max-width: 100%; }


    /* 13.1 Wrapper
    ---------------------------------------------------------------------------*/
    .timeline-graph { padding: 0; }

    /* 13.2 list
    ---------------------------------------------------------------------------*/
    .timeline-graph li,
    .timeline-graph li:first-child { margin-top: 0; }


    /* 13.3 line, 13.7 Timeline Graph triangle
    ---------------------------------------------------------------------------*/
    .timeline-graph:before,
    .timeline-graph > li .tm-label:after,
    .timeline-graph > li .tm-label:before,
    .timeline-graph > li:nth-child(odd) .tm-label:after,
    .timeline-graph > li:nth-child(odd) .tm-label:before{
        display: none;
    }


    /* 13.4 Date
    ---------------------------------------------------------------------------*/
    .timeline-graph > li .tm-dt,
    .timeline-graph > li:nth-child(even) .tm-dt {
        float: right;
        margin: 8px 10px 0 0;
    }

    /* 13.5 post (divided by 2 left & right)
    ---------------------------------------------------------------------------*/
    .timeline-graph > li .tm-label,
    .timeline-graph > li:nth-child(odd) .tm-label {
        width: 100%;
        margin: -40px 0 0 0;
    }

    /* 13.8 Timeline Graph icons
    ---------------------------------------------------------------------------*/
    .timeline-graph > li .tm-icon {
        left: 0;
        margin: 0 0 40px 10px;

        -webkit-border-radius: 0;
           -moz-border-radius: 0;
             -o-border-radius: 0;
                border-radius: 0;
    }


    /* 16.2.1 Wrapper
    ---------------------------------------------------------------------------*/
    .team-style1 { padding: 0; }

    /* 16.2.2 items
    ---------------------------------------------------------------------------*/
    .team-style1 li { width: 345px; }


    /* 17.1 Wrapper
    ---------------------------------------------------------------------------*/
    .about-me-wrapper .col-md-3 {
        width: 50%;
        float: left;
    }


    /* 23.1 Wrapper
    ---------------------------------------------------------------------------*/
    .pricing-boxs .col-md-3 {
        width: 50%;
        float: left;
    }
    .pricing-boxs .col-md-4 {
        float: left;
        width: 33.33333333333333%;
    }


    /* 24.1 Wrapper
    ---------------------------------------------------------------------------*/
    .team-grid { padding: 0; }

    /* 24.2 items
    ---------------------------------------------------------------------------*/
    .team-grid li { width: 220px; }

    /* 24.3 image
    ---------------------------------------------------------------------------*/
    .team-grid li .img-figure img {
        width: 210px;
        height: 210px;
    }


    /* 26.1 Wrapper
    ---------------------------------------------------------------------------*/
    .sitemap-wrapper .col-md-3 {
        width: 25%;
        float: left;
    }


    /* 7.3 Overlayer
    ---------------------------------------------------------------------------*/
    .portfolio-grid-4 li .img-figure-overlayer { z-index: 2; }

    /* 27.2.1 Wrapper
    ---------------------------------------------------------------------------*/
    .portfolio-grid-4 li .title-caption span:last-child { display: block; }
    .portfolio-grid-4 { padding: 0; }

    /* 27.2.2 items
    ---------------------------------------------------------------------------*/
    .portfolio-grid-4 li { width: 345px; }

    /* 27.2.3 image figure
    ---------------------------------------------------------------------------*/
    .portfolio-grid-4 li .img-figure img {
        width: 345px;
        height: 194px;
    }

    /* 27.3.2 items
    ---------------------------------------------------------------------------*/
    .portfolio-grid-3 li { width: 345px; }

    /* 27.3.3 image figure
    ---------------------------------------------------------------------------*/
    .portfolio-grid-3 li .img-figure img {
        width: 345px;
        height: 194px;
    }

    /* 27.4.2 items
    ---------------------------------------------------------------------------*/
    .portfolio-grid-2 li { width: 345px; }

    /* 27.4.3 image figure
    ---------------------------------------------------------------------------*/
    .portfolio-grid-2 li .img-figure img {
        width: 345px;
        height: 194px;
    }


    /* 34.5.3 items
    ---------------------------------------------------------------------------*/
    .related-posts li { width: 220px; }


    /* 35.4.3 image
    ---------------------------------------------------------------------------*/
    .recent-posts .post-thumbnail { margin-right: 10px; }


    /* ==========================================================================
       37. Contact Details
    ========================================================================== */
    .contact .col-md-4 { padding: 0 15px; }
    .contact .col-md-4:after { display: none; }


    /* 40.1 Wrapper
    ---------------------------------------------------------------------------*/
    .footer .col-md-9 { padding-bottom: 0; }
    .footer .col-md-9 .col-md-4:first-child,
    .footer .col-md-9 .col-md-4:nth-child(2) {
        width: 50%;
        float: left;
    }
    .footer .col-md-9 .col-md-4:nth-child(3) { float: left; }


    /* ==========================================================================
       40.6 Flickr Feed
    ========================================================================== */
    .footer .flickr-feed li img {
        width: 70px;
        height: 70px;
    }
    .footer .flickr-feed li { margin: 0 11px 10px 0 !important; }
    .footer .flickr-feed li:last-child {
        margin-right: 0 !important;
        margin-left: 1px !important;
    }


    /* ==========================================================================
       41. Copyright
    ========================================================================== */
    .footer .copyright {
        text-align: center;
        padding: 35px 0 16px;
    }
    .footer .copyright .col-md-9 { padding: 0 15px; }
    .footer .copyright p { margin: 3px 0 13px; }


}




/* 43.3 Phone   : 480px
---------------------------------------------------------------------------*/
@media only screen and (max-width: 767px) and (min-width: 480px) {


    /* 3.3 list, 3.5 Captions, 5.2 Home Section
    ---------------------------------------------------------------------------*/
    .home-slider ul.slides li,
    .flex-caption,
    #home-section { height: 250px; }

    /* 3.5 Captions
    ---------------------------------------------------------------------------*/
    .caption-1,
    .caption-2,
    .caption-3 { top: 27px; }
    .caption-1 h1 { font-size: 24px !important; }
    .caption-2 h3 { font-size: 20px !important; }
    .caption-2 { top: 97px; }
    .caption-3  { top: 163px; }
    .home-slider ul.slides h1,
    .home-slider ul.slides h3 { padding: 10px; }

    /* 3.7 Direction Nav
    ---------------------------------------------------------------------------*/
    .home-slider .flex-control-nav { display: none; }


    /* 4.1.1 Wrapper
    ---------------------------------------------------------------------------*/
    .gn-menu-main:before { display: none; }

    /* 4.3.1 Wrapper
    ---------------------------------------------------------------------------*/
    #menu-social-icons { display: none; }

    /* 4.6 Anchor
    ---------------------------------------------------------------------------*/
    .caption-3 a {
        width: 50px;
        height: 50px;
        font-size: 22px;
        line-height: 50px;
    }


    /* 5.6 Blog Section
    ---------------------------------------------------------------------------*/
    .blog-section { padding: 15px 0 0; }

    /* 5.7 Blog Timeline
    ---------------------------------------------------------------------------*/
    .blog-timeline-section { padding: 15px 0 0; }


    /* 6.2 feature-box-style1
    ========================================================================== */
    /* 6.2.1 Wrapper
    ---------------------------------------------------------------------------*/
    .feature-boxs-wrapper1 .col-md-4 {
        overflow: visible;
        padding-bottom: 15px;
        margin-bottom: 15px;
    }
    .feature-boxs-wrapper1 .feature-box-style1 {
        padding: 0;
        margin-bottom: 0;
    }
    .feature-boxs-wrapper1 .col-md-4:after {
        top: 100%;
        width: 100%;
        height: 1px;

        background-image: -webkit-linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0));
        background-image: -moz-linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0));
        background-image: -ms-linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0));
        background-image: -o-linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0));
        background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0));
    }


    /* 7.2 items
    ---------------------------------------------------------------------------*/
    .latest-works li {
        float: none;
        width: 420px;
        display: block;
        margin: 0 auto 30px;
    }


    /* 9.2 items
    ---------------------------------------------------------------------------*/
    .project-details li {
        width: 91px;
        height: 91px;
        line-height: 87px;
        margin: 20px 5px 0;

        -webkit-border-radius: 20px;
           -moz-border-radius: 20px;
             -o-border-radius: 20px;
                border-radius: 20px;

        -webkit-border: 2px solid #e4e4e4;
           -moz-border: 2px solid #e4e4e4;
             -o-border: 2px solid #e4e4e4;
                border: 2px solid #e4e4e4;
    }
    .project-details li a i { line-height: 91px; }
    .col-md-6 .project-details li {
        width: 99px;
        height: 99px;
        line-height: 91px;
        margin: 0 5px 10px;

        -webkit-border: 4px solid #e4e4e4;
           -moz-border: 4px solid #e4e4e4;
             -o-border: 4px solid #e4e4e4;
                border: 4px solid #e4e4e4;
    }

    /* 10.1 Wrapper
    ---------------------------------------------------------------------------*/
    .presentaion .col-md-6 .col-md-6 {
        width: 50%;
        float: left;
    }
    .presentaion .col-md-6:last-child { margin-bottom: 30px; }


    /* 11.1 Wrapper
    ---------------------------------------------------------------------------*/
    .attention-box { max-width: 100%; }

    /* 11.4 attention box small
    ---------------------------------------------------------------------------*/
    .attention-box-small { max-width: 100%; }
    .attention-box-small h3 {line-height: 29px; }


    /* 13.1 Wrapper
    ---------------------------------------------------------------------------*/
    .timeline-graph { padding: 0; }

    /* 13.2 list
    ---------------------------------------------------------------------------*/
    .timeline-graph li,
    .timeline-graph li:first-child { margin-top: 0; }


    /* 13.3 line, 13.7 Timeline Graph triangle
    ---------------------------------------------------------------------------*/
    .timeline-graph:before,
    .timeline-graph > li .tm-label:after,
    .timeline-graph > li .tm-label:before,
    .timeline-graph > li:nth-child(odd) .tm-label:after,
    .timeline-graph > li:nth-child(odd) .tm-label:before{
        display: none;
    }

    /* 13.4 Date
    ---------------------------------------------------------------------------*/
    .timeline-graph > li .tm-dt,
    .timeline-graph > li:nth-child(even) .tm-dt {
        float: right;
        margin: 8px 10px 0 0;
    }

    /* 13.5 post (divided by 2 left & right)
    ---------------------------------------------------------------------------*/
    .timeline-graph > li .tm-label,
    .timeline-graph > li:nth-child(odd) .tm-label {
        width: 100%;
        margin: -40px 0 0 0;
    }

    /* 13.8 Timeline Graph icons
    ---------------------------------------------------------------------------*/
    .timeline-graph > li .tm-icon {
        left: 0;
        margin: 0 0 40px 10px;

        -webkit-border-radius: 0;
           -moz-border-radius: 0;
             -o-border-radius: 0;
                border-radius: 0;
    }


    /* 16.2.1 Wrapper
    ---------------------------------------------------------------------------*/
    .team-style1 {
        width: 480px;
        padding: 0;
    }

    /* 16.2.2 items
    ---------------------------------------------------------------------------*/
    .team-style1 li {
        float: none;
        width: 345px;
        margin: 0 auto 30px;
    }


    /* 24.1 Wrapper
    ---------------------------------------------------------------------------*/
    .team-grid {
        padding: 0;
        width: 480px;
    }

    /* 24.2 items
    ---------------------------------------------------------------------------*/
    .team-grid li {
        width: 217px;
        margin: 0 0 15px 15px;
    }

    /* 24.3 image
    ---------------------------------------------------------------------------*/
    .team-grid li .img-figure img {
        width: 207px;
        height: 207px;
    }


    /* 7.3 Overlayer
    ---------------------------------------------------------------------------*/
    .portfolio-grid-4 li .img-figure-overlayer { z-index: 1; }

    /* 27.2.1 Wrapper, 27.3.1 Wrapper, 27.4.1 Wrapper
    ---------------------------------------------------------------------------*/
    .portfolio-grid-4 li .title-caption span:last-child { display: block; }
    .portfolio-grid-4,
    .portfolio-grid-3,
    .portfolio-grid-2 {
        padding: 0;
        width: 480px;
    }

    /* 27.2.2 items, 27.3.2 items, 27.3.2 items
    ---------------------------------------------------------------------------*/
    .portfolio-grid-4 li,
    .portfolio-grid-3 li,
    .portfolio-grid-2 li {
        float: none;
        width: 420px;
        margin: 0 30px 30px;
    }

    /* 27.2.3 image figure, 27.3.3 image figure, 27.4.3 image figure
    ---------------------------------------------------------------------------*/
    .portfolio-grid-4 li .img-figure img,
    .portfolio-grid-3 li .img-figure img,
    .portfolio-grid-2 li .img-figure img {
        width: 420px;
        height: 237px;
    }


    /* 31.3 Article
    ---------------------------------------------------------------------------*/
    .blog-normal article {
        padding: 0;
        width: 100%;
        position: relative;
    }
    article.right-post,
    article.left-post { padding: 0 0 15px; }


    /* 32.2 Article
    ---------------------------------------------------------------------------*/
    .blog-timeline article {
        width: 100%;
        padding: 0 0 15px;
        position: relative;
    }

    /* 32.3 Border
    ---------------------------------------------------------------------------*/
    .blog-timeline article.right-post:after,
    .blog-timeline article.left-post:after {
        display: none;
    }


    /* ==========================================================================
       33. Load More
    ========================================================================== */
    .load-more { margin: 0 0 15px 0; }


    /* 34.1 Wrapper, 34.4.1 Wrapper, 34.5.1 Wrapper
    ---------------------------------------------------------------------------*/
    .single-post,
    .post-author-box,
    .related-posts,
    .post-comments {
        margin-bottom: 15px;
    }

    /* 34.5.2 list
    ---------------------------------------------------------------------------*/
    .related-posts ul {
        width: 418px;
        margin: 0 auto;
    }

    /* 34.5.3 items
    ---------------------------------------------------------------------------*/
    .related-posts li {
        float: left;
        width: 388px;
        margin: 0 15px 30px;
    }
    .related-posts li:nth-child(2) { margin: 0 15px 30px; }


    /* 35.4.3 image
    ---------------------------------------------------------------------------*/
    .recent-posts .post-thumbnail { margin-right: 10px; }


    /* 34.6.3 items
    ---------------------------------------------------------------------------*/
    .post-comments ul li ul li { margin-left: 15px; }


    /* ==========================================================================
       37. Contact Details
    ========================================================================== */
    .contact .col-md-4 { padding: 0 15px; }
    .contact .col-md-4:after { display: none; }


    /* ==========================================================================
       40.6 Flickr Feed
    ========================================================================== */
    .footer .flickr-feed li img {
        width: 66px;
        height: 66px;
    }
    .footer .flickr-feed li { margin: 0 5px 10px !important; }


    /* 40.1 Wrapper
    ---------------------------------------------------------------------------*/
    .footer .col-md-9 { padding-bottom: 0; }


    /* ==========================================================================
       41. Copyright
    ========================================================================== */
    .footer .copyright {
        text-align: center;
        padding: 35px 0 16px;
    }
    .footer .copyright .col-md-9 { padding: 0 15px; }
    .footer .copyright p { margin: 3px 0 13px; }


    /* 42.7 modal
    ---------------------------------------------------------------------------*/
    .modal-dialog { width: 460px; }
    .modal-body { padding-bottom: 5px; }


}




/* 43.4 Phone   : 320px
---------------------------------------------------------------------------*/
@media only screen and (max-width: 479px) {


    /* 3.3 list, 3.5 Captions, 5.2 Home Section
    ---------------------------------------------------------------------------*/
    .home-slider ul.slides li,
    .flex-caption,
    #home-section { height: 300px; }

    /* 3.5 Captions
    ---------------------------------------------------------------------------*/
    .caption-1,
    .caption-2,
    .caption-3 { top: 0; }
    .caption-1 h1 { font-size: 20px !important; line-height: 29px !important; }
    .caption-2 { display: none !important; }
    .caption-3  { top: 170px; }
    .home-slider ul.slides h1,
    .home-slider ul.slides h3 { padding: 10px; }

    /* 3.7 Direction Nav
    ---------------------------------------------------------------------------*/
    .home-slider .flex-control-nav { display: none; }


    /* 4.1.1 Wrapper
    ---------------------------------------------------------------------------*/
    .gn-menu-main:before { display: none; }

    /* 4.3.1 Wrapper
    ---------------------------------------------------------------------------*/
    #menu-social-icons { display: none; }

    /* 4.6 Anchor
    ---------------------------------------------------------------------------*/
    .caption-3 a {
        width: 50px;
        height: 50px;
        font-size: 22px;
        line-height: 50px;
    }


    /* 5.6 Blog Section
    ---------------------------------------------------------------------------*/
    .blog-section { padding: 15px 0 0; }

    /* 5.7 Blog Timeline
    ---------------------------------------------------------------------------*/
    .blog-timeline-section { padding: 15px 0 0; }


    /* 6.2 feature-box-style1
    ========================================================================== */
    /* 6.2.1 Wrapper
    ---------------------------------------------------------------------------*/
    .feature-boxs-wrapper1 .col-md-4 {
        overflow: visible;
        padding-bottom: 15px;
        margin-bottom: 15px;
    }
    .feature-boxs-wrapper1 .feature-box-style1 {
        padding: 0;
        margin-bottom: 0;
    }
    .feature-boxs-wrapper1 .col-md-4:after {
        top: 100%;
        width: 100%;
        height: 1px;

        background-image: -webkit-linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0));
        background-image: -moz-linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0));
        background-image: -ms-linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0));
        background-image: -o-linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0));
        background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0));
    }


    /* 7.2 items
    ---------------------------------------------------------------------------*/
    .latest-works li {
        float: none;
        width: 290px;
        display: block;
        margin: 0 auto 15px;
    }


    /* 9.2 items
    ---------------------------------------------------------------------------*/
    .project-details li {
        width: 110px;
        height: 110px;
        line-height: 100px;
        margin: 20px 5px 0;

        -webkit-border-radius: 20px;
           -moz-border-radius: 20px;
             -o-border-radius: 20px;
                border-radius: 20px;

        -webkit-border: 5px solid #e4e4e4;
           -moz-border: 5px solid #e4e4e4;
             -o-border: 5px solid #e4e4e4;
                border: 5px solid #e4e4e4;
    }
    .col-md-6 .project-details li {
        width: 110px;
        height: 110px;
        line-height: 100px;
        margin: 20px 5px 0;

        -webkit-border: 5px solid #e4e4e4;
           -moz-border: 5px solid #e4e4e4;
             -o-border: 5px solid #e4e4e4;
                border: 5px solid #e4e4e4;
    }


    /* 10.1 Wrapper
    ---------------------------------------------------------------------------*/
    .presentaion .col-md-6:last-child { margin-bottom: 30px; }


    /* 11.1 Wrapper
    ---------------------------------------------------------------------------*/
    .attention-box { max-width: 100%; }

    /* 11.4 attention box small
    ---------------------------------------------------------------------------*/
    .attention-box-small {
        padding: 15px;
        max-width: 100%;
    }
    .attention-box-small h3 {line-height: 29px; }

    /* 12.2 Page Title
    ---------------------------------------------------------------------------*/
    .gn-menu-main > li.page-title { display: none; }


    /* 13.1 Wrapper
    ---------------------------------------------------------------------------*/
    .timeline-graph { padding: 0; }

    /* 13.2 list
    ---------------------------------------------------------------------------*/
    .timeline-graph li,
    .timeline-graph li:first-child { margin-top: 0; }


    /* 13.3 line, 13.7 Timeline Graph triangle
    ---------------------------------------------------------------------------*/
    .timeline-graph:before,
    .timeline-graph > li .tm-label:after,
    .timeline-graph > li .tm-label:before,
    .timeline-graph > li:nth-child(odd) .tm-label:after,
    .timeline-graph > li:nth-child(odd) .tm-label:before {
        display: none;
    }

    /* 13.4 Date
    ---------------------------------------------------------------------------*/
    .timeline-graph > li .tm-dt,
    .timeline-graph > li:nth-child(even) .tm-dt {
        float: right;
        margin: 8px 10px 0 0;
    }

    /* 13.5 post (divided by 2 left & right)
    ---------------------------------------------------------------------------*/
    .timeline-graph > li .tm-label,
    .timeline-graph > li:nth-child(odd) .tm-label {
        width: 100%;
        margin: -40px 0 0 0;
    }

    /* 13.8 Timeline Graph icons
    ---------------------------------------------------------------------------*/
    .timeline-graph > li .tm-icon {
        left: 0;
        margin: 0 0 40px 10px;

        -webkit-border-radius: 0;
           -moz-border-radius: 0;
             -o-border-radius: 0;
                border-radius: 0;
    }


    /* 16.2.1 Wrapper
    ---------------------------------------------------------------------------*/
    .team-style1 {
        padding: 0;
        width: 320px;
        margin: 0 auto;
    }

    /* 16.2.2 items
    ---------------------------------------------------------------------------*/
    .team-style1 li {
        float: none;
        width: 290px;
        display: block;
        margin: 0 auto 15px;
    }
    .team-style1 li:last-child { margin: 0 auto 30px; }


    /* 17.3 image
    ---------------------------------------------------------------------------*/
    .about-me .member-img {
        width: 100px;
        height: 100px;
        margin: -100px 0 30px 15px;
    }
    /* 17.4 info
    ---------------------------------------------------------------------------*/
    .about-me .member-info { margin: -104px 0 30px 115px; }
    .about-me .member-info h2 { font-size: 22px; }


    /* 24.1 Wrapper
    ---------------------------------------------------------------------------*/
    .team-grid {
        padding: 0;
        width: 320px;
    }

    /* 24.2 items
    ---------------------------------------------------------------------------*/
    .team-grid li {
        width: 290px;
        margin: 0 0 15px 15px;
    }

    /* 24.3 image
    ---------------------------------------------------------------------------*/
    .team-grid li .img-figure img {
        width: 280px;
        height: 280px;
    }


    /* 7.3 Overlayer
    ---------------------------------------------------------------------------*/
    .portfolio-grid-4 li .img-figure-overlayer { z-index: 1; }


    /* 27.2.1 Wrapper, 27.3.1 Wrapper, 27.4.1 Wrapper
    ---------------------------------------------------------------------------*/
    .portfolio-grid-4 li .title-caption span:last-child { display: block; }
    .portfolio-grid-4,
    .portfolio-grid-3,
    .portfolio-grid-2 {
        padding: 0;
        width: 320px;
    }

    /* 27.2.2 items, 27.3.2 items, 27.3.2 items
    ---------------------------------------------------------------------------*/
    .portfolio-grid-4 li,
    .portfolio-grid-3 li,
    .portfolio-grid-2 li {
        float: none;
        width: 290px;
        margin: 0 15px 15px;
    }
    .portfolio-grid-4 li:last-child,
    .portfolio-grid-3 li:last-child,
    .portfolio-grid-2 li:last-child {
        margin: 0 15px 30px;
    }

    /* 27.2.3 image figure, 27.3.3 image figure, 27.4.3 image figure
    ---------------------------------------------------------------------------*/
    .portfolio-grid-4 li .img-figure img,
    .portfolio-grid-3 li .img-figure img,
    .portfolio-grid-2 li .img-figure img {
        width: 290px;
        height: 163px;
    }


    /* 31.3 Article
    ---------------------------------------------------------------------------*/
    .blog-normal article {
        padding: 0;
        width: 100%;
        position: relative;
    }
    article.right-post,
    article.left-post { padding: 0 0 15px; }


    /* 32.2 Article
    ---------------------------------------------------------------------------*/
    .blog-timeline article {
        width: 100%;
        padding: 0 0 15px;
        position: relative;
    }

    /* 32.3 Border
    ---------------------------------------------------------------------------*/
    .blog-timeline article.right-post:after,
    .blog-timeline article.left-post:after {
        display: none;
    }


    /* ==========================================================================
       33. Load More
    ========================================================================== */
    .load-more { margin: 0 0 15px 0; }


    /* 34.1 Wrapper, 34.4.1 Wrapper, 34.5.1 Wrapper
    ---------------------------------------------------------------------------*/
    .single-post,
    .post-author-box,
    .related-posts,
    .post-comments {
        margin-bottom: 15px;
    }

    /* 34.5.2 list
    ---------------------------------------------------------------------------*/
    .related-posts ul {
        width: 258px;
        margin: 0 auto;
    }

    /* 34.5.3 items
    ---------------------------------------------------------------------------*/
    .related-posts li {
        float: left;
        width: 258px;
        margin: 0 0 15px;
    }
    .related-posts li:nth-child(2) { margin: 0 0 15px; }
    .related-posts li:last-child { margin: 0; }

    /* 34.6.7.1 Wrapper
    ---------------------------------------------------------------------------*/
    .comments-meta { margin: 0; }

    /* 34.6.7.2 Date, 34.6.7.3 Time
    ---------------------------------------------------------------------------*/
    .comments-meta .comments-date { margin-bottom: 5px; }
    .post-comments .comments-author {
        margin-top: 0;
        margin-bottom: 5px;
    }

    /* 34.6.3 items
    ---------------------------------------------------------------------------*/
    .post-comments ul li ul li { margin-left: 5px; }


    /* 35.4.3 image
    ---------------------------------------------------------------------------*/
    .recent-posts .post-thumbnail { margin-right: 10px; }


    /* ==========================================================================
       37. Contact Details
    ========================================================================== */
    .contact .col-md-4 { padding: 0 15px; }
    .contact .col-md-4:after { display: none; }


    /* ==========================================================================
       40.6 Flickr Feed
    ========================================================================== */
    .footer .flickr-feed li img {
        width: 66px;
        height: 66px;
    }
    .footer .flickr-feed li { margin: 0 5px 10px !important; }


    /* 40.1 Wrapper
    ---------------------------------------------------------------------------*/
    .footer .col-md-9 { padding-bottom: 0; }


    /* ==========================================================================
       41. Copyright
    ========================================================================== */
    .footer .copyright {
        text-align: center;
        padding: 35px 0 16px;
    }
    .footer .copyright .col-md-9 { padding: 0 15px; }
    .footer .copyright p { margin: 3px 0 13px; }


    /* 42.7 modal
    ---------------------------------------------------------------------------*/
    .modal-dialog { width: 300px; }
    .modal-body { padding-bottom: 5px; }


}