/*===============================================
Template Name: Elecson - Party  HTML5 Template
Author:  https://themeforest.net/user/dreamit-solution
Description: Description
Version: 1.0.0
Text Domain: Elecson
Tags:   activism, campaign, candidate, democrat, donation, election, elections, government, political, political leader, political party, politician, politics, republican, responsive.
================================================*/

/*TABLE OF CONTENTS*/
/*=====================
01. Elecson Top Bar Area Css
02. Elecson Header Area Css
03. Elecson Hero Area Css
04. Elecson Join Area Css
05. Elecson Donate Area Css
06. Elecson Mission Area Css
07. Elecson Campign Principles Area Css
08. Elecson video Area Css
09. Elecson Counter Area Css
10. Elecson Team Area Css
11. Elecson Social Area Css
12. Elecson Campaign Area Css
13. Elecson Call Do Action Area Css
14. Elecson Footer Area Css
15. Elecson Breadcamb Area Css
16. Elecson Campings Area Two Css
17. Elecson campaigns details area
18. Elecson Volunteer Area Css
19. Elecson become-volunteer-area Css
20. Elecson  donate  Section Css
21. ElecsonBlog Section Css
22. Elecson Blgo Details  Area Css
23. Elecson Contact Area Css
24. Elecson Search Popup
25. Elecson Scrollup Button Section Css
26. Elecson Loader Css
27. Мах custom styles
=======================*/







/*---=================================
   <!-- Elecson Top Bar Area Css-->
==================================---*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
body *{
    font-weight: 600;
    /*  font-family: "Peace Sans"; */
    font-family:"Montserrat", sans-serif;
}
.top-bar-area {
    background-color: #291F1E;
    padding: 0px 0;
}
.header-menu ul li a{
    text-decoration: none;
}

.top-bar-message i {
    background: #fe1b1e;
    height: 38px;
    width: 38px;
    display: inline-block;
    text-align: center;
    line-height: 38px;
    margin-right: 12px;
}

.top-bar-message p {
    font-size: 15px;
    color: #fefefe;
    margin: 0;
}

.top-bar-social-address {
    text-align: right;
}

.top-bar-social-address ul li {
    display: inline-block;
    margin-right: 28px;
    position: relative;
}

.top-bar-social-address ul li:last-child{
    margin-right: 0;
}

.top-bar-social-address ul li:before {
    position: absolute;
    content: "";
    width: 1px;
    height: 36px;
    left: -16px;
    top: -4px;
    background: #291F1E;
}

.top-bar-social-address ul li:nth-child(1):before{
    background: transparent;
}

.top-bar-social-address ul li i {
    color: #fff;
    font-size: 14px;
    display: inline-block;
    transition: 0.5s;
}

.top-bar-social-address ul li i:hover{
    color:#fe1b1e;
}




/*---=================================
   <!-- Elecson Header Area Css -->
==================================---*/
.header-area {
    position: relative;
    z-index: 1;
}
.header-menu {
    text-align: right;
}

.header-menu ul {
    display: inline-block;
}

.header-menu ul li {
    display: inline-block;
    margin-right: 35px;
}

.header-menu ul li a {
    display: inline-block;
    font-size: 16px;
    color: #291F1E;
    font-weight: 500;
    font-family: "Peace Sans", Arial, sans-serif;
    text-transform: uppercase;
    padding: 36px 0;
    transition: 0.5s;
}

.header-menu ul li a:hover{
    color:#fe1b1e;
}

.header-menu ul li i {
    font-size: 12px;
    display: inline-block;
    position: relative;
    left: 6px;
    top: -2px;
    color: #291F1E;
    transition: 0.5s;
}

.header-menu ul li a:hover i{
    color: #fe1b1e;
}

/*sub-menu*/
.header-menu ul li.menu-item-has-children {
    position: relative;
}

.header-menu ul li .sub-menu {
    position: absolute;
    width: 200px;
    display: block;
    text-align: left;
    background: #fff;
    opacity: 0;
    visibility: hidden;
    transition: 0.5s;
    top: 150%;
    z-index: 2;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
    border-top: 5px solid #fe1b1e;
    border-radius: 3px 3px 0 0;
}

.header-menu ul li:hover .sub-menu{
    opacity: 1;
    top: 100%;
    visibility: visible;
}

.header-menu ul li .sub-menu li a {
    display: block;
    padding: 6px 19px;
    color: #291F1E;
    width: 200px;
    text-transform: capitalize;
    font-size: 16px;
    font-weight: 500;
}

.header-menu ul li .sub-menu li a:hover {
    background: #fe1b1e;
    color: #fff;
}

.header-search-button {
    display: inline-block;
}

.header-button {
    display: inline-block;
}

.header-button a {
    display: inline-block;
    background: #1fb76a;
    color: #fff;
    padding: 12px 30px;
    font-family: "Peace Sans";
    font-size: 16px;
    font-weight: 500;
    margin-left: 30px;
    border: 2px solid #1fb76a;
    position: relative;
    z-index: 1;
    transition: 0.5s;
}

.header-button a:hover{
    color:#1fb76a;
}

.header-button a:before{
    position:absolute;
    content:"";
    width:0;
    height: 100%;
    left: 50%;
    top: 0;
    background:#fff;
    z-index: -1;
    transition: 0.5s;
}

.header-button a:hover:before{
    width: 100%;
    left:0;
}

.sticky {
    left: 0;
    margin: auto;
    position: fixed !important;
    top: 0;
    width: 100%;
    -webkit-box-shadow: 0 2px 5px -2px rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 5px -2px rgba(0, 0, 0, 0.1);
    background: #fff !important;
    transition: .5s !important;
    z-index: 922;
    -webkit-animation: 300ms running fadeInDown;
    animation: 500ms running fadeInUp;
    animation-name: slideInDown;
}


/*---=================================
   <!-- Elecson Hero Area Css-->
==================================---*/

