/*-----------------------------------------------------------------------------------

    Template Name: Desume - Cv/Resume Html Template
    Template URI: 
    Description: Desume - Cv/Resume Html Template
    Author: Rashadul Islam
    Author URI: http://rashadulislam.com/
    Version: 1.0

-----------------------------------------------------------------------------------
    
    CSS INDEX
    ===================
  
    1. Imported Css
    2. Theme default CSS
    3. Home One
        3.1 Header Area
            3.1.1 Header Style Two
        3.2 Slider Area
            3.2.1 Slider Style Two
        3.3 About Area
        3.4 Service Area
        3.5 Portfolio Area
        3.6 Testimonial Area
        3.7 Blog Area
        3.8 Contact Area
        3.9 Footer Area
    4. Blog Page
        4.1 Blog Standard
        4.2 Blog Left Sidebar
        4.3 Blog Details

-----------------------------------------------------------------------------------*/


/*=============================================
 * 1. Imported Css
 *=============================================*/

@import url('bootstrap.min.css');
@import url('jquery-ui.css');
@import url('font-awesome.min.css');
@import url('owl.carousel.min.css');
@import url('swiper.min.css');
@import url('magnific.css');
@import url('animate.css');
@import url('slicknav.min.css');
@import url('typography.css');



/*=============================================
 * END Imported Css
 *=============================================*/


/*=============================================
 * 2. Theme default CSS
 *=============================================*/


/*google font*/

@import url('https://fonts.googleapis.com/css?family=Bungee|Raleway:300,400,500,600,700');

.clear {
    clear: both
}

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

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

.no-mar {
    margin: 0!important;
}

.no-pad {
    padding: 0!important;
}

.mar-bot-50 {
    margin-bottom: 50px;
}

.mar-bot-40 {
    margin-bottom: 40px;
}

.mar-bot-35 {
    margin-bottom: 35px;
}

.mar-bot-30 {
    margin-bottom: 30px;
}

.mar-top-30 {
    margin-top: 30px;
}

.mar-top-80 {
    margin-top: 80px;
}

.mar-top-80 {
    margin-top: 80px;
}

.mar-top-55 {
    margin-top: 55px;
}

.mar-top-108 {
    margin-top: 108px;
}

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

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

*,
*:before,
*:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

*:focus {
    outline: 0;
}

html {
    font-size: 62.5%;
    -webkit-font-smoothing: antialiased;
}

body {
    background: #fff;
    font-weight: normal;
    font-size: 15px;
    letter-spacing: 1.5px;
    color: #888;
    line-height: 30px;
    -webkit-font-smoothing: antialiased;
    /* Fix for webkit rendering */
    -webkit-text-size-adjust: 100%;
}

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

button,
input,
textarea {
    letter-spacing: 1px;
}



/*preloader area start*/

div#preloader {
    background: #000000;
    height: 100%;
    left: 0;
    overflow: visible;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
    display: flex;
}

.spiner {
    position: relative;
    height: 60px;
    width: 60px;
    border: 4px solid #fff;
    margin: auto;
    border-radius: 50%;
}

.spiner:before {
    content: '';
    position: absolute;
    left: -8px;
    top: -8px;
    height: calc(100% + 16px);
    width: calc(100% + 16px);
    border: 10px solid transparent;
    border-radius: 50%;
    z-index: 111;
    border-left-color: #fff;
    -webkit-animation: rotate_three_six 1.5s linear 0s infinite;
    -o-animation: rotate_three_six 1.5s linear 0s infinite;
    animation: rotate_three_six 1.5s linear 0s infinite;
}

@keyframes rotate_three_six {
    0% {
        transform: rotate(0deg);
    }
    70% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(360deg);
    }
}



/*=============================================
 * END Theme default CSS
 *=============================================*/


/*=============================================
 * 3.1 Header Area
 *=============================================*/
.header-area {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 9;
    background: rgba(0, 0, 0, 0.1);
    -webkit-transition: background 0.3s ease 0s;
    -o-transition: background 0.3s ease 0s;
    transition: background 0.3s ease 0s;
}

