/*Eco Green HTML Template */ /************ TABLE OF CONTENTS *************** 1. Fonts 2. Reset 3. Global 4. Preloader 5. Scroll To Top 6. Header-search 7. Header-top 8. Main-header 9. Sticky-header 10.Main Slider 11.Default-form 12.About section 13.Welcome section 14.Volunteers-section 15.Fact-counter 16.Gallery-section 17.Donation form 18.Events-section 19.Accordion-box 20.Testimonials-section 21.News-section 22.Main-footer 23.Page Title 24.Styled Pagination 25.Masonry gallery 26.Events-section 27.Events-section style-two 28.Couses-section 29.Couses-section style-two 30.Couses-section style-three 31.Profile-details 32.Contact-section 33.Google map **********************************************/ /*google-Fonts*/ @import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,700'); @import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700'); @import url('https://fonts.googleapis.com/css?family=Lato'); @import url('https://fonts.googleapis.com/css?family=Catamaran:400,600'); /*** ==================================================================== Global Settings ==================================================================== ***/ @import url('font-awesome.css'); @import url('flaticon.css'); @import url('animate.css'); @import url('owl.css'); @import url('masterslider/style/masterslider.css'); @import url('masterslider/skins/default/style.css'); @import url('masterslider/style/ms-vertical.css'); @import url('bootstrap-select.min.css'); @import url('bootstrap.min.css'); @import url('jquery.bxslider.css'); @import url('jquery.fancybox.css'); @import url('hover.css'); /*** ==================================================================== Reset ==================================================================== ***/ @media (min-width:1200px) { .container { padding: 0px; } } * { margin:0px; padding:0px; border:none; outline:none; } body { font-family: 'Lato', sans-serif; font-size:15px; color:#777777; line-height:1.8em; font-weight:400; background:#ffffff; background-size:cover; background-repeat:no-repeat; background-position:center top; -webkit-font-smoothing: antialiased; } a{ text-decoration:none; cursor:pointer; color: #53d572; } a:hover,a:focus,a:visited{ text-decoration:none; outline:none; } h1,h2,h3,h4,h5,h6 { position:relative; font-family: 'Montserrat', sans-serif; margin:0px; } input,button,select,textarea{ font-family: 'Open Sans', sans-serif; } p{ position:relative; line-height:1.8em; } .strike-through{ text-decoration:line-through; } .auto-container{ position:static; max-width:1200px; padding:0px 15px; margin:0 auto; } .small-container{ max-width:680px; margin:0 auto; } .page-wrapper{ position:relative; margin:0 auto; width:100%; min-width:300px; overflow: hidden; } ul,li{ list-style:none; padding:0px; margin:0px; } .theme-btn{ display:inline-block; transition:all 0.3s ease; -moz-transition:all 0.3s ease; -webkit-transition:all 0.3s ease; -ms-transition:all 0.3s ease; -o-transition:all 0.3s ease; font-family: 'Open Sans', sans-serif; } .centered{ text-align:center; } .anim-3,.anim-3-all *{ transition:all 0.3s ease; -moz-transition:all 0.3s ease; -webkit-transition:all 0.3s ease; -ms-transition:all 0.3s ease; -o-transition:all 0.3s ease; } .anim-5,.anim-5-all *{ transition:all 0.5s ease; -moz-transition:all 0.5s ease; -webkit-transition:all 0.5s ease; -ms-transition:all 0.5s ease; -o-transition:all 0.5s ease; } .anim-7,.anim-7-all *{ transition:all 0.7s ease; -moz-transition:all 0.7s ease; -webkit-transition:all 0.7s ease; -ms-transition:all 0.7s ease; -o-transition:all 0.7s ease; } .btn-style-one{ position:relative; font-size:14px; line-height: 24px; font-weight:700; color: #ffffff; background: #53d572; padding: 10px 30px; border: 1px solid #53d572; text-transform:uppercase; transition:all 500ms ease; font-family: 'Open Sans', sans-serif; display: inline-block; border-radius: 5px; } .btn-style-one:hover{ color: #848484; background:#ffffff; border: 1px solid #e5e5e5; transition:all 500ms ease; } .btn-style-two{ position:relative; font-size:14px; line-height: 24px; font-weight:700; color: #848484; background:transparent; border: 1px solid #e5e5e5; padding: 10px 30px; text-transform:uppercase; transition:all 500ms ease; font-family: 'Open Sans', sans-serif; display: inline-block; border-radius: 5px; } .btn-style-two:hover{ color: #ffffff; background: #53d572; border: 1px solid #53d572; transition:all 500ms ease; } /*** ==================================================================== preloader style ==================================================================== ***/ .preloader{ position:fixed; left:0px; top:0px; height:100%; width: 100%; z-index:999999; background-color:#ffffff; background-position:center center; background-repeat:no-repeat; background-image:url(../images/icons/preloader.gif); } /*** ==================================================================== Scroll To Top style ==================================================================== ***/ .scroll-to-top{ position:fixed; bottom:15px; right:15px; color:#ffffff; font-size:12px; line-height:32px; width:34px; height:34px; border: 1px solid #ffffff; background: #53d572; text-align:center; z-index:100; cursor:pointer; display:none; border-radius:17px; transition:all 500ms ease; -moz-transition:all 500ms ease; -webkit-transition:all 500ms ease; -ms-transition:all 500ms ease; -o-transition:all 500ms ease; } .scroll-to-top:hover{ background:#ffffff; color: #53d572; border-color: #53d572; transition:all 500ms ease; } /*** ==================================================================== donate Popup ==================================================================== ***/ .donate-popup{ position:fixed; left:0px; top:-100%; width:100%; height:100%; background:rgba(0,0,0,0.80); z-index:9999; visibility:hidden; opacity:0; overflow:auto; transition:all 700ms ease; -moz-transition:all 700ms ease; -webkit-transition:all 700ms ease; -ms-transition:all 700ms ease; -o-transition:all 700ms ease; } .donate-popup.popup-visible{ top:0; visibility:visible; opacity:1; } .donate-popup .close-donate{ position:absolute; right:25px; top:25px; font-size:20px; color:#ffffff; cursor:pointer; z-index:5; } .donate-popup .close-donate:hover{ opacity:0.70; } /*============= donate form area =================*/ .donate-form-area { margin-top: 100px; margin-bottom: 100px; background: #f2f2f2; padding:57px; border: 3px solid #53d572; } .donate-form-area h2{ font-size: 36px; text-align: center; font-weight: 400; color: #222222; margin-bottom: 40px; text-transform: capitalize; font-family: 'Montserrat', sans-serif; } .donate-form-area h4 { font-size: 24px; color: #444444; font-weight: 400; margin-bottom: 18px; text-transform: capitalize; font-family: 'Montserrat', sans-serif; } .donate-form-area h3 { font-weight: 400; margin-top: 38px; color: #444444; margin-bottom: 28px; text-transform: capitalize; font-family: 'Montserrat', sans-serif; } /*check list*/ .chicklet-list { background: #fff; padding: 30px 30px 20px; } .chicklet-list li { padding: 0 5px; display: inline-block; margin-bottom: 10px; position: relative; } .chicklet-list input { font-size: 1.4em; line-height: 1; border: 2px solid #3b7840; padding: 0.55em 0.55em 0.55em 0.8em; color: #3b7840; } .chicklet-list input[type=radio] { opacity: 0; position: absolute; top: 0; left: 0; } .chicklet-list label { display: block; font-size: 16px; font-family: 'Roboto Slab', serif; font-weight: normal; background: #ffffff; border: 1px solid #f4f4f4; color: #000; padding: 8px 27px; text-align: center; border-radius: 0; cursor: pointer; -webkit-transition: all 0.1s ease-out; transition: all 0.1s ease-out; } .chicklet-list :checked+label { background: #53d572; color: #f7f7f7; text-shadow: none; } .chicklet-list li.other-amount { width: 38%; float: right; } .chicklet-list li span { position: absolute; left: -30px; top: 9px; font-size: 16px; font-family: 'Roboto Slab', serif; color: #303030; } .chicklet-list input[type="text"] { height: 40px; } /*==========*/ .donate-form-area .form-bg { background: #fff; padding: 30px 30px 15px; } .donate-form-area .default-form .form-group { margin-bottom: 15px; } .donate-form-area .default-form .form-group p { margin-bottom: 5px; } .donate-form-area .payment-option { position: relative; margin-top: 20px; margin-bottom: 35px; } .donate-form-area .payment-option li { display: inline-block; font-size: 18px; color: #303030; font-size: 15px; margin-right: 10px; } /*** ============================================= Header-search style ============================================= ***/ .header-search { position: relative; padding: 10px 0px; background: #160f09; z-index: 5; display: none; } .header-search .container { padding-right: 0px } .header-search .search-form { position: relative; width: 270px; } .header-search .search { position: relative; margin: 0px; } .header-search .search input[type="text"], .header-search input[type="search"] { position: relative; display: block; width: 100%; line-height: 24px; background: none; padding: 7px 40px 7px 15px; border: 1px solid #53d572; color: #ffffff; font-size: 14px; border-radius: 4px; -webkit-border-radius: 4px; -ms-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; } .header-search button { background: #53d572; border-radius: 0 4px 4px 0; display: block; font-size: 14px; height: 40px; line-height: 40px; position: absolute; right: 0; text-align: center; top: 0; width: 38px; border: 1px solid #53d572; } .header-search button span::before { color: #fff; font-size: 15px; } .header-search .search input:focus { border: 1px solid #24c4f4; } .header-search .search input:focus + button, .header-search .search input button:hover { background: #24c4f4 none repeat scroll 0 0; color: #24c4f4; border: 1px solid #24c4f4; } .search-button{ display: inline-block; } .search-button .toggle-search { margin: 0; position: absolute; top: 32px; right: 0px; } .search-button .toggle-search button { border: 1px solid #848484; display: block; height: 45px; font-size: 15px; margin: 0; line-height: 40px; color: #848484; background: #ffffff; border-radius: 5px; width: 45px; } /*** ==================================================================== Header-top style ==================================================================== ***/ .header-top{ background: #383b39; color: #ffffff; } .header-top .info-outer{ position: relative; } .header-top .info-outer .main-header-info li { position: relative; display: inline-block; padding-right: 25px; font-size: 13px; font-weight: 400; font-family: 'Open Sans', sans-serif; margin: 9px 15px 10px 0px; } .header-top .info-outer .main-header-info li:last-child{ margin-right: 0px; padding-right: 0px; } .header-top .info-outer .main-header-info li a{ position: relative; font-size: 13px; color: #ffffff; } .header-top .info-outer .main-header-info i{ position: relative; font-size: 14px; color: #53d572; margin-right: 5px; } .header-top .info-outer .header-top-info li{ position: relative; display: inline-block; } .header-top .header-top-info .header-info{ position: relative; display: inline-block; } .header-top .header-top-info .header-info i{ font-size: 13px; color: #c4c5c4; margin-right: 25px; transition:all 500ms ease; } .header-top .header-top-info .header-info i:hover{ color: #53d572; transition:all 500ms ease; } .header-top .header-top-info .donate-box-btn{ position:relative; font-size:14px; line-height: 24px; font-weight:700; color: #ffffff; background: #53d572; padding: 10px 28px; border: 1px solid #53d572; text-transform:uppercase; transition:all 500ms ease; font-family: 'Open Sans', sans-serif; display: inline-block; } .header-top .header-top-info .donate-box-btn:hover{ color: #53d572; background: #ffffff; border: 1px solid #53d572; transition:all 500ms ease; } /*** ==================================================================== Main-header style ==================================================================== ***/ .main-header{ position:relative; left:0px; top:0px; z-index:999; width:100%; transition:all 500ms ease; -moz-transition:all 500ms ease; -webkit-transition:all 500ms ease; -ms-transition:all 500ms ease; -o-transition:all 500ms ease; } .header-lower .main-menu{ position:relative; margin-right: 90px; padding: 27px 0px; } .header-lower .header-area{ position:relative; } .header-lower .header-area .logo{ margin-top: 19px; margin-bottom: 27px; } .main-menu .navbar-collapse{ padding:0px; } .main-menu .navigation{ position:relative; margin:0px; } .main-menu .navigation > li{ position:relative; display: inline-block; margin-right: 38px; } .main-menu .navigation > li:last-child{ margin-right: 0px; } .main-menu .navigation > li > a{ position:relative; display:block; padding: 13px 0px; font-size:17px; color:#222222; line-height:30px; font-weight:400; text-transform:capitalize; font-family: 'Montserrat', sans-serif; opacity:1; 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-menu .navigation > li:hover > a, .main-menu .navigation > li.current > a, .main-menu .navigation > li.current-menu-item > a{ position: relative; opacity:1; color: #53d572; transition:all 500ms ease; } .main-menu .navigation > li:hover:before, .main-menu .navigation > li.current:before, .main-menu .navigation > li.current-menu-item:before { color: #ffffff !important; opacity: 1; } .main-menu .navigation > li > ul{ position:absolute; left:0px; top: 150%; width:220px; padding:0px; z-index:100; display:none; background:#012f5d; border-top:3px solid #ffffff; 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-menu .navigation > li > ul > li{ position:relative; width:100%; border-bottom: 1px solid #e5e5e5; } .main-menu .navigation > li > ul > li:last-child{ border-bottom:none; } .main-menu .navigation > li > ul > li > a{ position:relative; display:block; padding:12px 15px; line-height:22px; font-weight:400; background: #53d572; font-size:17px; text-transform:capitalize; color: #ffffff; font-family: 'Montserrat', sans-serif; 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-menu .navigation > li > ul > li:hover > a{ background:#ffffff; color: #53d572; transition:all 500ms ease; } .main-menu .navigation > li > ul > li.dropdown:hover > a:after{ color:#ffffff; transition:all 500ms ease; } .main-menu .navigation > li.dropdown a{ padding-right: 12px; } .main-menu .navigation > li.dropdown:hover > ul{ visibility:visible; opacity:1; top:150%; transition:all 500ms ease; } .main-menu .navbar-collapse > ul li.dropdown .dropdown-btn{ position:absolute; right: -15px; top: 15px; width:34px; height:34px; text-align:center; font-size:16px; line-height:28px; color:#222222; cursor:pointer; z-index:5; display:block; } /*** ==================================================================== Sticky-header style ==================================================================== ***/ .sticky-header{ position:fixed; opacity:0; visibility:hidden; left:0px; top:0px; width:100%; padding:0px 0px; background:#ffffff; z-index:0; transition:all 500ms ease; -moz-transition:all 500ms ease; -webkit-transition:all 500ms ease; -ms-transition:all 500ms ease; -o-transition:all 500ms ease; box-shadow: 0px 4px 10px #f7f7f7; } .sticky-header .right-col{ float: right; } .sticky-header .logo{ display: inline-block; margin-top: 19px; margin-bottom: 27px; } .fixed-header .sticky-header .main-menu .navigation > li:last-child{ margin-right: 0px; } .fixed-header .sticky-header{ z-index:999; opacity:1; visibility:visible; -ms-animation-name: fadeInDown; -moz-animation-name: fadeInDown; -op-animation-name: fadeInDown; -webkit-animation-name: fadeInDown; animation-name: fadeInDown; -ms-animation-duration: 500ms; -moz-animation-duration: 500ms; -op-animation-duration: 500ms; -webkit-animation-duration: 500ms; animation-duration: 500ms; -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: 1; -moz-animation-iteration-count: 1; -op-animation-iteration-count: 1; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } .sticky-header .main-menu{ position:relative; padding: 27px 0px; } /*** ==================================================================== Main Slider style ==================================================================== ***/ .main-slider{ position:relative; } .main-slider.negative-margin{ position:relative; } .main-slider .tp-caption{ z-index:5; } .main-slider h3{ font-size:32px; color:#feffff; font-weight:400; line-height: 42px; text-transform: uppercase; font-family: 'Montserrat', sans-serif; } .main-slider h1{ font-size:52px; color:#feffff; font-weight:700; line-height: 62px; text-transform: uppercase; font-family: 'Montserrat', sans-serif; } .main-slider p{ font-size:15px; color:#ffffff; font-weight:400; line-height: 26px; letter-spacing: 1px; font-family: 'Open Sans', sans-serif; } .tp-caption a{ position:relative; font-size:14px; line-height: 24px; font-weight:700; color: #ffffff; background: #53d572; padding: 12px 30px; border: 1px solid #53d572; text-transform:uppercase; transition:all 500ms ease; font-family: 'Open Sans', sans-serif; display: inline-block; border-radius: 5px; } .tp-caption a:hover{ color: #53d572; background: transparent; border: 1px solid #53d572; } .main-slider .tparrows.preview3{ display: block; } .tp-bullets.preview3{ display: block; } .main-slider .tp-bannertimer{ display:none !important; } /*** ==================================================================== About section style ==================================================================== ***/ .about-section{ position: relative; padding-top: 90px; padding-bottom: 20px; } .about-section .sec-title{ position: relative; padding-bottom: 98px; } .about-section .sec-title h3{ font-size: 36px; line-height: 46px; font-weight: 400; color: #222222; padding-bottom: 5px; text-transform: uppercase; font-family: 'Montserrat', sans-serif; } .about-section .sec-title p{ font-size: 17px; line-height: 26px; font-weight: 400; color: #848484; font-family: 'Open Sans', sans-serif; } .about-section .item-holder { position: relative; padding: 0px 30px 48px; border: 1px solid #e5e5e5; border-radius: 5px; margin-bottom: 80px; transition:all 500ms ease; } .about-section .item-holder .icon-holder{ position: relative; top: -50%; margin-top: -55px; transition:all 500ms ease; } .about-section .item-holder .icon-box{ position: relative; width: 111px; height: 111px; line-height: 111px; border-radius: 50%; background: #53d572; border: 2px solid #53d572; display: inline-block; transition:all 500ms ease; } .about-section .item-holder .icon-box:before{ position: absolute; width: 125px; height: 125px; top: -9px; left: -9px; display: inline-block; border-radius: 50%; background: #ffffff; content: ''; z-index: -1; border: 2px dashed #53d572; transition:all 500ms ease; } .about-section .item-holder .icon-box span:before{ font-size: 30px; color: #ffffff; } .about-section .item-holder .item-content { padding-top: 45px; } .about-section .item-holder:hover{ transition:all 500ms ease; box-shadow: 4px 4px 20px 0px rgba(0, 0, 0, 0.2); } .about-section .item-holder:hover .icon-box { background: #53d572; border: 2px dashed #ffffff; transition:all 500ms ease; } .about-section .item-holder:hover .icon-box:before { background: #53d572; border: 2px solid #53d572; transition:all 500ms ease; } .about-section .item-holder .item-content h5{ font-size: 24px; line-height: 38px; color: #222222; font-weight: 400; text-transform: uppercase; padding-bottom: 20px; font-family: 'Montserrat', sans-serif; } .about-section .item-holder .item-content p{ font-size: 14px; line-height: 28px; color: #848484; font-weight: 400; letter-spacing: .6px; font-family: 'Open Sans', sans-serif; } .about-section .item-holder .link-btn{ padding-top: 22px; } /*** ==================================================================== Welcome section style ==================================================================== ***/ .welcome-section { position: relative; background: #f5f5f5; } .welcome-section .image-box{ position: relative; margin-right: -23px; } .welcome-section img{max-width: none;margin-left: -62%;} .welcome-section .image-content{ position: relative; margin-left: -7px; padding: 82px 15px 100px 60px; } .welcome-section .image-content .section-title h3{ font-size: 36px; line-height: 46px; font-weight: 400; color: #222222; padding-bottom: 5px; text-transform: uppercase; font-family: 'Montserrat', sans-serif; } .welcome-section .image-content .section-title p{ font-size: 17px; line-height: 26px; font-weight: 400; color: #848484; font-family: 'Open Sans', sans-serif; } .welcome-section .image-content h4{ padding-top: 25px; font-size: 26px; line-height: 36px; font-weight: 400; color: #222222; text-transform: uppercase; font-family: 'Montserrat', sans-serif; } .welcome-section .image-content .causes-progress { position: relative; width: 100%; margin-bottom: 15px; } .welcome-section .image-content .progress { height: 6px; } .welcome-section .image-content .progress-item { margin-top: 22px; } .welcome-section .image-content .progress-item .progress { background-color: #e7e7e7; border-radius: 8px; margin-bottom: 12px; overflow: visible; } .welcome-section .image-content .progress-item .progress-bar { background-color: #53d572; border-radius: 8px 0 0 8px; font-size: 12px; height: 6px; line-height: 18px; padding-left: 10px; position: relative; text-align: left; -webkit-transition: all 1s ease 0s; -moz-transition: all 1s ease 0s; -ms-transition: all 1s ease 0s; -o-transition: all 1s ease 0s; transition: all 1s ease 0s; width: 0; } .welcome-section .image-content .progress-bar .value-holder { background-color: #f5f5f5; font-size: 12px; color: #222222; position: absolute; text-align: center; top: -15px; width: 36px; right: -36px; height: 36px; border: 3px solid #53d572; border-radius: 50%; font-family: 'Open Sans', sans-serif; } .welcome-section .image-content .progress-bar .value-holder .value { color: #222222; font-size: 12px; line-height: 33px; } .welcome-section .image-content.progress-white .progress { padding: 2px; } .welcome-section .image-content .progress { background-color: #e5e5e5; border-bottom: 1px solid #ddd; box-shadow: none; } .welcome-section .image-content .list-inline>li { font-size: 14px; font-weight: 600; line-height: 24px; color: #222222; text-transform: uppercase; font-family: 'Open Sans', sans-serif; } .welcome-section .image-content .list-inline>li span{ color: #848484; } .welcome-section .image-content .list-inline>li.text-thm span{ color: #53d572; } .welcome-section .image-content .content-text p{ font-size: 14px; line-height: 27px; font-weight: 400; color: #848484; margin-bottom: 25px; font-family: 'Open Sans', sans-serif; } /*** ==================================================================== Volunteers-section style ==================================================================== ***/ .volunteers-section{ position: relative; padding: 90px 0px 70px; } .volunteers-section .sec-title{ position: relative; margin-bottom: 45px; } .volunteers-section .sec-title h3{ font-size: 36px; line-height: 46px; color: #222222; font-weight: 400; text-transform: uppercase; font-family: 'Montserrat', sans-serif; } .volunteers-section .sec-title p{ font-size: 17px; line-height: 32px; color: #848484; font-weight: 400; letter-spacing: .1px; font-family: 'Open Sans', sans-serif; } .volunteers-section .image-holder{ position: relative; margin-bottom: 30px; border-radius: 5px; transition:all 500ms ease; } .volunteers-section .image-box{ position: relative; } .volunteers-section .image-box img{ width: 100%; border-radius: 5px 5px 0px 0px; transition:all 500ms ease; } .volunteers-section .image-box .overly-box{ position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; content: ''; opacity: 0; border-radius: 5px 5px 0px 0px; background: rgba(0, 0, 0, 0.5); transition:all 500ms ease; } .volunteers-section .image-holder .contact-list{ position: relative; top: 50%; } .volunteers-section .image-holder .contact-list i{ font-size: 13px; color: #ffffff; width: 38px; height: 38px; text-align: center; line-height: 38px; border-radius: 50%; margin: 1px; background: transparent; border: 1px solid #cecdcd; transition:all 500ms ease; } .volunteers-section .image-holder .contact-list i:hover{ color: #ffffff; background: #53d572; border: 1px solid #53d572; transition:all 500ms ease; } .volunteers-section .image-content{ position: relative; padding: 35px 30px 40px; border: 1px solid #e5e5e5; border-radius: 0px 0px 5px 5px; } .volunteers-section .image-content h5{ font-size: 24px; font-weight: 400; line-height: 24px; color: #222222; text-transform: uppercase; transition:all 500ms ease; padding-bottom: 8px; font-family: 'Montserrat', sans-serif; } .volunteers-section .image-content h5:hover{ color: #53d572; transition:all 500ms ease; } .volunteers-section .image-content span{ font-size: 14px; font-weight: 400; line-height: 24px; color: #848484; text-transform: capitalize; transition:all 500ms ease; font-family: 'Open Sans', sans-serif; } .volunteers-section .image-content p{ font-size: 14px; font-weight: 400; line-height: 24px; color: #848484; letter-spacing: .6px; margin-top: 20px; transition:all 500ms ease; font-family: 'Open Sans', sans-serif; } .volunteers-section .image-content .link-btn{ padding-top: 18px; } .volunteers-section .image-holder:hover{ box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); transition:all 500ms ease; } .volunteers-section .image-holder:hover .overly-box{ opacity: 1; transition:all 500ms ease; } /*** ==================================================================== Fact-counter style ==================================================================== ***/ .counter-section { position:relative; background-size: cover; background-repeat: no-repeat; padding-top: 106px; width: 100%; padding-bottom: 51px; } .counter-section:before{ position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; content: ''; background: rgba(0, 0, 0, 0.6); } .counter-section .fact-counter{ margin-bottom: 40px; } .counter-section .fact-counter span{ position:relative; font-size:55px; color:#ffffff; font-weight: 600; text-transform:uppercase; font-family: 'Open Sans', sans-serif; } .counter-section .fact-counter h6{ position:relative; font-size: 15px; font-weight: 400; color: #ffffff; line-height: 28px; padding-top: 15px; text-transform: uppercase; font-family: 'Montserrat', sans-serif; } /*** ==================================================================== Gallery-section style ==================================================================== ***/ .gallery-section{ padding-top: 90px; padding-bottom: 100px; background: #ffffff; } .gallery-section h3{ font-size: 36px; line-height: 48px; font-weight: 400; color: #222222; text-transform: uppercase; font-family: 'Montserrat', sans-serif; } .gallery-section p{ font-size: 17px; font-weight: 400; line-height: 31px; margin-bottom: 42px; font-family: 'Open Sans', sans-serif; } .gallery-section .inner-container{ position: relative; padding: 0px 10px; } .gallery-section .inner-box{ position: relative; margin: 5px -15px; padding: 0px 5px; } .gallery-section .inner-box .img_holder img{ position: relative; width: 100%; border-radius: 5px; } .gallery-section .overlay-box{ position: absolute; top: 0px; left: 5px; right: 5px; bottom: 0px; border-radius: 5px; transform: scale(0,0); -webkit-transform:scale(0,0); -moz-transform:scale(0,0); -ms-transform:scale(0,0); -o-transform:scale(0,0); transition:all 500ms ease; } .gallery-section .inner-box:hover .overlay-box{ background: rgba(46, 49, 46, 0.7); transform: scale(1,1); -webkit-transform:scale(1,1); -moz-transform:scale(1,1); -ms-transform:scale(1,1); -o-transform:scale(1,1); transition:all 500ms ease; } .gallery-section .overlay-box{ padding-top: 21%; } .gallery-section .overlay-box i{ color: #ffffff; font-size: 16px; width: 50px; height: 50px; line-height: 50px; background: #53d572; border-radius: 50%; } .gallery-section .overlay-box h5{ font-size: 24px; font-weight: 400; line-height: 34px; color: #ffffff; margin-top: 20px; text-transform: uppercase; font-family: 'Montserrat', sans-serif; } .gallery-section .link-btn{ margin-top: 44px; } .fancybox-skin { position: relative; background: #53d572; color: #222; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } /*** ==================================================================== Donation form Style ==================================================================== ***/ .donation-form{ position: relative; background-repeat: no-repeat; background-size: cover; } .donation-form:before{ position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; content: ''; background: rgba(0, 0, 0, 0.6); } .donation-form .sponsor-logo{ position: relative; padding: 168px 0px; } .donation-form .logo-column{ margin: 0px -3.5px; } .donation-form .sponsor-logo img{ border: 1px solid #adafaa; padding: 20px 30px; margin-bottom: 10px; border-radius: 5px; margin-right: 10px; width: 100%; transition:all 500ms ease; } .donation-form .sponsor-logo img:hover{ border: 1px solid #53d572; background: #53d572; transition:all 500ms ease; } .comment-box{ position: relative; margin-left: 25px; background: rgba(255, 255, 255, 0.95); } .comment-box h3{ position: relative; color: #222222; font-weight: 400; font-size: 30px; line-height: 42px; text-transform: uppercase; font-family: 'Montserrat', sans-serif; } .comment-box p{ color: #848484; font-weight: 400; font-size: 14px; line-height: 26px; letter-spacing: .8px; margin-bottom: 0px; font-family: 'Open Sans', sans-serif; } .form-group h6{ font-size: 14px; font-weight: 600; line-height: 24px; color: #222222; margin-bottom: 4px; text-transform: uppercase; font-family: 'Open Sans', sans-serif; } .comment-box .default-form-area{ padding: 65px 28px; } .comment-box .form-group.mar-btm{ padding-top: 8px; margin-bottom: 56px; } .comment-box .form-group{ margin-bottom: 40px; } .comment-box .form-group.payment-options{ margin-bottom: 18px; } .comment-box .default-form { position: relative; } .comment-box .default-form select{ color: #848484; margin-right: 20px; background: #ffffff; } .bootstrap-select.btn-group{ background: transparent; } .bootstrap-select>.dropdown-toggle{ background: #ffffff; height: 50px; border: 1px solid #e5e5e5; } .bootstrap-select>.dropdown-toggle:after{ position: absolute; content: "\f107"; color: #e5e5e5; top: 5px; right: 5px; width: 30px; height: 40px; line-height: 38px; text-align: center; background: #ffffff; font-family: FontAwesome; } .bootstrap-select .dropdown-toggle:focus { outline: none!important; color: #ffffff; } .bootstrap-select.btn-group .dropdown-toggle .caret{ color: #e5e5e5; right: 10px; } .bootstrap-select.btn-group .dropdown-menu{ background: #ffffff; margin-top: 18px; } .bootstrap-select.btn-group .dropdown-menu li a{ background: #ffffff; color: #848484; padding: 10px 20px; transition: all 500ms ease; } .bootstrap-select.btn-group .dropdown-menu li a:hover{ background: #53d572; color: #ffffff; transition: all 500ms ease; } .bootstrap-select.btn-group .dropdown-toggle .filter-option{ color: #848484; } .payment-options{ position: relative; margin-top: 25px; } .payment-options .option-block{ position: relative; } .checkbox, .radio{ display: inline-block; margin: 0px; padding-right: 18px; color: #848484; } .checkbox input[type=checkbox], .checkbox-inline input[type=checkbox], .radio input[type=radio], .radio-inline input[type=radio]{ position: relative; top: 2px; left: 0px; width: 14px; height: 14px; margin-right: 5px; color: #848484; background: #f5f5f5; border: 1px solid #848484; } /*** ==================================================================== Events-section style ==================================================================== ***/ .events-section{ padding-top: 100px; padding-bottom: 50px; } .events-section .sec-title{ padding-bottom: 34px; } .events-section .sec-title h4{ font-size: 30px; line-height: 38px; color: #222222; font-weight: 400; text-transform: uppercase; font-family: 'Montserrat', sans-serif; } .events-section .sec-title p{ font-size: 16px; line-height: 32px; color: #848484; font-weight: 400; font-family: 'Open Sans', sans-serif; } .events-section .blog-side{ margin-bottom: 45px; } .events-section .item{ margin-bottom: 20px; } .events-section .item .image-box{ position: relative; display: table-cell; } .events-section .item .image-box img{ position: relative; border-radius: 5px; width: 100%; } .events-section .item .overly-text{ position: absolute; top: 0px; left: 0px; right: 0px; bottom: 1px; content: ''; border-radius: 5px; background: rgba(0, 0, 0, 0.4); } .events-section .item .image-box h5{ position: absolute; font-size: 28px; color: #ffffff; top: 24px; left: 23px; width: 75px; height: 92px; padding-top: 12px; line-height: 35px; text-align: center; border-radius: 5px; background: #53d572; } .events-section .item .image-box h5 span{ position: relative; font-size: 16px; text-transform: uppercase; } .events-section .item .image-box h5 span:before{ position: absolute; left: 0px; top: -9px; width: 32px; content: ''; border-top: 1px solid #ffffff; } .events-section .item .image-content{ position: relative; display: table-cell; left: 30px; vertical-align: middle; } .events-section .item .image-content h5{ font-size: 22px; font-weight: 400; line-height: 38px; color: #222222; text-transform: uppercase; font-family: 'Montserrat', sans-serif; } .events-section .item .image-content li{ position: relative; display: inline-block; font-size: 14px; line-height: 26px; font-weight: 400; color: #848484; margin-right: 12px; font-family: 'Open Sans', sans-serif; } .events-section .item .image-content li i{ margin-right: 7px; color: #53d572; } .events-section .item .image-content p{ font-size: 14px; color: #848484; line-height: 26px; font-weight: 400; margin-top: 15px; letter-spacing: 1px; font-family: 'Open Sans', sans-serif; } .events-section .accordin-side{ position: relative; margin-left: 34px; margin-bottom: 45px; } /*** ==================================================================== Accordion-box style ==================================================================== ***/ .accordion-box { position: relative; } .accordion { position: relative; border: 1px solid #e5e5e5; margin-bottom: 20px; border-radius: 5px; } .accordion .acc-btn h6{ color: #222222; font-size: 14px; font-weight: 400; line-height: 28px; padding: 10px 28px; cursor: pointer; letter-spacing: .5px; font-family: 'Montserrat', sans-serif; text-transform: uppercase; } .accordion .acc-btn.active{ background: #53d572; border: 1px solid #53d572; border-radius: 5px 5px 0px 0px; } .accordion .acc-btn.active h6{ color: #ffffff; } .accordion .acc-btn.active .toggle-icon{ color: #ffffff; position: absolute; top: 0px; right: 20px; } .accordion .acc-btn .toggle-icon { font-size: 15px; color: #949494; font-weight: 400; line-height: 46px; position: absolute; top: 0px; right: 10px; } .accordion-box .accordion .acc-btn .toggle-icon .plus { opacity: 1; } .accordion-box .accordion .acc-btn.active .toggle-icon .plus { opacity: 0; } .accordion-box .accordion .acc-btn .toggle-icon .minus { opacity: 0; } .accordion-box .accordion .acc-btn.active .toggle-icon .minus { opacity: 1; } .accordion-box .accordion .acc-content { display: none; } .accordion-box .accordion .acc-content.collapsed { display: block; } .accordion-box .accordion .acc-content p { border-top: 1px solid #e5e5e5; color: #848484; font-size: 14px; padding-top: 22px; padding-bottom: 22px; font-weight: 400; padding-left: 28px; line-height: 26px; letter-spacing: 1px; font-family: 'Open Sans', sans-serif; } /*** ==================================================================== Testimonials-section style ==================================================================== ***/ .testimonials-section{ position: relative; padding-top: 95px; height: 485px; background-size: cover; background-repeat: no-repeat; } .testimonials-section:before{ position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; content: ''; background: rgba(0, 0, 0, 0.6); } .testimonials-section .icon-box{ padding-bottom: 28px; } .testimonials-section .icon-box i{ font-size: 42px; line-height: 50px; color: #53d572; } .testimonials-section h5{ font-size: 20px; line-height: 36px; color: #ffffff; font-weight: 700; letter-spacing: 1px; font-family: 'Open Sans', sans-serif; } .testimonials-section .item{ position: relative; padding-top: 22px; } .testimonials-section .item .image-box{ display: inline-block; } .testimonials-section .item img{ position: absolute; top: 23px; } .testimonials-section .item .image-content{ display: inline-block; text-align: left; margin-left: 70px; } .testimonials-section .item .image-content h6{ font-size: 18px; margin-top: 8px; line-height: 16px; color: #53d572; font-weight: 600; text-transform: uppercase; font-family: 'Catamaran', sans-serif; } .testimonials-section .item .image-content span{ font-size: 12px; color: #c0c6ca; line-height: 12px; font-weight: 400; text-transform: uppercase; font-family: 'Lato', sans-serif; } .testimonials-section .owl-theme .owl-controls{ display: block; position: absolute; bottom: -80px; left: 50%; margin-left: -30px; } .testimonials-section .owl-controls .owl-dots .owl-dot span{ position: relative; height: 11px; width: 11px; margin: 5px; border: 2px solid #d5d9dc; border-radius: 50%; background: transparent; } .testimonials-section .owl-controls .owl-dots .owl-dot.active span{ position: relative; height: 13px; width: 13px; border: 2px solid #53d572; border-radius: 50%; background: #53d572; } /*** ==================================================================== News-section style ==================================================================== ***/ .news-section{ position: relative; padding-top: 90px; padding-bottom: 165px; } .news-section.style-two{ position: relative; padding-top: 90px; padding-bottom: 100px; } .news-section .section-title{ padding-bottom: 37px; } .news-section .section-title h3{ font-size: 36px; line-height: 48px; font-weight: 500; color: #222222; text-transform: uppercase; } .news-section .section-title p{ font-size: 17px; line-height: 28px; font-weight: 400; color: #848484; font-family: 'Open Sans', sans-serif; } .news-section .slide-item.column-margin{ padding-top: 10px; padding-bottom: 40px; } .news-section .slide-item.right-margin{ margin-right: 13px; } .news-section .slide-item.left-margin{ margin-left: 10px; } .news-section .slide-item .image-box{ position: relative; display: table-cell; } .news-section .slide-item .date-box{ position: absolute; width: 60px; height: 60px; right: 30px; top: 40px; background: #53d572; z-index: 9; border-radius: 5px; } .news-section .slide-item .date-box h5{ font-size: 23px; font-weight: 700; line-height: 20px; color: #ffffff; margin-top: 10px; text-transform: uppercase; font-family: 'Montserrat', sans-serif; } .news-section .slide-item .date-box h5:before { color: #53d572; content: "\f0da"; font-family: FontAwesome; position: absolute; right: -8px; top: 10px; transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; } .news-section .slide-item .date-box h5 span{ font-size: 14px; font-weight: 400; color: #ffffff; } .news-section .slide-item .image-box img{ border-radius: 5px; } .news-section .slide-item .image-box:after{ position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; content: ''; border-radius: 5px; background: rgba(0, 0, 0, 0.3); } .news-section .slide-item .inner-box{ position: relative; display: table-cell; left: -20px; vertical-align: middle; } .news-section .slide-item .inner-box .info-outer{ position: relative; padding: 30px 30px 30px 35px; margin-right: -20px; background: #ffffff; border-radius: 5px; border: 1px solid #e5e5e5; } .news-section .slide-item .inner-box .info-outer h5{ font-size: 22px; font-weight: 400; line-height: 35px; color: #222222; letter-spacing: .5px; text-transform: uppercase; font-family: 'Montserrat', sans-serif; } .news-section .inner-box .info-outer li{ position: relative; display: inline-block; font-size: 14px; line-height: 27px; color: #848484; margin-right: 10px; padding-right: 5px; } .news-section .inner-box .info-outer li i{ margin-right: 5px; color: #53d572; } .news-section .inner-box .info-outer h6{ font-size: 14px; line-height: 25px; color: #848484; font-weight: 400; margin-top: 20px; font-family: 'Open Sans', sans-serif; } .news-section .inner-box .info-outer .link-btn{ margin-top: 14px; } .news-section .inner-box .info-outer .link-btn a{ font-size: 14px; line-height: 24px; color: #848484; font-weight: 400; text-transform: capitalize; transition:all 500ms ease; letter-spacing: .5px; font-family: 'Open Sans', sans-serif; } .news-section .inner-box .info-outer .link-btn a:hover{ color: #53d572; transition:all 500ms ease; } .news-section .owl-theme .owl-controls{ display: block; position: absolute; bottom: -75px; left: 50%; margin-left: -30px; } .news-section .owl-theme .owl-controls .owl-dots .owl-dot span{ position: relative; height: 11px; width: 11px; margin: 5px; border: 2px solid #d5d9dc; border-radius: 50%; background: #ffffff; } .news-section .owl-theme .owl-controls .owl-dots .owl-dot.active span{ position: relative; height: 13px; width: 13px; border: 2px solid #53d572; border-radius: 50%; background: #53d572; } .owl-theme .owl-controls .owl-nav{ display: none; } /*** ==================================================================== Main-footer style ==================================================================== ***/ .main-footer { position: relative; background-size: cover; background-repeat: no-repeat; border-top: 5px solid #52d471; } .main-footer .widgets-section{ padding-top: 100px; margin-bottom: 75px; } .main-footer:before{ position: absolute; width: 100%; top: 0px; left: 0px; right: 0px; bottom: 0px; content: ''; background: rgba(10, 10, 10, 0.85); } .main-footer .footer-column .about-widget{ position: relative; } .main-footer .footer-column .about-widget .footer-logo{ padding-bottom: 17px; } .main-footer .footer-column h5{ font-size: 20px; font-weight: 400; line-height: 30px; color: #ffffff; padding-bottom: 15px; padding-top: 10px; text-transform: uppercase; font-family: 'Montserrat', sans-serif; } .main-footer .footer-column p{ font-size: 14px; font-weight: 400; line-height: 26px; color: #c0c6ca; padding: 13px 0px; margin-bottom: 0px; font-family: 'Open Sans', sans-serif; } .main-footer .footer-column .social-links{ position: relative; padding-top: 30px; } .main-footer .footer-column .social-links li{ display: inline-block; } .main-footer .footer-column .social-links li i{ font-size: 15px; font-weight: 400; line-height: 26px; color: #c0c6ca; text-align: center; line-height: 35px; background: transparent; color: #c0c6ca; width: 35px; height: 35px; margin-right: 7px; border: 1px solid #979595; border-radius: 50%; transition:all 500ms ease; } .main-footer .footer-column .social-links li i:hover{ color: #ffffff; background: #52d471; border: 1px solid #52d471; transition:all 500ms ease; } .main-footer .footer-column .gallery-column{ position: relative; margin-left: 50px; margin-right: -15px; } .main-footer .footer-column .gallery-column .item{ position: relative; margin-left: 90px; height: 70px; margin-bottom: 30px; } .main-footer .footer-column .gallery-column .image-box{ position: absolute; top: -3px; left: -90px; } .main-footer .footer-column .gallery-column .image-box img{ border-radius: 5px; } .main-footer .footer-column .item h6{ font-size: 15px; line-height: 24px; font-weight: 400; margin-top: 10px; color: #c0c6ca; font-family: 'Montserrat', sans-serif; } .main-footer .footer-column .item span{ font-size: 13px; font-weight: 400; color: #c0c6ca; text-transform: capitalize; font-family: 'Open Sans', sans-serif; } .main-footer .footer-column .links-widget{ position: relative; margin-left: 75px; } .main-footer .links-widget .links-list li{ font-size: 14px; font-weight: 400; line-height: 24px; margin-bottom: 20px; } .main-footer .links-widget .links-list li i{ margin-right: 8px; } .main-footer .links-widget .links-list li a{ color: #c0c6ca; transition:all 500ms ease; } .main-footer .links-widget .links-list li a:hover{ color: #52d471; transition:all 500ms ease; } .main-footer .footer-column .contact-links{ position: relative; } .main-footer .footer-column .contact-links span{ font-size: 14px; font-weight: 400; line-height: 27px; color: #c0c6ca; font-family: 'Open Sans', sans-serif; } .main-footer .contact-links .footer-info{ position: relative; margin-left: 30px; margin-top: 5px; } .main-footer .contact-links .footer-info i{ position: absolute; left: -30px; top: 0px; color: #c0c6ca; } .main-footer .contact-links .footer-info h6{ font-size: 14px; font-weight: 400; line-height: 26px; color: #c0c6ca; font-family: 'Open Sans', sans-serif; } .main-footer .footer-column .newsletter{ margin-top: 28px; } .main-footer .footer-column .newsletter .form-group{ position: relative; margin-top: 10px; margin-bottom: 30px; } .main-footer .footer-column .newsletter .form-group{ position: relative; margin-bottom: 30px; } .main-footer .newsletter .form-group input[type="text"], .main-footer .newsletter .form-group input[type="email"] { position: relative; display: inline-block; padding: 10px 20px; color: #222222; height: 45px; font-size: 14px; width: 100%; font-family: 'Open Sans', sans-serif; background: #ffffff; border: 1px solid #ffffff; border-radius: 5px; } .main-footer .footer-column .newsletter button{ position: absolute; font-size: 14px; top: 0px; right: 0px; background: #52d471; color: #ffffff; width: 45px; height: 45px; border-radius: 0px 5px 5px 0px; } .footer-bottom .footer-text{ position: relative; } .footer-bottom .footer-text:after{ position: absolute; top: 0px; left: 0px; width: 100%; content: ''; border-top: 1px solid rgba(255, 255, 255, 0.4); } .footer-bottom p{ padding: 25px 0px; font-size: 14px; font-weight: 400; line-height: 24px; color: #c0c6ca; margin-bottom: 0px; font-family: 'Open Sans', sans-serif; } /*** =======================End home page =====================***/ /*** ==================================================================== Page Title Style ==================================================================== ***/ .page-title{ position:relative; height: 250px; padding-top: 80px; background-size:cover; background-position:center center; background-repeat:no-repeat; text-align:center; } .page-title:before{ content:''; left:0px; top:0px; width:100%; height:100%; position:absolute; background: rgba(33, 33, 33, 0.6); } .page-title .title-text h1{ position: relative; font-size:36px; color:#ffffff; line-height:48px; font-weight:400; padding-bottom: 8px; font-family: 'Montserrat', sans-serif; text-transform:uppercase; } .page-title .title-text .title-menu li{ position:relative; color:#ffffff; font-size: 15px; display: inline-block; line-height:26px; font-weight: 700; text-transform: capitalize; font-family: 'Open Sans', sans-serif; } .page-title .title-text .title-menu li a:after{ content:'>'; position:absolute; width:10px; top: 2px; line-height:25px; font-size:15px; margin-left: 6px; } .page-title .title-text .title-menu li a{ margin-right: 22px; color: #ffffff; font-weight: 600; transition:all 500ms ease; } .page-title .title-text .title-menu li a:hover{ color: #53d572; transition:all 500ms ease; } /*** ==================================================================== Styled Pagination ==================================================================== ***/ .styled-pagination{ position:relative; padding-top: 10px; font-family: 'Open Sans', sans-serif; } .styled-pagination li{ position:relative; display:inline-block; margin-right: 7px; } .styled-pagination li a{ position:relative; display:block; line-height:20px; padding:10px 5px; font-size: 18px; width: 45px; height: 45px; color: #222222; font-weight:400; text-align:center; border-radius: 5px; border: 1px solid #e7e7e7; text-transform:capitalize; font-family: 'Open Sans', sans-serif; transition:all 500ms ease; -webkit-transition:all 500ms ease; -ms-transition:all 500ms ease; -o-transition:all 500ms ease; -moz-transition:all 500ms ease; } .styled-pagination li a.next{ font-size: 18px; } .styled-pagination li a:hover, .styled-pagination li a.active{ color: #fffefe; background: #53d572; border-radius: 5px; transition:all 500ms ease; } /*** ==================================================================== Masonry gallery ==================================================================== ***/ .gallery-section .filters{ position:relative; text-align:center; margin-bottom: 40px; } .gallery-section .filters li{ position: relative; display: inline-block; font-size: 14px; line-height: 22px; color: #343434; font-weight: 400; cursor: pointer; text-transform: uppercase; margin: 0px 16px; font-family: 'Montserrat', sans-serif; transition:all 300ms ease; -webkit-transition:all 300ms ease; -ms-transition:all 300ms ease; -o-transition:all 300ms ease; } .gallery-section .filters li:before{ position: absolute; bottom: -5px; left: 0px; width: 100%; content: ''; border-bottom: 2px solid #ffffff; transition:all 300ms ease; -webkit-transition:all 300ms ease; -ms-transition:all 300ms ease; -o-transition:all 300ms ease; } .gallery-section .filters li:hover, .gallery-section .filters li.active{ color: #53d572; } .gallery-section .filters li:hover:before, .gallery-section .filters li.active:before{ border-bottom: 2px solid #53d572; transition:all 300ms ease; -webkit-transition:all 300ms ease; -ms-transition:all 300ms ease; -o-transition:all 300ms ease; } /*** ==================================================================== Events-section style-two ==================================================================== ***/ .events-section.style-two{ position: relative; } .events-section.style-two .item { background: #ffffff; padding: 20px; border-radius: 5px; margin-bottom: 30px; border: 1px solid #e5e5e5; } .events-section.style-two .item:hover { box-shadow: 2px 2px 20px 3px rgba(0, 0, 0, 0.06); } .events-section.style-two .item .image-box { position: relative; display: table-cell; width: 30%; } .events-section.style-two .item .image-box img{ position: relative; width: 100%; } .events-section.style-two .item .image-content { position: relative; display: table-cell; width: 70%; vertical-align: middle; } .events-section.style-two .item .date-box { position: absolute; right: -34px; top: 0px; width: 150px; height: 240px; background: #ffffff; border-radius: 5px; border: 1px solid #e5e5e5; } .events-section.style-two .item .date-box h5{ position: relative; font-size: 62px; color: #53d572; line-height: 60px; padding: 58px 30px; } .events-section.style-two .item .date-box h5 span{ position: relative; font-size: 16px; text-transform: uppercase; } .events-section.style-two .item .date-box h5 span:before { position: absolute; left: 0px; top: -22px; width: 100%; content: ''; border-top: 1px solid #e5e5e5; } .events-section.style-two .item .content-text h5{ font-size: 24px; font-weight: 400; line-height: 36px; color: #222222; text-transform: uppercase; font-family: 'Montserrat', sans-serif; } .events-section.style-two .item .link-btn{ padding-top: 14px; padding-bottom: 20px; } .events-section.style-two .item .link-btn{ padding-top: 14px; padding-bottom: 20px; } .events-section.style-two .pageination-link{ padding-bottom: 52px; } .events-section.style-two .pageination-link .link-btn i{ margin-right: 8px; } /*** ==================================================================== Couses-section ==================================================================== ***/ .couses-section{ padding-top: 100px; padding-bottom: 70px; position: relative; } .couses-section .image-holder{ border: 1px solid #e5e5e5; border-radius: 5px; margin-bottom: 30px; } .couses-section .image-holder img{ width: 100%; border-radius: 5px 5px 0px 0px; } .couses-section .image-content { padding: 40px 28px; position: relative; } .couses-section .image-content h5{ font-size: 24px; line-height: 30px; color: #222222; padding-top: 35px; font-weight: 400; padding-bottom: 14px; text-transform: uppercase; font-family: 'Montserrat', sans-serif; } .couses-section .image-content p{ font-size: 14px; line-height: 26px; color: #848484; font-weight: 400; font-family: 'Open Sans', sans-serif; } .couses-section .image-content .link-btn{ padding-top: 15px; } .couses-section .image-content .progress-area { position: absolute; top: -45px; padding: 10px 30px; width: 310px; height: 90px; border-radius: 5px; background: #ffffff; box-shadow: 8px 8px 12px 3px rgba(0, 0, 0, 0.06); } .couses-section .image-content .progress-item { padding-top: 7px; } .couses-section .image-content .progress { height: 6px; } .couses-section .image-content .progress-item .progress { background-color: #e7e7e7; border-radius: 8px; margin-bottom: 12px; overflow: visible; } .couses-section .image-content .progress-item .progress-bar { background-color: #53d572; border-radius: 8px; font-size: 12px; height: 6px; line-height: 18px; position: relative; text-align: left; -webkit-transition: all 1s ease 0s; -moz-transition: all 1s ease 0s; -ms-transition: all 1s ease 0s; -o-transition: all 1s ease 0s; transition: all 1s ease 0s; width: 0; } .couses-section .image-content .progress-bar .value-holder .value { display: none; } .couses-section .image-content.progress-white .progress { padding: 2px; } .couses-section .image-content .progress { background-color: #e5e5e5; border-bottom: 1px solid #ddd; box-shadow: none; } .couses-section .image-content .list-inline>li { font-size: 14px; font-weight: 600; line-height: 25px; color: #222222; padding-top: 15px; text-transform: uppercase; font-family: 'Open Sans', sans-serif; } .couses-section .image-content .list-inline>li span { color: #848484; } .couses-section .image-content .list-inline>li.text-thm span { color: #53d572; } /*** ==================================================================== Couses-section style-two ==================================================================== ***/ .couses-section.style-two{ position: relative; } .couses-section.style-two .image-content{ padding: 40px; } .couses-section.style-two .image-content .progress-area { position: absolute; top: -55px; padding-top: 10px; padding-bottom: 100px; width: 90%; border-radius: 5px; background: #ffffff; box-shadow: 8px 8px 12px 3px rgba(0, 0, 0, 0.06); } .couses-section.style-two .image-content .causes-progress { position: relative; width: 60%; } .couses-section .image-content .list-inline>li{ padding-top: 20px; } .couses-section.style-two .image-content .progress-item { padding-top: 11px; } .couses-section.style-two .image-content .link-btn { position: absolute; top: 15px; right: 30px; } .couses-section.style-two .image-content .content-text h5{ padding-top: 50px; padding-bottom: 25px; } .couses-section.style-two .image-content .content-text p{ font-size: 14px; color: #848484; line-height: 26px; font-weight: 400; padding-bottom: 17px; font-family: 'Open Sans', sans-serif; } .couses-section.style-two .image-content .content-list h6{ font-size: 20px; line-height: 30px; font-weight: 400; color: #222222; padding-bottom: 10px; text-transform: uppercase; font-family: 'Montserrat', sans-serif; } .couses-section.style-two .image-content .content-list li{ font-size: 14px; line-height: 32px; font-weight: 400; color: #848484; font-family: 'Open Sans', sans-serif; } .couses-section.style-two .image-content .content-list li i{ margin-right: 5px; } .couses-section.style-two .right-side{ margin-left: 40px; } .couses-section.style-two .right-side .search-box{ position: relative; border: 1px solid #53d572; margin-bottom: 40px; border-radius: 5px; } .couses-section.style-two .right-side .search-box button{ width: 50px; right: 0px; position: absolute; height: 49px; border-radius: 0px 5px 5px 0px; background: #53d572; } .couses-section.style-two .right-side .search-box button i{ position: relative; color: #ffffff; } .couses-section.style-two .right-side .search-box input{ margin-right: 16px; padding: 11px 20px; border-radius: 10px; color: #222222; } .couses-section.style-two .right-side .section-title h5{ font-size: 20px; color: #222222; line-height: 36px; font-weight: 500; margin-bottom: 10px; text-transform: uppercase; font-family: 'Montserrat', sans-serif; } .couses-section.style-two .right-side .categorise-menu li{ position: relative; margin-bottom: 6px; padding-bottom: 10px; border-bottom: 1px solid #e5e5e5; } .couses-section.style-two .right-side .categorise-menu li a{ font-weight: 400; color: #848484; font-size: 14px; line-height: 24px; font-family: 'Open Sans', sans-serif; } .couses-section.style-two .right-side .categorise-menu li a:hover{ color: #53d572; } .couses-section.style-two .right-side .categorise-menu li span{ float: right; } .couses-section.style-two .right-side .categorise-menu{ margin-bottom: 40px; } .couses-section.style-two .right-side .news-list{ padding-top: 10px; margin-bottom: 36px; } .couses-section.style-two .right-side .item{ position: relative; margin-bottom: 15px; border-bottom: 1px solid #e5e5e5; } .couses-section.style-two .right-side .item .image-box{ position: relative; display: table-cell; } .couses-section.style-two .right-side .item .item-content{ position: relative; display: table-cell; padding-left: 16px; top: -6px; vertical-align: middle; } .couses-section.style-two .right-side .item img{ position: relative; border-radius: 5px; } .couses-section.style-two .right-side .item h6{ font-size: 16px; font-weight: 400; line-height: 24px; color: #222222; padding-bottom: 5px; font-family: 'Open Sans', sans-serif; } .couses-section.style-two .right-side .item p{ font-size: 13px; font-weight: 400; line-height: 26px; color: #848484; font-family: 'Open Sans', sans-serif; } .couses-section.style-two .right-side .item p i{ font-size: 13px; margin-right: 8px; } .couses-section.style-two .right-side .tags-list{ list-style: none; padding-top: 5px; } .couses-section.style-two .right-side .tags-list li{ float: left; margin: 4px 7px 5px 0px; } .couses-section.style-two .right-side .tags-list li a{ font-weight: 400; font-size: 14px; color: #848484; line-height: 24px; display: block; font-family: 'Open Sans', sans-serif; padding: 5px 20px; border-radius: 5px; border: 1px solid #e5e5e5; transition:all 500ms ease; -webkit-transition:all 500ms ease; -ms-transition:all 500ms ease; -o-transition:all 500ms ease; -moz-transition:all 500ms ease; } .couses-section.style-two .right-side .tags-list li a:hover{ color: #ffffff; background: #53d572; border: 1px solid #53d572; transition:all 500ms ease; -webkit-transition:all 500ms ease; -ms-transition:all 500ms ease; -o-transition:all 500ms ease; -moz-transition:all 500ms ease; } /*** ==================================================================== Couses-section style-three ==================================================================== ***/ .couses-section.style-three{ position: relative; padding-bottom: 73px; } .couses-section.style-three .image-box{ margin-bottom: 62px; } .couses-section.style-three .image-text{ position: relative; margin: 0px 40px; padding: 30px 40px; border-radius: 5px; background: #ffffff; margin-top: -40px; border: 1px solid #e5e5e5; } .couses-section.style-three .image-text h5{ font-size: 22px; font-weight: 400; color: #222222; line-height: 34px; text-transform: uppercase; font-family: 'Montserrat', sans-serif; } .couses-section.style-three .image-text li{ display: inline-block; font-size: 14px; line-height: 30px; font-weight: 400; color: #848484; padding-bottom: 15px; margin-right: 16px; } .couses-section.style-three .image-text li i{ color: #53d572; margin-right: 7px; } .couses-section.style-three .image-text p{ font-size: 14px; line-height: 26px; font-weight: 400; color: #848484; padding-bottom: 17px; letter-spacing: .1px; font-family: 'Open Sans', sans-serif; } .couses-section.style-three .image-text p:last-child{ padding-bottom: 0px; margin-bottom: 5px; } .couses-section.style-three .image-box .inar-box{ position: relative; } .couses-section.style-three .image-box .inar-box img{ position: relative; width: 100%; } .couses-section.style-three .image-box .date-box{ position: absolute; width: 60px; height: 60px; left: 40px; bottom: 50px; background: #53d572; z-index: 9; border-radius: 5px; } .couses-section.style-three .image-box .date-box h5{ position: relative; font-size: 23px; font-weight: 700; line-height: 20px; color: #ffffff; margin-top: 10px; text-transform: uppercase; font-family: 'Montserrat', sans-serif; } .couses-section.style-three .image-box .date-box h5:before { color: #53d572; content: "\f0d7"; font-family: FontAwesome; font-size: 24px; position: absolute; bottom: -19px; left: 23px; transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; } .couses-section.style-three .image-box .date-box h5 span{ font-size: 14px; font-weight: 400; color: #ffffff; } /*** ==================================================================== Default-form style ==================================================================== ***/ .default-form-area{ padding: 0px; } .default-form-area h5{ font-size: 20px; line-height: 30px; font-weight: 400; color: #222222; padding-bottom: 22px; text-transform: uppercase; font-family: 'Montserrat', sans-serif; } .default-form { position: relative; } .default-form .form-group { position: relative; margin-bottom: 30px; } .default-form input[type="text"], .default-form input[type="email"], .default-form input[type="password"], .default-form input[type="number"], .default-form select, .default-form textarea { display: block; width: 100%; line-height: 26px; height: 45px; font-size: 14px; box-shadow: none; color: #848484; text-transform: capitalize; background: #ffffff; padding: 7px 19px; border: 1px solid #e5e5e5; border-radius: 5px; font-weight: 400; font-family: 'Open Sans', sans-serif; transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; } .default-form input[type="text"]:focus, .default-form input[type="email"]:focus, .default-form input[type="password"]:focus, .default-form input[type="number"]:focus, .default-form select:focus, .default-form textarea:focus { box-shadow: none; color: #53d572; border: 1px solid #53d572; transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; } .default-form textarea{ resize:none; height: 160px; } ::-webkit-input-placeholder { color: #848484; } :-ms-input-placeholder { color: #848484; } ::-moz-placeholder { color: #848484; opacity: 1; } :-moz-placeholder { color: #848484; opacity: 1; } /*** ==================================================================== Events-details style ==================================================================== ***/ .events-details{ position: relative; padding-top: 100px; padding-bottom: 83px; } .events-details .image-box img{ width: 100%; border-radius: 5px; } .events-details .image-text .text-title h5{ font-size: 24px; line-height: 30px; color: #222222; font-weight: 400; padding-top: 42px; margin-left: -2px; text-transform: uppercase; font-family: 'Montserrat', sans-serif; } .events-details .image-text p{ font-size: 14px; line-height: 26px; color: #848484; font-weight: 400; padding-top: 16px; letter-spacing: .8px; font-family: 'Open Sans', sans-serif; } .events-details .row-text{ padding-top: 25px; } .events-details .row-text p{ padding-top: 3px; letter-spacing: .2px; margin-bottom: 23px; } .events-details .content-text{ padding-top: 8px; } .events-details .map-details{ position: relative; margin-left: 40px; } .events-details .google-map-area{ position: relative; border-radius: 5px; border: 1px solid #e5e5e5; } .events-details #contact-google-map { height: 330px; width: 100%; } .events-details .google-map-area .map-content { padding: 25px 25px 20px; } .events-details .google-map-area .map-content li{ font-size: 13px; line-height: 22px; color: #222222; padding-bottom: 7px; font-weight: 400; text-transform: uppercase; font-family: 'Montserrat', sans-serif; } .events-details .google-map-area .map-content li i{ color: #53d572; margin-right: 10px; } .events-details .google-map-area .map-content li i:nth-child(1){ font-size: 13px; } .events-details .google-map-area .map-content li i:nth-child(2){ font-size: 14px; } .events-details .google-map-area .map-content li i:nth-child(3){ font-size: 16px; } .events-details .google-map-area .map-content li span{ color: #848484; font-size: 14px; text-transform: lowercase; font-family: 'Open Sans', sans-serif; } .events-details .link-btn{ padding-top: 30px; display: block; } .events-details .link-btn a{ display: block; text-align: center; } /*** ==================================================================== Profile-details style ==================================================================== ***/ .profile-details{ position: relative; padding-top: 100px; padding-bottom: 92px; } .profile-details .image-box img{ width: 100%; border-radius: 5px; } .profile-details .image-content{ position: relative; margin: 10px 20px; padding-right: 20px; } .profile-details .image-content .section-title h3{ font-size: 36px; line-height: 42px; color: #222222; font-weight: 400; padding-bottom: 5px; text-transform: uppercase; font-family: 'Montserrat', sans-serif; } .profile-details .image-content .section-title span{ font-size: 14px; color: #848484; font-weight: 400; font-family: 'Open Sans', sans-serif; } .profile-details .image-content .section-title p{ font-size: 14px; line-height: 26px; color: #848484; font-weight: 400; padding-top: 25px; font-family: 'Open Sans', sans-serif; } .profile-details .image-content .content-text p{ font-size: 14px; line-height: 26px; color: #848484; font-weight: 400; font-family: 'Open Sans', sans-serif; } .profile-details .image-content .social-links{ position: relative; padding-top: 15px; } .profile-details .image-content .social-links li{ font-size: 14px; line-height: 26px; font-weight: 400; color: #222222; margin-bottom: 6px; text-transform: uppercase; font-family: 'Montserrat', sans-serif; } .profile-details .image-content .social-links li span{ font-size: 14px; line-height: 26px; font-weight: 400; color: #848484; text-transform: lowercase; font-family: 'Open Sans', sans-serif; } .profile-details .image-content .social-links li i{ color: #53d572; margin-right: 12px; } .profile-details .image-content .content-text{ padding-top: 5px; } .profile-details .image-content .content-text p{ font-size: 14px; line-height: 26px; color: #848484; font-weight: 400; padding-top: 16px; font-family: 'Open Sans', sans-serif; } /*** ==================================================================== Contact-section style ==================================================================== ***/ .contact-section{ padding: 100px 0px 90px; position: relative; } .contact-section .contact-list{ position: relative; } .contact-section .contact-list .item{ position: relative; margin-bottom: 10px; border-radius: 5px; height: 150px; border: 1px solid #e5e5e5; } .contact-section .contact-list .item:nth-child(1){ padding: 30px 0px 20px 72px; } .contact-section .contact-list .item:nth-child(2){ padding: 43px 0px 20px 70px; } .contact-section .contact-list .item:nth-child(3){ padding: 43px 0px 20px 70px; } .contact-section .contact-list .item i{ position: absolute; top: 38px; left: 30px; color: #53d572; } .contact-section .contact-list .item:nth-child(1) i{ font-size: 34px; } .contact-section .contact-list .item:nth-child(2) i{ font-size: 24px; top: 45px; } .contact-section .contact-list .item:nth-child(3) i{ font-size: 22px; top: 42px; } .contact-section .contact-list .item h5{ font-size: 20px; line-height: 30px; color: #222222; font-weight: 400; padding-bottom: 5px; text-transform: uppercase; font-family: 'Montserrat', sans-serif; } .contact-section .contact-list .item p{ font-size: 14px; line-height: 26px; color: #848484; font-weight: 400; font-family: 'Open Sans', sans-serif; } .contact-section .contact-area{ margin-left: 22px; } .contact-section .contact-area-left{ margin-right: -16px; } .contact-section .contact-area-right{ margin-left: 16px; } .contact-section .contact-area .section-title{ margin-top: -12px; padding-bottom: 44px; } .contact-section .section-title h3{ font-size: 36px; line-height: 48px; color: #222222; font-weight: 400; text-transform: uppercase; font-family: 'Montserrat', sans-serif; } .contact-section .section-title p{ font-size: 17px; line-height: 30px; color: #848484; font-weight: 400; font-family: 'Open Sans', sans-serif; } .contact-section .default-form textarea{ resize:none; height: 210px; } .contact-section .form-group.top-padd{ padding-top: 32px; } .contact-section .default-form input[type="text"], .contact-section .default-form input[type="email"], .contact-section .default-form input[type="password"], .contact-section .default-form input[type="number"], .contact-section .default-form select { height: 50px; padding: 7px 14px; } /*** ==================================================================== Google map style ==================================================================== ***/ .google-map-area { position: relative; } #contact-google-map { height: 400px; width: 100%; }