/*-----------------------------------------------------------------------------------

    Template Name: Trust - Nonprofit Charity Template 
    Template URI: http://HasTech.com
    Description: This is html5 template
    Author: HasTech
    Author URI: http://HasTech.com
    Version: 1.0

-----------------------------------------------------------------------------------
    
    CSS INDEX
    ===================
	
    1. Template default css (assets/css/bundle.css)
    2. Home page one
    3. Home page two
    4. Home page three
    5. Home page four
    6. About page
    7. Causes page
    8. Event page
    9. Before volunter page
    10. Contact page
    11. Blog sidebar page
    12. Single blog
    
-----------------------------------------------------------------------------------*/
[class^="ti-"], [class*=" ti-"] {
	font-family: 'themify';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.video-icon a {
  background: #ffffff none repeat scroll 0 0;
  border-radius: 50%;
  bottom: 0;
  font-size: 24px;
  height: 50px;
  left: 0;
  line-height: 50px;
  margin: auto;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  width: 50px;
  color: #3ba5f7;
    z-index: 99;
}
.video-icon a:hover {
  background: #3ba5f7 none repeat scroll 0 0;
  color: #fff;
}
a, i, button, img, input, span, *::before, *::after {
  transition: all 0.3s ease 0s;
}
.video-icon a:hover i{
  color: #fff;
}


.ti-control-play:before {
	content: "\e6ad";
}

.transparent-bar.stick {
  background-color: #fff;
  border-bottom: 0 solid #4a90e2;
  box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.04);
  position: fixed;
  top: 0;
    width: 100%;
    z-index: 9999;
    transition: all 0.3s ease 0s;
}
.stick .main-menu.menu-style-2 li a {
  color: #555;
}

.stick .search-bar-button.search-2 > a {
  color: #555;
}

.stick .mobile-menu-style-2 .mean-container a.meanmenu-reveal span {
  background: #333 none repeat scroll 0 0;
}

.stick .mobile-menu-style-2 .mean-container a.meanmenu-reveal {
  color: #333;
}

.search-bar-button > a {
    color: #555555;
    display: inline-block;
    font-size: 15px;
    padding: 32px 0 35px;
}
.search-bar-button.search-2 > a {
    color: #fff;
}
.search-bar-button > a:hover {
    color: #f8b864;
}
.search-bar-button {
    padding-left: 30px;
    position: relative;
}
.widget_searchform_content {
    background: #ffffff none repeat scroll 0 0;
    box-shadow: 0 0 5px rgba(85, 85, 85, 0.2);
    min-width: 300px;
    padding: 15px;
    position: absolute;
    right: 0;
    top: 110%;
    z-index: 999;
    opacity: 0;
    transition: all .3s ease 0s;
}
.search-bar-button:hover .widget_searchform_content {
    opacity: 1;
    top: 100%;
}
.widget_searchform_content > form {
    position: relative;
}
.widget_searchform_content > form input {
    background: transparent none repeat scroll 0 0;
    border: 1px solid #ddd;
    color: #555;
    font-size: 14px;
    height: 35px;
    padding: 0 48px 3px 10px;
    width: 100%;
}
.widget_searchform_content > form button.submit {
    background-color: #f8b864;
    border: 1px solid #f8b864;
    color: #fff;
    height: 35px;
    padding: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: all 0.3s ease 0s;
    width: 45px;
}
.widget_searchform_content > form button.submit:hover {
    background-color: #333;
    border: 1px solid #333;
    color: #fff;
}
.slider-text h2 {
    color: #fff;
    font-size: 30px;
    font-weight: bold;
    margin: 0;
}
.slider-text h1 {
    color: #fff;
    font-size: 60px;
    font-weight: bold;
    margin: 14px 0 19px;
}
.slider-text h2 span,
.slider-text h1 span {
    color: #f8b864;
}
.slider-text p {
    color: #fff;
    font-size: 18px;
    line-height: 30px;
    margin: 0 auto;
    width: 55%;
}
.slider-text > a {
    border-radius: 50px;
    color: #fff;
    font-size: 16px;
    margin-top: 46px;
    padding: 14px 35px;
    text-transform: uppercase;
}
.slider-text > a:hover {
    color: #777;
    background-color: #fff;
}
.slider-text.slider-text-2 p,
.slider-text.slider-text-3 p {
    margin: inherit;
    width: 50%;
}
.slider-area .owl-carousel .owl-nav div {
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    left: 10px;
    opacity: 0;
    position: absolute;
    text-transform: uppercase;
    top: 50%;
    transform: translateY(-50%);
    transition: all 0.3s ease 0s;
    visibility: hidden;
    z-index: 9999;
}
.slider-area .owl-carousel .owl-nav div:hover {
    color: #f8b864;
}
.slider-area .owl-carousel .owl-nav div.owl-next {
    left: auto;
    right: 10px;
}
.slider-area:hover .owl-carousel .owl-nav div {
    opacity: 1;
    visibility: visible;
}
/* Default Slider Animations */