.hero-area {
    background: url(../images/slider/Hero-bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    height: 820px;
}

.hero-content h1 {
    font-size: 56px;
    line-height: 55px;
    color: #ffffff;
}

.hero-content span {
    color: #fe1b1e;
}

.hero-content h4 {
    font-size: 18px;
    line-height: 42px;
    color: #ffff;
    font-weight: 400;
    "Peace Sans"
    text-transform: uppercase;
}

a.hero-button {
    display: inline-block;
    background-color: #fe1b1e;
    color: #fff;
    padding: 17px 35px;
    font-weight: 500;
    font-family: "Peace Sans";
    margin-top: 25px;
    position: relative;
    z-index: 1;
}

a.hero-button:hover{
  color: #fe1b1e;
}

a.hero-button:before{
    position: absolute;
    content: "";
    width: 0;
    height: 100%;
    left: 50%;
    top: 0;
    background:#fff;
    z-index: -1;
    transition: 0.5s;
}

a.hero-button:hover:before{
    width: 100%;
    left: 0;
}

.countdown ul li {
    display: inline-block;
    margin-top: 40px;
}


.countdown ul li span {
    background: #fff;
    color: #fe1b1e;
    display: inline-block;
    font-size: 26px;
    padding: 15px 15px;
    font-weight: 700;
    margin-right: 13px;
    border-bottom: 3px solid #fe1b1e;
}

.countdown ul li span.sytle-two {
    color: #1fb76a !important;
    border-bottom: 3px solid #1fb76a;
}

.countdown ul li p {
    color: #fff;
    font-family: "Peace Sans";
    font-weight: 400;
    text-transform: uppercase;
    font-size: 15px;
    margin: 0;
    margin-top: 6px;
}



/*---=================================
   <!-- Elecson Join Area Css-->
==================================---*/

.join-area {
    background: #1fb76a;
    padding: 85px 0 78px;
    position: relative;
    z-index: 1;
}

.join-content h4 {
    font-size: 40px;
    line-height: 35px;
    color: #ffffff;
    font-weight: 700;
    font-family: "Peace Sans";
}

.join-input-box input {
    width: 60%;
    height: 65px;
    border: transparent;
    padding: 0 30px;
    outline: 0;
    color: #000;
}

button.join-button {
    background: transparent;
    border: 2px solid  #fff;
    color: #fff;
    padding: 17px 39px;
    margin-left: 6px;
    font-weight: 500;
    font-family: "Peace Sans";
    transition: 0.5s;
}

button.join-button:hover{
    background:#fff;
    color: #1fb76a;
}

label.checkbox {
    padding-top: 15px;
    opacity: 0.800;
    font-size: 16px;
    color: #ffffff;
    font-weight: 400;
    font-family: "Peace Sans";
}

label.checkbox input {
    width: 16px;
    height: 16px;
    border: transparent;
    margin-right: 10px;
    position: relative;
    top: 3px;
}

.join-shape-1 {
    position: absolute;
    left: 0;
    top: 0;
}

.join-shape-1 {
    position: absolute;
    left: 9%;
    top: 38%;
    z-index: -1;
}

.join-shape-2 {
    position: absolute;
    right: -85%;
    top: 32%;
    z-index: -1;
}


/*---=================================
   <!-- Elecson Donate Area Css-->
==================================---*/
.donate-area {
    background-color: #ffffff;
    padding: 119px 0 110px;
}

.donate-thumb {
    position: relative;
}

.donate ul li {
    display: inline-block;
    border: 2px solid #fe1b1e;
    padding: 10px 27px;
    font-size: 18px;
    line-height: 26px;
    color: #291F1E;
    font-weight: 500;
    font-family: "Peace Sans";
    margin-right: 7px;
    transition: 0.5s;
    cursor:pointer;
}

.donate ul li:hover, .donate ul li.active{
    background: #fe1b1e !important;
    color:#fff;
    border: 2px solid #fe1b1e !important;
}



a.donate-button {
    border: transparent;
    background: #fe1b1e;
    color: #fff;
    padding: 12px 33px;
    font-family: "Peace Sans";
    font-size: 16px;
    font-weight: 500;
    margin-top: 35px;
    position: relative;
    z-index: 1;
    border: 2px solid #fe1b1e;
    transition: 0.5s;
    display: inline-block;
}

a.donate-button:hover{
    color: #fe1b1e;
}

a.donate-button:before{
    position: absolute;
    content: "";
    width: 0;
    height: 100%;
    left: 50%;
    top: 0;
    background: #fff;
    z-index: -1;
    transition: 0.5s;
}


a.donate-button:hover:before{
    width: 100%;
    left: 0;
}

/*section-titel CSS*/
.section-title {
    margin-bottom: 35px;
}

.section-title.center {
    margin-bottom: 73px;
}

.section-title h4 {
    font-size: 16px;
    line-height: 46px;
    color: #fe1b1e;
    font-weight: 400;
    font-family: "Peace Sans";
    text-transform: uppercase;
    position: relative;
    z-index: 1;
}

.section-title img {
    margin-right: 10px;
    position: relative;
    top: -1px;
}

.section-title.style-two h4 {
    color: #fff;
}

.section-title h1 {
    font-size: 40px;
    line-height: 36px;
    color: #291F1E;
    font-weight: 700;
    font-family: "Peace Sans";
    position: relative;
}

.section-title.style-two h1 {
    color: #fff;
}

.section-title span {
    color: #fe1b1e;
}

.section-title.style-two span {
    color: #fff;
}

p.section-desc-1 {
    margin: 0;
    margin-top: 40px;
}


.embar{
    position: relative;
}

.embar:before {
    position: absolute;
    content: "";
    width: 39px;
    height: 3px;
    background: #291F1E;
    top: 22px;
    left: 0;
}

.embar.two:before {
    background: #fff;
}



/*---=================================
   <!-- Elecson Mission Area Css-->
==================================---*/
.mission-area {
    background: #1fb76a;
    padding: 118px 0 118px;
}

.mission-area.upper {
    padding: 118px 0 166px;
}

.mission-area .section-title.style-two {
    margin-bottom: 53px;
}

.mission-item {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-bottom: 23px;
}

.mission-item-content h4 {
    font-size: 22px;
    line-height: 47px;
    color: #ffffff;
    font-weight: 600;
    font-family: "Peace Sans";
}

.mission-item-content p {
    font-size: 16px;
    color: #fff;
    width: 90%;
}


/*---=========================================
   <!-- Elecson Campign Principles Area Css-->
==============================================---*/
.principles-area {
    background: #F4F4F4;
    padding: 91px 0 119px;
}

.single-principle-box {
    background-color: #ffffff;
    padding: 45px 44px 25px;
    transition: 0.5s;
}

.single-principle-box:hover{
    transform:translateY(-15px);
}

.principle-thumb {
    border: 2px solid #F4F4F4;
    width: 120px;
    height: 120px;
    text-align: center;
    line-height: 120px;
    border-radius: 100%;
    position: relative;
    z-index: 1;
    transition: 0.5s;
}

.single-principle-box:hover .principle-thumb {
    border: 2px solid #fe1b1e38;
}

.principle-thumb:before {
    position: absolute;
    content: "";
    width: 100px;
    height: 100px;
    left: 8px;
    top: 8px;
    background: #F4F4F4;
    border-radius: 100%;
    z-index: -1;
    transition: 0.5s;
}

.single-principle-box:hover .principle-thumb:before{
    background: #fe1b1e;
}


.principle-thumb img{
    transition: 0.5s;
}

.single-principle-box:hover .principle-thumb img{
    filter:brightness(0) invert(1);
}

.principle-content h4 {
    font-size: 24px;
    color: #291F1E;
    font-weight: 600;
    margin: 24px 0 18px;
}

/*---=================================
   <!-- Elecson video Area Css-->
==================================---*/
.video-area {
    background: #1fb76a;
    padding: 119px 0 169px;
}

.video-area p.section-desc-1 {
    width: 90%;
    color: #fff;
}

.video-thumb {
    position: relative;
    margin-left: 11px;
}

.video-button {
    position: absolute;
    top: 42%;
    left: 38%;
}

.video-button i {
    display: inline-block;
    background: #ffff;
    color: #1fb76a;
    font-size: 30px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    text-align: center;
    line-height: 84px;
    position: relative;
    z-index: 1;
}

.video-button i:after {
    position: absolute;
    content: "";
    width: 105px;
    height: 105px;
    left: -13px;
    top: -13px;
    background: #fff;
    opacity: 0.6;
    z-index: -1;
    border-radius: 50%;
    -webkit-animation: ripple 1.6s ease-out infinite;
    -moz-animation: ripple 1.6s ease-out infinite;
}


@keyframes ripple {
  0%, 35% {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
    opacity: 1; }
  50% {
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -ms-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);
    opacity: 0.8; }
  100% {
    opacity: 0;
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    -ms-transform: scale(2);
    -o-transform: scale(2);
    transform: scale(2);
    }
 }



.video-author-signthure {
    margin-top: 45px;
}



/*---=================================
   <!-- Elecson Counter Area Css-->
==================================---*/
.row.add-bg {
    background: #ffff;
    margin-top: -48px;
    padding: 48px 0 59px;
    z-index: 1;
    position: relative;
}

.single-counter-box {
    text-align: center;
    position: relative;
}

.single-counter-box:before {
    position: absolute;
    content: "";
    width: 1px;
    height: 100px;
    right: -13px;
    top: 17px;
    background: #1fb76a26;
}

.counter-content h4 {
    font-size: 32px;
    font-weight: 600;
    display: inline-block;
    margin-top: 20px;
}

.counter-content span {
    font-size: 32px;
    line-height: 42px;
    color: #291F1E;
    font-weight: 600;
    font-family: "Peace Sans";
    display: inline-block;
}

.counter-content p {
    margin: 5px 0 0;
}



/*---=================================
   <!-- Elecson Team Area Css-->
==================================---*/
.team-section {
    background-color: #f4f4f4;
    padding: 200px 0 118px;
    margin-top: -220px;
}

.team-section.upper {
    padding: 90px 0 96px;
    margin-top: 0;
}

.team-section.upper .single-team-box {
    margin-bottom: 22px;
}

.single-team-box {
    text-align: center;
    background: #fff;
    padding: 33px 32px 25px;
}

.team-thumb {
    position: relative;
    overflow: hidden;
}

.team-thumb img {
    width: 100%;
}

.team-socila-icon {
    position: absolute;
    bottom: -42px;
    left: 37%;
    opacity: 0;
    transition: 0.5s;
}

.single-team-box:hover .team-socila-icon{
    bottom: 22px;
    opacity: 1;
} 

.team-socila-icon ul li {
    display: inline-block;
    margin-right: 7px;
}

.team-socila-icon ul li i {
    background: #1fb76a;
    color: #fff;
    width: 43px;
    height: 42px;
    text-align: center;
    line-height: 43px;
    border-radius: 50px;
    font-size: 15px;
    position: relative;
    z-index: 2;
    transition: 0.5s;
    display: inline-block;
}

.team-socila-icon ul li i:after{
    position: absolute;
    content:"";
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background:#fff;
    transform:scale(0);
    transition: 0.5s;
    border-radius: 50%;
    z-index: -1;
}

.team-socila-icon ul li i:hover:after{
    transform: scale(1);
}

.team-socila-icon ul li i:hover{
    color:#291F1E;
}

.team-content h4 {
    font-size: 24px;
    color: #291F1E;
    font-weight: 600;
    margin-top: 29px;
}

.team-content p {
    font-size: 16px;
    color: #fe1b1e;
    margin: 7px 0 0;
}

/*---=================================
   <!-- Elecson Social Area Css-->
==================================---*/
.social-area {
    background: url(../images/varzybos.png);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 99px 0 98px;
}

.social-account-icon i {
    font-size: 26px;
    color: #ffff;
    border: 2px solid #fff;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    text-align: center;
    line-height: 59px;
}

.social-account-content h4 {
    font-size: 40px;
    color: #ffffff;
    font-weight: 700;
    margin: 11px 0 0;
    position: relative;
}

.social-account-content h4:before {
    position: absolute;
    content: "";
    width: 45px;
    height: 3px;
    left: 0;
    bottom: -12px;
    background: #fff;
}

.social-account-content p {
    font-size: 20px;
    line-height: 26px;
    color: #ffffff;
    margin: 27px 0 0;
}

