/* -----------------------------------
CSS Table of content
--------------------------------------
1. Template default styles
2. Button style
3. Slick Next Prev button style
4. Area style
5. Header area style
6. Mobile menu area style
7. Slider area style
8. Breadcrumb area style
9. Feature area style
10. About area style
11. Donate area style
12. Help area style
13. volunteer area style
14. Portfolio area style 
15. Call to action area style
16. Donor area style
17. Counter area style
18. Testimonial area style
19. Blog area style
20. Single Blog area style
21. Events area style
22. Single event area style
23. Sidebar area style
24. Sponsor area style
25. Contact area style
26. Map area style
27. Footer area style
--------------------------------------*/


/* -----------------------------
1. Template default styles
--------------------------------*/

@import 'https://fonts.googleapis.com/css?family=Montserrat:100,300,400,500,600,700,800|Open+Sans:300,400,600,700';
body {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: 24px;
}

.img {
    max-width: 100%;
    transition: all 0.3s ease-in-out 0s;
}

a {
    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -ms-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}

a:focus {
    text-decoration: none;
    outline: none;
}

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

.uppercase {
    text-transform: uppercase;
}

.capitalize {
    text-transform: capitalize;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #232332;
    font-family: "Montserrat", sans-serif;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 1px;
    margin-top: 0;
    text-transform: uppercase;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
    color: inherit;
}

h1 {
    font-size: 40px;
    font-weight: 500;
}

h2 {
    font-size: 35px;
}

h3 {
    font-size: 28px;
}

h4 {
    font-size: 22px;
}

h5 {
    font-size: 18px;
}

h6 {
    font-size: 16px;
}

ul {
    margin: 0px;
    padding: 0px;
}

li {
    list-style: none
}

p {
    color: #4a4a4a;
    margin-bottom: 15px;
    font-weight: 400;
}

hr {
    margin: 0;
    padding: 0px;
    border-bottom: 1px solid #eee;
    border-top: 0px;
}

label {
    color: #626262;
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
}

*::-moz-selection {
    background: #03bb84;
    color: #fff;
    text-shadow: none;
}

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

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

*::-moz-placeholder {
    color: #555555;
    font-size: 14px;
}

*::placeholder {
    color: #555555;
    font-size: 14px;
}

:focus {
    outline: none;
}
.wrapper {
    overflow: hidden;
    position: relative;
}
.subscribe-form input::placeholder {
    color: #999;
}

.mark {
    background: #4fc1f0 none repeat scroll 0 0;
    color: #ffffff;
}

.container {
    width: 1200px;
}

.white-bg {
    background: #ffffff;
}

.gray-bg {
    background: #f5f5f5;
}

.dark-bg {
    background: #000;
}

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

.theme-section-2 {
    padding: 80px 0;
}

.theme-section-ex-padding {
    padding-bottom: 180px;
}


.padd-botom{ padding-bottom:100px;}
/* ------------------------------
2. Button style
---------------------------------*/

.btn {
    border-radius: 0;
    font-family: "Montserrat",sans-serif;
    font-size: 12px;
    letter-spacing: 1px;
    padding: 10px 15px;
    text-transform: uppercase;
    transition: all 0.3s ease-in-out 0s;
}
.btn-default {
    background-color: #03bb84;
    border: 1px solid transparent;
    border-radius: 0;
    box-shadow: none;
    color: #fff;
}
.btn-default:hover {
    background-color: #fff;
    border-color: #e5e5e5;
    color: #03bb84;
}
.btn-border {
    background: #fff none repeat scroll 0 0;
    border: 1px solid #e5e5e5;
    color: #03bb84;
}
.btn-border:hover {
    background: #03bb84;
    border: 1px solid transparent;
    color: #ffffff;
}
.btn-white {
    background: #fff none repeat scroll 0 0;
    color: #03bb84;
}
.btn-white:hover {
    background: #03bb84;
    color: #ffffff;
}
.btn-transparent {
    background: #ffffff;
    color: #7852b3;
}
.btn-transparent:hover {
    border: 1px solid #ffffff;
    color: #ffffff;
    background: transparent;
}
.text-link {
    color: #03bb84;
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.text-link:hover {
    color: #03bb84;
}




#navbar {
    position: fixed;
    z-index: 999;
    top: 35px;
    left: 0;
    /*height: 3em;*/
    width: 100%;
    background-color: #fff;
    box-sizing: border-box;
    /*background-color: rgba(255,255,255,.1);*/
    box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
    transition: background-color 0.4s ease-out;
}


#navbar.scroll {
    background-color: #009688;
    color: #eef;
    top: 0px;
}

/*body > header {
  margin-top: 4.7em;
}
*/









/* ------------------------------
3. Slick Next Prev button style
---------------------------------*/
.navigation-style-1 .slick-prev, 
.navigation-style-1 .slick-next {
    background: #03bb84;
    border: 1px solid transparent;
    color: #fff;
    bottom: -110px;
    color: transparent;
    cursor: pointer;
    display: block;
    font-size: 0;
    height: 45px;
    line-height: 0;
    outline: medium none;
    padding: 0;
    position: absolute;
    width: 45px;
    top: auto;
    transition: .3s;
}
.navigation-style-1 .slick-prev {
    left: auto;
    right: 60px;
    background: transparent;
    border: 1px solid #03bb84;
}
.navigation-style-1 .slick-next {
    right: 0;
    background: #03bb84;
}
.navigation-style-1 .slick-prev:hover {
    background: #03bb84 none repeat scroll 0 0;
    border: medium solid transparent;
}
.navigation-style-1 .slick-next:hover {
    background: transparent;
    border: 1px solid #03bb84;
    color: #03bb84;
}
.navigation-style-1 .slick-prev::before, 
.navigation-style-1 .slick-next::before {
    font-family: fontawesome;
    font-size: 12px;
    line-height: 1;
    opacity: 1;
}

.navigation-style-1 .slick-prev::before {
    content: "\f177";
    color: #03bb84;
}
.navigation-style-1 .slick-prev:hover::before {
    color: #fff;
}
.navigation-style-1 .slick-next::before {
    content: "\f178";
    color: #fff;
}
.navigation-style-1 .slick-next:hover::before {
    color: #03bb84;
}

.navigation-style-2 .slick-prev {
    left: 0;
    background: transparent;
    border: 1px solid #03bb84;
}
.navigation-style-2 .slick-next {
    left: 60px;
    right: auto;
    background: #03bb84;
}

.testimonial-wrapper.navigation-style-1 .slick-next {
    right: 10px;
}
.testimonial-wrapper.navigation-style-1 .slick-prev {
    right: 70px;
}

/* ------------------------------
4. Area style
---------------------------------*/
.area-heading {
    margin: 0 auto 70px;
    padding-bottom: 30px;
    position: relative;
    width: 70%;
}
.area-heading::before {
    background: #03bb84 none repeat scroll 0 0;
    bottom: 0;
    content: "";
    height: 2px;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    width: 100px;
}
.area-heading::after {
    bottom: 10px;
    color: #03bb84;
    content: "\f004";
    font-family: fontawesome;
    font-size: 20px;
    height: 2px;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
}
.area-title {
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    color: #444;
    text-transform: uppercase;
}
.area-heading p {
    font-size: 16px;
    color: #4a4a4a;
    margin: 0;
}


/* -----------------------------
5. Header area style
-------------------------------- */
.header-top-area {
    border-bottom: 1px solid #e5e5e5;
}
.email-phone {
    overflow: hidden;
}
.email-phone li {
    float: left;
    border-right: 0px solid rgba(255, 255, 255, 0.1);
    padding: 8px 15px 8px 0;
    margin-right: 15px;
}

.email-phone li:last-child {
    border-right: medium none;
    margin-right: 0;
}

