/*--------------------------------------------------------------------------------------
Theme Name: LAWYER
Theme URI: http://devitfamily.com
Author URI: http://devitfamily.com
Description: 100% Responsive, Highly Customizable, SEO Friendly LAWYER HTML template using Twitter Bootstrap Latest, Search Engine Friendly.
Author: BDEXPERT
Version: 1.0
----------------------------------------------------------------------------------------
    1. BASE CSS
    2. TOP AREA
        2.1 MAINMENU AREA
        2.2 WELCOME SLIDER AREA
    3. CATEGORY AREA
    4. ABOUT AREA
    5. SERVICE AREA
    6. TESTMONIAL AREA
    7. FUN FACT AREA
    8. TEAM AREA
    9. CONTACT AREA
    10. TESTMONIAL AREA
    11. SUBSCRIBER AREA
    12. BLOG AREA
    13. FOOTER AREA
    14. SCROLL TO TOP
----------------------------------------------------------------------------------------*/


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

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

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

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

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

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

button:focus {
    outline: 0;
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 15px;
    font-weight: 700;
    font-family: 'Open Sans', sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
}

html,
body {
    height: 100%
}

body {
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    line-height: 1.5em;
    font-weight: 400;
    color: #444444;
}

a {
    color: #252525;
}

a:hover {
    text-decoration: none;
    color: #cc1402;
}

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

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


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

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

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

.area-title h2 {
    color: #252525;
    font-size: 30px;
    letter-spacing: 1px;
    line-height: 1;
    margin-bottom: 30px;
    padding: 0 10px;
    position: relative;
    text-transform: uppercase;
}

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

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

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

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

.red-bg {
    background: #cc1402;
    color: #fff;
}

.dark-bg {
    background: #282828;
    color: #fff;
}

.gray-bg {
    background: #f9f9f9;
}

.no-padding {
    padding: 0;
}

.no-margin {
    margin: 0;
}


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

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

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

.top-area-bg::before {
    background: #2d2242 url("img/pattarn.png") repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.5;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}

#particles-js {
    height: 100%;
    position: absolute;
    width: 100%;
    z-index: 9;
}

.welcome-text-area {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding-top: 100px;
    position: absolute;
    text-align: center;
    width: 100%;
    z-index: 3;
}

.welcome-text {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.top-area-bg.video-bg {
    background: transparent none repeat scroll 0 0;
}


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

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

.top-bar {
    background: #000 none repeat scroll 0 0;
    position: relative;
    z-index: 99;
}

.call-to-action {
    color: #cc1402;
    text-transform: capitalize;
}

.call-to-action p {
    margin-top: 10px;
}

.call-to-action a {
    color: #fff;
    padding-left: 20px;
}

.social-bookmark {
    margin-top: 3px;
}

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

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

.social-bookmark ul li a {
    color: #fff;
    display: inline-block;
    font-size: 15px;
    height: 35px;
    padding-top: 5px;
    text-align: center;
    width: 35px;
}

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

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

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

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

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

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

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

ul#nav li a {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    color: #fff;
    letter-spacing: 2px;
    padding: 33px 15px;
    position: relative;
    text-transform: uppercase;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    font-weight: 600;
}

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

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

ul#nav li a:hover,
ul#nav li.active a {
    color: #cc1402;
}

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

.is-sticky ul#nav li a:hover,
.is-sticky ul#nav li.active a {
    color: #cc1402;
}

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

.is-sticky .mainmenu-area {
    background: rgba(0, 0, 0, 0.8) none repeat scroll 0 0;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
    z-index: 99999 !important;
}


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

.welcome-slider-area.owl-carousel {
    position: relative;
    height: 100%;
    z-index: 9;
}

.welcome-slider-area.owl-carousel div:not(.owl-controls) {
    height: 100%;
}

.single-welcome-slide::before {
    background: #000 url(img/pattarn.png);
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.5;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}

.single-welcome-slide {
    color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    font-size: 18px;
    font-weight: 700;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    letter-spacing: 2px;
    padding-top: 100px;
    position: absolute;
    text-transform: uppercase;
    width: 100%;
    z-index: 9;
}

