/* Volunteer Multipurpose HTML5 Donation Template */


/************ TABLE OF CONTENTS ***************
1.  Fonts
2.  Reset
3.  Global
4.  Main Header
5.  Main Slider / Revolution / Parallax / Static / Background-Video
6.  Tri-Column Fluid
7.  Two Column
8.  Layout Images
9.  Recent Work / Sidebar Navigation
10. Current Projects
11. Parallax Section
12. Our Team
13. Our Programs
14. Footer
15. Fact Counter
16. Contact Us Section
17. Map Section
18. Main Footer
19. Jquery Countdown
20. Help Us
21. Blog Posts
22. About Us / Services
23. Two Column Fluid
24. Our Experience
25. Featured project
26. Sidebar Page
27. Blog Sction / Details
28. Sidebar


**********************************************/

@import url('fonts.css');
@import url('font-awesome.css');
@import url('flaticon.css');
@import url('animate.css');
@import url('hover.css');
/*@import url('owl.css');*/
@import url('scrollbar.css');
@import url('jquery.fancybox.css');

/*** 

====================================================================
	Reset
====================================================================

 ***/
* {
    margin: 0px;
    padding: 0px;
    border: none;
    outline: none;
}

button {
    outline: none !important;
}

/*** 

====================================================================
    Variables 
====================================================================

 ***/

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');





.container {
    position: relative;
    padding-top: 20px;
}

.containerClub {
    position: relative;
    padding-top: 10px;
    margin-left: 5px;
}

    .containerClub .card {
        position: relative;
        width: 320px;
        height: 450px;
        background: #007975;
        border-radius: 20px;
        overflow: hidden;
    }

        .containerClub .card:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #A8E7AA;
            clip-path: circle(150px at 80% 20%);
            transition: 0.5s ease-in-out;
        }

        .containerClub .card:hover:before {
            clip-path: circle(300px at 80% -20%);
        }

        .containerClub .card:after {
            content: '';
            position: absolute;
            top: 30%;
            left: -20%;
            font-size: 12em;
            font-weight: 800;
            font-style: italic;
            color: rgba(255,255,25,0.05)
        }

        .containerClub .card .imgBx {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 10000;
            width: 100%;
            height: 220px;
            transition: 0.5s;
        }

        .containerClub .card:hover .imgBx {
            top: 0%;
            transform: translateY(0%);
        }

        .containerClub .card .imgBx img {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) rotate(0deg);
            width: 270px;
        }

        .containerClub .card .contentBx {
            position: absolute;
            bottom: -13px;
            width: 100%;
            height: 100px;
            text-align: center;
            transition: 1s;
            z-index: 15;
        }

        .containerClub .card:hover .contentBx {
            height: 210px;
        }

        .containerClub .card .contentBx h2 {
            position: relative;
            font-weight: 600;
            letter-spacing: 1px;
            color: #fff;
            margin: 0;
        }

        .containerClub .card .contentBx .size, .containerClub .card .contentBx .color {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 8px 20px;
            transition: 0.5s;
            opacity: 0;
            visibility: hidden;
            padding-top: 0;
            padding-bottom: 0;
        }

        .containerClub .card:hover .contentBx .size {
            opacity: 1;
            visibility: visible;
            transition-delay: 0.5s;
        }

        .containerClub .card:hover .contentBx .color {
            opacity: 1;
            visibility: visible;
            transition-delay: 0.6s;
        }

        .containerClub .card .contentBx .size h3, .containerClub .card .contentBx .color h3 {
            color: #fff;
            font-weight: 300;
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-right: 10px;
        }

        .containerClub .card .contentBx .size span {
            width: 26px;
            height: 26px;
            text-align: center;
            line-height: 26px;
            font-size: 14px;
            display: inline-block;
            color: #111;
            background: #fff;
            margin: 0 5px;
            transition: 0.5s;
            color: #111;
            border-radius: 4px;
            cursor: pointer;
        }

            .containerClub .card .contentBx .size span:hover {
                background: #9bdc28;
            }

        .containerClub .card .contentBx .color span {
            width: 20px;
            height: 20px;
            background: #ff0;
            border-radius: 50%;
            margin: 0 5px;
            cursor: pointer;
        }

            .containerClub .card .contentBx .color span:nth-child(2) {
                background: #9bdc28;
            }

            .containerClub .card .contentBx .color span:nth-child(3) {
                background: #03a9f4;
            }

            .containerClub .card .contentBx .color span:nth-child(4) {
                background: #e91e63;
            }

        .containerClub .card .contentBx a {
            display: inline-block;
            padding: 10px 20px;
            background: #A8E7AA;
            border-radius: 20px;
            margin-top: 0px;
            text-decoration: none;
            font-weight: 600;
            color: #111;
            opacity: 0;
            transform: translateY(50px);
            transition: 0.3s;
            margin-top: 20px;
        }

        .containerClub .card:hover .contentBx a {
            opacity: 1;
            transform: translateY(0px);
            transition-delay: 0.75s;
        }

.carousel-indicators {
    bottom: -50px;
    color: #9bdc28;
}

    .carousel-indicators li {
        box-sizing: content-box;
        -ms-flex: 0 1 auto;
        flex: 0 1 auto;
        width: 30px;
        height: 3px;
        margin-right: 3px;
        margin-left: 3px;
        text-indent: -999px;
        cursor: pointer;
        background-color: #9bdc28;
        background-clip: padding-box;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        opacity: .5;
        transition: opacity .6s ease;
    }

.arrow {
    border: solid black;
    border-width: 0 8px 8px 0;
    display: inline-block;
    padding: 8px;
}

    .arrow:hover {
        border: solid #9bdc28;
        border-width: 0 12px 12px 0;
        display: inline-block;
        padding: 10px;
        transition: 0.5s;
    }

.right {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

.left {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
}

.backgroundColorCarousel {
    /*    background-image: linear-gradient(green, yellow);*/
    margin-left: 29%;
    border-block: medium;
    border-radius: 5%;
    height: 50%;
    border-radius: 3rem;
}

.previousButton {
    text-decoration: none;
    display: inline-block;
    padding: 8px 16px;
    left: -13%;
    top: 150px;
    position: absolute;
}

    .previousButton:hover {
    }

.nextButton {
    text-decoration: none;
    display: inline-block;
    padding: 8px 16px;
    left: 105%;
    top: 150px;
    right: 15%;
    position: absolute;
}

.round {
    border-radius: 0;
}

.card-horizontal {
    display: flex;
    flex: 1 1 auto;
}

.card {
    /* Add shadows to create the "card" effect */

    padding: 10px 5px 5px 5px;
    transition: 0.3s;
}

    /* On mouse-over, add a deeper shadow */
    .card:hover {
        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
    }

/* Add some padding inside the card container */
.container {
    padding: 6px 16px;
}

.sportClubImg {
    position: relative;
    left: 40px;
    border-radius: 50%;
    margin: 0px;
    display: flex;
}

.informationSportClub {
    top: -5px;
    line-height: 0.4;
}

.supportButton {
    border-radius: 4px;
    background-color: #f4511e;
    border: none;
    color: #FFFFFF;
    text-align: center;
    font-size: 20px;
    padding: 10px;
    width: 160px;
    transition: all 0.5s;
    cursor: pointer;
}

    .supportButton span {
        cursor: pointer;
        display: inline-block;
        position: relative;
        transition: 0.5s;
    }

        .supportButton span:after {
            content: '\00bb';
            position: absolute;
            opacity: 0;
            top: 0;
            right: -20px;
            transition: 0.5s;
        }

    .supportButton:hover span {
        padding-right: 25px;
        opacity: 0.5;
    }

        .supportButton:hover span:after {
            opacity: 0.5;
            right: 0;
        }

    .supportButton:hover {
        opacity: 0.8;
        background-color: green;
    }

:root {
    --text-sm: .875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: ti1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;
    --title-gray: #404040;
    --title-gray-light: #525252;
    --accent-color: #F58220;
    --green-main: #008755;
    --green-main-subtle: rgba(0,135,85,0.5);
    --box-shadow-gray: rgba(0,0,0,0.08);
    --box-shadow-dark-gray: rgba(0,0,0,0.14);
    --box-shadow-1: 0 4px 6px 0 var(--box-shadow-gray);
    --box-shadow-1-hover: 0 2px 2px 0 var(--box-shadow-dark-gray);
    --box-shadow-3: 0 4px 6px 0 var(--accent-color:);
    --gradient-green: linear-gradient(270deg, #2CAB86 0%, #138560 100%);
    --gradient-orange: linear-gradient(141deg, #FAD961 0%, #F76B1C 100%);
}


/*
    Do not add the following fonts to fonts.css
*/

@font-face {
    font-family: "Aka-Acid-Gogoia";
    src: url("../fonts/ACGogoia.eot"); /* IE9 Compat Modes */
    src: url("../fonts/ACGogoia.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("../fonts/ACGogoia.otf") format("opentype"), /* Open Type Font */
    url("../fonts/ACGogoia.svg") format("svg"), /* Legacy iOS */
    url("../fonts/ACGogoia.ttf") format("truetype"), /* Safari, Android, iOS */
    url("../fonts/ACGogoia.woff") format("woff"), /* Modern Browsers */
    url("../fonts/ACGogoia.woff2") format("woff2"); /* Modern Browsers */
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Roboto";
    src: url("../fonts/Roboto-Regular.eot");
    src: url("../fonts/Roboto-Regular.eot?#iefix") format('embedded-opentype'), url("../fonts/Roboto-Regular.woff2") format('woff2'), url("../fonts/Roboto-Regular.woff") format('woff'), url("../fonts/Roboto-Regular.ttf") format('truetype');
    font-weight: 400;
    font-style: normal;
}



.akaAcidGogoiaFF {
    font-family: Aka-Acid-Gogoia;
}


/*** 

====================================================================
	Global Settings
====================================================================

 ***/

body {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    color: #3d3d3d;
    line-height: 2em;
    font-weight: 500;
    background: #ffffff;
}

a {
    text-decoration: none;
    cursor: pointer;
    color: black;
    color: var(--title-gray);
    transition: opacity 0.3s ease;
}


.active {
    font-weight: bolder;
}

.overflow-visible {
    overflow: visible !important;
}

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

h1, h2, h3, h4, h5, h6 {
    /*position:relative;*/
    font-family: 'Roboto Slab', serif;
    font-weight: normal;
    margin: 0px;
    background: none;
}

h1 {
    font-size: var(--text-3xl)
}

h2 {
    font-size: var(--text-2xl)
}

h3 {
    font-size: var(--text-xl)
}

/*input, button, select, textarea {
    font-family: 'Open Sans', sans-serif;
}*/

/*::-webkit-input-placeholder { color:rgba(0,0,0,0.80);}
::-moz-placeholder { color:rgba(0,0,0,0.80) ;}
:-ms-input-placeholder { color:rgba(0,0,0,0.80) ;}
input:-moz-placeholder { color:rgba(0,0,0,0.80) ;}*/

p {
    position: relative;
    line-height: 1.5em;
}

html, body {
    height: 100%;
}

.ie-wrapper {
    min-height: 100%;
    min-width: 100%;
    width: 100%;
    height: 100%;
    background-color: white;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    opacity: 0.95;
    display: none;
}

#ie-modal h4 {
    font-size: 26px;
    color: rgb(30,30,30);
}

#ie-modal p {
    font-size: 16px;
    text-align: center;
    line-height: 1.38;
}

#ie-modal h5 {
    font-size: 16px;
    text-align: center;
    line-height: 1.38;
}

#ie-modal a {
    color: #3a3a3a;
    text-decoration: underline;
}

#ie-modal .modal-dialog {
    top: 20%;
    font-family: OpenSans;
}

#ie-modal .modal-content {
    border: 6px solid #40bce5 !important;
    box-shadow: 0 8px 34px 0 rgba(0,0,0,0.2);
    background-image: url("assets/ie-black.png");
    background-size: 40%;
    background-repeat: no-repeat;
    background-position: center;
    padding: 20px;
    box-sizing: border-box;
}

.strike-through {
    text-decoration: line-through;
}


.auto-container {
    position: static;
    max-width: 1200px;
    padding: 0px 15px;
    margin: 0 auto;
}

.page-wrapper {
    position: relative;
    margin: 0 auto;
    width: 100%;
    min-width: 300px;
    min-height: 400px;
    overflow: hidden;
}

ul, li {
    list-style: none;
    padding: 0px;
    margin: 0px;
}

.theme-btn {
    transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
}

.center {
    text-align: center;
}

.anim-3, .anim-3-all * {
    transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -webkit-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
}

.anim-5, .anim-5-all * {
    transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
}

.anim-7, .anim-7-all * {
    transition: all 700ms ease;
    -moz-transition: all 700ms ease;
    -webkit-transition: all 700ms ease;
    -ms-transition: all 0700ms ease;
    -o-transition: all 700ms ease;
}

.theme-bg {
    background-color: #eb4534;
}

.theme-color {
    color: #eb4534;
}

.uppercase {
    text-transform: uppercase !important;
}

.capitalized {
    text-transform: capitalize !important;
}

.lowercase {
    text-transform: lowercase !important;
}

.no-uppercase {
    text-transform: none !important;
}

.light-btn {
    position: relative;
    display: inline-block;
    border: 2px solid #bd2c1e !important;
    background-color: rgba(255,255,255,0);
    color: #bd2c1e;
    font-size: 12px;
    line-height: 20px;
    padding: 4px 12px;
    text-transform: uppercase;
    font-weight: 600;
    font-family: 'Open Sans',sans-serif;
}

    .light-btn:hover {
        background-color: #bd2c1e;
        color: #ffffff !important;
    }

.favorite-btn {
    position: relative;
    display: inline-block;
    border: 1px solid #ee5f4a !important;
    background-color: rgba(255,255,255,0);
    color: #ee5f4a;
    font-size: 12px;
    line-height: 20px;
    padding: 4px 12px;
    text-transform: none;
    font-weight: 600;
    font-family: 'Open Sans',sans-serif;
}

    .favorite-btn:hover {
        background-color: #84b567;
        border: 1px solid #84b567 !important;
        color: #ffffff !important;
    }

.buy-btn {
    position: relative;
    cursor: pointer;
    display: inline-block;
    color: white !important;
    font-size: 18px;
    padding: 14px 22px;
    text-transform: uppercase;
    font-weight: 900;
    font-family: 'Open Sans',sans-serif;
    background-color: green;
    background-color: var(--green-main);
    border-radius: 44px;
    box-shadow: 0 4px 12px 0 var(--green-main-subtle);
    transition: box-shadow 0.4s ease;
}

    .buy-btn.disabled {
        background-color: #d0d0d0;
        border: 1px solid #d0d0d0 !important;
        box-shadow: none;
    }

    .buy-btn:hover {
        box-shadow: 0 2px 10px 0 rgba(0,0,0,0.30);
    }

    .buy-btn.disabled:hover {
        box-shadow: none;
    }

.dark-btn {
    position: relative;
    display: inline-block;
    border: 2px solid #bd2c1e !important;
    background-color: #bd2c1e;
    color: #ffffff;
    font-size: 12px;
    border-radius: 6px;
    line-height: 20px;
    padding: 4px 12px;
    text-transform: uppercase;
    font-weight: 600;
    font-family: 'Open Sans',sans-serif;
}

    .dark-btn:hover {
        background-color: #bd2c1e;
        color: #ffffff;
    }

.irecycle .dark-btn, .isuggest .dark-btn {
    border: none !important;
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#bd2c1e+0,eb4534+100 */
    background: #bd2c1e; /* Old browsers */
    background: -moz-linear-gradient(left, #bd2c1e 0%, #eb4534 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #bd2c1e 0%,#eb4534 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #bd2c1e 0%,#eb4534 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bd2c1e', endColorstr='#eb4534',GradientType=1 ); /* IE6-9 */
}

    .irecycle .dark-btn:hover {
        transform: scale(0.98);
    }

.irecycle, .isuggest {
    -webkit-box-shadow: 2px 10px 45px -17px rgba(0,0,0,0.42);
    -moz-box-shadow: 2px 10px 45px -17px rgba(0,0,0,0.42);
    box-shadow: 2px 10px 45px -17px rgba(0,0,0,0.42);
}

.isuggest {
    background-color: #3a3f46 !important;
}

.deals-icon img {
    margin-bottom: 5px;
    margin-right: 10px;
}

/*------*/

#btn-share-fb {
    display: inline-block;
    height: 31px;
    position: relative;
    top: -2px;
    left: 4px;
}

    #btn-share-fb:hover {
        cursor: pointer;
    }


.btn-style-one {
    position: relative;
    display: inline-block;
    padding: 6px 20px;
    line-height: 24px;
    border: 2px solid #ffffff;
    background: none;
    text-transform: uppercase;
    color: #ffffff;
    font-weight: 600;
    font-family: 'Open Sans',sans-serif;
}

.btn-style-two {
    position: relative;
    display: inline-block;
    padding: 6px 20px;
    line-height: 24px;
    border: 2px solid #2b2a32;
    background: #2b2a32;
    color: #ffffff;
    font-weight: 600;
    font-family: 'Open Sans',sans-serif;
}

    .btn-style-one:hover,
    .btn-style-two:hover {
        background-color: #eb4534;
        border-color: #2b2a32;
        color: #ffffff;
    }

.preloader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 999999;
    background-color: #ffffff;
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url(/images/icons/preloader.GIF);
}

.title-dot {
    display: inline-block;
    margin-right: 10px;
    width: 12px;
    height: 12px;
    border-radius: 100%;
}

.title-learn {
    background-color: orangered;
}

.title-fa-style {
    font-size: var(--text-2xl);
    color: var(--accent-color);
    display: inline-block;
    margin-right: 16px;
    position: relative;
    top: -4px;
}

.sec-title {
    position: relative;
    padding: 25px 0px 0px 0;
    margin-bottom: 8px;
    z-index:1;
}

    .sec-title h2 {
        font-size: 28px;
        font-size: var(--text-2xl);
        color: var(--title-gray);
        line-height: 40px;
        padding-bottom: 0px;
    }

    .sec-title h3 {
        font-size: 20px;
        color: #292929;
        line-height: 40px;
    }

    .sec-title strong {
        font-weight: 600;
    }

    .sec-title .link {
        position: relative;
        padding: 4px 14px;
        box-shadow: 0 4px 6px 0 rgba(0,0,0,0.08);
        box-shadow: var(--box-shadow-1);
        border-radius: 30px;
        transition: box-shadow 0.3s ease;
        background:#fff;
        z-index:1;
    }

.sec-title .link:hover {
    box-shadow: var(--box-shadow-1-hover);
}

.sec-title .link a {
    position: relative;
    display: inline-block;
    text-transform: uppercase;
    color: var(--accent-color);
    font-weight: 600;
    font-size: var(--text-sm);
}

.sec-title .link a .fa {
    position: relative;
    font-size: 14px;
    padding-right: 10px;
}

.sec-text {
    position: relative;
    margin-bottom: 30px;
}

.text-lg {
    font-size: 42px;
    line-height: 1em;
}

.expires {
    font-size: 14px;
    text-align: right;
    line-height: 1em;
    padding: 20px;
    text-align: center;
    background-image: url(../../Content/css/assets/brush-stroke.png);
    background-size: 110% 100%;
    background-position-y: 7px;
    background-position-x: -24px;
    background-repeat: no-repeat;
    color: white;
    font-weight: 900;
    text-shadow: 1px 1px 6px rgba(44,44,44,0.6);
}

    .expires span {
        font-size: 32px;
        display: block;
        text-shadow: 1px 4px 8px rgba(44,44,44,1);
        text-shadow: 1px 6px 12px rgba(44,44,44,0.5);
    }


.booking-details-tabbable .nav > li > a > .fa {
    margin-right: 5px;
    opacity: 0.6;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
    filter: alpha(opacity=60);
    font-size: 13px;
    position: relative;
    top: -1px;
}

.booking-details-tabbable .nav > li.active > a > .fa {
    opacity: 1;
    -ms-filter: none;
    filter: none;
}

.text-yellow {
    color: #ffc925;
}

.text-red {
    color: #bf271a;
}

.text-green {
    color: #57b22f;
}

.text-theme-clr {
    color: #eb4534;
}

.padd-top-20 {
    padding-top: 20px !important;
}

.padd-top-30 {
    padding-top: 30px !important;
}

.padd-top-40 {
    padding-top: 40px !important;
}

.padd-bott-20 {
    padding-bottom: 20px !important;
}

.padd-bott-30 {
    padding-bottom: 30px !important;
}

.padd-bott-40 {
    padding-bottom: 40px !important;
}

.no-padd-bottom {
    padding-bottom: 0px !important;
}

.no-padd-top {
    padding-top: 0px !important;
}

.no-margin-bottom {
    margin-bottom: 0px !important;
}

.no-margin-top {
    margin-bottom: 0px !important;
}

.booking-details-tabbable .nav > li > a > .fa {
    margin-right: 5px;
    opacity: 0.6;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
    filter: alpha(opacity=60);
    font-size: 13px;
    position: relative;
    top: -1px;
}

.booking-details-tabbable .nav > li.active > a > .fa {
    opacity: 1;
    -ms-filter: none;
    filter: none;
}

.fotorama__html,
.fotorama__stage__frame,
.fotorama__stage__shaft,
.fotorama__video iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}