.social-account-desc p {
    font-size: 20px;
    line-height: 34px;
    color: #ffffff;
    font-weight: 400;
    font-style: italic;
    margin-left: 31px;
    width: 90%;
}

.social-account-desc p a {
    color: #1fb76a;
    display: inline-block;
    font-style: italic;
}

.social-account-user {
    margin-left: 31px;
}

.social-account-user a {
    color: #1fb76a;
    display: inline-block;
    font-size: 16px;
    margin-right: 28px;
}

span.use-date {
    font-size: 16px;
    color: #1fb76a;
    display: inline-block;
    position: relative;
}


span.use-date:before {
    position: absolute;
    content: "";
    width: 2px;
    height: 13px;
    left: -16px;
    top: 7px;
    background: #1fb76a;
}



/*---=================================
   <!-- Elecson Campaign Area Css-->
==================================---*/
.campaign-area {
    padding: 91px 0 86px;
}

.single-campaign-box {
    background: #F4F4F4;
    padding: 40px 50px 28px 249px;
    position: relative;
    z-index: 1;
    margin-bottom: 33px;
}

.single-campaign-box:before{
    position: absolute;
    content:"";
    width:100%;
    height:100%;
    left: 0;
    top: 0;
    background:url(../images/resource/campaign-img1.jpg);
    background-repeat: no-repeat;
    z-index: -1;
}

.single-campaign-box.two:before{
     background:url(../images/resource/campaign-img2.jpg);
    background-repeat: no-repeat;  
}

.single-campaign-box.three:before{
     background:url(../images/resource/campaign-img3.jpg);
    background-repeat: no-repeat;  
}

.single-campaign-box.four:before{
     background:url(../images/resource/campaign-img4.jpg);
    background-repeat: no-repeat;  
}

.campaign-box-content a{
    font-size: 22px;
    line-height: 28px;
    color: #291F1E;
    font-weight: 600;
    display: inline-block;
    transition: 0.5s;
}

.campaign-box-content a:hover{
    color:#fe1b1e;
}

.campaign-box-content i {
    font-size: 14px;
    display: inline-block;
    color: #fe1b1e;
    margin-right: 10px;
}

span.campaign-date {
    font-size: 15px;
    color: #fe1b1e;
    font-weight: 400;
    display: inline-block;
    font-family: "Peace Sans";
    margin-top: 9px;
}

.campaign-box-content p {
    font-size: 16px;
    line-height: 26px;
    color: #1fb76a;
    font-weight: 400;
    margin-top: 16px;
    border-top: 1px solid #1fb76a26;
    padding-top: 17px;
}



/*---=======================================
   <!-- Elecson Call Do Action Area Css-->
============================================---*/
.call-do-action-area {
    background: #1fb76a;
    padding: 60px 0 60px;
    position: relative;
    z-index: 1;
}

.call-do-action-area:before {
    position: absolute;
    content: "";
    width: 41%;
    height: 100%;
    right: 0;
    top: 0;
    background: #1fb76a;
    z-index: -1;
}

.call-do-action-content h4 {
    font-size: 34px;
    color: #ffffff;
    font-weight: 700;
    font-family: "Peace Sans";
    position: relative;
}

.call-do-action-content h4:before {
    position: absolute;
    content: "";
    width: 40px;
    height: 3px;
    left: 0;
    bottom: -14px;
    background: #fff;
}

.call-do-action-button {
    text-align: center;
}

.call-do-action-button a {
    border: 2px solid #fff;
    display: inline-block;
    padding: 15px 33px;
    color: #ffffff;
    font-weight: 500;
    font-family: "Peace Sans";
    transition: 0.5s;
}

.call-do-action-button a:hover{
    background:#fff;
    color: #1fb76a;
}

.call-do-social-media {
    display: flex;
    align-items: center;
    gap: 20px;
}

.call-do-social-icon i {
    display: inline-block;
    color: #1fb76a;
    background: #ffff;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    font-size: 20px;
}

.call-do-social-content h4 {
    font-size: 24px;
    line-height: 33px;
    color: #ffffff;
    font-weight: 600;
    font-family: "Peace Sans";
    margin: 0;
}

.call-do-social-content a {
    display: inline-block;
    font-size: 16px;
    color: #ffffff;
    font-weight: 400;
    font-family: "Peace Sans";
}


/*---=================================
   <!-- Elecson Footer Area Css-->
==================================---*/

.footer-area {
    background: url(../images/resource/footer-bg.jpg);
    background-repeat: no-repeat;
    padding: 119px 0 90px;
}

.footer-widget-desc p {
    width: 85%;
    color: #1fb76a;
    font-weight: 400;
    font-family: "Peace Sans";
    margin: 22px 0 25px;
}

.footer-widget-address {
    display: flex;
    gap: 6px;
    margin-bottom: 18px;
}

.footer-widget-address-icon i {
    display: inline-block;
    color: #1fb76a;
    font-size: 20px;
}

.footer-widget-address-content p {
    font-size: 16px;
    line-height: 26px;
    color: #ffffff;
    font-weight: 400;
    font-family: "Peace Sans";
    margin: 0;
}

.footer-widget-titel h4 {
    font-size: 22px;
    line-height: 26px;
    color: #ffffff;
    font-weight: 600;
    font-family: "Peace Sans";
    margin-bottom: 46px;
}

.footer-widget-menu ul li a {
    display: inline-block;
    font-size: 16px;
    line-height: 26px;
    color: #1fb76a;
    font-weight: 400;
    font-family: "Peace Sans";
    margin-bottom: 14px;
    transition: 0.5s;
}

.footer-widget-menu ul li a:hover{
    color:#fe1b1e;
}

.footer-widget-menu ul li i {
    display: inline-block;
    font-size: 12px;
    color: #1fb76a;
    margin-right: 9px;
    transition: 0.5s;
}

.footer-widget-menu ul li a:hover i{
    color: #fe1b1e;
}

.footer-widget-campaign {
    display: flex;
    align-items: center;
    gap: 19px;
    margin-bottom: 27px;
}

.widget-campaign-content a {
    display: inline-block;
    font-size: 17px;
    color: #ffffff;
    font-weight: 500;
    width: 85%;
    transition: 0.5s;
}

.widget-campaign-content a:hover{
    color: #fe1b1e;
}

.widget-campaign-content p {
    font-size: 14px;
    color: #1fb76a;
    font-weight: 400;
    font-family: "Peace Sans";
    margin: 0;
}

.newsletter-box input {
    background: #fff;
    border: transparent;
    width: 94%;
    height: 55px;
    padding: 0 17px;
    outline: 0;
}

.newslatter-button button {
    background: #fe1b1e;
    color: #fff;
    padding: 15px 38px;
    border: transparent;
    margin-top: 15px;
}

.footer-bottom-area {
    background: #291F1E;
    padding: 24px 0 27px;
    border-top: 1px solid #b9babb29;
}

.footer-bottom-content p {
    font-size: 16px;
    line-height: 42px;
    color: #ffffff;
    font-weight: 400;
    font-family: "Peace Sans";
    margin: 0;
}

.footer-bottom-list-item {
    text-align: right;
}

.footer-bottom-list-item ul li {
    display: inline-block;
    margin-left: 33px;
}

.footer-bottom-list-item ul li a {
    display: inline-block;
    font-size: 16px;
    line-height: 42px;
    color: #ffffff;
    font-weight: 400;
    font-family: "Peace Sans";
    transition: 0.5s;
}

.footer-bottom-list-item ul li a:hover{
    color: #fe1b1e;
}


