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

 * Template Name: Step - One Page Creative Portfolio Template.
 * Template URI: 
 * Author: ixTheme
 * Description: Responsive HTML5 Template
 * Version: 1.0
 * Copyright 2017 ixTheme


==============================================================================
    
    [Table of contents]
    ===================
	
    01. Google Fonts
    02. Reset CSS (body, link color, section etc)
    03. Social Icons
    04. Header Section
    05. About Section
    06. Expreince Section
    07. Portfolio Section
    08. Service Section
    09. HireMe Section
    10. Testimonial Section
    11. Blog Section
    12. Contact Section
    13. Footer Section
    14. Temptale Color Panel Section

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


/* =======================================
    01. Google Fonts
======================================= */

@import url('https://fonts.googleapis.com/css?family=Nunito:300,400,700');

/* ============================================================
    02. Reset CSS (body, link color, section etc)
============================================================ */

html,
body {
    height: 100%;
    font-family: 'Nunito', sans-serif;
}

body {
    position: relative;
}

.table {
    display: table;
    margin-bottom: 0px;
}

.table_cell {
    height: 100%;
    display: table-cell;
    vertical-align: middle;
}

a {
    color: #2d3e50;
    -webkit-transition: all 0.15s ease 0s;
    -o-transition: all 0.15s ease 0s;
    transition: all 0.15s ease 0s;
    text-decoration: none;
}

a:focus {
    outline: 0px none;
}

a:active,
a:hover {
    outline: 0px none;
    text-decoration: none;
}

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

p {
    margin: 0 0 15px;
    font-size: 15px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 10px;
}

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

.clear {
    clear: both
}

section {
    padding: 100px 0;
}

::-moz-selection {
    text-shadow: none;
    background-color: #2d3e50;
    color: #fff;
}

::selection {
    text-shadow: none;
    background-color: #2d3e50;
    color: #fff;
}

.browserupgrade {
    margin: 0.2em 0;
    padding: 0.2em 0;
}


/* =======================================
    03. Social Icons Start
======================================= */


/* --- Social Header --- */

.socials {
    margin: 10px 0 20px;
}

.socials>a {
    color: #2d3e50;
    background-color: #fff;
    border-radius: 2px;
    display: inline-block;
    font-size: 15px;
    margin: 0 5px;
    padding: 0 10px;
}

.socials>a:hover {
    color: #fff;
    -webkit-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.21), 0 3px 12px 0 rgba(0, 0, 0, 0.18);
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.21), 0 3px 12px 0 rgba(0, 0, 0, 0.18);
}

.socials>a:hover:nth-child(1) {
    background-color: #3B5999;
}

.socials>a:hover:nth-child(2) {
    background-color: #55ACEE;
}

.socials>a:hover:nth-child(3) {
    background-color: #0077B5;
}

.socials>a:hover:nth-child(4) {
    background-color: #742caa;
}

.socials>a:hover:nth-child(5) {
    background-color: #DD4B39;
}

.socials>a>i {
    height: 33px;
    line-height: 35px;
    width: 33px;
}


/* =======================================
    03. Social Icons End
======================================= */


/* =======================================
    04. Header Section Start
======================================= */

