/* 
    Colour overrides
    #73b941->#538bc0
    #5aab21-> #254671
    #79bc42 -> #f5832d
    #56aa1c-> #fcd4b6
    #7bbd45-> #f5832d
*/

.field-select:after {
    display: none;
}
.field-select select {
    background-image: url('/images/icons8-sort-down-20.png'), linear-gradient(to right, #ededed, #ededed);
    /* ReSharper disable once UnexpectedValue */
    background-position: calc(100% - 12px) calc(100% - 14px), calc(100% - 2.5em) 0;
    background-size: 15px 15px, 1px 3em;
    background-repeat: no-repeat;
    border-radius: 3px;
    border-color: #cecece;
}


/*==========================================================
	2. GENERAL
==========================================================*/
a:hover{
    color: #538bc0;
    text-decoration:none;
}

input[type=text],
input[type=email],
input[type=password],
input[type=number],
input[type=search],
input[type=url],
input[type=tel],
textarea {
    /*border-radius: 0 !important;*/
    border: 1px solid #ededed;
    padding: 8px 15px;
    font-size: 14px;
    color: #222222;
    font-size: 16px;

}

button,
input[type=text]:focus,
input[type=email]:focus,
input[type=password]:focus,
input[type=number]:focus,
input[type=search]:focus,
input[type=checkbox]:focus,
input[type=url]:focus,
input[type=tel]:focus,
textarea:focus {
    border-color: #538bc0;
}
/*==========================================================
	3. ELEMENTS
==========================================================*/

.btn-success-validation {
    background-color: #6ad182;
    color: #fff !important;
}
.btn-success,
.btn-success:visited {
    color: #fff !important;
}

.btn-danger-validation {
    background-color: #f27984;
    color: #fff !important;
}
.btn-danger {
    color: #fff !important;
}
.btn-danger,
.btn-success,
.btn-warning,
.btn-orange{
    padding: 0 20px;
    border-radius: 2px 2px 2px 2px;
    -moz-border-radius: 2px 2px 2px 2px;
    -webkit-border-radius: 2px 2px 2px 2px;
    height: 46px;
    line-height: 46px;
    border: none;
    display: inline-block;
}
.btn-secondary {
    border: 2px solid #868e96;
    background-color: #868e96;
}
.btn-secondary:hover {
    background-color: #f5832d;
    border-color: #f5832d;
}

.btn-orange {
    color: #fff !important;
    border: 2px solid #f5832d;
    background-color: #f5832d;
}
    .btn-orange:hover {
        border: 2px solid #e5731d;
        background-color: #e5731d;
    }

.btn-primary:hover,
.btn-danger-validation:hover,
.btn-danger-validation:hover {
    background-color: #f5832d;
}

ul.socials-top li:hover i{
    color: #538bc0;
}

.main-menu ul li:hover > a{
    color: #538bc0;
}
.btn-primary {
    background-color: #538bc0;
}
.text-primary {
    color: #538bc0 !important;
}
.btn-sm {
    padding: .25rem .5rem;
    font-size: .875rem;
    line-height: 1.5;
    border-radius: .2rem;
    height: 30px;
}
/*==========================================================
	4. HEADER
==========================================================*/
#searchForm {
    border: 1px solid #538bc0;
}

.search-icon form{
    top: 100px;
    transform: none;
    padding: 0 0;
}

.search-icon form button{
    
    right: 75px;
    
}

    .search-icon form .search-button-cancel {
        right: 15px;
    }

/*==========================================================
	5. MAIN
==========================================================*/
.process .raised span {
    /*background-color: #f5832d;*/
    background-color: #f3833a;
}

.process .raised span:after {

    background-image: none;
    
   
}

.campaign-item a.overlay,
.post a.overlay{
    background-color: #538bc0;
}

.campaign-item a.overlay span,
.post a.overlay span{
    color: #538bc0;
}

.campaign-box a.category:hover{
    color: #538bc0;
}

.campaign-box .campaign-author a:hover{
    color: #538bc0;
}

ul.menu-category li.active:before{
    background-color: #f5832d;    
}

.site-footer .footer-menu .footer-menu-item li:hover a{
    color: #538bc0;
}

#newsletterForm button{
    background: #538bc0;
}

.site-footer .footer-copyright a.back-top span{
    color: #538bc0;   
}
.site-footer .footer-copyright a.back-top:hover{
    color: #538bc0;
}

/*==========================================================
	6. FOOTER
==========================================================*/
.site-footer .footer-menu {
    background-color: #0B1828;
    /*padding: 80px 0;*/
}