.fotorama--fullscreen,
.fotorama__img {
    max-width: 99999px !important;
    max-height: 99999px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    -webkit-border-radius: 0 !important;
    border-radius: 0 !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.fotorama__wrap .fotorama__grab {
    cursor: grab;
}

.fotorama__grabbing * {
    cursor: grabbing;
}

.fotorama__img,
.fotorama__spinner {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
}

.fotorama__img {
    margin: -50% 0 0 -50%;
    width: 100%;
    height: 100%;
}

.fotorama__wrap--css3 .fotorama__arr,
.fotorama__wrap--css3 .fotorama__fullscreen-icon,
.fotorama__wrap--css3 .fotorama__nav__shaft,
.fotorama__wrap--css3 .fotorama__stage__shaft,
.fotorama__wrap--css3 .fotorama__thumb-border,
.fotorama__wrap--css3 .fotorama__video-close,
.fotorama__wrap--css3 .fotorama__video-play {
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.fotorama__caption,
.fotorama__nav:after,
.fotorama__nav:before,
.fotorama__stage:after,
.fotorama__stage:before,
.fotorama__wrap--css3 .fotorama__html,
.fotorama__wrap--css3 .fotorama__nav,
.fotorama__wrap--css3 .fotorama__spinner,
.fotorama__wrap--css3 .fotorama__stage,
.fotorama__wrap--css3 .fotorama__stage .fotorama__img,
.fotorama__wrap--css3 .fotorama__stage__frame {
    -webkit-transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -o-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}

.fotorama__wrap--video .fotorama__stage,
.fotorama__wrap--video .fotorama__stage__frame--video,
.fotorama__wrap--video .fotorama__stage__frame--video .fotorama__html,
.fotorama__wrap--video .fotorama__stage__frame--video .fotorama__img,
.fotorama__wrap--video .fotorama__stage__shaft {
    -webkit-transform: none !important;
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -o-transform: none !important;
    -ms-transform: none !important;
    transform: none !important;
}

.fotorama__wrap--css3 .fotorama__nav__shaft,
.fotorama__wrap--css3 .fotorama__stage__shaft,
.fotorama__wrap--css3 .fotorama__thumb-border {
    -webkit-transition-property: -webkit-transform;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    -ms-transition-property: -ms-transform;
    transition-property: transform;
    -webkit-transition-timing-function: cubic-bezier(0.1, 0, 0.25, 1);
    -webkit-transition-timing-function: cubic-bezier(0.1, 0, 0.25, 1);
    -moz-transition-timing-function: cubic-bezier(0.1, 0, 0.25, 1);
    -o-transition-timing-function: cubic-bezier(0.1, 0, 0.25, 1);
    -ms-transition-timing-function: cubic-bezier(0.1, 0, 0.25, 1);
    transition-timing-function: cubic-bezier(0.1, 0, 0.25, 1);
    -webkit-transition-duration: 0ms;
    -webkit-transition-duration: 0ms;
    -moz-transition-duration: 0ms;
    -o-transition-duration: 0ms;
    -ms-transition-duration: 0ms;
    transition-duration: 0ms;
}

.fotorama__arr,
.fotorama__fullscreen-icon,
.fotorama__no-select,
.fotorama__video-close,
.fotorama__video-play,
.fotorama__wrap {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.fotorama__select {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

.fotorama__nav,
.fotorama__nav__frame {
    margin: 0;
    padding: 0;
}

.fotorama__caption__wrap,
.fotorama__nav__frame,
.fotorama__nav__shaft {
    -moz-box-orient: vertical;
    display: inline-block;
    vertical-align: middle;
    *display: inline;
    *zoom: 1;
}

.fotorama__wrap * {
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

.fotorama__caption__wrap {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.fotorama--hidden,
.fotorama__load {
    position: absolute;
    left: -99999px;
    top: -99999px;
    z-index: -1;
}

.fotorama__arr,
.fotorama__fullscreen-icon,
.fotorama__nav,
.fotorama__nav__frame,
.fotorama__nav__shaft,
.fotorama__stage__frame,
.fotorama__stage__shaft,
.fotorama__video-close,
.fotorama__video-play {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

    .fotorama__arr:before,
    .fotorama__fullscreen-icon:before,
    .fotorama__video-close:before,
    .fotorama__video-play:before {
        font-family: 'FontAwesome';
    }

.fotorama__thumb {
    background-color: rgba(127,127,127,0.2);
}

.fotorama {
    min-width: 1px;
    overflow: hidden;
}

    .fotorama:not(.fotorama--unobtrusive) > :not(:first-child) {
        display: none;
    }

.fullscreen {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #000;
}

.fotorama--fullscreen {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    float: none !important;
    z-index: 2147483647 !important;
    background: #000;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
}

    .fotorama--fullscreen .fotorama__nav,
    .fotorama--fullscreen .fotorama__stage {
        background: #000;
    }

.fotorama__wrap {
    -webkit-text-size-adjust: 100%;
    position: relative;
    direction: ltr;
}

.fotorama__wrap--rtl .fotorama__stage__frame {
    direction: rtl;
}

.fotorama__nav,
.fotorama__stage {
    overflow: hidden;
    position: relative;
    max-width: 100%;
}

.fotorama__wrap--pan-y {
    -ms-touch-action: pan-y;
}

.fotorama__wrap .fotorama__pointer {
    cursor: pointer;
}

.fotorama__wrap--slide .fotorama__stage__frame {
    opacity: 1 !important;
    -ms-filter: none;
    filter: none;
}

.fotorama__stage__frame {
    overflow: hidden;
}

    .fotorama__stage__frame.fotorama__active {
        z-index: 8;
    }

.fotorama__wrap--fade .fotorama__stage__frame {
    display: none;
}

    .fotorama__wrap--fade .fotorama__fade-front,
    .fotorama__wrap--fade .fotorama__fade-rear,
    .fotorama__wrap--fade .fotorama__stage__frame.fotorama__active {
        display: block;
        left: 0;
        top: 0;
    }

.fotorama__wrap--fade .fotorama__fade-front {
    z-index: 8;
}

.fotorama__wrap--fade .fotorama__fade-rear {
    z-index: 7;
}

    .fotorama__wrap--fade .fotorama__fade-rear.fotorama__active {
        z-index: 9;
    }

.fotorama__wrap--fade .fotorama__stage .fotorama__shadow {
    display: none;
}

.fotorama__img {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    border: none !important;
}

.fotorama__error .fotorama__img,
.fotorama__loaded .fotorama__img {
    opacity: 1;
    -ms-filter: none;
    filter: none;
}

.fotorama--fullscreen .fotorama__loaded--full .fotorama__img,
.fotorama__img--full {
    display: none;
}

.fotorama--fullscreen .fotorama__loaded--full .fotorama__img--full {
    display: block;
}

.fotorama__wrap--only-active .fotorama__nav,
.fotorama__wrap--only-active .fotorama__stage {
    max-width: 99999px !important;
}

.fotorama__wrap--only-active .fotorama__stage__frame {
    visibility: hidden;
}

    .fotorama__wrap--only-active .fotorama__stage__frame.fotorama__active {
        visibility: visible;
    }

.fotorama__nav {
    font-size: 0;
    line-height: 0;
    text-align: center;
    display: none;
    white-space: nowrap;
    z-index: 5;
}

.fotorama__nav__shaft {
    position: relative;
    left: 0;
    top: 0;
    text-align: left;
}

.fotorama__nav__frame {
    position: relative;
    cursor: pointer;
}

.fotorama__nav--dots {
    display: block;
    position: absolute;
    bottom: 0;
}

    .fotorama__nav--dots .fotorama__nav__frame {
        width: 18px;
        height: 30px;
    }

    .fotorama__nav--dots .fotorama__nav__frame--thumb,
    .fotorama__nav--dots .fotorama__thumb-border {
        display: none;
    }

.fotorama__nav--thumbs {
    display: block;
}

    .fotorama__nav--thumbs .fotorama__nav__frame {
        padding-left: 0 !important;
    }

        .fotorama__nav--thumbs .fotorama__nav__frame:last-child {
            padding-right: 0 !important;
        }

    .fotorama__nav--thumbs .fotorama__nav__frame--dot {
        display: none;
    }

.fotorama__dot {
    display: block;
    width: 6px;
    height: 6px;
    position: relative;
    top: 12px;
    left: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    background: #fff;
    opacity: 0.5;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
}

.fotorama__nav__frame.fotorama__active {
    pointer-events: none;
    cursor: default;
}

    .fotorama__nav__frame.fotorama__active .fotorama__dot {
        opacity: 1;
        -ms-filter: none;
        filter: none;
    }

.fotorama__active .fotorama__dot {
    background-color: #fff;
}

.fotorama__thumb {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%;
}

.fotorama__thumb-border {
    position: absolute;
    z-index: 9;
    top: 0;
    left: 0;
    border-style: solid;
    border-color: #ed8323;
}

.fotorama__caption {
    position: absolute;
    z-index: 12;
    bottom: 0;
    left: 0;
    right: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #000;
}

    .fotorama__caption a {
        text-decoration: none;
        color: #000;
        border-bottom: 1px solid;
        border-color: rgba(0,0,0,0.5);
    }

        .fotorama__caption a:hover {
            color: #333;
            border-color: rgba(51,51,51,0.5);
        }

.fotorama__wrap--rtl .fotorama__caption {
    left: auto;
    right: 0;
}

.fotorama__wrap--no-captions .fotorama__caption,
.fotorama__wrap--video .fotorama__caption {
    display: none;
}

.fotorama__caption__wrap {
    background-color: rgba(255,255,255,0.9);
    padding: 5px 10px;
}

.fotorama__wrap--css3 .fotorama__spinner {
    -webkit-animation: spinner 24s infinite linear;
    -webkit-animation: spinner 24s infinite linear;
    -moz-animation: spinner 24s infinite linear;
    -o-animation: spinner 24s infinite linear;
    -ms-animation: spinner 24s infinite linear;
    animation: spinner 24s infinite linear;
}

.fotorama__wrap--css3 .fotorama__html,
.fotorama__wrap--css3 .fotorama__stage .fotorama__img {
    -webkit-transition-property: opacity;
    -moz-transition-property: opacity;
    -o-transition-property: opacity;
    -ms-transition-property: opacity;
    transition-property: opacity;
    -webkit-transition-timing-function: linear;
    -moz-transition-timing-function: linear;
    -o-transition-timing-function: linear;
    -ms-transition-timing-function: linear;
    transition-timing-function: linear;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    -ms-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

.fotorama__wrap--video .fotorama__stage__frame--video .fotorama__html,
.fotorama__wrap--video .fotorama__stage__frame--video .fotorama__img {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
}

.fotorama__select {
    cursor: auto;
}

.fotorama__video {
    top: 32px;
    right: 0;
    bottom: 0;
    left: 0;
    position: absolute;
    z-index: 10;
}

.fotorama__arr,
.fotorama__fullscreen-icon,
.fotorama__video-close,
.fotorama__video-play {
    position: absolute;
    z-index: 11;
    cursor: pointer;
}

.fotorama__arr {
    text-align: center;
    display: block;
    position: absolute;
    width: 32px;
    height: 32px;
    line-height: 32px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    top: 50%;
    margin: -16px 10px 0 10px;
    background: rgba(0,0,0,0.4);
    color: #fff;
    font-size: 20px;
}

    .fotorama__arr:hover {
        background: rgba(0,0,0,0.6);
    }

.fotorama__arr--prev {
    left: 0;
}

    .fotorama__arr--prev:before {
        content: '\f104';
    }

.fotorama__arr--next {
    right: 0;
}

    .fotorama__arr--next:before {
        content: '\f105';
    }

.fotorama__arr--disabled {
    pointer-events: none;
    cursor: default;
    *display: none;
    opacity: 0.3;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
    filter: alpha(opacity=30);
}

.fotorama__fullscreen-icon {
    width: 32px;
    height: 32px;
    line-height: 32px;
    top: 0;
    right: 0;
    z-index: 20;
    color: #fff;
    opacity: 0.8;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: alpha(opacity=80);
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: rgba(0,0,0,0.2);
    text-align: center;
    margin: 10px;
}

    .fotorama__fullscreen-icon:hover {
        opacity: 1;
        -ms-filter: none;
        filter: none;
    }

    .fotorama__fullscreen-icon:before {
        content: '\f065';
    }

.fotorama--fullscreen .fotorama__fullscreen-icon:before {
    content: '\f066';
}

.fotorama__video-play {
    width: 96px;
    height: 96px;
    left: 50%;
    top: 50%;
    margin-left: -48px;
    margin-top: -48px;
    background-position: 0 -64px;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
}

.fotorama__wrap--css2 .fotorama__video-play,
.fotorama__wrap--video .fotorama__stage .fotorama__video-play {
    display: none;
}

.fotorama__error .fotorama__video-play,
.fotorama__loaded .fotorama__video-play {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    display: block;
}

.fotorama__nav__frame .fotorama__video-play {
    width: 32px;
    height: 32px;
    margin-left: -16px;
    margin-top: -16px;
    background-position: -64px -32px;
}

.fotorama__video-close {
    width: 32px;
    height: 32px;
    top: 0;
    right: 0;
    background-position: -64px 0;
    z-index: 20;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
}

.fotorama__wrap--css2 .fotorama__video-close {
    display: none;
}

.fotorama__wrap--css3 .fotorama__video-close {
    -webkit-transform: translate3d(32px, -32px, 0);
    -moz-transform: translate3d(32px, -32px, 0);
    -o-transform: translate3d(32px, -32px, 0);
    -ms-transform: translate3d(32px, -32px, 0);
    transform: translate3d(32px, -32px, 0);
}

.fotorama__wrap--video .fotorama__video-close {
    display: block;
    opacity: 1;
    -ms-filter: none;
    filter: none;
}

.fotorama__wrap--css3.fotorama__wrap--video .fotorama__video-close {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.fotorama__wrap--no-controls.fotorama__wrap--toggle-arrows .fotorama__arr,
.fotorama__wrap--no-controls.fotorama__wrap--toggle-arrows .fotorama__fullscreen-icon,
.fotorama__wrap--video .fotorama__arr,
.fotorama__wrap--video .fotorama__fullscreen-icon {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
}

.fotorama__wrap--css2.fotorama__wrap--no-controls .fotorama__arr,
.fotorama__wrap--css2.fotorama__wrap--no-controls .fotorama__fullscreen-icon,
.fotorama__wrap--css2.fotorama__wrap--video .fotorama__arr,
.fotorama__wrap--css2.fotorama__wrap--video .fotorama__fullscreen-icon {
    display: none;
}

.fotorama__wrap--css3.fotorama__wrap--no-controls.fotorama__wrap--slide.fotorama__wrap--toggle-arrows .fotorama__fullscreen-icon,
.fotorama__wrap--css3.fotorama__wrap--video .fotorama__fullscreen-icon {
    -webkit-transform: translate3d(32px, -32px, 0);
    -moz-transform: translate3d(32px, -32px, 0);
    -o-transform: translate3d(32px, -32px, 0);
    -ms-transform: translate3d(32px, -32px, 0);
    transform: translate3d(32px, -32px, 0);
}

.fotorama__wrap--css3.fotorama__wrap--no-controls.fotorama__wrap--slide.fotorama__wrap--toggle-arrows .fotorama__arr--prev,
.fotorama__wrap--css3.fotorama__wrap--video .fotorama__arr--prev {
    -webkit-transform: translate3d(-48px, 0, 0);
    -moz-transform: translate3d(-48px, 0, 0);
    -o-transform: translate3d(-48px, 0, 0);
    -ms-transform: translate3d(-48px, 0, 0);
    transform: translate3d(-48px, 0, 0);
}

.fotorama__wrap--css3.fotorama__wrap--no-controls.fotorama__wrap--slide.fotorama__wrap--toggle-arrows .fotorama__arr--next,
.fotorama__wrap--css3.fotorama__wrap--video .fotorama__arr--next {
    -webkit-transform: translate3d(48px, 0, 0);
    -moz-transform: translate3d(48px, 0, 0);
    -o-transform: translate3d(48px, 0, 0);
    -ms-transform: translate3d(48px, 0, 0);
    transform: translate3d(48px, 0, 0);
}

.fotorama__wrap--css3 .fotorama__arr,
.fotorama__wrap--css3 .fotorama__fullscreen-icon,
.fotorama__wrap--css3 .fotorama__video-close,
.fotorama__wrap--css3 .fotorama__video-play {
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property: -moz-transform, opacity;
    -o-transition-property: -o-transform, opacity;
    -ms-transition-property: -ms-transform, opacity;
    transition-property: transform, opacity;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    -ms-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

.fotorama__nav:after,
.fotorama__nav:before,
.fotorama__stage:after,
.fotorama__stage:before {
    content: "";
    display: block;
    position: absolute;
    text-decoration: none;
    top: 0;
    bottom: 0;
    width: 10px;
    height: auto;
    z-index: 10;
    pointer-events: none;
    background-repeat: no-repeat;
    -webkit-background-size: 1px 100%, 5px 100%;
    -moz-background-size: 1px 100%, 5px 100%;
    background-size: 1px 100%, 5px 100%;
}

.fotorama__nav:before,
.fotorama__stage:before {
    background-position: 0 0, 0 0;
    left: -10px;
}

.fotorama__nav.fotorama__shadows--left:before,
.fotorama__stage.fotorama__shadows--left:before {
    left: 0;
}

.fotorama__nav:after,
.fotorama__stage:after {
    background-position: 100% 0, 100% 0;
    right: -10px;
}

.fotorama__nav.fotorama__shadows--right:after,
.fotorama__stage.fotorama__shadows--right:after {
    right: 0;
}

.fotorama--fullscreen .fotorama__nav:after,
.fotorama--fullscreen .fotorama__nav:before,
.fotorama--fullscreen .fotorama__stage:after,
.fotorama--fullscreen .fotorama__stage:before,
.fotorama__wrap--fade .fotorama__stage:after,
.fotorama__wrap--fade .fotorama__stage:before,
.fotorama__wrap--no-shadows .fotorama__nav:after,
.fotorama__wrap--no-shadows .fotorama__nav:before,
.fotorama__wrap--no-shadows .fotorama__stage:after,
.fotorama__wrap--no-shadows .fotorama__stage:before {
    display: none;
}

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

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

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

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

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

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

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

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

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

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

/*** 

====================================================================
	Main Header style
====================================================================

***/

.main-header {
    /*position: relative;
    left: 0px;
    top: 0px;
    width: 100%;
    z-index: 999;*/
    /*transition: all 500s ease;
    -webkit-transition: all 500s ease;
    -ms-transition: all 500s ease;
    -o-transition: all 500s ease;
    -moz-transition: all 500s ease;*/
}

    .main-header .header-top {
        position: relative;
        color: #ffffff;
        padding: 0px;
        background: #2c353d;
    }

        .main-header .header-top * {
            /*transition: all 500ms ease;
            -moz-transition: all 500ms ease;
            -webkit-transition: all 500ms ease;
            -ms-transition: all 500ms ease;
            -o-transition: all 500ms ease;*/
        }

        .main-header .header-top a {
            color: #ffffff;
        }

        .main-header .header-top .top-left a:hover {
            color: #eb4534;
        }

        .main-header .header-top .top-left {
            position: relative;
            /*line-height: 24px;*/
            font-size: 12px;
        }

            .main-header .header-top .top-left .phone-num,
            .main-header .header-top .top-left .email {
                /*margin-right: 15px;
                line-height: 24px;*/
                padding: 2px 0px 6px 0px;
            }

            .main-header .header-top .top-left .icon {
                position: relative;
                font-size: 13px;
                padding-right: 7px;
                color: #ffffff;
            }

        .main-header .header-top .top-right {
            position: absolute;
            right: 0px;
            top: 0px;
            line-height: 24px;
            padding-right: 0px;
        }

            .main-header .header-top .top-right .social-links {
                position: relative;
                float: right;
            }

                .main-header .header-top .top-right .social-links a {
                    position: relative;
                    display: block;
                    float: left;
                    width: 40px;
                    height: 40px;
                    line-height: 24px;
                    padding: 8px 10px;
                    text-align: center;
                    font-size: 16px;
                    color: #ffffff;
                }

            .main-header .header-top .top-right .fa-facebook-f {
                background: #4365c5;
            }

            .main-header .header-top .top-right .fa-twitter {
                background: #3ddcef;
            }

            .main-header .header-top .top-right .fa-instagram {
                background: #b26f4d;
            }

            .main-header .header-top .top-right .fa-dribbble {
                background: #f263f4;
            }

            .main-header .header-top .top-right .fa-google-plus {
                background: #f35632;
            }

            .main-header .header-top .top-right .fa-youtube-play {
                background: #a72203;
            }

            .main-header .header-top .top-right .fa-linkedin {
                background: #166b97;
            }

            .main-header .header-top .top-right .fa-pinterest-p {
                background: #f24343;
            }

            .main-header .header-top .top-right .social-links a:hover {
                opacity: 0.7;
            }


.header-bottom {
    box-shadow: 0 2px 6px 0 rgba(0,0,0,0.08);
}

.main-header .header-lower {
    color: #ffffff;
    border-top: 1px solid rgba(255,255,255,0.10);
    background: #fff;
    width: 100%;
    padding-top: 16px;
}

    .main-header .header-lower .logo {
        position: relativbe;
        float: left;
        margin: 13px 0 0 10px;
        width: 140px;
    }

.main-header .right-cont {
    position: relative;
    float: right;
    padding-top: 8px;
}

.main-header .main-menu {
    position: relative;
    font-weight: 400;
    z-index: 10;
    left: -25px;
}

.main-navigation {
    position: relative;
    font-weight: 400;
    max-width: 1200px;
    margin: 0 auto;
}

/*.main-header .main-menu .navbar-collapse > ul > li {
        position: relative;
        float: left;
        margin-left: 40px;
    }

        .main-header .main-menu .navbar-collapse > ul > li > a {
            position: relative;
            display: block;
            font-size: 14px;
            font-weight: 600;
            letter-spacing: 1px;
            text-transform: uppercase;
            line-height: 24px;
            padding: 8px 0px;
            color: #222a33;
            transition: all 500ms ease;
            -moz-transition: all 500ms ease;
            -webkit-transition: all 500ms ease;
            -ms-transition: all 500ms ease;
            -o-transition: all 500ms ease;
        }

.main-header.header-style-two .main-menu .navbar-collapse > ul > li > a {
    color: #000000;
}

.main-header .main-menu .navbar-collapse > ul > li:hover > a,
.main-header .main-menu .navbar-collapse > ul > li.current > a,
.main-header .main-menu .navbar-collapse > ul > li.current-menu-item > a {
    color: #eb4534;
}*/

/*.main-header .main-menu .navbar-collapse > ul > li > a .tri-line {
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 0px;
    height: 3px;
    background: #eb4534;
    transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
}

    .main-header .main-menu .navbar-collapse > ul > li > a .tri-line .line {
        position: relative;
        display: block;
        float: left;
        width: 33.333%;
        height: 3px;
    }

    .main-header .main-menu .navbar-collapse > ul > li > a .tri-line .one {
        background: #eb4534;
    }

    .main-header .main-menu .navbar-collapse > ul > li > a .tri-line .two {
        background: #e42a2a;
    }

    .main-header .main-menu .navbar-collapse > ul > li > a .tri-line .three {
        background: #c52719;
    }

.main-header .main-menu .navbar-collapse > ul > li:hover > a .tri-line,
.main-header .main-menu .navbar-collapse > ul > li.current > a .tri-line,
.main-header .main-menu .navbar-collapse > ul > li.current-menu-item > a .tri-line {
    width: 100%;
}

.main-header .main-menu .navbar-collapse > ul > li > ul li.dropdown > a:after {
    font-family: 'FontAwesome';
    content: "\f0da";
    position: absolute;
    right: 10px;
    top: 9px;
    width: 10px;
    height: 20px;
    display: block;
    color: #ffffff;
    line-height: 20px;
    font-size: 16px;
    text-align: center;
    z-index: 5;
}

.main-header .main-menu .navbar-collapse > ul > li > ul li.dropdown:hover > a:after {
    color: #ffffff;
}*/

.main-header .main-menu .navbar-collapse > ul > li > ul {
    position: absolute;
    display: block;
    width: 210px;
    top: 80px;
    left: 50%;
    margin-left: -105px;
    opacity: 0;
    visibility: hidden;
    background: #eb4534;
    border: 1px solid rgba(255,255,255,0.70);
    font-family: 'Open Sans', sans-serif;
    transition: all 600ms ease;
    -webkit-transition: all 600ms ease;
    -moz-transition: all 600ms ease;
    -o-transition: all 600ms ease;
    -ms-transition: all 600ms ease;
}

    .main-header .main-menu .navbar-collapse > ul > li > ul:before {
        font-family: 'FontAwesome';
        content: "\f0d8";
        position: absolute;
        left: 0px;
        top: -20px;
        padding-top: 4px;
        text-align: center;
        display: block;
        width: 100%;
        width: 100%;
        height: 20px;
        display: block;
        color: #eb4534;
        line-height: 20px;
        font-size: 28px;
        z-index: 5;
    }

/*.main-header .main-menu .navbar-collapse > ul > li > ul.from-left{
	left:auto;
	right:0px;	
}*/

.main-header .main-menu .navbar-collapse > ul > li:hover > ul {
    opacity: 1;
    visibility: visible;
    top: 60px;
}

.navigation {
    position: relative;
    top: 4px;
}

.main-header .main-menu .navbar-collapse > ul > li > ul > li {
    position: relative;
    display: block;
    border-bottom: 1px solid rgba(255,255,255,0.50);
    text-align: center;
}

    .main-header .main-menu .navbar-collapse > ul > li > ul > li:last-child {
        border: none;
    }

    .main-header .main-menu .navbar-collapse > ul > li > ul > li:hover > a {
        background: rgba(255,255,255,0.20);
    }

    .main-header .main-menu .navbar-collapse > ul > li > ul > li > a {
        display: block;
        line-height: 24px;
        font-size: 13px;
        font-weight: 400;
        text-transform: capitalize;
        color: #ffffff;
        padding: 6px 10px;
        background: none;
        transition: all 300ms ease;
        -webkit-transition: all 300ms ease;
        -moz-transition: all 300ms ease;
        -o-transition: all 300ms ease;
        -ms-transition: all 300ms ease;
    }

    .main-header .main-menu .navbar-collapse > ul > li > ul > li:hover > a {
        background: rgba(255,255,255,0.20);
    }

    .main-header .main-menu .navbar-collapse > ul > li > ul > li > ul {
        position: absolute;
        display: block;
        width: 210px;
        top: 0px;
        left: 130%;
        opacity: 0;
        visibility: hidden;
        background: #eb4534;
        border: 1px solid rgba(255,255,255,0.70);
        font-family: 'Open Sans', sans-serif;
        transition: all 600ms ease;
        -webkit-transition: all 600ms ease;
        -moz-transition: all 600ms ease;
        -o-transition: all 600ms ease;
        -ms-transition: all 600ms ease;
    }

        .main-header .main-menu .navbar-collapse > ul > li > ul > li > ul.from-left {
            left: auto;
            right: 130%;
        }

        .main-header .main-menu .navbar-collapse > ul > li > ul > li > ul > li {
            position: relative;
            display: block;
            border-bottom: 1px solid rgba(255,255,255,0.70);
        }

            .main-header .main-menu .navbar-collapse > ul > li > ul > li > ul > li:last-child {
                border: none;
            }

            .main-header .main-menu .navbar-collapse > ul > li > ul > li > ul > li a {
                display: block;
                line-height: 24px;
                font-size: 13px;
                font-weight: 400;
                text-transform: capitalize;
                color: #ffffff;
                padding: 6px 10px;
                background: none;
                transition: all 300ms ease;
                -webkit-transition: all 300ms ease;
                -moz-transition: all 300ms ease;
                -o-transition: all 300ms ease;
                -ms-transition: all 300ms ease;
            }

            .main-header .main-menu .navbar-collapse > ul > li > ul > li > ul > li:hover > a {
                background: rgba(255,255,255,0.20);
            }

    .main-header .main-menu .navbar-collapse > ul > li > ul > li:hover > ul {
        opacity: 1;
        visibility: visible;
        left: 100%;
    }

        .main-header .main-menu .navbar-collapse > ul > li > ul > li:hover > ul.from-left {
            left: auto;
            right: 100%;
        }


/*Bill's extra CSS*/


.login-area {
    color: #3d3d3d;
    font-weight: 900;
    line-height: 40px;
    display: flex;
}

    .login-area a {
        color: #3d3d3d;
        transition: color 0.3s ease;
    }

/*.mission-btn {
    padding: 0 10px 0 22px;
    margin-right: 14px;
    color: white;
    background-color: #008755;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.27);
    border-radius: 11.02px;
    line-height: unset;
    font-weight: 700;
    font-size: 1.06em;
    display: flex;
    transition: background-color 0.3s ease;
}*/

.mission-btn, .how-btn {
    box-shadow: 0 3px 12px 0 hsla(147, 100%, 23%, 0.40);
    border-radius: 11.02px;
    height: 30px;
    transition: filter 0.3s ease, box-shadow 0.2s ease;
    margin-left: 10px;
}

    .mission-btn:hover, .how-btn:hover {
        background-color: #3ab179;
        cursor: pointer;
        filter: brightness(112%);
        box-shadow: 0 3px 12px 0 hsla(147, 100%, 23%, 0.26);
    }

    .mission-btn i, .how-btn i {
        width: 40px;
        height: 40px;
        display: inline-block;
        background-image: url("../../images/missions-pin-2.svg");
        background-size: 22px;
        background-repeat: no-repeat;
        background-position: center;
    }

.login-icon {
    width: 30px;
    margin-left: 10px;
}


.carousel-arrow-right {
    width: 10px;
    height: 10px;
    display: inline-block;
    background-image: url("../../images/arrow_site_right.svg");
    background-repeat: no-repeat;
    background-position: center;
}

.owl-theme .owl-nav [class*=owl-]:hover {
    background: none !important;
}

.carousel-arrow-left {
    width: 10px;
    height: 10px;
    display: inline-block;
    transform: scale(2,5) rotate(180deg) !important;
    background-image: url("../../images/arrow_site_right.svg");
    background-repeat: no-repeat;
    background-position: center;
    z-index: 10;
}

.disabled .carousel-arrow-left, .disabled .carousel-arrow-right {
    filter: grayscale(100%);
}

.mission-menu {
    margin-left: auto;
    padding-right: 0 !important;
    position: relative;
    top: -2px;
}

.menu-item-single {
    padding: 0.3em 1.58em 0.6em 1.58em;
    font-weight: 600;
    list-style: none;
    position: relative;
    z-index: 4;
}

    .menu-item-single a {
        color: #616161 !important;
    }

.current {
    box-shadow: 0 -4px 6px 0 rgba(0,0,0,0.07);
    border-radius: 24px 24px 0 0;
    background-color: white;
    margin-bottom: -5px;
}

    .current:before {
        content: "";
        height: 46.3906px;
        width: 46.3906px;
        position: absolute;
        left: -42px;
        bottom:0;
        background-image: url(../../Content/css/assets/menu-wing.svg);
        background-size: 100%;
        background-position: center;
        background-repeat: no-repeat;
        z-index: 0;
    }


    .current:after {
        content: "";
        height: 46.3906px;
        width: 46.3906px;
        position: absolute;
        right: -42px;
        bottom: 0px;
        background-image: url(../../Content/css/assets/menu-wing.svg);
        background-size: 100%;
        background-position: center;
        background-repeat: no-repeat;
        transform: rotateY(180deg);
        z-index: 0;
    }

    .current a {
        font-weight: 900;
        color: #3d3d3d !important;
    }

.phone-num {
}

.login-area a:hover {
    color: #569B26;
}

.flg-logo {
    display: inline-block;
    width: 130px;
    height: 60px;
    background-image: url("../../images/followgreen-logo.svg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.grad-bot {
    width: 100%;
    height: 4px;
    position: relative;
    top: -1px;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f07e64+0,e35972+15,f5ae6f+29,f2c237+43,49a3d4+65,49a3d4+65,4c876d+83,6fa84a+100 */
    background: #f07e64; /* Old browsers */
    background: -moz-linear-gradient(left, #f07e64 0%, #e35972 15%, #f5ae6f 29%, #f2c237 43%, #49a3d4 65%, #49a3d4 65%, #4c876d 83%, #6fa84a 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #f07e64 0%,#e35972 15%,#f5ae6f 29%,#f2c237 43%,#49a3d4 65%,#49a3d4 65%,#4c876d 83%,#6fa84a 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #f07e64 0%,#e35972 15%,#f5ae6f 29%,#f2c237 43%,#49a3d4 65%,#49a3d4 65%,#4c876d 83%,#6fa84a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f07e64', endColorstr='#6fa84a',GradientType=1 ); /* IE6-9 */
}

.grad-bot-2 {
    width: 100%;
    height: 4px;
    background: rgba(201, 39, 42, 0.8);
    position: relative;
}

.mun-header {
    color: #3d3d3d;
    font-weight: bold;
    font-size: 1.3em;
    background-color: rgba(196,196,196,0.04);
    border: 1px solid grey; /*fallback color*/
    border-color: rgba(66,66,66,0.1);
    padding: 8px 22px;
    border-radius: 15px;
    font-family: "ZonaPro", sans-serif;
}

.mun-header-small {
    color: #3d3d3d;
    font-weight: 900;
    font-size: 1.1em;
    background-color: rgba(196,196,196,0.1);
    border: 1px solid grey; /*fallback color*/
    border-color: rgba(66,66,66,0.1);
    padding: 12px 30px;
    border-radius: 15px;
    -webkit-box-shadow: inset 0px 3px 33px -20px rgba(128,128,128,0.29);
    -moz-box-shadow: inset 0px 3px 33px -20px rgba(128,128,128,0.29);
    box-shadow: inset 0px 3px 33px -20px rgba(128,128,128,0.29);
}


/* Bootstrap override*/
.modal-title {
    font-size: 1.18em !important;
}

#mun {
    /*position: absolute;
    left: 50%;
    transform: translate(-50%, 0%);*/
}



/*.header-section {
        max-width: 1200px;
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        padding: 0 15px;
    }*/

.light-btn {
    margin-top: 15px;
    line-height: 24px !important;
    padding: 8px 17px !important;
    font-size: 14px !important;
    background-color: rgba(188, 43, 29, 0.9);
    border-radius: 8px;
}

.footer-widget a:hover {
    color: white;
    transition: 0.2s ease;
}

.omni-logo {
    position: relative;
    top: -2px;
    transform: scale(2.5);
}

.single-project-item:hover .donut-inner { /*mouseover visibility fix on schools*/
    color: white;
}

.error-msg-prompt {
    padding: 10px;
    border-left: 5px solid red;
    font-size: 18px;
    border-color: #bd2c1e;
    padding-left: 14px;
    font-weight: 600;
    color: #3d3d3d;
}

.red-danger-icon {
    width: 25px;
    height: 25px;
    margin-bottom: 6px;
    margin-right: 15px;
}

.err-btn {
    color: white;
}

.featured-error {
    border-radius: 30px;
    background-color: rgba(205, 205, 205, 0.16);
    -webkit-box-shadow: 0px 36px 114px -29px rgba(0,0,0,0.20);
    -moz-box-shadow: 0px 36px 114px -29px rgba(0,0,0,0.20);
    box-shadow: 0px 36px 114px -29px rgba(0,0,0,0.20);
    max-width: 1200px;
    margin: 50px auto;
    padding: 10px 30px 30px 30px !important;
}

#account-points {
    width: 38px;
    height: 38px;
    line-height: 38px;
    font-size: 13px;
    margin-left: 4px;
    color: white;
    font-weight: 900;
    background-color: #e6372e;
    border-radius: 100%;
}

#account-points-profile {
    width: 58px;
    height: 58px;
    line-height: 58px;
    font-size: 18px;
    font-weight: bolder;
    margin-left: 4px;
    color: white;
    font-weight: 900;
    background-color: red;
    border-radius: 100%;
    position: absolute;
    top: 13px;
    left: 15px;
}

.irecycle .heart-icon {
    top: -10px;
}

.nav-avatar {
    border-radius: 100%;
}

.user-modal {
    display: inline-block;
    width: 150px;
    position: absolute;
    z-index: 12;
    background-color: rgba(245,245,245, 0.98);
    -webkit-box-shadow: 0px 16px 48px -5px rgba(0,0,0,0.67);
    -moz-box-shadow: 0px 16px 48px -5px rgba(0,0,0,0.67);
    box-shadow: 0px 16px 48px -5px rgba(0,0,0,0.67);
    border-radius: 8px;
    top: 50px;
    left: 50%;
    transform: translate(-50%, 0);
    display: none;
}

    .user-modal ul {
        margin: 0;
        padding: 0;
        text-align: center;
        list-style-type: none;
        overflow: hidden;
    }

    .user-modal li {
        width: 100%;
        margin: 0;
        z-index: 4;
    }

        .user-modal li:nth-child(1)::before {
            content: "";
            display: block;
            position: absolute;
            left: 50%;
            width: 15px;
            height: 15px;
            background-color: rgba(245,245,245, 0.97);
            transform-origin: center;
            transform: translate(-50%, -50%) rotate(45deg);
            z-index: -1 !important;
        }

        .user-modal li:nth-child(1) a {
            border-radius: 8px 8px 0px 0px;
            border-bottom: 1px solid rgba(130,130,130, 0.3);
        }

        .user-modal li:nth-child(3) a {
            border-radius: 0px 0px 8px 8px;
            border-top: 1px solid rgba(130,130,130, 0.3);
        }

        .user-modal li a {
            display: block;
            width: 100%;
            text-decoration: none;
            padding: 5px 10px;
        }

            .user-modal li a:hover {
                background-color: rgba(229,229,229, 1);
                color: inherit;
            }

.user-area {
    position: relative;
    border-radius: 8px;
    transition: background-color ease 0.5s;
    padding: 6px 10px;
    border-radius: 38px;
}

    .user-area:hover {
        cursor: pointer;
        background-color: rgba(246,246,246,1);
    }

.profile-picture-nav {
    width: 38px;
    height: 38px;
    border-radius: 100%;
    position: relative;
    left: 10px;
}
/*** 

====================================================================
	Side Navigation style
====================================================================

***/

#side-navigation {
    position: fixed;
    width: 270px;
    height: 100%;
    right: -270px !important;
    top: 0px;
    display: block;
    z-index: 9999;
    opacity: 0;
    background: rgba(255,255,255,0.89);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: all 500ms ease-in;
    -moz-transition: all 500ms ease-in;
    -webkit-transition: all 500ms ease-in;
    -ms-transition: all 500ms ease-in;
    -o-transition: all 500ms ease-in;
    box-shadow: -4px 0 16px 0 var(--box-shadow-gray);
}

    #side-navigation.visible-sidebar {
        opacity: 1;
    }

    #side-navigation .sidebar-inner {
        position: absolute;
        width: 100%;
        padding: 10px 15px 30px;
        height: 100%;
        overflow-y: auto;
        left: 0px;
        top: 0px;
        display: block;
    }

    #side-navigation .mCustomScrollbar {
        padding-right: 0px;
    }

    #side-navigation .mCS_no_scrollbar.mCustomScrollbar {
        padding-right: 15px;
    }

    #side-navigation.toggled-sidebar {
        right: 0px !important;
    }

    #side-navigation .toggle-nav {
        position: absolute;
        left: -50px;
        top: 36px;
        width: 44px;
        height: 40px;
        background-color: #eb4534;
        border: 1px solid rgba(255,255,255,0.90);
        color: #ffffff !important;
        font-size: 22px;
        transition: all 500ms ease;
        -moz-transition: all 500ms ease;
        -webkit-transition: all 500ms ease;
        -ms-transition: all 500ms ease;
        -o-transition: all 500ms ease;
        opacity: 0;
    }

    #side-navigation.scrolled-down .toggle-nav {
        top: 25px;
    }

    #side-navigation.toggled-sidebar .toggle-nav,
    #side-navigation.visible-sidebar .toggle-nav {
        opacity: 1;
    }

    #side-navigation .toggle-nav:hover {
        /*background: #ffffff;
        border-color: #222a33;*/
        color: #222a33;
    }

    #side-navigation .logo {
        position: relative;
        margin: 30px 30px;
        text-align: center;
    }

        #side-navigation .logo img {
            position: relative;
            display: inline-block;
            max-width: 100%;
            transition: all 500ms ease-in;
            -moz-transition: all 500ms ease-in;
            -webkit-transition: all 500ms ease-in;
            -ms-transition: all 500ms ease-in;
            -o-transition: all 500ms ease-in;
        }

            #side-navigation .logo img:hover {
                transform: scale(1.1,1.1);
                -webkit-transform: scale(1.1,1.1);
                -ms-transform: scale(1.1,1.1);
                -moz-transform: scale(1.1,1.1);
                -o-transform: scale(1.1,1.1);
            }

    #side-navigation .navigation {
        position: relative;
        width: 100%;
        margin-bottom: 20px;
        /*border:1px solid rgba(255,255,255,0.70);*/
        border-bottom: none;
        transition: all 300ms ease;
        -moz-transition: all 300ms ease;
        -webkit-transition: all 300ms ease;
        -ms-transition: all 300ms ease;
        -o-transition: all 300ms ease;
    }

        #side-navigation .navigation > ul {
            position: relative;
            display: block;
        }

            #side-navigation .navigation > ul li {
                position: relative;
                display: block;
                border-bottom: 1px solid rgba(255,255,255,0.70);
            }

                #side-navigation .navigation > ul li a {
                    position: relative;
                    display: block;
                    font-size: 14px;
                    line-height: 24px;
                    padding: 7px 5px;
                    background: none;
                    color: var(--title-gray);
                    transition: all 500ms ease;
                    -moz-transition: all 500ms ease;
                    -webkit-transition: all 500ms ease;
                    -ms-transition: all 500ms ease;
                    -o-transition: all 500ms ease;
                }

                #side-navigation .navigation > ul li:hover > a,
                #side-navigation .navigation > ul li.current > a,
                #side-navigation .navigation > ul li.current-menu-item > a {
                    color: var(--title-gray);
                }

                #side-navigation .navigation > ul li ul {
                    position: relative;
                    display: block;
                    display: none;
                }

                    #side-navigation .navigation > ul li ul li {
                        position: relative;
                        display: block;
                        border-top: 1px solid rgba(255,255,255,0.50);
                    }

            #side-navigation .navigation > ul .dropdown-btn {
                position: absolute;
                right: 10px;
                top: 4px;
                display: block;
                width: 40px;
                height: 30px;
                background: #353535 url(/images/icons/submenu-icon.png) center center no-repeat;
                cursor: pointer;
                border: 1px solid #ffffff;
                border-radius: 3px;
                -webkit-border-radius: 3px;
                -ms-border-radius: 3px;
                -o-border-radius: 3px;
                -moz-border-radius: 3px;
            }

            #side-navigation .navigation > ul li.dropdown:hover > .dropdown-btn {
                border-color: #ffffff !important;
            }