header.header_wrapper {
    background-color: #2d3e50;
    background-image: url("https://i.imgur.com/FtrmKcd.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 650px;
    position: relative;
    z-index: 6;
}

header.header_wrapper::after {
    background-color: #2d3e50;
    opacity: 0.4;
    content: "";
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 0;
}


/* ========================= navBar Start ====================== */

/* -------- Nav Icon Start -------- */

.menu_toggle>span.bg_white {
    background-color: #fff;
}

.menu_toggle {
    cursor: pointer;
    padding: 27px 10px;
    position: absolute;
    top: 50%;
    right: 0;
    -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 9999;
}

nav .menu_toggle {
    right: 90px;
    top: 0;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}

.menu_toggle span {
    background-color: #2D3E50;
    border-radius: 3px;
    display: table;
    height: 3px;
    margin-top: 6px;
    -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 28px;
}

.menu_toggle>span:nth-child(2) {
    -webkit-transform: scaleX(0.7);
    -ms-transform: scaleX(0.7);
    transform: scaleX(0.7);
}

.menu_toggle:hover>span:nth-child(2) {
    -webkit-transform: scaleX(1);
    -ms-transform: scaleX(1);
    transform: scaleX(1);
}

.menu_toggle:hover>span:nth-child(1),
.menu_toggle:hover>span:nth-child(3) {
    -webkit-transform: scaleX(0.7);
    -ms-transform: scaleX(0.7);
    transform: scaleX(0.7);
}

.menu_toggle_close.menu_toggle>span:nth-child(1) {
    -webkit-transform: translateY(9px) rotate(-45deg);
    -ms-transform: translateY(9px) rotate(-45deg);
    transform: translateY(9px) rotate(-45deg);
    width: 28px;
}

.menu_toggle_close.menu_toggle>span:nth-child(3) {
    -webkit-transform: translateY(-9px) rotate(45deg);
    -ms-transform: translateY(-9px) rotate(45deg);
    transform: translateY(-9px) rotate(45deg);
    width: 28px;
}

.span.hide-on-hvr {
    -webkit-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}

.menu_toggle_close.menu_toggle span.hide-on-hvr {
    -webkit-transform: translateX(-15px);
    -ms-transform: translateX(-15px);
    transform: translateX(-15px);
    opacity: 0;
    visibility: hidden;
}


/* -------- Nav Icon End -------- */

.nav_bar {
    background-color: #fff;
    height: 80px;
    line-height: 80px;
    position: fixed;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}

.navbar_fixd {
    height: 65px;
    line-height: 65px;
    -webkit-box-shadow: 0 7px 21px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 7px 21px 0 rgba(0, 0, 0, 0.1);
}

nav {
    background-color: #2d3e50;
    height: 100%;
    position: fixed;
    top: 0;
    width: 100%;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    opacity: 0;
    visibility: hidden;
    z-index: 9899;
}

.nav_open {
    height: 100%;
    opacity: 1;
    visibility: visible;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    opacity: 1;
    visibility: visible;
}

nav ul {
    height: 80%;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 100%;
}

nav ul li {
    display: block;
    height: 14.285%;
}

nav ul li a {
    color: #fff;
    display: inline-block;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 1px;
    padding: 10px 15px;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

nav ul li a:hover {
    font-weight: 500;
    color: #2d3e50;
}

nav ul li a::after {
    background-color: #fff;
    bottom: 0;
    content: "";
    height: 2px;
    left: 0;
    position: absolute;
    width: 100%;
    -webkit-transform: scaleX(0);
    -ms-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: all 0.25s ease 0s;
    -o-transition: all 0.25s ease 0s;
    transition: all 0.25s ease 0s;
    z-index: -1;
}

nav ul li a:hover::after {
    -webkit-transition: all 0.25s ease 0s;
    -o-transition: all 0.25s ease 0s;
    transition: all 0.25s ease 0s;
    -webkit-transform: scaleX(1);
    -ms-transform: scaleX(1);
    transform: scaleX(1);
}

nav ul li a::before {
    background-color: #fff;
    bottom: 0;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    -webkit-transform: scaleY(0);
    -ms-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: center bottom 0;
    -ms-transform-origin: center bottom 0;
    transform-origin: center bottom 0;
    -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 100%;
    z-index: -1;
}

nav ul li a:hover::before {
    -webkit-transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
    -webkit-transition-delay: .3s;
    -o-transition-delay: .3s;
    transition-delay: .3s;
    -webkit-transform: scaleY(1);
    -ms-transform: scaleY(1);
    transform: scaleY(1);
}

nav ul li a:focus,
nav ul li a:active {
    text-decoration: none;
}


/* ======= navBar End ======= */

.header_content .table_cell {
    height: 650px;
}

.header_content {
    color: #fff;
    position: relative;
    z-index: 3;
}

.header_content h2 {
    margin-top: 60px;
}

.header_content h1 {
    font-size: 36px;
    font-weight: bold;
    text-transform: uppercase;
}


/* --- Default Button Style Start --- */

.step_btn {
    color: #fff;
    border-radius: 25px;
    display: inline-block;
    height: 45px;
    letter-spacing: 1px;
    line-height: 45px;
    overflow: hidden;
    padding: 0 35px;
    position: relative;
    z-index: 2;
    -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.02);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.02);
}

.step_btn:hover {
    color: #2d3e50;
}