/*---=================================
   <!-- Elecson Breadcamb Area Css-->
==================================---*/
.breadcamb-area {
    background: url(../images/resource/breadcamb.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    padding: 163px 0 152px;
    text-align: center;
}

.breadcumb-content h4 {
    font-size: 44px;
    line-height: 46px;
    color: #ffffff;
    font-weight: 700;
    font-family: "Peace Sans";
    margin: 0 0 8px;
}

.breadcumb-content ul li {
    display: inline-block;
    font-size: 16px;
    line-height: 46px;
    color: #1fb76a;
    font-weight: 400;
    font-family: "Peace Sans";
    margin-right: 8px;
}

.breadcumb-content ul li i {
    display: inline-block;
    font-size: 12px;
    color: #fff;
}

.breadcumb-content ul li a {
    display: inline-block;
    color: #fff;
    transition: 0.5s;
}

.breadcumb-content ul li a:hover{
    color: #fe1b1e;
}


/*---=================================
   <!-- Elecson Campings Area Two Css-->
==================================---*/
.campings-area-two {
    padding: 120px 0 120px;
}

.campings-area-two.upper {
    background-color: #f4f4f4;
}

.campings-right {
    padding-left: 14px;
}

.campings-area-two span.campaign-date {
    margin-top: 17px;
}

.campings-area-two .campaign-box-content h4 {
    font-size: 36px;
    line-height: 34px;
    color: #291F1E;
    font-weight: 700;
    font-family: "Peace Sans";
}

.campings-area-two .campaign-box-content p {
    margin-top: 25px;
    padding-top: 22px;
    width: 88%;
}

.campaign-button a {
    display: inline-block;
    font-size: 16px;
    line-height: 42px;
    color: #291F1E;
    font-weight: 500;
    font-family: "Peace Sans";
    transition: 0.5s;
}

.campaign-button a:hover{
  color:#fe1b1e;
}

.campaign-button i {
    display: inline-block;
    font-size: 24px;
    color: #291F1E;
    transform: rotate(304deg);
    position: relative;
    top: 4px;
    left: 1px;
    transition: 0.5s;
}

.campaign-button a:hover i{
  color: #fe1b1e;
}

/*--==============================================->
  <!-- Elecson campaigns details area-->
 ==================================================-*/
.campaign-details-area {
    padding: 120px 0 92px;
}

 .campaign-details-title h2 a {
    display: inline-block;
    font-size: 34px;
    color: #291F1E;
    font-weight: 700;
    font-family: "Peace Sans";
    padding: 22px 0 16px;
    transition: 0.5s;
}

 .campaign-details-title h2 a:hover{
    color:#fe1b1e;
 }

.campaign-details-desc p {
    width: 93%;
}

.up.campaign-details-desc p {
    padding: 5px 24px 7px 0px;
    font-size: 18px;
    line-height: 28px;
    color: #291F1E;
    font-weight: 400;
    position: relative;
    padding-left: 45px;
    z-index: 1;
}

.up.campaign-details-desc p:before {
    position: absolute;
    content: "'";
    left: 0;
    top: 18px;
    width: 35px;
    height: 3px;
    background-color: #1fb76a;
    z-index: -1;
}

.row.mt-55 {
    padding: 38px 0 10px;
}

.campign-details-thumb-2 img {
    width: 100%;
}

.campaign-list-item {
    margin: 28px 0 45px;
}

.campaign-list-item ul li {
    font-size: 17px;
    line-height: 28px;
    color: #291F1E;
    font-weight: 400;
    font-family: "Peace Sans";
}

.campaign-list-item ul li i {
    display: inline-block;
    width: 18px;
    height: 18px;
    background-color: #1fb76a;
    font-size: 14px;
    color: #fff;
    text-align: center;
    line-height: 18px;
    margin-right: 10px;
}

/* our-speaker */

.our-speaker h2 {
    font-size: 34px;
    color: #291F1E;
    font-weight: 700;
    font-family: "Peace Sans";
    margin-bottom: 30px;
}

.our-speaker-team {
    background: #F4F4F4;
    padding: 45px 0 7px;
}

.speaker-box {
    text-align: center;
    margin-bottom: 30px;
}

h3.speaker-title {
    font-size: 18px;
    color: #291F1E;
    font-weight: 500;
    font-family: "Peace Sans";
    text-align: center;
    margin-top: 15px;
}

.speaker-content p {
    font-size: 15px;
    color: #1fb76a;
    font-weight: 400;
    font-family: "Peace Sans";
    text-align: center;
}

/* campaigns btn */

.campaigns-button {
    padding: 50px 0 20px;
}

.campaigns-button a {
    display: inline-block;
    background: #fe1b1e;
    font-size: 17px;
    color: #ffffff;
    font-weight: 500;
    font-family: "Peace Sans";
    padding: 16px 34px;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.campaigns-button a:before {
    position: absolute;
    content: "";
    height: 100%;
    width: 0%;
    top: 0px;
    left: -30px;
    background: #291F1E;
    transform: skew(40deg);
    border-radius: 5px;
    transition: .5s;
    z-index: -1;
}

.campaigns-button a:hover:before {
    width: 80%;
}

.campaigns-button a:after {
    position: absolute;
    content: "";
    height: 100%;
    width: 0%;
    top: 0px;
    right: -30px;
    background: #291F1E;
    transform: skew(40deg);
    border-radius: 5px;
    transition: .5s;
    z-index: -1;
}

.campaigns-button a:hover:after {
    width: 80%;
}

.campaign-info {
    background: url(../images/resource/campaign-info-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 39px 40px 40px;
    border-top: 5px solid #1fb76a;
    border-radius: 4px;
    margin-bottom: 30px;
}

.campaign-info-title h4 {
    color: #fff;
    position: relative;
    padding: 0 0 18px 40px;
    font-size: 24px;
    color: #ffffff;
    font-weight: 600;
    font-family: "Peace Sans";
}

.campaign-info-title h4:before {
    position: absolute;
    content: "";
    left: 0;
    top: 14px;
    width: 30px;
    height: 2px;
    background: #fe1b1e;
}

.campaign-info-item {
    padding: 20px 0 5px;
}

.campaign-info-item p {
    font-size: 15px;
    margin-bottom: 2px;
    color: #1fb76a;
}

.campaign-info-item p i {
    font-size: 15px;
    color: #fe1b1e;
    padding-right: 8px;
}

.campaign-info-item p {
    font-size: 15px;
    margin-bottom: 2px;
    color: #1fb76a;
}

.campaign-info-item p span {
    font-size: 16px;
    color: #ffffff;
    font-weight: 400;
    font-family: "Peace Sans";
}

/* widget items */

.campaign-widget-items {
    background: #F4F4F4;
    padding: 35px 40px 11px 40px;
}

.campaign-categories-title h4 {
    font-size: 24px;
    color: #291F1E;
    font-weight: 600;
    font-family: "Peace Sans";
    border-bottom: 2px solid rgba(27,52,52,0.10196078431372549);
    padding-bottom: 14px;
    margin-bottom: 30px;
}

/*recent post*/
.campaign-widget-recent-post {
    margin-bottom: 29px;
    border-bottom: 1px solid rgba(27,52,52,0.10196078431372549);
    padding: 0 0 25px;
}
.campaign-widget-recent-post.upper {
    border: 0;
    padding: 0;
}
/* rpost title*/
.campaign-rpost-title {
    padding-left: 20px;
}
.campaign-rpost-title h4 {
    margin-top: 0;
}

.campaign-rpost-content h4 a {
    display: inline-block;
    transition: .5s;
    font-size: 17px;
    line-height: 24px;
    color: #291F1E;
    font-weight: 500;
    font-family: "Peace Sans";
}

.campaign-rpost-content h4 a:hover {
    color: #fe1b1e;
}

.campaign-rpost-title span {
    font-size: 14px;
    color: #fe1b1e;
    font-weight: 400;
    font-family: "Peace Sans";
    margin-top: 7px;
    display: inline-block;
}

.campaign-rpost-title span i {
    margin-right: 5px;
}


/*================================
 <-- Elecson Volunteer Area Css-->
==================================*/
.volunteer-section {
    padding: 118px 0 120px;
}

.volunteer-left {
    position: relative;
    margin-left: 30px;
}

.volunteer-list {
    padding: 7px 0 30px;
}

.volunteer-list ul li {
    font-size: 16px;
    color: #291F1E;
    font-weight: 400;
    font-family: "Peace Sans";
    margin-bottom: 13px;
}

.volunteer-list ul li img {
    margin-right: 5px;
    position: relative;
    top: -2px;
}

.volunteer_btn a {
    display: inline-block;
    background: #fe1b1e;
    font-size: 17px;
    color: #ffffff;
    font-weight: 500;
    font-family: "Peace Sans";
    padding: 16px 34px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    border: 0;
}

.volunteer_btn a:before {
    position: absolute;
    content: "";
    height: 100%;
    width: 0%;
    top: 0px;
    left: -30px;
    background: #291F1E;
    transform: skew(40deg);
    border-radius: 5px;
    transition: .5s;
    z-index: -1;
}

.volunteer_btn a:hover:before {
    width: 80%;
}

.volunteer_btn a:after {
    position: absolute;
    content: "";
    height: 100%;
    width: 0%;
    top: 0px;
    right: -30px;
    background: #291F1E;
    transform: skew(40deg);
    border-radius: 5px;
    transition: .5s;
    z-index: -1;
}

.volunteer_btn a:hover:after {
    width: 80%;
}



/*=======================================
 <-- Elecson become-volunteer-area Css-->
========================================*/
.become-volunteer-area {
    background: url(../images/resource/become-volunteer-bg.jpg);
    padding: 100px 0 169px;
    background-repeat: no-repeat;
}

.total-volunteer {
    position: relative;
    left: 66%;
    top: 0;
}

.volunteer-icon {
    float: left;
    margin-right: 19px;
    margin-top: 9px;
}

.total-volunteer-content h4 {
    font-size: 36px;
    line-height: 42px;
    color: #ffffff;
    font-weight: 600;
    display: inline-block;
}

.total-volunteer-content span {
    font-size: 36px;
    line-height: 42px;
    color: #ffffff;
    font-weight: 600;
    display: inline-block;
}

.total-volunteer-content p {
    font-size: 16px;
    line-height: 26px;
    color: #1fb76a;
    font-weight: 400;
    font-family: "Peace Sans";
}


/*<-- Elecson volunteer-form Css-*/
.volunteer-form {
    padding: 0 0 81px;
}

.volunteer-form .row.add-border {
    border: none;
    border-top: 5px solid #fe1b1e;
    padding: 85px 60px 32px;
    margin-top: 0;
    background: #fff;
    margin-top: -117px;
}

.volunteer-title h1 {
    font-size: 30px;
    color: #291F1E;
    font-weight: 600;
    font-family: "Peace Sans";
    padding-bottom: 35px;
}

.volunteer-input-box input {
    border: 2px solid rgba(27,52,52,0.10196078431372549);
    border-radius: 0;
    width: 100%;
    height: 66px;
    margin-bottom: 25px;
    padding: 0 26px;
    outline: 0;
}

h5.check-title {
    font-size: 22px;
    color: #291F1E;
    font-weight: 600;
    font-family: "Peace Sans";
    padding: 20px 0 19px;
}

.dpx.style label {
    cursor: pointer;
    display: block;
    font-size: 18px;
    color: #291F1E;
    font-weight: 400;
    font-family: "Peace Sans";
    line-height: 38px;
}

.option_input {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    top: 5.33333px;
    right: 0;
    bottom: 0;
    left: 0;
    height: 20px;
    width: 20px;
    transition: all 0.15s ease-out 0s;
    background: #1fb76a;
    border: 0;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    margin-right: 0.4rem;
    outline: none;
    position: relative;
    z-index: 1;
}

.option_input:checked {
    background: #1fb76a;
}

.option_input:checked::before {
    width: 10px;
    height: 10px;
    display: flex;
    content: '\f00c';
    font-size: 10px;
    font-weight: bold;
    position: absolute;
    align-items: center;
    font-family: "Peace Sans";
    left: 5px;
    top: 5px;
}

.option_input:focus {
    border: 1px solid #1fb76a;
}

.volunteer-button button {
    background: #fe1b1e;
    color: #fff;
    border: transparent;
    padding: 14px 36px;
    margin-top: 38px;
}

.volunteer-form label.checkbox {
    padding-top: 15px;
    font-size: 16px;
    line-height: 26px;
    color: #1fb76a;
    font-weight: 400;
    font-family: "Peace Sans";
    margin-top: 3px;
}



/*================================
 <--Elecson  donate  Section Css-->
==================================*/

.donate-section-two {
    padding: 90px 0 120px;
}

.donations-thumb img {
    width: 100%;
}

.row.donate_upper {
    background: #291F1E;
    margin: 0;
    padding: 50px 48px 45px;
    border-top: 5px solid #1fb76a;
}


.donate-left {
    display: inline-block;
}
.donate-right {
    display: inline-block;
}
/*button count number*/

button.tablink {
    border: 0;
    height: 50px;
    width: 95px;
    margin-right: 6px;
    transition: .5s;
    margin-bottom: 5px;
    font-size: 16px;
    line-height: 26px;
    color: #291F1E;
    font-weight: 500;
    font-family: "Peace Sans";
}

button.tablink.active{
    background: #fe1b1e !important;
    color: #fff;
}

/*tab content*/
.tabcontent {
    background: #fff;
    padding: 2px 22px 12px;
    position: relative;
    text-align: right;
    padding-left: 100px;
}

.tabcontent:before {
    position: absolute;
    content: "Custom :";
    left: 23px;
    top: 12px;
    font-size: 16px;
    line-height: 26px;
    color: #1fb76a;
    font-weight: 500;
    font-family: "Peace Sans";
}

.tabcontent h3 {
    font-size: 16px;
    line-height: 26px;
    color: #1fb76a;
    font-weight: 500;
    font-family: "Peace Sans";
}


.check-content h5 {
    padding: 10px 0px 8px;
    font-size: 18px;
    color: #291F1E;
    font-weight: 500;
    font-family: "Peace Sans";
}

.dpx label {
    cursor: pointer;
    margin-right: 15px;
    font-size: 16px;
    line-height: 50px;
    color: #291F1E;
    font-weight: 400;
    font-family: "Peace Sans";
}

.option-input {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 10px;
    width: 10px;
    transition: all 0.15s ease-out 0s;
    background: transparent;
    border: 2px solid rgba(27,52,52,0.10196078431372549);
    color: #fff;
    cursor: pointer;
    display: inline-block;
    margin-right: 0.4rem;
    outline: none;
    position: relative;
    z-index: 1;
    border-radius: 50%;
}
.option-input:hover {
  background: #1fb76a;
}
.option-input:checked {
    background: #fe1b1e;
}

.option-input:checked::before {
    width: 16px;
    height: 16px;
    display: flex;
    content: "";
    position: absolute;
    align-items: center;
    left: -5px;
    top: -5px;
    border: 1px solid #fe1b1e
    border-radius: 50%;
    z-index: -1;
}


.dontaions-form-box {
    border-width: 1px;
    border-style: solid;
    border-color: rgba(27, 52, 52, 0.1);
    border-image: initial;
    margin: 0px;
    padding: 53px 60px 32px;
}

.form-title h6 {
    font-size: 16px;
    color: #291F1E;
    font-weight: 400;
    font-family: "Peace Sans";
    margin-bottom: 10px;
}

.donations-input-box input {
    border: 1px solid rgba(27,52,52,0.10196078431372549);
    border-radius: 0;
    width: 100%;
    height: 60px;
    margin-bottom: 25px;
    outline: 0;
    padding: 0 17px;
}

.up.form-box input::placeholder {
    font-size: 15px;
    color: #1fb76a;
    font-family: "Peace Sans";
    opacity: 1;
}


.check-cash {
    border-top: 1px solid rgba(27,52,52,0.10196078431372549);
    padding-top: 15px;
    margin-top: 25px;
}

.check-cash span strong {
    font-size: 18px;
    color: #291F1E;
    font-weight: 500;
    font-family: "Peace Sans";
    margin-right: 10px;
}

/**
======================================================
<-- ElecsonBlog Section Css -->
======================================================**/
.blog-section {
    background: #fff;
    padding: 90px 0 87px;
}

.blog-section .section-title {
    margin-bottom: 60px;
}

.single-blog-box {
    margin-bottom: 33px;
}

.blog-thumb{
    overflow: hidden;
}

.blog-thumb img {
    width: 100%;
    transition: 0.5s;
}

.single-blog-box:hover .blog-thumb img{
    transform: scale(1.1);
}

.blog-content {
    background: #291F1E;
    width: 86%;
    margin: auto;
    padding: 10px 43px 16px;
    margin-top: -81px;
    position: relative;
    z-index: 1;
    text-align: center;
}

.blog-date {
    margin-top: -24px;
}

.blog-date span {
    font-size: 16px;
    font-weight: 500;
    background: #fe1b1e;
    color: #fff;
    padding: 14px 14px;
}

.meta-blog {
    margin: 24px 0 -7px;
}

.meta-blog span {
    font-size: 12px;
    font-weight: 400;
    margin-left: 8px;
    color: #fff;
}

.meta-blog i {
    font-size: 15px;
    color: #fe1b1e;
    margin-right: 5px;
    display: inline-block;
}

.blog-content a {
    display: inline-block;
    font-size: 20px;
    line-height: 30px;
    font-weight: 600;
    transition: 0.5s;
    color: #fff;
}

.single-blog-box:hover .blog-content a{
    color: #1fb76a;
}

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

.blog-button a {
    display: inline-block;
    background: #fe1b1e;
    color: #ffff;
    padding: 14px 36px;
    font-weight: 500;
    font-size: 16px;
    border-radius: 5px;
}

.blog-button i {
    display: inline-block;
    color: #fe1b1e;
    font-size: 18px;
    position: relative;
    left: 8px;
    top: 3px;
    background: #ffff;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 23px;
}


/*=====================================
 <-- Elecson Blgo Details  Area Css-->
=======================================*/
.blog-detials-area {
    padding: 120px 0 118px;
}

.blog-grid-area {
    padding: 120px 0 90px;
}

.blog-details-main {
    background: #fff;
    padding: 30px;
    box-shadow: 0px 0px 70px rgba(0, 0, 0, 0.05);
}
.blog-details-meta {
    background: #fe1b1e;
    padding: 16px 30px;
}

.blog-details-meta span {
    margin-right: 30px;
    color: #fff;
}

.blog-details-meta span i {
    color: #fff;
    padding-right: 5px;
}

.blog-details-content {
    padding: 20px 0 18px;
}

.blog-details-content h2 {
    margin-bottom: 15px;
    font-size: 34px;
    line-height: 60px;
    color: #291F1E;
    font-weight: 600;
    font-family: "Peace Sans";
}

.blog-details-thumb img {
    width: 100%;
}

.blog-details-des {
    padding: 30px 0 10px;
}

.blog-details-blockquote {
    background: #1fb76a;
    padding: 40px 38px 26px;
    position: relative;
    margin-bottom: 10px;
}

.blog-details-blockquote blockquote {
    font-size: 18px;
    color: #fff;
}
.blog-details-video-thumb {
    margin-top: 30px;
    position: relative;
}

.blog-details-video-thumb img {
    width: 100%;
}

.blog-details-video-thumb-inner img {
    width: 100%;
}

.blog-details-content h3 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 15px;
}

.blog-details-content-list p i {
    font-size: 14px;
    height: 32px;
    width: 32px;
    border: 1px solid #ddd;
    text-align: center;
    line-height: 31px;
    border-radius: 100%;
    margin-right: 15px;
    color: #fe1b1e;
}

.blog-detials-area .blog-content {
    padding: 20px 30px 38px;
}

.blog-details-button a {
    display: inline-block;
    border: 2px solid #fe1b1e;
    padding: 3px 20px;
    position: relative;
    z-index: 1;
    color: #fff;
    border-radius: 3px;
    margin-bottom: 10px;
}

.blog-details-button a:before {
    position: absolute;
    content: "";
    left: -2px;
    top: -1px;
    height: 104%;
    width: 104%;
    background: #fe1b1e;
    z-index: -1;
    border-radius: 3px;
    transition: .5s;
}

.blog-details-button a.active {
    background: transparent;
    transition: .5s;
    margin-left: 10px;
    color: #fe1b1e;
}
.blog-details-button a.active:before{
    background: transparent;
}

.blog-details-button a.active:hover:before{
    background: #fe1b1e;
}

.blog-details-button a.active:hover{
    color: #fff;
    border-color: #fe1b1e;
}

.blog-details-social {
    text-align: right;
}

.blog-details-social a {
    display: inline-block;
    border: 2px solid #fe1b1e;
    height: 40px;
    width: 40px;
    line-height: 38px;
    text-align: center;
    border-radius: 100%;
    font-size: 14px;
    transition: .5s;
    margin-left: 5px;
    color: #fe1b1e;
}

.blog-details-social a:hover{
    background: #fe1b1e;
    border-color: #fe1b1e;
    color: #fff;
}

/* Blog Details Author */

.blog-details-author {
    border-top: 2px solid rgba(255,255,255,0.2);
    padding-top: 40px;
    margin-top: 32px;
}

.blog-details-author-inner {
    background: #fe1b1e;
    padding: 30px 30px 70px;
}

.blog-details-author-thumb {
    float: left;
    margin-right: 30px;
}

.blog-details-author-content h2 {
    font-size: 22px;
    margin-top: 0;
    margin-bottom: 12px;
    color: #ffff;
}
.blog-details-author-content p {
    color: #ffffffbd;
}



.blog-video-icon {
    left: 41%;
    position: absolute;
    top: 35%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    padding-top: 8px;
}

.blog-video-icon a i {
    height: 80px;
    line-height: 80px;
    width: 80px;
    display: inline-block;
    background: #fff;
    border-radius: 50%;
    font-size: 20px;
    color: #291F1E;
    text-align: center;
    -webkit-animation: ripple-white 1s linear infinite;
    animation: ripple-blue 1s linear infinite;
} 
@-webkit-keyframes ripple-blue {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(255,255,255, 0.3), 0 0 0 10px rgba(255,255,255, 0.3), 0 0 0 20px rgba(255,255,255, 0.3);
        box-shadow: 0 0 0 0 rgba(255,255,255, 0.3), 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255,255,255, 0.3)
    }
    100% {
        -webkit-box-shadow: 0 0 0 10px rgba(255,255,255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 255, 255, 0);
        box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 255, 255, 0)
    }
}