.owl-item .slider-text * {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
.owl-item.active .slider-text * {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}
.owl-item.active .slider-text h2 {
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
}
.owl-item.active .slider-text h1 {
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
}
.owl-item.active .slider-text p {
    -webkit-animation-delay: 0.8s;
    animation-delay: 0.8s;
}
.owl-item.active .slider-text a {
    -webkit-animation-delay: 1.1s;
    animation-delay: 1.1s;
}
/* section title */

.section-title {
    position: relative;
    z-index: 999;
}
.section-title > h2 {
    font-size: 36px;
    font-weight: bold;
    line-height: 1;
    margin: 0;
}
.icon-img {
    display: inline-block;
    margin: 15px 0;
    position: relative;
}
.icon-img::after,
.icon-img::before {
    background-color: #dddddd;
    bottom: 13px;
    content: "";
    height: 1px;
    position: absolute;
    right: 66px;
    width: 130px;
}
.icon-img::before {
    left: 66px;
}
/* services */

.all-single-service {
    margin-top: -100px;
    position: relative;
    z-index: 999;
    box-shadow: 0 0 5px rgba(85, 85, 85, 0.2);
}
.single-service i {
    color: #777;
    font-size: 36px;
}
.single-service h3 {
    color: #555555;
    font-size: 18px;
    margin: 24px 0 16px;
}
.single-service {
    padding: 0 54px;
}
/* causes area */

.single-causes img {
    width: 100%;
}
.causes-info > h3 {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 16px;
}
.causes-meta {
    display: block;
    overflow: hidden;
}
.doller-target > h4 {
    color: #888888;
    font-family: open sans;
    font-size: 13px;
    font-weight: bold;
}
.doller-target > h4 span {
    color: #555555;
}
.causes-info a.button {
    border-radius: 50px;
    font-size: 14px;
    padding: 8px 20px 7px;
    text-transform: capitalize;
}
.causes-info a.button:hover {
    box-shadow: 0 3px 5px rgba(85, 85, 85, 0.25);
}
.causes-info {
    box-shadow: 0 3px 5px rgba(85, 85, 85, 0.2);
    padding: 30px 35px;
}
.causes-meta {
    margin: 21px 0 16px;
}
/* video area */

.video-img > img {
    width: 100%;
}
.video-img {
    position: relative;
}
.another-text {
    text-align: right;
}
.video-info > h3 {
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 10px;
    padding-bottom: 34px;
    position: relative;
}
.video-border > h3:before {
    background-color: #d99c4d;
    bottom: 13px;
    content: "";
    height: 1px;
    position: absolute;
    left: 0px;
    width: 70px;
}
.video-info.another-text > h3:after {
    background-color: #d99c4d;
    bottom: 13px;
    content: "";
    height: 1px;
    position: absolute;
    right: 0px;
    width: 70px;
}
.video-info > p {
    color: #555;
}
.video-img a {
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
}
.video-info {
    padding: 67px 65px 0 30px;
}
.video-info.another-text {
    padding: 67px 30px 0 65px;
}
.video-info a.button {
    padding: 11px 30px 10px;
}
.video-info a.button:hover {
    box-shadow: 0 3px 5px rgba(85, 85, 85, 0.25);
}
.event-img-info img {
    width: 100%;
}
/* funfact area */

.project-count {
    position: relative;
    z-index: 999;
}
h2.counter {
    color: #fff;
    font-size: 72px;
    font-weight: bold;
    margin-bottom: 23px;
}
.project-count > span {
    color: #fff;
    font-size: 18px;
}
/* help area */

.help-services .single-service {
    padding: 0 8px;
}
.help-banner > img {
    width: 100%;
}
.help-services {
    margin-top: 37px;
}
/* blog area */

.blog-img > a > img {
    width: 100%;
}
.blog-img {
    position: relative;
}
.blog-img::before {
    background: #000 none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: all 0.3s ease-in-out 0s;
    width: 100%;
}
.single-blog:hover .blog-img::before {
    opacity: 0.5;
}
.blog-icon a {
    left: 0;
    position: absolute;
    right: 0;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    transition: all 0.3s ease-in-out 0s;
}
.single-blog:hover .blog-icon a {
    opacity: 1;
}
.blog-info > span {
    color: #777;
    font-family: roboto slab;
    font-size: 14px;
}
.blog-info > h3 {
    font-size: 20px;
    font-weight: bold;
    margin: 11px 0 26px;
}
.blog-info > a {
    color: #777777;
    font-family: roboto slab;
    font-size: 16px;
    font-weight: bold;
    position: relative;
    display: inline-block;
}
.blog-info > a:hover {
    color: #d99c4d;
}
.blog-info {
    box-shadow: 0 3px 5px rgba(85, 85, 85, 0.2);
    padding: 26px 25px 24px;
}
.blog-info > a img {
    margin-left: 12px;
}
.b-none {
    content: "";
    opacity: 0;
    position: absolute;
    right: 0px;
    top: 7px;
    transition: all 0.3s ease 0s;
    z-index: 999;
}
.blog-info a:hover .b-none {
    opacity: 1;
}
/* footer area */

.weiget-title {
    color: #fff;
    font-family: open sans;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 31px;
}
.weiget-info > p {
    color: #aaaaaa;
    margin: 0;
}
.footer-social > ul > li {
    display: inline-block;
    margin-bottom: 0 !important;
    margin-right: 12px;
}
.footer-social {
    margin-top: 20px;
}
.footer-social li a {
    font-size: 26px;
    color: #fff;
}
.footer-social li a:hover {
    color: #888888;
}
.weiget-info ul li {
    margin-bottom: 12px;
}
.weiget-info ul li:last-child {
    margin-bottom: 0px;
}
.weiget-info ul li a {
    color: #aaaaaa;
}
.weiget-info ul li a:hover {
    color: #fff;
}
.instra-img {
    display: inline-block;
    margin-bottom: 15px;
    margin-right: 13px;
}
.instra-img {
    position: relative;
}
.instra-icon a {
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    transition: all 0.3s ease-in-out 0s;
}
.instra-img:hover .instra-icon a {
    opacity: 1;
}
.instra-img::before {
    background: #000 none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: all 0.3s ease-in-out 0s;
    width: 100%;
}
.instra-img:hover::before {
    opacity: 0.65;
}
.footer-bottom > p {
    padding: 25px 0;
    color: #fff;
}
.footer-bottom > p a {
    color: #fff;
}
.footer-bottom > p a:hover {
    color: #f8b864;
}
.footer-bottom {
    border-top: 1px solid #666666;
}


/*-------- 3. Home page two -----*/


/* gallery area */
.gallery-img {
    position: relative;
}
.gallery-img::before {
    background: #000 none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: all 0.3s ease-in-out 0s;
    width: 100%;
}
.gallery-icon a {
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    transition: all 0.3s ease-in-out 0s;
}
.gallery-img:hover .gallery-icon a {
    opacity: 1;
}
.gallery-img:hover::before {
    opacity: 0.6;
}
.gallery-img > a > img {
    width: 100%;
}
/* call to action */

.action-text > h3 {
    color: #fff;
    font-family: open sans;
    font-size: 36px;
    font-weight: 600;
    margin: 2px 0 0;
}
.action-button a.button {
    color: #f8b864;
    font-size: 16px;
    padding: 11px 29px;
    border: 1px solid #fff;
}
.action-button a.button:hover {
    color: #fff;
    background-color: transparent;
    border: 1px solid #fff;
}
/* team */

.team-img::before {
    background: #000 none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: all 0.3s ease-in-out 0s;
    width: 100%;
}
.single-team:hover .team-img::before {
    opacity: 0.6;
}
.team-img {
    position: relative;
}
.team-social-icon {
    bottom: 30px;
    left: 0;
    position: absolute;
    right: 0;
    text-align: center;
    opacity: 0;
    transition: all 0.3s ease-in-out 0s;
    z-index: 99;
}
.team-img > img {
    width: 100%;
}
.team-social-icon ul li {
    display: inline-block;
    margin: 0 6px;
}
.team-social-icon ul li a {
    color: #fff;
    font-size: 30px;
}
.team-social-icon ul li a:hover {
    color: #aaaaaa;
}
.single-team:hover .team-social-icon {
    opacity: 1;
}
.team-text > h3 {
    font-size: 16px;
    font-weight: bold;
    margin: 0;
    padding: 15px 10px 17px;
}
.team-text {
    box-shadow: 0 3px 5px rgba(85, 85, 85, 0.2);
}


/*-------- 4. Home page three -----*/


/* about area */
.gallery-area-2 {
    background-position: center center;
    background-size: cover;
}
.about-tab > li {
    display: inline-block;
    position: relative;
    padding-right: 55px;
}
.about-tab > li a {
    color: #555555;
    font-size: 24px;
    font-weight: 600;
}
.about-tab > li::after {
    background-color: #464646;
    content: "";
    font-size: 8px;
    height: 17px;
    margin-left: 11px;
    position: absolute;
    right: 25px;
    top: 10px;
    transform: rotate(33deg);
    width: 3px;
}
.about-tab > li:last-child::after {
    display: none;
}
.about-content-info .single-service {
    padding: 0 7px;
}
.about-tab li.active a {
    color: #f8b864;
}
.about-img > img {
    width: 100%;
}
.about-content-info {
    margin-top: 21px;
}
.gallery-active .gallery-slider-img.slick-center {
    transform: rotate(4deg) scale(1.13) translate(-6%, -3%);
    z-index: -1;
}
.gallery-active .slick-slide {
  outline: medium none;
}
.gallery-active .slick-list {
    padding: 48px 0 46px !important;
}
.slick-dots li button {
    background-color: #aaaaaa;
    border: medium none rgba(0, 0, 0, 0);
    border-radius: 50px;
    height: 15px;
    padding: 0;
    text-indent: -999999px;
    width: 15px;
}
.slick-dots li.slick-active button {
    background-color: #f8b864;
    border: 3px solid #f8b864;
    height: 20px;
    width: 20px;
}
.slick-dots {
    display: block;
    line-height: 7px;
    margin-top: 74px;
    text-align: center;
}
.slick-dots li {
    display: inline-block;
    margin: 0 7px;
}
.slick-slide img {
    display: block;
    margin: 0 206px;
    width: 100%;
}
/* volunteer-area */

.volunteer-text {
    padding: 80px 59px;
    position: relative;
    z-index: 99;
}
.volunteer-text > h2 {
    color: #fff;
    font-size: 36px;
    font-weight: bold;
}
.volunteer-text > p {
    color: #fff;
    font-size: 16px;
    margin: 28px 0 47px;
}
.volunteer-text a.button {
    color: #f8b864;
    font-size: 16px;
    padding: 8px 30px 10px;
}
.volunteer-text a.button:hover {
    box-shadow: 0 3px 5px rgba(85, 85, 85, 0.25);
}
/* testimonial-area */

.testi-img {
    display: inline-block;
    float: left;
    margin-top: -30px;
}
.testi-text > p {
    font-size: 24px;
    font-weight: 600;
    line-height: 36px;
    margin: 0;
}
.testi-text h4 {
    color: #555555;
    font-family: open sans;
    font-size: 18px;
    font-weight: bold;
    margin: 19px 0 2px;
}
.testi-text > span {
    color: #777777;
    font-size: 16px;
}
.testi-text {
    margin-left: 30px;
    padding: 52px 44px 61px 281px;
    box-shadow: 0 3px 5px rgba(85, 85, 85, 0.25);
}
.single-testimonial {
    padding: 30px 3px;
}
.owl-dot {
    background: #aaaaaa none repeat scroll 0 0;
    border-radius: 50px;
    display: inline-block;
    height: 3px;
    margin: 0 4px;
    width: 30px;
}
.owl-dots {
    margin-right: 100px;
    margin-top: -8px;
    text-align: right;
}
.owl-dot.active {
    background: #f8b864 none repeat scroll 0 0;
    height: 5px;
}
/* testimonial-area */

.header-button a.button {
    font-size: 15px;
    padding: 8px 28px 9px;
}
.header-button a.button:hover {
    background-color: #fff;
    color: #f8b864;
}
.header-button.search-2 {
    margin-left: 41px;
    margin-top: 24px;
}


/*-------- 5. Home page four -----*/

.services-border {
    border-bottom: 1px solid #dddddd;
}
.single-volunter {
    position: relative;
}
.volunter-img-icon {
    position: relative;
    overflow: hidden;
}
.volunter-img-icon > img {
    width: 100%;
}
.volunter-social-icon {
    bottom: 0;
    left: 0;
    opacity: 0;
    padding: 18px 0;
    position: absolute;
    right: 0;
    text-align: center;
    transition: all 0.3s ease-in-out 0s;
    z-index: 99;
}
.single-volunter:hover .volunter-social-icon {
    opacity: 1;
}
.overlay::before {
    background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.90) 100%) repeat scroll 0 0;
    bottom: 0;
    content: "";
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: all 0.3s ease 0s;
    transform: translate3d(0px, 50%, 0px);
}
.single-volunter:hover .overlay::before {
    opacity: 1;
    transform: translate3d(0px, 0px, 0px);
}
.volunter-social-icon ul li {
    display: inline-block;
    margin: 0 6px;
}
.volunter-social-icon ul li a {
    color: #fff;
    font-size: 30px;
}
.volunter-social-icon ul li a:hover {
    color: #aaaaaa;
}
.volunter-info > h3 {
    color: #777777;
    font-family: open sans;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 2px;
    text-transform: capitalize;
}
.volunter-info > span {
    color: #777777;
}
.volunter-info {
    box-shadow: 0 3px 5px rgba(85, 85, 85, 0.2);
    padding: 12px 5px;
}
/* upcoming area */