.email-phone li a {
    color: #666;
    display: block;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.email-phone a i {
    color: #03bb84;
    padding-right: 6px;
}

.header-social-menu {
    float: right;
}

.header-social-menu li {
    float: left;
}

.text-bold {
    margin-left: 5px;
}
.header-social-menu li:nth-child(n+2) {
    margin-left: 5px;
}
.header-social-menu li a {
    color: #666;
    display: block;
    font-size: 14px;
    padding: 3px 0;
    margin-top: 7px;
}

.header-social-menu li a:hover {
    color: #03bb84;
}


.header-social-menu .top-share {
    list-style: none;
    margin: 0 0 0 0px;
    display: inline-block;
    padding: 0;
    text-shadow: none;
}


.top-share .fb {
    background-color: #3b5999;
}
.top-share .tw {
    background-color: #27aae1;
}
.top-share .gl {
    background-color: #de4b38;
}
.top-share .ig {
    background-color: #5280a5;
}
.top-share .wa {
    background-color: #189d0e;
}

.top-share a {
    display: block;
    text-align: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border-top-right-radius: 30px;
    border-top-left-radius: 30px;
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 30px;
    -moz-border-radius: 30px 30px 30px 30px;
    -webkit-border-radius: 30px 30px 30px 30px;
    -khtml-border-radius: 30px 30px 30px 30px;
    color: #ffffff;
    cursor: pointer;
    line-height: 26px;
    font-size: 16px;
}

.header-top-right{
    float: right;
}

.logo-wrapper {
    padding: 0px 0;
    position: absolute;
    z-index: 2;
    /*top: -20px;*/
    transition: 0.3s;
}

.logo {
    color: #434343;
    font-family: montserrat;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: 1px;
    line-height: normal;
    text-transform: uppercase;
}
.logo:hover {
    color: inherit;
}
.template-menu ul {
    float: right !important;
}

.template-menu ul > li {
    float: left;
    padding: 23px 0;
    position: relative;
    transition: 0.3s;
}

.template-menu ul > li+li {
    margin-left: 30px;
}

.template-menu ul li:last-child {
    padding-right: 0;
}

.template-menu ul li a {
    color: #000;
    display: block;
    font-family: montserrat;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 2px;
    line-height: 1;
    text-transform: uppercase;
}
.template-menu>ul li a i {
    font-weight: 700;
    padding-left: 5px;
}
.template-menu ul li:hover>a {
    color: #000;
}

.template-menu ul li:hover>a.donate-btn {
    color: #fff;
}

.template-menu li ul {
    background: #ffffff;
    border-top: 2px solid #03bb84;
    box-shadow: 0 0 0.9375pc rgba(0, 0, 50, 0.09);
    float: none;
    position: absolute;
    left: 0;
    top: 100%;
    width: 250px;
    opacity: 0;
    visibility: hidden;
    z-index: 9999;
    transition: all 0.3s ease 0s;
}
.color .template-menu li ul {
    border-top: medium none;
}
.template-menu ul li:hover>ul {
    opacity: 1;
    visibility: visible;
}

.template-menu li ul li {
    border-bottom: 1px solid #e5e5e5;
    display: inline-block;
    margin: 0;
    padding: 0;
    position: relative;
    width: 100%;
}

.template-menu li ul li:last-child {
    border-bottom: 0 none;
}
.template-menu li ul li a {
    padding: 15px  20px;
}

.template-menu li ul li a:hover {
    background: #03bb84;
    color: #ffffff;
    display: block;
}
.template-menu ul ul li a i {
    float: right;
    padding-left: 0;
}

.header-action {
    padding: 30px 0;
    text-align: right;
    transition: 0.3s;
}
.header-action > li {
    display: inline-block;
}
.header-action > li + li {
    margin-left: 10px;
}
.main-menu ul ul {
    left: 100%;
    position: absolute;
    top: -2px;
}
.main-header-area {
    background: #ffffff;
}
.transparent-header {
    background: rgba(0,0,0,.4);
}
.green-header {
    background: #03bb84;
}
.color .logo {
    color: #fff;
}
.color .template-menu > ul > li > a {
    color: #fff;
}
.color .template-menu > ul > li:hover > a {
    color: #ffffff;
    opacity: 0.8;
}
.color .header-action .btn-default.btn-border {
    background: transparent none repeat scroll 0 0;
    border: 1px solid #fff;
    color: #fff;
}
.color .header-action .btn-default.btn-border:hover {
    background: #fff none repeat scroll 0 0;
    border: 1px solid transparent;
    color: #03bb84;
}
.color .header-action .btn-default {
    background-color: #fff;
    color: #03bb84;
}
.color .header-action .btn-default:hover {
    background: transparent none repeat scroll 0 0;
    border: 1px solid #fff;
    color: #fff;
}

/*Header Style 2*/
.header-style-2 .main-header-area {
    position: absolute;
    width: 100%;
    z-index: 2;
    transition: all 0.3s linear 0s;
}
.is_stuck .header-style-2 .main-header-area {
    position: fixed;
    z-index: 3;
    background: rgba(255,255,255,1);
    box-shadow: 0 0 0.9375pc rgba(0,0,50,.09);
}
.is_stuck .header-style-2 .logo-wrapper,
.is_stuck .header-style-2 .header-action {
    padding: 20px 0;
}
.is_stuck .header-style-2 .template-menu > ul > li {
    padding: 33px 0;
}
.header-style-2 .is_stuck .logo-wrapper,
.header-style-2 .is_stuck .header-action {
    padding: 20px 0;
}
.header-style-2 .is_stuck .template-menu > ul > li {
    padding: 33px 0;
}

/*transparent header style*/
.is_stuck .transparent-header.main-header-area {
    background: #03bb84;
}
.is_stuck .transparent-header-2.main-header-area {
    background: #fff;
}
.transparent-header-2 .logo {
    color: #ffffff;
}
.is_stuck .transparent-header-2 .logo {
    color: #434343;
}
.transparent-header-2 .template-menu > ul > li > a {
    color: #ffffff;
}
.is_stuck .transparent-header-2 .template-menu > ul > li > a {
    color: #555;
}

/*Header style 3*/
.header-with-countdown .template-menu ul {
    float: left;
}
.menu-full-width {
    background: #fff none repeat scroll 0 0;
    border-top: 2px solid #009688;
    z-index: 2;
    position: absolute;
    width: 100%;
    transition: all 0.3s linear 0s;
}
.is_stuck .menu-full-width {
    box-shadow: 0 0 0.9375pc rgba(0, 0, 50, 0.09);
}
.menu-full-width .template-menu > ul > li {
    padding: 25px 0;
}
.header-search a {
    /*background: #009688 none repeat scroll 0 0;*/
    color: #fff;
    display: inline-block;
    height: 63px;
    line-height: 60px;
    text-align: center;
    width: 60px;
}
.header-search a:hover {
    opacity: 0.7;
}

.countdown-area {
    overflow: hidden;
    padding: 23px 0;
    text-align: right;
}
.countdown-message {
    display: inline-block;
    overflow: hidden;
}
.countdown-message h2 {
    display: block;
    font-size: 20px;
    margin: 0;
}
.countdown-message p {
    color: #555;
    font-weight: 400;
    line-height: 20px;
    margin: 0;
    text-transform: unset;
    text-align: right;
}
.countdown {
    display: inline-block;
    position: relative;
    margin-left: 30px;
    padding-left: 30px;
}
.countdown::before {
    background: #e5e5e5 none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    width: 1px;
}
.timer {
    display: inline-block;
    padding: 0 25px;
    position: relative;
    text-align: center;
}
.timer:last-child {
    padding-right: 0;
}
.timer::after {
    background: #e5e5e5 none repeat scroll 0 0;
    content: "";
    height: 40px;
    left: -2px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
}
.timer:first-child::after {
    display: none;
}
.timer .time-wrapper {
    display: inline-block;
}
.timer h4 {
    color: #009688;
    font-size: 26px;
    margin-bottom: 0;
    text-align: center;
}
.timer span {
    color: #555;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
}

.full-width-search-wrapper {
    background: rgba(255, 255, 255, 0.95) none repeat scroll 0 0;
    height: 100%;
    left: 0;
    opacity: 0;
    overflow: hidden;
    position: fixed;
    text-align: center;
    top: 0;
    transform: scale(0.97);
    transition: all 0.3s ease 0s;
    visibility: hidden;
    width: 100%;
    z-index: 3;
}
.full-width-search-wrapper.search-wrapper-show {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}
.full-width-search-form {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
}
.full-width-search-form > input {
    background: transparent none repeat scroll 0 0;
    border: 1px solid #e5e5e5;
    font-size: 18px;
    min-width: 800px;
    padding: 10px 20px;
    text-align: left;
}
.full-width-search-form > input::placeholder {
    color: #333;
    font-size: 18px;
    font-weight: 600;
    opacity: 1;
}
.search-closer {
    background: #009688 none repeat scroll 0 0;
    border-radius: 100%;
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    height: 40px;
    line-height: 38px;
    margin: 0;
    position: absolute;
    right: 100px;
    top: 100px;
    transition: all 0.3s ease-in-out 0s;
    width: 40px;
}
.search-closer:hover {
    opacity: 0.7;
}
.full-width-search-form button {
    background: transparent none repeat scroll 0 0;
    border: medium none;
    font-size: 20px;
    padding: 5px 10px;
    position: relative;
    right: 43px;
    transition: all 0.3s ease 0s;
}
.full-width-search-form button:hover {
    color: #009688;
}


/* -----------------------------
6. Mobile menu area style
-------------------------------- */
.mean-container .mean-bar {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    float: left;
    min-height: 42px;
    padding: 0;
    position: relative;
    margin-top: -70px;
    width: 100%;
    z-index: 1;
}
.mobile-menu-area {
    position: relative;
    padding: 0 15px;
}
.mean-container a.meanmenu-reveal span {
    background: #333;
}
.mean-container a.meanmenu-reveal {
    color: #333;
}
.mean-container .mean-nav {
    background: #03bb84;
}
.mean-container .mean-nav ul li a {
    border-top: 1px solid #fff;
    color: #fff;
}
.mean-container .mean-nav ul li:first-child a {
    border-top: none;
}
.mean-container .mean-nav ul li a:hover {
    color: #fff;
}
.mean-container .mean-nav ul li a.mean-expand {
    border: 0 1px 1px solid transparent;
}
.mean-container .mean-nav ul li a.mean-expand:hover {
    background: #03bb84;
}
.mean-container .mean-nav ul li a.mean-expand {
    padding: 15px !important;
}
.mean-container .mean-nav ul li li a {
    opacity: 1;
}

.color .mean-container a.meanmenu-reveal {
    border-color: #ffffff;
    transition: 0.3s;
}
.color .mean-container a.meanmenu-reveal span {
    background: #fff none repeat scroll 0 0;
    transition: 0.3s;
}
.color .mean-container a.meanmenu-reveal {
    color: #fff;
    transition: 0.3s;
}
.is_stuck .header-style-2 .mean-container a.meanmenu-reveal {
    border-color: #252525;
}
.is_stuck .header-style-2 .mean-container a.meanmenu-reveal span {
    background: #333 none repeat scroll 0 0;
}
.is_stuck .header-style-2 .mean-container a.meanmenu-reveal {
    color: #333;
}
.is_stuck .header-style-2 .mean-container .mean-bar {
    margin-top: -60px;
}

/* -----------------------------
7. Slider area style
-------------------------------- */
#bgvid {
    position: fixed; 
    top: 0;
    right: 0;
    /*bottom: 0;*/
    min-width: 100%;
    min-height: 100%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    z-index: -100;
    background-size: cover;
    margin: 0 auto;
}