.site-footer .footer-copyright {
    background-color: #08111C;
    /*padding: 30px 0;*/
}

.footer-menu .footer-menu-item h3 {
    font-size: 24px;
    text-transform: none;
}
/*==========================================================
	7. LAYOUT THREE
==========================================================*/
.page-title {
    margin-bottom: 0px;
}
.site-main .campaigns .latest-button a{
    border: 2px solid #538bc0;
    color: #538bc0;
}
.site-main .campaigns .latest-button a:hover{
    background-color: #538bc0;
}
.page-title.background-page{
    background-image: none;
    /*margin: 30px 0;*/
}
.page-title.background-blog {
    background-image: none;
    margin: 30px 0;
}
.page-title.background-campaign {
    background-image: none;
    margin: 30px 0;
}
.page-title.background-cart {
    background-image: none;
    margin: 30px 0;
}
/*==========================================================
	8. BLOGS
==========================================================*/

.post-meta li:hover a{
    color: #538bc0;
}

.page-navigation span{
    background-color: #f5832d;
 }

.widget li:hover a{
    color: #538bc0;
}

/*==========================================================
	9. BLOG-DETAILS
==========================================================*/

.entry-content ul.post-meta li:hover a{
    color: #538bc0;
}

.entry-footer .tags-links a:hover{
    color: #538bc0;
}

.main-404 .button .btn-secondary{
    color: #538bc0;
    border-color: #254671;
}

/*==========================================================
	11. ABOUT US
==========================================================*/

.team-info .socials li a:hover{
    color: #f5832d;
}

.create-account .checkbox{
   
    background-color: #538bc0;
   
}

/*==========================================================
	13. LOGIN
==========================================================*/

.form-login .btn-primary {
    float: inherit;
}

/*==========================================================
	14.SHOP CART
==========================================================*/
.payment .payment-check::before {
    background-color: #538bc0;
}

.payment input[type=radio]:checked ~ .payment-check {
    border: 2px solid #538bc0;
}

.widget-share li:hover a{
    background-color: #538bc0;
}


/*height for input causing problems with updated styles*/
/*select,.field input{
    height: 35px;
}*/

.field-select:after{
    line-height: 38px;
}

/*==========================================================
	16. COMING SOON
==========================================================*/

.campaign-detail .button .btn-secondary{
    border-color: #538bc0;
    color: #538bc0;
}
.campaign-detail .button .btn-secondary:hover{
    background-color: #254671;
    border-color: #254671;
}

.campaign-slider .owl-controls .owl-buttons .owl-next,
.campaign-slider .owl-controls .owl-buttons .owl-prev,
.shop-slider .owl-controls .owl-buttons .owl-next,
.shop-slider .owl-controls .owl-buttons .owl-prev{   
    border: 1px solid #538bc0;
    color: #538bc0;
}

.campaign-slider .owl-controls .owl-buttons .owl-next:hover,
.campaign-slider .owl-controls .owl-buttons .owl-prev:hover,
.shop-slider .owl-controls .owl-buttons .owl-next:hover,
.shop-slider .owl-controls .owl-buttons .owl-prev:hover{
    background-color: #538bc0;
}

.campaign-history .tabs-controls li.active {
    border-bottom: 1px solid #0b1828;
    color: #0b1828;
}

.support-campaign h3:after{
    background-color: #538bc0;
    width: 100%;
}



#updates li:hover:before{
    background-color: #538bc0;
}

/*==========================================================
	17. CAMPAIGN DETAIL
==========================================================*/
.campaign-detail .share li a{
    display: inline-block;
}
#donors table{
    width: 100%;
}
#donors table tr th, #donors table tr td{
    border: 1px solid #ededed;
    padding: 15px;
}
.campaign-detail .campaign-box h3{
    margin-bottom: 5px !important;
    font-size: 32px;
    height: initial !important;
}
.campaign-detail .campaign-box h5 {
    margin-bottom: 22px !important;
    font-weight: normal;
}