.upcoming {
    display: block;
    overflow: hidden;
}
.upcoming.text-center > div {
    padding-left: 184px;
}
.upcoming .cdown {
    background: rgba(0, 0, 0, 0.3) none repeat scroll 0 0;
    float: left;
    margin-right: 30px;
    padding: 33px 55px 54px;
    text-align: center;
}
.upcoming .cdown:last-child {
    margin-right: 0px;
}
.time-count {
    color: #fff;
    font-family: roboto slab;
    font-size: 60px;
    font-weight: bold;
}
.cdown > p {
    color: #fff;
    font-size: 18px;
}
.section-title.sec-text-white > h2,
.section-title.sec-text-white p.section-2 {
    color: #fff;
}
.upcoming-area {
    background-position: center center;
    background-size: cover;
}
.up-text > h2 {
    color: #fff;
    display: inline-block;
    font-size: 30px;
    margin: 0;
}
.up-text > h2 img {
    margin-left: 20px;
}
.up-text {
    display: inline-block;
    float: left;
    margin-top: 6px;
}
.upcoming-text {
    padding-left: 135px;
    margin-top: 65px;
}
.up-button {
    display: inline-block;
    margin-left: 50px;
}
.up-button a.button {
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    padding: 13px 30px;
}
.up-button a.button:hover {
    color: #f8b864;
    background-color: #fff;
}
/* upcoming area */