#account-points-mobile {
    color: white;
}

#side-navigation .current {
    background-color: none !important;
    box-shadow: none;
    border-radius: unset !important;
    color: var(--green-main) !important;
}


/*** 

====================================================================
	Main Slider style
====================================================================

***/

.main-slider {
    overflow: hidden;
    position: relative;
    color: #ffffff;
}

.default-banner h3 {
    position: relative;
    display: inline-block;
    line-height: 40px;
    font-size: 30px;
    padding: 10px 20px 14px;
    color: #ffffff;
}

.default-banner h2 {
    position: relative;
    font-size: 36px;
    font-weight: 600;
    padding: 10px 20px 14px;
    margin: 0px;
    color: #ffffff;
    text-transform: none;
}

.default-banner h4 {
    position: relative;
    font-size: 26px;
    font-weight: 400;
    padding: 10px 20px 14px;
    color: #ffffff;
    text-transform: none;
}

.default-banner .line {
    width: 100px;
    height: 3px;
    background: #eb4534;
}

.default-banner .with-bg {
    background-color: none;
}

.default-banner .light-btn {
    border: 2px solid #bd2c1e !important;
    background-color: rgba(255,255,255,0);
    color: #bd2c1e;
    font-size: 14px;
    line-height: 24px;
    padding: 5px 20px;
}

    .default-banner .light-btn:hover {
        background-color: #bd2c1e;
        color: #ffffff;
    }

.default-banner .dark-btn {
    border: 2px solid #bd2c1e !important;
    background-color: #bd2c1e;
    color: #ffffff;
    font-size: 14px;
    line-height: 24px;
    padding: 5px 20px;
}

    .default-banner .dark-btn:hover {
        background-color: #222a33;
        border-color: #222a33 !important;
        color: #ffffff;
    }

.main-slider .tp-bannertimer {
    display: none;
}

.main-slider .tp-bullets,
.main-slider .tp-bullets.hidebullets {
    padding: 8px 20px 3px !important;
    background-color: none;
    opacity: 1 !important;
    height: auto;
    bottom: 0px !important;
    border-radius: 20px !important;
    -webkit-border-radius: 20px !important;
    -ms-border-radius: 20px !important;
}

    .main-slider .tp-bullets.preview4 .bullet {
        width: 10px !important;
        height: 10px !important;
        border: 2px solid #ffffff !important;
        margin: 0px 5px !important;
        background: none !important;
    }

        .main-slider .tp-bullets.preview4 .bullet:hover,
        .main-slider .tp-bullets.preview4 .bullet.selected {
            border-color: #eb4534 !important;
            background: none !important;
        }

.main-slider.default-slider .background-video {
    background-size: cover;
    top: 0;
    min-height: 100%;
    min-width: 100%;
    position: absolute;
    left: 0;
}

.main-slider.default-slider .video-container {
    left: 0;
    min-height: 100%;
    min-width: 100%;
    position: absolute;
    top: 0;
    overflow: hidden;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: #3d3d3d;
}

.main-slider.default-slider {
    position: relative;
    background: url(/images/icons/preloader-2.GIF) center center no-repeat;
}

    .main-slider.default-slider .carousel-inner {
        position: relative;
        width: 100%;
        max-width: 1200px;
        padding: 0px 15px;
        margin: 0 auto;
    }

.main-slider.parallax-background .carousel-inner {
    width: 100%;
    max-width: none;
    padding: 0px;
    text-align: center;
}

.default-banner .window-size {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
}

.parallax-background .window-size {
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
}

.static-banner .static-content {
    max-width: 1200px;
    margin: 0 auto;
    color: #ffffff;
}

.window-size .auto-container {
    position: relative;
    left: 0px;
    top: 0px;
    display: table;
    width: 100%;
    max-width: 100%;
    height: 100%;
    padding: 160px 15px 50px;
    text-align: center;
}

    .window-size .auto-container .box-inner {
        position: relative;
        display: table-cell;
        vertical-align: middle;
    }

.default-banner .window-size .big-title,
.default-banner .window-size .text,
.default-banner .window-size p,
.default-banner .window-size .theme-btn {
    margin-bottom: 5px;
}

.main-slider .window-size .big-title,
.main-slider .window-size .text,
.main-slider .window-size .theme-btn {
    animation: none;
    -webkit-animation: none;
    -ms-animation: none;
    -o-animation: none;
    -moz-animation: none;
}

.default-banner .window-size .with-bg {
    display: inline-block;
    margin-bottom: 5px;
}

.default-banner .window-size.active .big-title {
    animation-name: bounceInDown;
    -webkit-animation-name: bounceInDown;
    -ms-animation-name: bounceInDown;
    -moz-animation-name: bounceInDown;
    -o-animation-name: bounceInDown;
    animation-duration: 1000ms;
    -webkit-animation-duration: 1000ms;
    -ms-animation-duration: 1000ms;
    -o-animation-duration: 1000ms;
    -moz-animation-duration: 1000ms;
}

.default-banner .window-size.active .text {
    animation-name: fadeIn;
    -webkit-animation-name: fadeIn;
    -ms-animation-name: fadeIn;
    -moz-animation-name: fadeIn;
    -o-animation-name: fadeIn;
    animation-duration: 1000ms;
    -webkit-animation-duration: 1000ms;
    -ms-animation-duration: 1000ms;
    -o-animation-duration: 1000ms;
    -moz-animation-duration: 1000ms;
}

.default-banner .window-size.active .theme-btn {
    animation-name: zoomIn;
    -webkit-animation-name: zoomIn;
    -ms-animation-name: zoomIn;
    -moz-animation-name: zoomIn;
    -o-animation-name: zoomIn;
    animation-duration: 1000ms;
    -webkit-animation-duration: 1000ms;
    -ms-animation-duration: 1000ms;
    -o-animation-duration: 1000ms;
    -moz-animation-duration: 1000ms;
}

/*** 

====================================================================
	Scroll To Top style
====================================================================

***/