@keyframes ripple-blue {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(255,255,255, 0.3), 0 0 0 10px rgba(255,255,255, 0.3), 0 0 0 20px rgba(255,255,255, 0.3);
        box-shadow: 0 0 0 0 rgba(255,255,255, 0.3), 0 0 0 10px rgba(255,255,255, 0.3), 0 0 0 20px rgba(255,255,255, 0.3)
    }
    100% {
        -webkit-box-shadow: 0 0 0 10px rgba(255,255,255, 0.3), 0 0 0 20px rgba(255,255,255, 0.3), 0 0 0 30px rgba(255,255,255, 0);
        box-shadow: 0 0 0 10px rgba(255,255,255, 0.3), 0 0 0 20px rgba(255,255,255, 0.3), 0 0 0 30px rgba(255,255,255, 0)
    }
}



/* Comment CSS */

.blog-details-comment {
    margin-bottom: 10px;
    position: relative;
}

.blog-details-comment-thumb {
    float: left;
    margin-right: 30px;
}

.blog-details-comment-content {
    overflow: hidden;
}

.blog-details-comment-content h2 {
    font-size: 18px;
    margin-top: 0;
}

.blog-details-comment-content span {
    font-size: 14px;
    margin-bottom: 6px;
    display: block;
}

.blog-details-comment-reply {
    position: absolute;
    right: 25px;
}