.step_btn::after {
    background-color: #fff;
    border-radius: 50%;
    border: 25px solid #fff;
    content: "";
    height: 0px;
    left: 50%;
    position: absolute;
    top: 75%;
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);
    transform: translate(-50%);
    -webkit-transition: all .5s ease 0s;
    -o-transition: all .5s ease 0s;
    transition: all .5s ease 0s;
    width: 0px;
    z-index: -1;
}

.step_btn:hover::after {
    height: 200px;
    top: -77px;
    width: 200px;
}

a.step_btn:focus,
a.step_btn:active {
    text-decoration: none;
}


/* --- Default Button Style End --- */


/* =======================================
    04. Header Section End
======================================= */


/* =======================================
    05. About Section Start
======================================= */

.about_wrapper {
    position: relative;
}

.about_wrapper::after {
    background-image: url("https://i.imgur.com/D2PJxch.png");
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    height: 260px;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
}

.section_title {
    margin-bottom: 50px;
}

.section_title p {
    border-right-width: 0px;
    border-top-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 4px;
    border-left-style: solid;
    position: relative;
    z-index: 1;
    padding-left: 10px;
    margin: 0 0 10px;
    font-size: 36px;
}

.section_title p::after,
.section_title p::before {
    content: "";
    height: 3px;
    left: -10px;
    position: absolute;
    top: 0;
    width: 10px;
    z-index: -1;
}

.section_title p::before {
    left: -4px;
    top: 100%;
}

.about_content img {
    -webkit-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    max-height: 270px;
    z-index: 22;
}

.about_content span {
    display: block;
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 10px;
}

.about_content .table_cell {
    height: 300px;
}

.about_content p {
    color: #777;
    font-weight: 100;
    font-size: 16px;
}

.about_content p.about_title {
    font-size: 36px;
    margin: 0 0 1px 0;
    font-weight: 500;
    color: #2D3E50;
}


/*  -----  Skill Area Start  -----  */

.skills .col-sm-6 {
    margin-top: 35px;
}

.skillMain {
    border-radius: 25px;
    height: 18px;
    -webkit-box-shadow: 0 0 30px #dbdbdb;
    box-shadow: 0 0 30px #dbdbdb;
}

.skillBar {
    color: #fff;
    border-radius: 25px;
    font-size: 13px;
    height: 5px;
    padding: 0 12px;
    position: relative;
    top: 40%;
}

.skillText {
    color: #2d3e50;
    background-color: #fff;
    border-width: 1px;
    border-style: solid;
    border-radius: 20px;
    left: 10px;
    padding: 2px 10px;
    position: absolute;
    top: -10px;
}


/*  -----  Skill Area End  -----  */


/* =======================================
    05. About Section End
======================================= */


/* =======================================
    06. Expreince Section Start
======================================= */

.expreince_wrapper,
.hire_me_wrapper {
    background-attachment: fixed;
    background-color: #2d3e50;
    background-image: url("https://i.imgur.com/vO8TzpI.jpg");
    color: #fff;
    text-align: center;
    position: relative;
    z-index: 1;
    -webkit-animation: animateBg 5s liner infinite;
    animation: animatedBg 5s linear infinite;
}

@-webkit-keyframes animatedBg {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 0 -448px;
    }
}

@keyframes animatedBg {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 0 -448px;
    }
}

.expreince_wrapper::before,
.hire_me_wrapper::before {
    background-color: #2d3e50;
    opacity: 0.93;
    content: "";
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 0;
}

.expreince_wrapper h2 {
    font-weight: 700;
}

.expreince_wrapper .exp_icon {
    color: #fff;
    border: 3px solid #fff;
    border-radius: 2px;
    font-size: 19px;
    height: 40px;
    margin: 25px auto;
    padding: 5px;
    -webkit-transform: rotate(17deg);
    -ms-transform: rotate(17deg);
    transform: rotate(17deg);
    width: 40px;
}

.expreince_wrapper span {
    text-transform: uppercase;
    display: block;
}


/* =======================================
    06. Expreince Section End
======================================= */


/* =======================================
    07. Portfolio Section Start
======================================= */

.portfolio_wrapper {
    background-color: #F2F2F2;
}

.mix {
    margin-top: 30px;
}

.portfolio_item {
    min-height: 175px;
    overflow: hidden;
    position: relative;
}