.slider-content {
    padding: 230px 0;
    position: relative;
}
.slider-btn a + a {
    margin-left: 10px;
}
.slider-content-wrapper {
    /*background: rgba(255, 255, 255, 0.39) none repeat scroll 0 0;*/
    padding: 30px;
}
.slider-content-wrapper .single-progress-bar p {
    font-weight: 800;
}
.slider-content .project-goal {
    float: right;
    color: #03bb84;
}
.slider-content .progress-bar-area {
    margin-bottom: 20px;
    width: 75%;
}
.slider-content .progress {
    background: #555 none repeat scroll 0 0;
}
.slider-content h1 {
    color: #fff;
    font-size: 44px;
    font-weight: 900;
    letter-spacing: 1px;
    line-height: 1;
    margin-bottom: 15px;
}
.slider-content h1 a:hover {
    color: #03bb84;
}
.slider-content p {
    color: #ffff;
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.slider-content p span {
    font-weight: 900;
}

.slider-content h1+p {
    text-transform: unset;
    margin-bottom: 25px;
}

.slider-wrapper .slick-prev {
    left: 50px;
    z-index: 1;
}

.slider-wrapper .slick-next {
    right: 50px;
    z-index: 1;
}

.slider-wrapper .slick-prev,
.slider-wrapper .slick-next {
    height: 70px;
    width: 70px;
    opacity: 0;
    transition: all 0.3s ease-in-out 0s;
    display: block;
}

.slider-wrapper .slick-prev::before {
    content: "\f104";
}

.slider-wrapper .slick-next::before {
    content: "\f105";
}

.slider-wrapper .slick-prev::before,
.slider-wrapper .slick-next::before {
    background: #03bb84 none repeat scroll 0 0;
    display: block;
    font-family: "fontawesome";
    font-size: 30px;
    line-height: 70px;
    opacity: 0.7;
    z-index: 1;
    border-radius: 2px;
    transition: all 0.3s ease 0s;
}

.slider-wrapper .slick-prev:hover::before,
.slider-wrapper .slick-next:hover::before {
    opacity: 1;
}

.slider-wrapper:hover .slick-prev,
.slider-wrapper:hover .slick-next {
    opacity: 1;
}

.slider-wrapper .slick-dots {
    bottom: 20px;
}

.slider-wrapper .slick-dots li {
    margin: 0;
}

.slider-wrapper .slick-dots li button::before {
    color: #fff;
    font-size: 13px;
    opacity: 0.75;
}

.slider-wrapper .slick-dots li.slick-active button::before {
    color: #03bb84;
    opacity: 1;
}

/*Slider 3*/
.full-screen-slider .single-slider {
    height: 100vh;
}

/* -----------------------------
8. Breadcrumb area style
-------------------------------- */

.breadcrumb-area {
    background: rgba(0, 0, 0, 0) url("img/bg/2.jpg") repeat scroll center 40% / cover ;
    position: relative;
}
.theme-section.breadcrumb-area::before {
    background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
.breadcrumb-title {
    color: #fff;
    font-size: 24px;
    line-height: 1;
    margin: 0;
}
.breadcrumb-list>li {
    float: left;
    position: relative;
    color: #fff;
    font-weight: 400;
}
.breadcrumb-list>li+li {
    margin-left: 11px;
    padding-left: 11px;
}
.breadcrumb-list>li a {
    color: #fff;
}
.breadcrumb-list>li::after {
    color: #fff;
    content: "/";
    left: 0;
    position: absolute;
    top: 0;
}
.breadcrumb-list>li:first-child::after {
    display: none;
}
.breadcrumb-wrap {
    float: right;
}

/* -----------------------------
9. Feature area style
-------------------------------- */
.single-feature {
    background: #ffffff;
    padding: 30px;
    transition: all 0.3s ease os;
    border-bottom: 4px solid #009688;
}
.feature-heading {
    margin-bottom: 20px;
}
.feature-heading i {
    font-size: 40px;
    color: #444;
    transition: .3s;
}
.feature-content h4 {
    font-size: 20px;
}
.single-feature:hover i {
    color: #03bb84;
}


/* -----------------------------
10. About area style
-------------------------------- */
.about-area {
    padding-top: 100px;
}
.about-content {
    /*margin-top: 110px;*/
}
.about-thumbnail > img {
    width: 100%;
}
.about-content > h3 {
    font-weight: 700;
    margin-bottom: 20px;
}
.video-js {
    width: 100%;
    height: auto;
}
.about-us-content .panel-group {
    margin-bottom: 0;
}
.panel-default > .panel-heading {
    background-color: #E5E5E5;
    border-color: #e5e5e5;
    color: #474747;
    border-radius: 2px;
}
.panel-title {
    font-size: 15px;
}
.panel-collapse {
    background: #f6f6f6;
}


/* -----------------------------
11. Donate area style
-------------------------------- */
.donet-section {
    overflow: hidden;
}
#one.single-donet {
    background: #64b5f6;
    overflow: hidden;
}
#two.single-donet {
    background: #FF9800;
    overflow: hidden;
}

#three.single-donet {
    background: #ffeb3b;
    overflow: hidden;
}

#four.single-donet {
    background: #8bc34a;
    overflow: hidden;
}

.donet-thumbnail {
    float: left;
    width: 50%;
}

.donet-thumbnail img {
    width: 100%;
}


.donet-thumbnail img:hover {
    opacity: 0.5;
}
.donet-content {
    float: left;
    padding: 66px 35px;
    width: 50%;
}
.donet-content-heading h3 {
    font-size: 24px;
    margin-bottom: 5px;
}
.donet-content-heading h3 a:hover {
    color: #03bb84;
}
.donet-content-heading > p {
    line-height: 30px;
}
.donet-bar p {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 15px;
    text-transform: uppercase;
}
.donet-bar p span {
    color: #03bb84;
    float: right;
}
.donet-bar {
    margin-top: 10px;
    overflow: hidden;
}
.progress {
    background: #e5e5e5 none repeat scroll 0 0;
    border-radius: 2px;
    box-shadow: none;
    font-weight: 400;
    height: 15px;
    letter-spacing: 1px;
    margin: 0;
    overflow: hidden;
    text-transform: uppercase;
}

.progress-bar {
    background: #03bb84 none repeat scroll 0 0;
    box-sizing: border-box;
    color: #000;
    font-size: 11px;
    overflow: visible;
    padding-top: 2px;
    position: relative;
    text-align: left;
}

.progress-bar span {
    bottom: 0;
    color: #fff;
    display: inline-block;
    letter-spacing: 0;
    position: absolute;
    right: 10px;
    text-align: center;
    top: -2px;
}
.donet-content .btn,
.event-content .btn {
    margin-top: 20px;
}
/* -----------------------------
12. Help area style
-------------------------------- */
.help-section {
    background: url("img/bg/help.jpg") no-repeat scroll center center / cover;
    position: relative;
    padding: 100px 0 0 0;
}
.help-heading {
    width: 70%;
    margin: 0 auto;
}
.help-heading h2 {
    color: #ffffff;
}
.help-heading p {
    color: #ffffff;
}
.help-cat-list {
    position: relative;
    bottom: -120px;
    width: 100%;
    overflow: hidden;
    z-index: 1;
}
.single-help-cat {
    background: #fff;
}
.help-thumb img {
    width: 100%;
}
.help-content {
    padding: 30px 0;
}
.help-content h4 {
    font-size: 18px;
    text-transform: unset;
}
.help-content h4 a:hover {
    color: #03bb84;
}

/* -----------------------------
13. volunteer area style
-------------------------------- */
.volunteer-member-list {
    margin: 0 -15px;
}
.single-volunteer-member {
    overflow: hidden;
    padding: 0 15px;
}
.volunteer-section .single-volunteer-member {
    padding: 0;
}
.volunteer-member-list.navigation-style-2 .slick-prev {
    left: 15px;
}
.volunteer-member-list.navigation-style-2 .slick-next {
    left: 75px;
}
.col-md-3:nth-child(n+5) .single-volunteer-member {
    margin-top: 40px;
}
.volunteer-thumb img {
    width: 100%;
}
.volunteer-thumb {
    position: relative;
}
.volunteer-thumb::before {
    background: rgba(0,0,0,0.5);
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transition: all 0.3s ease 0s;
    opacity: 0;
}
.single-volunteer-member:hover .volunteer-thumb::before {
    opacity: 1;
}
.volunteer-content {
    background: #ffffff none repeat scroll 0 0;
    padding: 15px 25px;
}
.volunteer-content h4 {
    margin: 0;
    font-size: 18px;
}
.volunteer-content h4 a:hover {
    color: #03bb84;
}
.volunteer-content p {
    font-size: 13px;
    margin-bottom: 0;
}
.volunteer-member-wrapper .slick-prev::before, 
.volunteer-member-wrapper .slick-next::before {
    font-size: 36px;
}
.volunteer-member-wrapper .slick-prev {
    left: 10px;
    z-index: 1;
}
.volunteer-member-wrapper .slick-next {
    right: 10px;
    z-index: 1;
}
.volunteer-member-wrapper .slick-prev,
.volunteer-member-wrapper .slick-next {
    top: 35%;
    opacity: 0;
    transition: all 0.3s ease 0s;
}
.volunteer-member-wrapper:hover .slick-prev,
.volunteer-member-wrapper:hover .slick-next {
    opacity: 1;
}
.volunteer-member-wrapper .slick-prev:hover::before,
.volunteer-member-wrapper .slick-next:hover::before {
    color: #03bb84;
    opacity: 1;
}
.be-volunteer-content {
    background: #ffffff none repeat scroll 0 0;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.02);
    padding: 73px 20px;
}
.be-volunteer-content h4 {
    margin-bottom: 30px;
}
.be-volunteer-content > p {
    margin-bottom: 25px;
}


/* -----------------------------
14. Portfolio area style 
-------------------------------- */

.portfolio-area {
    overflow: hidden;
}
.portfolio-filter {
    margin-bottom: 40px;
}
.protfolio-filter {
    text-align: center;
}
.protfolio-filter li {
    display: inline-block;
    list-style: outside none none;
    margin: 0 10px;
}
.protfolio-filter li a {
    border: 1px solid #e5e5e5;
    color: #444;
    display: block;
    font-size: 13px;
    font-weight: 600;
    height: 35px;
    letter-spacing: 1px;
    line-height: 32px;
    padding: 0 10px;
    position: relative;
    text-transform: uppercase;
}
.protfolio-filter li a:hover,
.protfolio-filter li.active a {
    background: #03bb84;
    color: #fff;
    border: 1px solid transparent;
}
.portfolio-container {
    margin: 0 -10px;
}
.portfolio-item {
    float: left;
    margin-bottom: 20px;
    /*overflow: hidden;*/
    padding: 0 10px;
    /*width: 33.3333%;*/
}

#projects  .portfolio-item {
    float: left;
    margin-bottom: 20px;
    padding: 0 10px;
    /*width: 33.3333%;*/
}


.thimbnail {
    width: 100%;
}
.item-content {
    position: relative;
}
.item-thumnail {
    position: relative;
}
.item-thumnail:before {
    background: rgba(0, 150, 136, 0.37);
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    transition: all .3s linear 0s;
    opacity: 0;
}
.portfolio-item:hover .item-thumnail:before {
    opacity: 1;
}
.item-thumnail img {
    width: 100%;
}
.view-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    z-index: 1;
    text-align: center;
}

.view-btn a {
    color: #fff;
    display: block;
    font-size: 32px;
    opacity: 0;
    transform: scale(0);
    transition: all 0.3s linear 0s;
    padding-top: 1px;
}
.view-btn a:hover {
    color: #03bb84;
}
.portfolio-item:hover .view-btn a {
    opacity: 1;
    transform: scale(1);
}

.description-content {
    border-bottom: 1px solid #e5e5e5;
    border-left: 1px solid #e5e5e5;
    border-right: 1px solid #e5e5e5;
    padding: 20px;
}
.description-content h4 {
    color: #232323;
    display: inline-block;
    font-size: 20px;
    font-weight: 600;
    margin: 0;
}

.description-content h4 a:hover {
    color: #03bb84;
}

.portfolio-cat {
    overflow: hidden;
}

.portfolio-cat li {
    float: left;
    margin-right: 5px;
    padding-right: 5px;
    position: relative;
}
.portfolio-cat li:last-child {
    margin-right: 0;
    padding-right: 0;
}

.portfolio-cat li::before {
    position: absolute;
    content: ",";
    right: 0;
    color: #4a4a4a;
}
.portfolio-cat li:last-child::before {
    display: none;
}

.portfolio-cat li a {
    display: block;
    color: #4a4a4a;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
}
.portfolio-cat li a:hover {
    color: #03bb84;
}

.load-more {
    margin-top: 10px;
}


/* -----------------------------
15. Call to action area style
-------------------------------- */