.blog-details-comment-reply a {
    background: #fe1b1e;
    padding: 3px 20px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    border-radius: 2px;
    display: inline-block;
}

.blog-details-comment.reply {
    margin-left: 70px;
    padding-top: 35px;
    border-top: 2px solid rgba(255,255,255,0.2);
}

/* Blog Details Contact */

.blog-details-contact {
    border-top: 2px solid rgba(255,255,255,0.2);
    margin: 12px 10px 10px;
    padding-top: 8px;
}
/*input-box*/
.input-box input {
    width: 100%;
    height: 50px;
    border: 1px solid #0202021a;
    margin-bottom: 30px;
    padding: 0 20px;
    outline: 0;
    border-radius: 3px;
}

.input-box textarea {
    width: 100%;
    height: 207px;
    outline: 0;
    border: 1px solid  #0202021a;
    padding: 22px 20px 0;
    border-radius: 3px;
}

/*input button*/
.input-button {
    margin-top: 27px;
}
.input-button button {
    display: inline-block;
    padding: 13px 39px;
    outline: 0;
    border: 0;
    text-transform: uppercase;
    color: #fff;
    letter-spacing: 1px;
    font-weight: 500;
    background: #fe1b1e;
    border: 1px solid #fe1b1e;
    transition: .5s;
}
.input-button button:hover {
    border: 1px solid #fe1b1e;
    color: #fe1b1e;
    background: none;
}
.input-button button i {
    margin-left: 10px;
}


/*widget search*/

.widget_search {
    padding: 19px 40px 40px;
    border-radius: 4px;
    margin-bottom: 30px;
    background: #fff;
    -webkit-box-shadow: 0px 6px 30px rgba(0, 0, 0, 0.07);
    box-shadow: 0px 6px 30px rgba(0, 0, 0, 0.07);
}

.widget_search form {
    position: relative;
    margin-top: 25px;
}

.widget_search input {
    border-radius: 4px;
    padding-left: 20px;
    height: 60px;
    width: 100%;
    position: relative;
    color: #291F1E;
    outline: 0;
    border: 1px solid rgba(1,37,73,0.10196078431372549);
}


button.icons {
    border: 0;
    font-size: 18px;
    color: #fff;
    padding: 1px 15px;
    position: absolute;
    right: 0;
    top: 0;
    height: 60px;
    width: 60px;
    background: #fe1b1e;
    border-radius: 0 4px 4px 0;
}

/*widget categories box*/

.widget-categories-box {
    padding: 18px 40px 18px;
    border-radius: 5px;
    margin-bottom: 30px;
    background: #fff;
    -webkit-box-shadow: 0px 6px 30px rgba(0, 0, 0, 0.07);
    box-shadow: 0px 6px 30px rgba(0, 0, 0, 0.07);
}

.widget-categories-box.style1 {
    padding: 18px 40px 12px;
}

/*title*/

.categories_title h4 {
    font-size: 24px;
    padding: 0px 0 8px;
    margin: 0 0 8px;
    position: relative;
    line-height: 60px;
    color: #291F1E;
    font-weight: 600;
    font-family: "Peace Sans";
    border-bottom: 2px solid #1fb76a;
}

.categories_title h4:before {
    position: absolute;
    content: "";
    left: -40px;
    top: 20px;
    height: 25px;
    width: 5px;
    background: #fe1b1e;
}

/*categories menu*/

.widget-categories-menu ul {
    display: block;
}

.widget-categories-menu ul li {
    display: block;
    list-style: none;
    background: transparent;
    padding: 16px 0px 16px;
    transition: .5s;
    position: relative;
    z-index: 1;
    border-bottom: 1px solid #1fb76a;
}

.widget-categories-menu ul li:last-child {
    border: none;
}

.widget-categories-menu ul li a {
    display: block;
    color: #291F1E;
    transition: .5s;
}

.widget-categories-menu ul li a span {
    display: inline-block;
    float: right;
    background: #291F1E;
    height: 22px;
    width: 22px;
    font-size: 12px;
    text-align: center;
    margin-top: 6px;
    color: #fff;
    line-height: 22px;
    transition: .5s;
}

.widget-categories-menu ul li:hover a span {
    background: #fe1b1e;
    color: #fff;
}

.widget-categories-menu ul li:hover a {
    color: #fe1b1e;
}

.pdf-button a {
    display: block;
    background: #fe1b1e;
    padding: 15px 30px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
}

.pdf-button a i {
    float: right;
    font-size: 20px;
    margin-top: 2px;
}

/* Sidber Recent Post */

.sidber-widget-recent-post {
    margin-bottom: 20px;
    overflow: hidden;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #eaeaea;
    padding-bottom: 22px;
}

.sidber-widget-recent-post.style1 {
    margin-bottom: 0px;
}

.sidber-widget-recent-post:last-child {
    border: none;
}

.recent-widget-content a {
    color: #1b1b1b !important;
    display: inline-block;
    font-size: 15px;
    font-weight: 500;
    display: block;
    line-height: 26px;
    transition: .5s;
    margin-bottom: 7px;
}