.support-campaign .plan{
    border: 0;
    border-radius: 2px;
    margin-bottom: 20px;
}
.support-campaign .plan div.plan-container{
    display: block;
    background-color: #f5f6f6;
    padding: 40px 25px;
}
.support-campaign .plan div.plan-container:focus{
    background-color: #73b941;
    color: #fff;
}
.support-campaign .plan div.plan-container:focus:hover{
    color: #fff;
}
.support-campaign .plan div.plan-container:focus h4{
    color: #fff;
}
.support-campaign .plan div.plan-container:hover{
    color: #555555;
}
.support-campaign .plan h4{
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 5px;
}
.support-campaign .plan .plan-desc{
    margin-bottom: 16px;
}
.support-campaign .plan .backer{
    margin-top: 18px;
    font-weight: 500;
}
.support-campaign select{
    height: 35px;
}
.campaign-detail .campaign-author .author-address span{
    margin-right: 10px;
}
.campaign-detail .campaign-author .author-address span.edit-icon {
    margin-right: 0;
}
.campaign-detail .share li.share-instagram:hover i {
    color: #fff;
}
.campaign-detail .share li.share-instagram i {
    color: #458eff;
}
.campaign-detail .share li.share-instagram:hover a {
    background-color: #458eff;
}

/*==========================================================
	18. HOME V2
==========================================================*/
.how-it-work{
    padding: 60px 0;
    background-color: #f5f6f6;
    margin-top: 60px;
}

.featured-projects {
    padding: 60px 0;
    background-color: #f5f6f6;
    margin-top: 0px;
    margin-bottom: 0px;
}

.featured-projects .title {
    
    margin-bottom: 21px;
}

.latest{
    margin-bottom: 60px;
}
.campaign{
    padding-top: 60px;
}
.story{
    margin-bottom: 60px;
}
.section{
    padding-top: 60px;
}

.item-work .item-icon {
    float: left;
    height: 64px;
    width: 64px;
    display: block;
    text-align: center;
    border: 2px solid #f5832d;
    border-radius: 50%;
    line-height: 60px;
    font-size: 18px;
    color: #f5832d;
    position: relative;
}

#respond button{
    background-color: #538bc0;
}

.campaign-tabs .button.is-checked{
    color: #f5832d;
    border-bottom: 2px solid #f5832d;
}

.story-item .story-thumb h3 a:hover,.story-info .author-name:hover{
    color: #f5832d;
}

.story-slider .owl-controls .owl-dot.active span{
    background-color: #f5832d;
}
.story-slider .owl-controls .owl-dot span{
    border: 2px solid #f5832d;
}
/*==========================================================
	19. EXPLORE LAYOUT ONE
==========================================================*/

.campaigns-action .sort li.active a{
    border-bottom: 2px solid #f5832d;
    color: #f5832d;
}

/*==========================================================
	20. FAQ
==========================================================*/

.list-faq li span{
    color: #f5832d;
}

.account-bar li.active a {
    background-color: #3787d3;
}

.my-campaigns .campaign-category a:hover{
    color: #538bc0;
}

.dashboard .payment-info p a:hover{
    color: #538bc0;
}

/*==========================================================
	21. ACCOUNT
==========================================================*/

.profile .author-avatar img {
    /*width: 120px;
    height: 120px;
    border-radius: 50%;*/
    object-fit: cover;
    background-color: #ffffff;
}

/*==========================================================
	99. Custom Toggle Button Group (not custom, it's actually from Bootstrap 4 :)
==========================================================*/
.btn-group,
.btn-group-vertical {
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  vertical-align: middle;
}

.btn-group > .btn,
.btn-group-vertical > .btn {
  position: relative;
  -webkit-box-flex: 0;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
    margin-right: 0 !important;
    display: inline-block;
}

.btn-group > .btn:hover,
.btn-group-vertical > .btn:hover {
  z-index: 1;
}

.btn-group > .btn:focus, .btn-group > .btn:active, .btn-group > .btn.active,
.btn-group-vertical > .btn:focus,
.btn-group-vertical > .btn:active,
.btn-group-vertical > .btn.active {
  z-index: 1;
}

.btn-group .btn + .btn,
.btn-group .btn + .btn-group,
.btn-group .btn-group + .btn,
.btn-group .btn-group + .btn-group,
.btn-group-vertical .btn + .btn,
.btn-group-vertical .btn + .btn-group,
.btn-group-vertical .btn-group + .btn,
.btn-group-vertical .btn-group + .btn-group {
  margin-left: -1px;
}

.btn-toolbar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

.btn-toolbar .input-group {
  width: auto;
}

.btn-group > .btn:first-child {
  margin-left: 0;
}

.btn-group > .btn:not(:last-child):not(.dropdown-toggle),
.btn-group > .btn-group:not(:last-child) > .btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.btn-group > .btn:not(:first-child),
.btn-group > .btn-group:not(:first-child) > .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.dropdown-toggle-split {
  padding-right: 0.5625rem;
  padding-left: 0.5625rem;
}