.scroll-to-top {
    position: fixed;
    bottom: 20px;
    left: 20px;
    width: 44px;
    height: 44px;
    color: #eb4534;
    background-color: rgba(244,244,244,0.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    font-size: 16px;
    line-height: 42px;
    text-align: center;
    z-index: 10000;
    cursor: pointer;
    border: 1px solid rgba(200,200,200,0.3);
    /*box-shadow: 0 2px 26px 0 rgba(0,0,0,0.28);*/
    display: none;
    border-radius: 100%;
}

    .scroll-to-top:hover {
        background-color: #eb4534;
        border-color: #eb4534;
        color: #ffffff;
    }


.charity {
    position: fixed;
    bottom: 60px;
    right: 10px;
    height: 40px;
    color: #eb4534;
    background: #f3f3f3;
    font-size: 16px;
    line-height: 36px;
    text-align: center;
    z-index: 100;
    cursor: pointer;
    border: 1px solid #cccccc;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    -moz-border-radius: 3px;
}

/*** 

====================================================================
	Tri Column style
====================================================================

***/

.tri-column-fluid {
    position: relative;
}

    .tri-column-fluid .tri-column-outer {
        position: relative;
        display: table;
        width: 100%;
    }

.tri-column-outer .column {
    position: relative;
    display: table-cell;
    vertical-align: top;
    width: 33.333%;
    color: #ffffff;
}


.tri-column-outer .column-inner {
    position: relative;
    padding: 20px;
    z-index: 1;
}

.tri-column-outer h3 {
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 10px;
}
/*
.title-orange {
	color:#eb4534;
}
.title-yellow {
	color:#f6ce56;
}
.title-green {
	color:#84b567;
}*/

.tri-column-outer h4 {
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 20px;
}

.tri-column-outer .text {
    margin-bottom: 20px;
}

.tri-column-outer .column .pattern-layer {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}

.tri-column-outer .default-column {
    background: #eb4534;
}

    .tri-column-outer .default-column .pattern-layer,
    .tri-column-outer .progress-column .pattern-layer {
        background: url(/images/icons/map-pattern.png) center center no-repeat;
    }

.tri-column-outer .progress-column {
    background: #84b567;
}

.tri-column-outer .carousel-column {
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}

    .tri-column-outer .carousel-column .pattern-layer {
        z-index: 0;
        background: rgba(0,0,0,0.80);
    }

    .tri-column-outer .carousel-column .carousel-indicators li:hover,
    .tri-column-outer .carousel-column .carousel-indicators li.active {
        background: #dc5f25;
    }

.museo-font {
    font-family: 'Museo',sans-serif;
}

.tri-column-outer .progress-column h2 {
    font-family: 'Museo',sans-serif;
    margin: 13px 0px;
}

/*** 

====================================================================
	Two Column
====================================================================

***/

.two-column {
    position: relative;
    padding: 40px 0px;
}

    .two-column .col-md-6 {
        margin-bottom: 15px;
    }

    .two-column .sec-title {
        margin-bottom: 20px;
    }

    .two-column .responsive-video {
        position: relative;
        border: 1px solid #7f7f7f;
    }

/*** 

====================================================================
	Four Column / Current Projects
====================================================================

***/

.four-column {
    position: relative;
    /*padding: 10px 0px;*/
}

.heart-icon {
    border-radius: 100% !important;
}

.page-title p {
    padding-top: 10px;
    line-height: 1.4em;
}

.four-column .column {
    position: relative;
    margin-bottom: 30px;
}

.four-column .column-inner {
    position: relative;
    max-width: 400px;
    margin: 0 auto;
    display: block;
    overflow: hidden;
    border-radius: 40px;
}

/*    .four-column .column-inner:hover {
        border-color: #eb4534;
    }*/

.four-column .image-box {
    position: relative;
}

.four-column .image-box img {
    position: relative;
    display: block;
    width: 100%;
    border-radius: 0px 0px 33px 33px;
    box-shadow: 0 3px 56px rgba(0,0,0,0.09);
}

.icon-box {
    position: absolute !important;
    width: 40px !important;
    height: 40px !important;
    z-index: 2;
}

.national-icon-box {
    left: 18px;
    top: 18px;
}

.four-column .image-box .icon-box {
    position: absolute;
    right: 9px;
    bottom: -8px;
    width: 48px;
    height: 48px;
    border-radius: 100%;
}

.bought-info-button, .viewed-info-button {
    display: inline !important;
    float: none !important;
}

.irecycle .icon-box {
    left: -34px;
}

.point-badge {
    position: relative;
    display: block;
    text-align: center;
    color: #000;
    /*background: linear-gradient(0deg, #007975 0%, #A8E7AA 200%);*/
    font-size: var(--text-base);
    font-weight: 900;
    z-index: 10;
}


    .point-badge span {
        display: inline-block;
        width: 40px;
        height: 40px;
        line-height: 34px;
        position: relative;
        border-radius: 100%;
        border: 4px solid white;
        background-color: rgb(244,244,244) !important;
    }

.icon-box:before {
    content: "";
    width: 50px;
    height: 50px;
    border-radius: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-image: linear-gradient(180deg, #FF001F 0%, rgba(255,146,101,0.99) 100%);
    z-index: 0;
    box-shadow: 0 8px 30px 0 rgba(0,0,0,0.16);
}

.offer-tile .column-inner {
    overflow: visible;
}

.offer-tile .lower-part h5 {
    padding: 10px 16px;
    border-radius: 14px;
    background-color: rgba(0,0,0,0.02);
}



.offer-tile .lower-part p {
    opacity: 0.4;
}

.offer-type {
    position: absolute;
    left: -20px;
    bottom: -2px;
    padding: 3px 16px;
    font-size: 16px;
    font-family: "ZonaPro", sans-serif;
    font-weight: bolder;
    color: white;
    min-width: 80px;
    display: inline-block;
    text-align: center;
    border-radius: 16px;
    background: var(--gradient-green);
    /*border: 5px solid #51b551;*/
    transform: skewX(-7deg);
    /*box-shadow: 3px 6px 20px 0 var(--green-main-subtle), inset 0 2px 4px 0 #5fec5f;*/
}

.offer-button {
    background-color: rgba(0,0,0,0.02);
    width: 44px;
    height: 44px;
    border-radius: 100%;
    overflow: hidden;
}

.offer-icon-share, .offer-icon-heart {
    width: 100%;
    height: 100%;
    display: block;
    background-size: 40%;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.4;
}

.offer-icon-share {
    background-image: url("../../Content/css/assets/share.svg");
}

.offer-icon-heart-inactive {
    background-image: url("../../Content/css/assets/heart.svg");
}

.offer-icon-heart-active {
    background-image: url("../../Content/css/assets/heart-filled.svg");
    opacity: 1;
}

.new-offer {
    position: absolute;
    left: -15px;
    bottom: 14px;
    padding: 0px 8px 20px 8px;
    font-family: "ZonaPro", sans-serif;
    font-size: 15px;
    font-weight: 900;
    color: white;
    min-width: 80px;
    display: inline-block;
    text-align: center;
    border-radius: 12px;
    background-color: #e6372e;
    transform: skewX(-7deg);
}

.new-earnpoint {
    position: absolute;
    left: 7px;
    bottom: -10px;
    padding: 5px 8px 5px 8px;
    font-family: "ZonaPro", sans-serif;
    font-size: 15px;
    font-weight: 900;
    color: white;
    min-width: 80px;
    display: inline-block;
    text-align: center;
    border-radius: 12px;
    background-color: #e6372e;
    transform: skewX(-7deg);
}

.offer-display .offer-type {
    right: 80px;
    bottom: 14px;
    left: unset;
    top: unset;
    max-width: 120px;
}

.offer-display .new-offer {
    right: 74px;
    bottom: 58px;
    left: unset;
    top: unset;
    width: 80px;
}

.offer-wrapper {
    box-shadow: 0 16px 42px 0 rgba(0,0,0,0.08);
    border-radius: 24px;
    overflow: hidden;
}

.offer-terms {
    position: relative;
    padding: 30px 30px 30px 30px;
    border: 14px solid white;
    border-radius: 0 0 24px 24px;
    background-color: rgba(0,0,0,0.016);
}

    .offer-terms h3 {
        margin-bottom: 30px;
    }

    .offer-terms p {
        font-size: 13px;
        line-height: 1.6;
        color: rgba(0,0,0,0.4);
    }

.icon-box-offer:before {
    background-image: linear-gradient(180deg, #136492 0%, #00A3FF 100%);
}

.four-column .column .lower-part {
    position: relative;
    padding: 24px 14px 14px 14px;
    text-align: center;
}


.four-column .column .bottom-part {
    position: absolute;
    bottom: 0px;
    text-align: center;
    width: 100%;
    padding: 0px 8px;
}


.four-column .column h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px;
}

.four-column .project-column .proj-donation {
    color: #ababab;
}

    .four-column .project-column .proj-donation strong {
        font-weight: 600;
        color: #3d3d3d;
    }

.column-inner .lower-part p {
    font-size: 14px;
    line-height: 1.3;
    padding-top: 12px;
    border-top: 2px solid rgba(0,0,0,0.02);
}

.four-column .project-column .bar-outer {
    position: relative;
    width: 100%;
    height: 8px;
    background: #d4d4d4;
    margin-top: 10px;
    border-radius: 4px;
    -ms-border-radius: 4px;
    -webkit-border-radius: 4px;
    -o-border-radius: 4px;
    -moz-border-radius: 4px;
    overflow: hidden;
}

.four-column .project-column .bar-inner {
    position: relative;
    height: 8px;
    background: #eb4534 url(/images/icons/progress-bg.jpg) left top repeat-x;
    width: 0;
    border-radius: 4px;
    -ms-border-radius: 4px;
    -webkit-border-radius: 4px;
    -o-border-radius: 4px;
    -moz-border-radius: 4px;
}


/*Actions*/

.action-title-icon {
    width: 24px;
    margin-right: 12px;
    display: inline-block;
}

.action-coupon-icon {
    width: unset;
    height: 30px;
    position: relative;
    top: 4px;
}

.coupon-image {
    margin-top: 32px;
    position: relative;
    left: -40px;
}

.coupon-wrapper {
    border: 10px solid white;
    background-color: rgba(0,0,0,0.02);
}

.action-row {
    position: relative;
}

    .action-row:after {
        content: "";
        position: absolute;
        top: 0;
        left: -3rem;
        background-color: rgba(0,0,0,0.018);
        border-radius: 24px;
        width: 18px;
        height: 100%;
    }

    .action-row .icon-box {
        top: 0;
        right: 0;
    }

.action-subtitle {
    margin: 3px 0 42px 0;
    font-size: 18px !important;
    color: var(--title-gray-light) !important;
}

.bin-photo {
    width: 50%;
    margin: 14px auto;
}

.action-wrapper {
    padding: 22px;
    box-shadow: 0 2px 6px 0 rgba(0,0,0,0.2);
    border-radius: 22px;
    margin-right: 20px;
    position: relative;
}

.bin-text {
    padding: 6px 26px;
    background-color: rgba(0,0,0,0.03);
    color: var(--title-gray);
    border-radius: 26px;
    margin: 12px auto;
    font-weight: 900;
}


/*Coupons*/

.coupon-title {
    padding: 12px 26px;
    background-color: #f2f2f2;
    border: 6px solid white;
    color: var(--title-gray);
    border-radius: 42px;
    margin: 0px auto 12px auto;
    font-weight: 600;
    font-size: 18px;
    position: absolute;
    top: 0;
    transform: translateY(calc(-50% - 5px));
    box-shadow: 0 2px 6px 0 rgba(0,0,0,0.2);
}

.coupon-bodytext {
    font-size: 16px;
    margin: 0 0 14px 0;
}

.coupon-input {
    width: 185px;
    background-color: rgba(255,255,255,0.9);
    border-radius: 12px;
    position: relative;
    padding: 12px 18px;
    margin-right: 14px;
    z-index: 40;
    color: black;
    font-weight: 600;
    font-size: 15px;
    margin-right: 14px;
    line-height: 1.3;
    transition: all 1s ease;
    box-shadow: 0px 6px 12px rgba(0,0,0,0.3) inset;
    border: 2px dashed rgba(0,0,0,0.3);
}

.coupon-row {
    align-items: center;
    padding-top: 18px;
    border-top: 4px dashed rgba(0,0,0,0.08);
    flex-wrap: nowrap;
}

.coupon-wrapper .icon-box {
    top: -20px;
    right: -20px;
}



.other-circular {
    position: relative;
    width: 150px;
    height: 150px;
    border: 10px solid white;
    box-shadow: 0 2px 6px 0 rgba(0,0,0,0.2);
    border-radius: 100%;
    background-color: rgba(0,0,0,0.02);
    transition: box-shadow 0.3s ease;
    background-size: 50% !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

    .other-circular .icon-box {
        top: -8px !important;
        right: -8px !important;
    }

.recommend {
    background: url("/Content/css/assets/recycle-mail.svg");
}

.reffer {
    background: url("/Content/css/assets/recycle-reffer.svg");
}

.buy-energy {
    background: url("/Content/css/assets/recycle-energy.svg")
}

.recycle-tile-icons {
    height: 80px;
}

.login-alert {
    background-color: var(--green-main);
    color: white;
    padding: 12px 34px;
    margin-bottom: 12px;
    border-radius: 40px;
    display: inline-block;
    box-shadow: 0 6px 16px 0 rgba(0,0,0,.16);
}

    .login-alert a {
        color: white;
        font-weight: 700;
        text-decoration: underline;
    }

.alert-info .btn-primary {
    margin-left: 14px;
}

.become-a-volunteer li {
    list-style: disc;
}

.become-a-volunteer h1 {
    text-align: left;
    margin-bottom: 30px;
}

.text-column ul li {
    list-style: disc;
}

.other-circular:hover {
    box-shadow: 0 4px 18px 0 rgba(0,0,0,0.15);
    cursor: pointer;
}


/*** 

====================================================================
	Four Column / Team Section
====================================================================

***/

.team-section {
    position: relative;
    padding: 30px 0px 10px;
}

    .team-section.extended .column {
        margin-bottom: 40px;
    }

    .team-section .column-inner {
        border-style: dashed;
        text-align: center;
    }

    .team-section .image-box {
        overflow: hidden;
        border: none;
    }

        .team-section .image-box .tag-title {
            position: absolute;
            right: 0px;
            padding-right: 7px;
            padding-top: 0px;
            top: 0px;
            width: 100px;
            height: 50px;
            line-height: 50px;
            color: #ffffff;
            text-align: right;
        }

            .team-section .image-box .tag-title span {
                position: relative;
                z-index: 5;
            }

            .team-section .image-box .tag-title:before {
                content: '';
                display: block;
                width: 100px;
                height: 100px;
                background: #57b22f;
                position: absolute;
                right: -50px;
                top: -50px;
                transform: rotate(45deg);
                -webkit-transform: rotate(45deg);
                -ms-transform: rotate(45deg);
                -o-transform: rotate(45deg);
                -moz-transform: rotate(45deg);
                z-index: 0;
            }

    .team-section .lower-part {
        text-align: center;
    }

    .team-section .info strong {
        font-weight: 600;
        color: #353535;
    }

    .team-section .info .icon {
        font-size: 14px;
        padding-right: 10px;
    }

    .team-section .info a {
        color: #3d3d3d;
    }

    .team-section .social-links a {
        position: relative;
        display: inline-block;
        width: 30px;
        height: 30px;
        line-height: 30px;
        margin: 0px 3px;
        color: #3d3d3d;
        font-size: 14px;
        transition: all 500ms ease;
        -webkit-transition: all 500ms ease;
        -ms-transition: all 500ms ease;
        -o-transition: all 500ms ease;
        -moz-transition: all 500ms ease;
        border-radius: 50%;
        -ms-border-radius: 50%;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -o-border-radius: 50%;
    }

    .team-section .social-links .fa-facebook-f:hover {
        background: #4365c5;
        color: #ffffff;
    }

    .team-section .social-links .fa-twitter:hover {
        background: #3ddcef;
        color: #ffffff;
    }

    .team-section .social-links .fa-google-plus:hover {
        background: #f35632;
        color: #ffffff;
    }

    .team-section .social-links .fa-instagram:hover {
        background: #b26f4d;
        color: #ffffff;
    }

/*** 

====================================================================
	Parallax Section
====================================================================

***/

.parallax-section {
    position: relative;
    padding: 80px 0px;
    color: #ffffff;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    z-index: 900;
    border-radius: 0;
}

    .parallax-section:before {
        content: '';
        position: absolute;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.40);
        z-index: 0;
        border-radius: 0;
        box-shadow: inset 0 1px -33px 0 rgba(0,0,0,0.27);
    }

    .parallax-section .auto-container {
        position: relative;
        z-index: 5;
    }

    .parallax-section h2 {
        position: relative;
        font-size: 36px;
        font-weight: 600;
        margin-bottom: 20px;
        line-height: 1;
    }

    .parallax-section h3 {
        position: relative;
        font-size: 26px;
        margin-bottom: 30px;
        line-height: 1;
    }

    .parallax-section.style-two h3 {
        margin-bottom: 0px;
    }

    .parallax-section .line {
        position: relative;
        width: 100px;
        height: 3px;
        background: #ffffff;
        margin: 0px auto 40px;
    }

    .parallax-section.style-two .text {
        position: relative;
        padding-right: 150px;
    }

    .parallax-section .theme-btn {
        margin: 0px 12px;
        color: rgba(255,255,255,0.80);
    }

    .parallax-section.style-two .text .theme-btn {
        position: absolute;
        bottom: 0px;
        right: 0px;
        border-color: #ffc925 !important;
        color: #ffc925 !important;
    }

/*** 

====================================================================
	Sponsors Style
====================================================================

***/

.sponsors-section {
    position: relative;
    text-align: center;
    background: #ffffff;
    padding: 20px 0px;
}

.no-padding {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

.sponsors-section .auto-container {
    padding-left: 30px;
    padding-right: 30px;
}

.sponsors-section .slider {
    position: static;
}

    .sponsors-section .slider .owl-stage-outer {
        z-index: 10;
    }

.sponsors-section li img {
    position: relative;
    display: inline-block !important;
    width: auto !important;
    max-width: 100% !important;
    opacity: 1;
    transition: all 300ms ease-in;
    -webkit-transition: all 300ms ease-in;
    -ms-transition: all 300ms ease-in;
    -o-transition: all 300ms ease-in;
    -moz-transition: all 300ms ease-in;
}

    .sponsors-section li img:hover {
        opacity: 0.50;
    }

.sponsors-section .owl-dots {
    display: none !important;
}

.sponsors-section .owl-controls {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 5;
    margin: 0px !important;
    opacity: 0.25;
}

.sponsors-section:hover .owl-controls {
    opacity: 1;
}

.sponsors-section .owl-controls .owl-prev {
    position: absolute;
    left: 0px;
    top: 0px;
    margin: 0px;
    width: 50px;
    height: 100%;
    font-size: 0px;
    overflow: hidden;
    text-indent: 100px;
    background: url(/images/icons/icon-prev-1.png) center center no-repeat !important;
}

.sponsors-section .owl-controls .owl-next {
    position: absolute;
    right: 0px;
    top: 0px;
    margin: 0px;
    width: 50px;
    height: 100%;
    font-size: 0px;
    overflow: hidden;
    text-indent: 100px;
    background: url(/images/icons/icon-next-1.png) center center no-repeat !important;
}

/*** 

====================================================================
	Our Programs
====================================================================

***/

.programs-section {
    position: relative;
    padding: 30px 0px 0px;
}

    .programs-section .column {
        position: relative;
        margin-bottom: 30px;
    }

    .programs-section .column-inner {
        position: relative;
        max-width: 400px;
        margin: 0 auto;
        display: block;
    }

    .programs-section .column .image-box {
        position: relative;
        display: block;
        overflow: hidden;
    }

        .programs-section .column .image-box img {
            position: relative;
            display: block;
            width: 100%;
        }

        .programs-section .column .image-box .overlay-box {
            position: absolute;
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            background-color: rgba(240,102,38,0.70);
        }

        .programs-section .column .image-box .bg-red {
            background-color: rgba(191,39,26,0.70);
        }

        .programs-section .column .image-box .bg-green {
            background-color: rgba(87,178,47,0.80);
        }

    .programs-section .column strong {
        font-weight: 600;
    }

    .programs-section .program-info {
        position: relative;
        padding: 7px 0px;
    }

    .programs-section .column h3 {
        position: absolute;
        left: 0px;
        top: 40px;
        background: #222a33;
        padding: 10px 15px;
        font-size: 14px;
        font-weight: 600;
        color: #ffffff;
    }

    .programs-section .column .icon-arrow {
        position: absolute;
        display: block;
        right: 0px;
        bottom: 0px;
        width: 42px;
        height: 36px;
        line-height: 36px;
        color: #ffffff;
        text-align: center;
        background: #222a33;
    }

/*** 

====================================================================
	Fact Counter Section
====================================================================

***/

.fact-counter {
    position: relative;
    padding: 80px 0px 30px;
    color: #ffffff;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

    .fact-counter:before {
        content: '';
        position: absolute;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.80);
        z-index: 0;
    }

    .fact-counter .auto-container {
        position: relative;
        z-index: 5;
    }

    .fact-counter .counter-column {
        position: relative;
        text-align: center;
        font-family: 'Museo',sans-serif;
        margin-bottom: 50px;
    }

        .fact-counter .counter-column .count-outer {
            position: relative;
            font-size: 40px;
            margin-bottom: 15px;
        }

            .fact-counter .counter-column .count-outer .icon {
                position: relative;
                padding-right: 10px;
            }

        .fact-counter .counter-column .counter-title {
            position: relative;
            color: #ffffff;
            font-size: 16px;
        }

/*** 

====================================================================
	Contact Us Section
====================================================================

***/

.contact-section {
    position: relative;
    padding: 30px 0px 20px;
}

    .contact-section .form-group .icon-box {
        position: relative;
        display: table-cell;
        vertical-align: middle;
    }

        .contact-section .form-group .icon-box label {
            position: relative;
            display: inline-block;
            width: 40px;
            line-height: 39px;
            text-align: center;
            font-size: 16px;
            color: #3d3d3d;
            margin: 0px;
            background: #ffffff;
            border-right: 1px solid #d0d0d0;
        }

    .contact-section .form-group label.error {
        display: none !important;
    }


/*** 

====================================================================
	Map Section
====================================================================

***/

.map-section {
    position: relative;
}

    .map-section .map-container {
        position: relative;
        width: 100%;
        height: 450px;
    }

/*** 

====================================================================
	Main Footer
====================================================================

***/

.main-footer {
    position: relative;
    font-size: 14px;
    /*font-family: 'Open Sans',sans-serif;*/
    line-height: 1.4em;
}

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

.index-top {
    z-index: 5;
    position: relative;
}

.main-footer .footer-upper {
    position: relative;
    padding: 40px 0px 5px;
    color: #fff;
    background-image: linear-gradient(0deg, #007975 0%, #017A75 4%, #A8E7AA 100%);
    box-shadow: inset 0 1px 33px 0 rgba(0,0,0,0.27);
    border-radius: 96px 96px 0 0;
}

.footer-town-image {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    max-width: 550px;
    z-index: 0;
}

.main-footer .footer-upper .column {
    position: relative;
    margin-bottom: 20px;
}

.footer-upper .column {
    line-height: 1.8em;
}

    .footer-upper .column h2 {
        position: relative;
        font-weight: 600;
        font-size: var(--text-2xl);
        line-height: 1.4em;
        padding: 0px 0px 12px;
        margin-bottom: 25px;
        text-transform: capitalize;
        color: #ffffff;
    }

.social-ic {
    display: inline-block;
    height: 34px;
    margin-right: 8px;
}

.follow-bottom-logo {
    height: 38px;
    margin-bottom: 30px !important;
}

.footer-upper .column h2 strong {
    font-weight: 600;
}

.footer-upper .twitter-feeds .feed {
    position: relative;
    padding: 0px 0px 10px 30px;
    margin-bottom: 20px;
    border-bottom: 1px dashed #4b5868;
}

    .footer-upper .twitter-feeds .feed a {
        position: relative;
        color: #eb4534;
    }

    .footer-upper .twitter-feeds .feed .time {
        position: relative;
        color: #ffffff;
        font-size: 12px;
        text-transform: uppercase;
    }

    .footer-upper .twitter-feeds .feed strong {
        font-weight: 400;
    }

    .footer-upper .twitter-feeds .feed .icon {
        position: absolute;
        width: 30px;
        height: 20px;
        left: 0px;
        top: 0px;
        line-height: 20px;
        font-size: 16px;
        color: #eb4534;
    }

.footer-upper .popular-tags a {
    position: relative;
    display: inline-block;
    line-height: 20px;
    padding: 2px 10px;
    background: #394350;
    color: #f1f1f1;
    margin: 0px 2px 7px 0px;
    text-transform: none;
    font-size: 12px;
    transition: all 300ms ease;
    -webkit-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
}

    .footer-upper .popular-tags a:hover {
        background-color: #eb4534;
        color: #ffffff;
    }

.footer-upper .recent-posts .post {
    position: relative;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px dashed #4b5868;
}

    .footer-upper .recent-posts .post:last-child,
    .footer-upper .twitter-feeds .feed:last-child {
        border: none;
    }

    .footer-upper .recent-posts .post h4 {
        position: relative;
        margin-bottom: 5px;
        font-size: 14px;
        font-weight: 500;
    }

    .footer-upper .recent-posts .post a {
        color: #ffffff;
    }

        .footer-upper .recent-posts .post a:hover {
            color: #eb4534;
        }

.footer-bottom {
    position: relative;
    background: #2c353d;
    padding: 10px 0px;
    color: #bbbbbb;
    font-size: 14px;
}

    .footer-bottom .copyright {
        position: relative;
        line-height: 30px;
    }

        .footer-bottom .copyright a {
            position: relative;
            color: #ffffff;
        }

        .footer-bottom .copyright strong {
            font-weight: 400;
            color: #ffffff;
        }

/*** 

====================================================================
	Join Us Style
====================================================================

***/

.join-us {
    position: relative;
    padding: 30px 0px;
    margin-bottom: 30px;
}

    .join-us .counter-side {
        position: absolute;
        right: -15px;
        top: 0px;
        width: 50%;
        min-height: 100%;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
        color: #ffffff;
    }

        .join-us .counter-side .inner-box {
            position: absolute;
            left: 0px;
            top: 0px;
            width: 100%;
            min-height: 100%;
            padding: 40px 55px 35px 40px;
            background-color: rgba(34,42,51,0.90);
        }

.counter-side .countdown {
    position: relative;
    text-align: center;
    max-width: 450px;
    padding: 25px 10px 7px;
    margin: 0 auto 30px;
    border: 5px solid #6d6d6e;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    -moz-border-radius: 5px;
}

    .counter-side .countdown .counter-column {
        position: relative;
        display: inline-block;
        margin: 0px 15px;
        color: #fc5a1b;
        font-size: 15px;
        text-transform: uppercase;
        font-family: 'Open Sans',sans-serif;
        text-align: center;
    }

        .counter-side .countdown .counter-column .count {
            position: relative;
            display: inline-block;
            font-size: 46px;
            color: #ffffff;
            font-family: 'Museo',sans-serif;
        }

        .counter-side .countdown .counter-column .colon {
            position: relative;
            display: inline-block;
            left: 20px;
            top: -5px;
            font-size: 46px;
            color: #ffffff;
            font-family: 'Museo',sans-serif;
        }

.counter-side h2 {
    position: relative;
    font-size: 24px;
    margin-bottom: 20px;
    line-height: 1.8em;
}

    .counter-side h2 .big-text {
        font-size: 36px;
        font-family: 'Museo',sans-serif;
    }

.counter-side .proj-donation {
    position: relative;
    width: 60%;
    color: #fe572b;
}

    .counter-side .proj-donation strong {
        font-weight: 600;
        color: #ffffff;
    }

    .counter-side .proj-donation .bar-outer {
        position: relative;
        width: 100%;
        height: 8px;
        background: #d4d4d4;
        margin-top: 10px;
        border-radius: 4px;
        -ms-border-radius: 4px;
        -webkit-border-radius: 4px;
        -o-border-radius: 4px;
        -moz-border-radius: 4px;
        overflow: hidden;
    }

    .counter-side .proj-donation .bar-inner {
        position: relative;
        height: 8px;
        background: #eb4534 url(/images/icons/progress-bg.jpg) left top repeat-x;
        width: 0;
        border-radius: 4px;
        -ms-border-radius: 4px;
        -webkit-border-radius: 4px;
        -o-border-radius: 4px;
        -moz-border-radius: 4px;
    }

.counter-side .theme-btn {
    border-color: #ffffff !important;
    margin-top: 20px;
    color: #ffffff;
}

/*** 

====================================================================
	Help Us Style
====================================================================

***/

.help-us {
    position: relative;
    padding: 45px 0px 0px;
    color: #ffffff;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

    .help-us:before {
        content: '';
        position: absolute;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        background: rgba(240,102,38,0.90);
        z-index: 0;
    }

    .help-us .auto-container {
        position: relative;
        z-index: 5;
    }

    .help-us h2 {
        position: relative;
        font-size: 28px;
        font-weight: 500;
        margin-bottom: 40px;
        text-align: center;
    }

    .help-us .text-column {
        position: relative;
        padding-top: 10px;
        padding-left: 140px;
        min-height: 120px;
        margin-bottom: 45px;
    }

        .help-us .text-column .icon {
            position: absolute;
            left: 0px;
            top: 0px;
            width: 100px;
            height: 100px;
            padding: 15px;
            text-align: center;
            line-height: 60px;
            font-size: 48px;
            border: 2px solid #ffffff;
        }

        .help-us .text-column h3 {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 10px;
        }

/*** 

====================================================================
	Blog Section Style
====================================================================

***/

.blog-section {
    position: relative;
    padding: 0px;
}

    .blog-section .blog-post {
        position: relative;
        margin-bottom: 7px;
    }

        .blog-section .blog-post .image-box {
            position: relative;
            overflow: hidden;
        }

        .blog-section .blog-post .image-wrap {
            position: relative;
            display: block;
        }

        .blog-section .blog-post .image-box img {
            display: block;
            width: auto;
        }

        .blog-section .blog-post .image-wrap:before {
            content: '';
            background: url(/images/icons/icon-link.png) center center no-repeat;
            background-color: rgba(240,102,38,0.80) !important;
            z-index: 5;
        }

        .blog-section .blog-post .image-box .post-options {
            position: absolute;
            right: -100px;
            bottom: 0px;
            opacity: 0;
            transition: all 500ms ease;
            -webkit-transition: all 500ms ease;
            -ms-transition: all 500ms ease;
            -o-transition: all 500ms ease;
            -moz-transition: all 500ms ease;
        }

        .blog-section .blog-post .image-box.with-carousel .post-options {
            bottom: auto;
            top: 0px;
            transition: all 500ms ease;
            -webkit-transition: all 500ms ease;
            -ms-transition: all 500ms ease;
            -o-transition: all 500ms ease;
            -moz-transition: all 500ms ease;
        }

        .blog-section .blog-post:hover .image-box .post-options {
            right: 0px !important;
            opacity: 1;
        }

        .blog-section .blog-post .image-box .post-options .heart-icon {
            position: relative;
            display: inline-block;
            margin: 15px 15px 15px 0px;
            width: 40px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            color: #ffffff;
            background: #eb4534;
            font-size: 14px;
            z-index: 1;
            border-radius: 100%;
        }

        .blog-section .blog-post .image-box .post-options .plus-icon {
            position: relative;
            display: inline-block;
            margin: 0px 15px 15px 0px;
            width: 40px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            color: #ffffff;
            background: #eb4534;
            font-size: 14px;
            z-index: 1;
        }

        .blog-section .blog-post:hover .heart-icon,
        .blog-section .blog-post:hover .plus-icon {
            -ms-animation-name: hvr-pulse;
            -moz-animation-name: hvr-pulse;
            -op-animation-name: hvr-pulse;
            -webkit-animation-name: hvr-pulse;
            animation-name: hvr-pulse;
            -ms-animation-duration: 700ms;
            -moz-animation-duration: 700ms;
            -op-animation-duration: 700ms;
            -webkit-animation-duration: 700ms;
            animation-duration: 700ms;
            -ms-animation-timing-function: linear;
            -moz-animation-timing-function: linear;
            -op-animation-timing-function: linear;
            -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
            -ms-animation-iteration-count: 2;
            -moz-animation-iteration-count: 2;
            -op-animation-iteration-count: 2;
            -webkit-animation-iteration-count: 2;
            animation-iteration-count: 2;
        }

        .blog-section .blog-post .lower-part {
            position: relative;
            padding: 20px 0px 20px 84px;
        }

            .blog-section .blog-post .lower-part .text-right {
                text-align: left;
            }

            .blog-section .blog-post .lower-part .post-date {
                position: absolute;
                left: 0px;
                top: 20px;
                width: 70px;
                min-height: 60px;
                line-height: 36px;
                padding: 5px 10px;
                text-align: center;
                font-size: 36px;
                font-family: 'Museo',sans-serif;
                border: 2px solid #3d3d3d;
            }

            .blog-section .blog-post .lower-part .month {
                position: relative;
                display: block;
                font-size: 16px;
                line-height: 20px;
                font-family: 'Museo',sans-serif;
            }

        .blog-section .blog-post h3 {
            position: relative;
            margin-bottom: 10px;
            font-size: 17px;
            font-weight: 600;
        }

            .blog-section .blog-post h3 a {
                color: #3d3d3d;
            }

                .blog-section .blog-post h3 a:hover {
                    color: #eb4534;
                }

        .blog-section .blog-post .post-info {
            position: relative;
            margin-bottom: 10px;
        }

            .blog-section .blog-post .post-info a {
                color: #7f7f7f;
                font-style: italic;
            }

                .blog-section .blog-post .post-info a:hover {
                    color: #eb4534;
                }

        .blog-section .blog-post .post-text {
            position: relative;
            margin-bottom: 20px;
        }

        .blog-section .blog-post .read-more {
            position: relative;
            color: #eb4534;
        }

.sidebar-page blockquote {
    font-size: 15px;
    padding: 15px 15px 15px 20px;
    background: #f1f1f1;
    border: 1px solid #d0d0d0;
    border-left: 5px solid #eb4534;
    margin-bottom: 20px;
    font-style: italic;
}

.sidebar-page .about-author {
    position: relative;
    padding: 30px;
    border: 1px solid #dddddd;
    margin-bottom: 40px;
}

    .sidebar-page .about-author h3 {
        margin-bottom: 30px;
        font-size: 20px;
    }

    .sidebar-page .about-author .author-info {
        margin-bottom: 20px;
    }

        .sidebar-page .about-author .author-info strong {
            font-weight: 600;
        }

    .sidebar-page .about-author .author-desc {
        position: relative;
        padding: 10px 10px 10px 100px;
    }

    .sidebar-page .about-author .author-thumb {
        position: absolute;
        left: 0px;
        top: 0px;
        width: 84px;
        height: 84px;
    }

        .sidebar-page .about-author .author-thumb img {
            width: 100%;
            display: block;
        }

.text-column ul, li {
    list-style: none;
}

/*** 

====================================================================
	Comments Area
====================================================================

 ***/

.sidebar-page .comments-area {
    position: relative;
}

    .sidebar-page .comments-area .comment-box {
        position: relative;
    }

    .sidebar-page .comments-area .comment {
        position: relative;
        margin: 0px 0px 50px 0px;
        padding: 0px 0px 10px 110px;
    }

    .sidebar-page .comments-area .reply-comment {
        margin-left: 50px;
    }

    .sidebar-page .comments-area .comment-box .author-thumb {
        position: absolute;
        left: 0px;
        top: 0px;
        width: 84px;
        height: 84px;
    }

        .sidebar-page .comments-area .comment-box .author-thumb img {
            width: 100%;
            display: block;
        }

    .sidebar-page .comments-area .comment-info {
        margin-bottom: 10px;
        color: #bcbcbc;
    }

    .sidebar-page .comments-area .comment-box strong {
        color: #292929;
        font-weight: 600;
    }

    .sidebar-page .comments-area .reply-btn {
        position: absolute;
        right: 0px;
        top: -10px;
        font-size: 14px;
        padding: 3px 20px;
        background: #eb4534;
        border-color: #eb4534;
        text-transform: capitalize;
    }

/*** 

====================================================================
	Comment Form
====================================================================

 ***/

.comment-form .form-group .icon-box {
    position: relative;
    display: table-cell;
    vertical-align: middle;
}

    .comment-form .form-group .icon-box label {
        position: relative;
        display: inline-block;
        width: 40px;
        line-height: 39px;
        text-align: center;
        font-size: 16px;
        color: #3d3d3d;
        margin: 0px;
        background: #ffffff;
        border-right: 1px solid #d0d0d0;
    }

.comment-form .form-group label.error {
    display: none !important;
}

.comment-form button {
    position: relative;
    display: inline-block;
    background: #222a33;
    color: #ffffff;
    padding: 8px 30px;
    line-height: 24px;
    font-size: 14px;
    font-weight: 500;
}

    .comment-form button .icon {
        position: relative;
        top: 2px;
    }

    .comment-form button:before {
        background: #eb4534;
    }

/*** 

====================================================================
	Theme Pagination Style
====================================================================

***/

.theme-pagination {
    position: relative;
    margin: 0px 0px 40px;
}

    .theme-pagination li {
        position: relative;
        display: inline-block;
        margin: 0px 3px;
    }

        .theme-pagination li a {
            position: relative;
            display: block;
            line-height: 24px;
            padding: 8px 13px;
            font-size: 14px;
            min-width: 40px;
            border: 1px solid #222a33;
            background: #222a33;
            color: #ffffff;
            transition: all 500ms ease;
            -webkit-transition: all 500ms ease;
            -ms-transition: all 500ms ease;
            -o-transition: all 500ms ease;
            -moz-transition: all 500ms ease;
        }

            .theme-pagination li a:hover,
            .theme-pagination li a.active {
                color: #ffffff;
                background: #eb4534;
            }

/*** 

====================================================================
	Image Carousel
====================================================================

 ***/

.image-carousel {
    position: relative;
}

    .image-carousel .slide-item img {
        display: block;
        width: 100%;
        height: auto;
    }

    .image-carousel .owl-dots {
        position: absolute;
        right: 15px;
        bottom: 5px;
    }

        .image-carousel .owl-dots .owl-dot.active span,
        .image-carousel .owl-dots .owl-dot:hover span {
            background: #e56e35;
        }

        .image-carousel .owl-dots .owl-dot {
            margin: 0px -3px !important;
        }

/*** 

====================================================================
	About Section Style
====================================================================

***/

.about-section {
    position: relative;
    background: #ffffff;
    padding: 30px 0px 0px;
}

    .about-section .post {
        position: relative;
        margin-bottom: 32px;
    }

        .about-section .post .post-title {
            position: relative;
            font-size: 17px;
            margin-bottom: 24px;
            font-weight: 500;
            padding: 15px 0px 0px 70px;
        }

        .about-section .post .icon {
            position: absolute;
            left: 0px;
            top: 8px;
            font-size: 48px;
            color: #eb4534;
            line-height: 32px;
            width: 70px;
        }

        .about-section .post .inner {
            position: relative;
            max-width: 540px;
            margin: 0 0;
        }

        .about-section .post .text {
            position: relative;
            font-size: 15px;
            color: #565656;
        }

/*** 

====================================================================
	Featured Project Style
====================================================================

***/

.featured-project {
    position: relative;
    background: #ffffff;
    padding: 18px 0px 5px;
}

    .featured-project h4 {
        padding-top: 5px;
        line-height: 1.5em;
    }

    .featured-project .list-inline {
        padding: 0px 0px 10px 0px;
        margin-left: -15px;
    }

    .featured-project .image-box,
    .featured-project .text-column {
        position: relative;
        margin-bottom: 30px;
    }

        .featured-project .image-box:hover .heart-icon {
            -ms-animation-name: hvr-pulse;
            -moz-animation-name: hvr-pulse;
            -op-animation-name: hvr-pulse;
            -webkit-animation-name: hvr-pulse;
            animation-name: hvr-pulse;
            -ms-animation-duration: 700ms;
            -moz-animation-duration: 700ms;
            -op-animation-duration: 700ms;
            -webkit-animation-duration: 700ms;
            animation-duration: 700ms;
            -ms-animation-timing-function: linear;
            -moz-animation-timing-function: linear;
            -op-animation-timing-function: linear;
            -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
            -ms-animation-iteration-count: infinite;
            -moz-animation-iteration-count: infinite;
            -op-animation-iteration-count: infinite;
            -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
        }

        .featured-project .image-box img {
            position: relative;
            display: block;
            width: 100%;
        }

        .featured-project .image-box .icon-box {
            position: absolute;
            right: 20px;
            bottom: 20px;
            /*width: 40px;
                height: 40px;*/
        }

        .featured-project .image-box .heart-icon {
            position: relative;
            display: block;
            width: 40px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            color: #ffffff;
            background: #eb4534;
            font-size: 14px;
            z-index: 1;
        }

        .featured-project .text-column h3 {
            font-size: 26px;
            font-weight: 600;
            margin-bottom: 20px;
        }

        .featured-project .text-column .text {
            margin-bottom: 30px;
        }



    .featured-project .proj-donation {
        position: relative;
        color: #ababab;
        /*padding-right: 150px;*/
    }


        .featured-project .proj-donation strong {
            font-weight: 600;
            color: #3d3d3d;
        }

        .featured-project .proj-donation .bar-outer {
            position: relative;
            width: 100%;
            height: 8px;
            background: #d4d4d4;
            margin-top: 10px;
            border-radius: 4px;
            -ms-border-radius: 4px;
            -webkit-border-radius: 4px;
            -o-border-radius: 4px;
            -moz-border-radius: 4px;
            overflow: hidden;
        }

        .featured-project .proj-donation .bar-inner {
            position: relative;
            height: 8px;
            background: #eb4534 url(/images/icons/progress-bg.jpg) left top repeat-x;
            width: 0;
            border-radius: 4px;
            -ms-border-radius: 4px;
            -webkit-border-radius: 4px;
            -o-border-radius: 4px;
            -moz-border-radius: 4px;
        }

/*** 

====================================================================
	Price Plans Style
====================================================================

***/

.price-plans {
    position: relative;
    padding: 30px 0px 0px;
}

    .price-plans .table-column {
        position: relative;
        margin-bottom: 30px;
        padding: 0px 15px;
        text-align: center;
    }

    .price-plans .table-inner {
        position: relative;
        border: 1px solid #d0d0d0;
        background: #ffffff;
        padding: 0px;
        width: 100%;
        margin: 0 auto;
        text-align: center;
        transition: all 300ms ease;
        -webkit-transition: all 300ms ease;
        -ms-transition: all 300ms ease;
        -o-transition: all 300ms ease;
        -moz-transition: all 300ms ease;
    }

        .price-plans .table-inner:hover {
            border-color: #eb4534;
        }

    .price-plans .table-column .table-header {
        position: relative;
        margin-left: -1px;
        margin-right: -1px;
        padding: 15px 10px;
        background-color: #eb4534;
    }

    .price-plans .style-two .table-header {
        background: #bf271a;
    }

    .price-plans .style-three .table-header {
        background: #222a33;
    }

    .price-plans .style-four .table-header {
        background: #57b22f;
    }

    .price-plans .table-column .table-header h3 {
        font-size: 16px;
        line-height: 1.8em;
        text-transform: uppercase;
        color: #ffffff;
        font-family: 'Museo',sans-serif;
    }

    .price-plans .price-column {
        position: relative;
        padding: 20px 15px 10px;
    }

    .price-plans .price .amount {
        position: relative;
        display: block;
        font-size: 70px;
        font-weight: 600;
        text-align: center;
        line-height: 1.2em;
        margin-bottom: 0px;
        color: #1e262e;
    }

        .price-plans .price .amount sup {
            top: -30px;
            font-size: 24px;
            color: #eb4534;
            padding-right: 10px;
            font-weight: 400;
        }

    .price-plans .style-two .price .amount sup {
        color: #bf271a;
    }

    .price-plans .style-three .price .amount sup {
        color: #222a33;
    }

    .price-plans .style-four .price .amount sup {
        color: #57b22f;
    }

    .price-plans .price .amount sub {
        font-size: 14px;
        text-transform: uppercase;
        color: #acacac;
        font-weight: 400;
    }

    .price-plans .price p {
        color: #8f8f8f;
        font-size: 14px;
        margin-bottom: 0px;
        text-transform: uppercase;
    }

    .price-plans .line {
        width: 50px;
        height: 5px;
        background: #eb4534;
        margin: 0 auto 30px;
    }

    .price-plans .style-two .line {
        background: #bf271a;
    }

    .price-plans .style-three .line {
        background: #222a33;
    }

    .price-plans .style-four .line {
        background: #57b22f;
    }

    .price-plans .list {
        position: relative;
        padding: 0px 0px 20px;
        border-top: 1px dashed #d0d0d0;
    }

        .price-plans .list h3 {
            font-size: 18px;
            margin-bottom: 10px;
        }

        .price-plans .list li {
            position: relative;
            margin-bottom: 0px;
            line-height: 30px;
            padding: 7px 0px;
            color: #7f7f7f;
            border-bottom: 1px dashed #d0d0d0;
        }

    .price-plans .signup {
        position: relative;
        display: inline-block;
        width: auto;
        font-size: 13px;
        text-transform: capitalize;
        line-height: 24px;
        padding: 5px 20px;
        margin-bottom: 30px;
        color: #ffffff;
        background: #eb4534;
        transition: all 300ms ease;
        -webkit-transition: all 300ms ease;
        -ms-transition: all 300ms ease;
        -o-transition: all 300ms ease;
        -moz-transition: all 300ms ease;
    }

    .price-plans .style-two .signup {
        background: #bf271a;
    }

    .price-plans .style-three .signup {
        background: #222a33;
    }

    .price-plans .style-four .signup {
        background: #57b22f;
    }

    .price-plans .signup .icon {
        position: relative;
        padding-left: 14px;
        top: 1px;
        font-size: 14px;
    }

    .price-plans .signup:before {
        background-color: #222a33;
    }

/*** 

====================================================================
	Breadcrumb Style
====================================================================

***/

.bread-crumb {
    position: relative;
    /*padding:10px 0px;*/
    padding-top: 5px;
    color: #616161;
    margin: 12px 0;
    left: -15px;
    font-size: 15px;
    /*border-bottom:1px solid #d0d0d0;*/
}

    .bread-crumb .fa {
        position: relative;
        color: var(--title-gray);
    }

    .bread-crumb .ative, .bread-crumb .active {
        position: relative;
        padding: 6px 16px;
        border-radius: 12px;
        font-weight: 900;
        background-color: rgba(0,0,0,0.02);
    }

    .bread-crumb .previous {
        position: relative;
        padding: 6px 16px;
        border-radius: 12px;
        color: #616161;
        transition: background-color 0.3s ease;
    }

        .bread-crumb .previous:hover {
            background-color: rgba(0,0,0,0.02);
        }



/*** 

====================================================================
	Tabs Section style
====================================================================

***/

.tabs-section {
    position: relative;
    padding: 30px 0px 0px;
    background: #ffffff;
}

.tabs-box .buttons-side {
    position: relative;
    float: right !important;
    margin-bottom: 30px;
}

.tabs-box .tab-buttons {
    position: relative;
}

    .tabs-box .tab-buttons li {
        position: relative;
        margin-bottom: 20px;
    }

    .tabs-box .tab-buttons .tab-btn {
        position: relative;
        display: block;
        border: 1px solid #d0d0d0;
        padding: 10px 15px 10px 60px;
        line-height: 30px;
        font-size: 14px;
        color: #3d3d3d;
        font-weight: 500;
    }

        .tabs-box .tab-buttons .tab-btn * {
            transition: all 300ms ease;
            -webkit-transition: all 300ms ease;
            -ms-transition: all 300ms ease;
            -o-transition: all 300ms ease;
            -moz-transition: all 300ms ease;
        }

        .tabs-box .tab-buttons .tab-btn.active-btn,
        .tabs-box .tab-buttons .tab-btn:hover {
            background: #c52719;
            color: #ffffff;
            border-color: #c52719;
        }

        .tabs-box .tab-buttons .tab-btn .icon {
            position: absolute;
            left: 20px;
            top: 10px;
            width: 50px;
            height: 30px;
            color: #fb4848;
            font-size: 24px;
        }

        .tabs-box .tab-buttons .tab-btn.active-btn .icon,
        .tabs-box .tab-buttons .tab-btn:hover .icon {
            color: #ffffff;
        }

.tabs-section .tab-buttons .tab-btn h4 {
    font-size: 14px;
    line-height: 30px;
    margin: 0px !important;
}

.tabs-box .tab-buttons .tab-btn p {
    font-size: 14px;
    color: #a7a7a7;
    margin-bottom: 0px;
}

.tabs-box .tab-buttons .tab-btn.active-btn p,
.tabs-box .tab-buttons .tab-btn:hover p {
    color: #ffffff;
}

.tabs-box .tabs-content {
    position: relative;
    float: left !important;
}

.tabs-box .sec-title {
    position: relative;
    margin-bottom: 8px;
}

.tabs-box .read-more {
    position: relative;
    font-size: 14px;
    margin-bottom: 10px;
}

.tabs-box .tab .text {
    position: relative;
    margin-bottom: 30px;
    line-height: 1.8em;
    color: #565656;
}

.tabs-box .tab .list {
    position: relative;
    margin-bottom: 30px;
    line-height: 1.5em;
}

    .tabs-box .tab .list ul li {
        position: relative;
        line-height: 30px;
        padding-left: 30px;
        margin-bottom: 15px;
    }

        .tabs-box .tab .list ul li:before {
            font-family: 'FontAwesome';
            content: "\f00c";
            position: absolute;
            left: 0px;
            top: 0px;
            width: 20px;
            height: 30px;
            line-height: 30px;
            padding-right: 15px;
            font-size: 18px;
            color: #fb4848;
        }

.tabs-box .tab {
    position: relative;
    display: none;
    left: 20px;
    transition: all 500ms ease-out;
    -webkit-transition: all 500ms ease-out;
    -ms-transition: all 500ms ease-out;
    -o-transition: all 500ms ease-out;
    -moz-transition: all 500ms ease-out;
}

    .tabs-box .tab.active-tab {
        display: block;
        left: 0px;
    }

/*** 

====================================================================
	Two Column Fluid
====================================================================

***/

.two-column-fluid {
    position: relative;
    padding: 0px;
    background: #ffffff;
    min-height: 250px;
}

    .two-column-fluid .column {
        position: relative;
        display: block;
        float: left;
        width: 50%;
        color: #ffffff;
    }

    .two-column-fluid .column-inner {
        position: relative;
        padding: 40px 50px;
        z-index: 1;
    }

        .two-column-fluid .column-inner h3 {
            font-size: 24px;
            font-weight: 500;
            margin-bottom: 10px;
        }

        .two-column-fluid .column-inner h4 {
            font-size: 18px;
            font-weight: 400;
            margin-bottom: 20px;
        }

        .two-column-fluid .column-inner .text {
            margin-bottom: 20px;
        }

    .two-column-fluid .column .pattern-layer {
        position: absolute;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
    }

    .two-column-fluid .content-column {
        background: #eb4534;
        min-height: 250px;
    }

        .two-column-fluid .content-column .pattern-layer {
            background: url(/images/icons/map-pattern.png) center center no-repeat;
        }

    .two-column-fluid .image-side {
        position: absolute;
        right: 0px;
        top: 0px;
        width: 50%;
        height: 100%;
        min-height: 100%;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
    }

/*** 

====================================================================
	Experience Section Style
====================================================================

***/

.experience-section {
    position: relative;
    padding: 0px 0px 0px;
    float: right;
}

    .experience-section .post {
        position: relative;
        margin-bottom: 40px;
    }

        .experience-section .post .inner {
            position: relative;
            padding: 0px 0px 0px 90px;
        }

        .experience-section .post .post-title {
            position: relative;
            font-size: 17px;
            margin-bottom: 10px;
            font-weight: 600;
            padding: 15px 0px 0px 0px;
        }

        .experience-section .post .icon {
            position: absolute;
            left: 0px;
            top: 8px;
            font-size: 18px;
            line-height: 42px;
            width: 72px;
        }

        .experience-section .post .icon-text {
            position: absolute;
            left: 0px;
            top: 0px;
            padding: 15px 0px;
            text-align: center;
            width: 100%;
            font-family: 'Museo',sans-serif;
        }

        .experience-section .post .inner {
            position: relative;
            max-width: 540px;
            margin: 0 0;
        }

        .experience-section .post .text {
            position: relative;
            font-size: 15px;
            color: #565656;
        }


/*** 

====================================================================
	Side Bar Style
====================================================================

 ***/
.sidebar-page .sidebar {
    position: relative;
    padding: 0px;
    z-index: 1000;
}

.sidebar .widget {
    position: relative;
    margin-bottom: 30px;
    z-index: 9000;
}

.sidebar .search-form input[type="search"],
.sidebar .search-form input[type="text"] {
    position: relative;
    width: 100%;
    line-height: 24px;
    padding: 8px 42px 8px 15px;
    border: 1px solid #d0d0d0;
    background: #ffffff;
    color: #3d3d3d;
    height: 42px;
    font-size: 14px;
    color: #292929;
}

    .sidebar .search-form input[type="search"]:focus,
    .sidebar .search-form input[type="text"]:focus {
        border-color: #36404b;
    }

.sidebar .search-form .form-group {
    position: relative;
}

.sidebar .search-form button {
    position: absolute;
    right: 1px;
    top: 1px;
    line-height: 24px;
    display: block;
    width: 40px;
    height: 40px;
    padding: 7px 10px 8px;
    text-align: center;
    font-size: 16px;
    color: #cccccc;
    background: none;
}

    .sidebar .search-form button:hover {
        color: #36404b;
    }

.sidebar .sec-title {
    margin-bottom: 24px;
    z-index: 9000;
}

.sidebar .recent-posts .post {
    position: relative;
    font-size: 14px;
    margin-bottom: 30px;
    min-height: 60px;
    padding: 0px 0px 0px 80px;
    color: #7f7f7f;
}

    .sidebar .recent-posts .post .post-thumb {
        position: absolute;
        left: 0px;
        top: 0px;
        width: 60px;
        height: 60px;
    }

        .sidebar .recent-posts .post .post-thumb img {
            width: 100%;
            display: block;
        }

    .sidebar .recent-posts .post h4 {
        font-size: 16px;
        font-weight: 600;
        margin: 5px 0px 10px;
        color: #292929;
    }

    .sidebar .recent-posts .post a,
    .sidebar .recent-posts .post a:hover {
        color: var(--green-main);
    }

    .sidebar .recent-posts .post h4 a {
        color: #292929;
    }

    .sidebar .recent-posts .post .fa {
        font-size: 18px;
    }

.sidebar-page .contact-info {
    position: relative;
    font-size: 14px;
    margin-bottom: 30px;
}

    .sidebar-page .contact-info .text {
        position: relative;
        font-size: 13px;
        font-family: 'Open Sans',sans-serif;
        margin-bottom: 10px;
        color: #7f7f7f;
    }

    .sidebar-page .contact-info li {
        position: relative;
        margin-bottom: 8px;
        line-height: 1.8em;
        color: #7f7f7f;
    }

        .sidebar-page .contact-info li strong {
            position: relative;
            padding-right: 10px;
            font-weight: 600;
            color: #292929;
        }

    .sidebar-page .contact-info a {
        color: #f17338;
        transition: all 300ms ease-in;
        -webkit-transition: all 300ms ease-in;
        -ms-transition: all 300ms ease-in;
        -o-transition: all 300ms ease-in;
        -moz-transition: all 300ms ease-in;
    }

        .sidebar-page .contact-info a:hover {
            color: #3d3d3d;
        }

.sidebar .popular-tags a {
    position: relative;
    display: inline-block;
    line-height: 20px;
    padding: 4px 10px 5px;
    background: #222a33;
    color: #ffffff;
    margin: 0px 2px 7px 0px;
    text-transform: none;
    font-size: 12px;
    transition: all 300ms ease;
    -webkit-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
}

    .sidebar .popular-tags a:hover {
        background-color: #eb4534;
        color: #ffffff;
    }

.sidebar .twitter-feeds .feed {
    position: relative;
    padding: 0px 0px 0px 30px;
    margin-bottom: 20px;
}

    .sidebar .twitter-feeds .feed a {
        position: relative;
        color: #eb4534;
    }

    .sidebar .twitter-feeds .feed .time {
        position: relative;
        color: #dddddd;
        font-size: 12px;
        text-transform: uppercase;
    }

    .sidebar .twitter-feeds .feed strong {
        font-weight: 400;
    }

    .sidebar .twitter-feeds .feed .icon {
        position: absolute;
        width: 30px;
        height: 20px;
        left: 0px;
        top: 3px;
        line-height: 20px;
        font-size: 16px;
        color: #eb4534;
    }

.sidebar .list {
    position: relative;
}

    .sidebar .list li {
        position: relative;
        margin-bottom: 10px;
        line-height: 32px;
        padding: 8px 8px 8px 18px;
        list-style: none;
    }

        .sidebar .list li .icon {
            position: absolute;
            left: 0px;
            top: 0px;
            width: 40px;
            height: 32px;
            line-height: 32px;
            display: block;
            color: var(--green-main);
            font-size: 18px;
        }

        .sidebar .list li a {
            position: relative;
            display: block;
            color: #3d3d3d;
            font-size: 14px;
            font-weight: 600;
        }

            .sidebar .list li a:hover {
                color: var(--green-main);
            }


/**
* Faq Page Styles.
**/

.faq .faq-content .faq-text p {
    color: #8e8d8d;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 5px;
}

.faq .faq-content .faq-search {
    background: #f9f9f9 none repeat scroll 0 0;
    padding: 20px;
}

    .faq .faq-content .faq-search input[type=text] {
        border: 1px solid #e9e9e9;
        color: #cccccc;
        font-size: 14px;
        padding: 10px 20px;
        width: 76%;
    }

    .faq .faq-content .faq-search input[type=button] {
        /*#84b567 xroma gia button sto search*/
        background: #2c353d none repeat scroll 0 0;
        border: medium none;
        color: #fff;
        font-size: 14px;
        font-weight: 600;
        margin-left: -4px;
        padding: 10px 40px;
        text-transform: uppercase;
    }

.faq .faq-content .general-question {
    margin-top: 50px;
}

.general-question .panel-group .panel {
    border-radius: 0;
    margin-top: 15px;
}

.general-question .panel-group .panel-default > .panel-heading {
    border-color: #e9e9e9;
    background-color: #ffffff;
}

.general-question .panel-group .panel-default .panel-title {
    color: #8e8d8d;
    font-size: 14px;
    font-weight: 500;
    padding: 5px 0;
}

    .general-question .panel-group .panel-default .panel-title a {
        display: block;
        position: relative;
    }

        .general-question .panel-group .panel-default .panel-title a:after {
            content: "\f106";
            font-family: fontawesome;
            background: #f9f9f9 none repeat scroll 0 0;
            border-left: 1px solid #e9e9e9;
            color: #7d7d7d;
            font-size: 24px;
            padding: 9px 15px;
            position: absolute;
            right: -15px;
            top: -15px;
        }

        .general-question .panel-group .panel-default .panel-title a.collapsed:after {
            content: "\f107";
            font-family: fontawesome;
            background: #f9f9f9 none repeat scroll 0 0;
            border-left: 1px solid #e9e9e9;
            color: #7d7d7d;
            font-size: 24px;
            padding: 9px 15px;
            position: absolute;
            right: -15px;
            top: -15px;
        }

.general-question .panel-body {
    padding: 25px 15px 30px;
}

#blog-post article .general-question .panel-body .panel_body_up h2 {
    color: #F38551;
    font-size: 24px;
    font-weight: 400;
    padding: 10px 0;
}

.general-question .panel-body .panel_body_up p {
    color: #8e8d8d;
    font-size: 14px;
    font-weight: 500;
}

.general-question .panel-body .panel_body_down .panel_down_img {
    float: left;
}

.general-question .panel-body .panel_body_down .panel_down_text {
    color: #8e8d8d;
    font-size: 14px;
    font-weight: 500;
    overflow: hidden;
    padding-left: 15px;
}


/** 
* Testimonials Version 1 Styles.
**/

#testimonials {
    padding: 80px 0;
    background: #F5F4F4;
}

    #testimonials .single-testimonial {
        background: #fff;
    }

        #testimonials .single-testimonial .profile-info {
            padding: 15px 0px 15px 15px;
        }

            #testimonials .single-testimonial .profile-info img {
                position: relative;
                bottom: 30px;
            }

            #testimonials .single-testimonial .profile-info h2 {
                font-size: 14px;
                line-height: 26px;
                color: #312F3E;
                font-weight: bold;
                text-transform: uppercase;
                text-align: center;
                margin: 0;
                margin-top: -10px;
            }

        #testimonials .single-testimonial .content {
            width: 61%;
            padding-top: 20px;
            padding-right: 25px;
            border-top: 2px solid #F38551;
            padding-left: 20px;
        }

            #testimonials .single-testimonial .content p {
                font-size: 14px;
                line-height: 26px;
                color: #8e8d8d;
                font-weight: 600;
                margin-bottom: 0;
            }

        #testimonials .single-testimonial:before {
            background: #F38551;
        }

        #testimonials .single-testimonial .content .fa {
            font-size: 19px;
            margin-right: 10px;
            color: #51B7E3;
        }

        #testimonials .single-testimonial:hover .fa,
        #testimonials .single-testimonial:hover h2,
        #testimonials .single-testimonial:hover p {
            color: #fff;
        }

    #testimonials.testimonials_v1 {
        padding: 50px 0;
    }

        #testimonials.testimonials_v1 .testimonials_v1_content {
            background-color: #f5f4f4;
            margin-left: -15px;
            margin-right: 15px;
            padding: 0 25px;
        }

        #testimonials.testimonials_v1 .testimonials_v1_content {
            padding: 50px 20px;
        }

            #testimonials.testimonials_v1 .testimonials_v1_content .single-testimoinal-wrap {
                margin-bottom: 50px;
            }

                #testimonials.testimonials_v1 .testimonials_v1_content .single-testimoinal-wrap:last-child {
                    margin-bottom: 0;
                }

                #testimonials.testimonials_v1 .testimonials_v1_content .single-testimoinal-wrap .single-testimonial .content {
                    width: 83%;
                }