.call-to-action-section {
    background: rgba(0, 0, 0, 0) url("img/bg/1.jpg") no-repeat scroll center center / cover ;
    background-attachment: fixed;
    padding: 180px 0;
    position: relative;
}
.call-to-action-section::before {
    background: rgba(0,0,0,0.6);
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.call-to-action-content h3 {
    color: #fff;
    font-size: 36px;
    font-weight: 300;
    letter-spacing: 0;
    margin-bottom: 20px;
    text-transform: unset;
}
.call-to-action-content h2 {
    color: #ffffff;
    font-size: 52px;
    font-weight: 800;
    line-height: 1;
    margin: 0 0 30px;
}
.call-to-action-content h4 {
    color: #ffffff;
    display: inline-block;
    font-size: 24px;
    font-weight: 400;
    line-height: 38px;
    margin-bottom: 0;
}
.call-to-action-btn > a {
    margin-right: 20px;
}

/* -----------------------------
16. Donor area style
-------------------------------- */
.donor-section-wrapper {
    overflow: hidden;
    position: relative;
}
.donor-section-wrapper::before,
.donor-section-wrapper::after {
    background: #7962b3 none repeat scroll 0 0;
    border-radius: 3px;
    box-shadow: 0 7px #03bb84, 0 14px #03bb84;
    content: "";
    height: 2px;
    left: 50%;
    position: absolute;
    top: 20%;
    transform: translateX(-51%);
    width: 20px;
}
.donor-section-wrapper::after {
    top: auto;
    bottom: 20%;
}
.single-donor-info {
    float: left;
    overflow: hidden;
    padding: 0 10px;
    width: 50%;
}
.donor-information-wrapper {
    background: #f6f6f6 none repeat scroll 0 0;
    padding: 50px 30px;
}
.donor-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 25px;
    text-align: left;
}
.donor-amount {
    border: 1px solid #e5e5e5;
    line-height: 1;
    margin: 0 auto 10px;
    overflow: hidden;
    text-align: center;
    width: 100%;
}
.single-donor-amount {
    border-right: 1px solid #e5e5e5;
    float: left;
    overflow: hidden;
    padding: 0;
    width: 50%;
}
.single-donor-amount:last-child {
    border: none;
}
.single-donor-amount-wrapper {
    padding: 22px 25px;
}
.single-donor-amount input[type="radio"] {
    display: block;
    margin: 0 auto 5px;
}
.single-donor-amount label {
    margin: 0;
}
.single-donor-amount textarea {
    border: medium none;
    padding-left: 20px;
    padding-top: 20px;
    resize: none;
}
.single-donor-amount input[type="number"] {
    border: medium none;
    height: 76px;
    padding-left: 10px;
    width: 160px;
}

.donor-information {
    margin-top: 40px;
}
.donor-information h3 {
    font-size: 18px;
    font-weight: 500;
}
.amount-input {
    border: 1px solid #e5e5e5;
    box-shadow: none;
    font-weight: 500;
    height: 45px;
    margin-bottom: 15px;
    padding: 5px 0 5px 20px;
    /*text-transform: uppercase;*/
    width: 100%;
}
.amount-input::placeholder,
.donor-information select::placeholder,
.donor-information textarea::placeholder {
    text-transform: capitalize;
    font-weight: 500;
    letter-spacing: 1px;
}
.donor-information select {
    padding: 5px 0 5px 20px;
    background: #f8f8f8 none repeat scroll 0 0;
    border: 1px solid #e5e5e5;
    box-shadow: none;
}
.bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
    width: 100%;
}
.donor-information textarea {
    border: 1px solid #e5e5e5;
    box-shadow: none;
    margin-bottom: 15px;
    min-height: 150px;
    padding-left: 20px;
    padding-top: 20px;
    resize: none;
    width: 100%;
}
.donor-information .form-group {
    margin: 0;
}
.donor-information .button {
    margin-top: 5px;
}

.donor-thumb-wrapper {
    /*padding: 80px 40px;*/
    background: #F2EDE7;
    text-align: center;
}
.donor-thumb-wrapper img {
    margin: 0 auto;
    width: 100%;
}
.donor-message {
    background: #fff none repeat scroll 0 0;
    border: 1px solid #e5e5e5;
    margin: auto;
    padding: 20px;
    text-align: center;
}
.donor-message h3 {
    font-size: 20px;
    margin: 0;
}
.donor-thumb-wrapper .donor-title {
    text-align: center;
}
.donor-message > p {
    font-size: 16px;
    font-weight: 300;
    margin-bottom: 0;
}
.donor-message span {
    color: #03bb84;
    font-weight: 500;
}
.donor-message span {
    color: #03bb84;
    font-weight: 600;
}


/* -----------------------------
17. Counter area style
-------------------------------- */
.counter-section {
    background: rgba(0, 0, 0, 0) url("img/bg/2.jpg") repeat scroll center center;
    padding: 150px 0;
    position: relative;
}
.counter-section::before {
    background: rgba(0,0,0,0.7);
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.counter-icon {
    margin-bottom: 30px;
}
.counter-icon i {
    color: #03bb84;
    font-size: 50px;
}
.counter-content p {
    color: #fff;
    font-size: 36px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 20px;
}
.counter-content h3 {
    font-size: 20px;
    color: #ffffff;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 0;
}

/* -----------------------------
18. Testimonial area style
-------------------------------- */
.testimonial-wrapper {
    margin: 0 -15px;
}
.testimonial-wrapper blockquote {
    font-size: 15px;
    margin: 0;
    padding: 30px;
    background: #fff;
    border-bottom: 2px solid #03bb84;
    text-align: center;
    border-left: none;
}
.single-testimonial {
    padding: 0 15px;
}
.single-testimonial img {
    /*border-radius: 100%;*/
    margin-bottom: 15px;
    display: inline-block;
}
.client-name {
    color: #444;
    font-size: 16px;
    letter-spacing: 2px;
    margin-bottom: 20px;
    text-transform: uppercase;
    font-weight: 600;
}
.client-name .designation {
    font-size: 11px;
    color: #03bb84;
    display: block;
    line-height: 1;
    margin-top: 10px;
    font-style: italic;
    letter-spacing: 1px;
    text-transform: unset;
}
.single-testimonial p:not(.client-name) {
    font-size: 14px;
    font-style: italic;
    color: #444;
    margin-bottom: 10px;
}
.testimonial-wrapper .slick-dots li button::before {
    color: #444;
    font-size: 36px;
    opacity: 1;
}
.testimonial-wrapper .slick-dots li.slick-active button::before {
    color: #03bb84;
}
.testimonial-wrapper .slick-dots {
    text-align: left;
}
.single-recent-donor img {
    width: 100%;
}


/* -----------------------------
19. Blog area style
-------------------------------- */
.blog-post {
    background: #fff none repeat scroll 0 0;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.08);
}
.post-thumbnail {
    position: relative;
    overflow: hidden;
}
.post-thumbnail img {
    transition: all 0.3s linear 0s;
    width: 100%;
}
.post-thumbnail::before {
    background: rgba(0,0,0,0.5);
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 1;
    opacity: 0;
    transition: all 0.3s ease 0s;
}
.blog-post:hover .post-thumbnail::before {
    opacity: 1;
}
.post-content {
    overflow: hidden;
    padding: 30px;
}
.post-title {
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    margin-bottom: 5px;
}
.post-title a:hover {
    color: #03bb84;
}
.post-content .event-meta {
    margin-bottom: 10px;
}
.blog-post:nth-child(n+2) {
    margin-top: 30px;
}

/* -----------------------------
20. Single Blog area style
-------------------------------- */
.post-content-inner img {
    width: 100%;
}
.post-content-inner img+p {
    text-align: center;
    font-size: 12px;
    font-style: italic;
}
.post-content-inner p {
    margin-bottom: 0;
}
.post-content blockquote {
    background: #060606 none repeat scroll 0 0;
    border-left: 4px solid transparent;
    font-size: 18px;
    margin: 30px 0;
    padding: 40px 30px 40px 50px;
}
.post-content blockquote p {
    color: #ffffff;
    position: relative;
    margin-bottom: 10px;
}
.post-content blockquote p::before {
    font-family: FontAwesome;
    content: "\f10d";
    color: #03bb84;
    font-size: 36px;
    left: -40px;
    position: absolute;
    top: 0;
}
blockquote footer {
    color: #03bb84;
}
.post-share {
    margin-top: 30px;
}
.post-tags span {
    float: left;
    overflow: hidden;
    font-weight: 600;
    text-transform: capitalize;
}
.post-tag-list {
    display: inline;
    overflow: hidden;
}
.post-tag-list li {
    float: left;
    padding: 0 4px;
    position: relative;
}
.post-tag-list li::before {
    content: ",";
    position: absolute;
    right: 0;
    bottom: 0;
    color: #060606;
}
.post-tag-list li:last-child::before {
    display: none;
}
.post-tag-list li a {
    color: #03bb84;
    display: inline-block;
    text-transform: capitalize;
}
.post-menu-list {
    float: right;
}
.post-menu-list li {
    float: left;
}
.post-menu-list li+li {
    margin-left: 10px;
}
.post-menu-list li a {
    display: inline-block;
    color: #ffffff;
    height: 35px;
    line-height: 35px;
    width: 35px;
    border-radius: 100%;
    text-align: center;
    opacity: 0.6;
}
.post-menu-list li a:hover {
    opacity: 1;
}
.post-menu-list li a.facebook {
    background: #2A3890;
}
.post-menu-list li a.twitter {
    background: #1643C9;
}
.post-menu-list li a.instagram {
    background: #D82E7D;
}
.post-menu-list li a.pinterest {
    background: #BD081C;
}


/* -----------------------------
21. Events area style
-------------------------------- */

.single-event {
    background: #ffffff82 none repeat scroll 0 0;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.02);
}

.event-thumb {
    overflow: hidden;
    position: relative;
}
.event-thumb::before {
    background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transition: all 0.3s ease 0s;
    width: 100%;
    opacity: 0;
    z-index: 1;

}
.single-event:hover .event-thumb::before {
    opacity: 1;

    visibility: visible;
}
.event-thumb img {
    width: 100%;
}
.single-event-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 26px;
    margin-bottom: 5px;
}
.single-event-title a:hover {
    color: #03bb84;
}
.event-post-date {
    background: #03bb84 none repeat scroll 0 0;
    bottom: 0;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    left: 0;
    line-height: 1.2;
    margin-bottom: 0;
    padding: 15px 20px;
    position: absolute;
    text-align: center;
    z-index: 1;
}
.event-post-date span {
    display: block;
}
.event-meta {
    overflow: hidden;
    margin-bottom: 5px;
}
.event-meta li {
    float: left;
}
.event-meta li+li {
    margin-left: 15px;
}
.event-meta li a {
    color: #aaa;
    display: block;
    font-size: 12px;
    text-transform: uppercase;
}
.event-meta li a i {
    padding-right: 10px;
}
.event-content {
    padding: 30px;
}
.event-content-2 {
    padding: 25px 20px;
}
.white-bg .event-content-2 {
    box-shadow: 0 0 0.9305pc rgba(19, 27, 27, 0.46);
}
.event-content > p {
    margin: 0;
}
.event-content .text-link {
    margin-top: 15px;
}
.event-content .button {
    margin-top: 25px;
}
.col-md-4:nth-child(n+4) .single-event {
    margin-top: 30px;
}
.col-lg-3:nth-child(n+4) .single-event {
    margin-top: 0;
}
.col-lg-3:nth-child(n+5) .single-event {
    margin-top: 30px;
}
.single-event:nth-child(n+2) {
    margin-top: 30px;
}