.dropdown-toggle-split::after {
  margin-left: 0;
}

.btn-sm + .dropdown-toggle-split, .btn-group-sm > .btn + .dropdown-toggle-split {
  padding-right: 0.375rem;
  padding-left: 0.375rem;
}

.btn-lg + .dropdown-toggle-split, .btn-group-lg > .btn + .dropdown-toggle-split {
  padding-right: 0.75rem;
  padding-left: 0.75rem;
}

.btn-group-vertical {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.btn-group-vertical .btn,
.btn-group-vertical .btn-group {
  width: 100%;
}

.btn-group-vertical > .btn + .btn,
.btn-group-vertical > .btn + .btn-group,
.btn-group-vertical > .btn-group + .btn,
.btn-group-vertical > .btn-group + .btn-group {
  margin-top: -1px;
  margin-left: 0;
}

.btn-group-vertical > .btn:not(:last-child):not(.dropdown-toggle),
.btn-group-vertical > .btn-group:not(:last-child) > .btn {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.btn-group-vertical > .btn:not(:first-child),
.btn-group-vertical > .btn-group:not(:first-child) > .btn {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.btn-group-toggle > .btn,
.btn-group-toggle > .btn-group > .btn {
  margin-bottom: 0;
}

.btn-group-toggle > .btn,
.btn-group-toggle > .btn-group > .btn {
    margin-bottom: 0;
}

.btn-group-toggle > .btn input[type="radio"],
.btn-group-toggle > .btn input[type="checkbox"],
.btn-group-toggle > .btn-group > .btn input[type="radio"],
.btn-group-toggle > .btn-group > .btn input[type="checkbox"] {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    pointer-events: none;
}
.btn-group-justified {
    display: table;
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
}
.btn-group, .btn-group-vertical {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

/* Main Page Carousel */
/*We only want margin if bigger then small height(767)*/
@media screen and (min-width: 992px) {
    .site-main div.sideshow {
        margin: 0 8%;        
    }
    .padding-left {
        padding-left: 50px;
    }
}
@media screen and (max-width: 576px) {
    .center-mobile{
        text-align: center;
    }
    .left-0 {
        left: 0;
    }
    .right-0 {
        right: 0;
        padding: 0 15px !important;
    }
    .min-height-42 {
        min-height: 42px;
    }
    .sideshow-content {
        top: unset !important;
        transform: none !important;
        bottom: 5% !important;
    }
    .site-main .sideshow:before {
        background-image: linear-gradient(to top, #0b1828, rgba(11, 24, 40, 0)) !important;
    }
    .font-size-15 {
        font-size: 15px !important;
    }
}
.btn.btn-primary.btn-primary-text-center {
    line-height: 47px;
    width: 133px;
}
.site-main .sideshow {
    background-position: 100% 0%;
}
.site-main .sideshow {
    margin: 0;
    height: 450px;
    position: relative;
}
.site-main .sideshow:before {
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;
    background-image: linear-gradient(to right, #0b1828, rgba(11, 24, 40, 0));
}
#featured-carousel {
    background-color: #f5f6f6;
    padding: 60px 0;
}
.carousel-control-next,
.carousel-control-prev {
    width: 65px;
    z-index: 999;
    background-color: #0b1828;
    opacity: 1;
    top: 60px;
    bottom: 60px;
}
.carousel-control-next {
    border-radius: 3px 0 0 3px;
}
.carousel-control-prev {
    border-radius: 0 3px 3px 0;
}
a.carousel-control-next:focus,
a.carousel-control-prev:focus {
    background-color: #0b1828;
    opacity: 1;
}
a.carousel-control-next:hover,
a.carousel-control-prev:hover {
    background-color: #0b1828;
    opacity: 1;
}
.carousel-indicators li {
    background-color: #000;
}
.carousel-indicators .active {
    background-color: #ccc;
}
.carousel-inner .sideshow .btn-primary {
    z-index: 1000;
    position: relative;
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-image: none;
    color: #fff;
    font-size: 50px;
}
.carousel-inner .process .process-info div.row {
    display: flex;
}

.carousel-indicators li {
    width: 32px;
    height: 8px;
    border-radius: 10px;
    background-color: #c3ccd6;
}

.carousel-indicators li.active {
    width: 64px;
    height: 8px;
    border-radius: 10px;
    background-color: #0b1828;
}

.carousel-indicators {
    bottom: 25px;
}
.carousel-control-next-icon, 
.carousel-control-prev-icon {
    height: auto;
}

.hit-categories {
    padding: 30px 0;
}
.page-title .breadcrumbs li,
.page-title .breadcrumbs li a {
    color: #538bc0;
}
    .page-title .breadcrumbs li:last-child,
    .page-title .breadcrumbs li:last-child a {
        color: #0b1828;
    }
.page-title:before {
    background: rgba(255,255,255,0.0);
}
.page-title {
    min-height: 80px;
}
header.site-header {
    border-bottom: 1px solid #538bc0;
}

.item-work .item-content .item-desc {
    max-height: 100px;
}

.story-info .story-desc {
    max-height: 210px;
    min-height: 210px;
}
.story-item .story-thumb h3 {
    color: #fff;
}

/* Share Icons */
.campaign-detail .share {
    margin-top: 0px;
    float: right;
    margin-bottom: 10px;
}
.share label {
    color: rgba(11, 24, 40, 0.76);
}
.fb-container {
    display: inline-block;
    max-height: 28px;
}
.fb_iframe_widget span 
{
    vertical-align: baseline !important;
}

.twitter-container {
    display: inline-block;
    max-height: 28px;
    /*position: relative;
    top: 6px;*/
}
.email-main-container {
    display: inline-block;
    position: relative;
    width: 74px;
    min-height: 28px;
}
.email-container {
    display: inline-block;
    max-height: 28px;
    /*position: relative;
    top: -4px;*/
    background-color: #666;
    color: #fff;
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 3px;
    position: absolute;
    top: 0;
    width: 74px;
}
a.email-container:visited {
    color: white;
}
.email-container:hover {
    background-color: #3e3e3e;
    color: #fff;
}
.email-container span {
    padding-left: 5px;
}
@media (max-width: 767px) {
    .campaign-detail .share {
        margin-top: 10px;
        float: none;
    }
}
/* Share Icons */

.breadcrumbs {
    margin-bottom: 1.5rem !important;
}
/*start designer style overrides*/


/*clear heights*/
body {
    font-family: Asap;
    font-size: 16px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.55;
    letter-spacing: normal;
    color: #0b1828;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    clear: both;
    font-family: Asap;
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #0b1828;
}

.page-title h1,
h1 {
    font-size: 48px;
}
.billing-detail h2,
h2 {
    font-size: 40px;
}
.account-content h3.account-title,
.author .author-content h3, .profile .author-content h3,
h3 {
    font-size: 32px;
}
h4 {
    font-size: 24px;
}
h5 {
    font-size: 20px;
}
h6 {
    font-size: 18px;
}
.text-center {
    text-align: center;
}
.main-menu ul {
    border-top: 0px;
}
.login .main-menu li {
    margin-right: 15px;
}
.campaign-box {
    background-color: #fff;
}
.campaign-detail .campaign-box a.category {
    font-size: 16px;
}
.campaign-box a.category {
    font-size: 16px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.55;
    letter-spacing: normal;
    color: #3787d3;
}
    .campaign-box a.category:hover {
        color: #f3833a;
    }
    .campaign-box a.category:visited {
        /*color: #3787d3;*/
    }
.campaign-box h5 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /*font-weight: bold;*/
    /* hd. feedback style has font-weight: 500 */
}
    /*.campaign-box h5 a {
        color: #0b1828;
    }*/
.campaign-box .campaign-description {
    margin-top: 13px;
    line-height: 1.55;
    letter-spacing: normal;
    min-height: 47px;
}
.campaign-box span.author-name {
    line-height: 1.55;
    letter-spacing: normal;
    /*color: #3787d3;*/
}
.campaign-content .campaign-box .process .campaign-info div.campaign-info-wrapper {
    font-size: 16px;
    letter-spacing: normal;
    color: #0b1828;
}
.campaign-content .campaign-box .process .campaign-info div.campaign-info-wrapper span {
    display: block;
    /*font-weight: bold;*/
    font-size: 18px;
}
    .campaign-content .campaign-box .process .campaign-info div.campaign-info-wrapper span.campaign-info-label {
        font-size: 16px;
    }
.category-box {
    border: 1px solid #c3ccd6;
    border-radius: 3px;
    padding: 25px 0;
}

.category-box {
    /* First we need to help some browsers along for this to work.
     Just because a vendor prefix is there, doesn't mean it will
     work in a browser made by that vendor either, it's just for
     future-proofing purposes I guess. */
    -o-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    /* ...and now for the proper property */
    transition: all 0.5s;
}

.category-box:hover {
    box-shadow: 0px 0px 8px 3px rgba(0,0,0,0.1);
}



    .category-box:hover h4:after {
        content: '  \003e';
    }

   

@media (min-width: 990px) and (max-width: 1200px) {
    .category-box h4 {
        font-size: 20px;
    }
}
@media (min-width: 768px) and (max-width: 990px) {
    .category-box h4 {
        font-size: 15px;
    }
    .category-box {
        padding: 10px 0;
    }
}
@media (max-width: 768px) {
    .category-box {
        padding: 10px 0;
    }
}


/*links*/

a {
    color: #3787d3;
}
a:visited {
    /*color: #807fbb;*/
}
a:hover {
    color: #f3833a;
}

    
/*links*/

/* buttons*/
.btn {
    /*min-width: 133px;*/
    min-height: 48px;
    box-shadow: 0 2px 8px 0 rgba(0, 12, 23, 0.5);
    text-align: center;
}
.btn-primary {
    color: #ffffff !important;
    background-color: #3787d3;
}
    .btn-primary:hover {
        color: #ffffff;
        background-color: #4B93D7;
        box-shadow: 0 4px 10px 0 rgba(0, 12, 23, 0.4);
    }
    .btn-primary:active {
        color: #ffffff;
        background-color: #558cbe;
    }

.btn-link {
    color: #3787d3;
    cursor: pointer;
}
    .btn-link:hover {
        color: #f3833a;
    }
@media (max-width: 360px) {
    .btn-primary {
        line-height: 47px;
    }
}
.site-header .login .btn-primary {
    line-height: 46px;
}

/* buttons*/



/*inputs*/
input[type=text],
input[type=email],
input[type=password],
input[type=number],
input[type=search],
input[type=url],
input[type=tel],
textarea {
    border-radius: 3px;
    border: 1px solid #cecece;
}

    input[type=text]:focus,
    input[type=email]:focus,
    input[type=password]:focus,
    input[type=number]:focus,
    input[type=search]:focus,
    input[type=checkbox]:focus,
    input[type=url]:focus,
    input[type=tel]:focus,
    textarea:focus {
        border-color: #3787d3;
    }

input[type="checkbox"] {
    
    border: 1px solid #cecece;
    border-radius: 3px;
}
/*inputs*/

/*text colors*/
.text-bluish {
    color: #3787d3;
}

.text-dusty-orange {
    color: #f3833a !important;
}

.text-dark-blue-grey {
    color: #0b1828;
}

.text-cloudy-blue {
    color: #c3ccd6;
}

.text-pale-grey {
    color: #f1f4f7;
}
.text-black {
    color: black;
}
.title {
    font-family: Asap;

    font-size: 40px;

    font-weight: 500;

    font-style: normal;

    font-stretch: normal;

    line-height: normal;

    letter-spacing: normal;

    color: #0b1828;
}
.campaign-tabs button.campaign-button {
    color: #3787d3;
}
.campaign-tabs button.is-checked {
    color: #0b1828;
}
.campaign-tabs .button.is-checked {
    color: #0b1828;
    border-bottom: 2px solid #0b1828;
}
.item-work .item-icon {
    background-color: #f1f4f7;
    border: 0px;
}
.item-work .item-icon img {
    max-width: 50px;
}
.story-item .story-info {
    background-color: #f5f6f6;
}
.story-item .story-info img {
    border: 3px solid #fff;
}
.story .section {
    padding-top: 0px;
}
.story .description {
    padding: 0 20%;
    margin-bottom: 10px;
}
.campaign .description {
    padding: 0 20%;
    margin-bottom: 10px;
}
.statics-content .statics-item {
    background-color: #ffffff;
}
.statics-content .statics-item hr {
    width: 112px;
    height: 2px;
    border-radius: 10px;
    background-color: #c4c4c4;
}
.story-info .author-name {
    font-size: 16px;
    /*color: #3787d3;*/
}
    .story-item .story-thumb h3 a:hover, .story-info .author-name:hover {
        /*color: #3787d3;*/
        color: inherit;
    }
    .story-info .author-avatar {
        margin-bottom: 10px;
    }

.item-work .item-content {
    margin-left: 45px;
}

/*Backgrounds*/

.blue-background {
    background-color: #f1f4f7;
}

.white-background {
    background-color: white;
    padding: 30px;
}

.top-margin-20-always {
    margin-top: 20px;
}

.campaign-detail .campaign-image {
    padding-right: 0px;
}
.campaign-detail .campaign-author {
    margin-top: 5px;
}
.campaign-history {
    margin-top: 35px;
}
.campaign-history .tabs-controls {
    border-bottom: 0px;
}
    .campaign-history .tabs-controls li {
        width: 15%;
        color: #3787d3;
        cursor: pointer;
        text-align: center;
    }
.campaign-history .tabs-controls li.active {
    color: #0b1828;
}
@media screen and (max-width: 760px) {
    .campaign-history .tabs-controls li {
        width: 20%;
    }
}
@media screen and (max-width: 580px) {
    .campaign-history .tabs-controls li {
        width: 20%;
    }
}
@media screen and (max-width: 440px) {
    .campaign-history .tabs-controls li {
        width: 40%;
    }
}
.campaign-box .campaign-author .author-name {
    /*color: #3787d3;*/

}
.campaign-box .campaign-author .author-address {
    color: rgba(11, 24, 40, 0.76);
}
.campaign-detail .process-info span {
    font-size: 24px !important;
    color: #0b1828;
}
@media screen and (max-width: 400px) {
    .campaign-detail .process-info span {
        font-size: 20px !important;
    }
}
.support-campaign .plan a {
    color: #0b1828;
}
    .support-campaign .plan a:hover {
        box-shadow: 0px 0px 8px 3px rgba(0,0,0,0.1);
    }
        .support-campaign .plan a:hover h4:after {
            content: '  \00bb';
        }
    .support-campaign .plan a.plan-item:focus {
        background-color: #e0e0e0;
        color: #0b1828;
    }
        .support-campaign .plan a.plan-item:focus h4 {
            color: #0b1828;
        }
.support-campaign .plan a.plan-item:focus div {
    color: #0b1828;
}

/*Login Page*/

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

.margin-20 {
    margin: 20px;
    text-align: center;
}

.underlined {
    text-decoration: underline;
}

.text-wrap {
    text-wrap: normal;
}
@media screen and (min-width: 576px){
    .min-width{
        min-width: 380px;
    }
}
@media screen and (max-width: 576px){
    .max-width{
        max-width: 380px;
    }
}
/*Join Page*/
.margin-35 {
    margin: 35px;
    text-align: center;
}

.top-margin-40-always {
    margin-top: 40px;
}

.generic-padding {
    margin: 0px 0px 15px 0px;
}

.padding-right-0 {
    padding-right: 0;
}

#margin-0 {
    margin: 0;
}

.inline-display {
    display: inline;
    margin-bottom: 20px;
}

.margin-bottom-20 {
    margin-bottom: 20px;
}
.cursor:hover{
    cursor: pointer;
}
/*How it Works*/
.padding-top-40{
    padding-top:60px;
}
.project-boxes {
    padding: 30px 30px 30px 30px;
    border: solid 1px #dcd3d3;
    border-radius: .2em;
    height: 100%;
}
.p-rl-10{
    padding-right: 10px;
    padding-left:  10px;
}
.p-t-20{
    padding-top: 20px;
}
.p-tb-20 {
    padding-top: 20px;
    padding-bottom: 20px;
}
.w-80{
    width: 100%;
    margin-bottom:20px;
}
.block{
    display:block;
}
.center {
    margin: 0 auto;
}
/* menu */

@media screen and (min-width: 992px)and (max-width: 1200px) {
    .main-menu ul li > .button-sub-menu {
        left: -80px;
    }
}
    .main-menu ul li i {
        display: inline-block;
    }
    
.site-header .search-icon {
    border: 1px solid #c3ccd6;
    border-radius: 50%;
    height: 50px;
    width: 50px;
    position: relative;
    top: 14px;
    left: -20px;
}

        .site-header .search-icon a {
            position: relative;
            padding: 17px;
            margin-top: 12px;
            margin-right: 3px;
            top: -25px;
            color: #0b1828;
        }
.site-header .search-icon-offscreen {
    border: 0px;
    height: 0px;
    width: 0px;
    position: absolute !important;
    top: -500px !important;
    left: 99999999999999px !important;
}
    .margin-left-8 {
        margin-left: 8px;
    }

    @media screen and (max-width: 992px) {
        .site-header .search-icon {
            top: 0;
            left: 0;
        }
        .search-icon form {
            margin: 0 10px;
        }
    }

    @media screen and (min-width: 1024px) and (max-width: 1280px) {
        /*.site-header .login-button a.control-button:before {
        content: "\f007";
        font-size: 16px;
        font-family: FontAwesome;
        padding-right: 7px;
    }*/
    }

    .m-r-10 {
        margin-right: 10px;
    }

    .m-r-5 {
        margin-right: 5px;
    }

    .m-r-15 {
        margin-right: 15px;
    }

    .m-t-15-i {
        margin-top: 15px !important;
    }

    .round-border {
        border: solid 1px #ccc;
        border-radius: 50%;
        padding: 5px 8px;
    }

    @media screen and (max-width: 767px) {
        .site-header .search-icon {
            border: 0;
        }
    }

    .m-l-5 {
        margin-left: 5px;
    }

    .padding-20 {
        padding: 20px;
    }

    .border-blue {
        border: 3px solid #3787d3;
        border-radius: 1%;
    }

    .blue-button-background {
        background-color: #3787d3;
        padding: 6px 20px;
        border: 3px solid #e1e1e1;
        border-radius: 2%;
        text-align: center;
    }

    .white {
        color: white;
    }

    .bq-background {
        background-image: url("../images/dynamic-page-pictures/quotes.gif");
        background-repeat: no-repeat;
        padding-left: 30px;
        background-position: left 5px;
    }

    .bq-background-right {
        background-image: url("../images/dynamic-page-pictures/quotes_right.png");
        background-repeat: no-repeat;
        padding-right: 30px;
        background-position: bottom right;
        display: block;
    }

    li div.slide {
        display: none;
    }

    a.btn.btn-primary.btn-back {
        border-radius: 15px;
        height: 30px;
        min-height: 30px;
        line-height: 30px;
    }

    .no-list-style {
        margin-left: 25px;
        list-style: none;
    }

    @media screen and (max-width: 767px) {
        .sm-scale {
            width: 100% !important;
        }

        .margin-scale {
            margin-left: 0;
        }
    }

    @media screen and (min-width: 767px) {
        .sm-scale {
            margin-left: 1em;
        }

        .w-30 {
            width: 40%;
        }
    }

    @media screen and (max-width: 360px) {
        .btn-primary.line-height-middle {
            line-height: 46px;
        }
    }

    /*fix duplicate sort icons in datatables*/
div.dataTables_scrollBody table thead .sorting:before,
div.dataTables_scrollBody table thead .sorting_asc:before,
div.dataTables_scrollBody table thead .sorting_desc:before {
    display: none;
}

/*background colour for stats section of homepage*/
.story-last {
    background-color: #f5f6f6;
    margin-bottom: 0;
    padding-bottom: 60px;
    padding-top: 60px;
}
span.padding-r-and-l {
    padding-left: 7px;
}
.email-container.email-org {
    padding: 5px 10px;
}

.email-container.email-project {
    padding: 5px 10px;
}

.email-container.email-fundraiser {
    padding: 5px 10px;
}
.button-invite {
    margin-top: 1px;
}

div.datatable-wide .container-fluid  {
    padding-left: 0;
    padding-right: 0;
}

/* Donor profile/ Administration */
@media (min-width: 768px) {
    .account-wrapper { padding-top: 50px; }
}
        .account-wrapper div.profile {
            background-color: #fff;
            color: #0b1828;
        }

            .account-wrapper div.profile .account-title {
                color: #0b1828;
                font-weight: 500;
                font-size: 20px;
                border-bottom: 2px solid #f1f4f7;
                background-color: #fff;
            }

    .profile-box li strong {
        font-size: 16px;
    }

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

    .truncate {
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }


.account-bar li a:hover {
    /*background-color: #73b941;
    color: #fff;
    border-radius: 3px 3px 3px 3px;
    -moz-border-radius: 3px 3px 3px 3px;
    -webkit-border-radius: 3px 3px 3px 3px;*/
}

.nav-content-small {
    /*color: #0b1828;
    font-weight: 500;
    font-size: 20px;*/
    /*border: 2px solid #ffffff;*/
    background-color: #f1f4f7;
    padding: 10px 3px;
    /*border-radius: 3px 3px 3px 3px;
    -moz-border-radius: 3px 3px 3px 3px;
    -webkit-border-radius: 3px 3px 3px 3px;*/
}

.campaign-box .campaign-author a {
    display: inline;
}

.footer-menu .footer-menu-item li {
    margin-bottom: 8px;
}

.white-link {
    color: #ffffff;
}

.campaign-box .author-icon img {
    image-rendering: -webkit-optimize-contrast;
    height: auto;
    width: auto;
    max-height: 35px;
    max-width: 35px;
    border-radius: 0px;
}
.author-icon,
.campaign-box .campaign-author a.author-icon {
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    overflow: hidden;
    text-align: center;
    border: 1px solid #ccc;
}