/** 
* Testimonials Version 2 Styles.
**/

.testimonials_v2 {
    padding: 80px 0;
}

    .testimonials_v2 .testimonials_v2_content {
        background-color: #fff;
        margin-left: -15px;
        margin-right: 15px;
        padding: 0 25px;
    }

    .testimonials_v2 #testimonials.testimonials_v2_content {
        padding: 0;
        background: #fff;
    }

        .testimonials_v2 #testimonials.testimonials_v2_content .single-testimoinal-wrap {
            margin-bottom: 50px;
        }

            .testimonials_v2 #testimonials.testimonials_v2_content .single-testimoinal-wrap .single-testimonial .content {
                width: 74%;
                margin-bottom: 19px;
            }

            .testimonials_v2 #testimonials.testimonials_v2_content .single-testimoinal-wrap .single-testimonial {
                background: #F7F7F7;
            }

/**
* Projects Version one Styles.
**/

#project-version-one {
    padding: 0px 0;
}


    #project-version-one .normal {
        background-color: green;
    }

    #project-version-one.active {
        background-color: red;
    }

    #project-version-one .gallery-filter {
        margin-bottom: 10px;
        text-align: center;
    }

        #project-version-one .gallery-filter li {
            display: inline;
        }

            #project-version-one .gallery-filter li span {
                display: inline-block;
                font-size: 13px;
                line-height: 45px;
                color: #787878;
                font-weight: 600;
                text-transform: uppercase;
                cursor: pointer;
                padding: 0 20px;
                position: relative;
                -webkit-transition: all .3s ease;
                transition: all .3s ease;
            }

            #project-version-one .gallery-filter li.active span:before {
                content: ' ';
                display: block;
                width: 100%;
                height: 2px;
                background: #F38551;
                position: absolute;
                bottom: -1px;
                left: 0;
            }

            #project-version-one .gallery-filter li.active,
            #project-version-one .gallery-filter li:hover {
                background-color: rgba(0,0,0,0.02);
                border-radius: 14px;
            }

    #project-version-one .single-project-item {
        margin-bottom: 20px;
        /*display: none;*/
        padding: 0 10px;
    }

        #project-version-one .single-project-item .img-wrap {
            position: relative;
        }

            #project-version-one .single-project-item .img-wrap img {
                width: 100%;
            }

            #project-version-one .single-project-item .img-wrap .content-wrap {
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                padding: 10px;
                cursor: pointer;
                opacity: 0;
                filter: alpha(opacity=0);
                background-color: transparent;
                -webkit-transition: all .3s ease;
                transition: all .3s ease;
            }

                #project-version-one .single-project-item .img-wrap .content-wrap:before {
                    background: rgba(0, 0, 0, .55);
                }

        #project-version-one .single-project-item:hover .img-wrap .content-wrap {
            opacity: 1;
            filter: alpha(opacity=100);
        }

        #project-version-one .single-project-item .img-wrap .content-wrap .border {
            width: 100%;
            height: 100%;
            border: 1px solid #fff;
        }

        #project-version-one .single-project-item .img-wrap .content-wrap h4 {
            color: #fff;
            margin: 0;
            font-size: 16px;
            line-height: 22px;
            text-transform: uppercase;
            font-weight: bold;
            text-align: center;
        }

        #project-version-one .single-project-item .img-wrap .content-wrap span {
            color: #fff;
            display: block;
            font-size: 14px;
            line-height: 22px;
            text-transform: capitalize;
            font-weight: 600;
            text-align: center;
        }

        #project-version-one .single-project-item .img-wrap .content-wrap .content {
            position: relative;
            top: 45%;
        }


/**
* Projects Version Two Styles.
**/

#project-version-two {
    padding: 0px 0 130px;
}

    #project-version-two .gallery-filter {
        margin-bottom: 50px;
        text-align: center;
        border-bottom: 1px solid #E2E2E2;
    }

        #project-version-two .gallery-filter li {
            display: inline;
        }

            #project-version-two .gallery-filter li span {
                display: inline-block;
                font-size: 13px;
                line-height: 45px;
                color: #787878;
                font-weight: 600;
                text-transform: uppercase;
                cursor: pointer;
                padding: 0 20px;
                position: relative;
                -webkit-transition: all .3s ease;
                transition: all .3s ease;
            }

            #project-version-two .gallery-filter li.active span:before {
                content: ' ';
                display: block;
                width: 100%;
                height: 2px;
                background: #F38551;
                position: absolute;
                bottom: -1px;
                left: 0;
            }

            #project-version-two .gallery-filter li.active span,
            #project-version-two .gallery-filter li:hover span {
                color: #F38551;
            }

    #project-version-two .masonary-gallery {
        position: relative;
        padding: 0;
    }

    #project-version-two .masonary-item {
        position: relative;
        float: left;
        overflow: hidden;
        width: 25%;
        height: 250px;
        margin-bottom: 15px;
        padding: 0 8px;
    }

        #project-version-two .masonary-item.width-1 {
            width: 25%;
        }

        #project-version-two .masonary-item.width-2 {
            width: 50%;
        }

        #project-version-two .masonary-item.height-1 {
            height: 513px;
        }

        #project-version-two .masonary-item img {
            width: 100%;
            height: 100%;
        }

        #project-version-two .masonary-item .img-wrap {
            position: relative;
        }

            #project-version-two .masonary-item .img-wrap .content-wrap {
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                padding: 10px;
                cursor: pointer;
                background: rgba(0, 0, 0, .55);
                opacity: 0;
                filter: alpha(opacity=0);
                -webkit-transition: all .3s ease;
                transition: all .3s ease;
            }

        #project-version-two .masonary-item:hover .img-wrap .content-wrap {
            opacity: 1;
            filter: alpha(opacity=100);
        }

        #project-version-two .masonary-item .img-wrap .content-wrap .border {
            width: 100%;
            height: 100%;
            border: 1px solid #fff;
        }

        #project-version-two .masonary-item .img-wrap .content-wrap h4 {
            color: #fff;
            margin: 0;
            font-size: 16px;
            line-height: 22px;
            text-transform: uppercase;
            font-weight: bold;
            text-align: center;
        }

        #project-version-two .masonary-item .img-wrap .content-wrap span {
            color: #fff;
            display: block;
            font-size: 14px;
            line-height: 22px;
            text-transform: capitalize;
            font-weight: 600;
            text-align: center;
        }

        #project-version-two .masonary-item .img-wrap .content-wrap .content {
            position: relative;
            top: 45%;
        }

/**
* Project Version 3 Styles.
**/

#project-version-one .single-project-item.col-lg-3 {
    margin-bottom: 0px;
    display: none;
    padding: 0 0px;
}

    #project-version-one .single-project-item.col-lg-3 img {
        width: 100%;
        height: 100%;
    }


#project-version-one.project-v3 {
    background: #f9f9f9;
}

#project-version-one .two-col-gallery img {
    width: 100%;
}

#project-version-one .two-col-gallery .content {
    text-align: center;
    background: #fff;
    padding: 20px 0;
    display: block;
}

    #project-version-one .two-col-gallery .content h4 {
        text-transform: uppercase;
        font-size: 15px;
        font-weight: bold;
        line-height: 22px;
        margin: 0;
        color: #787878;
    }

    #project-version-one .two-col-gallery .content span {
        font-size: 14px;
        text-transform: capitalize;
        color: #787878;
        font-weight: 600;
    }

#project-version-one .two-col-gallery .single-project-item:hover .content h4 {
    color: #fff;
}

#project-version-one .two-col-gallery .single-project-item:hover .content span {
    color: #fff;
}

#project-version-one .two-col-gallery .single-project-item .overlay {
    position: relative;
}

    #project-version-one .two-col-gallery .single-project-item .overlay:before {
        content: ' ';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 0%;
        background: rgba(0,0,0,.60);
        z-index: 1;
        transition: all .3s ease;
    }

    #project-version-one .two-col-gallery .single-project-item .overlay:after {
        content: ' ';
        width: auto;
        height: auto;
        position: absolute;
        top: 10px;
        bottom: 10px;
        left: 10px;
        right: 10px;
        border: 1px solid #808080;
        z-index: 2;
        visibility: hidden;
    }

#project-version-one .two-col-gallery .single-project-item:hover .overlay:before {
    height: 100%;
}

#project-version-one .two-col-gallery .single-project-item:hover .overlay:after {
    visibility: visible;
}

#project-version-one .two-col-gallery .single-project-item .content:before {
    background: #F38551;
}

#project-version-one .two-col-gallery .single-project-item:hover .content:before {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
    transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}

/**
* Project gallery version 4 Styles.
**/
#project-version-one .normal-gallery.gallery-v4 .single-project-item {
    padding: 0;
    margin: 0;
}

    #project-version-one .normal-gallery.gallery-v4 .single-project-item:hover {
        background: #fff;
    }

    #project-version-one .normal-gallery.gallery-v4 .single-project-item img {
        transition: all .3s ease;
    }

    #project-version-one .normal-gallery.gallery-v4 .single-project-item:hover img {
        opacity: 0;
    }

    #project-version-one .normal-gallery.gallery-v4 .single-project-item .img-wrap .content-wrap {
        width: auto;
        height: auto;
        left: 10px;
        right: 10px;
        top: 10px;
        bottom: 10px;
    }

.styled-modal .modal-content {
    border-radius: 42px !important;
    border: 8px solid var(--green-main) !important;
    box-shadow: 0 24px 88px 10px rgba(0,0,0,0.7) !important;
    padding: 10px 40px !important;
    background-image: url("../../Content/css/assets/leafs.png");
    background-size: 100%;
}

.styled-modal .modal-title {
    margin: 0 auto;
    font-size: 34px;
}

.styled-modal .form-control {
    max-width: 220px;
    margin: 0 auto;
    text-align: center;
}

.styled-modal h6 {
    margin-bottom: 12px;
}

.styled-modal .fa-phone {
    color: white;
    line-height: 46px;
    font-size: 30px;
}

.phone-ic {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 56px;
    width: 56px;
    background: var(--gradient-green);
    border: 6px solid white;
    border-radius: 100%;
    box-shadow: 0px 2px 8px 0 rgba(0,0,0,0.42);
}

.fa-info-circle {
    color: var(--green-main);
}

.clock-icon span {
    display: block;
    margin-top: 12px;
    background-color: rgba(0,0,0,0.03);
    border-radius: 28px;
    padding: 1px 8px;
}

.styled-modal .modal-body {
    box-shadow: inset 2px 2px 22px 0 rgba(0,0,0,0.12);
    border-radius: 28px;
    background: white;
    border: 2px solid rgb(236,236,236);
}

.close-btn {
    background: #e6372e;
    color: white;
    font-weight: bolder;
    box-shadow: 0 2px 4px 0 #e6372e;
    padding: 8px 28px;
    border-radius: 8px !important;
    position: absolute;
    bottom: 0;
    left: 50%;
    border: 2px solid white;
    transform: translate(-50%, 50%);
}

    .close-btn:hover {
        color: white;
    }

.city_logo {
    height: 140px;
    opacity: 0.9;
}

.styled-modal .modal-header, .styled-modal .modal-footer {
    border: none !important;
}



.styled-modal .form-control::-webkit-input-placeholder {
    text-align: center;
}

.styled-modal .form-control:-moz-placeholder { /* Firefox 18- */
    text-align: center;
}

.styled-modal .form-control::-moz-placeholder { /* Firefox 19+ */
    text-align: center;
}

.styled-modal .form-control:-ms-input-placeholder {
    text-align: center;
}

.styled-modal .btn-green-main {
    max-width: 120px;
    margin: 12px auto;
    filter: grayscale(0);
}

    .styled-modal .btn-green-main[disabled] {
        filter: grayscale(100%);
    }



.homepage-cover {
    min-height: 444px;
    position: relative;
    padding-top: 30px;
}

    /*.homepage-cover::after {
            content: "";
            background-image: url("/Content/css/assets/home-assets/city-example.svg");
            background-size: cover;
            background-position: bottom;
            opacity: 0.5;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            position: absolute;
            z-index: -1;
        }*/

    .homepage-cover::before {
        content: "";
        background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
        left: 0;
        bottom: 0;
        right: 0;
        position: absolute;
        z-index: 0;
        height: 30%;
    }

    .homepage-cover h1 {
        margin-bottom: 22px;
    }

.school-cont {
    padding: 20px 60px 60px 60px;
    box-shadow: 0 20px 40px 0 rgba(0,0,0,0.06);
    border-radius: 50px;
    margin-bottom: 100px;
    margin-top: 60px;
    position: relative;
    background-color: white;
}


.vote-image {
    width: 100%;
    border-radius: 40px;
    display: block;
    margin-bottom: 20px;
}

.merchant-details-image {
    width: 320px;
    height: auto;
    border-radius: 30px;
    display: block;
    margin-bottom: 20px;
    margin-top: 42px;
}

.vote-sub {
    min-height: 48px;
}

.vote-ic {
    width: 38px;
    height: 38px;
    margin-right: 12px;
    display: inline-block;
}


.donate-ic {
    display: inline-block;
    width: 42px;
    height: 42px;
    right: 16px;
    position: absolute;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(../../Content/css/assets/vote-donate-ic.svg);
}


.school-wrapper {
    margin-top: 0px;
}

.school-home-cont {
    height: 130px;
    border-radius: 30px;
    border: 6px solid white;
    box-shadow: 0 12px 24px 0 rgba(0,0,0,0.1);
    width: 23%;
    color: black;
    position: relative;
    overflow: hidden;
    z-index: 10;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.school-current-points {
    color: white;
    padding: 0px 16px;
    display: inline-block;
    border-radius: 12px;
    background: var(--green-main);
    font-size: 14px;
    font-weight: bold;
}

.school-p {
    color: white;
    font-size: 10px;
    font-weight: bolder;
    margin-top: -4px;
}

.school-info {
    padding: 6px 12px;
}

.school-home-cont img {
    height: 100%;
    object-fit: contain;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
}

.school-home-cont h5 {
    color: white;
    font-size: 15px;
}

.school-home-cont span {
    color: white;
    font-size: 12px;
    margin-top: -5px;
    display: block
}

.school-home-cont:before {
    content: "";
    width: 100%;
    height: 100%;
    background: rgb(0,0,0);
    background: linear-gradient(0deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

.fa-school {
    color: #36a9e1;
}

.school-header {
    padding: 18px 32px;
    border-radius: 8px;
    border-left: 10px solid var(--green-main);
    box-shadow: 0 4px 16px 0 rgba(0,0,0,0.09);
    background-color: white;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

    .school-header:hover {
        cursor: pointer;
        background-color: rgb(253,253,253);
        box-shadow: 0 2px 12px 0 rgba(0,0,0,0.12);
    }

    .school-header h2 {
        display: inline-block;
    }

.school-more {
    margin-left: auto !important;
}

    .school-more span {
        margin-right: 12px;
    }


/*School HTML raw formatting*/

.school-raw img {
    border: 12px solid white;
    border-radius: 12px;
    box-shadow: 0 4px 22px 0 rgba(0,0,0,0.12);
    min-width: 50%;
    max-width: 96%;
    margin: 20px auto;
    display: block;
}

.school-raw ul {
    display: inline-flex;
    flex-direction: column;
    margin-left: 20px;
}

.school-raw li {
    list-style: disc;
}

.school-raw a {
    text-decoration: underline;
    color: var(--green-main);
    font-weight: bolder;
}

.school-raw li strong {
    display: inline-block;
    background-color: rgba(0,0,0,0.02);
    border-radius: 32px;
    padding: 6px 24px;
    margin-bottom: 12px;
}


/**
* Project Gallery Version 5 Styles.
**/

#project-version-one.project-v5 {
    background: #F9F9F9;
}

#project-version-one .normal-gallery.gallery-v5 .single-project-item {
    margin-bottom: 30px;
    border-radius: 20px;
    box-shadow: 0 12px 28px 0 rgba(0,0,0,0.1);
    border: 8px solid white;
}

    #project-version-one .normal-gallery.gallery-v5 .single-project-item .col-lg-2,
    #project-version-one .normal-gallery.gallery-v5 .single-project-item .col-lg-6,
    #project-version-one .normal-gallery.gallery-v5 .single-project-item .col-lg-4 {
        background: #fff;
    }

    #project-version-one .normal-gallery.gallery-v5 .single-project-item .col-lg-6 {
        padding-left: 0;
    }

        #project-version-one .normal-gallery.gallery-v5 .single-project-item .col-lg-6 img {
            max-width: 100%;
        }

    #project-version-one .normal-gallery.gallery-v5 .single-project-item .col-lg-4 {
        padding-top: 19px;
        padding-bottom: 25px;
    }

        #project-version-one .normal-gallery.gallery-v5 .single-project-item .col-lg-2:before,
        #project-version-one .normal-gallery.gallery-v5 .single-project-item .col-lg-6:before,
        #project-version-one .normal-gallery.gallery-v5 .single-project-item .col-lg-4:before {
            background: #222A33;
        }

    #project-version-one .normal-gallery.gallery-v5 .single-project-item:hover .col-lg-2:before,
    #project-version-one .normal-gallery.gallery-v5 .single-project-item:hover .col-lg-6:before,
    #project-version-one .normal-gallery.gallery-v5 .single-project-item:hover .col-lg-4:before {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
        -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
        transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
    }

    #project-version-one .normal-gallery.gallery-v5 .single-project-item .meta {
        padding: 10px 0;
        position: relative;
    }

        #project-version-one .normal-gallery.gallery-v5 .single-project-item .meta:before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 50px;
            height: 4px;
            background: #222A33;
        }

    #project-version-one .normal-gallery.gallery-v5 .single-project-item:hover .meta:before {
        background: #fff;
    }

    #project-version-one .normal-gallery.gallery-v5 .single-project-item .meta h4 {
        font-size: 15px;
        line-height: 24px;
        color: #303030;
        font-weight: bold;
        text-transform: uppercase;
        margin: 0;
    }

    #project-version-one .normal-gallery.gallery-v5 .single-project-item:hover .meta h4 {
        color: #fff;
    }

    #project-version-one .normal-gallery.gallery-v5 .single-project-item .meta span {
        font-size: 14px;
        color: #A7A7A7;
        font-weight: 600;
    }

    #project-version-one .normal-gallery.gallery-v5 .single-project-item:hover .meta span {
        color: #fff;
    }



    #project-version-one .normal-gallery.gallery-v5 .single-project-item .proj-donation span strong {
        font-size: 24px;
        line-height: 32px;
        color: #303030;
        font-weight: bold;
        text-transform: uppercase;
        margin: 0;
    }

    #project-version-one .normal-gallery.gallery-v5 .single-project-item:hover .proj-donation span strong {
        color: #fff;
    }

    #project-version-one .normal-gallery.gallery-v5 .single-project-item .proj-donation span {
        font-size: 14px;
        color: #A7A7A7;
        font-weight: 600;
    }

    #project-version-one .normal-gallery.gallery-v5 .single-project-item:hover .proj-donation span {
        color: #fff;
    }


    #project-version-one .normal-gallery.gallery-v5 .single-project-item p {
        font-size: 14px;
        font-weight: 600;
        color: #8E8D8D;
        line-height: 21px;
        /*margin: 20px 0px;*/
    }

    #project-version-one .normal-gallery.gallery-v5 .single-project-item:hover p {
        color: #fff;
    }

    #project-version-one .normal-gallery.gallery-v5 .single-project-item a.read-more {
        font-size: 12px;
        font-weight: bold;
        color: #fff;
        text-transform: uppercase;
        background: #F38551;
        line-height: 30px;
        display: inline-block;
        padding: 0 25px;
    }

        #project-version-one .normal-gallery.gallery-v5 .single-project-item a.read-more:hover {
            color: #F38551;
        }

        #project-version-one .normal-gallery.gallery-v5 .single-project-item a.read-more:before {
            background: #fff;
        }

    #project-version-one .normal-gallery.gallery-v5 .single-project-item .overlay {
        position: relative;
        height: 250px;
    }

        #project-version-one .normal-gallery.gallery-v5 .single-project-item .overlay:before {
            content: ' ';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 0%;
            background: rgba(0,0,0,.60);
            z-index: 1;
            transition: all .3s ease;
        }

        #project-version-one .normal-gallery.gallery-v5 .single-project-item .overlay:after {
            content: ' ';
            width: auto;
            height: auto;
            position: absolute;
            top: 10px;
            bottom: 10px;
            left: 10px;
            right: 10px;
            border: 1px solid #808080;
            z-index: 2;
            visibility: hidden;
        }

    #project-version-one .normal-gallery.gallery-v5 .single-project-item:hover .overlay:before {
        height: 100%;
    }

    #project-version-one .normal-gallery.gallery-v5 .single-project-item:hover .overlay:after {
        visibility: visible;
    }

#project-version-one .normal-gallery.gallery-v5 {
    margin: 0;
}

.fa-poll {
    color: #1d71b8;
}


/**
* Become a volunteer page Styles.
**/

.become-a-volunteer {
    /*padding: 30px 0;*/
}

    .become-a-volunteer .list li {
        line-height: 24px;
    }

        .become-a-volunteer .list li .icon {
            left: 12px;
            font-size: 10px;
            line-height: 24px;
            display: none;
        }

    .become-a-volunteer .col-sm-2 .box-radius {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        text-align: center;
        background: #E26023;
        margin: auto;
        margin-bottom: 25px;
    }

        .become-a-volunteer .col-sm-2 .box-radius span {
            font-size: 24px;
            line-height: 100px;
            color: #fff;
            text-transform: capitalize;
        }

    .become-a-volunteer .col-sm-3 .box-radius {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        text-align: center;
        background: #E26023;
        margin: auto;
        margin-bottom: 25px;
    }

        .become-a-volunteer .col-sm-3 .box-radius span {
            font-size: 24px;
            line-height: 100px;
            color: #fff;
            text-transform: capitalize;
        }

    .become-a-volunteer .process {
        /*background: url(/images/resource/dotted-line.png) -1px -13px no-repeat;*/
        margin-top: 60px;
    }

    .become-a-volunteer .col-lg-2 h3 {
        font-size: 17px;
        font-weight: 600;
        margin-bottom: 15px;
        color: #3D3D3D;
        text-transform: none;
    }

    .become-a-volunteer a.join-us {
        position: relative;
        display: inline-block;
        border: 2px solid #BC2B1D;
        color: #BC2B1D;
        font-size: 14px;
        line-height: 24px;
        padding: 5px 40px;
        text-transform: uppercase;
        font-weight: 600;
        font-family: 'Open Sans',sans-serif;
        margin-top: 25px;
        transition: all .3s ease;
    }

        .become-a-volunteer a.join-us:hover {
            background: #BC2B1D;
            color: #fff;
        }

    .become-a-volunteer .col-lg-3:hover .hvr-pulse {
        -webkit-animation-name: hvr-pulse;
        animation-name: hvr-pulse;
        -ms-animation-name: hvr-pulse;
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -ms-animation-duration: 1s;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        -ms-animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        -ms-animation-iteration-count: infinite;
    }


/**
* Event Styles.
**/


.schedule-section {
    position: relative;
    padding: 60px 0px 80px;
    background: #ffffff;
}

.download-btn {
    position: relative;
    display: inline-block;
    line-height: 24px;
    padding: 10px 25px 8px;
    margin-bottom: 20px;
    border: 2px solid #a0a0a0;
    color: #a6a6a6;
    font-size: 14px;
    font-family: 'Montserrat',sans-serif;
    text-transform: uppercase;
}

    .download-btn .fa {
        padding-right: 20px;
        font-size: 20px;
    }

    .download-btn:hover {
        color: #ffffff;
        background: #fc5a1b;
        border-color: #fc5a1b;
    }

.schedule-box {
    position: relative;
    border: 1px solid #dadada;
}

    .schedule-box .tab-buttons {
        position: relative;
        width: 100%;
        display: table;
    }

.style-two .schedule-box .tab-buttons {
    display: block;
    float: left;
    width: 18%;
}

.schedule-box .tab-buttons .tab-btn {
    position: relative;
    display: table-cell;
    text-align: center;
    background: #ffffff;
    color: #fc5a1b;
    line-height: 1.4em;
    padding: 20px 10px;
    border-bottom: 1px solid #dadada;
    border-right: 1px solid #dadada;
    font-family: 'Lato',sans-serif;
    cursor: pointer;
    transition: all 300ms ease;
    -webkit-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
}

.style-two .schedule-box .tab-buttons .tab-btn {
    display: block;
}

.schedule-box .tab-buttons .tab-btn:last-child {
    border-right: none;
}

.style-two .schedule-box .tab-buttons .tab-btn:last-child {
    border-bottom: none;
    border-right: 1px solid #dadada;
}

.schedule-box .tab-buttons .tab-btn.active,
.schedule-box .tab-buttons .tab-btn:hover {
    border-color: #fc5a1b;
    background: #fc5a1b;
    color: #ffffff;
}

.style-two .schedule-box .tab-buttons .tab-btn.active,
.style-two .schedule-box .tab-buttons .tab-btn:hover {
    border-bottom-color: #ffffff;
}

.schedule-box .tab-buttons .tab-btn .day {
    display: block;
    text-transform: capitalize;
    font-size: 22px;
    margin-bottom: 7px;
}

.schedule-box .tab-buttons .tab-btn .date {
    display: block;
    font-size: 15px;
}

.schedule-box .tab-buttons .tab-btn .curve {
    position: absolute;
    display: block;
    width: 100%;
    left: 0px;
    bottom: 0px;
    background: none;
    text-align: center;
    opacity: 0;
}

.style-two .schedule-box .tab-buttons .tab-btn .curve {
    width: 20px;
    height: 100%;
    bottom: auto;
    left: auto;
    right: 0px;
    top: 0px;
}

.schedule-box .tab-buttons .tab-btn.active .curve,
.schedule-box .tab-buttons .tab-btn:hover .curve {
    bottom: -19px;
    opacity: 1;
    transition: all 300ms ease 200ms;
    -webkit-transition: all 300ms ease 200ms;
    -ms-transition: all 300ms ease 200ms;
    -o-transition: all 300ms ease 200ms;
    -moz-transition: all 300ms ease 200ms;
}

.style-two .schedule-box .tab-buttons .tab-btn.active .curve,
.style-two .schedule-box .tab-buttons .tab-btn:hover .curve {
    bottom: auto;
    right: -17px;
}

.schedule-box .tab-buttons .tab-btn .curve:after {
    content: '';
    display: inline-block;
    width: 0px;
    height: 0px;
    border: 7px solid transparent;
    border-top-color: #fc5a1b;
}