/* -----------------------------
22. Single event area style
-------------------------------- */

.event-section{
    /* background-image: url(img/event/bg.jpg);
     background-size: cover;
     width: 100%;
     background-attachment: fixed;*/


}
.single-event-section .single-event {
    background: transparent;
    box-shadow: none;
}
.single-event-section .single-event:hover {
    box-shadow: none;
}
.single-event-section .event-content {
    padding: 30px 0 0 0;
    background: #fff;
    padding: 30px;
}
.single-event-section .single-event-title {
    font-size: 28px;
    margin-bottom: 10px;
}
.event-content blockquote {
    background: #fff;
    color: #555;
    font-size: 18px;
    font-style: italic;
    font-weight: 500;
    margin: 30px 0 30px 15px;
    padding: 40px 20px 40px 20px;
    border-left: 4px solid #03bb84; 
}
.event-content blockquote p {
    position: relative;
    padding-left: 20px;
}
.event-content blockquote p::before{
    content: "“";
    display: inline-block;
    font-size: 36px;
    left: 0;
    position: absolute;
    top: 0;
}
.event-content-thumb {
    margin: 15px 0;
}
.event-content-thumb > img {
    width: 100%;
}
.event-content-thumb > img + p {
    text-align: center;
    font-size: 12px;
    margin-bottom: 0;
}
.event-content .single-event-para {
    margin-bottom: 15px;
}
.donate-information {
    overflow: hidden;
    border: 1px solid #ddd;
    margin-bottom: 20px;
}
.single-donate-information {
    float: left;
    width: 50%;
    overflow: hidden;
    padding: 10px;
}
.single-donate-information:nth-child(n+3) {
    border-top: 1px solid #ddd;
}
.donate-information p {
    font-size: 16px;
    margin-bottom: 0;
    text-transform: capitalize;
    color: #999;
}
.donate-information p span {
    display: block;
    color: #03bb84;
    font-weight: 600;
    text-transform: capitalize;
}
.single-event-section .progress {
    height: 15px;
}
.single-event-section .progress-bar span {
    font-size: 12px;
    right: 5px;
    top: -3px;
}
.comment-form {
    margin-top: 30px;
}
.comment-form h4 {
    margin-bottom: 15px;
}
.comment-form .form-group {
    margin-bottom: 0;
}
.comment-form .form-control {
    border: 1px solid #e5e5e5;
    box-shadow: none;
    height: 45px;
    line-height: 45px;
    border-radius: 2px;
    padding-left: 20px;
}
.comment-form input {
    margin-bottom: 20px;
}
.comment-form textarea {
    resize: vertical;
    min-height: 220px;
}
.comment-form .form-control:focus {
    border-color: #03bb84;
}
.comment-form .button {
    margin-top: 0;
}


/* -----------------------------
23. Sidebar area style
-------------------------------- */
.sidebar-widgets {
    background: #ffffff;
    padding: 30px;
}
.single-widget:nth-child(n+2) {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px dotted #e5e5e5;
}
.sidebar-widgets h4 {
    font-size: 18px;
    margin-bottom: 15px;
}
.search-form {
    position: relative;
}
.search-form input {
    background: transparent none repeat scroll 0 0;
    border: 1px solid #e5e5e5;
    height: 50px;
    letter-spacing: 2px;
    padding: 0 50px 0 20px;
    width: 100%;
}
.search-form button {
    background: transparent none repeat scroll 0 0;
    border: none;
    color: #737272;
    font-size: 15px;
    padding: 0 15px;
    position: absolute;
    right: 0;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
}
.post-category-list li + li {
    margin-top: 20px;
}
.post-category-list i {
    font-size: 16px;
    padding-right: 3px;
}
.post-category-list li a {
    color: #999;
    display: block;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 1px;
    line-height: 1;
    text-transform: capitalize;
}
.post-category-list li a:hover {
    padding-left: 5px;
    color: #03bb84;
}
.post-category-list li a span {
    float: right;
}
.single-popular-news {
    overflow: hidden;
}
.single-popular-news:nth-child(n+2) {
    margin-top: 20px;
}
.popular-news-thumb {
    float: left;
    width: 100px;
}
.popular-news-content {
    float: left;
    padding: 23px 0 23px 20px;
    width: calc(100% - 100px);
}
.popular-news-content h6 {
    font-size: 14px;
    margin-bottom: 5px;
}
.popular-news-content h6 a:hover {
    color: #03bb84;
}
.popular-news-content p {
    line-height: normal;
    margin: 0;
}
.popular-news-content p a {
    margin-bottom: 0;
    color: #aaa;
    font-size: 12px;
}
.tags {
    overflow: hidden;
}
.tags a {
    color: #999;
    border: 1px solid #e5e5e5;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: capitalize;
    margin-right: 3px;
    margin-bottom: 7px;
    font-weight: 500;
    height: 40px;
    line-height: 38px;
    border-radius: 2px;
    padding: 0 10px;
    display: inline-block;
}
.tags a:hover {
    color: #fff;
    background: #03bb84;
}
div.zabuto_calendar .badge-today, div.zabuto_calendar div.legend span.badge-today {
    background-color: #03bb84;
}


/* -----------------------------
24. Sponsor area style
-------------------------------- */
.sponsor-thumbnail-wrapper {
    overflow: hidden;
}
.single-sponsor-thumb {
    display: table-cell;
    float: left;
    width: 20%;
}
.single-sponsor-thumb img {
    cursor: pointer;
    transform: scale3d(1, 1, 1);
    transition: all 0.3s ease 0s;
    width: 100%;
}
.single-sponsor-thumb:hover img {
    transform: scale3d(1.1,1.1,1);
}



/* -----------------------------
25. Contact area style
-------------------------------- */
.single-contact-option:nth-child(n+2) {
    margin-top: 25px;
}
.single-contact-option i {
    color: #333;
    font-size: 20px;
    margin-bottom: 15px;
}
.single-contact-option h4 {
    font-size: 16px;
    letter-spacing: 1.5px;
    font-weight: 400;
}
.single-contact-option p {
    font-size: 13px;
    line-height: 22px;
    margin: 0;
    text-transform: capitalize;
}
.single-contact-option span {
    font-weight: bold;
}
.single-contact-option a {
    color: #232323;
}
.form-head {
    margin: 0 -10px;
}
.contcat-form .form-head .marg-area {
    float: left;
    padding: 0 10px;
    width: 50%;
}
.contcat-form input,
.form-body textarea {
    border: 1px solid #e5e5e5;
    margin-bottom: 20px;
    padding: 10px 15px;
    transition: all 0.3s ease 0s;
    width: 100%;
}
.form-body textarea {
    resize: vertical;
    max-height: 240px;
}
.contcat-form .btn-submitt {
    float: left;
    margin: 0;
    padding: 0 30px;
    width: auto;
}
.contcat-form input:focus, 
.form-body textarea:focus{
    border-color: #03bb84;
}
.humanity-form-send-message.success {
    display: inline-block;
    margin: 0 0 0 20px;
    transform: translateY(50%);
}
.success {
    color: #27c24c;
}
.humanity-form-send-message.error{
    color: #F05050;
}
.contact-page-area button {
    transition: all 0.3s ease-in-out 0s;
}


/* -----------------------------
26. Map area style
-------------------------------- */
#humanity-map{
    width: 100%;
    height: 460px;
}


/* -----------------------------
27. Footer area style
-------------------------------- */
.footer-top-area {
    background: #222 url("img/bg/3.png") repeat scroll center center / cover ;
    padding: 60px 0;
}
.green-footer {
    background: #03bb84;
}
.footer-widget .logo {
    color: #ffffff;
    display: block;
    margin-bottom: 25px;
}
.footer-widget p {
    color: #999;
    margin-bottom: 0;
}
.color .footer-widget p {
    color: #fff;
}
.contact-social-menu {
    overflow: hidden;
}
.contact-address {
    margin: 20px 0;
}
.contact-address li {
    color: #999;
    text-transform: unset;
}
.color .contact-address li {
    color: #fff;
}
.contact-address li i {
    color: #03bb84;
    padding-right: 5px;
}
.color .contact-address li i {
    color: #fff;
}
.contact-address li a {
    color: #999;
}
.color .contact-address li a {
    color: #fff;
}
.contact-social-menu li {
    float: left;
}
.contact-social-menu li + li {
    margin-left: 15px;
}
.contact-social-menu li a {
    background: #666 none repeat scroll 0 0;
    color: #fff;
    display: block;
    font-size: 14px;
    height: 32px;
    line-height: 32px;
    padding: 0 12px;
    border-radius: 2px;
}
.color .contact-social-menu li a {
    background: #ffffff;
}
.color.green-footer .contact-social-menu li a {
    color: #03bb84;
}
.color.red-footer .contact-social-menu li a {
    color: #009688;
}
.color .contact-social-menu li a:hover {
    background: #fff;
    opacity: 0.8;
}
.contact-social-menu li a:hover {
    background: #03bb84;
}
.footer-widget-title {
    position: relative;
    padding-bottom: 10px;
    margin-bottom: 30px;
    color: #ffffff;
    font-size: 22px;
}
.footer-widget-title::before {
    background: #03bb84 none repeat scroll 0 0;
    bottom: 0;
    content: "";
    height: 2px;
    left: 0;
    position: absolute;
    width: 50px;
}
.color .footer-widget-title::before {
    background: #ffffff;
}
.footer-tags li {
    display: inline-block;
    margin-bottom: 5px;
}
.footer-tags li a {
    border: 1px solid #666;
    color: #999;
    display: block;
    font-weight: 400;
    height: 35px;
    line-height: 35px;
    padding: 0 10px;
    text-transform: capitalize;
}
.color .footer-tags li a {
    border: 1px solid #fff;
    color: #fff;
}
.footer-tags li a:hover {
    color: #03bb84;
}
.color .footer-tags li a:hover {
    color: #fff;
    opacity: 0.8;
}
.quick-link {
    overflow: hidden;
}
.quick-link li + li {
    border-top: 1px dotted #666;
    margin-top: 10px;
    padding-top: 10px;
}
.color .quick-link li + li {
    border-top: 1px dotted #fff;
}
.quick-link li a {
    color: #999;
    text-transform: capitalize;
    display: block;
}
.color .quick-link li a {
    color: #ffffff;
}
.quick-link li a:hover {
    color: #03bb84;
    padding-left: 7px;
}
.color .quick-link li a:hover {
    color: #fff;
    opacity: 0.8;
}
.subscribe-form {
    margin-top: 20px;
}
.subscribe-form input {
    background: transparent none repeat scroll 0 0;
    border: 1px solid #999;
    box-shadow: none;
    color: #fff;
    display: inline-block;
    height: 42px;
    padding: 0 15px;
    width: 83%;
}
.color .subscribe-form input {
    border: 1px solid #fff;
}
.subscribe-form > input::placeholder {
    color: #fff;
}
.subscribe-form button {
    background: #03bb84 none repeat scroll 0 0;
    border: medium none;
    color: #fff;
    display: inline-block;
    margin-left: -5px;
    padding: 9px 20px;
    transition: all 0.3s ease 0s;
}
.color .subscribe-form button {
    background: #ffffff;
}
.subscribe-form button:hover {
    color: #03bb84;
    background: #ffffff;
}
.color .subscribe-form button:hover {
    opacity: 0.9;
}
.color.red-footer .subscribe-form button {
    color: #009688;
}
.color.green-footer .subscribe-form button {
    color: #03bb84;
}
.footer-bottom-area {
    background: #111 none repeat scroll 0 0;
    padding: 30px 0;
}
.copy-right-info p {
    color: #999;
    font-size: 13px;
    letter-spacing: 1px;
    margin-bottom: 0;
    text-transform: uppercase;
}
.copy-right-info a,
.copy-right-info span {
    color: #03bb84;
}
.copy-right-info a:hover {
    color: #fff;
}
.footer-main-menu {
    overflow: hidden;
}
.footer-menu {
    float: right;
}
.footer-menu li {
    float: left;
}
.footer-menu li + li {
    margin-left: 25px;
}
.footer-menu li a {
    color: #999;
    font-size: 12px;
    letter-spacing: 2px;
    font-weight: 500;
    text-transform: uppercase;
}
.footer-menu li a:hover {
    color: #03bb84;
}