.portfolio_item::before {
    background-color: rgba(255, 255, 255, 0);
    content: "";
    height: 0;
    left: 50%;
    opacity: 0;
    position: absolute;
    top: 50%;
    -webkit-transition: all 0.6s ease 0.1s;
    -o-transition: all 0.6s ease 0.1s;
    transition: all 0.6s ease 0.1s;
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);
    transform: translate(-50%);
    width: 0;
}

.portfolio_item:hover::before {
    height: 100%;
    opacity: .9;
    top: 0;
    -webkit-transition: all 0.8s ease 0.1s;
    -o-transition: all 0.8s ease 0.1s;
    transition: all 0.8s ease 0.1s;
    width: 100%;
}

.portfolio_filter ul li:first-child {
    padding-left: 0;
}

.portfolio_filter ul li {
    color: #2d3e50;
    cursor: pointer;
    display: inline-block;
    font-size: 16px;
    padding: 5px;
    -webkit-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
}

.portfolio_filter li button {
    background: transparent;
    border: 0;
    outline: 0;
}

.portfolio_item_inner {
    color: #fff;
    left: 0;
    line-height: 40px;
    position: absolute;
    text-align: center;
    text-transform: capitalize;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 100%;
}

.portfolio_item_inner h3,
.portfolio_item_inner p {
    text-shadow: 0 0 10px #2D3E50;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all .6s;
    -o-transition: all .6s;
    transition: all .6s;
}

.portfolio_item_inner h3 {
    -webkit-transform: translateY(40px);
    -ms-transform: translateY(40px);
    transform: translateY(40px);
}

.portfolio_item_inner p {
    margin: 0;
    -webkit-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    transform: translateY(-40px);
}

.portfolio_item:hover .portfolio_item_inner h3 {
    -webkit-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    transform: translateY(-5px);
    -webkit-transition: all .6s;
    -o-transition: all .6s;
    transition: all .6s;
}

.portfolio_item:hover .portfolio_item_inner p {
    -webkit-transform: translateY(3px);
    -ms-transform: translateY(3px);
    transform: translateY(3px);
    -webkit-transition: all .6s;
    -o-transition: all .6s;
    transition: all .6s;
}

.portfolio_item:hover .portfolio_item_inner h3,
.portfolio_item:hover .portfolio_item_inner p {
    -webkit-transition-delay: .7s;
    -o-transition-delay: .7s;
    transition-delay: .7s;
    opacity: 1;
    visibility: visible;
}

a.port_item {
    color: #2d3e50;
    background-color: #fff;
    border-radius: 30px;
    display: inline-block;
    height: 30px;
    line-height: 30px;
    opacity: 0;
    position: relative;
    -webkit-transform: scale(2);
    -ms-transform: scale(2);
    transform: scale(2);
    visibility: hidden;
    width: 55px;
    z-index: 1;
    -webkit-transition: all 0.1s;
    -o-transition: all 0.1s;
    transition: all 0.1s;
}

.portfolio_item:hover a.port_item {
    opacity: 1;
    visibility: visible;
    -webkit-transition: all 0.4s ease 0.1s;
    -o-transition: all 0.4s ease 0.1s;
    transition: all 0.4s ease 0.1s;
    -webkit-transition-delay: .5s;
    -o-transition-delay: .5s;
    transition-delay: .5s;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}

a.port_item i {
    -webkit-transition: all .1s;
    -o-transition: all .1s;
    transition: all .1s;
    -webkit-transform: rotate(44deg);
    -ms-transform: rotate(44deg);
    transform: rotate(44deg);
}

a.port_item:hover i {
    -webkit-transform: scale(1.3) rotate(44deg);
    -ms-transform: scale(1.3) rotate(44deg);
    transform: scale(1.3) rotate(44deg);
}


/* =======================================
    07. Portfolio Section End
======================================= */


/* =======================================
    08. Service Section Start
======================================= */

.service_wrapper {
    background-color: #fff;
}

.service_content p {
    color: #777;
    font-weight: 100;
}

.service_content .col-md-4 {
    padding: 0;
}

.service_content .service_item {
    min-height: 210px;
}

.service_item .service_item_inner {
    border: 1px solid #f0f0f0;
    cursor: default;
    height: 100%;
    padding: 30px 25px;
    position: relative;
    -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    z-index: 1;
}

.service_item_inner.hide_border_top_left {
    border-top-color: transparent;
    border-left-color: transparent;
}