.style-two .schedule-box .tab-buttons .tab-btn .curve:after {
    content: '';
    position: absolute;
    right: 3px;
    top: 25px;
    display: inline-block;
    width: 0px;
    height: 0px;
    border: 7px solid transparent;
    border-left-color: #fc5a1b;
}

.schedule-box .tabs-box {
    position: relative;
}

.style-two .schedule-box .tabs-box {
    float: left;
    width: 82%;
}

.schedule-box .tab {
    position: relative;
    padding: 40px 20px;
    display: none;
}

.style-two .schedule-box .tab {
    padding-bottom: 10px;
}

.schedule-box .tab.current {
    display: block;
}

.schedule-box .hour-box {
    position: relative;
    padding-left: 150px;
    font-size: 16px;
    color: #7f7f7f;
    padding-bottom: 20px;
    overflow: hidden;
}

    .schedule-box .hour-box:before {
        content: '';
        position: absolute;
        left: 111px;
        top: 24px;
        width: 2px;
        height: 100%;
        background: #d2d2d2;
    }

    .schedule-box .hour-box.active-box:before {
        background: #fc5a1b;
    }

    .schedule-box .hour-box:last-child:before {
        display: none;
    }

    .schedule-box .hour-box .hour {
        position: absolute;
        left: 0px;
        top: 0px;
        width: 100px;
        line-height: 2em;
        color: #7f7f7f;
    }

    .schedule-box .hour-box .circle {
        position: absolute;
        left: 100px;
        top: 0px;
        width: 24px;
        height: 24px;
        border: 2px solid #d2d2d2;
    }

    .schedule-box .hour-box.active-box .circle {
        border-color: #fc5a1b;
    }

    .schedule-box .hour-box .toggle-btn {
        position: relative;
        top: -4px;
        margin-bottom: 5px;
        cursor: pointer;
    }

        .schedule-box .hour-box .toggle-btn h3 {
            position: relative;
            display: inline-block;
            font-size: 18px;
            padding-right: 30px;
            color: #292929;
        }

            .schedule-box .hour-box .toggle-btn h3:after {
                font-family: 'FontAwesome';
                content: '\f107';
                position: absolute;
                right: 0px;
                top: 0px;
                width: 30px;
                height: 30px;
                display: block;
                color: #fc5a1b;
                line-height: 28px;
                font-size: 24px;
                text-align: right;
                z-index: 5;
            }

        .schedule-box .hour-box .toggle-btn.active h3:after {
            content: '\f106';
        }

    .schedule-box .hour-box .content-box {
        position: relative;
        padding-right: 20px;
        display: none;
    }

        .schedule-box .hour-box .content-box.collapsed {
            display: block;
        }

        .schedule-box .hour-box .content-box .professional {
            position: relative;
        }

    .schedule-box .hour-box .professional .info {
        position: relative;
        padding-left: 110px;
        padding-top: 10px;
        min-height: 50px;
        margin-bottom: 20px;
    }

        .schedule-box .hour-box .professional .info .image {
            position: absolute;
            left: 15px;
            top: 0px;
            width: 72px;
            height: 72px;
            border: 1px solid #d0d0d0;
            overflow: hidden;
        }

            .schedule-box .hour-box .professional .info .image img {
                display: block;
                width: 100%;
            }

        .schedule-box .hour-box .professional .info .prof-title {
            font-size: 18px;
            margin-bottom: 7px;
            color: #292929;
            font-weight: 500;
        }

        .schedule-box .hour-box .professional .info .prof-occup {
            font-size: 15px;
            color: #fc5a1b;
        }

    .schedule-box .hour-box .theme-btn {
        background: #fc5a1b;
        margin: 15px 5px 5px;
    }

        .theme-btn.dull,
        .schedule-box .hour-box .theme-btn.dull {
            background: #d2d2d2;
        }

        .schedule-box .hour-box .theme-btn:before {
            background: #292929;
        }

.single-event .team-member .column-inner {
    border-width: 1px;
    border-color: #d0d0d0;
}


/**
* Donation from Styles.
**/

#contact-form.donation-form .form-group-inner.radio {
    border: none;
}

#contact-form.donation-form .form-group-inner input[type="radio"] {
    display: inline-block;
    margin: 0;
    position: static;
    vertical-align: middle;
    margin-right: 5px;
    margin-left: 10px;
}


.member-name {
    color: #292929;
    margin-bottom: 1.2em;
}

.change-profile {
    margin-top: 1.2em;
}

.btn-camera {
    border-radius: 12px 0px 0px 12px !important;
    box-shadow: 2px 4px 12px 0 rgba(0,0,0,0.1);
}

.change-profile span {
    display: inline-block;
    padding: 10px;
    border-radius: 0 12px 12px 0;
    line-height: 24px;
    background-color: white;
    box-shadow: 1px 2px 6px 0 rgba(0,0,0,0.05);
}

#changeprofileImage {
    position: relative !important;
    display: inline-block !important;
}


#cookie-bar {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: auto;
    background-color: black;
    color: white;
    text-align: center;
    opacity: 0.8;
    z-index: 99999;
    padding: 20px;
}

.infomuname {
    font-size: 11px;
    /*color: rgb(208, 208, 208);*/
    color: lightgrey;
    line-height: 18px;
}

.large-article {
    max-width: none !important;
    height: 490px;
}

    .large-article .lower-part {
        /*margin-top:20px;*/
        padding: 20px 14px;
    }

/* My extra CSS Bill's*/

.column-inner,
.blog-grid {
    border: 5px solid white;
    border-radius: 15px;
    box-shadow: 0px 0px 63px -20px rgba(0,0,0,0.35);
}

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

    .blog-grid .text .link a,
    .blog-grid .text h3,
    .blog-grid .text h5 {
        margin-left: 10px;
        margin-right: 10px;
    }

    .blog-grid h3 {
        margin-left: 10px;
    }

.text h5 {
    font-size: var(--text-sm);
    /*font-family: "OpenSans", sans-serif;*/
    color: var(--title-gray-light);
    font-weight: 600;
    line-height: 1.2;
}

.toggle-nav {
    border-radius: 5px;
}

.app-banner {
    padding: 16px 24px;
    width: 256px;
    /*font-family: "Open Sans", sans-serif;*/
    border-radius: 0 22px 22px 0;
    border-left: 12px solid #008755;
    box-shadow: 0 4px 84px 0 rgba(0,0,0,.2);
    position: fixed;
    bottom: 20%;
    left: 0;
    text-align: center;
    z-index: 1000;
    background-color: white;
    background-image: url("../../images/app-banner/dot-grid.png");
    background-size: 70%;
    opacity: 0.8;
    transform: translateX(-150%) scale(1.3) rotate(16deg);
    animation: slide-left 1.5s ease forwards 2s;
}

    .app-banner .banner-close {
        position: absolute;
        font-size: 17px;
        font-weight: 800;
        width: 24px;
        height: 24px;
        line-height: 24px;
        right: 0;
        top: 0;
        transform: translate(30%, -30%);
        background-color: white;
        border-radius: 100%;
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.14);
    }




.qr-profile-icon {
    max-width: 100px;
    max-height: 100px;
    margin: auto;
}

.citizen-qr {
    padding-top: 15px;
}

@keyframes slide-left {
    0% {
        opacity: 0.8;
        transform: translateX(-150%) scale(1.1) rotate(16deg);
    }

    100% {
        opacity: 1;
        transform: translateX(0) scale(1) rotateY(0)
    }
}

.app-banner-header {
    display: inline-block;
    line-height: 1.32;
    font-size: 18px;
}

.banner-strong {
    font-weight: 800;
    color: black;
}

.app-banner-graphic {
    margin-top: 12px;
    margin-bottom: 12px;
}

.app-banner p {
    border-top: 1px solid lightgray;
    line-height: 1.26;
    margin-top: 6px;
    padding-top: 12px;
    font-size: 14px;
}

.banner-btn-cont {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    margin-top: -44px;
    z-index: 100;
    position: relative;
}


.banner-apple {
    height: 27px;
}

.banner-google {
    height: 26px;
}

/*Rounded news*/
.sidebar .recent-news .post .post-thumb {
    border-radius: 2px;
    overflow: hidden;
    box-shadow: 0 4px 14px 0 rgba(0,0,0,0.1);
    border: 4px solid white !important;
}


/*Badge Image CSS*/
.badgerow {
    background-color: #fff;
    width: 100%;
    display: flex;
    justify-content: space-around;
    margin: 60px 0 120px 0px;
    flex-wrap: wrap;
    position: relative;
}

    .badgerow::before {
        content: '';
        position: absolute;
        top: 2px;
        left: -38px;
        width: 50px;
        height: 100%;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat !important;
        background: url("../../Content/css/assets/dafnes-award-left.svg");
    }

    .badgerow::after {
        content: '';
        position: absolute;
        top: 2px;
        right: -38px;
        width: 50px;
        height: 100%;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat !important;
        background: url("../../Content/css/assets/dafnes-award-right.svg");
    }

#badge {
    height: 200px;
    margin: 10px;
}

.award {
    height: 70px;
    margin: 10px;
    background-color: white;
}

/*.award-bg {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 140px;
    width: 260px;
    padding: 20px;
    background: url("../../Content/css/assets/dafnes-award.svg");
    background-size: 88%;
    background-repeat: no-repeat;
    background-position: center;
}*/


figure {
    margin-bottom: 0 !important;
}

.download-app .banner-apple {
    height: 47px;
}

.download-app .banner-google {
    height: 46px;
}

.phone-image {
    transform: scale(1.46) translateY(-30px);
    width: 75%;
}

.underline-green {
    display: inline-block;
    padding-bottom: 10px;
    margin-bottom: 24px;
    border-bottom: 4px solid #138560;
}

/* Mix it up*/
.mixitup-control-active {
    color: #F38551 !important;
}
/*.heartType-2 {
        background-color: #eb8b48 !important;
    }*/


/*Radial Button CSS*/

.radmenu {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 80px;
    height: 80px;
    z-index: 9000;
    margin: 0 55px 55px 0px;
    /*background-color: blue;*/
}

    .radmenu li {
        list-style: none;
        text-decoration: none;
    }

.plusbtn {
    position: absolute;
    width: 80px;
    height: 80px;
    right: 0;
    bottom: 0;
    background-color: white;
    border-radius: 100%;
    text-decoration: none;
    color: black;
    font-size: 1em;
    z-index: 44;
    /*box-shadow: 0px 0px 19px rgba(34,34,34,0.8);*/
}

    .plusbtn img {
        transform: translate(50%, 50%) scale(0.9);
    }

.plusbg {
    content: "";
    width: 80px;
    height: 80px;
    position: absolute;
    right: 0;
    bottom: 0;
    border-radius: 100%;
    z-index: 1;
    transform: scale(1.45);
    transform-origin: center;
    background: #CDE7B3;
    border: 2px solid #13E770;
    /*box-shadow: 0 12px 15px 0 rgba(92,92,92,0.50);*/
}

.radialbg {
    width: 80px;
    height: 80px;
    position: absolute;
    right: 0;
    bottom: 0;
    border-radius: 100%;
    transform-origin: center;
    background: white;
    border: 1px solid #13E770;
    box-shadow: 0 12px 15px 0 rgba(92,92,92,0.50);
}


.radialbginner {
    width: 80px;
    height: 80px;
    position: absolute;
    right: 0;
    bottom: 0;
    border-radius: 100%;
    transform-origin: center;
    background: rgba(255,255,255,0.92);
    background-size: 70%;
    border: 1px solid rgba(23,23,23,0.1);
}


.childbtn {
    position: absolute;
    display: block;
    width: 80px;
    height: 80px;
    right: 0px;
    bottom: 0px;
    border-radius: 100%;
    border: 2px solid transparent;
    transform-origin: center;
    background-color: white;
    box-shadow: 0 12px 15px 0 rgba(92,92,92,0.50);
    background-size: 85%;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
    transition: border-color 0.6s ease;
}

.cb1 {
    background-image: url(/images/radial/radial-recycle.svg);
}

.cb2 {
    background-image: url(/images/radial/radial-donate.svg);
}

.cb3 {
    background-image: url(/images/radial/radial-reserve.svg);
}

.pointbtn {
    position: absolute;
    display: block;
    width: 40px;
    height: 40px;
    right: 0px;
    bottom: 0px;
    z-index: 4;
    transform: translate(-50%, -50%) !important;
    border-radius: 100%;
    transform-origin: center;
    background-color: #eb4534;
    color: white;
    font-weight: 600;
    text-decoration: none !important;
    text-align: center;
    line-height: 40px;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
    transition: border-color 0.6s ease;
}

.tagbtn {
    position: absolute;
    padding: 6px 16px;
    color: white;
    right: 0px;
    bottom: 0px;
    z-index: 4;
    border-radius: 32px;
    background-color: #eb4534;
    font-weight: 900;
    font-size: 12px;
    text-decoration: none !important;
    text-align: center;
    z-index: 100;
    transition: all 0.3s ease;
    transform-origin: center;
    /*border: 2px solid rgba(12,12,12,0.2);*/
    box-shadow: 0 12px 15px 0 rgba(92,92,92,0.50);
}

    .tagbtn:enabled {
        color: white !important;
    }

.tb1 {
    right: 0px;
    bottom: 275px;
    transform: scale(0);
}

.tb2 {
    right: 120px;
    bottom: 220px;
    transform: scale(0);
}

.tb3 {
    right: 220px;
    bottom: 95px;
    transform: scale(0);
}

.radmenu {
    transition: opacity 0.5s ease;
}

.pointbtn:hover, .pointbtn:enabled {
    color: white;
}


.tagbtn:hover, .tagbtn:enabled {
    color: black;
}


/*Filter Button CSS*/

.filtercont {
    text-align: center;
    margin-bottom: 10px;
}

.filterbtn {
    padding: 3px 24px;
    border-radius: 20px;
    margin-left: 18px;
    background-color: rgba(153,153,153,0.1) !important;
    border: 2px solid transparent;
    transition: all 0.5s ease;
    font-weight: 900;
}

.filter-section {
    border-radius: 6px;
    padding: 10px 10px 2px 10px !important;
    margin-bottom: 20px;
    box-shadow: 2px 4px 14px 0 rgba(0,0,0,0.04);
}

    .filter-section .btn-tab {
        padding: 0.66em 1em;
        background-color: white;
        color: gray;
        border: 1px solid rgba(0,0,0,0.2);
        transition: box-shadow 0.3s ease;
        font-weight: bolder;
    }

    .filter-section .form-group {
        margin-bottom: 8px;
    }

    .filter-section .btn-tab.active:hover {
        box-shadow: 2px 6px 12px 0 rgba(0,0,0,0.1);
        background-color: #2c353d;
    }

    .filter-section .btn-tab:hover {
        background-color: white;
        color: gray;
        box-shadow: 2px 6px 12px 0 rgba(0,0,0,0.1);
    }



.mixitup-control-active {
    border-color: #13E770;
    box-shadow: 2px 3px 10px rgba(100,100,100,0.2);
    background-color: white !important;
    color: #555 !important;
}

/*Modal Ovewrite Styles*/

.modal-content {
    border: 4px solid #008556 !important;
    border-radius: 20px !important;
    padding: 20px;
}

.modal-title {
    font-weight: 600;
    text-align: center;
}

.modal-header {
    padding-bottom: 20px!important;
    border-bottom: 4px solid #008556!important;
}

.modal-body .alert-info {
    font-size: 14px !important;
    padding: 15px 20px;
    width: 90%;
    margin: 0 auto;
    border-radius: 14px;
    background-color: #eaf9ff;
    box-shadow: 0px 8px 45px rgba(214, 214, 214, 0.3);
}

    .modal-body .alert-info span p:before {
        display: inline-block;
        content: "";
        width: 10px;
        height: 10px;
        margin-right: 12px;
        border-radius: 100%;
        background-color: #31708f;
    }

    .modal-body .alert-info:before {
        width: 110%;
        content: "";
        height: inherit;
        background-color: black;
    }


.btn-primary {
    background: #bd2c1e;
    background: -moz-linear-gradient(left, #bd2c1e 0%, #eb4534 100%);
    background: -webkit-linear-gradient(left, #bd2c1e 0%,#eb4534 100%);
    background: linear-gradient(to right, #bd2c1e 0%,#eb4534 100%);
    padding: 10px 20px;
    background-size: 200%;
    border-radius: 8px;
    border: 1px solid transparent;
    color: white !important;
    transition: all 0.5s ease;
}

    .btn-primary:hover {
        color: white !important;
        background-position-x: 100%;
    }


/*Single View Earn Points Layout Fixes*/

.singletext {
    padding: 10px 34px 25px 34px;
    box-shadow: 0 6px 16px rgba(144,144,144,0.2);
    margin-top: 0 !important;
    border-radius: 0px 0px 17px 17px;
}

    .singletext img {
        width: 90%;
    }

.blog-subtitle, .image-box h4 {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1f435b+0,356aa0+100 */
    background: #1f435b; /* Old browsers */
    background: -moz-linear-gradient(left, #1f435b 0%, #356aa0 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #1f435b 0%,#356aa0 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #1f435b 0%,#356aa0 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1f435b', endColorstr='#356aa0',GradientType=1 ); /* IE6-9 */
}

.image-box h4 {
    padding: 20px;
    line-height: 24px;
    color: white;
}

.featured-video .info {
    padding: 5px 0 5px 20px;
}

.responsive-video {
    border: none !important;
}

.alert-info {
    box-shadow: 0 6px 16px rgba(144,144,144,0.2);
    line-height: 1.32;
    font-size: 15px;
    border: none !important;
    border-radius: 14px !important;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#deefff+0,98bede+100;Blue+3D+%2310 */
    background: #deefff !important; /* Old browsers */
    background: -moz-linear-gradient(left, #deefff 0%, #f4f7eb 100%) !important; /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #deefff 0%,#f4f7eb 100%) !important; /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #deefff 0%,#f4f7eb 100%) !important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#deefff', endColorstr='#f4f7eb',GradientType=1 ) !important; /* IE6-9 */
}

    .alert-info .text-center {
        margin-top: 16px;
    }

    .alert-info h5 {
        line-height: 24px;
    }

.viewed-info-button, .bought-info-button, .at-icon-wrapper {
    border-radius: 4px !important;
}

.alert-info a {
    font-weight: 900;
}

#player {
    border-radius: 8.5px 8.5px 0 0;
}

.member-details .image-box .post-image, .member-details .image-box img {
    border-radius: 100%;
    border: 8px solid white;
    box-shadow: 0 4px 14px 0 rgba(0,0,0,0.1);
    width: 230px !important;
    height: 230px;
    object-fit: cover;
    box-shadow: 4px 12px 34px 0 rgba(0,0,0,0.08);
}

.blog-section .blog-post .image-box {
    padding: 20px;
    border-radius: 40px;
}
/*Pagination CSS*/
.mixitup-page-list .mixitup-control {
    padding: 4px 12px;
    background-color: rgba(144,144,144,0.1);
    border-radius: 3px;
    border: 7px solid white;
}


.mixitup-page-list .mixitup-control-active {
    box-shadow: 0 6px 26px rgba(144,144,144,0.5);
    transform: scale(1.1);
    border: 2px solid #eb4534;
}

.mixitup-page-list .mixitup-control-truncation-marker {
    /*padding: 12px 12px;*/
    background-color: white;
}

.mixitup-page-list .mixitup-control-prev, .mixitup-page-list .mixitup-control-next {
    background-color: #eb4534;
    color: white;
    font-weight: 900;
}

.mixitup-page-stats {
    padding: 10px;
    margin: 0 auto;
    display: inline-block;
    width: 100%;
    text-align: center;
    color: rgba(175,175,175,1);
    font-weight: 900;
    font-size: 12px;
}

.mixitup-page-list {
    width: 100%;
    text-align: center;
}

.gallery-filter li {
    padding: 4px 10px;
    border: 1px solid transparent;
}

.gallery-filter .mixitup-control-active {
    box-shadow: 0 5px 15px rgba(144,144,144,0.2);
    border-radius: 14px;
    transform: scale(1);
    border: 1px solid rgba(144,144,144,0.1);
}

.modal {
    z-index: 12000 !important;
    top: 10px !important;
}

.modal-backdrop {
    z-index: 10000 !important;
    box-sizing: border-box;
}

.main-article .text h3 {
    font-weight: 600;
    font-size: 20px;
    padding-right: 25px !important;
    color: rgb(65,65,65);
    border-bottom: 1px solid rgba(144,144,144,0.1);
}

.main-article .text h5 {
    padding-top: 10px;
}

/*Savings Modal*/
#bicyclediv img {
    width: 220px;
}

#busdiv img {
    width: 280px;
    position: relative;
}

.savingswrapper .recycleBucketColumn {
    width: 33%;
}

.savingswrapper {
    width: 100%;
    padding: 0 40px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

.savingdiv {
    width: 100% !important;
    margin: 0 !important;
}

    .savingdiv .heart-icon {
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
    }

#busdiv img, #bicyclediv img {
    width: 100%;
    max-width: 340px;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
}

.saving-pop-over {
    top: 14px !important;
}

.recycle-pop-over, .saving-pop-over {
    width: 80% !important;
    top: 10px;
}


.sidebar .recent-news .post .post-thumb .post-date {
    padding: 0px 12px !important;
    height: 22px !important;
    line-height: 22px !important;
    border-bottom-right-radius: 6px !important;
    background-color: var(--green-main) !important;
    font-weight: bolder;
}

.recycleBucketColumn .btn {
    width: 90%;
    border-radius: 7px;
}

.drop-shadow {
    filter: drop-shadow(0px 0px 3px 2px #49a3d4);
}

.sidebar .recent-news .post a, .sidebar .recent-news .post a:hover {
    color: #616161 !important;
}


/*Learn where menu item*/

.sidebar .widget {
    z-index: 0;
}

.dropdown-extra {
    background-color: rgba(245,245,245, 0.98) !important;
    border-radius: 8px !important;
    box-shadow: 0px 16px 48px -5px rgba(0,0,0,0.67);
    border: none !important;
}

    .dropdown-extra li {
        margin-left: 0;
        border: none !important;
        border-bottom: 1px solid rgba(130,130,130, 0.3) !important;
        z-index: 10;
    }

        .dropdown-extra li a {
            color: #3d3d3d !important;
            font-weight: 900 !important;
        }

.dropwdown-extra li:hover a {
    background-color: rgba(229,229,229, 1) !important;
    color: #569B26;
}

.dropdown-extra li:nth-child(1)::before {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    width: 15px;
    height: 15px;
    background-color: rgba(245,245,245, 0.98);
    transform-origin: center;
    transform: translate(-50%, -50%) rotate(45deg);
    z-index: 8 !important;
}




/*maps restyle*/

#bucketmap {
    border-radius: 0 0 22px 22px;
    border: none !important;
    margin-top: 0 !important;
}

#project-version-one h2 {
    padding: 15px 0 20px 0;
    font-weight: 300;
}

.favorite-btn {
    background-color: #ee5f4a;
    border-radius: 6px;
    color: white;
}

    .favorite-btn:hover {
        background-color: #d24a36;
    }



/*maps css*/

.content-style {
    width: 100%;
    height: 60%;
    text-align: center;
}

.mapWrapper {
    box-shadow: 0 16px 66px rgba(144,144,144,0.7);
    border-radius: 22px;
    overflow: hidden;
}

#firstHeading {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#299a0b+0,20890b+100 */
    background: #299a0b; /* Old browsers */
    background: -moz-linear-gradient(left, #299a0b 0%, #20890b 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #299a0b 0%,#20890b 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #299a0b 0%,#20890b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#299a0b', endColorstr='#20890b',GradientType=1 ); /* IE6-9 */
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 16px;
    font-weight: 600;
    color: white;
}

#bodyContent {
    font-weight: 100;
    padding: 4px 0 0 0;
    text-align: center;
}

.infoStyles {
    width: 100%;
    height: 50%;
    text-align: center;
    border-radius: 14px;
}

.merchant-map-cont {
    background-color: rgba(236,236,236,0.2);
    padding: 24px 35px;
    border-radius: 22px;
}

.merchant-dropdown-cont .form-group {
    margin-bottom: 0 !important;
}

.merchant-dropdown-cont {
    background-color: rgba(216,216,216,0.2);
    padding: 22px;
    border-radius: 22px 22px 0 0;
    position: relative;
    border-bottom: 1px solid rgba(144,144,144,0.2);
}

/*Select Field CSS*/

.select2-container--default .select2-selection--single {
    border-radius: 12px;
    box-sizing: border-box;
    border: none !important;
    padding: 4px;
    height: 34px !important;
    box-shadow: 0 4px 10px rgba(144,144,144,0.1);
}

.select2-search__field {
    box-sizing: border-box;
    padding: 4px 10px !important;
    border-radius: 8px !important;
    width: 95% !important;
    margin-left: 2.5%;
    margin-bottom: 8px;
    border: 2px solid rgba(155,155,155,0.3) !important;
    box-shadow: 0 4px 10px rgba(144,144,144,0.1) inset;
}

.select2-container--open .select2-dropdown--below {
    border-radius: 0 0 8px 8px;
    overflow: hidden;
    border: none;
    box-shadow: 0 4px 10px rgba(144,144,144,0.1);
}

.select2-selection__arrow {
    top: 4px !important;
}

.select2-results__option {
    margin-left: 0 !important;
    padding-left: 18px !important;
    border-bottom: 1px solid rgba(144,144,144,0.1);
}

.select2-container {
    width: 100% !important;
    z-index: 100 !important;
}

.field-outer {
    display: block !important;
}

#field-forgot-password {
    margin-top: 18px;
    font-size: 16px;
}

    #field-forgot-password a {
        text-decoration: underline;
    }

.merchant-map-cont .page-title p {
    padding-bottom: 14px;
}





/*Old pagination revamp*/
.page a {
    padding: 8px 14px !important;
    background-color: rgba(144,144,144,0.1) !important;
    border-radius: 3px !important;
    color: rgb(61, 61, 61) !important;
    border: none !important;
    font-size: 14px !important;
}

.pagination > .active > a {
    border: 2px solid #eb4534 !important;
    box-shadow: 0 6px 26px rgba(144,144,144,0.5) !important;
    transform: scale(1.1) !important;
    transform-origin: center !important;
}

.pagination .first a, .pagination .prev a, .pagination .next a, .pagination .last a {
    background-color: #eb4534 !important;
    color: white !important;
    font-weight: 900 !important;
    border: none !important;
    border-radius: 4px;
    padding: 10px;
}

.pagination .disabled a {
    background-color: rgba(194,194,194,1) !important;
}


/*Logged In Button Fix Offers*/
.four-column .column-inner2 .bottom-part .text-center {
    position: relative;
    top: 17px;
}

.list {
    margin: 0.2em 0 0.7em 0;
}

    .list .li:first-child {
        margin-left: 0;
    }

    .list li {
        margin-right: 12px;
        list-style: none;
        padding: 2px 16px;
        color: var(--title-gray-light);
        border-radius: 20px;
        background-color: rgb(248,248,248);
        border: 6px solid white;
        box-shadow: 0 1px 2px 0 rgba(0,0,0,0.10);
    }

    .list .pressable {
        box-shadow: 0 3px 7px 0 rgba(0,0,0,0.12);
        transition: box-shadow 0.4s ease;
    }

        .list .pressable:hover {
            box-shadow: 0 6px 14px 0 rgba(0,0,0,0.10);
            cursor: pointer;
        }

    .list i {
        margin-right: 6px;
    }

.detail-img {
    border-radius: 12px 30px 12px 12px;
    box-shadow: var(--box-shadow-1);
}

.address-text {
    font-size: 15px;
    font-weight: 600;
    color: var(--title-gray-light);
    margin-right: 18px;
    padding: 8px 0 8px 0 !important;
    border-radius: 40px;
}


.offer-deco {
    position: absolute !important;
    right: -6px;
    top: 0;
    width: unset !important;
    height: 102%;
}


.viewed-custom-btn {
    position: absolute;
    bottom: 16px;
    left: 16px;
    border-radius: 6px;
    padding: 4px 18px;
    background-color: rgba(0,0,0,0.3);
    box-shadow: inset 0 12px 24px 0 rgba(0,0,0,0.6);
    backdrop-filter: blur(14px);
}

    .viewed-custom-btn:hover {
        color: white;
        background-color: rgba(0,0,0,0.3);
        border-color: none;
    }

.offer-display {
    overflow: hidden;
    border-radius: 14px 14px 0 0;
    /*box-shadow: 0 12px 66px 0 rgba(0,0,0,0.08);*/
    position: relative;
    background-color: white;
    z-index: 3;
}

    .offer-display .icon-box {
        top: 14px;
        right: 15px !important;
        transform: scale(1.1);
    }

    .offer-display .detail-img {
        border-radius: 12px 30px 12px 0px;
        height: 100%;
    }

    .offer-display .image-box {
        height: 100%;
    }



.generic-container {
    background-color: rgba(236,236,236,0.2);
    padding: 24px 35px;
    border-radius: 22px;
}

#project-version-one .container table {
    width: 94% !important;
}

/*Reassigned Homepage*/

.video_container {
    position: relative;
    width: 100%;
    height: calc(100vh - 100px);
}

.home_video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    /*width: auto;
    min-height: 100%;*/
}

.video_container:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #f07e64 0%,#e35972 15%,#f5ae6f 29%,#f2c237 43%,#49a3d4 65%,#49a3d4 65%,#4c876d 83%,#6fa84a 100%);
    opacity: 0.06;
    z-index: 4;
}

.video_container:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(assets/gridtile_3x3.png);
    background-repeat: repeat;
    opacity: 0.42;
    z-index: 5;
}

.transpa_black {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.28);
    z-index: 6;
}

.home_titles {
    position: absolute;
    top: 25%;
    z-index: 10;
    display: block;
    width: 100%;
    text-align: center;
    color: white;
}

    .home_titles h2 {
        font-size: 40px;
        font-weight: 900;
        text-shadow: 1px 6px 15px rgba(44,44,44,0.3);
    }

    .home_titles h4 {
        font-size: 24px;
    }

.munci_wrapper {
    position: absolute;
    max-width: 420px;
    bottom: 5%;
    left: 50%;
    margin: 0 auto;
    color: white;
    z-index: 1000;
    transform: translateX(-50%);
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 30px;
    background-color: rgba(255,255,255,0.15);
}

/*Custom Register form select2 styles*/

.registration-form {
    overflow: hidden;
}

.register-form .select2-container {
    margin-bottom: 1rem;
    box-shadow: 0 4px 16px 0 rgba(0,0,0,0.07);
}

.register-form .select2-container--default .select2-selection--single {
    border-radius: .25rem;
    box-sizing: content-box;
    padding: 6px 10px;
}

    .register-form .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 33px;
    }

    .register-form .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 36px;
    }

.tickbox-form {
    line-height: 18px;
}

    .tickbox-form a {
        text-decoration: underline;
        color: gray;
    }

    .tickbox-form [type="checkbox"] {
        position: relative;
        top: 2px;
    }


.munci_list {
    /*border: 4px solid white;*/
}

.munci_wrapper h5 {
    font-weight: 300;
    margin-bottom: 15px;
}

.munci_wrapper ul {
    /*display: flex;
    justify-content: space-around;*/
    box-sizing: border-box;
}

    .munci_wrapper ul li {
        list-style: none;
        box-sizing: border-box;
        width: 100%;
        background-color: rgba(188, 43, 29, 0.9);
        padding: 10px;
        border-radius: 24px;
        box-shadow: 0 12px 16px rgba(0,0,0,0.3);
        margin: 12px 0;
        transition: all 0.3s ease;
    }

        .munci_wrapper ul li a {
            width: 100%;
            padding: 0 10px;
            display: inline-block;
            color: white;
            font-weight: 900;
            font-size: 16px;
        }

        .munci_wrapper ul li:hover {
            transform: scale(1.1);
            background-color: rgba(188, 43, 29, 1);
            box-shadow: 0 0px 24px rgba(0,0,0,0.3);
        }