.event-img-info {
    position: relative;
}
.event-img-info::before {
    background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 44%, rgba(0, 0, 0, 0.80) 100%) repeat scroll 0 0;
    bottom: 0;
    content: "";
    left: 0;
    opacity: 1;
    position: absolute;
    right: 0;
    top: 0;
}
.event-info {
    bottom: 20px;
    left: 40px;
    position: absolute;
}
.event-img-info > img {
    width: 100%;
}
.event-info > h3 {
    font-size: 18px;
    color: #fff;
    font-weight: bold;
    margin-bottom: 12px;
}
.event-time-date > span {
    font-size: 14px;
    color: #fff;
    font-weight: 600;
    margin-right: 25px;
}
.event-time-date > span i {
    color: #fff;
    font-size: 18px;
    margin-right: 9px;
}
/* breadcrumb area */

.breadcrumb-area {
    background-position: center center;
    background-size: cover;
}
.breadcrumb-text > h2 {
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    margin: 0;
    text-transform: capitalize;
}


/*-------- 6. About page -----*/

.single-grow > h3 {
    font-size: 24px;
    margin-bottom: 15px;
}
.single-grow {
    padding-right: 40px;
}
.grow-img {
    padding-left: 40px;
}
.grow-img > img {
    width: 100%;
}