/*Scroll bottom to top*/
.to-top-btn {
    background: #03bb84 none repeat scroll 0 0;
    border-radius: 2px;
    bottom: 30px;
    color: #ffffff;
    font-size: 20px;
    height: 30px;
    line-height: 25px;
    opacity: 0;
    position: fixed;
    right: 30px;
    text-align: center;
    transform: translateY(20px);
    transition: all 0.3s ease 0s;
    visibility: hidden;
    width: 30px;
}
.to-top-btn:focus {
    color: #fff;
}
.to-top-btn.to-top-show {
    opacity: 1;
    transform: translateY(0px);
    visibility: visible;
    z-index: 1;
    transition: all 0.3s ease 0s;
}
.to-top-btn.to-top-show:hover{
    opacity: 0.75;
    color: #ffffff;
}












.page-template div.ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-front.ui-draggable.ui-resizable[style] {
    top: 50% !important;
    transform: translateY(-50%);
    margin: 10px !important;
    width: calc(100% - 20px) !important;
}

/*<!-- ///////////////////// staffs ///////////////// -->*/



.team-member, .team-member .team-img {
    position: relative;
}
.team-member {
    overflow: hidden;
}
.team-member, .team-member .team-img {
    position: relative;
}

.team-hover {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: 0;
    border: 20px solid rgba(0, 0, 0, 0.1);
    background-color: rgba(255, 255, 255, 0.90);
    opacity: 0;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}
.team-member:hover .team-hover .desk {
    top: 50%;
}
.team-member:hover .team-hover, .team-member:hover .team-hover .desk, .team-member:hover .team-hover .s-link {
    opacity: 1;
}
.team-hover .desk {
    position: absolute;
    top: 0%;
    width: 100%;
    opacity: 0;
    -webkit-transform: translateY(-55%);
    -ms-transform: translateY(-55%);
    transform: translateY(-55%);
    -webkit-transition: all 0.3s 0.2s;
    transition: all 0.3s 0.2s;
    padding: 0 20px;
}
.desk, .desk h4, .team-hover .s-link a {
    text-align: center;
    color: #222;
}
.team-member:hover .team-hover .s-link {
    bottom: 10%;
}
.team-member:hover .team-hover, .team-member:hover .team-hover .desk, .team-member:hover .team-hover .s-link {
    opacity: 1;
}
.team-hover .s-link {
    position: absolute;
    bottom: 0;
    width: 100%;
    opacity: 0;
    text-align: center;
    -webkit-transform: translateY(45%);
    -ms-transform: translateY(45%);
    transform: translateY(45%);
    -webkit-transition: all 0.3s 0.2s;
    transition: all 0.3s 0.2s;
    font-size: 35px;
}
.desk, .desk h4, .team-hover .s-link a {
    text-align: center;
    color: #222;
}
.team-member .s-link a {
    margin: 0 10px;
    color: #333;
    font-size: 16px;
}
.team-title {
    position: static;
    padding: 20px 0;
    display: inline-block;
    letter-spacing: 2px;
    width: 100%;
}
.team-title h5 {
    margin-bottom: 0px;
    display: block;
    text-transform: uppercase;
}
.team-title span {
    font-size: 12px;
    text-transform: uppercase;
    color: #a5a5a5;
    letter-spacing: 1px;
}

.heading-title::after {
    bottom: 10px;
    color: #03bb84;
    content: "\f004";
    font-family: fontawesome;
    font-size: 20px;
    height: 2px;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
}
.heading-title::before {
    background: #03bb84 none repeat scroll 0 0;
    bottom: 0;
    content: "";
    height: 2px;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    width: 100px;
}

#quote-carousel {
    padding: 0 10px 30px 10px;
    /*margin-top: 60px;*/
}
#quote-carousel .carousel-control {
    background: none;
    color: #009688;
    font-size: 2.3em;
    text-shadow: none;
    margin-top: 30px;
    top: 30%;
    opacity: 1;
}
#quote-carousel .carousel-indicators {
    position: relative;
    right: 50%;
    top: auto;
    bottom: 0px;
    margin-top: 20px;
    margin-right: -19px;
}
#quote-carousel .carousel-indicators li {
    width: 50px;
    height: 50px;
    cursor: pointer;
    border: 1px solid #ccc;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    opacity: 0.4;
    overflow: hidden;
    transition: all .4s ease-in;
    vertical-align: middle;
}
#quote-carousel .carousel-indicators .active {
    width: 80px;
    height: 80px;
    opacity: 1;
    transition: all .2s;
}
.item blockquote {
    border-left: none;
    margin: 0;
}
.item blockquote p:before {
    content: "\f10d";
    font-family: 'Fontawesome';
    float: left;
    margin-right: 10px;
}

#quote-carousel p{
    line-height: 40px;
    width: 85%;
    margin: auto;
    text-align: justify;
}

/*<!-- ////////////////////  staffs end   ////////////////-->*/


<!--<!--////////////////  prodcust start ///////////////////////-->-->

#wrap{
    width: 90%;
    max-width: 1100px;
    margin: 50px auto;
}
.columns_2 figure{
    width:49%;
    margin-right:1%;
}
.columns_2 figure:nth-child(2){
    margin-right: 0;
}
.columns_3 figure{
    width:32%;
    margin-right:1%;
}
.columns_3 figure:nth-child(3){
    margin-right: 0;
}
.columns_4 figure{
    width:24%;
    margin-right:1%;
}
.columns_4 figure:nth-child(4){
    margin-right: 0;
}
.columns_5 figure{
    width:19%;
    margin-right:1%;
}
.columns_5 figure:nth-child(5){
    margin-right: 0;
}
#columns figure:hover{
    -webkit-transform: scale(1.1);
    -moz-transform:scale(1.1);
    transform: scale(1.1);

}
#columns:hover figure:not(:hover) {
    opacity: 0.4;
}
div#columns figure {
    display: inline-block;
    background: #FEFEFE;
    border: 2px solid #FAFAFA;
    box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
    margin: 0 0px 15px;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
    padding: 15px;
    padding-bottom: 5px;
    background: -webkit-linear-gradient(45deg, #FFF, #F9F9F9);
    opacity: 1;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
    text-align:center;
}

div#columns figure img {
    width: 100%;
    border-bottom: 1px solid #ccc;
    padding-bottom: 15px;
    margin-bottom: 5px;
}

div#columns figure figcaption {
    font-size: 1.5rem;
    color: #444;
    line-height: 1.5;
    height: 36px;
    font-weight: 600;
    text-overflow: ellipsis;

}