.service_item_inner.hide_border_top {
    border-top-color: transparent;
}

.service_item_inner.hide_border_top_right {
    border-top-color: transparent;
    border-right-color: transparent;
}

.service_item_inner.hide_border_left_bottom {
    border-left-color: transparent;
    border-bottom-color: transparent;
}

.service_item_inner.hide_border_bottom {
    border-bottom-color: transparent;
}

.service_item_inner.hide_border_right_bottom {
    border-right-color: transparent;
    border-bottom-color: transparent;
}

.service_item .service_item_inner::after,
.service_item .service_item_inner::before {
    content: "";
    height: 5px;
    left: 30px;
    position: absolute;
    top: 48px;
    -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 20px;
    z-index: -1;
    border-radius: 5px;
}

.service_item .service_item_inner::after {
    top: 60px;
}

.service_item .service_item_inner:hover::after {
    width: 80px;
}

.service_item .service_item_inner:hover::before {
    width: 65px;
    -webkit-transition-delay: .13s;
    -o-transition-delay: .13s;
    transition-delay: .13s;
}

.service_item_inner i {
    color: #fff;
    border-radius: 50%;
    font-size: 22px;
    height: 50px;
    line-height: 50px;
    display: inline-block;
    margin: 0 0 20px;
    text-align: center;
    -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 50px;
    -webkit-box-shadow: 0 7px 13px 0 rgba(0, 0, 0, 0.05), 0 0px 15px 0 rgba(0, 0, 0, 0.09);
    box-shadow: 0 7px 13px 0 rgba(0, 0, 0, 0.05), 0 0px 15px 0 rgba(0, 0, 0, 0.09);
}

.service_item_inner:hover i {
    -webkit-box-shadow: 0 7px 13px 0 rgba(0, 0, 0, 0.2), 0 0px 15px 0 rgba(0, 0, 0, 0.09);
    box-shadow: 0 7px 13px 0 rgba(0, 0, 0, 0.2), 0 0px 15px 0 rgba(0, 0, 0, 0.09);
}

.service_item_inner>h3 {
    display: inline-block;
    line-height: 50px;
    margin-bottom: 0;
    float: right;
}


/* =======================================
    08. Service Section End
======================================= */


/* =======================================
    09. HireMe Section Start
======================================= */

.hire_me_wrapper h2 {
    color: #fff;
    margin: 8px 0;
}


/* =======================================
    09. HireMe Section End
======================================= */


/* =======================================
    10. Testimonial Section Start
======================================= */

.testimonial_wrapper .owl-carousel .owl-item img {
    display: block;
    margin: 20px auto;
    width: 130px;
    -webkit-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.testimonial_wrapper .item span {
    font-size: 16px;
    font-weight: 700;
}

.testimonial_wrapper .item p {
    color: #777;
    margin-bottom: 10px;
}

.owl-dots {
    margin-top: 10px;
    text-align: center;
}

.owl-dots .owl-dot {
    display: inline-block;
}

.owl-carousel .owl-dot {
    -moz-user-select: none;
    cursor: pointer;
}

.owl-dots .owl-dot span {
    background-color: #d6d6d6;
    display: block;
    height: 10px;
    margin: 0 6px;
    width: 10px;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
}


/* =======================================
    10. Testimonial Section End ---
======================================= */


/* =======================================
    11. Blog Section Start
======================================= */

.blog_wrapper {
    background-color: #F2F2F2;
}

.blog_wrapper .section_title {
    margin-bottom: 65px;
}

.blog_item {
    background-color: #fff;
    border-radius: 3px;
    padding: 30px 30px 40px;
    -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.02);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.02);
}

.blog_item .blog_img {
    position: relative;
    top: -60px;
    z-index: 1;
    overflow: hidden;
    max-height: 250px;
    margin: 0 auto;
    border-radius: 4px;
}

.blog_item .blog_img img {
    max-height: 250px;
    margin: 0 auto;
    border-radius: 4px;
    -webkit-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}

.blog_links {
    margin-left: 0;
    margin-top: -35px;
    padding: 0 20px;
}

.blog_links a {
    text-transform: capitalize;
}


/* =======================================
    11. Blog Section End ---
======================================= */


/* =======================================
    12. Contact Section Start
======================================= */

.form-group {
    margin-bottom: 25px;
}