/*-------- 7. Causes page -----*/

.causes-text > h3 {
    font-size: 36px;
    font-weight: bold;
}
.causes-text > h3 {
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 22px;
}
.causes-text > p {
    color: #555;
    line-height: 30px;
}
.causes-text {
    margin: 43px 0 36px;
}
.causes-text > p.causes-pera {
    margin-bottom: 0;
    margin-top: 16px;
}
.causes-price {
    margin-bottom: 46px;
}
.causes-price > h4 {
    font-family: open sans;
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 19px;
}
.causes-price > h4 span {
    font-size: 18px;
    color: #777777;
}
.causes-img-text > img {
    width: 100%;
}
.progress {
    background-color: #aaaaaa;
    border-radius: 5px;
    box-shadow: none;
    height: 15px;
    margin-bottom: 0;
}
.progress-bar {
    background-color: #f8b864;
    border-radius: 5px;
    box-shadow: none;
}
.share-icon > h4 {
    display: inline-block;
    float: left;
    font-family: open sans;
    font-size: 30px;
    font-weight: 600;
    text-transform: capitalize;
}
.share-icon > ul {
    display: inline-block;
    margin-left: 30px;
}
.share-icon ul li {
    display: inline-block;
    margin-right: 9px;
}
.share-icon ul li:last-child {
    margin-right: 0px;
}
.share-icon ul li a {
    font-size: 30px;
    color: #555;
}
.share-icon {
    display: block;
    margin-bottom: 44px;
    overflow: hidden;
}
.share-icon ul li a:hover {
    color: #999999;
}
.leave-text > h3 {
    font-family: open sans;
    font-size: 30px;
    font-weight: 600;
    margin-bottom: 14px;
}
.leave-text > p {
    color: #555;
}
.leave-form form input {
    background-color: transparent;
    border-color: #dddddd;
    border-style: solid;
    border-width: 0 0 1px;
    color: #aaaaaa;
    display: block;
    font-family: roboto slab;
    font-size: 18px;
    font-weight: normal;
    height: 40px;
    line-height: 29px;
    margin-bottom: 30px;
    padding: 0 30px;
    width: 100%;
}
.form-messege {
    text-align: center;
    margin-top: 10px;
}
.leave-form form textarea {
    background-color: transparent;
    border-color: #dddddd;
    border-style: solid;
    border-width: 0 0 1px;
    color: #aaaaaa;
    display: block;
    font-family: roboto slab;
    font-size: 18px;
    font-weight: normal;
    height: 130px;
    line-height: 29px;
    margin-bottom: 30px;
    padding: 0 30px;
    width: 100%;
}
.leave-form form input::-webkit-input-placeholder {
    /* Chrome */
    
    color: #aaaaaa;
    opacity: 1;
    font-size: 18px;
}
.leave-form form input::-moz-placeholder {
    /* Firefox 19+ */
    
    color: #aaaaaa;
    opacity: 1;
    font-size: 18px;
}
.leave-form form textarea::-webkit-input-placeholder {
    /* Chrome */
    
    color: #aaaaaa;
    opacity: 1;
    font-size: 18px;
}
.leave-form form textarea::-moz-placeholder {
    /* Firefox 19+ */
    
    color: #aaaaaa;
    opacity: 1;
    font-size: 18px;
}
.leave-form form button {
    background-color: #f8b864;
    border: 1px solid #f8b864;
    border-radius: 50px;
    color: #fff;
    display: inline-block;
    font-family: roboto slab;
    font-size: 18px;
    font-weight: bold;
    padding: 8px 28px 7px;
    transition: all .3s ease 0s;
}
.leave-form form button:hover {
    background-color: transparent;
    color: #f8b864;
}
.leave-text {
    margin-bottom: 50px;
}