/*New Modals*/

#actionModal-2, #actionModal-1, #actionModal-donation {
    box-sizing: border-box;
    padding-top: 40px;
}

    #actionModal-2 .modal-header, #actionModal-2 .close {
        background: -moz-linear-gradient(left, #f9c667 0%, #f79621 100%) !important; /* FF3.6-15 */
        background: -webkit-linear-gradient(left, #f9c667 0%,#f79621 100%) !important; /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to right, #f9c667 0%,#f79621 100%) !important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    }

    #actionModal-donation .modal-header, #actionModal-donation .close {
        background: -moz-linear-gradient(left, #499bea 0%, #207ce5 100%) !important; /* FF3.6-15 */
        background: -webkit-linear-gradient(left, #499bea 0%,#207ce5 100%) !important; /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to right, #499bea 0%,#207ce5 100%) !important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    }

    #actionModal-1 .error, #actionModal-2 .error {
        border-radius: 25px;
    }

    #actionModal-1 .success, #actionModal-2 .success {
        background-color: #e7ffda;
    }

    #actionModal-2 .modal-dialog .modal-header,
    #actionModal-1 .modal-dialog .modal-header,
    #actionModal-donation .modal-dialog .modal-header {
        display: block;
        width: 75%;
        background-image: linear-gradient(-156deg, #B4EC51 0%, #429321 100%);
        border: 4px solid #FFFFFF;
        border-radius: 97px;
        color: white;
        position: absolute;
        z-index: 2000;
        left: 50%;
        top: 0;
        transform: translate(-50%, -50%);
    }

    #actionModal-2 .modal-content,
    #actionModal-1 .modal-content,
    #actionModal-donation .modal-content {
        box-sizing: border-box;
        border: 4px solid #FFFFFF !important;
        border-radius: 43px !important;
    }

    #actionModal-2 .modal-body,
    #actionModal-1 .modal-body,
    #actionModal-donation .modal-body {
        overflow: hidden;
        border-radius: 43px !important;
        padding: 0 !important;
        box-sizing: border-box;
    }

    #actionModal-donation .modal-body {
        padding: 20px !important;
    }

    #actionModal-2 .close,
    #actionModal-1 .close,
    #actionModal-donation .close {
        position: absolute;
        top: -12px;
        right: 0;
        background-color: #7ED321;
        padding: 8px 12px;
        border: 2px solid white;
        z-index: 1000;
        opacity: 1;
        color: white;
        border-radius: 100%;
        transform: scale(1.1);
    }

    #actionModal-1 .inner-content a, #actionModal-2 .inner-content a {
        color: #ffcd8d;
        font-weight: 900;
    }

    #actionModal-2 .recycle-column, #actionModal-1 .recycle-column {
        box-sizing: border-box;
        height: 650px;
        /*width: 33.3%;*/
        /*flex-grow: 1;*/
        width: 33%;
        border-right: 2px solid white;
        background-size: cover;
        background-position: center;
        position: relative;
        transition: filter 0.4s ease;
    }

        #actionModal-2 .recycle-column:nth-child(3) {
            border: none !important;
        }

        #actionModal-2 .recycle-column p, #actionModal-1 .recycle-column p {
            color: white;
            font-weight: 600;
            text-align: center;
            font-size: 12px;
            padding: 20px 20px 0px 20px;
            z-index: 6;
            position: relative;
            width: 100%;
        }

    #actionModal-1 .flexthis {
        background: linear-gradient(0deg, #E3E3E3 0%,#579069 100%);
    }

#actionModal-3 .modal-content {
    padding: 26px;
    box-sizing: border-box;
    /*border: 6px solid #008755 !important;*/
    box-shadow: inset 0 0 3px 12px 0 rgba(0,0,0,0.04);
    position: relative;
    min-height: 200px;
    border: none !important;
    border-radius: 30px !important;
}

#actionModal-3 .close {
    width: 44px;
    height: 44px;
    border-radius: 100%;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
    position: absolute;
    top: -10px;
    right: -10px;
    font-size: 1.7em;
    color: rgb(144,144,144);
    background-color: white;
    opacity: 1;
}

    #actionModal-3 .close:hover {
        opacity: 1;
    }


.mission-modal-header {
    color: black;
    font-weight: 700;
    font-size: 22px;
    text-align: center;
    margin-bottom: 20px;
    display: inline-block;
    margin-left: 44px;
    position: relative;
    top: -2px
}

.mission-carousel {
    max-height: 310px;
    border-radius: 40px;
    border: 7px solid white;
    box-shadow: 0 4px 16px 0 rgba(0,0,0,0.1);
}

    .mission-carousel .carousel-caption {
        position: absolute;
        top: 50px;
        left: 50%;
        transform: translateX(-50%);
    }

.green-mission-badge {
    height: 40px;
    position: absolute;
    top: 18px;
    border-radius: 12px;
    right: 18px;
}

.button-cta-green {
    box-shadow: 0 8px 30px 0 #3E9245;
    background-color: rgba(0,133,86,1);
    padding: 4px 22px;
    border-radius: 0px;
    border: 4px solid var(--black-main-subtle);
    color: #fff;
    display: inline-block;
    border-radius: 8px;
    box-shadow: 0 3px 12px 0;
    transition: filter 0.3s ease, box-shadow 0.2s ease;
}

.imgAction {
    margin-left: 45%;
}

.button-cta-green:hover {
    cursor: pointer;
    filter: brightness(112%);
    background-color: #589C5D;
    box-shadow: 0 3px 12px 0 #3E9245;
    color: black !important;
}


.button-cta-green span {
    font-weight: 900;
}


.carousel-caption {
    min-width: 70%;
}

.carousel-mission-title {
    font-size: 26px;
    margin-bottom: 0.7em;
    text-shadow: 0px 3px 7px rgba(10, 10, 10, 0.73);
}

.carousel-mission-desc {
    text-shadow: 0px 3px 7px rgba(10, 10, 10, 0.73);
}

.carousel-mission-btn-text {
    color: inherit;
    text-decoration: none;
}




#actionModal-3 .heart-mission {
    position: absolute;
    transform: translateY(-25%);
    left: -8px;
    background-color: #008755 !important;
    display: inline-block;
    font-weight: 900;
    width: 48px;
    height: 48px;
    border: 4px solid hsla(147, 100%, 43%, 0.5);
    line-height: 39px;
    color: white;
    border-radius: 100%;
    box-shadow: 0 3px 12px 0 hsla(147, 100%, 23%, 0.40);
}

.mission-bar {
    margin: 20px 0;
    width: 100%;
    height: 12px;
    position: relative;
    border-radius: 12px;
    cursor: pointer;
}

.mission-bar-lg {
    height: 18px;
    border-radius: 18px;
    margin-top: 30px;
    margin-bottom: 50px;
}

.mission-bar-active {
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: rgb(15,114,58);
    background: linear-gradient(94deg, rgba(15,114,58,1) 0%, rgba(16,167,82,1) 100%);
    z-index: 2;
    border-radius: 12px;
    transition: width 0.5s ease;
}

.mission-bar-active-lg {
    border-radius: 18px;
}

    .mission-bar-active-lg:before {
        content: "";
        position: absolute;
        top: -16px;
        right: -13px;
        width: 36px;
        height: 36px;
        background-image: url("../../images/\.png");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

.mission-bar-back {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgb(206,206,206);
    z-index: 1;
    border-radius: 12px;
}

.mission-bar-back-lg {
    border-radius: 18px;
}

.mission-li-sm {
    padding: 8px 14px;
    background: #F6F6F6;
    border-radius: 80px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 8px;
}

.mission-li-sm-done {
    background: rgb(15,114,58);
    background: linear-gradient(94deg, rgba(15,114,58,1) 0%, rgba(16,167,82,1) 100%);
    box-shadow: 0 1px 2px 0 rgba(8,86,0,0.86);
}

    .mission-li-sm-done .mission-icon {
        filter: grayscale(0%);
    }

    .mission-li-sm-done .mission-li-desc {
        color: white;
        font-weight: 900;
    }

.mission-icon {
    width: 30px;
    height: 30px;
    background-position: center;
    background-size: 22px;
    background-repeat: no-repeat;
    margin-right: 18px;
    background-image: url("/images/follow-mission-ic.png");
    filter: grayscale(100%);
}

.mission-li-desc {
    font-weight: 600;
    color: black;
}

.circle-mission {
    width: 22px !important;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.mission_icon {
    top: 20px;
}

.mission-bloc article {
    background-color: white;
    border: none !important;
}

.mission-bloc-success article {
    filter: grayscale(100%);
    opacity: 0.92;
    cursor: initial;
}

/*.mission-bloc-success::after {
    content: "";
    position: absolute;
    width: 95%;
    height: 104%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image: linear-gradient(-270deg, #8AD800 0%, #429321 100%);
    z-index: -1;
    border-radius: 22px;
}*/

.mission-generic-btn {
    padding: 8px 22px;
    margin-top: 8px;
    margin-right: 14px;
    color: #fff;
    background-color: #008755;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,.27);
    border-radius: 11.02px;
    line-height: unset;
    font-weight: 700;
    font-size: 1.06em;
    box-sizing: border-box;
    display: inline-block;
    transition: background-color 0.3s ease;
    cursor: pointer;
}

    .mission-generic-btn:hover {
        color: white !important;
    }

.mission_wrapper {
    position: relative;
    padding-bottom: 40px;
    padding-top: 40px;
    border-bottom: 3px solid rgba(0,0,0,0.06);
}

    .mission_wrapper:last-child {
        padding-bottom: 0;
        border-bottom: none;
    }

    .mission_wrapper:first-child {
        padding-top: 0;
    }

.mission-generic-btn:hover {
    background-color: #3ab179;
    cursor: pointer;
}

.mission_header {
    text-align: center;
    margin-bottom: 10px;
}

.heart-icon.heart-icon-mission {
    background: #008755 !important;
}

#success-modal-for-mission .modal-title {
    color: #84B567;
}

#searchresults .alert {
    margin-left: 15px;
}

#fb-share-button {
    background: #3b5998;
    border-radius: 3px;
    font-weight: 600;
    padding: 5px 8px;
    display: inline-block;
    position: static;
}

    #fb-share-button:hover {
        cursor: pointer;
        background: #213A6F
    }

    #fb-share-button svg {
        width: 18px;
        fill: white;
        vertical-align: middle;
        border-radius: 2px
    }

    #fb-share-button span {
        vertical-align: middle;
        color: white;
        font-size: 14px;
        padding: 0 3px
    }

/*Vote extra CSS for video*/

#spot-list {
    display: flex;
    max-width: 740px;
    flex-wrap: wrap;
    margin: 0 auto;
    background-color: rgba(255,255,255,0.68);
    box-shadow: 4px 12px 23px 0 rgba(0,0,0,0.05);
    border-radius: 16px;
    margin-bottom: 40px;
    webkit-backdrop-filter: blur(6px);
}

.spot {
    padding: 20px;
    width: 46%;
    margin: 2%;
    border: 1px solid rgba(0,0,0,0.05);
    box-sizing: border-box;
    border-radius: 12px;
    background-color: white;
    box-shadow: 0px 0px 0px 0 rgba(0,0,0,0.07);
    transition: box-shadow 0.3s ease;
}

.spot-relative {
    position: relative;
}

.spot-overlay {
    width: 100%;
    height: calc(100% - 8px);
    position: absolute;
    padding: 22px;
    border-radius: 10px;
    background-color: white;
    text-align: center;
}

.spot-body {
    min-height: 230px;
}

.spot:hover {
    box-shadow: 4px 12px 23px 0 rgba(0,0,0,0.07);
    cursor: pointer;
}


.flexthis {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
}

    .flexthis .column-title {
        color: white;
        padding: 60px 20px 40px 20px;
        text-align: center;
        line-height: 1.2;
        background-color: rgba(0,0,0,0.1);
        z-index: 3;
        position: relative;
        min-height: 150px;
    }

#reserve {
    background-image: url("/images/bulb.jpg");
    background-position-y: 60%;
    background-size: 100%;
}

#commute {
    background-image: url("/images/bicycle-pic.jpg");
    background-position-y: 60%;
}

#mycoupon, #mycoupon-2 {
    background-image: url("/images/coupon.jpg");
    background-position-y: 60%;
}



#reserve:after {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.3);
    z-index: 0;
    /*background-image: linear-gradient(-1deg, rgba(35,43,33,0.90) 8%, rgba(154,255,170,0.59) 100%);*/
    background-image: linear-gradient(-180deg, rgba(78, 78, 78, 0.83) 5%, rgba(44,44,78,0.76));
    opacity: 0.8;
}



#commute:after {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.3);
    z-index: 0;
    /*background-image: linear-gradient(-180deg, rgba(30,141,255,0.83) 5%, rgba(44,44,78,0.76) 100%);*/
    background-image: linear-gradient(-180deg, rgba(78, 78, 78, 0.83) 5%, rgba(44,44,78,0.76));
    opacity: 0.8;
}

#mycoupon:after, #mycoupon-2:after {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.3);
    z-index: 0;
    /*background-image: linear-gradient(180deg, rgba(240, 126, 100, 0.3) 0%,rgba(227, 89, 114, 0.51) 15%,rgba(245, 174, 111, 0.51) 29%,rgba(242, 194, 55, 0.51) 43%,rgba(73, 163, 212, 0.51) 65%, rgba(76, 135, 109, 0.51) 83%,rgba(111, 168, 74, 0.51) 100%);*/
}

.bottom-details-content {
    /*position: absolute;*/
    bottom: 20px;
    width: 100%;
}

.learn-where {
    box-sizing: border-box;
    color: white;
    font-weight: 900;
    /*bottom: 12px;
    left: 50%;
    transform: translate(-50%, -50%);*/
    background-image: linear-gradient(-156deg, #B4EC51 0%, #429321 100%);
    border-radius: 8px;
    border: 4px solid #FFFFFF;
    transition: all 0.5s ease;
    width: 220px;
    text-align: center;
    line-height: 39px;
    margin: 0 6px;
}

    .learn-where:hover {
        color: white;
        filter: brightness(107%);
    }

    .learn-where:active {
        color: white;
    }

.modal-points {
    padding: 10px 20px !important;
    text-align: center !important;
    margin: 0 auto;
    z-index: 40;
    position: absolute !important;
    bottom: 35px;
    width: 80% !important;
    line-height: 1.3;
    left: 50%;
    display: block;
    transform: translateX(-50%);
    /* border: 2px solid white; */
    box-sizing: border-box;
    border-radius: 10px;
    background-color: rgba(0,0,0,0.2);
}

.modal-main-text {
    min-height: 150px;
}

.modal-wrapper-btns {
    display: flex;
    justify-content: space-around;
    position: absolute;
    z-index: 100;
    bottom: -26px;
    left: 50%;
    transform: translateX(-50%);
}

.modal-btn {
    /* Rectangle: */
    background-color: rgba(255,255,255,0.3);
    border-radius: 25px;
    position: relative;
    z-index: 40;
    width: 180px;
    color: white;
    padding: 10px 22px;
    font-weight: 600;
    margin: 25px auto;
    line-height: 1.3;
    transition: all 1s ease;
    border: 2px solid white;
}

    .modal-btn:hover {
        background-color: #429321;
        transform: scale(1.04);
        cursor: pointer;
    }

.recycle-column:hover {
    filter: brightness(112%);
}

.modal-register {
    border: 4px solid white !important;
    margin: 0 6px !important;
}


/*.modal-points:after {
    display: block;
    content: "";
    background-image: url("/images/brush-stroke-2.png");
    width: 100%;
    height: 65px;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: -1;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.8;
}*/



/*Bins*/

#blueBucket {
    background-image: url("/images/blue_2.png");
    background-size: 125px !important;
    background-repeat: no-repeat;
    position: relative;
}

    #blueBucket:after {
        content: "";
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.3);
        z-index: 0;
        /*background-image: linear-gradient(-180deg, rgba(30,141,255,0.83) 5%, rgba(44,44,78,0.76) 100%);*/
        opacity: 0.2;
    }

#yellowBucket {
    background-image: url("/images/yellow_2.png");
    background-size: 125px !important;
    background-repeat: no-repeat;
    position: relative;
}

    #yellowBucket:after {
        content: "";
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.3);
        z-index: 0;
        /*background: linear-gradient(to bottom, #f1e767 0%,#feb645 100%);*/
        opacity: 0.2;
    }

#brownBucket {
    background-image: url("/images/brown_2.png");
    background-size: 125px !important;
    background-repeat: no-repeat;
    position: relative;
}

    #brownBucket:after {
        content: "";
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.3);
        z-index: 0;
        /*background-image: linear-gradient(-180deg, rgba(192,143,77,0.79) 1%, rgba(44,44,44,0.20) 100%);*/
        opacity: 0.2;
    }

#blueBucket, #yellowBucket, #brownBucket {
    background-position-y: 77% !important;
}

/*Beta Version*/

.beta-version {
    background-color: rgba(255,255,255,0.04);
    padding: 6px 16px;
    margin-left: 6px;
    border-radius: 34px;
    color: white
}




/*Donation Modal*/

#actionModal-donation .modal-body {
    padding: 0 !important;
    overflow: visible;
}

#actionModal-donation .row {
    margin: 0 !important;
}

#actionModal-donation #nameDiv, #actionModal-donation #emailDiv {
    margin-top: 10px;
}

.donation-text:before {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.3);
    z-index: -1;
    background-image: linear-gradient(-180deg, rgba(192,143,77,0.79) 1%, rgba(44,44,44,0.20) 100%);
    opacity: 0.6;
    border-radius: 39px 39px 0 0;
}

#actionModal-donation .donation-text {
    background-image: url("/images/donate-item.jpg");
    background-size: cover;
    background-position: center;
    position: relative;
    color: white;
    font-size: 16px;
    font-weight: 600;
    z-index: 14;
    padding: 65px 60px 25px 60px;
    line-height: 1.75;
    border-radius: 39px 39px 0 0;
}

.modal-overflow {
    overflow: hidden;
}

/*Error Modals redesign*/

.field-outer .error {
    background-color: #fff7f7 !important;
    border-radius: inherit;
}

/*Profile fix*/

#header h4 {
    background: none;
    color: gray;
    padding: 0;
}

#recyclemachinebtn, #savingmachinebtn {
    margin-top: 0;
}


.gdpr-title {
    font-size: 1.5em;
    margin-bottom: 14px;
    text-align: center;
    font-weight: bold;
}

.gdpr-modal {
    width: 640px;
    height: auto;
    box-shadow: 0 10px 14px 0 rgba(0,0,0,0.4);
    position: fixed;
    top: 40px;
    transform: translateX(-50%);
    left: 50%;
    max-width: 95%;
    background-color: white;
    padding: 50px 45px;
    border-radius: 30px;
    border: 4px solid rgba(0,99,42,1);
    z-index: 200000;
}

.custom-modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    opacity: 1;
    /*visibility: hidden;*/
    z-index: 40000;
    transform: scale(1.1);
}

.gdpr-image {
    width: 90px;
    height: 90px;
    border-radius: 100%;
    background-image: url("/images/green-shield.png");
    background-size: 70%;
    background-repeat: no-repeat;
    background-position: center;
    box-shadow: 0 12px 24px 0 rgba(0,0,0,0.2);
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    background-color: white;
}

.gdpr-text {
    text-align: justify;
}

.checkbox-wrapper {
    background-color: rgba(0,0,0,0.03);
    border-radius: 20px;
    padding: 4px 15px;
    text-align: center;
}

    .checkbox-wrapper label {
        display: inline;
    }

#news_agreement {
    position: relative;
    top: 2px;
    margin-right: 4px;
}


.green-btn, .red-btn {
    border: none !important;
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    background: rgb(0,122,117);
    background: linear-gradient(90deg, rgba(0,122,117,1) 0%, rgba(0,99,42,1) 100%);
    margin: 0 12px;
}

.red-btn {
    background: rgb(203,39,39);
    background: linear-gradient(90deg, rgba(203,39,39,1) 0%, rgba(255,0,2,1) 100%);
}

    .red-btn a {
        color: white;
    }

    .green-btn:hover, .red-btn:hover {
        cursor: pointer;
    }

.flex-gdpr {
    display: flex;
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
}

.body-freeze {
    overflow: hidden;
}



/*Coupon html Screen*/

.coupon-html {
    text-align: center;
    background-size: 100%;
    background-image: url("assets/funky-lines.png");
}

    .coupon-html .featured-project {
        width: 90%;
        margin: 10px auto;
        border-radius: 30px;
        padding-bottom: 14px;
        border: 3px dashed rgba(0,0,0,0.15);
        background-color: white;
    }

    .coupon-html .logo {
        margin: 0 auto;
    }

    .coupon-html .expires {
        text-align: center;
        margin-top: 10px;
    }

        .coupon-html .expires .text-lg {
            font-weight: bold;
            opacity: 0.9;
        }

    .coupon-html .col-bottom-border {
        border-bottom: 2px solid rgba(0,0,0,0.03);
    }

    .coupon-html .coupon-desc {
        border-radius: 10px;
        box-shadow: 0px 6px 28px rgba(0,0,0,0.18);
        display: flex;
        overflow: hidden;
        align-items: center;
    }

.coupon-content {
    width: 100%;
}

.coupon-html .coupon-details {
    padding-top: 20px;
    width: 94%;
    margin: 0 auto;
}

.coupon-html .coupon-heading {
    padding: 10px 4px 4px 4px;
    margin-bottom: 10px;
    border-bottom: 2px solid rgba(0,0,0,0.05);
}

.coupon-html .coupon-h2 {
    font-size: 1.4em;
    font-weight: bold;
    padding-bottom: 12px;
    padding-top: 4px;
    color: rgba(0,0,0,0.75);
}

.coupon-html .icon-box {
    position: absolute;
    top: 0;
    right: 0 !important;
}

.quiz {
    border-radius: 28px 28px 0 0 !important;
}


.coupon-html {
    display: flex;
    align-items: center;
    overflow-y: scroll;
    min-height: 100vh;
}

    .coupon-html .image-box img {
        border-radius: 10px;
    }

.copy-coupon {
    font-size: 0.8em;
    margin-top: 25px;
    opacity: 0.5;
    font-weight: bold;
}

.coupon-html .alert-danger {
    color: gray;
    background-color: rgba(0,0,0,0.1);
    border: none;
    border-radius: 0;
    font-weight: bold;
}

.coupon-html .alert {
    margin-bottom: 0;
}


.message-to-users {
    position: relative;
    padding: 12px 30px;
    width: 100%;
    color: white;
    font-size: 0.9em;
    font-weight: 700;
    text-align: center;
    background-image: radial-gradient( circle farthest-corner at 3.6% 26.5%, rgba(106,19,253,1) 0.1%, rgba(18,134,242,1) 90% );
}

#close-message {
    opacity: 0.6;
    display: block;
    position: absolute;
    z-index: 3;
    top: 50%;
    font-weight: 900;
    font-size: 1em;
    transform: translateY(-50%);
    right: 14px;
    transition: opacity 0.2s ease;
}

    #close-message:hover {
        cursor: pointer;
        opacity: 1;
    }


/* Full LANDING page - New 2020*/

.landing-hero {
    position: relative;
    min-height: 700px;
    padding-top: 60px;
    padding-bottom: 80px;
    background-image: url("../css/assets/followgreen-hero-image-3.svg");
    background-position: 20% 100%;
    background-size: 38%;
    background-repeat: no-repeat;
    /*overflow: hidden;*/
}

.lottie-container {
    max-width: 280px;
    margin: 0 auto;
}

.landing-header-container {
    z-index: 3;
}

.landing-hero:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: -50px;
    width: 200px;
    height: 200px;
    background-image: url("../css/assets/green-circles-sm.svg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.landing-hero:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: -50px;
    width: 400px;
    height: 400px;
    background-image: url("../css/assets/green-circles-bg.svg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.styled-form {
    background-color: #FFF;
    padding: 20px 38px 1px 38px;
    border-radius: 16px;
    position: relative;
    z-index: 4;
}

    .styled-form h3 {
        font-size: 1.1rem;
    }

    .styled-form .form-control {
        padding: 1.275rem 1.075rem;
        background-color: rgba(0,0,0,0.02);
    }

.input-half {
    max-width: 48%;
}

.landing-signup-form {
    box-shadow: 0 23px 44px 0 rgba(184,241,190,0.60);
    max-width: 340px;
}

.styled-dropdown {
    width: 100%;
    box-shadow: 0 4px 12px 0 rgba(0,0,0,0.1);
}

    .styled-dropdown .buttons-side {
        background: white;
    }

    .styled-dropdown .dropdown-menu {
        height: 286px;
        width: 100%;
        overflow-y: scroll;
        overflow-x: hidden;
        border: none;
        box-shadow: 0 4px 12px 0 rgba(0,0,0,0.16);
        border-radius: 4px;
    }

#showresults {
    background-color: rgba(0,0,0,0.03);
    width: 90%;
    border-radius: 18px;
    text-align: center;
    font-weight: 700;
    font-size: 14px;
    margin: 8px auto;
    animation: nudge 12s ease infinite;
}

@keyframes nudge {
    0% {
        transform: translateX(0);
    }

    48% {
        transform: translateX(-1px);
    }

    49% {
        transform: translateX(1px);
    }

    50% {
        transform: translateX(-1px);
    }

    51% {
        transform: translateX(1px);
    }

    52% {
        transform: translateX(-1px);
    }

    53% {
        transform: translateX(1px);
    }

    54% {
        transform: translateX(-1px);
    }

    55% {
        transform: translateX(1px);
    }

    56% {
        transform: translateX(0px);
    }

    100% {
        transform: translateX(0);
    }
}

.btn-green-main {
    background-image: var(--gradient-green);
    border-radius: 6px;
    width: 100%;
    display: block;
    border-radius: 6px;
    color: white;
    padding: 6px 14px;
    font-weight: bold;
    position: relative;
    z-index: 2;
}

    .btn-green-main:before {
        content: "";
        display: block;
        position: absolute;
        top: 14px;
        left: 10%;
        width: 80%;
        height: 34px;
        background: var(--gradient-green);
        filter: blur(18px);
        opacity: 0.8;
        z-index: -1;
    }

.btn-orange-main {
    background-image: var(--gradient-orange);
    border-radius: 6px;
    width: 100%;
    display: block;
    border-radius: 6px;
    color: white;
    padding: 6px 14px;
    font-weight: bold;
    position: relative;
    z-index: 2;
}

.news-list {
    margin: 12px 0;
    box-shadow: 0 3px 8px 0 rgba(0,0,0,0.12);
    border-radius: 18px;
    overflow: hidden;
}

.news-article {
    padding: 0 !important;
}

.search-btn {
    background: #2c353d none repeat scroll 0 0;
    border: medium none;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    margin-left: -4px;
    padding: 4px 20px;
    border-radius: 4px;
    text-transform: uppercase;
}

.form-btn {
    max-width: 220px;
}

.btn-orange-main:before {
    content: "";
    display: block;
    position: absolute;
    top: 14px;
    width: 80%;
    height: 34px;
    background: var(--gradient-orange);
    filter: blur(18px);
    opacity: 0.8;
    z-index: -1;
}

.btn-neutral-main {
    background-color: #fff;
    border-radius: 6px;
    width: 100%;
    display: block;
    border-radius: 6px;
    color: white;
    padding: 6px 14px;
    font-weight: bold;
    position: relative;
    z-index: 2;
    border: 2px solid rgba(0,0,0,0.08);
    color: var(--title-gray);
}

.form-seperator {
    height: 10px;
    width: 100%;
    background-color: rgba(0,0,0,0.02);
    border-radius: 12px;
}

.hero-subtitle {
    /*font-family: "OpenSans", sans-serif;*/
    font-weight: 300;
    max-width: 300px;
    font-size: var(--text-lg);
}


.leafs {
    max-width: 60px;
}

.new-notification {
    opacity: 0.91;
    background: #FFFFFF;
    border: 2px solid rgba(151,151,151,0.04);
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.14);
    border-radius: 25.5px;
}

.container-onboard {
    max-width: 1000px;
    margin: 0 auto;
    align-items: center;
    position: relative;
    z-index: 3;
}


.onboard-step {
    width: 130px;
    height: 130px;
    border-radius: 100%;
    background-color: white;
    display: block;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 145%;
    position: relative;
    transition: transform 0.2s ease, background-color 0.3s ease;
}

    .onboard-step:hover {
        background-color: var(--green-main);
        cursor: pointer;
    }

/*.onboard-step::after {
        content: "";
        display: block;
        position: absolute;
        top: 28px;
        left: 8%;
        width: 84%;
        height: 84%;
        opacity: 0.3;
        background: var(--gradient-green);
        filter: blur(18px);
        border-radius: 100%;
        z-index: -1;
    }*/

.onboard-arrow {
    width: 90px;
    position: relative;
    top: -40px;
}

.onboard-text {
    max-width: 130px;
    font-weight: 900;
    line-height: 1.2;
}

.onboard-step-1:hover::before {
    content: "Δηλώνεις όνομα, email και Δήμο στον οποίο ανήκεις και ο λογαριασμός σου είναι έτοιμος. Με την εγγραφή, κερδίζεις τους πρώτους πόντους επιβράβευσης. ​​Εάν ο Δήμος σου είναι followgreen Δήμος, τότε θα οδηγηθείς στη σελίδα του, διαφορετικά θα μπορείς να ενημερώνεσαι ως επισκέπτης.";
    position: absolute;
    top: 220px;
    left: -60px;
    width: 800px;
    padding: 18px 50px;
    border-radius: 24px;
    background-color: rgba(255,255,255,0.94);
    box-shadow: 0 12px 24px 0 rgba(0,0,0,0.2);
    display: block;
    border-radius: 50px;
    z-index: 100;
}

.onboard-step-2:hover::before {
    content: "Κερδίζεις πόντους α) όταν ενημερώνεσαι για την ανακύκλωση μέσω άρθρων, κουίζ, βίντεο και Green Missions και β) όταν επαναχρησιμοποιείς ή ανακυκλώνεις σε συγκεκριμένα σημεία του Δήμου σου, λαμβάνοντας κουπόνι ανακύκλωσης. Ακόμη, κερδίζεις πόντους όταν δηλώσεις την ανακύκλωσή σου εβδομαδιαία στη σελίδα ‘’Ανακύκλωσε’’, καθώς και όταν συστήνεις το Followgreen σε φίλο/η σου.";
    position: absolute;
    top: 220px;
    left: -200px;
    width: 800px;
    padding: 18px 50px;
    border-radius: 24px;
    background-color: rgba(255,255,255,0.94);
    box-shadow: 0 12px 24px 0 rgba(0,0,0,0.2);
    display: block;
    border-radius: 50px;
    z-index: 100;
}

.onboard-step-3:hover::before {
    content: "Χρησιμοποιείς τους πόντους επιβράβευσης για να αποκτήσεις προσφορές τοπικών επιχειρήσεων στον Δήμο σου ή/και web προσφορές σε όλη την Ελλάδα.";
    position: absolute;
    top: 220px;
    left: -400px;
    width: 800px;
    padding: 18px 50px;
    border-radius: 24px;
    background-color: rgba(255,255,255,0.94);
    box-shadow: 0 12px 24px 0 rgba(0,0,0,0.2);
    display: block;
    border-radius: 50px;
    z-index: 100;
}


.onboard-step-4:hover::before {
    content: "Δωρίζεις τους πόντους επιβράβευσης σε σχολεία της επιλογής σου, στο πλαίσιο δράσεων ανακύκλωσης που διοργανώνει ο Δήμος. Με αυτόν τον τρόπο στηρίζεις την προσπάθεια των παιδιών για ανακύκλωση και ενθαρρύνεις την ευγενή τους άμιλλα.";
    position: absolute;
    top: 220px;
    left: -650px;
    width: 800px;
    padding: 18px 50px;
    border-radius: 24px;
    background-color: rgba(255,255,255,0.94);
    box-shadow: 0 12px 24px 0 rgba(0,0,0,0.2);
    display: block;
    border-radius: 50px;
    z-index: 100;
}