.header-area.header-fix,
.header_fixed {
    background: rgba(0, 0, 0, 1);
}

.menu-area {
    display: flex;
    align-items: center;
}

.logo {}

.logo a {
    display: inline-block;
}

.logo a img {
    max-width: 125px;
}

.main-menu {
    text-align: right;
}

.main-menu nav ul {}

.main-menu nav ul li {
    display: inline-block;
}

.main-menu nav ul li a {
    display: block;
    color: #fff;
    font-size: 13px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-weight: 600;
    padding: 32px 18px;
    position: relative;
}

.main-menu nav ul li.active a,
.main-menu nav ul li:hover a {
    color: #FDE100;
}

.main-menu nav ul li a:before {
    content: '';
    position: absolute;
    left: 5%;
    bottom: 35px;
    height: 5px;
    width: 0%;
    background: #d9ff08;
    opacity: 0;
    -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.main-menu nav ul li:hover a:before,
.main-menu nav ul li.active a:before {
    opacity: 0.6;
    width: 70%;
}

/*mobile menu*/
.slicknav_menu .slicknav_menutxt {
    display: none;
}

.slicknav_menu {
    background: transparent;
    margin-top: 21px;
}

.slicknav_menu .slicknav_icon-bar {
    height: 2px;
    width: 19px;
    margin: 3px 0px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.slicknav_btn {
    background-color: transparent;
    position: relative;
    margin-top: -46px;
    top: -10px;
}

.slicknav_menu .slicknav_open .slicknav_icon-bar:nth-child(2) {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

.slicknav_menu .slicknav_open .slicknav_icon-bar:nth-child(1) {
    -webkit-transform: rotate(45deg) translate(1px, 7px);
    transform: rotate(45deg) translate(1px, 7px);
}

.slicknav_menu .slicknav_open .slicknav_icon-bar:nth-child(3) {
    -webkit-transform: rotate(-45deg) translateY(-6px);
    transform: rotate(-45deg) translateY(-6px);
}

.slicknav_menu {
    margin-top: 0;
}

.slicknav_nav {
    background: #c39a07;
    margin: 10px;
    padding: 6px 0px;
}

.slicknav_nav a:hover {
    background: #fefefe none repeat scroll 0 0;
    border-radius: 0;
}

.slicknav_nav a {
    font-size: 14px;
    letter-spacing: 0.01em;
}


/*=============================================
 * END Header Area
 *=============================================*/
/*=============================================
 * 3.1.1 Header Style Two
 *=============================================*/
 .header_two{
    border-bottom: 1px solid #959494;
    background-color: transparent;
 }
.header_two.header-fix{
    border-bottom: 1px solid transparent;
}

/*=============================================
 * END Header Style Two
 *=============================================*/

/*=============================================
 * 3.2 Slider Area
 *=============================================*/

.slider-area {
    height: 636px;
    display: flex;
    align-items: center;
    position: relative;
}

.slider-area:before {}

.slider-inner {}

.slider-inner h2 {
    font-size: 60px;
    color: #FDE100;
    line-height: 53px;
    margin-bottom: 20px;
}
.slider-inner h2.fadeInDown {
    opacity: 0;
    -webkit-animation: fadeInDown 1500ms ease-in-out 1000ms forwards;
    -o-animation: fadeInDown 1500ms ease-in-out 1000ms forwards;
    animation: fadeInDown 1500ms ease-in-out 1000ms forwards;
}

.slider-inner p {
    color: #fff;
    font-size: 43px;
    line-height: 43px;
    font-weight: 300;
}
.slider-inner p.fadeInDown {
    opacity: 0;
    -webkit-animation: fadeInDown 1000ms ease-in-out 800ms forwards;
    -o-animation: fadeInDown 1000ms ease-in-out 800ms forwards;
    animation: fadeInDown 1000ms ease-in-out 800ms forwards;
}

.slider-inner .btn-area {
    margin-top: 50px;
}

.slider-inner .btn-area.fadeInDown {
    opacity: 0;
    -webkit-animation: fadeInDown 1000ms ease-in-out 500ms forwards;
    -o-animation: fadeInDown 1000ms ease-in-out 500ms forwards;
    animation: fadeInDown 1000ms ease-in-out 500ms forwards;
}

.btn-area a {
    display: inline-block;
    font-size: 14px;
    height: 45px;
    width: 150px;
    line-height: 45px;
    text-align: center;
    border-radius: 5px;
}

.btn-style-one a {
    color: #fff;
    border: 1px solid #fff;
}

.btn-style-one a:hover {
    border-color: #FDE100;
    background: #FDE100;
}

.btn-style-two a {}



/*=============================================
 * END Slider Area
 *=============================================*/

/*=============================================
 * 3.2.1 Slider Style Two
 *=============================================*/
.slider-full-width {
    width: 100%;
    height: 100vh;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

.slider-full-width .swiper-slide {
    text-align: center;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    position: relative;
    z-index: 1;
}
.slider-full-width .swiper-slide:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
    background: rgba(0, 0, 0, 0.4);
}
.swiper-pagination-bullet-active{
    background: #FDE100;
}
a.go-about {
    position: absolute;
    height: 60px;
    width: 60px;
    background-color: rgba(212, 173, 31,0.5);
    z-index: 999;
    left: calc(50% - 30px);
    bottom: 50px;
    border-radius: 50%;
    text-align: center;
    line-height: 60px;
    font-size: 30px;
}
a.go-about:before{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    border-radius: 50%;
    border: 1px solid rgba(212, 173, 31,0.2);
    -webkit-animation: zoomingC 1000ms linear 0s infinite;
    -o-animation: zoomingC 1000ms linear 0s infinite;
    animation: zoomingC 1000ms linear 0s infinite;
}
@keyframes zoomingC{
    0%{
        opacity: 0;
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
    40%{
        opacity: 1;
        -webkit-transform: scale(1.6);
        -ms-transform: scale(1.6);
        -o-transform: scale(1.6);
        transform: scale(1.6);
    }
    90%{
        opacity: 0;
        -webkit-transform: scale(2);
        -ms-transform: scale(2);
        -o-transform: scale(2);
        transform: scale(2);
    }
    100%{
        opacity: 0;
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
}

/*custome animation*/

.slider-inner h2,
.slider-inner p,
.slider-full-width .slider-inner a {
    opacity: 0;
}

.swiper-slide-active .slider-inner h2 {
    -webkit-animation: fadeinupC 1000ms ease-in-out 0.2s forwards;
    -o-animation: fadeinupC 1000ms ease-in-out 0.2s forwards;
    animation: fadeinupC 1000ms ease-in-out 0.2s forwards;
}

.swiper-slide-active .slider-inner p {
    -webkit-animation: fadeinupC 1000ms ease-in-out 0.4s forwards;
    -o-animation: fadeinupC 1000ms ease-in-out 0.4s forwards;
    animation: fadeinupC 1000ms ease-in-out 0.4s forwards;
}

.swiper-slide-active .slider-inner a {
    -webkit-animation: fadeinupC 500ms ease-in-out 0.6s forwards;
    -o-animation: fadeinupC 500ms ease-in-out 0.6s forwards;
    animation: fadeinupC 500ms ease-in-out 0.6s forwards;
}

@keyframes fadeinupC {
    0% {
        opacity: 0;
        -webkit-transform: translateY(30px);
        -ms-transform: translateY(30px);
        -o-transform: translateY(30px);
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -o-transform: translateY(0px);
        transform: translateY(0px);
    }
}


/*=============================================
 * Slider Style Two
 *=============================================*/


/*=============================================
 * 3.3 About Area
 *=============================================*/

.about-area {}

.section-title {
    text-align: center;
    margin-bottom: 50px;
}

.section-title h2 {
    color: #444;
    font-size: 27px;
    letter-spacing: 0;
    position: relative;
    display: inline-block;
}

.section-title h2:before {
    content: '';
    position: absolute;
    left: -8px;
    bottom: 1px;
    height: 9px;
    width: 27%;
    background: #FDE100;
    opacity: 0.7;
    -webkit-transition: all 0.8s cubic-bezier(0.6, -0.16, 0.36, 1.51) 0s;
    -o-transition: all 0.8s cubic-bezier(0.6, -0.16, 0.36, 1.51) 0s;
    transition: all 0.8s cubic-bezier(0.6, -0.16, 0.36, 1.51) 0s;
}

section:hover .section-title h2:before {
    width: 100%;
}

.about-left-img {
    position: relative;
    z-index: 1;
}

.about-left-img img {
    max-width: 100%;
    border-radius: 3px;
}

.about-left-img:before {
    content: '';
    position: absolute;
    left: 30px;
    top: 30px;
    height: 100%;
    width: 100%;
    background-color: #83704f;
    z-index: -1;
    border-radius: 3px;
}

.about-content {
    padding-left: 90px;
}

ul.about-menu {
    display: flex;
    padding: 0;
    justify-content: space-between;
    border-radius: 3px;
    margin-bottom: 60px;
}

ul.about-menu li {
    display: block;
    color: #444;
    cursor: pointer;
    text-transform: uppercase;
    padding: 10px 0px;
    text-align: center;
    flex-basis: 50%;
    font-size: 15px;
    letter-spacing: 0.05em;
    font-weight: 600;
    position: relative;
    -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

ul.about-menu li.active {
    color: #b39637;
}

ul.about-menu li:before {
    content: '';
    position: absolute;
    left: 50%;
    top: 21px;
    height: 5px;
    width: 48px;
    opacity: 0;
    background: #b39637;
    -webkit-transform: translateX(-50%);
    ;
    -ms-transform: translateX(-50%);
    ;
    -o-transform: translateX(-50%);
    ;
    transform: translateX(-50%);
    ;
    -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

ul.about-menu li.active:before {
    opacity: 0.6;
    width: 60%;
}

ul.about-menu li.intro {}

ul.about-menu li.skills {}

.about-intro,
.about-skills {
    display: none;
}

.about-intro.active,
.about-skills.active {
    display: block;
}

.about-intro h2 {
    color: #444;
    margin-bottom: 33px;
}

.about-intro p {
    color: #444;
    line-height: 33px;
    letter-spacing: 0.01em;
}

ul.about-social {
    margin-top: 40px;
}

ul.about-social li {
    display: inline-block;
    margin-right: 7px;
}

ul.about-social li a {
    display: block;
    font-size: 15px;
    height: 40px;
    width: 40px;
    text-align: center;
    line-height: 40px;
    border: 1px solid #444;
    border-radius: 3px;
}

ul.about-social li a:hover {
    color: #b39637;
    border-color: #b39637;
}

.about-skills {}

.single-progress {}

.single-progress span {
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.03em;
    font-weight: 600;
    color: #444;
}

.single-progress .progress {
    background: #efe5c5;
    border-radius: 3px;
    margin-bottom: 26px;
}

.single-progress .progress .progress-bar {
    background: #FDE100;
}




/*=============================================
 * END About Area
 *=============================================*/


/*=============================================
 * 3.4 Service Area
 *=============================================*/

.service-area {}

.service-list {
    text-align: center;
    padding: 60px 16px;
    margin-bottom: 40px;
    background: #fff;
    border-radius: 5px;
    border-bottom: 2px solid #FDE100;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, .05);
    -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.service-list:hover {
    -webkit-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    -o-transform: translateY(-10px);
    transform: translateY(-10px);
}

.service-list .icon {
    font-size: 48px;
    margin-bottom: 24px;
    color: #eacb5d;
}

.service-list h4 {
    color: #444;
    margin-bottom: 14px;
    font-size: 19px;
}

.service-list p {
    color: #5d5858;
    font-size: 15px;
}



/*=============================================
 * END Service Area
 *=============================================*/


/*=============================================
 *  3.5 Portfolio Area
 *=============================================*/

.portfolio-area {}

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

.portfolio-menu ul {
    text-align: center;
}

.portfolio-menu ul li {
    display: inline-block;
    font-size: 18px;
    color: #444;
    letter-spacing: 0;
    font-weight: 500;
    line-height: 21px;
    margin: 0px 17px;
    cursor: pointer;
    position: relative;
}

.portfolio-menu ul li:before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 2px;
    height: 6px;
    width: 0%;
    background: rgba(245, 205, 2, 0.69);
    -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.portfolio-menu ul li.active:before,
.portfolio-menu ul li:hover:before {
    width: 80%;
}

.portfolio {}

.prt-item {
    margin-bottom: 30px;
    position: relative;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
}

.prt-item img {
    max-width: 100%;
}

.prt-item .prt-overlay {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    display: flex;
    opacity: 0;
    visibility: hidden;
    background: rgba(27, 27, 27, 0.8);
    -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.prt-item:hover .prt-overlay {
    opacity: 1;
    visibility: visible;
}

.prt-item a {
    display: inline-block;
    margin: auto;
    height: 50px;
    width: 50px;
    background: #fff;
    text-align: center;
    line-height: 50px;
    border-radius: 50%;
    font-size: 18px;
    color: #d4a913;
}

.prt-item a:hover {
    background-color: #d4a913;
    color: #fff;
}



/*=============================================
 *  END Portfolio Area
 *=============================================*/


/*=============================================
 *  3.6 Testimonial Area
 *=============================================*/

.testimonial-area {
    background: #fff url(../img/bg/testimonial-bg.jpg) center center/cover no-repeat;
}

.testimonial-slider {}

.testimonial-slider .tst-single {
    text-align: center;
    max-width: 700px;
    margin: auto;
}

.testimonial-slider .tst-thumb {
    display: inline-block;
}

.testimonial-slider .tst-thumb img {
    border-radius: 50%;
    width: 70px;
    height: 70px;
    box-shadow: 1px 2px 11px rgba(0, 0, 0, 0.5);
}

.testimonial-slider .tst-single p {
    color: #444;
    font-size: 17px;
    margin-top: 26px;
}

.testimonial-slider .tst-single h2,
.testimonial-slider .tst-single h2 span {
    font-family: 'Bungee', sans-serif;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0;
    margin-top: 16px;
    color: #333;
}

.testimonial-slider .tst-single h2 span {
    color: #FDE100;
}


/*=============================================
 *  END Testimonial Area
 *=============================================*/

/*=============================================
 *  3.7 Blog Area
 *=============================================*/
.blog-area{}
.blog-list{}
.blog-single{
    box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
}
.blog-thumb{
    position: relative;
}
.blog-thumb a{
    display: inline-block;
    max-width: 100%;
    position: relative;
}
.blog-thumb a:before{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    background-color: rgba(27,27,27,0.5);
    -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}
.blog-thumb a:hover:before{
    opacity: 1;
}
.blog-thumb a img{
    max-width: 100%;
}
.blog-inner{
    padding: 13px 20px 30px;
}
.blog-inner > ul {
    margin-bottom: 5px;
}
.blog-inner >ul li {
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    margin-right: 20px;
    position: relative;
    color: #333;
    letter-spacing: 0;
}
.blog-inner >ul li + li::before {
    background: #000 none repeat scroll 0 0;
    content: "";
    height: 10px;
    left: -12px;
    position: absolute;
    top: 46%;
    transform: translateY(-50%);
    width: 1px;
}
.blog-inner >ul li a{
    font-size: 14px;
    color: #333;
    font-weight: 500;
}
.blog-inner ul li a:hover{
    color: #FDE100;
}
.blog-inner h2 a{
        font-size: 16px;
    letter-spacing: 0;
    color: #333;
    margin-bottom: 14px;
    display: block;
    font-weight: 600;
}
.blog-inner h2 a:hover {
    color: #FDE100;
}
.blog-inner p{
    color: #444;
    margin-bottom: 25px;
}
.blog-inner a.read-more{
    color: #fff;
    display: inline-block;
    letter-spacing: 0;
    font-size: 15px;
    border: 1px solid #FDE100;
    padding: 5px 15px;
    background: #FDE100;
    border-radius: 2px;
}
.blog-inner a.read-more:hover{
    background: transparent;
    color: #FDE100;
}

/*=============================================
 *  END Blog Area
 *=============================================*/

/*=============================================
 *  3.8 Contact Area
 *=============================================*/

.contact-area {}

.contact-form {}

.contact-form form {}

.contact-form form input,
.contact-form form textarea {
    height: 45px;
    width: 100%;
    margin-bottom: 20px;
    border: none;
    border-bottom: 1px solid #d8d6d1;
    color: #444;
    letter-spacing: 0;
    -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.contact-form form textarea::-webkit-input-placeholder,
.contact-form form input::-webkit-input-placeholder {
    color: #444;
    opacity: 1;
    -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.contact-form form textarea::-moz-placeholder,
.contact-form form input::-moz-placeholder {
    color: #444;
    opacity: 1;
    -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.contact-form form textarea:-ms-input-placeholder,
.contact-form form input:-ms-input-placeholder {
    color: #444;
    opacity: 1;
    -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.contact-form form textarea:-moz-placeholder,
.contact-form form input:-moz-placeholder {
    color: #444;
    opacity: 1;
    -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.contact-form form textarea:focus::-webkit-input-placeholder,
.contact-form form input:focus::-webkit-input-placeholder {
    color: #FDE100;
    opacity: 1;
}

.contact-form form textarea:focus::-moz-placeholder,
.contact-form form input:focus::-moz-placeholder {
    color: #FDE100;
    opacity: 1;
}

.contact-form form textarea:focus:-ms-input-placeholder,
.contact-form form input:focus:-ms-input-placeholder {
    color: #FDE100;
    opacity: 1;
}

.contact-form form textarea:focus:-moz-placeholder,
.contact-form form input:focus:-moz-placeholder {
    color: #FDE100;
    opacity: 1;
}

.contact-form form textarea:focus,
.contact-form form input:focus {
    border-bottom: 1px solid #FDE100;
}

.contact-form form textarea {
    height: 175px;
}

.contact-form form #submit {
    background: #FDE100;
    border-radius: 3px;
    color: #fff;
    font-size: 16px;
    text-transform: capitalize;
    letter-spacing: 0.02em;
    -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.contact-form form #submit:hover {
    background-color: #333;
    color: #FDE100;
}



/*=============================================
 *  END Contact Area
 *=============================================*/


/*=============================================
 *  3.9 Footer Area
 *=============================================*/

.footer-area {
    background: #fff url(../img/bg/testimonial-bg.jpg) center center/cover no-repeat;
}

.footer-content {
    text-align: center;
}

.flogo {
    margin-bottom: 40px;
}

.flogo a {
    display: inline-block;
}

.flogo a img {
    max-width: 100%;
}

.footer-content p {
    color: #888;
    font-size: 16px;
}

/*=============================================
 *  END Footer Area
 *=============================================*/

/*=============================================
 *  4. Blog Page / 4.1 Blog Standard
 *=============================================*/
.crumbs-area{
        padding: 100px 0px;
    display: flex;
    align-items: center;
    background: #fff url(../img/bg/testimonial-bg.jpg) center center/cover no-repeat;
}
.crumbs-inner{
    text-align: center;
}
.crumbs-inner h4{
        font-size: 42px;
    line-height: 40px;
    color: #FDE100;
    margin-bottom: 14px;
}
.crumbs-inner ul li{
    display: inline-block;
}
.crumbs-inner ul li a,
.crumbs-inner ul li span{
        display: block;
    font-size: 16px;
    letter-spacing: 0;
    font-weight: 500;
    margin-right: 21px;
    color: #444;
    position: relative;
}
.crumbs-inner ul li a:before{
        content: '|';
    position: absolute;
    right: -15px;
    top: 0;
}
.crumbs-inner ul li span,
.crumbs-inner ul li a:hover{
    color: #FDE100;
}
.blog-standard{}
.blog-standard .blog-list{}
.blog-standard .blog-list .blog-single{
    margin-bottom: 30px;
}


/*=============================================
*  4.2 Blog Left Sidebar
*=============================================*/

.left-sidebar >div >div{
    display: flex;
    flex-wrap: wrap-reverse;
}

/*sidebar css*/
.sidebar-area {
    padding-left: 40px;
}

.widget {
    margin-bottom: 50px;
}

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

.widget-search {}

.widget-search form {
    position: relative;
}

.widget-search form input {
    width: 100%;
    height: 45px;
    padding: 0px 45px 0px 15px;
    background: transparent;
    border: 1px solid #edf4f9;
    font-size: 15px;
    color: #444;
    letter-spacing: 0.02em;
    border-radius: 2px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.widget-search form input:focus {
    border-color: #FDE100;
}

.widget-search form input:focus~button {
    color: #ffffff;
    background-color: #FDE100;
}

.widget-search form button {
    position: absolute;
    right: 0;
    top: 0;
    height: 45px;
    width: 45px;
    background: #edf4f9;
    border: 1px solid transparent;
    color: #444;
    border-radius: 2px;
    font-size: 16px;
    text-align: center;
    line-height: 42px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.widget-recent-post {}

.widget-title {
    margin-bottom: 30px;
    background: #edf4f9;
    padding: 8px 10px;
    border-radius: 2px;
}

.widget-title h2 {
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 400;
    color: #444;
    letter-spacing: 0;
    position: relative;
    display: inline-block;
    line-height: 21px;
    font-weight: 600;
}

.widget-title h2:before {
    bottom: 2px;
    width: 69%;
}

.widget-title h2:after {
    bottom: 0;
    width: 35%;
}

.recent-post-list {}

.rc-single-post {
    overflow: hidden;
    margin-bottom: 20px;
}

.rc-single-post:last-child {
    margin-bottom: 0px;
}

.meta-thumb {
    float: left;
    margin-right: 20px;
}

.meta-thumb a {
    display: inline-block;
}

.meta-thumb a img {
    max-width: 100%;
    max-width: 66px;
}

.meta-content {
    overflow: hidden;
}

.meta-content a {
    display: block;
    font-size: 16px;
    letter-spacing: 0.01em;
    color: #535151;
    line-height: 22px;
    font-family: 'Lato', sans-serif;
    margin-top: -3px;
}

.meta-content a:hover {
    color: #FDE100;
}

.meta-content span.up-time {
    display: block;
    font-size: 13px;
    letter-spacing: 0;
    color: #888;
}

.widget-category-list ul,
.widget-archive-list ul {
    list-style-type: none;
}

.widget-category-list ul li:last-child,
.widget-archive-list ul li:last-child {
    margin-bottom: -10px;
}

.widget-category-list ul li a,
.widget-archive-list ul li a,
.sidebar-area .widget-nav-menu ul li a {
    font-size: 14px;
    letter-spacing: 0.01em;
    line-height: 20px;
    color: #555;
    display: block;
    margin-bottom: 12px;
    border-bottom: 1px solid #f1f0f0;
    padding-bottom: 12px;
}


.widget-category-list ul li a:hover,
.widget-archive-list ul li a:hover,
.widget-category-list ul li a:hover:before,
.widget-archive-list ul li a:hover:before,
.sidebar-area .widget-nav-menu ul li a:hover:before,
.sidebar-area .widget-nav-menu ul li a:hover {
    color: #FDE100;
}

.widget-category-list ul li a span,
.widget-archive-list ul li a span {
    color: #c2b8b8;
}

.widget-tags {}

.widget-tag-list {}

.widget-tag-list a {
    display: inline-block;
    font-size: 10px;
    text-transform: uppercase;
    background: #FDE100;
    color: #fff;
    padding: 7px 13px;
    margin-bottom: 5px;
    letter-spacing: 0;
    line-height: 15px;
    border-radius: 1px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
    margin-right: 8px;
}

.widget-tag-list a:hover {
    background-color: #3d4443;
}


/*=============================================
 *  END Blog Left Sidebar
 *=============================================*/


/*=============================================
 *  4.3 Blog Details
 *=============================================*/

.blog-inner{}
.blog-inner blockquote{
        padding-left: 65px;
    border: 1px solid #e6e1e1;
    padding-top: 20px;
    padding-bottom: 23px;
    margin-bottom: 38px;
}
blockquote::before{
    top: 30px;
    color: #FDE100;
}
.blog-inner blockquote p{
        font-size: 17px;
    color: #FDE100;
}
.blog-tags{}
h3.blog-title{
        font-size: 18px;
    color: #333;
    letter-spacing: 0.02em;
    font-family: 'Raleway', sans-serif;
    text-transform: uppercase;
    margin-bottom: 11px;
}
.blog-tags ul{}
.blog-tags ul li{
    display: inline-block;
}
.blog-tags ul li a{
    display: block;
    padding: 6px 15px;
    background: #eef4f9;
    margin-bottom: 5px;
    letter-spacing: 0;
    font-size: 13px;
}

.comment-area {
    background: #fffefe;
    padding: 20px 20px 40px;
    border-radius: 0px 0px 5px 5px;
    margin-top: 60px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.08);
}

.comment-title h4 {
    text-transform: uppercase;
    letter-spacing: 0;
    font-size: 18px;
    color: #444;
}

.comment-title h4 span {
    color: #cccccc;
}

.comment-area ul {
    list-style-type: none;
}

.comment-list {}

.comment-info-inner {}

.comment-info-inner article {
    padding: 51px 0px 19px 102px;
    position: relative;
    border-top: 1px solid #e1e4e6;
}
.comment-info-inner:first-child article{
    border: none;
}

.comment-author {
    position: relative;
}

.comment-author img {
    position: absolute;
    left: -103px;
    top: -1px;
    max-width: 80px;
    border-radius: 50%;
    box-shadow: 1px 5px 7px -2px rgba(0, 0, 0, 0.3);
}

.comment-author h2 {
    font-size: 16px;
    font-weight: 700;
    color: #555555;
    line-height: 13px;
    font-family: 'Open Sans', sans-serif;
    letter-spacing: 0;
}

.comment-author h2 span {
    font-size: 12px;
    font-weight: 400;
    color: #bebebe;
    margin-left: 5px;
}

.meta-data {
    margin: 2px 0px 10px;
}

.meta-data p.category {
    font-size: 12px;
    font-weight: 600;
    color: #333333;
}

.meta-data p.category span {
    color: #ef4836;
}

.comment-content {}

.comment-content p {
    font-size: 14px;
    font-weight: 400;
    color: #666666;
    letter-spacing: 0.02em;
    line-height: 26px;
}

.comment-reply {
    text-align: right;
}

.comment-reply a {
        display: inline-block;
    font-size: 13px;
    letter-spacing: 0;
}

.children {
    padding-left: 104px;
}

.leave-comment{
        background: #fffefe;
    padding: 20px 20px 40px;
    border-radius: 0px 0px 5px 5px;
    margin-top: 60px;
    overflow: hidden;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.08);
}
.leave-comment form{}
.leave-comment form input,
.leave-comment form textarea{
        width: 100%;
    height: 45px;
    background: transparent;
    border: 1px solid #c5bfbf;
    margin-bottom: 30px;
    padding-left: 20px;
    letter-spacing: 0;
    color: #444;
    border-radius: 3px;
}
.leave-comment form textarea{
    height: 180px;
}
.leave-comment form #csubmit{
        width: 150px;
        margin-bottom: 0;
        -webkit-transition: all 0.3s ease 0s;
        -o-transition: all 0.3s ease 0s;
        transition: all 0.3s ease 0s;
}
.leave-comment form #csubmit:hover{
    background-color: #FDE100;
    color: #fff;
}

/*=============================================
 *  END Blog Details
 *=============================================*/