/*-------- 8. Event page -----*/

#hastech {
    height: 370px;
    width: 100%;
}
.event-left-sidebar > img {
    width: 100%;
}
.event-text > h3 {
    font-size: 30px;
    font-weight: bold;
    margin: 0;
}
.event-text > span {
    color: #777777;
    font-family: "Roboto Slab", serif;
    font-size: 18px;
    margin: 9px 0 20px;
    display: block;
}
.event-text > p {
    line-height: 30px;
}
.event-text {
    margin-top: 45px;
}
.eventpage-info {
    margin-top: 45px;
}
.single-event-info h4 {
    font-family: "Open Sans", sans-serif;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 17px;
}
.single-event-info li {
    color: #777777;
}
.single-event-info li span {
    color: #555555;
}
.single-event-info li a {
    color: #777;
}
.single-event-info li a:hover {
    color: #f8b864;
}
.single-event-info li {
    margin-bottom: 6px;
}
.single-event-info li:last-child {
    margin-bottom: 0px;
}
.single-event-info {
    margin-bottom: 22px;
}


/*-------- 9. Before volunter page -----*/

.join-text > h3 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 20px;
}
.join-text > p {
    line-height: 30px;
    padding-right: 50px;
}
.join-text ul li {
    color: #777;
    margin-bottom: 10px;
}
.join-text ul li img {
    margin-right: 18px;
}
.join-text > ul {
    margin: 16px 0 30px;
}
.join-form form input {
    background: #fff none repeat scroll 0 0;
    border: medium none;
    border-radius: 10px;
    color: #888888;
    font-family: open sans;
    font-size: 16px;
    height: 55px;
    padding: 3px 10px 3px 30px;
}
.join-form form input::-webkit-input-placeholder,
.join-form textarea::-webkit-input-placeholder {
    /* Chrome */
    
    color: #888888;
    opacity: 1;
    font-size: 16px;
}
.join-form form input::-moz-placeholder,
.join-form textarea::-moz-placeholder {
    /* Firefox 19+ */
    
    color: #888888;
    opacity: 1;
    font-size: 16px;
}
.join-form select {
    -moz-appearance: none;
    background: rgb(255, 255, 255) url("../../assets/img/icon-img/select.png") no-repeat scroll right 30px center;
    border: medium none;
    border-radius: 10px;
    color: #888888;
    font-family: open sans;
    font-size: 16px;
    height: 55px;
    padding: 3px 30px;
    position: relative;
}
.join-form textarea {
    background: #fff none repeat scroll 0 0;
    border: medium none;
    border-radius: 10px;
    color: #888888;
    font-family: open sans;
    font-size: 16px;
    height: 115px;
    padding: 16px 30px;
}
.join-form button {
    background-color: #f8b864;
    border: medium none;
    border-radius: 50px;
    color: #fff;
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    margin-top: 35px;
    padding: 10px 32px;
    transition: all .3s ease 0s;
}
.join-form button:hover {
    background-color: #fff;
    color: #f8b864;
}