.form-control {
    border: 1px solid rgba(221, 221, 221, 1);
    -webkit-box-shadow: none;
    box-shadow: none;
    height: 45px;
    border-radius: 0;
    -webkit-box-shadow: 0 7px 13px 0 rgba(72, 194, 78, 0.02), 0 0px 15px 0 rgba(72, 194, 78, 0.09);
    box-shadow: 0 7px 13px 0 rgba(72, 194, 78, 0.02), 0 0px 15px 0 rgba(72, 194, 78, 0.09);
}

textarea.form-control {
    resize: none;
    padding: 14px 12px;
}

.form-control:hover {
    border-width: 1px;
    border-style: solid;
}

.form-control:focus {
    border-width: 1px;
    border-style: solid;
    -webkit-box-shadow: none;
    box-shadow: none;
    outline: 0 none;
    -webkit-box-shadow: 0 7px 21px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 7px 21px 0 rgba(0, 0, 0, 0.1);
}

button.step_btn {
    color: #fff;
    border: 0;
    -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.address {
    padding: 0 20px;
}

.address .row {
    margin: 0;
}

.address h5 {
    font-size: 16px;
    font-weight: 600;
    margin: 3px 0;
}

.address i {
    font-size: 18px;
}

.address p {
    color: #777;
    margin: 0 0 20px;
}

.address .row:last-child>p {
    margin-bottom: 0;
}


/* --- footerSocialsStart --- */

.contact_wrapper .socials {
    margin-top: 60px;
    text-align: center;
    margin-bottom: 0;
}

.contact_wrapper .socials a {
    color: #fff;
    -webkit-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.21), 0 3px 12px 0 rgba(0, 0, 0, 0.18);
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.21), 0 3px 12px 0 rgba(0, 0, 0, 0.18);
}

.contact_wrapper .socials>a:nth-child(1) {
    background-color: #3B5999;
}

.contact_wrapper .socials>a:nth-child(2) {
    background-color: #55ACEE;
}

.contact_wrapper .socials>a:nth-child(3) {
    background-color: #0077B5;
}

.contact_wrapper .socials>a:nth-child(4) {
    background-color: #742caa;
}

.contact_wrapper .socials>a:nth-child(5) {
    background-color: #DD4B39;
}

.contact_wrapper .socials>a:hover {
    background-color: #fff;
    color: #2d3e50;
}


/* --- footerSocialsEnd --- */

.map {
    height: 300px;
    margin-top: 60px;
    -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.02);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.02);
}


/* =======================================
    12. Contact Section End
======================================= */


/* =======================================
    13. Footer Section Start
======================================= */

.footer_wrapper {
    background-color: #2d3e50;
    color: #fff;
    height: 160px;
}

.footer_wrapper p {
    margin: 0;
    color: #ddd;
}

.footer_wrapper p a {
    color: #fff;
}

.footer_wrapper .table_cell {
    height: 160px;
}

a.go_top {
    bottom: 0;
    font-size: 30px;
    padding: 0 23px;
    position: fixed;
    right: 25px;
    z-index: 2;
    opacity: 0;
    visibility: hidden;
}

a.go_top_visible {
    bottom: 25px;
    opacity: 1;
    visibility: visible;
}

.go_top i {
    left: 50%;
    position: absolute;
    top: 16%;
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);
    transform: translate(-50%);
}


/* =======================================
    13. Footer Section End
======================================= */


/* =======================================
    14. Temptale Color Panel Section Start
======================================= */

.color_panel {
    background-color: #fff;
    border-radius: 4px;
    border-style: solid;
    border-color: #333;
    border-width: 2px;
    left: -62px;
    padding: 5px 15px;
    position: fixed;
    top: 20%;
    width: auto;
    z-index: 9999;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}

.color_panel.show_color_panel {
    left: -3px;
}

.color_panel i {
    background-color: #fff;
    border-radius: 0 4px 4px 0;
    border-style: solid;
    border-color: #333;
    border-width: 2px 2px 2px 0;
    color: #333;
    cursor: pointer;
    font-size: 31px;
    padding: 5px 5px;
    position: absolute;
    right: -43px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.color_panel>ul>li {
    cursor: pointer;
    display: block;
    height: 28px;
    margin: 10px 0;
    width: 28px;
}


/* =======================================
    14. Temptale Color Panel Section End
======================================= */