.recent-widget-thumb {
    float: left;
    margin-right: 25px;
}

.sidber-widget-recent-post .recent-widget-content a {
    color: #fe1b1e;
    font-size: 18px;
    transition: 0.5s;
}

.sidber-widget-recent-post:hover .recent-widget-content a{
    color: #fe1b1e !important;
}

/* Sidber Achivement CSS */

.widget-achivement ul li {
    list-style: none;
    margin-bottom: 6px;
}

.widget-achivement ul li a i {
    font-size: 17px;
    margin-right: 3px;
}

.widget-achivement ul li a {
    font-weight: 600;
    transition: .5s;
    color: #1b1b1b;
}

.widget-achivement ul li a span {
    float: right;
}

.widget-achivement ul li a:hover{
    color: #fe1b1e;
}

/* Sidber Widget Gallery CSS */

.widget-gallery {
    overflow: hidden;
}

.widget-gallery-thumb {
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
}

/* Sidber Widget Tags CSS */

.widget-tags a {
    display: inline-block;
    border: 1px solid #eaeaea;
    padding: 8px 19px;
    margin: 4px 3px;
    border-radius: 2px;
    color: #1b1b1b;
    font-weight: 400;
    position: relative;
    transition: .5s;
    z-index: 1;
}

.widget-tags a:hover{
    color: #fff;
    border-color: #fe1b1e;
    background: #fe1b1e;
}

.widget-tags a:hover:before{
    width: 102%;
}


/***
==================================================
<-- Elecson Contact Area Css -->
==================================================***/

.contact-area {
    padding: 120px 0 120px;
}

.contract-form-bg {
    padding: 15px 35px 40px;
    background: #fff;
    border-radius: 3px;
    width: 430px;
    position: relative;
    z-index: 1;
    margin-top: -140px;
    left: 100px;
}

.contact_from_box {
    box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.1);
    background: #fff;
    padding: 27px 40px 45px;
}

/*form title*/
.contact-form-title {
    padding: 0 0 72px;
}

.contact-form-title h4 {
    font-size: 30px;
    line-height: 50px;
    font-weight: 600;
    color: #fff;
}

.contact-form-title p {
    color: #fff;
    font-size: 18px;
    padding: 10px 0 0;
}

/*form input*/
.form_box input {
    width: 100%;
    height: 50px;
    padding-left: 25px;
    background: #fff;
    border-radius: 30px;
    color: #232323;
    border: 1px solid rgba(35, 35, 35, 0.12);
    transition: .5s;
    padding-right: 25px;
}

.form_box textarea {
    width: 100%;
    background: #fff;
    padding-left: 25px;
    padding-top: 20px;
    height: 135px;
    border: 1px solid rgba(35, 35, 35, 0.12);
    border-radius: 30px;
    color: #232323;
    transition: .5s;
}

.form_box input::placeholder {
    color: #6d6d6d;
}

.form_box input:focus,
.form_box textarea:focus {
    border-color: #fe1b1e;
    outline: 0;
    box-shadow: 0 0 6px rgba(204, 48, 0, 0.6);
}

/*form button*/
.quote_button button {
    padding: 13px 15px;
    background: #291F1E;
    display: block;
    color: #fff;
    border-radius: 30px;
    width: 100%;
    font-family: "Peace Sans";
    cursor: pointer;
    text-align: center;
    transition: .5s;
}

.quote_button button i {
    display: inline-block;
    font-size: 18px;
    margin-right: 5px;
    position: relative;
    top: 2px;
    color: #1fb76a;
    transition: .5s;
}

.quote_button button:hover {
    color: #fff;
    background: #1fb76a;
}

.quote_button button:hover i {
    color: #fff;
}

.content-info-area {
    background: #291F1E;
    padding: 21px 0;
}

.cda-single-content {
    margin: 0 45px;
    padding: 25px 0 17px;
}

.cda-icon i {
    font-size: 35px;
    color: #fff;
    height: 60px;
    width: 60px;
    line-height: 60px;
    text-align: center;
    background: #1fb76a;
    border-radius: 5px;
    display: inline-block;
    margin-right: 25px;
    margin-top: 10px;
}

.cda-content-inner h4 {
    font-size: 20px;
    font-weight: 500;
    color: #fff;
    margin-bottom: 0;
}

.cda-content-inner p {
    color: rgba(255, 255, 255, 0.74);
    margin: 10px 0;
}



/*** 
====================================================================
   Elecson Search Popup
====================================================================
***/


.search-popup{
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    width: 100%;
    z-index: 99999;
    margin-top: -540px;
    transform: translateY(-100%);
    background-color: rgba(0,0,0,0.90);
    -webkit-transition: all 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
    -moz-transition: all 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
    -o-transition: all 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
    transition: all 1500ms cubic-bezier(0.860, 0.000, 0.070, 1.000); /* easeInOutQuint */
    -webkit-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
    -moz-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
    -o-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
    transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000); /* easeInOutQuint */
}

.search-popup{
    width: 100%;
}

.search-active .search-popup{
    transform: translateY(0%);
    margin-top: 0;
}

.search-popup .close-search {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    margin-top: -200px;
    border-radius: 50%;
    text-align: center;
    background-color: #fe1b1e;
    width: 70px;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(0,0,0,0.05);
    border-bottom: 3px solid #fff;
    border-top: 3px solid #fff;
    border-right: 3px solid #1fb76a;
    border-left: 3px solid #1fb76a;
    -webkit-transition: all 500ms ease;
    height: 70px;
    line-height: 70px;
    text-align: center;
}

.search-active .search-popup .close-search{
    visibility: visible;
    opacity: 1;
    top: 50%;
    -webkit-transition-delay: 1500ms;
    -moz-transition-delay: 1500ms;
    -ms-transition-delay: 1500ms;
    -o-transition-delay: 1500ms;
    transition-delay: 1500ms;
}

.search-popup form{
    position: absolute;
    max-width: 700px;
    top: 50%;
    left: 15px;
    right: 15px;
    margin:-35px auto 0;
    transform: scaleX(0);
    transform-origin: center;
    background-color: #111111;
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
}

.search-active .search-popup form{
    transform: scaleX(1);
    -webkit-transition-delay: 1200ms;
    -moz-transition-delay: 1200ms;
    -ms-transition-delay: 1200ms;
    -o-transition-delay: 1200ms;
    transition-delay: 1200ms;
}

.search-popup .form-group{
    position:relative;
    margin:0px; 
  
    overflow: hidden;
}
.search-popup .form-group input[type="text"],
.search-popup .form-group input[type="search"]{
    position:relative;
    display:block;
    font-size:18px;
    line-height: 50px;
    color:#000000;
    height:70px;
    width:100%;
    padding: 10px 30px;
    background-color: #ffffff;
    -webkit-transition:all 500ms ease;
    -moz-transition:all 500ms ease;
    -ms-transition:all 500ms ease;
    -o-transition:all 500ms ease;
    transition:all 500ms ease;
    font-weight:500;
    text-transform:capitalize;
}

.search-popup .form-group input[type="submit"], .search-popup .form-group button {
    position: absolute;
    right: 30px;
    top: 0px;
    height: 70px;
    line-height: 70px;
    background: transparent;
    text-align: center;
    font-size: 24px;
    color: #fe1b1e;
    padding: 0;
    cursor: pointer;
    -webkit-transition: all 500ms ease;
    border: none;
}

.search-popup .form-group input[type="submit"]:hover,
.search-popup .form-group button:hover{
    color: #000000;
}

.search-popup input::placeholder,
.search-popup textarea::placeholder{
    color:#000000;
}

.search-popup .close-search.style-two{
    position: absolute;
    right: 25px;
    left: auto;
    color:#ffffff;
    width:auto;
    height:auto;
    top:25px;
    margin:0px;
    border:none;
    background:none !important;
    box-shadow:none !important;
    -webkit-transition:all 500ms ease;
    -moz-transition:all 500ms ease;
    -ms-transition:all 500ms ease;
    -o-transition:all 500ms ease;
    transition:all 500ms ease;
}

.search-box-btn {
    display: inline-block;
    padding-left: 22px;
}

.search-box-btn i {
    display: inline-block;
    color: #fff;
    line-height: 30px;
    text-align: center;
    font-size: 18px;
    cursor: pointer;
    transition: .5s;
}

.upp.search-box-btn i {
    color: #1fb76a;
}

.search-box-btn.search-box-outer span i {
    font-size: 20px;
    display: inline-block;
    color: #fff;
    padding-left: 17px;
    position: relative;
    z-index: 1;
}

.upp.search-box-btn.search-box-outer span i {
    color: #1fb76a;
}

.search-box-btn.search-box-outer span i:after {
    position: absolute;
    content: "0";
    right: -10px;
    top: -4px;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    background: #fe1b1e;
    color: #fff;
    border-radius: 50%;
    display: inline-block;
    font-size: 12px;
}

.flaticon-multiply:before {
    content: inherit;
}

button.close-search i {
    font-size: 25px;
    color: #fff;
    display: inline-block;
}


span.flaticon-multiply i {
    display: inline-block;
    color: #fe1b1e;
}