/*-------- 10. Contact page -------*/

.contact-title > h3 {
    font-size: 24px;
    margin-bottom: 54px;
}
.contact-title-form {
    border-bottom: 1px solid #eeeeee;
    margin-bottom: 44px;
    padding-bottom: 70px;
}
.map-title > h3 {
    font-size: 24px;
    margin-bottom: 71px;
}
.eventpage-info.contactpage-info {
    margin-top: 0;
}
.single-event-info li a {
    color: #777777;
}
.contact-title-form .leave-form form button {
    margin-top: 20px;
}
#hastech2 {
    height: 370px;
    width: 100%;
}
/* page pagintion */

.page-pagintion {
    display: inline-block;
    text-align: center;
}
.page-pagintion li {
    float: left;
    margin: 0 7px;
}
.page-pagintion a {
    border: 1px solid #c1c1c1;
    display: inline-block;
    height: 40px;
    line-height: 40px;
    text-align: center;
    transition: all 0.3s ease 0s;
    width: 40px;
}
.page-pagintion a:hover,
.page-pagintion li.active a {
    background-color: #f8b864;
    border: 1px solid #f8b864;
    color: #fff;
}
/*-------- 11. Blog sidebar page -----*/

h3.blog-sidebar-text {
    border-bottom: 1px solid #ddd;
    color: #505050;
    display: block;
    font-size: 18px;
    margin-bottom: 30px;
    padding-bottom: 10px;
    position: relative;
    text-transform: uppercase;
}
h3.blog-sidebar-text::before {
    background: #f8b864 none repeat scroll 0 0;
    bottom: -2px;
    content: "";
    height: 1px;
    left: 0;
    position: absolute;
    right: 0;
    transition: all 0.4s ease 0s;
    width: 40px;
}
.blog-search input[type="text"] {
    background-color: #fff;
    border: 1px solid #d3d3d3;
    color: #666666;
    height: 40px;
    line-height: 28.8px;
    margin: 0;
    outline: medium none;
    padding: 5px 48px 5px 15px;
    position: relative;
    transition: all 0.4s ease 0s;
    width: 100%;
    border-radius: 0px;
}
.blog-search > form {
    position: relative;
}
.blog-search button.submit {
    background-color: #f8b864;
    border: 1px solid #f8b864;
    height: 40px;
    padding: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: all 0.3s ease 0s;
    width: 45px;
}
.blog-search button.submit i {
    color: #fff;
    font-size: 15px;
    line-height: 40px;
}
.single-site-video {
    display: block;
    margin-bottom: 15px;
    overflow: hidden;
}
.blog-video-img {
    display: inline-block;
    float: left;
}
.blog-video-text {
    padding-left: 110px;
}
.blog-video-text > h3 {
    color: #666666;
    font-size: 16px;
    font-weight: 300;
    line-height: 20px;
    margin-bottom: 5px;
    transition: all 0.3s ease 0s;
}
.blog-video-text > h3 a {
    color: #666666;
}
.blog-video-text > h3 a:hover {
    color: #f8b864;
}
.blog-video-text > span {
    color: #a3a3a3;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}
.blog-right-sidebar-top ul li a {
    border-bottom: 1px solid #f1f1f1;
    display: block;
    font-size: 13px;
    padding: 10px 0;
    text-transform: uppercase;
    color: #6e6e6e;
}
.blog-right-sidebar-top ul li a:hover {
    color: #f8b864;
}
.blog-right-sidebar-top ul li a span {
    float: right;
    transition: all 0.3s ease 0s;
}
.blog-right-sidebar-bottom li {
    display: inline-block;
    margin: 0 14px 8px 0;
}
.blog-right-sidebar-bottom a {
    color: #6e6e6e;
    font-size: 13px;
    text-transform: uppercase;
}
.blog-right-sidebar-bottom a:hover {
    color: #b5b5b5;
}
.blog-search button.submit:hover {
    background-color: #464646;
    border: 1px solid #464646;
}
/*--------- 12. Single blog -------*/

.single-comment > img {
    display: inline-block;
    float: left;
}
.single-blog-text > span {
    color: #555;
    font-size: 15px;
    text-transform: uppercase;
}
.single-blog-text > h2 {
    font-size: 36px;
    font-weight: bold;
    margin: 7px 0 56px;
}
.single-blog-text > img {
    margin-bottom: 45px;
    width: 100%;
}
.single-blog-text > p {
    color: #555;
    font-size: 14px;
    letter-spacing: 0;
    line-height: 30px;
}
.single-blog-text > p.blog-peragraph {
    margin-bottom: 28px;
}
.single-blog-text blockquote {
    background-color: #f7f7f7;
    border-left: medium none;
    color: #939393;
    font-size: 22px;
    letter-spacing: 0;
    line-height: 32px;
    margin: 53px 0;
    padding: 30px 50px 37px;
}
.comment-section {
    margin: 67px 0 71px;
}
h3.comment-text,
h3.leave-comment-text {
    font-family: open sans;
    font-size: 30px;
    font-weight: 600;
    margin-bottom: 42px;
    text-transform: capitalize;
}
.blog-img-details {
    padding-left: 120px;
}
.blog-name > h3 {
    color: #555;
    font-size: 18px;
    font-weight: normal;
    margin-bottom: 3px;
    text-transform: capitalize;
}
.comment-reply > span {
    color: #777;
    font-size: 14px;
}
.comment-reply > a {
    color: #555;
    float: right;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
}
.comment-reply > a:hover {
    color: #f8b864;
}
.comment-reply {
    margin: 0 0 7px;
}
.blog-img-details p {
    color: #7a7a7a;
    letter-spacing: 0;
    line-height: 22px;
}
.single-comment.middle-comment {
    margin: 63px 0 63px 117px;
}
.leave-form input,
.text-leave textarea {
    border-color: #e0e0e0;
    border-radius: 0;
    border-style: solid;
    border-width: 0 0 1px;
    color: #969696;
    display: block;
    font-size: 13px;
    padding: 0 0 2px;
    width: 100%;
}
.leave-form input::-webkit-input-placeholder {
    /* Chrome */
    
    color: #969696;
    opacity: 1;
    font-size: 13px;
}
.leave-form input::-moz-placeholder {
    /* Firefox 19+ */
    
    color: #969696;
    opacity: 1;
    font-size: 13px;
}
.text-leave textarea {
    height: 57px;
}
.text-leave .submit {
    background-color: #252525;
    border: medium none;
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    margin-top: 33px;
    padding: 11px 54px;
    transition: all .3s ease 0s;
}
.text-leave .submit:hover {
    background-color: #4a90e2;
}
/* scrollup */

#scrollUp {

}
#scrollUp:hover {
    background-color: #263238;
}