a.button{
    padding: 10px;
    background: #009688;
    margin: 10px;
    display: block;
    text-align: center;
    color: #fff;
    transition: all 1s linear;
    text-decoration: none;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
    border-radius: 3px;
    border-bottom: 3px solid #03544d;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}
a.button:hover{
    background:#03776c;
    border-bottom: 3px solid #03544d;
    color:#f1f2f3;
}
@media screen and (max-width: 960px) { 
    #columns figure { width: 24%; }
}
@media screen and (max-width: 767px) {
    #columns figure { width:100%;}
}
@media screen and (max-width: 600px) {
    #columns figure { width: 100%;}
}
@media screen and (max-width: 500px) {
    #columns figure { width: 100%;}
}
/*<!-- product sell  -->*/


/*<!--/////////   products end      ///////////////-->*/
/* CSS Download Box */
.dbox-wrap {
    font-size: 11px;
    font-weight: bold;
    background: #F5F5F5;
    padding: 10px;
    margin: 10px 0;
}
.dbox {
    margin: 0;
    padding: 0;
    list-style: none;
}
.dbox-list {
    background: #E4E4E4;
    margin-bottom: 2px;
    line-height: 26px;
    padding: 0 5px;
}
.dbox-list strong {
    background: #3498db;
    border-right: 2px solid #F5F5F5;
    width: 65px;
    display: block;
    float: left;
    margin-left: -5px;
    margin-right: 5px;
    color: #FFF;
    padding: 0 5px;
    text-align: center;
}
.dbox-list a {
    color: #6d6d6d;
}
.dbox-list a:hover {
    color: #222;
}
@media only screen and (max-width: 360px) {
    .dbox-list strong {width:100%}
    .dbox-title {text-align:center}
}

.radiotextsty {
    color:#373c3c;
    font-size: 18px;
}
.radiotextsty2 {
    color:#7c7d7e;
    font-size: 18px;
}
.customradio {
    /*display: block;*/
    position: relative;
    padding-left: 30px;
    margin-bottom: 0px;
    cursor: pointer;
    font-size: 18px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default radio button */
.customradio input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 22px;
    width: 22px;
    background-color: white;
    border-radius: 50%;
    border:1px solid #BEBEBE;
}

/* On mouse-over, add a grey background color */
.customradio:hover input ~ .checkmark {
    background-color: transparent;
}

/* When the radio button is checked, add a blue background */
.customradio input:checked ~ .checkmark {
    background-color: white;
    border:1px solid #BEBEBE;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */
.customradio input:checked ~ .checkmark:after {
    display: block;
}

/* Style the indicator (dot/circle) */
.customradio .checkmark:after {
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #009688;
}
.trin-slect{    height: 45px;
                border: 1px solid #009688;
                padding: 10px 8px;       width: 100%;}

.labeltext{	
    font-size: 15px;
    padding: 15px 0px;}


/*<!-- ///////////   table   ////// -->	*/
table {
    table-layout: fixed;
    margin: 1rem auto;
    /*width: 100%;*/
    box-shadow: 0 0 2px rgba(0,0,0,.4);
    border-collapse: collapse;
}
thead {

}
th {
    background: #009688;
    color: #060505;
    font-weight: 600;
    padding: 0.7rem 1.0rem;
    border: 3px solid #fff;
    font-size: 1.6rem;
    /* font-variant: small-caps; */
    width: 22%;
    height: 60px;
}
th:last-child {width: 8%;}
tr:nth-child(odd) {
    background: rgba(0, 1, 1, 0.1);
}
tr:nth-child(even) {
    background: rgba(0, 150, 136, 0.39);
}
td {
    padding: .5rem 1rem;
    border-right: 1px solid rgba(0,0,0,.05);
    color: #000000;
    font-size: 15px;
    font-weight: 500;

}
td:last-child {
    border-right: 0 none;
    text-align: center;
}
@media only screen and (max-width:600px) {
    table{
        width: 98%;
    }
    thead {display: none;}
    tr {border-bottom: 2px solid rgba(17,149,178,.35);}
    tr:last-child {border-bottom: 0 none;}
    td {
        display: block;
        padding: .3rem .5rem;
    }
    td:before {
        content: attr(data-head);
        display: inline-block;
        width: auto;;
        min-width: 40%;
        font-weight: 900;
        padding-right: 1rem;
        font-variant: small-caps;
    }
    td:last-child {text-align: left;}
    td:nth-child(odd) {
        background: rgba(17,149,178,.15);
    }

}
@media screen and (max-width: 1400px) {
    .trin-slect{    height: 45px;
                    border: 1px solid #009688;
                    padding: 10px 8px;       width: 30%;}
}


/*<!-- /////////   awrads and achivemnts   //////////////  -->*/

.section-title h2 {
    position: relative;
    margin-bottom: 45px;
    display: inline-block;
    font-weight: 600;
    line-height: 1;
}
.section-title h2::before {
    content: "";
    position: absolute;
    left: 50%;
    width: 60px;
    height: 2px;
    background: #ff5e14;
    bottom: -25px;
    margin-left: -30px;
}
.section-title.service-title p {
    padding: 0 190px;
    margin-bottom: 10px;
}
.blog-area {
    background: #F8F9FA;
    min-height: 100vh;
}
.blog-wrapper {
    background: #fff;
    overflow: hidden;
    padding: 20px;
}
.home-blog-wrapper{
    transition: .3s; 
    margin-bottom: 30px;
}
.blog-wrapper.home-blog-wrapper:hover {
    box-shadow: 10px 20px 30px rgba(0,0,0,.12);
}
.blog-thumb {
    margin-bottom: 20px;
}
.blog-title {
    display: inline-block;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.4;
    margin: 10px 0 15px;
    padding: 0;
    text-align: left;
}
.blog-content.home-blog h2 {
    font-size: 18px;
    margin-bottom: 10px;
}
.blog-content.home-blog p {
    margin-bottom: 10px;
}
.link-box.home-blog-link a {
    font-size: 14px;
    color: #009688;
}
.blog-title a {
    color: #222;
}
.link-box a {
    color: #555;
}
.link-box a:hover {
    color: #ff5e14;
}
.blog-title a:hover {
    color: #2d286b;
}
.meta-info ul li {
    color: #9e9e9e;
    display: inline-block;
    font-size: 11px;
    padding: 0 12px;
    position: relative;
    text-transform: uppercase;
    font-weight: 700;
}
.embed-responsive {
    margin-bottom: 20px;
}
.meta-info ul li:first-child{padding-left:0}
.meta-info ul li a{color:#ff5e14}
.meta-info ul li a:hover{color:#444}
.meta-info ul li::before {
    border: 1px solid #999;
    border-radius: 5px;
    content: "";
    height: 5px;
    left: -4px;
    position: absolute;
    top: 6px;
    width: 5px;
}
.meta-info ul li:first-child:before{display:none}
.blog-thumb img {
    width: 100%;
}
.link-box a {
    font-weight: 600;
}
.how-section1{
    /*margin-top: -15%; */
    padding: 0 10%;
}
.how-section1 h4{
    color: #009688;
    font-weight: bold;
    font-size: 30px;
}
.how-section1 .subheading{
    color: #2d286b;
    font-size: 20px;
}
.how-section1 .row
{
    margin-top: 10%;
}
.how-img 
{
    text-align: center;
}
.how-img img{
    width: 100%;
}

/*<!-- /////////    downloads        ////////////////////// -->*/

.cardContainer { 
    background-image: url(http://elevationchurch.org/wp-content/uploads/2017/03/app_thumbnail.jpg);
    background-position: top center;
}

@media screen and (min-width: 737px){
    .cardContainer {
        height: 254px;
        margin: 0 2px 0 0;
        -ms-flex: 1 1 auto;
        -webkit-flex: 1 1 auto;
        flex: 1 1 auto;
    }
}

.cardContainer {
    display: block;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 120px;
    margin: 2px 0;
    padding-bottom: 0;
    position: relative;
    text-align: center;
    overflow: hidden;
}

.cardContainer {
    height: 350px;
    width:100%;
    overflow: hidden;
    padding: 0;
}
@media screen and (min-width: 737px) {
    .cardContainer {
        margin: 1px;
    }}


.cardContainer .card-overlay {
    width: 100%;
    height: 102%;
    background-color: rgba(0, 150, 136, 0.79);
    opacity: 0;
    -webkit-transition: opacity .5s ease-in-out;
    -moz-transition: opacity .5s ease-in-out;
    -ms-transition: opacity .5s ease-in-out;
    -o-transition: opacity .5s ease-in-out;
    transition: opacity .5s ease-in-out;

}

.cardContainer:hover .card-overlay {
    zoom: 1;
    filter: alpha(opacity=100);
    opacity: 1;
}





.cardContent {
    /*
        -webkit-transform: translate(0,0);
        transform: translate(0,0);*/
    width: 100%;
    height: 100%;
    left: 0;
    position: absolute;
    right: 0;
    top: 50%;

}

.cardContainer .cardContent h4, 
.cardContainer:hover .cardContent h4 {
    transition: top .4s ease;
    transition-delay: .2s;
    top: 4.7em;
    font-weight: 300;
    font-size: 2.71428571428571em;
    line-height: 1.26315789473684em;
    margin-bottom: 8px;
    word-spacing: 400px;
}

@media screen and (min-width: 737px){
    .cardContent h4 {
        font-size: 2em;
    }}
.cardContent h4 {
    color: #FFF;
    font-weight: 400;
    font-size: 1.42857142857143em;
    line-height: 1.28571428571429em;
}

.cardContent p  {
    opacity: 0;
    font-size: 1em;
    font-weight: 500;
    line-height: 1.71428571428571em;
    transition: opacity .4s ease;
    transition-delay: .1s;
    /*top: 40%;*/
}

.cardContent p {
    padding: 0 10%;
    width: 100%;
    /*position: absolute;
    top: 30%;*/
}



.cardContainer p {
    color: #2d286b;
    font-weight: 400;
    font-size: 1.14285714285714em;
    line-height: 1.75em;
    opacity: 1;

}

.cardContainer:hover p {
    opacity: 1;

}


.cardContainer .sm-marketing-button {
    /*position: absolute;
    left: 50%;*/
    /*-webkit-transform: translate(-50%,0);
     transform: translate(-50%,0);*/
    padding: 24px;
    bottom: 48px;
    display: block;
}


.cardContainer .sm-marketing-button {
    display: inline-block;
    font-size: .92857142857143em;
    line-height: .92857142857143em;
    font-weight: 500;
    letter-spacing: 1px;
    padding: 18px 28px;
    text-transform: uppercase;
}

.cardContainer .sm-marketing-button-white {
    background-color: #009688;
    color: #fff;
    border-radius: 8px;
}
.donloadbg{ background-image:url(downloads/DOWNLOAD-ICON.png);background-repeat: no-repeat, repeat;
            background-color: #cccccc;}

/*<!--  ////////////    vountere form     //////////////  -->*/
.form-horizontal .header{
    background: linear-gradient(135deg,var(--color_2),var(--color_3),var(--color_2),var(--color_3));
    padding: 30px 25px;
    font-size: 30px;
    color: #009688;
    text-align: center;
    text-transform: uppercase;
    border-radius: 3px 3px 0 0;
}
.form-horizontal .heading{
    font-size: 16px;
    color: #2655c1;
    margin: 10px 0 20px 0;
    text-transform: capitalize;
}
.form-horizontal .form-content{
    padding: 25px;
    background: #fff;
}
.form-horizontal .form-control{
    padding: 12px 16px 12px 39px;
    height: 50px;
    font-size: 15px;
    font-weight: 600;
    color: #2b2a2a;
    border: none;
    border-bottom: 2px solid #ccc;
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 15px;
}
.form-horizontal .form-control:focus{
    border-color: #2655c1;
    box-shadow: none;
}
.form-horizontal .control-label{
    font-size: 17px;
    color: #ccc;
    position: absolute;
    top: 5px;
    left: 27px;
    text-align: center;
}
.form-horizontal textarea.form-control{
    resize: vertical;
    height: 130px;
}
.form-horizontal .btn{
    font-size: 18px;
    color: #4e4e4e;
    float: right;
    margin: 10px 0;
    border: 2px solid #ccc;
    border-radius: 0;
    padding: 10px 25px;
    transition: all 0.5s ease 0s;
}
.btnmk{background: linear-gradient(135deg,var(--color_2),var(--color_3),var(--color_2),var(--color_3));color: var(--color_1) !important;box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);}
.form-horizontal .btn:hover{
    background: #fff;
    border-color: #2d286b;
    color: #000 !important;
}


/*<!--   /////////  faq     /////////    -->*/

.mt{margin-top: 42px;}
.mt80{ margin-top:80px;}
/*.progress-bar {
    float: left;
    width: 0;
    height: 100%;
    font-size: 12px;
    line-height: 20px;
    color: #fff;
    text-align: center;
    background-color: #337ab7;
    -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
    -webkit-transition: width .6s ease;
    -o-transition: width .6s ease;
    transition: width .6s ease;
}
.progress-bar {
    background-color: #2574A9;
    font-size: 13px;
    line-height: 20px;
    font-weight: bold;
}*/

.progress-outer{
    /*background: #fff;
    border-radius: 50px;*/
    padding: 8px;
    margin: 10px 0;
    /* box-shadow: 0 0  10px rgba(209, 219, 231,0.7);*/
}
.progress{
    height: 20px;
    margin: 0;
    overflow: visible;
    border-radius: 50px;
    background: #eaedf3;
    box-shadow: inset 0 10px  10px rgba(244, 245, 250,0.9);
}
.progress .progress-bar{
    border-radius: 50px;
}
.progress .progress-value{
    position: relative;
    left: -45px;
    top: 0px;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    letter-spacing: 2px;
}
.progress-bar.active{
    animation: reverse progress-bar-stripes 0.40s linear infinite, animate-positive 2s;
}
@-webkit-keyframes animate-positive{
    0% { width: 0%; }
}
@keyframes animate-positive {
    0% { width: 0%; }
}

select{ 
    color: #8c8c8c !important;
}

select option{ 
    color: #2b2a2a !important;  
}







/*news*/


@keyframes ticker {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-100%, 0, 0); }
}
.tcontainer{
    width: 100%;
    overflow: hidden;
}
.ticker-wrap {
    width: 100%;
    height: 35px;
    padding-left: 100%;
    background-color: #009688;

}
.ticker-move {
    display: inline-block;
    white-space: nowrap;
    padding-right: 100%;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-name: ticker;
    animation-duration: 20s;
}
.ticker-move:hover{
    animation-play-state: paused;
}
.ticker-move a{
    color: #FFF;
}
.ticker-item{
    color: #fff;
    font-weight: bold;
    display: inline-block;
    padding: 0.5rem 2rem;
}

.ticker-btn{
    position: absolute;
    background-color: #009688;
    height: 35px;
    right: 0;
    top: 0;
    padding: 5px;
    border-left: 2px solid #fff
}
.ticker-btn a{
    color: #fff;

}


#meetourstaff .protfolio-filter li{
    margin-top: 20px;
}


.fa-facebook{
    color: #3b5998;
}

.fa-twitter{
    color: #55acee;
}

.fa-google-plus{
    color: #dc4e41;
}

.fa-instagram{
    color: #3f729b  ;
}
.fa-linkedin{
    color: #0077b5  ;
}

.fa-pinterest{
    color: #bd081c;
}


.address{
    background-color: #eee;
    padding: 20px;
    box-shadow: 0 0 0.9305pc rgba(19, 27, 27, 0.46);
    margin-bottom: 30px;
    height: 400px;
}


.trainingplacement-reg button{
    width: 100%;
    height: 100px;
    font-weight: bold;
    font-size: 25px;
    background-color: #009688;
    color: #fff;.
    transition: all 0.3s ease 0s;

    border: none;
    margin-bottom: 50px;
}

.trainingplacement-reg button:hover {
    background-color: #fff;
    border: 2px solid #009688;
    transition: all 0.3s ease 0s;

    color: #009688;
}



/*
 * File
 */

.file {
    position: relative;
    display: inline-block;
    cursor: pointer;
    height: 3.5rem;
    width: 100%;
}
.file input {
    min-width: 14rem;
    margin: 0;
    filter: alpha(opacity=0);
    opacity: 0;
}
.file-custom {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 5;
    height: 3.5rem;
    padding: .5rem 1rem;
    line-height: 1.5;
    color: #555;
    background-color: #fff;
    border: .075rem solid #ddd;
    border-radius: .25rem;
    box-shadow: inset 0 .2rem .4rem rgba(0,0,0,.05);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.file-custom:after {
    content: "Choose file...";
}
.file-custom:before {
    position: absolute;
    top: -.075rem;
    right: -.075rem;
    bottom: -.075rem;
    z-index: 6;
    display: block;
    content: "Browse";
    height: 3.5rem;
    padding: .5rem 1rem;
    line-height: 1.5;
    color: #555;
    background-color: #eee;
    border: .075rem solid #ddd;
    border-radius: 0 .25rem .25rem 0;
}

/* Focus */
.file input:focus ~ .file-custom {
    box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9;
}




.tabs {
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    position: relative;
    background: white;
    padding: 50px;
    padding-bottom: 80px;
    width: 100%;
    height: 100%;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
    border-radius: 5px;
    min-width: 240px;
}
.tabs input[name="tab-control"] {
    display: none;
}
.tabs .content section h2,
.tabs ul li label {
    font-family: "Montserrat";
    font-weight: bold;
    font-size: 18px;
    color: #009688;
}
.tabs ul {
    list-style-type: none;
    padding-left: 0;
    display: flex;
    flex-direction: row;
    margin-bottom: 10px;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
}
.tabs ul li {
    box-sizing: border-box;
    flex: 1;
    width: 25%;
    padding: 0 10px;
    text-align: center;
}
.tabs ul li label {
    transition: all 0.3s ease-in-out;
    color: #929daf;
    padding: 5px auto;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    white-space: nowrap;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.tabs ul li label br {
    display: none;
}
.tabs ul li label svg {
    fill: #929daf;
    height: 1.2em;
    vertical-align: bottom;
    margin-right: 0.2em;
    transition: all 0.2s ease-in-out;
}
.tabs ul li label:hover, .tabs ul li label:focus, .tabs ul li label:active {
    outline: 0;
    color: #bec5cf;
}
.tabs ul li label:hover svg, .tabs ul li label:focus svg, .tabs ul li label:active svg {
    fill: #bec5cf;
}
.tabs .slider {
    position: relative;
    width: 25%;
    transition: all 0.33s cubic-bezier(0.38, 0.8, 0.32, 1.07);
}
.tabs .slider .indicator {
    position: relative;
    width: 50px;
    max-width: 100%;
    margin: 0 auto;
    height: 4px;
    background: #009688;
    border-radius: 1px;
}
.tabs .content {
    margin-top: 30px;
}
.tabs .content section {
    display: none;
    -webkit-animation-name: content;
    animation-name: content;
    -webkit-animation-direction: normal;
    animation-direction: normal;
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    line-height: 1.4;
}
.tabs .content section h2 {
    color: #009688;
    display: none;
}
.tabs .content section h2::after {
    content: "";
    position: relative;
    display: block;
    width: 30px;
    height: 3px;
    background: #009688;
    margin-top: 5px;
    left: 1px;
}
.tabs input[name="tab-control"]:nth-of-type(1):checked ~ ul > li:nth-child(1) > label {
    cursor: default;
    color: #009688;
}
.tabs input[name="tab-control"]:nth-of-type(1):checked ~ ul > li:nth-child(1) > label svg {
    fill: #009688;
}
@media (max-width: 600px) {
    .tabs input[name="tab-control"]:nth-of-type(1):checked ~ ul > li:nth-child(1) > label {
        background: rgba(0, 0, 0, 0.08);
    }
}
.tabs input[name="tab-control"]:nth-of-type(1):checked ~ .slider {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
}
.tabs input[name="tab-control"]:nth-of-type(1):checked ~ .content > section:nth-child(1) {
    display: block;
}
.tabs input[name="tab-control"]:nth-of-type(2):checked ~ ul > li:nth-child(2) > label {
    cursor: default;
    color: #009688;
}
.tabs input[name="tab-control"]:nth-of-type(2):checked ~ ul > li:nth-child(2) > label svg {
    fill: #009688;
}
@media (max-width: 600px) {
    .tabs input[name="tab-control"]:nth-of-type(2):checked ~ ul > li:nth-child(2) > label {
        background: rgba(0, 0, 0, 0.08);
    }
}
.tabs input[name="tab-control"]:nth-of-type(2):checked ~ .slider {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
}
.tabs input[name="tab-control"]:nth-of-type(2):checked ~ .content > section:nth-child(2) {
    display: block;
}
.tabs input[name="tab-control"]:nth-of-type(3):checked ~ ul > li:nth-child(3) > label {
    cursor: default;
    color: #009688;
}
.tabs input[name="tab-control"]:nth-of-type(3):checked ~ ul > li:nth-child(3) > label svg {
    fill: #009688;
}
@media (max-width: 600px) {
    .tabs input[name="tab-control"]:nth-of-type(3):checked ~ ul > li:nth-child(3) > label {
        background: rgba(0, 0, 0, 0.08);
    }
}
.tabs input[name="tab-control"]:nth-of-type(3):checked ~ .slider {
    -webkit-transform: translateX(200%);
    transform: translateX(200%);
}
.tabs input[name="tab-control"]:nth-of-type(3):checked ~ .content > section:nth-child(3) {
    display: block;
}
.tabs input[name="tab-control"]:nth-of-type(4):checked ~ ul > li:nth-child(4) > label {
    cursor: default;
    color: #009688;
}
.tabs input[name="tab-control"]:nth-of-type(4):checked ~ ul > li:nth-child(4) > label svg {
    fill: #009688;
}
@media (max-width: 600px) {
    .tabs input[name="tab-control"]:nth-of-type(4):checked ~ ul > li:nth-child(4) > label {
        background: rgba(0, 0, 0, 0.08);
    }
}
.tabs input[name="tab-control"]:nth-of-type(4):checked ~ .slider {
    -webkit-transform: translateX(300%);
    transform: translateX(300%);
}
.tabs input[name="tab-control"]:nth-of-type(4):checked ~ .content > section:nth-child(4) {
    display: block;
}
@-webkit-keyframes content {
    from {
        opacity: 0;
        -webkit-transform: translateY(5%);
        transform: translateY(5%);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0%);
        transform: translateY(0%);
    }
}
@keyframes content {
    from {
        opacity: 0;
        -webkit-transform: translateY(5%);
        transform: translateY(5%);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0%);
        transform: translateY(0%);
    }
}
@media (max-width: 1000px) {
    .tabs ul li label {
        white-space: initial;
    }
    .tabs ul li label br {
        display: initial;
    }
    .tabs ul li label svg {
        height: 1.5em;
    }
}
@media (max-width: 600px) {
    .tabs ul li label {
        padding: 5px;
        border-radius: 5px;
    }
    .tabs ul li label span {
        display: none;
    }
    .tabs .slider {
        display: none;
    }
    .tabs .content {
        margin-top: 20px;
    }
    .tabs .content section h2 {
        display: block;
    }
}



.slider {
    width: auto;
    margin: 30px 50px 50px;
}

.slick-slide {
    background: $c1;
    color: white;
    padding: 40px 0;
    font-size: 30px;
    font-family: "Arial", "Helvetica";
    text-align: center;
}

.slick-prev:before, 
.slick-next:before {
    color: black;    
}

.slick-dots {
    bottom: -30px;
}


.slick-slide:nth-child(odd) {
    background: $c2;
}