.header-search-button i {
    font-size: 18px;
    color: #291F1E;
    margin-right: 13px;
    transition: 0.5s;
}

.header-search-button i:hover{
    color: #fe1b1e;
}

.header-search-button.search-box-outer {
    padding: 0px 8px 0 0;
    display: inline-block;
}

.header-search-button.search-box-outer a {
    color: #1fb76a;
    display: inline-block;
    position: relative;
    left: 16px;
}



/*
<!-- ============================================================== -->
<!-- Elecson Scrollup Button Section Css -->
<!-- ============================================================== -->*/

/*------back-to-top------------*/
.prgoress_indicator {
    position: fixed;
    right: 30px;
    bottom: 50px;
    height: 46px;
    width: 46px;
    cursor: pointer;
    display: block;
    border-radius: 50px;
    box-shadow: inset 0 0 0 2px rgba(22, 93, 245, 0.2);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    /* transform: translateY(15px); */
    transform: translateY(15px) !important;
    transition: all 200ms linear !important;
}

.prgoress_indicator.active-progress {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) !important;
}

.prgoress_indicator::after {
    position: absolute;
    content: "\f106";
    font-family: "Peace Sans";
    text-align: center;
    line-height: 46px;
    font-size: 18px;
    color: #fe1b1e;
    left: 0;
    top: 0;
    height: 46px;
    width: 46px;
    cursor: pointer;
    display: block;
    font-weight: 900;
    z-index: 1;
    transition: all 200ms linear !important;
}

.prgoress_indicator::before {
  position: absolute;
  content: "\f106";
  font-family: "Peace Sans";
  text-align: center;
  line-height: 46px;
  font-size: 18px;
  font-weight: 900;
  opacity: 0;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  left: 0;
  top: 0;
  height: 46px;
  width: 46px;
  cursor: pointer;
  display: block;
  z-index: 2;
  transition: all 200ms linear !important;
}
.prgoress_indicator:hover ::after {
  color: #fe1b1e;
}
.prgoress_indicator:hover ::before {
  opacity: 1;
}
.prgoress_indicator svg path {
  fill: none;
}
.prgoress_indicator svg.progress-circle path {
  stroke:#fe1b1e;
  stroke-width: 4;
  box-sizing: border-box;
  transition: all 200ms linear !important;
}

/*===========================
<-- Elecson Loader Css -->
=============================*/
.loader-wrapper {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    transition: 0.8s 1s ease;
    z-index: 9999;
}

.loader {
    position: relative;
    display: block;
    z-index: 201;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    margin: -50px 0 0 -50px;
    border-radius: 50%;
    transition: all 1s 1s ease;
    border: 3px solid transparent;
    border-top-color: #fe1b1e;
    -webkit-animation: spin 1.5s linear infinite;
    -moz-animation: spin 1.5s linear infinite;
    -o-animation: spin 1.5s linear infinite;
    animation: spin 1.5s linear infinite;
}

.loader:before {
    position: absolute;
    content: '';
    top: 6px;
    left: 6px;
    right: 6px;
    bottom: 6px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-left-color: #fe1b1e;
    -webkit-animation: spin 2s linear infinite;
    -moz-animation: spin 2s linear infinite;
    -o-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

.loader:after {
    position: absolute;
    content: '';
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-right-color: #fff;
    -webkit-animation: spin 2.5s linear infinite;
    -moz-animation: spin 2.5s linear infinite;
    -o-animation: spin 2.5s linear infinite;
    animation: spin 2.5s linear infinite;
}

/*/ Here comes the Magic /*/

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-moz-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.loader-wrapper .loder-section {
    position: fixed;
    top: 0;
    width: 50%;
    height: 100%;
    background: #111;
    z-index: 2;
}

.loader-wrapper .loder-section.left-section {
    left: 0;
    transition: 1s 1.4s ease;
}

.loader-wrapper .loder-section.right-section {
    right: 0;
    transition: 1s 1.4s ease;
}

/*/ When page loaded /*/
.loaded .loder-section.left-section {
    left: -100%;
}

.loaded .loder-section.right-section {
    right: -100%;
}

.loaded .loader-wrapper {
    visibility: hidden;
}

.loaded .loader {
    top: -100%;
    opacity: 0;
}


/*===========================
<-- GPM style -->
=============================*/


.main_title {
    text-align: center;
  }
  .main_title h2 {
    font-size: 36px;
    font-size: 2.25rem;
    text-transform: uppercase;
    margin-bottom: 0;
  }
  .main_title p {
    font-size: 21px;
    font-size: 1.3125rem;
    color: #777;
  }
  
  .question_title {
    text-align: center;
    margin-bottom: 25px;
  }
  .question_title h3 {
    font-size: 36px;
    font-size: 2.25rem;
    margin-top: 45px;
    color: #333;
  }
  .question_title p {
    font-size: 15px;
    font-size: 0.9375rem;
    color: #777;
    margin-bottom: 0;
  }
  
  main {
    background: #f8f8f8 url() repeat;
  }
  main.plain {
    background: #f8f8f8;
  }
  
  /*============================================================================================*/
  /* 2.  CONTENT */
  /*============================================================================================*/
  /*-------- 2.1 Wizard --------*/

  .title-gap{
    margin: 30px 0 10px;
  }

  .card label {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    border-radius: 5px;
    display: block;
    background-color: #fff;
    padding: 45px;
    text-align: center;
    margin-bottom: 0;
    cursor: default;
    -webkit-transition: all 0.3s cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition: all 0.3s cubic-bezier(0.77, 0, 0.175, 1);
    -ms-transition: all 0.3s cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition: all 0.3s cubic-bezier(0.77, 0, 0.175, 1);
    transition: all 0.3s cubic-bezier(0.77, 0, 0.175, 1);
    position: relative;
    font-size: 15px;
    font-size: 0.9375rem;
    color: #777;
    font-family: "Peace Sans";
    
  }
  @media (max-width: 991px) {
    .card label {
      padding: 30px;
      
    }
    .card-gap{
        margin: 20px 0; 
    }
  }
  .card label strong {
    text-transform: uppercase;
    display: block;
    font-size: 18px;
    font-size: 1.125rem;
    color: #333;
  }
  .card label img {
    display: block;
    margin: 0 auto 15px;
  }
  @media (max-width: 767px) {
    .card label img {
      width: 80px;
      height: auto;
    }
  }
  .card label span {
    border: 4px solid #d9e1e6;
    display: block;
    margin: 0 auto 15px;
    width: 130px;
    height: 130px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    border-radius: 50%;
    padding: 4px;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
  }
  .card label figure {
    position: relative;
    width: 114px;
    height: 114px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    border-radius: 50%;
    margin: 0;
    overflow: hidden;
  }
  .card label figure img {
    width: 130px;
    height: auto;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%) scale(1);
    -moz-transform: translate(-50%, -50%) scale(1);
    -ms-transform: translate(-50%, -50%) scale(1);
    -o-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1);
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  .card input[type=checkbox]:not(old),
  .card input[type=radio]:not(old) {
    visibility: hidden;
  }
  
  input#website {
    display: none;
  }
  
  #wizard_container {
    position: relative;
    min-height: 450px;
  }
  
  /* Wizard Buttons*/
  button.backward,
  button.forward,
  button.submit {
    border: none;
    color: #fff;
    padding: 7px 20px;
    text-decoration: none;
    transition: background .5s ease;
    -moz-transition: background .5s ease;
    -webkit-transition: background .5s ease;
    -o-transition: background .5s ease;
    display: inline-block;
    cursor: pointer;
    font-weight: 400;
    outline: none;
    min-width: 110px;
    text-align: center;
    background: #409fff;
    position: relative;
    font-size: 15px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    line-height: 1;
    padding: 10px 30px 10px 30px;
  }
  
  button.backward {
    color: #333;
    background: #e8e8e8;
    padding: 10px 20px 10px 30px;
  }
  
  button.forward,
  button.submit {
    padding: 10px 30px 10px 20px;
  }

  button.submit{
    background: #fe1b1e;
  }
  
  button[disabled] {
    display: none;
  }
  
  button.backward:before {
    content: "\34";
    font-family: 'ElegantIcons';
    position: absolute;
    top: 8px;
    left: 12px;
    font-size: 18px;
  }
  
  button.forward:before {
    content: "\35";
    font-family: 'ElegantIcons';
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: 18px;
  }
  
  button.submit:before {
    content: "\4e";
    font-family: 'ElegantIcons';
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: 18px;
  }
  
  .backward:hover,
  .forward:hover {
    background: #0073e5;
    color: #fff;
  }
  
  #middle-wizard {
    padding: 30px 0 15px 0;
  }
  
  #bottom-wizard {
    padding: 30px 0 45px 0;
    text-align: center;
  }
  
  /*-------- 3.3 Animation Delays --------*/
  .delay-fast {
    animation-delay: .15s;
    -webkit-animation-delay: .15s;
  }
  
  .delay-normal {
    animation-delay: .3s;
    -webkit-animation-delay: .3s;
  }
  
  .delay-medium {
    animation-delay: .6s;
    -webkit-animation-delay: .6s;
  }
  
  .delay-low {
    animation-delay: .9s;
    -webkit-animation-delay: 0.9s;
  }