.onboard-step-1 {
    background-image: url("../../Content/css/assets/onboard-1.svg");
}

.onboard-step-2 {
    background-image: url("../../Content/css/assets/onboard-2.svg");
}

.onboard-step-3 {
    background-image: url("../../Content/css/assets/onboard-3.svg");
}

.onboard-step-4 {
    background-image: url("../../Content/css/assets/onboard-4.svg");
}

.follow-heading-sections {
    text-align: center;
}

.signup-terms {
    font-size: 12px;
    line-height: 1.32;
    padding: 1.275rem 1.075rem;
    padding-top: 10px;
    opacity: 0.84;
}

    .signup-terms a {
        text-decoration: underline;
        color: gray;
    }

.follow-heading {
    display: inline-block;
    font-size: 1.6rem;
    position: relative;
    margin-bottom: 32px;
}

    .follow-heading:after {
        content: "";
        display: block;
        position: absolute;
        top: 40px;
        width: 100%;
        border-radius: 14px;
        height: 4px;
        background: var(--gradient-orange);
        opacity: 1;
    }

    .follow-heading:before {
        content: "";
        display: block;
        position: absolute;
        top: 46px;
        width: 80%;
        left: 10%;
        height: 2px;
        background: var(--gradient-orange);
        opacity: 1;
        filter: blur(6px);
    }

.new-indicator {
    display: block;
    width: 8px;
    height: 8px;
    background-color: lightgreen;
    border-radius: 100%;
}

.owl-munci .owl-stage-outer {
    padding: 40px 0;
    position: relative;
}

.owl-stage-outer:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    pointer-events: none;
    width: 130px;
    height: 100%;
    z-index: 1;
    /*background: rgb(0,0,0);
    background: linear-gradient(90deg, rgb(255,255,255) 0%, rgba(255,255,255,0) 100%);*/
}

.owl-stage-outer:after {
    content: "";
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 130px;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    /*background: rgb(0,0,0);
    background: linear-gradient(270deg, rgb(255,255,255) 0%, rgba(255,255,255,0) 100%);*/
}

.munci-display {
    height: 280px;
    background-color: white;
    border-radius: 24px;
    position: relative;
    /*box-shadow: 0 9px 38px 0 rgba(0,0,0,0.3);*/
    background-image: url("../../Content/css/assets/munci-example.jpg");
    background-size: cover;
    background-position: bottom;
}

.munci-stats {
    box-shadow: 0 20px 40px 0 rgba(0,0,0,0.1);
    border-radius: 24px;
    background-image: url(../../Content/css/assets/white_plaster_half.png);
    background-repeat: repeat;
    background-position: center;
    border: 5px solid white;
    font-family: 'Roboto Slab', serif;
    padding: 20px;
    text-align: center;
}

    .munci-stats .fa {
        margin-right: 5px;
        color: black;
    }

.munci-logo {
    max-width: 118px;
    display: block;
    margin: 0 auto;
    margin-top: 6px;
}

.munci-infos-header {
    opacity: 0.7;
    font-size: 17px;
}

.munci-infos {
    font-weight: bolder;
    font-size: 26px;
    line-height: 1.4;
    margin-top: 2px;
}

.munci-display:after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    border-radius: 24px;
    z-index: 1;
    background: rgb(0,0,0);
    background: linear-gradient(0deg, rgba(0,0,0,0.5382746848739496) 0%, rgba(0,0,0,0) 100%);
}

.offer-title-dots {
    text-overflow: ellipsis;
    /*white-space: nowrap;*/
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
/*Custom carousel images for each muncipality*/
.munci-display-ampelokipi-menemeni {
    background-image: url(/Content/css/assets/muncipality-images/ampelokipoi.jpg);
}

.munci-display-arta {
    background-image: url(/Content/css/assets/muncipality-images/arta.jpg);
}

.munci-display-vrilissia {
    background-image: url(/Content/css/assets/muncipality-images/vrilissia.jpg);
}

.munci-display-drama {
    background-image: url(/Content/css/assets/muncipality-images/drama.jpg);
}

.munci-display-zitsa {
    background-image: url(/Content/css/assets/muncipality-images/zitsa.jpg);
}

.munci-display-ioannina {
    background-image: url(/Content/css/assets/muncipality-images/ioannina.jpg);
}

.munci-display-komotini {
    background-image: url(/Content/css/assets/muncipality-images/komotini.jpg);
}

.munci-display-national {
}

.munci-display-orestiada {
    background-image: url(/Content/css/assets/muncipality-images/orestiada.jpg);
}

.munci-display-ziros {
    background-image: url(/Content/css/assets/muncipality-images/ziros.jpg);
}

.munci-display-pallini {
    background-image: url(/Content/css/assets/muncipality-images/pallini.JPG);
}

.munci-display-peristeri {
    background-image: url(/Content/css/assets/muncipality-images/peristeri.jpg);
}

.munci-display-pilea-hortiatis {
    background-image: url(/Content/css/assets/muncipality-images/pilea.jpg);
}

.munci-display-loutraki {
    background-image: url(/Content/css/assets/muncipality-images/loutraki.jpg);
}


.munci-display-moschato-tavros {
    background-image: url(/Content/css/assets/muncipality-images/moschato.jpg);
}

.munci-display-centralkerkira {
    background-image: url(/Content/css/assets/muncipality-images/kerkira1.jpg);
}

.munci-display-koropi {
    background-image: url(/Content/css/assets/muncipality-images/koropi3.jpg);
}

.munci-display-konitsa {
    background-image: url(/Content/css/assets/muncipality-images/konitsa.jpg);
}

.munci-display-tinos {
    background-image: url(/Content/css/assets/muncipality-images/tinos.jpg);
}

.munci-display-oraiokastro {
    background-image: url(/Content/css/assets/muncipality-images/oraiokastro.jpg);
}

.munci-display-kavala {
    background-image: url(/Content/css/assets/muncipality-images/kavala.jpg);
}

.munci-display-xanthi {
    background-image: url(/Content/css/assets/muncipality-images/xanthi.jpg);
}

.munci-display-alexpolis {
    background-image: url(/Content/css/assets/muncipality-images/alexpolis.jpg);
}

.owl-munci h4 {
    display: inline-block;
    padding: 10px 20px;
    color: var(--title-gray);
    border-radius: 46px;
    position: absolute;
    left: -12px;
    font-size: var(--text-base);
    z-index: 4;
    background-color: #fff;
    font-weight: 700;
    bottom: 20px;
    box-shadow: 0 4px 14px 0 rgba(0,0,0,0.06);
}

.owl-prev {
    width: 15px;
    height: 100px;
    position: absolute;
    margin-left: -40px !important;
    display: block !important;
    border: 0px solid black;
    top: 50%;
    transform: translateY(-50%);
    display: block !important;
    border: 0px solid black;
}


.owl-next {
    width: 15px;
    height: 100px;
    position: absolute;
    right: -55px;
    display: block !important;
    border: 0px solid black;
    top: 50%;
    transform: translateY(-50%);
    display: block !important;
    border: 0px solid black;
}

    .owl-prev i, .owl-next i {
        transform: scale(2,5);
        color: #cdcdcd;
    }


.landing-stats {
    margin-top: 80px;
    margin-bottom: 120px;
}

.stat-block {
    background: #FFFFFF;
    box-shadow: 0 2px 24px 0 rgba(0,0,0,0.11);
    border-radius: 37px;
    text-align: center;
    padding: 30px;
    padding-bottom: 0;
    position: relative;
    overflow: hidden;
}


.stat-block-munci h5 span {
    color: #4879A9;
    font-size: 2.4rem;
}

.stat-block-learn h5 span {
    color: #349796;
    font-size: 3.6rem;
}

.stat-block-offers h5 span {
    color: #04A800;
    font-size: 2.4rem;
}

.stat-block-munci {
    z-index: 1;
}

.stat-block-learn {
    padding-top: 30px;
    z-index: 3;
    transform: scale(1.26);
}

.stat-block-offers {
    z-index: 1;
}

.stat-block:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 16px;
    width: 100%;
    background: var(--gradient-orange);
}

.stat-block-munci:after {
    background: var(--gradient-orange);
}

.stat-block-learn:after {
    background: var(--gradient-green);
}

.stat-block-offers:after {
    background: var(--gradient-orange);
}


@media only screen and (max-width: 1320px) {
    .home_video {
        width: auto;
        min-height: 100%;
        transform: translateX(0%);
    }
}

/*@media only screen and (max-width: 1024px) {
    .savingswrapper .recycleBucketColumn {
        width: 100%;
    }
}*/

@media only screen and (max-width: 1024px) {
    #actionModal-2 .modal-dialog, #actionModal-1 .modal-dialog {
        width: 95% !important;
    }

    .mission-btn span {
        display: none;
    }

    .mission-btn {
        padding: 0;
        margin: 0;
    }

    .savingswrapper .recycleBucketColumn {
        width: 100%;
    }
}


@media only screen and (max-width: 992px) {
    .select2-container {
        margin-bottom: 20px !important;
    }

    .carousel-mission-title {
        font-size: 18px !important;
    }

    .carousel-mission-desc {
        font-size: small;
    }

    .buy-btn {
        position: relative;
        cursor: pointer;
        display: inline-block;
        color: white !important;
        font-size: medium;
        padding: 6px 7px;
        text-transform: uppercase;
        font-weight: 900;
        font-family: 'Open Sans',sans-serif;
        background-color: green;
        background-color: var(--green-main);
        border-radius: 24px;
        box-shadow: 0 4px 12px 0 var(--green-main-subtle);
        transition: box-shadow 0.4s ease;
        line-height: normal !important;
    }
}



@media only screen and (max-width: 940px) {
    .home_video {
        transform: translateX(-20%);
    }
}




/*Column to rows view*/
@media only screen and (max-width: 890px) {

    .modal-points {
        top: 0;
        padding-top: 0;
        position: relative !important;
    }


    .modal-main-text {
        min-height: unset;
    }

    .learn-where {
        display: none;
    }

    #actionModal-2, #actionModal-1 {
        padding-top: 20px;
    }

    .flexthis {
        flex-direction: row;
        flex-wrap: wrap;
    }

        .flexthis .column-title {
            min-height: unset;
        }

    #actionModal-2 .recycle-column, #actionModal-1 .recycle-column {
        width: 100% !important;
        height: auto;
        border-bottom: 2px solid white;
    }

    #actionModal-2 .column-title, #actionModal-1 .column-title {
        padding: 20px 20px 20px 50px;
        font-weight: 900;
    }

    #actionModal-2 .recycle-column:nth-child(1) .column-title, #actionModal-1 .recycle-column:nth-child(1) .column-title {
        padding-top: 50px;
    }

    #actionModal-2 .bottom-details-content, #actionModal-1 .bottom-details-content {
        position: relative;
    }

    #actionModal-2 .inner-content, #actionModal-1 .inner-content {
        max-width: 65%;
        margin: 0 auto;
    }

        #actionModal-2 .inner-content p, #actionModal-1 .inner-content p {
            font-size: 11px;
            text-align: center;
        }

    #yellowBucket, #brownBucket, #blueBucket {
        background-image: url("/images/recyclesvg.svg");
        background-size: 30% !important;
    }

        #brownBucket:after, #blueBucket:after {
            opacity: 1;
        }

        #yellowBucket:after {
            opacity: 0.8;
        }

    #actionModal-donation .donation-text {
        padding: 65px 20px 25px 20px;
    }
}




@media only screen and (max-device-width : 800px) and (orientation: landscape) {
    .video_container {
        height: 560px;
    }
}





@media only screen and (max-width: 767px) {


    #actionModal-2 .modal-header, #actionModal-1 .modal-header, #actionModal-donation .modal-header {
        padding: 2px 4px;
        width: 65% !important;
    }

    #actionModal-2 .column-title, #actionModal-1 .column-title {
        padding: 20px 20px;
    }

    #actionModal-donation .modal-header {
        padding: 6px;
    }

    #actionModal-2 .modal-title, #actionModal-1 .modal-title, #actionModal-donation .modal-title {
        padding: 4px 4px !important;
        font-size: 13px !important;
    }

    #actionModal-2 .inner-content p, #actionModal-1 .inner-content p {
        padding: 18px 5px 18px 5px !important;
        margin: 0;
    }

    #actionModal-2 .inner-content, #actionModal-1 .inner-content {
        max-width: 75%;
    }

    .irecycle {
        padding-top: 30px !important;
    }

    .mission-btn, .how-btn {
        position: absolute;
        right: -42px;
        top: 118px;
        z-index: 1;
    }
}



@media only screen and (max-width: 767px) {

    /*#mun {
        position: absolute;
        top: 90px;
        left: 50%;
        transform: translate(-50%, 0);
        width: 95%;
        text-align: center;
    }*/
    /*.header-section {
        padding-bottom: 70px;
    }*/


    .carousel-mission-title {
        font-size: 14px !important;
    }

    .carousel-mission-desc {
        font-size: 12px !important;
    }
}

@media only screen and (max-height: 670px) {

    .app-banner .banner-close {
        top: calc(100% - 24px) !important;
    }
}


@media screen and (max-width: 640px) {
    .gdpr-modal {
        position: absolute;
    }

    .body_freeze {
        overflow: auto;
    }
}


@media screen and (max-width: 560px) {
    .spot {
        width: 100%;
        margin: 2% 0;
    }

    .carousel .carousel-item {
        height: 300px;
    }

    .carousel-item-img {
        position: absolute;
        top: 0;
        left: 0;
        min-height: 300px;
    }

    .offer-display {
        overflow: hidden;
        border-radius: 9px 9px 0 0;
        position: relative;
        background-color: white;
        z-index: 3;
    }

        .offer-display .offer-type {
            font-size: x-small !important;
            right: 55px;
            bottom: 14px;
            left: unset;
            top: unset;
            max-width: 120px;
        }

        .offer-display .new-offer {
            font-size: x-small !important;
            right: 52px;
            bottom: 29px;
            left: unset;
            top: unset;
            width: 40px;
        }

    .offer-type {
        min-width: 40px;
        border-radius: 9px;
    }
}



/*@media only screen and (max-width: 520px) {
    .carousel-mission-title {
        font-size: 14px;
        margin-bottom: 0.2em;
    }

    .carousel-mission-desc {
        font-size: 8px;
        margin-top: 0.5em;
    }

    .carousel-mission-btn-text {
        font-size : 8px;
    }
    
    .button-cta-green {
        padding: 0px 0px;
    }

    .green-mission-badge {
        height: 15px;
        top: 22px;
    }
}*/



@media only screen and (max-width: 414px) {
    .home_titles {
        top: 12%;
    }

        .home_titles h2 {
            font-size: 30px;
        }

    .munci_wrapper {
        bottom: 5%;
        width: 90%;
    }

        .munci_wrapper ul li a {
            font-size: 14px !important;
        }

    .modal-wrapper-btns {
        transform: translate(-50%) scale(0.8) !important;
    }


    .buy-btn {
        position: relative;
        cursor: pointer;
        display: inline-block;
        color: white !important;
        font-size: small;
        padding: 4px 2px;
        text-transform: uppercase;
        font-weight: 900;
        font-family: 'Open Sans',sans-serif;
        background-color: green;
        background-color: var(--green-main);
        border-radius: 5px;
        box-shadow: 0 4px 12px 0 var(--green-main-subtle);
        transition: box-shadow 0.4s ease;
        line-height: normal !important;
    }

    .carousel .carousel-item {
        height: 300px;
    }

    .carousel-item-img {
        position: absolute;
        top: 0;
        left: 0;
        min-height: 300px;
    }

    .carousel-small-fit {
        height: 100%;
        object-fit: cover;
    }

    .green-mission-badge {
        z-index: 100;
    }

    .offer-display {
        overflow: hidden;
        border-radius: 9px 9px 0 0;
        position: relative;
        background-color: white;
        z-index: 3;
    }

        .offer-display .offer-type {
            font-size: x-small !important;
            right: 40px;
            bottom: 14px;
            left: unset;
            top: unset;
            max-width: 120px;
        }

        .offer-display .new-offer {
            font-size: x-small !important;
            right: 37px;
            bottom: 39px;
            left: unset;
            top: unset;
            width: 40px;
        }

    .offer-type {
        min-width: 40px;
        border-radius: 9px;
    }
}



@media only screen and (max-width: 361px) {
    /*.header-section {
        padding-bottom: 15px;
    }*/


    .offer-display {
        overflow: hidden;
        border-radius: 9px 9px 0 0;
        position: relative;
        background-color: white;
        z-index: 3;
    }

        .offer-display .offer-type {
            font-size: x-small !important;
            right: 30px;
            bottom: 14px;
            left: unset;
            top: unset;
            max-width: 120px;
        }

        .offer-display .new-offer {
            font-size: x-small !important;
            right: 27px;
            bottom: 58px;
            left: unset;
            top: unset;
            width: 40px;
        }

    .offer-type {
        min-width: 40px;
        border-radius: 9px;
    }
}

.alignContent {
    left: 40%;
    right: 40%;
    color: black;
}

.carouselOwl {
    margin: auto;
    padding: 0 30px;
}

    .carouselOwl .card {
        border: 0;
        text-align: center;
        margin: 20px 0;
        width: 80%;
        color: white;
        font-size: 90px;
    }

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

.owl-dot {
    height: 15px;
    width: 45px;
    margin: 0 5px;
    outline: none;
    border-radius: 14px;
    border: 2px solid #0072bc !important;
    box-shadow: 0px 4px 15px green;
    transition: all 0.3s ease;
}

    .owl-dot.active,
    .owl-dot:hover {
        background: #0072bc !important;
    }


.new-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-bottom: 0 !important;
}

span.left-part {
    position: absolute;
    right: 100%;
    white-space: nowrap;
    padding-right: 20px;
}

.city-name {
    color: #04283e;
    font-weight: bold;
    font-size: 24px;
    display: inline-block;
    line-height: 40px;
    padding: 0 23px;
    background-image: linear-gradient(to right, rgba(13,131,121,0.93), rgba(148,219,163,0.93));
    border-radius: 30px;
    box-shadow: -6px 6px 0px 0px #FFFFFF;
}

.schools .school-home-cont {
    height: 222px;
    display: flex;
    align-items: self-end;
    border-radius:0;
}

.schools:not(.schools-owl-carousel) .school-home-cont {
    width: 32%;
}

.schools.schools-owl-carousel .school-home-cont {
    width: 100%;
}

.schools .school-info {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
    background-color: rgba(36, 157, 121, 0.66);
    width: 100%;
    padding: 6px 16px;
    border-radius: 0px;
    min-height: 48px;
}

.schools .school-home-cont .school-p {
    color: white;
    font-size: 9px;
    font-weight: bolder;
    margin-top: 0px;
    margin-bottom:6px;
    line-height: 1;
}

.schools .school-current-points {
    color: white;
    padding: 0px;
    border-radius: 0;
    background: none;
    font-size: 14px;
    font-weight: bold;
    line-height: 1;
}

.schools .school-home-cont h5 {
    width: 55%;
}

.school-cont .button-cta-green {
    position: absolute;
    right: 5px;
}

.sportclub-home {
    text-align: center;
    padding: 8px 42px;
    box-shadow: 6px 6px 28px 0px rgba(0, 0, 0, 0.245);
    border-radius: 30px;
    margin: 0 20px;
    position: relative;
    transition: all 0.5s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-wrap: nowrap;
    align-content: space-between;
    align-items: center;
    width: 198px;
    background-color:#fff;
    position:relative;
    z-index:1;
}

.sportclub-home.selected {
    border: 4px solid #008657;
}

.sportclub-home:hover {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
}

.sportclub-image {
    overflow: hidden;
    background: #fff;
    background-origin: border-box;
    border-radius: 100%;
    border: 4px solid #008657;
    margin: 9px auto 6px;
    max-width: 93px !important;
    width: 93px;
    height: 93px;
}

.sportclub-title {
    font-family: Roboto;
    font-size: 12px;
    font-weight: bold;
    color: #3d3d3d;
}

.sportclub-image img {
    max-width: 100%;
}

.sportclub-home .star {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url(../../Content/css/assets/material-05.svg);
    background-repeat: no-repeat;
    background-size: cover;
    cursor: pointer;
    transition: all 0.5s ease;
    margin-left: 10px;
}

.sportclub-home .star_green {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url(../../Content/css/assets/material-06.svg);
    background-repeat: no-repeat;
    background-size: cover;
    cursor: pointer;
    transition: all 0.5s ease;
    margin-left: 10px;
}

.sportclub-home .star:hover {
    background-image: url(../../Content/css/assets/material-06.svg);
}

.sportclub-home .star a {
    opacity: 0;
}

.sportclub-p {
    font-family: Roboto;
    font-size: 9px;
    font-weight: bold;
    line-height: normal;
    margin-bottom: 5px;
    color: #008657;
    min-width:100%;
}

.sportclub-home .top {
    font-family: 'Roboto Slab';
    line-height: 1;
    margin-right: -30px;
}

.sportclub-home h5 {
    height: 28px;
    font-weight: 900;
    color: #000;
    font-size: 13px;
    line-height: 1;
    overflow: hidden;
    margin-bottom: 5px;
    max-width:100px;
}

.sportclub-current-points {
    font-family: 'Roboto Slab';
    font-size: 17px;
    font-weight:bold;
    color: #fff;
    border-radius: 10px;
    background: rgb(19,134,97);
    background: linear-gradient(90deg, rgba(19,134,97,1) 0%, rgba(44,168,132,1) 100%);
    margin: 0 auto;
}

.sportclub-info {
    width:93px;
}

.banner-recycle {
    background: rgb(6,125,119);
    background: linear-gradient(180deg, rgba(137,203,157,1) 0%, rgba(0,136,90,1) 100%);
    padding: 20px 0;
    margin-top: 20px;
}

.banner-recycle h2 {
    font-family: 'Roboto Slab';
    font-size: 35px;
    color: #fff;
    font-weight: bold;
}

.figure-with-caption {
    padding: 0 20px;
}

.figure-with-caption img {
    width: 88px;
    height:88px;
}

.figure-with-caption .caption {
    font-size: 12px;
    font-family: Roboto;
    color: #fff;
    line-height: 1;
    margin-top: 10px;
    font-weight: bold;
}

.recycle-win {
    max-width: 100%;
}

.main-inner {
    background: #fff;
    border-radius: 40px;
    transition: all 0.5s ease;
}

.learn-description {
    font-size: 10px;
    line-height: 1.2;
    height: 24px;
    overflow: hidden;
    margin-top: 20px;
}

.main-inner .column-inner {
    background-color: #fff;
    border: 4px solid #008557;
    box-shadow: 0px 0px 63px -20px rgb(0 0 0 / 50%) !important;
}

.schools-owl-carousel .disabled .carousel-arrow-left,
.schools-owl-carousel .disabled .carousel-arrow-right {
    display: none;
}


.contest-sportsclub{
    background:none
}

.contest-sportsclub:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-55%, -50%);
    width: 100vw;
    height: 100vh;
    background: url(../../Content/css/assets/material-09.svg) no-repeat center center;
    background-size: 100% 100%;
}

.contest-sportsclub .sportclub-home {
    background:#fff;
    box-shadow:none;
}

.offer .offeritem {
    height: auto !important;
}

.owl-carousel.carouselOwl .owl-stage-outer {
    padding: 63px 0;
}

@media only screen and (min-width: 576px) {
    #sport-club-support .modal-dialog {
        max-width: 768px !important;
    }
}

.title-orange h2 {
    display: inline-block;
    background: linear-gradient(90deg, rgba(249,172,66,1) 0%, rgba(239,62,66,1) 100%);
    color: #fff;
    padding: 10px 32px 10px 32px;
    border-radius: 30% 30% 30% 30% / 100% 100% 100% 100%;
}

.title-blue-green h2 {
    display: inline-block;
    background: linear-gradient(90deg, rgba(43,167,223,1) 0%, rgba(0,133,86,1) 100%);
    color: #fff;
    padding: 10px 32px 10px 32px;
    border-radius: 20% 20% 20% 20% / 100% 100% 100% 100%;
}

.title-blue h2 {
    display: inline-block;
    background: linear-gradient(90deg, rgba(31,120,185,1) 0%, rgba(43,167,223,1) 100%);
    color: #fff;
    padding: 10px 32px 10px 32px;
    border-radius: 20% 20% 20% 20% / 100% 100% 100% 100%;
}

.sportclub-page .sportclub-home {
    margin:0 40px 0 0;
}

.modal-footer {
    border-top: none!important;
    padding:0!important;
}

.margin-bottom-25 {
    margin-bottom:25px!important;
}

.home-page-title-align {
    display:block;
    overflow:hidden;
}
.hidden {
    display:none;
}

.extra-fields {
    width: 100%;
}

.deh, .binnumber, .plasicbagnumber {
    position: relative;
}

.deh:hover::before {
    content: 'Από την ένδειξη "Αριθμός Παροχής" που αναγράφεται στον λογαριασμό σας: π.χ. 1 23456789-02 5 Εισάγετε ΜΟΝΟ τα 8 ψηφία, που βρίσκονται μετά τον πρώτο αριθμό έως και την παύλα, όπως παρακάτω: 23456789';
    position: absolute;
    top: 0;
    left: 0;
    width: 50vw;
    padding: 18px;
    transform: translate(-100%, -100%);
    border-radius: 24px;
    background-color: rgba(255,255,255,0.94);
    box-shadow: 0 12px 24px 0 rgba(0,0,0,0.2);
    display: block;
    z-index: 100;
}

.binnumber:hover::before {
    content: 'Ο κωδικός της μεταλλικής ετικέτας π.χ. 0001 αναγράφεται στην πίσω πλευρά του καφέ κάδου που εξυπηρετεί το κτίριό σου. Προσοχή ! Ο κωδικός ετικέτας δεν ταυτίζεται με τον αριθμό στο καπάκι του καφέ κάδου κτιρίου.'; 
    position: absolute;
    top: 0;
    left: 0;
    width: 50vw;
    padding: 18px;
    transform: translate(-100%, -100%);
    border-radius: 24px;
    background-color: rgba(255,255,255,0.94);
    box-shadow: 0 12px 24px 0 rgba(0,0,0,0.2);
    display: block;
    z-index: 100;
}

.plasicbagnumber:hover::before {
    content: 'Ο κωδικός της αυτοκόλλητης ετικέτας π.χ. C0003879312 αναγράφεται στο πακέτο κάθε 5αδας. Μπορείς να καταχωρείς έστω και έναν κωδικό πακέτου ανά μήνα για να λάβεις την επιβράβευση. Προσοχή ! Μην ξεχνάς να ανανεώνεις τον αριθμό από ένα πακέτο 5αδας κάθε μήνα.'; 
    position: absolute;
    top: 0;
    left: 0;
    width: 50vw;
    padding: 18px;
    transform: translate(-100%, -100%);
    border-radius: 24px;
    background-color: rgba(255,255,255,0.94);
    box-shadow: 0 12px 24px 0 rgba(0,0,0,0.2);
    display: block;
    z-index: 100;
}

.reg-form .deh:hover::before {
    transform: translate(0%, 100px);
}

.reg-form .binnumber:hover::before {
    transform: translate(0%, 100px);
}

.reg-form .plasicbagnumber:hover::before {
    transform: translate(0%, 50px);
}

.reg-form .extra-fields {
    width: auto;
}

.fine-print {
    font-size: 11px;
    color: gray;
    line-height: 1.5;
}

.coupon-wrapper .coupon-h2 {
    font-size: 14px;
    font-weight: bold;
    padding-bottom: 0;
    padding-top: 10px;
    color: rgba(0,0,0,0.75);
}

.icon-box-tick {
    position: absolute;
    top: -20px;
    right: -20px;
    width: 50px;
    height: 50px;
    z-index: 2;
    background: url(../../Content/css/assets/tick.png) no-repeat center center;
    z-index: 2;
    box-shadow: 0 8px 30px 0 rgba(0,0,0,0.16);
    border-radius: 100%;
    transition:all 0.5s ease;
}

.icon-box-tick.disabled {
    background: url(../../Content/css/assets/tick_bw.png) no-repeat center center;
}

.icon-box-tick.disabled:hover {
    background: url(../../Content/css/assets/tick.png) no-repeat center center;
}

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

.margin-auto {
    margin:0 auto!important;
}

.placeholderfix .coupon-input::placeholder {
    word-wrap: normal;
    white-space: normal;
    text-align: center;
    transform: translateY(-25%);
}

.icon-box-star {
    position: relative;
    text-align: center;
    width: 185px;
    margin: 0 auto;
}

.icon-box-star:before {
    content:'';
    position:absolute;
    width:55px;
    height:55px;
    background-image: url('../../Content/css/assets/asterisk.png');
    top:50%;
    transform:translateY(-50%);
    right: calc(100% + 16px);
}

.explain-text {
    font-size: 12px;
    text-align: left;
    line-height: 1.2;
    color: #fff;
    position:relative;
}

.action-wrapper.brpl{
    padding:22px 0 0;
}

.explain-text:before {
    content: '';
    position: absolute;
    width: 38px;
    height: 38px;
    background-image: url('../../Content/css/assets/asterisk.png');
    top: 50%;
    transform: translateY(-50%);
    right: calc(100% + 4px);
}

.points-so-far {
    padding: 14px 14px 14px 54px;
    background: linear-gradient(0deg, rgba(0,133,88,1) 0%, rgba(58,180,74,1) 100%);
    border-radius: 11px;
    margin-top:18px;
}

.plastic, .brown {
    position:relative;
}

.coupon-row.plastic:hover:before {
    content: 'Ο κωδικός της αυτοκόλλητης ετικέτας π.χ. C0003879312 αναγράφεται στο πακέτο κάθε 5αδας. Μπορείς να καταχωρείς έστω και έναν κωδικό πακέτου ανά μήνα για να λάβεις την επιβράβευση. Προσοχή ! Μην ξεχνάς να ανανεώνεις τον αριθμό από ένα πακέτο 5αδας κάθε μήνα.';
    position: absolute;
    top: 100%;
    left: 0;
    width: 50vw;
    padding: 18px;
    border-radius: 24px;
    background-color: rgba(255,255,255,0.94);
    box-shadow: 0 12px 24px 0 rgba(0,0,0,0.2);
    display: block;
    z-index: 100;
}

.coupon-row.brown:hover:before {
    content: 'Ο κωδικός της μεταλλικής ετικέτας π.χ. 0001 αναγράφεται στην πίσω πλευρά του καφέ κάδου που εξυπηρετεί το κτίριό σου. Προσοχή ! Ο κωδικός ετικέτας δεν ταυτίζεται με τον αριθμό στο καπάκι του καφέ κάδου κτιρίου.';
    position: absolute;
    top: 100%;
    left: 0;
    width: 50vw;
    padding: 18px;
    border-radius: 24px;
    background-color: rgba(255,255,255,0.94);
    box-shadow: 0 12px 24px 0 rgba(0,0,0,0.2);
    display: block;
    z-index: 100;
}

.deh-alert {
    text-align: right;
    color: #e6332a;
    padding: 10px 0;
    cursor: pointer;
    text-decoration: underline;
    font-weight: bold;
    font-size: 14px;
}

#deh .close {
    position: absolute;
    top: 10px;
    right: 20px;
}

#deh .button-cta-green {
    color:#fff;
    font-weight:bold;
}

#deh .button-cta-green:hover {
    color: #fff;
}

.current-coupons .coupon-input {
    margin:0 auto;
}

.blob{
    position:relative;
}

.blob:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-55%, -32%);
    width: 100vw;
    height: 100vh;
    background: url(../../Content/css/assets/material-09.svg) no-repeat center center;
    background-size: 100% 100%;
    z-index: -1;
}

.fix-bg:before {
    content: '';
    position: absolute;
    width: 100vw;
    height: 100vh;
    background: #fff;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
}