.welcome-slider-area .owl-controls {
    -moz-box-align: center;
    -moz-box-pack: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 100px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    left: 2%;
    margin-top: -50px;
    position: absolute;
    top: 50%;
    z-index: 9;
}

.welcome-slider-area.owl-carousel .owl-dots {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    text-align: left;
    width: 50px;
}

.welcome-slider-area .owl-dots>div {
    background: #7a8693 none repeat scroll 0 0;
    display: block;
    height: 3px !important;
    margin: 5px 0;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 70%;
}

.welcome-slider-area .owl-dots>div.active {
    background: #cc1402;
    width: 100%;
}

.welcome-slide-one {
    background: url('img/slider/slide_1.jpg');
}

.welcome-slide-two {
    background: url('img/slider/slide_2.jpg');
}

.welcome-slide-three {
    background: url('img/slider/slide_3.jpg');
}

.welcome-slide-four {
    background: url('img/slider/slide_4.jpg');
}

.welcome-slide-one,
.welcome-slide-two,
.welcome-slide-three,
.welcome-slide-four {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.welcome-text h1,
.welcome-text h2,
.single-welcome-slide h1,
.single-welcome-slide h2 {
    font-size: 60px;
    text-transform: uppercase;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.welcome-text h1,
.single-welcome-slide h1 {
    font-weight: 700;
}

a.home-button {
    background: #cc1402 none repeat scroll 0 0;
    color: #fff;
    display: inline-block;
    margin-top: 30px;
    max-width: 200px;
    padding: 12px 20px;
    text-align: center;
}

a.home-button:hover {
    background: #fff none repeat scroll 0 0;
    color: #cc1402;
}

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

.top_to_bottom_2 {
    -webkit-animation: top_to_bottom;
    animation: top_to_bottom;
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.top_to_bottom_3 {
    -webkit-animation: top_to_bottom;
    animation: top_to_bottom;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.top_to_bottom_4 {
    -webkit-animation: top_to_bottom;
    animation: top_to_bottom;
    -webkit-animation-duration: 2.5s;
    animation-duration: 2.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes top_to_bottom {
    0% {
        -webkit-transform: translateY(-35%)scaleY(0);
        transform: translateY(-35%)scaleY(0);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0)scaleY(1);
        transform: translateY(0)scaleY(1);
    }
}

@keyframes top_to_bottom {
    0% {
        -webkit-transform: translateY(-35%)scaleY(0);
        transform: translateY(-35%)scaleY(0);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0)scaleY(1);
        transform: translateY(0)scaleY(1);
    }
}

.slide-text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.welcome-slide-two .slide-text {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.welcome-slide-three .slide-text {
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
}

.slider-img-layer {
    bottom: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 80% !important;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: end;
    justify-content: flex-end;
    max-width: 40%;
    position: absolute;
    right: 0;
    z-index: -1;
}

.slider-img-layer img {
    max-width: 80%;
}

.welcome-slide-three .slider-img-layer {
    left: 5%;
    right: auto;
}


/*-----------------------------------
    3. CATEGORY AREA
------------------------------------*/

.single-catagory {
    overflow: hidden;
    position: relative;
}

.single-catagory::after {
    background: rgba(0, 0, 0, 0.2) none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 100%;
}

.catagory-details {
    -moz-box-align: center;
    -moz-box-pack: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    left: 0;
    padding: 20px;
    position: absolute;
    top: 30%;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 100%;
    z-index: 1;
}

.cat-details-text {
    opacity: 0;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.catagory-details h3 {
    letter-spacing: 2px;
    text-transform: uppercase;
}

.single-catagory a {
    color: #fff;
    font-size: 48px;
}

.single-catagory a:hover {
    color: #cc1402;
}

.single-catagory:hover .catagory-details,
.single-catagory:hover .cat-details-text {
    opacity: 1;
    top: 0;
}

.single-catagory:hover:after {
    background: rgba(0, 0, 0, 0.8) none repeat scroll 0 0;
}


/*-----------------------------
    4. ABOUT AREA
-------------------------------*/

.about-area .row {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.about-video-area {
    position: relative;
}

.about-video-area::after {
    background: #000 none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.6;
    position: absolute;
    top: 0;
    width: 100%;
}

a.video-play-button {
    border: 5px solid;
    border-radius: 50%;
    color: #cc1402;
    font-size: 30px;
    height: 70px;
    left: 50%;
    padding-left: 6px;
    padding-top: 16px;
    position: absolute;
    text-align: center;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 70px;
    z-index: 9;
}

a.video-play-button:hover {
    color: #fff;
}

.about-details h3 {
    margin-bottom: 30px;
}

.about-area .social-bookmark {
    margin-top: 50px;
}

.about-area .social-bookmark ul {
    text-align: inherit;
}

.about-area .social-bookmark ul li a {
    border: 1px solid #f1f1f1;
    box-shadow: 0 0 0 5px transparent;
    color: #cc1402;
    font-size: 18px;
    height: 40px;
    margin-right: 15px;
    padding-top: 5px;
    width: 40px;
}

.about-area .social-bookmark ul li a:hover {
    background: #cc1402 none repeat scroll 0 0;
    border-color: #cc1402;
    box-shadow: 0 0 0 0 #cc1402;
    color: #fff;
}

.mfp-iframe-holder .mfp-content {
    margin-top: 40px;
}


/*------------------------------
    5. SERVICE AREA
-------------------------------*/

.service-area.section-padding {
    padding-bottom: 70px;
}

.single-service {
    border: 1px solid #e1e1e1;
    margin-bottom: 30px;
    padding: 40px 30px;
    position: relative;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.single-service::after {
    background: #cc1402 none repeat scroll 0 0;
    bottom: 0;
    content: "";
    height: 3px;
    left: 0;
    opacity: 0;
    position: absolute;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 100%;
}

.service-icon {
    height: 60px;
    margin: 0 auto 25px;
    text-align: center;
    width: 60px;
}

.single-service h3 {
    font-size: 20px;
    margin-bottom: 20px;
}

.single-service:hover {
    border: 1px solid transparent;
    box-shadow: 0 0 25px #e8e8e8;
}

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


/*-----------------------------------
    7. FUN FACT AREA
------------------------------------*/

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

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

.fact-area-bg::after {
    background: #000 none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.8;
    position: absolute;
    top: 0;
    width: 100%;
}

.single-fun-fact {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.fact-icon {
    height: 60px;
    margin: 0 auto 20px;
    text-align: center;
    width: 60px;
}

.single-fun-fact h3 {
    font-size: 40px;
    margin-bottom: 0;
}


/*------------------------------
    8. TEAM AREA
-------------------------------*/

.single-team {
    display: inline-block;
    float: left;
    position: relative;
    width: 20%;
}

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

.lawer-details h3 {
    font-size: 18px;
}

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


/*------------------------------
    9. CONTACT AREA
-------------------------------*/

.footer-address-details {
    padding-left: 40px;
    color: #fff;
}

.contact-form-area {
    background: #fff none repeat scroll 0 0;
    box-shadow: 0 0 10px #e4e4e4;
    padding: 50px 40px;
    position: relative;
    z-index: 9;
}

.footer-address-details {
    color: #7a8693;
    letter-spacing: 1px;
    margin-bottom: 40px;
    position: relative;
    text-transform: uppercase;
}

.form-control {
    border: 1px solid #e1e1e1;
    border-radius: 0;
    box-shadow: 0 0 0;
    margin-bottom: 25px;
    max-height: 140px;
    min-height: 40px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    color: #909090;
}

.contact-area .form-control:focus {
    border-color: #cc1402;
    box-shadow: 0 0 0;
    outline: 0 none;
}

.contact-form button {
    background: #000 none repeat scroll 0 0;
    border: 0 none;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 2px;
    margin-bottom: -20px;
    padding: 10px 20px;
    text-transform: uppercase;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 100%;
}

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

.footer-right-img {
    padding-left: 40px;
}


/*------------------------------
    10. TESTMONIAL AREA
-------------------------------*/

.testmonial-area {
    color: #fff;
    position: relative;
    text-align: center;
}

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

.testmonial-area-bg::after {
    background: #000 none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.7;
    position: absolute;
    top: 0;
    width: 100%;
}

.testmonial-area .area-title {
    margin-bottom: 10px;
}

.testmonial-area .area-title h2 {
    color: #fff;
    margin-bottom: 0;
}

.testmonial-author-details {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;
    padding: 30px;
    position: relative;
}

.testmonial-author-details::before,
.testmonial-author-details::after {
    content: "“";
    font-size: 80px;
    height: 40px;
    left: 0;
    position: absolute;
    text-align: center;
    top: -15px;
    width: 40px;
}

.testmonial-author-name-title h5 {
    margin-bottom: 0;
}

.testmonial-author-details::after {
    bottom: 40px;
    content: "”";
    left: auto;
    right: 0;
    top: auto;
}

.testmonial-area .owl-controls {
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: end;
    direction: rtl;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 60px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 50px;
}

.testmonial-area .owl-controls .owl-dots {
    width: 100%;
}

.testmonial-area .owl-controls .owl-dots>div {
    background: #e8edff none repeat scroll 0 0;
    border-radius: 20px;
    height: 3px;
    margin: 10px 0;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 75%;
}

.testmonial-area .owl-controls .owl-dots>div.active {
    width: 100%;
    background: #cc1402;
}


/*------------------------------
    11. SUBSCRIBER AREA
-------------------------------*/

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

.subscriber-area .row {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.subscriber-hidding h2 {
    font-size: 24px;
    margin-bottom: 0;
}

.subscriber-form form {
    border: 1px solid;
    height: 40px;
    position: relative;
    width: 100%;
}

.subscriber-form form input {
    background: transparent none repeat scroll 0 0;
    border: 0 none;
    height: 100%;
    left: 0;
    letter-spacing: 2px;
    padding: 0 20px;
    position: absolute;
    top: 0;
    width: 100%;
}

.subscriber-form form input:focus {
    box-shadow: 0 0 0;
    outline: medium none;
}

.subscriber-form form button {
    background: #fff none repeat scroll 0 0;
    border: 0 none;
    color: #cc1402;
    font-size: 16px;
    height: 100%;
    letter-spacing: 2px;
    min-width: 35%;
    position: absolute;
    right: 0;
    text-transform: uppercase;
    -webkit-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
}

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

.subscriber-form form label {
    left: 0;
    letter-spacing: 1px;
    position: absolute;
    text-align: center;
    top: -30px;
    width: 100%;
}

.subscriber-form form label.valid {
    top: 6px;
}


/*------------------------------
    12. BLOG AREA
-------------------------------*/

.single-blog {
    position: relative;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.single-blog::after {
    background: #cc1402 none repeat scroll 0 0;
    bottom: 0;
    content: "";
    height: 3px;
    left: 0;
    opacity: 0;
    position: absolute;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 100%;
}

.blog-post-details {
    border: 1px solid #e1e1e1;
    padding: 20px;
}

.blog-meta a {
    color: #909090;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.blog-post-details h3 a {
    font-size: 18px;
    color: #252525
}

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

.single-blog:hover {
    box-shadow: 0 0 25px #e8e8e8;
}

.single-blog:hover .blog-post-details {
    border-color: transparent;
}

.single-blog a:hover {
    color: #cc1402;
}


/*------------------------------
    13. FOOTER AREA
-------------------------------*/

.footer-area {
    background: rgba(31, 31, 34, 0.9) none repeat scroll 0 0;
    color: #fff;
}

.footer-area a {
    color: #fff;
}

.footer-area a:hover {
    color: #cc1402;
}

.single-footer h3 {
    font-size: 18px;
    margin-bottom: 40px;
}

.footer-logo {
    margin-bottom: 20px;
}

.footer-area .social-bookmark ul {
    margin-top: 30px;
    text-align: inherit;
}

.footer-area .social-bookmark ul li a {
    border: 1px solid;
    margin-right: 10px;
}

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

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

.footer-list li {
    display: block;
}

.footer-list li a {
    display: block;
    letter-spacing: 1px;
    padding: 8px 0;
}

.footer-list li a i {
    margin-right: 7px;
}

.footer-list li a:hover {
    padding-left: 15px;
}

.single-gallery-items {
    float: left;
    margin: 1.5%;
    width: 30.33%;
}

.single-gallery-items img {
    width: 100%;
}

.footer-contact li {
    margin-bottom: 20px;
    padding-left: 50px;
    position: relative;
}

.contact-icon {
    border: 1px solid;
    font-size: 18px;
    height: 35px;
    left: 0;
    padding-top: 4px;
    position: absolute;
    text-align: center;
    top: 7px;
    width: 35px;
}

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

.footer-bottom {
    background: #212121 none repeat scroll 0 0;
    padding: 20px 0;
}

.footer-copyright p {
    margin: 0;
}


/*------------------------------
    14. SCROLL TO TOP
-------------------------------*/

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

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


/*===============================
    18. BLOG PAGE
=================================*/

.top-area.single-page {
    max-height: 400px;
}

.welcom-barner-area {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 100%;
    left: 0;
    letter-spacing: 2px;
    padding-top: 100px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 99;
}

.baner-text h2 {
    font-size: 48px;
}

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

.blog-page.section-padding {
    padding-top: 50px;
}

.blog-page.blog-area {
    background: inherit;
    position: inherit;
}

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

.title-and-meta {
    margin-top: 30px;
    padding-bottom: 10px;
    position: relative;
}

.tags-and-social-bar {
    border-bottom: 1px solid #c3c3c4;
    margin-bottom: 40px;
    overflow: hidden;
    padding-bottom: 20px;
}

.tags h3,
.tags ul,
.single-post-social-bar h3,
.single-post-social-bar ul {
    display: inline-block;
}

.tags ul,
.single-post-social-bar ul {
    list-style: outside none none;
    margin: 0;
    padding: 0;
}

.tags ul li,
.single-post-social-bar ul li {
    display: inline;
}

.tags ul li a {
    display: inline-block;
    padding: 5px;
}

.tags h3,
.single-post-social-bar h3 {
    font-size: 18px;
    margin: 0 15px;
}

.single-post-social-bar ul li a {
    padding: 5px 10px;
}

.single-post-social-bar {
    margin-top: -30px;
}

.blog-page a.read-more {
    margin-bottom: 0;
}

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

ul.page-pagination li {
    border: 1px solid;
    display: inline-block;
}

ul.page-pagination li a {
    display: inline-block;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 2px;
    padding: 5px 50px;
    text-transform: uppercase;
}

ul.page-pagination li.active a,
ul.page-pagination li:hover a {
    background: #1a1a1a none repeat scroll 0 0;
    color: #fff;
}

ul.page-pagination li a {
    height: 35px;
    min-width: 35px;
    padding: 5px;
}


/*------------------------------
    18.1 SIDEBAR AREA
-------------------------------*/

.single-sidebar-widget>form {
    height: 45px;
    position: relative;
}

.single-sidebar-widget>form input {
    border: 2px solid;
    color: #1b1c1c;
    height: 100%;
    padding: 12px;
    width: 100%;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.single-sidebar-widget>form button {
    background: #1b1c1c none repeat scroll 0 0;
    border: 0 none;
    color: #fff;
    font-size: 20px;
    height: 41px;
    position: absolute;
    right: 2px;
    top: 2px;
    width: 20%;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.single-sidebar-widget input:focus {
    border-color: #cc1402;
}

.single-sidebar-widget input:focus+button {
    background: #cc1402;
}

.single-sidebar-widget>form button:hover {
    background: #1b1c1c none repeat scroll 0 0;
}

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

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

.single-sidebar-widget>h4,
.blog-comments h4,
.comment-box h4 {
    color: #212222;
    font-size: 16px;
    letter-spacing: 1px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    position: relative;
    text-transform: uppercase;
}

.single-sidebar-widget>h4::after,
.blog-comments h4::after,
.comment-box h4::after {
    background: #212222 none repeat scroll 0 0;
    bottom: 0;
    content: "";
    height: 2px;
    left: 0;
    position: absolute;
    width: 50px;
}

.single-sidebar-widget ul {
    list-style: outside none none;
    margin: 0;
    padding: 0;
}

.single-sidebar-widget ul li {
    display: inline;
}

.single-sidebar-widget.tag-widget ul li a {
    border: 1px solid;
    display: inline-block;
    font-size: 13px;
    letter-spacing: 1px;
    margin: 3px 1px;
    padding: 5px;
    text-transform: uppercase;
}

.single-sidebar-widget.tag-widget ul li a:hover {
    background: #cc1402 none repeat scroll 0 0;
    border-color: #cc1402;
    color: #fff;
}

.single-sidebar-widget.catagories-widget ul li {
    border-bottom: 1px solid #dfdfdf;
    display: block;
}

.single-sidebar-widget.catagories-widget ul li a {
    display: block;
    font-size: 14px;
    letter-spacing: 1px;
    padding: 10px 0;
    text-transform: uppercase;
}

.single-sidebar-widget.catagories-widget ul li a i {
    margin-right: 10px;
}

.single-sidebar-widget.catagories-widget ul li:hover a {
    padding-left: 11px;
}

.social-widget ul li {
    display: inline-block;
}

.social-widget ul li a {
    background: #ddd none repeat scroll 0 0;
    border-radius: 50%;
    display: block;
    font-size: 20px;
    height: 40px;
    padding-top: 7px;
    text-align: center;
    width: 40px;
    color: #fff;
}

.social-widget ul li.s_facebook a {
    background: #2069ba none repeat scroll 0 0;
}

.social-widget ul li.s_twitter a {
    background: #25AEEE none repeat scroll 0 0;
}

.social-widget ul li.s_youtube a {
    background: #C32E2E none repeat scroll 0 0;
}

.social-widget ul li.s_dribbble a {
    background: #C93292 none repeat scroll 0 0;
}

.social-widget ul li a:hover {
    background: #fff none repeat scroll 0 0;
    box-shadow: 0 0 3px #212121;
    color: #212121;
}

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

.post-widget ul li.s_post {
    border-bottom: 1px solid #dfdfdf;
    display: block;
    margin-bottom: 20px;
    overflow: hidden;
    padding-bottom: 20px;
    position: relative;
}

.post-widget ul li .post-tumb {
    height: 80px;
    width: 80px;
}

.post-widget ul li .post-tumb img {
    height: 100%;
    width: 100%;
}

.post-title-and-date h4 {
    font-size: 16px;
    margin-bottom: 5px;
}

.post-title-and-date a {
    font-size: 14px;
    letter-spacing: 0;
    margin: 0;
    text-transform: capitalize;
}

.single-sidebar-widget .post-meta {
    margin-bottom: 0;
}


/*==============================
    19. SINGLE BLOG PAGE
================================*/

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

.blog-page .single-blog::after {
    display: none;
}

.blog-page .single-blog:hover {
    box-shadow: 0 0 0;
}

.single-blog-page .title-and-meta::after {
    left: 0;
    margin-left: auto;
}

.blog-comments {
    margin-bottom: 50px;
}

.single-comments:nth-child(2n+1) {
    margin-left: 80px;
}

.comment-meta h5 {
    color: #1a1a1a;
    font-size: 14px;
    letter-spacing: 1px;
    margin-bottom: 0;
    text-transform: uppercase;
}

.comment-meta h5 span a {
    color: #cc1402;
    float: right;
}

.comment-meta h5 span i {
    margin-right: 5px;
}

.comment-meta h5 span a:hover {
    color: #1a1a1a;
}

.comment-box input,
.comment-box textarea {
    display: block;
    margin-bottom: 30px;
    max-height: 100px;
    padding: 5px 10px;
    width: 100%;
}

.comment-box input:focus,
.comment-box textarea:focus {
    border: 1px solid #cc1402;
    box-shadow: 0 0 0;
}

.comment-box button {
    background: #000 none repeat scroll 0 0;
    border: 0 none;
    color: #fff;
    font-weight: 700;
    letter-spacing: 2px;
    margin: 0 0 30px;
    padding: 10px 20px;
    text-transform: uppercase;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.comment-box button:hover {
    background: #cc1402 none repeat scroll 0 0;
    color: #fff;
}

.single-comments {
    padding-bottom: 10px;
    padding-top: 20px;
    border-bottom: 1px solid #d1d1d1;
}