Файловый менеджер - Редактировать - /home/fenix/domains/fenixsportsassociation.com/public_html/admin/img/style.css.tar
Назад
home/fenix/domains/fenixsportsassociation.com/public_html/css/style.css 0000644 00001401465 14656234347 0022632 0 ustar 00 /* Goodsoul Charity HTML5 Template */ /************ TABLE OF CONTENTS *************** 1. Fonts 2. Reset 3. Global 4. Main Header 5. Hidden Sidebar 6. Banner Section **********************************************/ /*** ==================================================================== Reset ==================================================================== ***/ * { margin: 0px; padding: 0px; border: none; outline: none; font-size: 100%; } :root { --theme-color: #ed6221; --theme-color-two: #ffbf00; --theme-color-three: #d40032; --theme-color-four: #02c06d; --theme-color-five: #18bec2; --dark-color: #302c51; --dark-color-two: #302c51; --rubik: 'Rubik', sans-serif; --prata: 'Prata', serif; --anim-menu-btn-size: 30px; --anim-menu-btn-icon-size: 28px; --anim-menu-btn-icon-stroke: 2px; --fs-search-btn-size: 3em; --fs-search-border-bottom-width: 2px; } /*** ==================================================================== Global Settings ==================================================================== ***/ body { font-size: 15px; line-height: 28px; color: #302c51; font-weight: 400; background: #ffffff; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; font-family: var(--rubik); } a { text-decoration: none; cursor: pointer; color: var(--theme-color); } a:hover, a:focus, a:visited { text-decoration: none; outline: none; } h1, h2, h3, h4, h5, h6 { position: relative; font-weight: normal; margin: 0px; background: none; line-height: 1.2em; font-family: var(--rubik); } textarea { overflow: hidden; } button { outline: none !important; cursor: pointer; } .text { font-size: 15px; line-height: 28px; color: #858585; font-weight: 400; margin: 0; } ::-webkit-input-placeholder { color: inherit; } ::-moz-input-placeholder { color: inherit; } ::-ms-input-placeholder { color: inherit; } .auto-container { position: static; max-width: 1210px; padding: 0px 20px; margin: 0 auto; } .small-container { position: relative; max-width: 1050px; padding: 0px 15px; margin: 0 auto; } .page-wrapper { position: relative; margin: 0 auto; width: 100%; min-width: 300px; z-index: 9; } .owl-carousel .owl-item img { width: auto; } ul, li { list-style: none; padding: 0px; margin: 0px; } .mx-90 { margin: 0 90px; } .mb-30 { margin-bottom: 30px !important; } .mb-40 { margin-bottom: 40px !important; } .mb-50 { margin-bottom: 50px !important; } .mb-60 { margin-bottom: 60px !important; } .mt-20 { margin-top: 20px !important; } .mt-30 { margin-top: 30px !important; } .mt-60 { margin-top: 60px !important; } .pb-60 { padding-bottom: 60px !important; } .bootstrap-select .dropdown-toggle:focus, .bootstrap-select>select.mobile-device:focus+.dropdown-toggle { outline: none !important; outline-offset: 0; } .btn-light:not(:disabled):not(.disabled).active:focus, .btn-light:not(:disabled):not(.disabled):active:focus, .show>.btn-light.dropdown-toggle:focus, .btn-light.focus, .btn-light:focus { -webkit-box-shadow: none; box-shadow: none; } .btn-light:not(:disabled):not(.disabled).active, .btn-light:not(:disabled):not(.disabled):active, .show>.btn-light.dropdown-toggle, .btn-light:hover { color: #212529; background-color: transparent; border-color: transparent; } .bootstrap-select .dropdown-menu li a.active { background: #02c06d; color: #fff; } .bootstrap-select .dropdown-menu li a.active span { color: #fff; } @media only screen and (min-width:1200px) { .pl-lg-50 { padding-left: 50px; } } .theme-btn { display: inline-block; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } /* Btn Style One */ .btn-style-one { position: relative; line-height: 24px; background: none; color: #f0f0f0; font-size: 13px; font-weight: 500; border-radius: 29px; padding: 15px 48px; border:2px solid #f0f0f0; text-transform: uppercase; overflow: hidden; } .btn-style-one:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; opacity: 0.7; background-color: #203061; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; -webkit-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: left top; -ms-transform-origin: left top; transform-origin: left top; } .btn-style-one:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background-color: #29ac45; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; -webkit-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: left top; -ms-transform-origin: left top; transform-origin: left top; } .btn-style-one span { position: relative; z-index: 10; } .btn-style-one:hover:before { -webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); } .btn-style-one:hover:after { -webkit-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s; -webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); } .btn-style-one:hover { color: #ffffff; } /* Btn Style Two */ .btn-style-two { position: relative; line-height: 24px; background: var(--theme-color); color: #fff; font-size: 18px; border-radius: 6px; padding: 15px 20px; text-transform: capitalize; overflow: hidden; -webkit-box-shadow: 0px 20px 20px 0px rgba(237, 98, 33, 0.2); box-shadow: 0px 20px 20px 0px rgba(237, 98, 33, 0.2); width: 100%; } .btn-style-two:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background-color: var(--dark-color); -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: left top; -ms-transform-origin: left top; transform-origin: left top; } .btn-style-two span { position: relative; z-index: 10; } .btn-style-two i { position: relative; margin-right: 10px; z-index: 1; font-size: 14px; } .btn-style-two:hover:before { -webkit-transform: scaleY(1); -ms-transform: scaleX(1); transform: scaleX(1); } .btn-style-two:hover:after { -webkit-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s; -webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); } .btn-style-two:hover { color: #ffffff; } /* Btn Style Three */ .btn-style-three { position: relative; line-height: 24px; background: var(--dark-color); color: #fff; font-size: 18px; border-radius: 6px; padding: 15px 20px; text-transform: capitalize; overflow: hidden; -webkit-box-shadow: 0px 20px 20px 0px rgba(48, 44, 81, 0.2); box-shadow: 0px 20px 20px 0px rgba(48, 44, 81, 0.2); width: 100%; } .btn-style-three:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background-color: var(--theme-color); -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: left top; -ms-transform-origin: left top; transform-origin: left top; } .btn-style-three span { position: relative; z-index: 10; } .btn-style-three i { position: relative; margin-right: 10px; z-index: 1; font-size: 14px; } .btn-style-three:hover::before { -webkit-transform: scaleY(1); -ms-transform: scaleX(1); transform: scaleX(1); } .btn-style-three:hover::after { -webkit-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s; -webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); } .btn-style-three:hover { color: #ffffff; } /* Btn Style Four */ .btn-style-four { position: relative; line-height: 24px; background: var(--theme-color-two); color: var(--dark-color-two); font-size: 13px; font-weight: 500; border-radius: 6px; padding: 8px 35px; text-transform: uppercase; overflow: hidden; } .btn-style-four:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background-color: var(--dark-color); -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; -webkit-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); } .btn-style-four span { position: relative; z-index: 10; } .btn-style-four:hover::before { -webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); } .btn-style-four:hover { color: #ffffff; } /* Btn Style Five */ .btn-style-five { position: relative; line-height: 24px; background: var(--theme-color-two); color: var(--dark-color-two); font-size: 13px; font-weight: 500; border-radius: 6px; padding: 16px 40px; text-transform: uppercase; overflow: hidden; } .btn-style-five:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background-color: var(--dark-color); -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: left top; -ms-transform-origin: left top; transform-origin: left top; } .btn-style-five span { position: relative; z-index: 10; } .btn-style-five:hover::before { -webkit-transform: scaleY(1); -ms-transform: scaleX(1); transform: scaleX(1); } .btn-style-five:hover::after { -webkit-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s; -webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); } .btn-style-five:hover { color: #ffffff; } /* Btn Style Six */ .btn-style-six { position: relative; line-height: 24px; background: none; color: var(--theme-color); font-size: 13px; font-weight: 500; border-radius: 29px; padding: 15px 48px; border: 2px solid var(--theme-color); text-transform: uppercase; overflow: hidden; } .btn-style-six:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; opacity: 0.7; background-color: var(--theme-color); -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; -webkit-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); } .btn-style-six:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background-color: var(--theme-color); -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; -webkit-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); } .btn-style-six span { position: relative; z-index: 10; } .btn-style-six:hover:before { -webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); } .btn-style-six:hover:after { -webkit-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s; -webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); } .btn-style-six:hover { color: #ffffff; } /* Btn Style Seven */ .btn-style-seven { position: relative; line-height: 24px; background: none; color: var(--theme-color-two); font-size: 13px; font-weight: 500; border-radius: 6px; padding: 6px 29px; border: 2px solid var(--theme-color-two); text-transform: uppercase; overflow: hidden; } .btn-style-seven:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; opacity: 0.7; background-color: var(--theme-color-two); -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; -webkit-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: left top; -ms-transform-origin: left top; transform-origin: left top; } .btn-style-seven:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background-color: var(--theme-color-two); -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; -webkit-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: left top; -ms-transform-origin: left top; transform-origin: left top; } .btn-style-seven span { position: relative; z-index: 10; } .btn-style-seven:hover:before { -webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); } .btn-style-seven:hover:after { -webkit-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s; -webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); } .btn-style-seven:hover { color: #ffffff; } /* Btn Style Eight */ .btn-style-eight { position: relative; line-height: 24px; background: none; color: var(--dark-color); font-size: 13px; font-weight: 500; border-radius: 6px; padding: 8px 30px; background: var(--theme-color-two); text-transform: uppercase; overflow: hidden; } .btn-style-eight:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; opacity: 0.7; background-color: var(--theme-color-two); -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; -webkit-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: left top; -ms-transform-origin: left top; transform-origin: left top; } .btn-style-eight:after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; background-color: var(--dark-color); -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; -webkit-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: left top; -ms-transform-origin: left top; transform-origin: left top; } .btn-style-eight span { position: relative; z-index: 10; } .btn-style-eight:hover:before { -webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); } .btn-style-eight:hover:after { -webkit-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s; -webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); } .btn-style-eight:hover { color: #ffffff; } .btn-style-nine { position: relative; background: var(--theme-color-three); color: #fff; font-size: 13px; font-weight: 500; text-transform: uppercase; padding: 31px 30px; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; } .btn-style-nine:hover { color: #fff; background: var(--dark-color); } .btn-style-nine span { margin-right: 8px; } /* Btn Style Ten */ .btn-style-ten { position: relative; line-height: 24px; background: none; color: var(--theme-color-three); font-size: 13px; font-weight: 500; padding: 16px 45px; background: #fff; text-transform: uppercase; overflow: hidden; } .btn-style-ten:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; opacity: 1; background-color: #ee0a3f; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; -webkit-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); } .btn-style-ten:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background-color: var(--theme-color-three); -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; -webkit-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); } .btn-style-ten span { position: relative; z-index: 10; } .btn-style-ten:hover:before { -webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); } .btn-style-ten:hover:after { -webkit-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s; -webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); } .btn-style-ten:hover { color: #ffffff; } /* Btn Style Eleven */ .btn-style-eleven { position: relative; line-height: 24px; background: none; color: #fff; font-size: 13px; font-weight: 500; padding: 16px 45px; background: var(--theme-color-three); text-transform: uppercase; overflow: hidden; } .btn-style-eleven:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; opacity: .5; background-color: var(--theme-color-three); -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; -webkit-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); } .btn-style-eleven:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background-color: #fff; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; -webkit-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); } .btn-style-eleven span { position: relative; z-index: 10; } .btn-style-eleven:hover:before { -webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); } .btn-style-eleven:hover:after { -webkit-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s; -webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); } .btn-style-eleven:hover { color: var(--theme-color-three); } /* Btn Style One */ .btn-style-twelve { position: relative; line-height: 24px; background: none; color: #fff; font-size: 13px; font-weight: 500; padding: 15px 48px; border: 2px solid var(--theme-color-three); text-transform: uppercase; overflow: hidden; } .btn-style-twelve:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; opacity: 0.7; background-color: var(--theme-color-three); -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; -webkit-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: left top; -ms-transform-origin: left top; transform-origin: left top; } .btn-style-twelve:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background-color: var(--theme-color-three); -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; -webkit-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: left top; -ms-transform-origin: left top; transform-origin: left top; } .btn-style-twelve span { position: relative; z-index: 10; } .btn-style-twelve:hover:before { -webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); } .btn-style-twelve:hover:after { -webkit-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s; -webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); } .btn-style-twelve:hover { color: #ffffff; } /* Btn Style thirteen */ .btn-style-thirteen { position: relative; line-height: 24px; color: #fff; font-size: 13px; font-weight: 500; border-radius: 25px; padding: 13px 48px; background: var(--theme-color); text-transform: uppercase; overflow: hidden; } .btn-style-thirteen:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; opacity: 0.7; background-color: var(--theme-color); -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; -webkit-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: left top; -ms-transform-origin: left top; transform-origin: left top; } .btn-style-thirteen:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background-color: #302c51; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; -webkit-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: left top; -ms-transform-origin: left top; transform-origin: left top; } .btn-style-thirteen span { position: relative; z-index: 10; } .btn-style-thirteen:hover:before { -webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); } .btn-style-thirteen:hover:after { -webkit-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s; -webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); } .btn-style-thirteen:hover { color: #ffffff; } /* Btn Style Fourteen */ .btn-style-fourteen { position: relative; line-height: 24px; background: var(--theme-color-four); color: #fff; font-size: 13px; font-weight: 500; border-radius: 6px; padding: 16px 40px; text-transform: uppercase; overflow: hidden; } .btn-style-fourteen:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background-color: var(--dark-color); -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; -webkit-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: left top; -ms-transform-origin: left top; transform-origin: left top; } .btn-style-fourteen span { position: relative; z-index: 10; } .btn-style-fourteen i { margin-right: 5px; } .btn-style-fourteen:hover::before { -webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); } .btn-style-fourteen:hover::after { -webkit-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s; -webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); } .btn-style-fourteen:hover { color: #ffffff; } /* Btn Style Fifteen */ .btn-style-fifteen { position: relative; line-height: 24px; background: #fff; color: var(--dark-color); font-size: 13px; font-weight: 500; border-radius: 6px; padding: 16px 40px; text-transform: uppercase; overflow: hidden; } .btn-style-fifteen:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background-color: var(--dark-color); -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; -webkit-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: left top; -ms-transform-origin: left top; transform-origin: left top; } .btn-style-fifteen span { position: relative; z-index: 10; } .btn-style-fifteen i { margin-right: 5px; } .btn-style-fifteen:hover::before { -webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); } .btn-style-fifteen:hover::after { -webkit-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s; -webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); } .btn-style-fifteen:hover { color: #ffffff; } /* Btn Style Sixteen */ .btn-style-sixteen { position: relative; line-height: 24px; background: none; color: #fff; font-size: 13px; font-weight: 500; border-radius: 29px; padding: 15px 48px; border: 2px solid #fff; text-transform: uppercase; overflow: hidden; } .btn-style-sixteen:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; opacity: 0.7; background-color: var(--theme-color-five); -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; -webkit-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: left top; -ms-transform-origin: left top; transform-origin: left top; } .btn-style-sixteen:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background-color: var(--theme-color-five); -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; -webkit-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: left top; -ms-transform-origin: left top; transform-origin: left top; } .btn-style-sixteen span { position: relative; z-index: 10; } .btn-style-sixteen:hover:before { -webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); } .btn-style-sixteen:hover:after { -webkit-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s; -webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); } .btn-style-sixteen:hover { border-color: var(--theme-color-five); color: #fff; } /* Cursor Style */ .cursor { position: absolute; background-color: #fff; width: 6px; height: 6px; border-radius: 100%; z-index: 1; -webkit-transition: 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity, 0.3s cubic-bezier(0.75, -1.27, 0.3, 2.33) -webkit-transform; transition: 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity, 0.3s cubic-bezier(0.75, -1.27, 0.3, 2.33) -webkit-transform; -o-transition: 0.3s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform, 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity; transition: 0.3s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform, 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity; transition: 0.3s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform, 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity, 0.3s cubic-bezier(0.75, -1.27, 0.3, 2.33) -webkit-transform; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; pointer-events: none; z-index: 10000; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); visibility: hidden; } .cursor { visibility: visible; } .cursor.active { opacity: 0.5; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); } .cursor.hovered { opacity: 0.08; } .cursor-follower { position: absolute; background-color: rgba(255, 255, 255, 0.3); width: 50px; height: 50px; border-radius: 100%; z-index: 1; -webkit-transition: 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity, 0.6s cubic-bezier(0.75, -1.27, 0.3, 2.33) -webkit-transform; transition: 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity, 0.6s cubic-bezier(0.75, -1.27, 0.3, 2.33) -webkit-transform; -o-transition: 0.6s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform, 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity; transition: 0.6s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform, 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity; transition: 0.6s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform, 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity, 0.6s cubic-bezier(0.75, -1.27, 0.3, 2.33) -webkit-transform; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; pointer-events: none; z-index: 10000; visibility: hidden; } .cursor-follower { visibility: visible; } .cursor-follower.active { opacity: 0.7; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .cursor-follower.hovered { opacity: 0.08; } .cursor-follower.close-cursor:before { position: absolute; content: ''; height: 25px; width: 2px; background: #fff; left: 48%; top: 12px; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); display: inline-block; } .cursor-follower.close-cursor:after { position: absolute; content: ''; height: 25px; width: 2px; background: #fff; right: 48%; top: 12px; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } /*=== List Style One ===*/ .list-style-one { position: relative; } .list-style-one li { position: relative; font-size: 16px; color: #919191; line-height: 26px; font-weight: 400; padding-left: 30px; margin-bottom: 15px; } .list-style-one li a { color: #919191; -webkit-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .list-style-one li:before { position: absolute; left: 0; top: 0; font-size: 14px; line-height: 26px; color: #e1e6e3; content: "\f06c"; font-family: "Fontawesome"; } .list-style-one li a:hover { color: var(--theme-color); text-shadow: 0 0 1px var(--theme-color); } /*=== List Style Two ===*/ .list-style-two { position: relative; display: block; margin-bottom: 30px; } .list-style-two li { position: relative; font-size: 14px; line-height: 25px; color: #777777; font-weight: 400; padding-left: 20px; } .list-style-two li:before { position: absolute; left: 0; top: 0; font-size: 14px; line-height: 25px; color: #4ee0b0; font-weight: 400; font-family: "Fontawesome"; content: "\f138"; } /*=== List Style Three ===*/ .list-style-three { position: relative; display: block; margin-bottom: 30px; } .list-style-three li { position: relative; font-size: 14px; line-height: 24px; color: #333333; font-weight: 400; padding-left: 25px; margin-bottom: 10px; } .list-style-three li a { color: #333333; } .list-style-three li:before { position: absolute; left: 0; top: 0; font-size: 14px; line-height: 24px; color: #fe6699; font-weight: 300; font-family: "Fontawesome"; content: "\f18e"; } .theme-color { color: var(--theme-color); } .theme-color-two { color: var(--theme-color-two); } .theme-color-three { color: var(--theme-color-three); } .theme-color-four { color: var(--theme-color-four); } .theme-color-five { color: var(--theme-color-five); } .theme-bg { background-color: var(--theme-color); } .dark-bg { background-color: var(--dark-color); } .preloader { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 999; background-position: center center; background-repeat: no-repeat; background-image: url(../images/icons/preloader.svg); } .preloader.style-two { background-image: url(../images/icons/preloader-2.svg); } .preloader.style-three { background-image: url(../images/icons/preloader-3.svg); } .preloader.style-four { background-image: url(../images/icons/preloader-4.svg); } .preloader.style-five { background-image: url(../images/icons/preloader-5.svg); } .loader-wrap { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 999999; } .loader-wrap .layer-one { position: absolute; left: 0%; top: 0; width: 33.3333%; height: 100%; overflow: hidden; } .loader-wrap .layer-two { position: absolute; left: 33.3333%; top: 0; width: 33.3333%; height: 100%; overflow: hidden; } .loader-wrap .layer-three { position: absolute; left: 66.6666%; top: 0; width: 33.3333%; height: 100%; overflow: hidden; } .loader-wrap .layer .overlay { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #222; } img { display: inline-block; max-width: 100%; height: auto; } /* owl controll */ .owl-dots-none .owl-dots { display: none; } /* style one */ .owl-dot-style-one .owl-dots { position: relative; text-align: center; margin-top: 30px; } .owl-dot-style-one .owl-dots .owl-dot { position: relative; display: inline-block; margin: 0px 5px; } .owl-dot-style-one .owl-dots .owl-dot span { position: relative; display: block; width: 8px; height: 8px; border: 2px solid #dcd9d6; border-radius: 50%; 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; } .owl-dot-style-one .owl-dots .owl-dot.active span, .owl-dot-style-one .owl-dots .owl-dot:hover span { border-color: var(--theme-color); } /* style two */ .owl-dot-style-two .owl-dots { position: relative; text-align: center; line-height: 15px; } .owl-dot-style-two .owl-dots .owl-dot { position: relative; display: inline-block; margin: 0px 5px; } .owl-dot-style-two .owl-dots .owl-dot span { position: relative; display: block; width: 15px; height: 15px; border-radius: 50%; border: 2px solid #e8e8e8; 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; } .owl-dot-style-two .owl-dots .owl-dot span:before { position: absolute; content: ''; background: #e8e8e8; width: 5px; height: 5px; border-radius: 50%; left: 3px; top: 3px; } .owl-dot-style-two .owl-dots .owl-dot.active span, .owl-dot-style-two .owl-dots .owl-dot:hover span { background: var(--theme-color); border-color: var(--theme-color); } /* style three */ .owl-dot-style-three .owl-dots { position: relative; text-align: center; line-height: 15px; } .owl-dot-style-three .owl-dots .owl-dot { position: relative; display: inline-block; margin: 0px 7px; } .owl-dot-style-three .owl-dots .owl-dot span { position: relative; width: 12px; height: 12px; margin: 0px; display: inline-block; border: 2px solid #d7d6d4; transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; } .owl-dot-style-three .owl-dots .owl-dot.active span { border-color: var(--theme-color); width: 36px; } /* owl nav */ .owl-nav-none .owl-nav { display: none; } .owl-nav-style-one .owl-nav { margin: 0px; margin-top: 80px; padding: 0px; text-align: center; } .owl-nav-style-one .owl-nav .owl-next, .owl-nav-style-one .owl-nav .owl-prev { position: relative; border-radius: 50%; color: #fff; font-size: 14px; text-align: center; background-color: #403ab4; -webkit-box-shadow: 0px 11px 21.25px 3.75px rgba(194, 191, 255, 0.65); box-shadow: 0px 11px 21.25px 3.75px rgba(194, 191, 255, 0.65); width: 50px; height: 50px; line-height: 50px; margin: 0 8px; display: inline-block; transition: all 300ms ease; -webkit-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; } .owl-nav-style-one .owl-nav .owl-prev { left: 0px; } .owl-nav-style-one .owl-nav .owl-next { right: 0px; } .owl-nav-style-one .owl-nav .owl-next:hover, .owl-nav-style-one .owl-nav .owl-prev:hover { background-color: var(--theme-color); -webkit-box-shadow: 0px 11px 21.25px 3.75px rgba(167, 238, 227, 0.65); box-shadow: 0px 11px 21.25px 3.75px rgba(167, 238, 227, 0.65); } /* nav style tow */ .owl-nav-style-two .owl-nav { padding: 0px; text-align: center; bottom: 100%; top: inherit; position: absolute; left: inherit; right: 0; } .owl-nav-style-two .owl-nav .owl-next, .owl-nav-style-two .owl-nav .owl-prev { position: relative; width: 60px; height: 60px; margin: 0 5px 30px; display: inline-block; line-height: 60px; text-align: center; font-size: 24px; color: #949494; background: #fff; transition: all 300ms ease; -webkit-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; } .owl-nav-style-two .carousel-outer:hover .owl-nav .owl-next, .owl-nav-style-two .carousel-outer:hover .owl-nav .owl-prev { opacity: 1; visibility: visible; } .owl-nav-style-two .owl-nav .owl-prev { left: 0px; } .owl-nav-style-two .owl-nav .owl-next { right: 0px; } .owl-nav-style-two .owl-nav .owl-next:hover, .owl-nav-style-two .owl-nav .owl-prev:hover { color: var(--theme-color); } /* nav style three */ .owl-nav-style-three .owl-nav { padding: 0px; top: 50%; margin-top: -40px; position: absolute; left: 0; right: 0; z-index: -1; } .owl-nav-style-three .owl-nav .owl-next, .owl-nav-style-three .owl-nav .owl-prev { position: relative; width: 60px; height: 60px; line-height: 56px; background: transparent; text-align: center; font-size: 28px; color: #dcd9d6; transition: all 300ms ease; -webkit-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; border: 2px solid #dcd9d6; border-radius: 50%; } .owl-nav-style-three .carousel-outer:hover .owl-nav .owl-next, .owl-nav-style-three .carousel-outer:hover .owl-nav .owl-prev { opacity: 1; visibility: visible; } .owl-nav-style-three .owl-nav .owl-prev { left: -108px; float: left; } .owl-nav-style-three .owl-nav .owl-next { right: -108px; float: right; } .owl-nav-style-three .owl-nav .owl-next:hover, .owl-nav-style-three .owl-nav .owl-prev:hover { color: var(--theme-color); border-color: var(--theme-color); } /* nav style four */ .owl-nav-style-four .owl-nav { padding: 0px; top: 50%; position: absolute; left: 0; right: 0; } .owl-nav-style-four .owl-nav .owl-next, .owl-nav-style-four .owl-nav .owl-prev { position: relative; width: 50px; height: 50px; line-height: 48px; text-align: center; font-size: 20px; color: #b2b2b2; border-radius: 50%; transition: all 300ms ease; -webkit-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; } .owl-nav-style-four .carousel-outer:hover .owl-nav .owl-next, .owl-nav-style-four .carousel-outer:hover .owl-nav .owl-prev { opacity: 1; visibility: visible; } .owl-nav-style-four .owl-nav .owl-prev { left: 45px; top: 13px; float: left; } .owl-nav-style-four .owl-nav .owl-next { right: 45px; top: 13px; float: right; } .owl-nav-style-four .owl-nav .owl-next:hover, .owl-nav-style-four .owl-nav .owl-prev:hover { color: var(--theme-color); border-color: var(--theme-color); } /* nav style five */ .owl-nav-style-five .owl-nav { margin: 0px; margin-top: 40px; padding: 0px; text-align: center; } .owl-nav-style-five .owl-nav .owl-next, .owl-nav-style-five .owl-nav .owl-prev { position: relative; color: #222; font-size: 14px; text-align: center; line-height: 26px; margin: 0 15px; display: inline-block; transition: all 300ms ease; -webkit-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; } .owl-nav-style-five .owl-nav .owl-prev { left: 0px; } .owl-nav-style-five .owl-nav .owl-next { right: 0px; } .owl-nav-style-five .owl-nav .owl-next:before { position: absolute; content: ''; height: 26px; width: 2px; background: #9cacd8; top: 0; right: 26px; } .owl-nav-style-five .owl-nav .owl-next:hover, .owl-nav-style-five .owl-nav .owl-prev:hover { color: var(--theme-color); } /*** Scroll To Top style ***/ .scroll-to-top { width: 76px; height: 50px; position: absolute; bottom: 38px; right: 0; line-height: 50px; font-size: 16px; z-index: 99; display: none; color: #fff; text-align: center; cursor: pointer; background: var(--theme-color); -webkit-animation: pulse 2s infinite; animation: pulse 2s infinite; -webkit-box-shadow: 0px 11px 21.25px 3.75px rgba(0, 0, 0, 0.06); box-shadow: 0px 11px 21.25px 3.75px rgba(0, 0, 0, 0.06); border-bottom-left-radius: 25px; border-top-left-radius: 25px; } .scroll-to-top span:before {} .scroll-to-top:after { position: absolute; z-index: -1; content: ''; top: 100%; left: 5%; height: 10px; width: 90%; opacity: 1; background: -o-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 80%); background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 80%); } .scroll-to-top.style-two { width: 60px; height: 60px; line-height: 58px; border-radius: 50%; background: transparent; border: 1px solid var(--theme-color-two); color: var(--theme-color-two); font-size: 24px; right: 50px; -webkit-animation: none; animation: none; } .scroll-to-top.style-two span { position: relative; display: inline-block; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); } .scroll-to-top.style-three { width: 60px; height: 60px; line-height: 58px; border-radius: 50%; background: transparent; border: 1px solid var(--theme-color-three); color: var(--theme-color-three); font-size: 24px; right: 50px; -webkit-animation: none; animation: none; } .scroll-to-top.style-three span { position: relative; display: inline-block; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); } .scroll-to-top.style-four { width: 50px; height: 50px; line-height: 50px; border-radius: 5px; background: var(--theme-color-four); border: transparent; color: #fff; font-size: 24px; right: 50px; -webkit-animation: none; animation: none; } .scroll-to-top.style-four span { position: relative; display: inline-block; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); } .scroll-to-top.style-five { width: 50px; height: 50px; line-height: 50px; border-radius: 5px; background: #02c06d; border: transparent; color: #fff; font-size: 24px; right: 50px; -webkit-animation: none; animation: none; } .scroll-to-top.style-five span { position: relative; display: inline-block; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); } /*** ==================================================================== Main Header ==================================================================== ***/ .main-header { position: relative; left: 0; top: 0; width: 100%; z-index: 999; background: #fff; } .top-bar { position: relative; padding:6px 0; z-index: 999; } .top-bar .wrapper-box { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .top-bar .left-content { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .top-bar .right-content { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .top-bar .language-switcher { position: relative; } .top-bar .language-switcher:before { position: absolute; content: ''; background: #ff8e59; height: 20px; width: 1px; top: 4px; right: 17px; } .top-bar .language-switcher .ui-selectmenu-button.ui-button { min-width: auto; border: 0px; padding: 11.5px 0; padding-right: 35px; } .top-bar .language-switcher .ui-selectmenu-text:after { color: #fff; font-size: 15px; right: -16px; } .top-bar .text { position: relative; color: #fff; } .top-bar .text a { color: #fff; } .contact-info { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .contact-info li { margin-right: 20px; padding-right: 20px; border-right: 1px solid #f2f2f282; } .contact-info li span { color: #ececec; margin-right: 8px; position: relative; top: 2px; } .contact-info li a { color: #ececec; } /* Social Icon One */ .social-icon-one { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .social-icon-one li+li { margin-left: 10px; } .social-icon-one li a { position: relative; color: var(--dark-color); background: #fff; height: 22px; line-height: 23px; width: 22px; text-align: center; font-size: 13px; display: inline-block; border-radius: 50%; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; } .social-icon-one li a:hover { color: var(--theme-color); background: #fff; } /* Social Icon Two */ .social-icon-two { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .social-icon-two li+li { margin-left: 10px; border-left: 1px solid #ededed; padding-left: 10px; } .social-icon-two li a { position: relative; color: #7c7e84; background: #fff; height: 22px; line-height: 23px; width: 22px; text-align: center; font-size: 13px; display: inline-block; border-radius: 50%; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; } .social-icon-two li a:hover { color: var(--theme-color); background: #fff; } /* Social Icon Three */ .social-icon-three { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .social-icon-three li+li { margin-left: 10px; } .social-icon-three li a { position: relative; color: #9b99ad; border: 1px solid #423f5f; height: 52px; line-height: 53px; width: 52px; text-align: center; font-size: 15px; display: inline-block; border-radius: 50%; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; } .social-icon-three li a:hover { background: var(--theme-color); color: #fff; border-color: var(--theme-color); } .top-bar .location-area .bootstrap-select { width: 180px !important; } .top-bar .right-content .location-area .text { color: #868686; } .top-bar .right-content .location-area .active .text { color: #fff; } .top-bar .location-area button { position: relative; background: #ffffff; border-color: #ffffff; border-radius: 4px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; color: var(--dark-color); text-transform: uppercase; font-size: 13px; font-weight: 500; padding: 10px 10px; padding-left: 50px; top: 4px; } .top-bar .location-area .dropdown-toggle .filter-option:after { position: absolute; content: '\f107'; font-size: 17px; font-family: FontAwesome; color: #302c51; right: 15px; top: 6px; } .top-bar .location-area .dropdown-toggle .filter-option:before { position: absolute; content: "\f127"; font-size: 30px; font-family: Flaticon; color: #02c06d; left: 9px; top: -2px; } .top-bar .btn-light:not(:disabled):not(.disabled).active, .top-bar .btn-light:not(:disabled):not(.disabled):active, .top-bar .show>.btn-light.dropdown-toggle, .top-bar .btn-light:hover { background: #ffffff; border-color: #ffffff; color: var(--dark-color); outline: none; } /*=== Header Upper ===*/ .main-header .header-upper { position: relative; z-index: 99; background: linear-gradient(to right, rgba(255, 255, 255, 0.92) 20%, #7d7d7de0 40%) !important; } .main-header .header-upper .wrapper-box { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .main-header .header-upper .logo-box { position: relative; } .main-header .logo { position: relative; text-align: center; } .main-header .logo img { position: relative; display: inline-block; max-width: 100%; } .main-header .logo img { position: relative; display: inline-block; max-width: 100%; } /*=== Header Lower ===*/ .main-header .nav-outer { position: relative; padding: 0; min-height: 70px; margin: 0; } .main-header .header-upper .nav-outer:before { position: absolute; content: ''; width: 1px; height: 50px; background: #eaeaea; right: 0; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .nav-outer .mobile-nav-toggler { position: relative; font-size: 30px; line-height: 40px; cursor: pointer; color: #fff; padding: 25px 30px; right: 0; background-color: #1c1f26; } .main-header .nav-outer .nav-inner { position: relative; } .main-header .nav-outer .nav-inner.close-menu { pointer-events: none; } .main-header .main-box { position: relative; float: left; left: 0px; top: 0px; -webkit-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .main-menu { position: relative; } .main-menu .navbar-collapse { padding: 0px; } .main-menu .navigation { position: relative; margin: 0px; } .main-menu .navigation>li { position: relative; float: left; padding: 25px 0px; margin-right: 30px; -webkit-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .main-menu .navigation>li:hover::before { position: absolute; content: ''; background:#203061; left: 50%; bottom: 30px; width: 20px; height: 2px; margin-left: -10px; } .main-menu .navigation>li:hover::after { position: absolute; content: ''; background:#203061; left: 50%; bottom: 26px; width: 40px; height: 2px; margin-left: -20px; } .sticky-header .main-menu .navigation>li:hover::after, .sticky-header .main-menu .navigation>li:hover::before { -webkit-transform: translateY(9px); -ms-transform: translateY(9px); transform: translateY(9px); } .main-menu .navigation>li>a { position: relative; text-transform: uppercase; display: block; text-align: center; padding: 10px 0px; font-size: 16px; line-height: 20px; font-weight: 400; color: #fff; -webkit-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .main-menu .navigation>li:hover>a, .main-menu .navigation>li.current>a { color: #e8e8e8; } .main-menu .navigation>li>ul { position: absolute; left: 0px; top: 110%; width: 250px; z-index: 100; opacity: 1; padding: 20px 0 20px; background: #ffffffe5; border-top: 1px solid #fff; -webkit-transition: all 200ms linear; -o-transition: all 200ms linear; transition: all 200ms linear; -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.05); box-shadow: 0 0 20px rgba(0, 0, 0, 0.05); border-radius: 4px; } .main-menu .navigation>li>ul>li { position: relative; width: 100%; padding: 0 30px; } .main-menu .navigation>li>ul>li>a { position: relative; display: block; padding: 10px 0px; line-height: 19px; font-weight: 400; font-size: 15px; text-align: left; text-transform:uppercase !important; color: #131212; text-transform: capitalize; -webkit-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .main-menu .navigation>li>ul>li:hover>a { color: #203061; font-weight: 500; padding-left: 22px; } .main-menu .navigation>li>ul>li>ul>li>a:before, .main-menu .navigation>li>ul>li>a:before { display:none; position: absolute; content: "\f122"; font-size: 13px; font-family: Flaticon; color: var(--theme-color); left: 0; top: 10px; opacity: 0; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; } .main-menu .navigation>li>ul>li>ul>li>a:hover:before, .main-menu .navigation>li>ul>li>a:hover:before { opacity: 1; } .main-menu .navigation>li>ul>li.dropdown>a:after { font-family: 'FontAwesome'; content: "\f105"; position: absolute; right: 0px; top: 9px; width: 10px; display: block; line-height: 19px; font-size: 16px; color: #ffffff; font-weight: normal; text-align: center; z-index: 5; } .main-menu .navigation>li>ul>li>ul { position: absolute; left: 110%; top: 0; width: 258px; z-index: 100; opacity: 1; padding: 20px 0 30px; background: #fff; border-top: 1px solid #fff; -webkit-transition: all 200ms linear; -o-transition: all 200ms linear; transition: all 200ms linear; -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.05); box-shadow: 0 0 20px rgba(0, 0, 0, 0.05); border-radius: 4px; } .main-menu .navigation>li>ul>li>ul>li { position: relative; width: 100%; padding: 0 30px; } .main-menu .navigation>li>ul>li>ul>li>a { position: relative; display: block; padding: 10px 0px; line-height: 19px; font-weight: 400; font-size: 15px; text-align: left; color: #858585; text-transform: capitalize; -webkit-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .main-menu .navigation>li>ul>li>ul>li>a:hover { color: var(--theme-color); font-weight: 500; padding-left: 22px; } .main-menu .navigation>li>ul>li>ul>li:last-child>a { border-bottom: 0; } .main-menu .navigation>li.dropdown:hover>ul { -webkit-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; visibility: visible; opacity: 1; top: 100%; margin-top: 5px; } .main-menu .navigation>li>ul>li:hover>ul { visibility: visible; opacity: 1; left: 100%; margin-left: 5px; 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.dropdown>ul.from-right { left: auto; right: 110%; } .main-menu .navigation>li>ul>li.dropdown:hover>ul.from-right { left: auto; right: 100%; } .main-menu .navbar-collapse>ul li.dropdown .dropdown-btn { position: absolute; right: 10px; top: 8px; width: 35px; height: 35px; text-align: center; font-size: 20px; line-height: 35px; color: #000000; cursor: pointer; z-index: 5; display: none; -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.03); box-shadow: 0 0 20px rgba(0, 0, 0, 0.03); background: #fff; } /*** ==================================================================== Mobile Menu ==================================================================== ***/ .mobile-menu { position: relative; right: 0; bottom: 0; max-width: 100%; z-index: 9999; } .mobile-menu .logo { text-align: left; padding-left: 10px; } .mobile-menu .menu-box { position: relative; width: 100%; max-height: 100%; background: #ffffff; padding: 11px 6px; } .mobile-menu .navigation { position: relative; width: 100%; list-style: none; padding: 0 10px; padding-top: 20px; } .mobile-menu .main-menu .navigation li { position: relative; display: block; float: none; text-align: left; padding: 0; margin-right: 0px; } .mobile-menu .main-menu .navigation>li:hover::before { display: none; } .mobile-menu .main-menu .navigation>li:hover::after { display: none; } .mobile-menu .navigation li>a:before { display: none; } .mobile-menu .main-menu .navigation>li>ul>li:hover>a { padding-left: 0; font-weight: 400; } .mobile-menu .main-menu .navigation>li.dropdown:hover>ul { margin: 0; } .mobile-menu .navigation li>ul>li:last-child { border-bottom: none; } .mobile-menu .navigation li>ul>li:first-child { border-top: 1px solid rgba(0, 0, 0, 0); } .mobile-menu .navigation li>a { position: relative; display: block; line-height: 24px; padding: 8px 50px; padding-left: 0; font-size: 14px; color: #858585; text-transform: uppercase; font-weight: 500; text-align: left; } .mobile-menu .navigation li>a:before { position: absolute; content: ''; background: #2f333b; height: 6px; width: 6px; left: 30px; top: 23px; } .mobile-menu .navigation li.dropdown .dropdown-btn { position: absolute; right: 15px; top: 0px; width: 44px; height: 44px; text-align: center; font-size: 16px; line-height: 44px; color: #6a6d73; cursor: pointer; z-index: 5; display: block !important; } .mobile-menu .navigation li.dropdown .dropdown-btn:after { content: ''; position: absolute; left: 0px; top: 1px; width: 1px; height: 24px; } .mobile-menu .navigation li>ul, .mobile-menu .navigation li>ul>li>ul { display: none; position: relative; width: 100%; -webkit-transition: 0s !important; -o-transition: 0s !important; transition: 0s !important; left: 0; padding-left: 20px; } .mobile-menu .main-menu .navigation>li>ul>li:hover>ul { left: 0; margin-left: 0; } .mobile-menu .main-menu .navigation>li>ul>li>ul>li>a:hover { font-weight: 400; padding-left: 0px; } .navbar-toggle { position: absolute; right: 10px; top: -49px; background: transparent; font-size: 33px; z-index: 9; color: #000; font-weight: 700; } .mobile-menu .main-menu .navbar-collapse { padding: 0px; max-height: 300px; overflow-x: hidden; } .nav-overlay { position: fixed; top: 0; left: 0; bottom: 0; z-index: 99999; width: 100%; display: none; background: rgba(20, 20, 20, 0.70); overflow: hidden; -webkit-transform: translate3d(0, 0, 0); cursor: none; } .main-header .mobile-menu .search-box-outer { position: absolute; right: 85px; top: 13px; left: auto; } /* ========= Menu Bar Style =========== */ /* -------------------------------- Title: Animated Menu Button Descr: A menu button w/ a morphing icon -------------------------------- */ .navbar-btn-wrap { position: relative; text-align: center; } .anim-menu-btn { width: var(--anim-menu-btn-size); height: var(--anim-menu-btn-size); background: transparent; color: var(--dark-color); position: relative; } .anim-menu-btn:before { position: absolute; content: 'MENU'; font-size: 12px; font-weight: 600; color: #fff; top: 8px; left: -60px; letter-spacing: 5px; display: none; } .anim-menu-btn__icon { position: relative; display: block; font-size: var(--anim-menu-btn-icon-size); width: 1em; height: var(--anim-menu-btn-icon-stroke); color: var(--color-contrast-high); background-image: -o-linear-gradient(currentColor, currentColor); background-image: -webkit-gradient(linear, left top, left bottom, from(currentColor), to(currentColor)); background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .anim-menu-btn__icon::before, .anim-menu-btn__icon::after { content: ''; position: absolute; top: 0; left: 0px; height: 100%; width: 100%; background-image: inherit; border-radius: inherit; } .anim-menu-btn__icon--close { background-size: 100% 100%; will-change: transform, background-size; -webkit-transition: background-size 0.2s, -webkit-transform 0.2s; transition: background-size 0.2s, -webkit-transform 0.2s; -o-transition: transform 0.2s, background-size 0.2s; transition: transform 0.2s, background-size 0.2s; transition: transform 0.2s, background-size 0.2s, -webkit-transform 0.2s; } .anim-menu-btn:active .anim-menu-btn__icon--close { -webkit-transform: scale(0.9); -ms-transform: scale(0.9); transform: scale(0.9); } .anim-menu-btn__icon--close::before, .anim-menu-btn__icon--close::after { will-change: inherit; -webkit-transition: inherit; -o-transition: inherit; transition: inherit; } .anim-menu-btn__icon--close::before { -webkit-transform: translateY(-0.25em) rotate(0); -ms-transform: translateY(-0.25em) rotate(0); transform: translateY(-0.25em) rotate(0); } .anim-menu-btn__icon--close::after { -webkit-transform: translateY(0.25em) rotate(0); -ms-transform: translateY(0.25em) rotate(0); transform: translateY(0.25em) rotate(0); } .anim-menu-btn--state-b .anim-menu-btn__icon--close { background-size: 0% 100%; } .anim-menu-btn--state-b .anim-menu-btn__icon--close::before { -webkit-transform: translateY(0) rotate(45deg); -ms-transform: translateY(0) rotate(45deg); transform: translateY(0) rotate(45deg); } .anim-menu-btn--state-b .anim-menu-btn__icon--close::after { -webkit-transform: translateY(0) rotate(-45deg); -ms-transform: translateY(0) rotate(-45deg); transform: translateY(0) rotate(-45deg); } .main-header .header-column { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; } /* ====================== search box btn ===========================*/ .main-header .search-box-outer { position: relative; left: 3px; display: inline-block; padding: 6px 0; vertical-align: middle; } .main-header .search-box-btn { position: relative; font-size: 18px; line-height: 28px; color: #222; cursor: pointer; display: inline-block; padding: 7px 0px 6px; background: transparent; border-radius: 50px 0px 0px 50px; } .main-header .dropdown-toggle::after { display: none; } .main-header .header-upper.dark .search-box-btn { color: #fff; } .main-header .search-box-outer .dropdown-menu { top: 63px !important; padding: 0px; width: 330px; border-radius: 0px; background: #ffffff; right: 0; left: auto !important; -webkit-transform: translate3d(0px, 0px, 0px) scale3d(0.8, 0.8, 0.8) !important; transform: translate3d(0px, 0px, 0px) scale3d(0.8, 0.8, 0.8) !important; border-color: transparent; border-radius: 3px; -webkit-box-shadow: 7px 5px 30px 0 rgba(72, 73, 121, 0.15); box-shadow: 7px 5px 30px 0 rgba(72, 73, 121, 0.15); -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; display: block; opacity: 0; visibility: hidden; } .main-header .header-bottom .search-box-outer .dropdown-menu { top: 48px !important; } .main-header .search-box-outer .show .dropdown-menu { display: block; -webkit-transform: scale3d(1, 1, 1)!important; transform: scale3d(1, 1, 1)!important; opacity: 1; visibility: visible; } .main-header .search-panel .form-container { padding: 30px; } .main-header .search-panel .form-group { position: relative; margin: 0px; } .main-header .search-panel input[type="text"], .main-header .search-panel input[type="search"], .main-header .search-panel input[type="password"], .main-header .search-panel select { display: block; width: 100%; line-height: 24px; padding: 9px 50px 9px 15px; height: 50px; border: 1px solid #f3f5fe; border-radius: 3px; background: #f3f5fe; } .main-header .search-panel input:focus, .main-header .search-panel select:focus { border-color: #f3f5fe; } .main-header .search-panel .search-btn { position: absolute; right: 1px; top: 1px; width: 50px; height: 48px; text-align: center; color: #111111; background: #f3f5fe; font-size: 14px; border-radius: 0px 3px 3px 0px; cursor: pointer; } /*================================================ Sticky Header ==================================================*/ .sticky-header { position: fixed; visibility: hidden; opacity: 0; left: 0px; top: 0px; width: 100%; padding: 0px 0px; z-index: 0; background: linear-gradient(to right, rgba(255, 255, 255, 0.92) 20%, #7d7d7de0 40%) !important; box-shadow: 0px 0px 10px 0px #00000052; -webkit-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .sticky-header .wrapper-box { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .sticky-header .logo { padding: 10px 0px; } .fixed-header .sticky-header { z-index: 99999; opacity: 1; visibility: visible; } .main-header .sticky-header .main-menu .navigation>li { margin-right: 0px; margin: 0px; padding: 0; } .main-header .sticky-header .main-menu .navigation>li>a { padding: 20px 15px; line-height: 30px; min-height: 0px; background: none; border: 0px; margin-right: 0px; text-transform: uppercase; -webkit-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .main-header .sticky-header .main-menu .navigation>li:hover>a, .main-header .sticky-header .main-menu .navigation>li.current>a, .main-header .sticky-header .main-menu .navigation>li.current-menu-item>a { opacity: 1; color: var(--theme-color); } /* Option Panel */ .main-header .header-upper .option-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; } .main-header .header-upper .option-wrapper>div { margin-left: 25px; } .main-header .header-upper .link-btn .btn-style-one { position: relative; padding: 6px 35px; border-radius: 20px; } .main-header .cart-btn .cart-icon { position: relative; color: var(--dark-color); font-size: 21px; margin-right: 10px; } .main-header .cart-btn .item-count { position: absolute; right: -13px; top: -4px; height: 20px; width: 20px; line-height: 20px; text-align: center; border-radius: 50%; font-size: 12px; color: #fff; background: var(--theme-color); } .main-header .navbar-btn-wrap button { font-size: 30px; } .make-payment { position: absolute; right: 0; top: 100%; padding: 15px 20px; background: #d40032; } .make-payment form { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-wrap: wrap; flex-wrap: wrap; } .make-payment .left-content { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; background: #fff; border-radius: 4px; margin-right: 10px; } .make-payment button { position: relative; font-size: 13px; font-weight: 500; background: #fff; color: var(--theme-color-three); padding: 1px 23px; text-transform: uppercase; border-radius: 4px; } .make-payment .ui-selectmenu-button.ui-button { border: 0px; padding: 6px 10px; } .make-payment .ui-selectmenu-text { color: #1e1e1e; font-size: 15px; font-weight: 500; font-family: var(--rubik); } .make-payment .ui-selectmenu-text:after { font-size: 14px; top: 2px; right: -11px; } /* Main Header Style Two */ .main-header.style-two { position: absolute; background: transparent; } .main-header .header-upper.style-two { background: transparent; } .top-bar.style-two { border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .top-bar.style-two .contact-info li { border-color: rgba(255, 255, 255, 0.12); } .top-bar.style-two .language-switcher:before { opacity: 0; } .top-bar.style-two .languages { padding-right: 0; } .top-bar.style-two .languages:after { right: 0; } .main-header .header-upper.style-two .nav-outer:before { width: 2px; background: rgba(255, 255, 255, 0.3); } .header-upper.style-two .main-menu .navigation>li>a { color: #fff; } .mobile-menu.style-two .main-menu .navigation>li>ul>li>ul>li>a:hover, .mobile-menu.style-two .main-menu .navigation>li>ul>li:hover>a, .mobile-menu.style-two .main-menu .navigation>li:hover>a, .mobile-menu.style-two .main-menu .navigation>li.current>a, .sticky-header.style-two .main-menu .navigation>li:hover>a, .sticky-header.style-two .main-menu .navigation>li.current>a, .header-upper.style-two .main-menu .navigation>li:hover>a, .header-upper.style-two .main-menu .navigation>li.current>a, .sticky-header.style-two .main-menu .navigation>li>ul>li:hover>a, .header-upper.style-two .main-menu .navigation>li>ul>li:hover>a, .sticky-header.style-two .main-menu .navigation>li>ul>li>ul>li>a:before, .sticky-header.style-two .main-menu .navigation>li>ul>li>a:before, .header-upper.style-two .main-menu .navigation>li>ul>li>ul>li>a:before, .header-upper.style-two .main-menu .navigation>li>ul>li>a:before, .header-upper.style-two .main-menu .navigation>li>ul>li>ul>li>a:hover, .header-upper.style-two .main-menu .navigation>li>ul>li>ul>li>a:hover { color: var(--theme-color-two); } .sticky-header.style-two .main-menu .navigation>li:hover::before, .header-upper.style-two .main-menu .navigation>li:hover::before, .sticky-header.style-two .main-menu .navigation>li:hover::after, .header-upper.style-two .main-menu .navigation>li:hover::after { background: var(--theme-color-two); } /********** .sticky-header.style-two .main-menu .navigation>li.current:before, .header-upper.style-two .main-menu .navigation>li.current:before, .sticky-header.style-two .main-menu .navigation>li.current:after, .header-upper.style-two .main-menu .navigation>li.current:after { background: var(--theme-color-two); }*********/ .main-header .header-upper.style-two .search-box-btn { color: #f2f2f2; } .main-header .header-upper.style-two .cart-btn .cart-icon { color: #f2f2f2; } .main-header .header-upper.style-two .cart-btn .item-count { background: var(--theme-color-two); } .header-upper.style-two .anim-menu-btn { color: #f2f2f2; } /* Main Header Style Three */ .top-bar.style-three { background: #1b1b1b; } .top-bar.style-three .contact-info li { margin-right: 0; padding-right: 0; border-right: 0; margin-left: 20px; padding-left: 20px; border-left: 1px solid rgba(255, 255, 255, 0.12); } .top-bar.style-three .language-switcher:before { opacity: 0; } .top-bar.style-three .languages { padding-right: 0; } .top-bar.style-three .languages:after { right: 0; } .top-bar.style-three .social-icon-one li a { background: transparent; color: #fff; font-size: 14px; } .top-bar.style-three .social-icon-one li a:hover { color: var(--theme-color-three); } .top-bar .login-info { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .top-bar .login-info li { margin-right: 20px; padding-right: 20px; border-right: 1px solid rgba(255, 255, 255, 0.12); } .top-bar .login-info li span { color: #fff; margin-right: 8px; position: relative; top: 2px; } .top-bar .login-info li a { color: #fff; } .main-header .header-upper.style-three { margin-bottom: -45px; background: transparent; } .main-header.style-three { background: transparent; } .main-header .header-upper.style-three .wrapper-box { position: relative; } .main-header .header-upper.style-three .wrapper-box:before { position: absolute; content: ''; background: #fff; right: 0; top: 0; height: 100%; width: 500%; } .main-header .header-upper.style-three:before { position: absolute; content: ''; background: #1b1b1b; right: 0; top: 0; height: 50%; width: 500%; border-bottom: 3px solid #fff; } .mobile-menu.style-three .main-menu .navigation>li>ul>li>ul>li>a:hover, .mobile-menu.style-three .main-menu .navigation>li>ul>li:hover>a, .mobile-menu.style-three .main-menu .navigation>li:hover>a, .mobile-menu.style-three .main-menu .navigation>li.current>a, .sticky-header.style-three .main-menu .navigation>li:hover>a, .sticky-header.style-three .main-menu .navigation>li.current>a, .header-upper.style-three .main-menu .navigation>li:hover>a, .header-upper.style-three .main-menu .navigation>li.current>a, .sticky-header.style-three .main-menu .navigation>li>ul>li:hover>a, .header-upper.style-three .main-menu .navigation>li>ul>li:hover>a, .sticky-header.style-three .main-menu .navigation>li>ul>li>ul>li>a:before, .sticky-header.style-three .main-menu .navigation>li>ul>li>a:before, .header-upper.style-three .main-menu .navigation>li>ul>li>ul>li>a:before, .header-upper.style-three .main-menu .navigation>li>ul>li>a:before, .header-upper.style-three .main-menu .navigation>li>ul>li>ul>li>a:hover, .header-upper.style-three .main-menu .navigation>li>ul>li>ul>li>a:hover { color: var(--theme-color-three); } /**** .sticky-header.style-three .main-menu .navigation>li.current:before, .header-upper.style-three .main-menu .navigation>li.current:before, .sticky-header.style-three .main-menu .navigation>li.current:after, .header-upper.style-three .main-menu .navigation>li.current:after { background: var(--theme-color-three); } ****/ .sticky-header.style-three .main-menu .navigation>li:hover::before, .header-upper.style-three .main-menu .navigation>li:hover::before, .sticky-header.style-three .main-menu .navigation>li:hover::after, .header-upper.style-three .main-menu .navigation>li:hover::after { background: var(--theme-color-three); } /* Header Style Four */ .main-header.header-style-four .top-bar { padding: 0; background: #283354; } .main-header.header-style-four .logo { padding: 5px 0; } .main-header.header-style-four .top-bar .logo img { position: relative; top: 19px; } .main-header.header-style-four .logo:before { position: absolute; content: ''; background: #fff; top: 0; right: -90px; height: 100%; width: 5000%; } .main-header.header-style-four .contact-info { min-width: 500px; } .main-header.header-style-four .contact-info li { border-color: rgba(255, 255, 255, 0.2); } .main-header.header-style-four .contact-info li:last-child { border-right: 0px; } .main-header.header-style-four .top-bar .login-info li:last-child { border-right: 0px; } .main-header.header-style-four .contact-info li span { color: #02c06d; } .main-header.header-style-four .main-menu .navigation>li>a { margin-left: 30px; } .main-header.header-style-four .main-menu .navigation>li:hover::before { left: 8px; bottom: 45px; height: 1px; } .main-header.header-style-four .main-menu .navigation>li.current:after { content: '\f105'; font-size: 20px; font-family: FontAwesome; color: var(--theme-color-four); width: auto; height: auto; background: transparent !important; bottom: 32px; left: 38px; } .main-header.header-style-four .sticky-header .main-menu .navigation>li>a { margin-left: 15px; } .main-header.header-style-four .header-upper .nav-outer:before { visibility: hidden; } .main-header.header-style-four .search-box-btn { border: 1px solid #f3f3f3; padding: 7px 13px; border-radius: 5px; } .header-upper.style-four .theme-btn { padding: 10px 30px; } .main-header.header-style-four .header-upper .option-wrapper>div { margin-left: 10px; } .main-header.header-style-four .search-box-outer { padding: 0; } .main-header.header-style-four .header-upper .option-wrapper .link-btn { position: relative; top: 3px; } /* Location */ .top-bar .location-area { position: relative; } .top-bar .location-area:before { position: absolute; content: ''; background: #fff; left: -24px; top: 7px; width: 30px; height: 40px; -webkit-clip-path: polygon(80% 0, 100% 0, 100% 100%, 0% 100%); clip-path: polygon(80% 0, 100% 0, 100% 100%, 0% 100%); } /* Social icon Five */ .social-icon-five { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; border-left: 1px solid rgba(255, 255, 255, 0.1); border-right: 1px solid rgba(255, 255, 255, 0.1); } .social-icon-five li {} .social-icon-five li a { color: #858585; display: inline-block; border-right: 1px solid #d9d9d9; text-align: center; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; font-size: 14px; padding: 0px 12px; border-top: 1px solid #eaeaea; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; } .social-icon-five li:last-child a { border-right: 0px; } .social-icon-five li a:hover { color: var(--theme-color-four); } .main-header .header-upper .social-icon-five { margin-top: 10px; } .mobile-menu.style-four .main-menu .navigation>li>ul>li>ul>li>a:hover, .mobile-menu.style-four .main-menu .navigation>li>ul>li:hover>a, .mobile-menu.style-four .main-menu .navigation>li:hover>a, .mobile-menu.style-four .main-menu .navigation>li.current>a, .sticky-header.style-four .main-menu .navigation>li:hover>a, .sticky-header.style-four .main-menu .navigation>li.current>a, .header-upper.style-four .main-menu .navigation>li:hover>a, .header-upper.style-four .main-menu .navigation>li.current>a, .sticky-header.style-four .main-menu .navigation>li>ul>li:hover>a, .header-upper.style-four .main-menu .navigation>li>ul>li:hover>a, .sticky-header.style-four .main-menu .navigation>li>ul>li>ul>li>a:before, .sticky-header.style-four .main-menu .navigation>li>ul>li>a:before, .header-upper.style-four .main-menu .navigation>li>ul>li>ul>li>a:before, .header-upper.style-four .main-menu .navigation>li>ul>li>a:before, .header-upper.style-four .main-menu .navigation>li>ul>li>ul>li>a:hover, .header-upper.style-four .main-menu .navigation>li>ul>li>ul>li>a:hover { color: var(--theme-color-four); } .sticky-header.style-four .main-menu .navigation>li.current:before, .header-upper.style-four .main-menu .navigation>li.current:before, .sticky-header.style-four .main-menu .navigation>li.current:after, .header-upper.style-four .main-menu .navigation>li.current:after { background: var(--theme-color-four); } /* Header Style Five */ .main-header.header-style-five .main-menu .navigation>li { margin-right: 40px; } .main-header.header-style-five .main-menu .navigation>li.current:before { background: transparent; left: 50%; height: 4px; width: 4px; content: ''; bottom: 22px; border: 2px solid var(--theme-color-five); margin-left: -2px; border-radius: 50%; } .main-header.header-style-five .main-menu .navigation>li.current:after { background: transparent; left: 50%; height: 12px; width: 12px; content: ''; bottom: 18px; border: 2px solid var(--theme-color-five); margin-left: -6px; border-radius: 50%; } .main-header.header-style-five { position: absolute; background: transparent; padding-top: 25px; } .main-header.header-style-five .header-upper { background: transparent; } .header-upper.style-five .main-menu .navigation>li>a { color: #fff; } .main-header.header-style-five .header-upper .nav-outer:before { display: none; } .main-header.header-style-five .search-box-btn { color: #fff; } .main-header.header-style-five .cart-btn .cart-icon { color: #fff; } .main-header.header-style-five .cart-btn .item-count { background: var(--theme-color-five); } .mobile-menu.style-five .main-menu .navigation>li>ul>li>ul>li>a:hover, .mobile-menu.style-five .main-menu .navigation>li>ul>li:hover>a, .mobile-menu.style-five .main-menu .navigation>li:hover>a, .mobile-menu.style-five .main-menu .navigation>li.current>a, .sticky-header.style-five .main-menu .navigation>li:hover>a, .sticky-header.style-five .main-menu .navigation>li.current>a, .header-upper.style-five .main-menu .navigation>li:hover>a, .header-upper.style-five .main-menu .navigation>li.current>a, .sticky-header.style-five .main-menu .navigation>li>ul>li:hover>a, .header-upper.style-five .main-menu .navigation>li>ul>li:hover>a, .sticky-header.style-five .main-menu .navigation>li>ul>li>ul>li>a:before, .sticky-header.style-five .main-menu .navigation>li>ul>li>a:before, .header-upper.style-five .main-menu .navigation>li>ul>li>ul>li>a:before, .header-upper.style-five .main-menu .navigation>li>ul>li>a:before, .header-upper.style-five .main-menu .navigation>li>ul>li>ul>li>a:hover, .header-upper.style-five .main-menu .navigation>li>ul>li>ul>li>a:hover { color: var(--theme-color-five); } .sticky-header.style-four .main-menu .navigation>li.current:before, .header-upper.style-four .main-menu .navigation>li.current:before, .sticky-header.style-four .main-menu .navigation>li.current:after, .header-upper.style-four .main-menu .navigation>li.current:after { background: var(--theme-color-five); } /*** ==================================================================== Banner Section ==================================================================== ***/ .banner-section { position: relative; } .three-item-carousel, .banner-slider { position: relative; height: 100% !important; z-index: 9; } .banner-section .swiper-slide { position: relative; left: 0; top: 0; height: 100%; width: 100%; background-repeat: no-repeat; background-position: center; background-size: cover; } .banner-section .swiper-slide:before { position: absolute; left: 0; top: 0; height: 100%; width: 100%; background-color: #000000; opacity: 0.15; content: ""; } .banner-section .content-outer { position: relative; top: 0; left: 0; right: 0; margin: 0 auto; height: 100%; width: 100%; } .banner-section .content-box { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; max-width: 1200px; margin: 0 auto; padding: 0 15px; min-height: 500px; } .banner-section .content-box .inner { position: relative; opacity: 0; -webkit-transform: translateX(100px); -ms-transform: translateX(100px); transform: translateX(100px); } .banner-section .swiper-slide-active .content-box .inner { opacity: 1; -webkit-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; -webkit-transform: translateX(0px); -ms-transform: translateX(0px); transform: translateX(0px); } .banner-section .content-box h1 { position: relative; font-size: 72px; line-height: 70px; color: #ffffff; font-weight: 500; text-transform: uppercase; opacity: 0; visibility: hidden; -webkit-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); margin-bottom: 30px; } .banner-section .swiper-slide-active .content-box h1 { opacity: 1; visibility: visible; -webkit-transition-delay: 800ms; -o-transition-delay: 800ms; transition-delay: 800ms; -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } .banner-section h2 { position: relative; display: block; font-size: 30px; line-height: 1.2em; color: #ffffff; font-weight: 400; margin-bottom: 30px; opacity: 0; visibility: hidden; -webkit-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); display: inline-block; } .banner-section .swiper-slide-active h2 { opacity: 1; visibility: visible; -webkit-transition-delay: 1200ms; -o-transition-delay: 1200ms; transition-delay: 1200ms; -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } .banner-section h2.border-shape { padding-bottom: 30px; } .banner-section h2.border-shape:before { position: absolute; content: ''; width: 100px; height: 3px; bottom: 0; left: 0; background: var(--theme-color-five); } .banner-section h3 { position: relative; display: block; font-size: 22px; line-height: 1.2em; color: #ffffff; font-weight: 400; margin-bottom: 30px; padding: 0 150px; opacity: 0; visibility: hidden; -webkit-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); display: inline-block; } .banner-section .swiper-slide-active h3 { opacity: 1; visibility: visible; -webkit-transition-delay: 1200ms; -o-transition-delay: 1200ms; transition-delay: 1200ms; -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } .banner-section h4 { position: relative; display: block; font-size: 18px; line-height: 1.2em; color: #ffffff; font-weight: 500; text-transform: uppercase; margin-bottom: 30px; padding: 0 150px; opacity: 0; visibility: hidden; -webkit-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); display: inline-block; } .banner-section .swiper-slide-active h4 { opacity: 1; visibility: visible; -webkit-transition-delay: 1200ms; -o-transition-delay: 1200ms; transition-delay: 1200ms; -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } .banner-section h4 .border-shape-left { position: absolute; left: 0; top: 4px; width: 120px; height: 7px; } .banner-section h4 .border-shape-left:before { position: absolute; content: ''; background: var(--theme-color); height: 2px; width: 70px; right: 0; top: 0; } .banner-section h4 .border-shape-left:after { position: absolute; content: ''; background: var(--theme-color); height: 2px; width: 120px; right: 0; bottom: 0; } .banner-section h4 .border-shape-right { position: absolute; right: 0; top: 4px; width: 120px; height: 7px; } .banner-section h4 .border-shape-right:before { position: absolute; content: ''; background: var(--theme-color); height: 2px; width: 70px; left: 0; top: 0; } .banner-section h4 .border-shape-right:after { position: absolute; content: ''; background: var(--theme-color); height: 2px; width: 120px; left: 0; bottom: 0; } .banner-section .content-box .text { position: relative; font-size: 18px; line-height: 1.2em; color: #ffffff; font-weight: 400; letter-spacing: 0.02em; opacity: 0; visibility: hidden; -webkit-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; -webkit-transform: translateX(-50px); -ms-transform: translateX(-50px); transform: translateX(-50px); } .banner-section .swiper-slide-active .text { opacity: 1; visibility: visible; -webkit-transition-delay: 1600ms; -o-transition-delay: 1600ms; transition-delay: 1600ms; -webkit-transform: translateX(0px); -ms-transform: translateX(0px); transform: translateX(0px); } .banner-section .link-box { padding-top: 40px; -webkit-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); -webkit-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; -webkit-transition-delay: 2000ms; -o-transition-delay: 2000ms; transition-delay: 2000ms; -webkit-transform-origin: bottom; -ms-transform-origin: bottom; transform-origin: bottom; } .banner-section .swiper-slide-active .link-box { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .banner-section .link-box a { -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; } .banner-section .link-box a+a { margin-left: 20px; } .banner-section .link-box-two { -webkit-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); -webkit-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; -webkit-transition-delay: 1000ms; -o-transition-delay: 1000ms; transition-delay: 1000ms; -webkit-transform-origin: bottom; -ms-transform-origin: bottom; transform-origin: bottom; margin-bottom: 40px; } .banner-section .swiper-slide-active .link-box-two { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .banner-section .link-box-two .default-btn { font-size: 13px; font-weight: 500; color: #fff; background: var(--theme-color); padding: 5px 20px; border-radius: 5px; } .banner-section .logo { position: relative; display: block; margin-bottom: 30px; padding: 0 150px; opacity: 0; visibility: hidden; -webkit-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); display: inline-block; } .banner-section .swiper-slide-active .logo { opacity: 1; visibility: visible; -webkit-transition-delay: 1200ms; -o-transition-delay: 1200ms; transition-delay: 1200ms; -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } /* Style Two */ .banner-section.style-two .content-box { min-height: 880px; } .banner-section.style-two h4 { font-size: 15px; font-weight: 500; padding: 0; } .banner-section.style-two .content-box h1 { font-size: 60px; font-family: var(--prata); text-transform: capitalize; margin-bottom: 0; } .banner-section.style-two .banner-slider-nav.style-one .banner-slider-control:hover { color: var(--theme-color-two); } /* Style Three */ .banner-section.style-three .content-box { min-height: 850px; } .banner-section.style-three .content-box h1 { font-size: 60px; text-transform: capitalize; } .banner-section.style-three .link-box { padding-top: 0px; } .banner-section.style-three .link-box a { margin-right: 20px; } .banner-section.style-three .banner-slider-nav.style-one .banner-slider-control:hover { color: var(--theme-color-three); } /* Style Five */ .banner-section.style-five .content-box h1 { font-size: 100px; line-height: 100px; font-weight: 900; } .banner-section.style-five .content-box .text { font-size: 24px; font-weight: 500; line-height: 36px; } .banner-section.style-five .banner-slider-nav.style-one .banner-slider-control { width: auto; background: transparent; } .banner-section.style-five .banner-slider-nav.style-one .banner-slider-control.banner-slider-button-prev { -webkit-transform: rotate(180deg) translateX(-50px); -ms-transform: rotate(180deg) translateX(-50px); transform: rotate(180deg) translateX(-50px); } .banner-section.style-five .banner-slider-nav.style-one .banner-slider-control:hover { color: var(--theme-color-four); } .banner-section.style-five .content-box .inner { padding-left: 40px; } .banner-section.style-five .content-box .inner:before { position: absolute; content: ''; left: 0; top: 15px; width: 3px; height: 100px; background: transparent; } .banner-section.style-five .content-box .inner:after { position: absolute; content: ''; left: 6px; top: 15px; width: 3px; height: 270px; background:transparent; } .banner-section.style-five .banner-slider-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: var(--theme-color-four); } /* Style Six */ .banner-section.style-six .content-box { min-height: 905px; } .banner-section.style-six .content-box h1 { font-size: 90px; line-height: 90px; font-weight: 700; } .banner-section.style-six .content-box .text { line-height: 30px; margin-bottom: 30px; } .banner-section.style-six .link-box { padding-top: 10px; } .banner-section.style-six .banner-slider-nav.style-one .banner-slider-control { width: auto; background: transparent; } .banner-section.style-six .banner-slider-nav.style-one .banner-slider-control.banner-slider-button-prev { -webkit-transform: rotate(180deg) translateX(-50px); -ms-transform: rotate(180deg) translateX(-50px); transform: rotate(180deg) translateX(-50px); } .banner-section.style-six .banner-slider-nav.style-one .banner-slider-control:hover { color: var(--theme-color-five); } .banner-section.style-six .banner-slider-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: var(--theme-color-five); } /* Banner Slider Option */ .banner-section .slide-option { position: absolute; right: 120px; bottom: 10px; min-width: 440px; } .slide-progress-container { position: absolute; height: 3px; z-index: 3; bottom: 30px; right: 0; left: 0; } .slide-progress-warp { float: left; position: relative; height: 1px; background: rgba(255, 255, 255, 0.41); z-index: 10; bottom: 0; width: 100%; } .slide-progress { position: absolute; top: 50%; left: 0; height: 3px; border-radius: 6px; margin-top: -2px; width: 0%; max-width: 100%; background: var(--theme-color); } .banner-slider-nav.style-one { position: absolute; left: 0; top: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; bottom: 0; width: 100%; } .banner-slider-control-wrap { position: absolute; bottom: 0px; top: 0; right: 0; z-index: 100; width: 100%; } .banner-slider-control-wrap.style-two { position: relative; width: auto; color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .banner-slider-nav.style-one .banner-slider-control { cursor: pointer; width: 80px; height: 80px; line-height: 80px; text-transform: uppercase; letter-spacing: 2px; position: relative; text-align: center; z-index: 5; background: rgba(255, 255, 255, 0.07); border-radius: 50%; color: #fff; font-size: 32px; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; } .banner-slider-nav.style-one .banner-slider-control:hover { color: var(--theme-color); } .banner-slider-nav.style-one .banner-slider-control.banner-slider-button-next { -webkit-transform: translateX(-50px); -ms-transform: translateX(-50px); transform: translateX(-50px); } .banner-slider-nav.style-one .banner-slider-control.banner-slider-button-prev { -webkit-transform: translateX(50px); -ms-transform: translateX(50px); transform: translateX(50px); } .banner-slider-control-wrap .left-side { position: relative; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; padding-left: 60px; } .banner-slider-nav.style-one .banner-slider-control span { position: relative; z-index: 2; } .banner-slider-nav.style-one .banner-slider-control i { -webkit-transition: all 200ms linear; -o-transition: all 200ms linear; transition: all 200ms linear; -webkit-transition-delay: 0.3s; -o-transition-delay: 0.3s; transition-delay: 0.3s; padding: 0 0 0 1px; } .banner-slider-nav.style-one .banner-slider-control.banner-slider-button-prev i { padding: 0 0px 0 0; } /* Banner Pagination */ .banner-section .banner-slider-pagination { position: absolute; right: 60px; top: inherit; margin-right: 0; z-index: 9999; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); bottom: 15px; left: 50%; width: auto !important; max-width: none; text-align: center; } .banner-section .banner-slider-pagination .swiper-pagination-bullet { width: 12px; height: 12px; display: inline-block; margin-bottom: 20px; border-radius: 0; background: none; position: relative; opacity: 1; background: #b9b0ac; border-radius: 50%; margin: 0px 9px; } .banner-section .banner-slider-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { background: #fff; } .banner-section .banner-slider-pagination.style-two {} .banner-section .banner-slider-pagination.style-two .swiper-pagination-bullet:after { content: '01'; position: absolute; top: -53px; right: -8px; line-height: 20px; color: #fff; letter-spacing: 2px; font-size: 18px; font-weight: 500; -webkit-transform: scale(0.5); -ms-transform: scale(0.9); transform: scale(0.9); -webkit-transition: all 100ms linear; -o-transition: all 100ms linear; transition: all 100ms linear; opacity: 0; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; } .banner-section .banner-slider-pagination.style-two .swiper-pagination-bullet.swiper-pagination-bullet-active:after, .banner-section .banner-slider-pagination.style-two .swiper-pagination-bullet.swiper-pagination-bullet-active:before { opacity: 1; } .banner-section .banner-slider-pagination.style-two .swiper-pagination-bullet:nth-child(2):after { content: '02'; } .banner-section .banner-slider-pagination.style-two .swiper-pagination-bullet:nth-child(3):after { content: '03'; } .banner-section .banner-slider-pagination.style-two .swiper-pagination-bullet:nth-child(4):after { content: '04'; } .banner-section .banner-slider-pagination.style-two .swiper-pagination-bullet:nth-child(5):after { content: '05'; } .banner-section .banner-slider-pagination.style-two .swiper-pagination-bullet:nth-child(6):after { content: '06'; } .banner-section .banner-slider-pagination.style-two .swiper-pagination-bullet:nth-child(7):after { content: '07'; } .banner-section .banner-slider-pagination.style-two .swiper-pagination-bullet:nth-child(8):after { content: '08'; } .banner-section .banner-slider-pagination.style-two .swiper-pagination-bullet:before { position: absolute; content: ''; background: #fff; width: 1px; height: 20px; right: 5px; bottom: 18px; opacity: 0; } /* Banner Pagination Style Three*/ .banner-slider-pagination.style-three { left: auto; right: 50px; bottom: 50%; -webkit-transform: translate(0%, 50%); -ms-transform: translate(0%, 50%); transform: translate(0%, 50%); } .banner-section .banner-slider-pagination.style-three .swiper-pagination-bullet { display: block; margin: 18px 0; } .banner-section .banner-slider-pagination.style-three .swiper-pagination-bullet.swiper-pagination-bullet-active { -webkit-box-shadow: 0 0 0px 6px #b9b0ac; box-shadow: 0 0 0px 6px #b9b0ac; background: var(--theme-color-two); } /* Banner Pagination Style Four */ .banner-section.style-four .banner-slider-pagination .swiper-pagination-bullet { border-radius: 0px; height: 5px; width: 25px; border: 1px solid #fff; background: transparent; } /*** ==================================================================== About Section ==================================================================== ***/ .about-section { position: relative; padding: 110px 0 80px; } .about-content-block { position: relative; margin-bottom: 30px; } .about-content-block h1 { position: relative; margin-bottom: 25px; font-size: 36px; font-family: var(--prata); line-height: 50px; } .about-content-block h4 { font-size: 18px; color: var(--theme-color); line-height: 28px; margin-bottom: 20px; } .about-content-block .text { position: relative; margin-bottom: 25px; } .about-content-block .link-btn { position: relative; margin-bottom: 25px; } .about-image-block { position: relative; margin-bottom: 30px; } .about-image-block:before { position: absolute; content: ''; background: url(../images/resource/decor.png) no-repeat center; height: 224px; width: 272px; top: 0; right: 0; } .about-image-block .logo-box { position: absolute; top: 20px; right: 70px; width: 160px; height: 160px; text-align: center; line-height: 160px; background: #fff; border-radius: 50%; z-index: 99; } .about-image-block .logo-box .image { position: absolute; top: 10px; left: 10px; width: 140px; height: 140px; text-align: center; line-height: 140px; background: #fff; border-radius: 50%; -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1); } .about-image-block .logo-box .image:before { position: absolute; content: ''; width: 120px; height: 120px; border: 3px dotted var(--theme-color); left: 10px; top: 10px; border-radius: 50%; } .about-image-block .logo-box img { position: relative; } .about-image-block .image-two { position: absolute; left: 50%; top: 50%; z-index: 9; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .about-image-block .image-three { position: absolute; right: 0; bottom: 22px; } .about-image-block img { border-radius: 6px; } .about-image-block .image-two a { position: absolute; left: 50%; top: 50%; z-index: 9; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-size: 60px; color: #fff; line-height: 60px; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; } .about-image-block .image-two a:hover { color: var(--theme-color); } .about-image-block .image-two a:before { position: absolute; content: ""; top: 0px; left: 0px; bottom: 0px; right: 0px; border-radius: 50%; z-index: -1; -webkit-animation: myPulse 3s infinite cubic-bezier(0.4, 0, 1, 1) both; animation: myPulse 3s infinite cubic-bezier(0.4, 0, 1, 1) both; opacity: 0; } @-webkit-keyframes myPulse { 0% { -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.3); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.3) } 70% { -webkit-box-shadow: 0 0 0 60px rgba(255, 255, 255, 0); box-shadow: 0 0 0 60px rgba(255, 255, 255, 0) } 100% { -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0) } } @keyframes myPulse { 0% { -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.3); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.3) } 70% { -webkit-box-shadow: 0 0 0 60px rgba(255, 255, 255, 0); box-shadow: 0 0 0 60px rgba(255, 255, 255, 0) } 100% { -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0) } } .about-image-block .image-two a:hover:before { opacity: 1; } /*** ==================================================================== Section Title ==================================================================== ***/ .sec-title { position: relative; margin-bottom: 50px; } .sec-title h5 { font-size: 14px; font-weight: 500; color: var(--theme-color-three); text-transform: uppercase; margin-bottom: 20px; } .sec-title.style-two h5 { color: var(--theme-color-four); } .sec-title.style-three h5 { color: var(--theme-color-five); } .sec-title h1 { position: relative; position: relative; margin-bottom: 10px; font-size: 36px; font-family: var(--prata); line-height: 50px; } .sec-title.light h1 { color: #fff; } .sec-title .text { font-size: 16px; font-weight: 300; } .sec-title.light .text { color: #fff; } .sec-title .icon-box { position: relative; color: var(--theme-color-four); font-size: 30px; line-height: 30px; margin-bottom: 20px; width: -webkit-max-content; width: -moz-max-content; width: max-content; } .sec-title.text-center .icon-box { margin: 0 auto; margin-bottom: 20px; padding: 0 50px; } .sec-title.text-center .icon-box:before { position: absolute; content: ''; background: var(--theme-color-four); left: 0; width: 40px; height: 2px; top: 16px; } .sec-title.text-center .icon-box:after { position: absolute; content: ''; background: var(--theme-color-four); right: 0; width: 40px; height: 2px; top: 16px; } /*** ==================================================================== Causes Section ==================================================================== ***/ .causes-section { position: relative; padding: 110px 0 70px; background-color: #f4f1ee; } .causes-section:before { position: absolute; content: ''; background: url(../images/resource/decor-2.png) no-repeat 0 20%; height: 100%; width: 100%; top: 0; right: 0; } .causes-section .cause-carousel-wrapper { position: relative; margin: 0 -15px; } .cause-block-one { position: relative; margin: 0 15px 40px; } .cause-block-one .inner-box { position: relative; background: #fff; padding: 20px; border-radius: 6px; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; } .cause-block-one .inner-box:hover { -webkit-box-shadow: 0px 20px 20px 0px rgba(89, 83, 76, 0.1); box-shadow: 0px 20px 20px 0px rgba(89, 83, 76, 0.1); } .progress-levels .progress-box { position: relative; padding-bottom: 10px; padding-top: 10px; overflow: hidden; } .progress-levels .progress-box:last-child { margin-bottom: 0px; } .progress-levels .progress-box:last-child { margin-bottom: 0px; } .progress-levels .progress-box .bar { position: relative; height: 6px; background: #f4f1ee; } .progress-levels .progress-box .bar .bar-innner { position: relative; left: 0px; top: 0px; width: 100%; height: 10px; border-radius: 5px; } .progress-levels .progress-box .bar .bar-fill { position: absolute; left: -100%; top: 0px; width: 0px; height: 6px; background: var(--theme-color); -webkit-transition: all 2000ms ease 300ms; -o-transition: all 2000ms ease 300ms; transition: all 2000ms ease 300ms; } .progress-levels .progress-box.html .bar .bar-fill { background: #ef6267; } .progress-levels .progress-box.wp .bar .bar-fill { background: #ff9924; } .progress-levels .progress-box.php .bar .bar-fill { background: #14dbba; } .progress-levels .progress-box.animated .bar .bar-fill { left: 0px; } .progress-levels .progress-box .percent { position: absolute; right: 0; top: -30px; letter-spacing: 0px; font-size: 13px; font-weight: 500; color: var(--dark-color-two); opacity: 0; -webkit-transition: all 2000ms ease 700ms; -o-transition: all 2000ms ease 700ms; transition: all 2000ms ease 700ms; } .progress-levels .progress-box.animated .percent { opacity: 1; } .cause-block-one .image { position: relative; overflow: hidden; border-radius: 5px; } .cause-block-one .image img { width: 100%; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; } .cause-block-one .inner-box:hover .image img { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .cause-block-one .image { margin-bottom: 30px; } .cause-block-one .lower-content { position: relative; padding: 0px 20px 15px; } .cause-block-one h4 { font-size: 20px; margin-bottom: 3px; } .cause-block-one h4 a { color: var(--dark-color); -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; } .cause-block-one h4 a:hover { color: var(--theme-color); } .cause-block-one .category { font-size: 15px; color: #a6a6a6; margin-bottom: 14px; } .cause-block-one .category a { color: #a6a6a6; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; display: inline-block; position: relative; } .cause-block-one .category a:hover { color: var(--theme-color); } .cause-block-one .category a:before { position: absolute; content: ''; background: #a6a6a6; height: 1px; left: 28px; right: 0; bottom: 3px; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; } .cause-block-one .category a:hover:before { background: var(--theme-color); } .cause-block-one .category span { margin-right: 10px; font-size: 18px; position: relative; top: 3px; } .cause-block-one .lower-content .text { margin-bottom: 18px; } .cause-block-one .lower-content .info-box { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .cause-block-one .lower-content .info-box a { color: #858585; } .cause-block-one .lower-content .info-box a span { font-size: 13px; font-weight: 500; text-transform: uppercase; color: var(--dark-color); } .cause-block-one .lower-content .bottom-content { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; padding-top: 10px; } .cause-block-one .lower-content .bottom-content .link-btn { margin-right: 15px; margin-bottom: 10px; } .cause-block-one .lower-content .bottom-content .link-btn a { padding: 11px 42px; } .cause-block-one .lower-content .bottom-content .link-btn .btn-style-one:before { display: none; } /* Share Icon */ .share-icon { position: relative; } .share-icon .share-btn { background: #fff; font-size: 14px; height: 50px; width: 50px; line-height: 50px; border: 1px solid #eaeaea; text-align: center; cursor: pointer; color: #a6a6a6; border-radius: 50%; margin-bottom: 10px; } .share-icon ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; opacity: 0; visibility: hidden; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; position: absolute; left: 55px; bottom: 10px; width: -webkit-max-content; width: -moz-max-content; width: max-content; } .share-icon.open ul { opacity: 1; visibility: visible; } .share-icon ul li { margin-right: 2px; } .share-icon ul a { font-size: 14px; height: 50px; width: 25px; line-height: 48px; text-align: center; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; display: inline-block; color: #999; } .share-icon ul a:hover { color: var(--theme-color); } .share-icon.style-two { position: absolute; right: 0; top: 9px; } .share-icon.style-two ul { left: auto; right: 10px; top: 0; bottom: auto; background: #fff; padding: 0 5px; z-index: 9; } .share-icon.style-two ul a { width: 30px; height: 30px; line-height: 30px; border: 1px solid #eaeaea; border-radius: 50%; font-size: 12px; color: var(--dark-color); } .share-icon.style-two ul li { margin: 0 5px; } .share-icon.style-two .share-btn { border: 0px; width: 30px; height: 30px; line-height: 30px; margin: 0; text-align: right; } .share-icon.style-two ul a:hover { color: #fff; background: var(--theme-color); border-color: var(--theme-color); } /* Style Two */ .causes-section.style-two { padding-bottom: 110px; } .causes-section.style-two:before { display: none; } .causes-section.style-two .owl-dot-style-one .owl-dots { margin-top: 0px; } /*** ==================================================================== Donor Section ==================================================================== ***/ .donor-section { position: relative; background-color: #2f2b4f; background-position: right center; background-size: cover; } .donor-section .left-column { position: relative; padding: 50px 15px 20px; } .donor-section .left-column:before { position: absolute; content: ''; background: #f0f0f0db; height: 100%; width: 200%; top: 0; right: -88px; } .donor-section .right-column { position: relative; padding: 110px 15px 80px; background-size: cover; } .donor-section .right-column:before { position: absolute; content: ''; height: 100%; width: 300%; top: 0; left: 69px; /* ff3.6+ */ /* safari4+,chrome */ /* safari5.1+,chrome10+ */ background: -o-linear-gradient(45deg, rgba(33, 29, 71, 1) 0%, rgba(33, 29, 71, 1) 35%, rgba(33, 29, 71, 0.3) 81%, rgba(33, 29, 71, 0.3) 100%); /* opera 11.10+ */ /* ie10+ */ background: linear-gradient(45deg, rgba(33, 29, 71, 1) 0%, rgba(33, 29, 71, 1) 35%, rgba(33, 29, 71, 0.3) 81%, rgba(33, 29, 71, 0.3) 100%); /* w3c */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#211d47', endColorstr='#211d47', GradientType=1); /* ie6-9 */ } .donor-block { position: relative; } .donor-block .inner-box { position: relative; margin-bottom: 30px; margin-right: 20px; } .donor-block .top-content { position: relative; background: #fff; text-align: center; padding:16px 5px 20px; border-radius: 6px; } .donor-block .image { position: relative; margin-bottom: 20px; overflow: hidden; display: inline-block; } .donor-block .image .overlay { position: absolute; content: ''; top: 0; left: 0; right: 0; bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .donor-block .image .overlay .icon { position: relative; opacity: 0; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; color: #fff; } .donor-block .image .overlay .icon a { color: #fff; } .donor-block .image .overlay .icon a:hover { color: #fff; } .donor-block .inner-box:hover .image .overlay .icon { opacity: 1; -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } .donor-block .image .overlay:before { position: absolute; content: ''; background: var(--dark-color); left: 0; top: 0; width: 100%; height: 100%; border-radius: 50%; opacity: 0; -webkit-transform: scale(.8); -ms-transform: scale(.8); transform: scale(.8); -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; visibility: hidden; } .donor-block .inner-box:hover .image .overlay:before { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); visibility: visible; opacity: .85; } .donor-block .image img { position: relative; border-radius: 50%; } .donor-block h4 { font-size: 18px; margin-bottom: 10px; } .donor-block .location { color: var(--theme-color); } .donor-block .bottom-content { position: relative; margin-top: 30px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; } .donor-block .bottom-content .text { position: relative; width: 50%; background: #fff; border-bottom-left-radius: 6px; border-top-left-radius: 6px; text-align: center; color: var(--theme-color); text-transform: uppercase; font-size: 13px; font-weight: 500; padding: 11px 0; } .donor-block .bottom-content .text:before { position: absolute; content: ''; height: 12px; width: 10px; background: #fff; right: 0; top: -12px; -webkit-clip-path: polygon(100% 0, 0% 100%, 100% 100%); clip-path: polygon(100% 0, 0% 100%, 100% 100%); } .donor-block .bottom-content .price { position: relative; width: 50%; background: #fff; border-bottom-right-radius: 6px; border-top-right-radius: 6px; text-align: center; color: #fff; background: #25b448; text-transform: uppercase; font-size: 13px; font-weight: 500; padding: 11px 0; } .donor-block .bottom-content .price:before { position: absolute; content: ''; height: 12px; width: 8px; background: #25b448; left: 0; top: -12px; --webkit-clip-path: polygon(0 0, 0% 100%, 100% 100%); -webkit-clip-path: polygon(0 0, 0% 100%, 100% 100%); clip-path: polygon(0 0, 0% 100%, 100% 100%); } .feature-block-one { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 60px; } .feature-block-one .icon-box { position: relative; font-size: 50px; color: #fff; height: 110px; width: 110px; background: var(--theme-color); line-height: 110px; text-align: center; border-radius: 50%; margin-right: 20px; overflow: hidden; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; } .feature-block-one:hover .icon-box { color: var(--theme-color); } .feature-block-one .icon-box span { position: relative; } .feature-block-one .icon-box:before { position: absolute; content: ''; height: 100%; width: 100%; right: 0; top: 100%; background: #fff; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; } .feature-block-one:hover .icon-box:before { top: 0; } .feature-block-one h4 { position: relative; color: #fff; font-size: 20px; } /* Style Two */ .donor-section.style-two { background-color: #fff; padding: 110px 0 90px; } .donor-section.style-two:before { position: absolute; content: ''; background: url(../images/resource/pattern.jpg); left: 0; top: 0; right: 0; bottom: 0; } .donor-section.style-two .row { margin: 0 -20px; } .donor-section.style-two .donor-block { max-width: 20%; padding: 0 20px; } .donor-section.style-two .donor-block .inner-box { margin-right: 0; } .donor-block.style-two .bottom-content .text { background: #302c51; color: #fff; } .donor-block.style-two .bottom-content .text:before { background: #302c51; } /*** ==================================================================== Funfacts Section ==================================================================== ***/ .funfacts-section { position: relative; padding: 110px 0; } .funfacts-section .outer-box { overflow: hidden; } .funfacts-section .funfact-wrapper { margin: 0 -2px; } .counter-block { position: relative; padding: 0; } .counter-block .inner-box { position: relative; margin-top: 50px; margin-bottom: 60px; text-align: center; border-top: 1px solid #eaeaea; border-right: 1px solid #eaeaea; } .counter-block .icon-box { height: 100px; width: 100px; line-height: 98px; border: 1px solid #eaeaea; border-radius: 50%; margin: 0 auto; margin-top: -50px; margin-bottom: 40px; background: #fff; -webkit-transition: 1s ease; -o-transition: 1s ease; transition: 1s ease; } .counter-block:hover .icon-box { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } .counter-block h4 { font-size: 20px; margin-bottom: 30px; } .counter-block .count-box { position: relative; font-size: 60px; color: var(--theme-color); line-height: 65px; margin-bottom: 20px; } .funfacts-section .bottom-content .text { margin-bottom: 40px; } /*** ==================================================================== Events Section ==================================================================== ***/ .events-section { position: relative; padding: 110px 0; background: #f4f1ee; } .event-tab-wrapper { margin: 0 -15px; } .event-tabs { position: relative; } .event-tabs .tabs-header { position: relative; margin-bottom: 40px; } .event-tabs .event-tab-btns { position: relative; margin-right: 0px; } .event-tabs .event-tab-btns .event-tab-btn { position: relative; float: left; line-height: 24px; padding: 14px 44px; cursor: pointer; color: var(--dark); background: #fff; font-weight: 500; font-size: 13px; margin-bottom: 20px; text-transform: uppercase; 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; border-radius: 6px; margin-right: 20px; } .event-tabs .event-tab-btns .event-tab-btn:before { position: absolute; content: ''; background: #fff; width: 22px; height: 20px; left: 50%; bottom: -20px; margin-left: -11px; -webkit-clip-path: polygon(50% 51%, 0 0, 100% 0); clip-path: polygon(50% 51%, 0 0, 100% 0); -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; } .event-tabs .event-tab-btns .event-tab-btn:last-child { margin-right: 0px; } .event-tabs .event-tab-btns .event-tab-btn.active-btn { background: var(--theme-color); color: #fff; } .event-tabs .event-tab-btns .event-tab-btn.active-btn:before { background: var(--theme-color) } .event-tabs .owl-nav { position: absolute; right: 20.8%; top: 0; height: 100%; background: #fff; padding: 0 21px; display: none; } .event-tabs .event-tabs-content { position: relative; display: block; } .event-tabs .event-tab { position: absolute; left: 0px; top: 0px; width: 100%; height: auto; visibility: hidden; } .event-tabs .event-tab.active-tab { position: relative; visibility: visible; z-index: 5; } .event-tabs .event-block-one .inner-box { -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); 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; } .event-tabs .active-tab .event-block-one .inner-box { -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); } .event-block-one { padding: 0 15px; } .event-block-one .inner-box { background: #fff; border-radius: 6px; overflow: hidden; margin-bottom: 30px; } .event-block-one .image { position: relative; overflow: hidden; } .event-block-one .image:before { position: absolute; content: ''; height: 100%; width: 100%; right: 0; top: 0; background: rgba(48, 44, 81, 0.9); -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; z-index: 1; -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); } .event-block-one .inner-box:hover .image:before { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .event-block-one .image img { width: 100%; } .event-block-one .lower-content { position: relative; padding: 0 28px; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; background: #fff; z-index: 9; } .event-block-one .inner-box .lower-content { -webkit-transform: translateY(-45px); -ms-transform: translateY(-45px); transform: translateY(-45px); } .event-block-one .lower-content .date { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-shadow: 0px 20px 20px 0px rgba(89, 83, 76, 0.08); box-shadow: 0px 20px 20px 0px rgba(89, 83, 76, 0.08); padding: 14px 20px; border-radius: 6px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); background: #fff; margin-bottom: -12px; } .event-block-one .lower-content .date h1 { font-size: 60px; color: var(--theme-color); margin-right: 10px; line-height: 50px; } .event-block-one .lower-content .date .text { font-size: 15px; } .event-block-one .lower-content .date span { font-size: 18px; color: var(--theme-color); } .event-block-one h4 { font-size: 20px; } .event-block-one h4 a { color: var(--dark-color); } .event-block-one .location { font-size: 13px; color: #858585; } .event-block-one .location span { margin-right: 6px; } .event-block-one .link-btn { position: relative; opacity: 0; padding: 0 28px; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; bottom: 30px; } .event-block-one .link-btn a { color: var(--theme-color); font-size: 13px; font-weight: 500; text-transform: uppercase; } .event-block-one .link-btn a span { margin-right: 10px; } .event-block-one .inner-box:hover .link-btn { opacity: 1; } .events-section .owl-dot-style-one .owl-dots { margin-top: 0; } /* Style Two */ .events-section.style-two { background: #fff; } .events-section.style-two .event-block-one .inner-box { -webkit-box-shadow: 0px 0px 45px 5px rgba(89, 83, 76, 0.08); box-shadow: 0px 0px 45px 5px rgba(89, 83, 76, 0.08); } /* Style Three */ .events-section.style-three { padding-bottom: 80px; } .events-section.style-three .event-block-one .inner-box { -webkit-transition: .5s; -o-transition: .5s; transition: .5s; } .events-section.style-three .event-block-one .inner-box:hover { -webkit-box-shadow: 0px 20px 20px 0px rgba(0, 0, 0, 0.05); box-shadow: 0px 20px 20px 0px rgba(0, 0, 0, 0.05); } .events-section.style-three .link-btn .theme-btn { color: var(--theme-color-five); border-color: var(--theme-color-five); } .events-section.style-three .link-btn .theme-btn:hover { color: #fff; } .events-section.style-three .link-btn .theme-btn:before { background: var(--theme-color-five); } .events-section.style-three .link-btn .theme-btn:after { background: var(--theme-color-five); } .events-section.style-three .event-block-one .image:before { background: rgba(36, 36, 36, 0.92); } .events-section.style-three .event-block-one .lower-content .date span { color: var(--theme-color-five); } .events-section.style-three .event-block-one .lower-content .date h1 { color: var(--theme-color-five); } .events-section.style-three .event-block-one .link-btn a { color: var(--theme-color-five); } /*** ==================================================================== Testimonail Section Four ==================================================================== ***/ .testimonial-section-four { position: relative; padding: 110px 0 80px; } .testimonial-block-four { position: relative; padding: 0 15px; } .testimonial-block-four .inner-box { position: relative; margin-bottom: 30px; text-align: center; -webkit-box-shadow: 0px 0px 8px 2px rgba(89, 83, 76, 0.05); box-shadow: 0px 0px 8px 2px rgba(89, 83, 76, 0.05); margin-top: 60px; padding: 0 10px 40px; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; } .testimonial-block-four .inner-box:hover { -webkit-box-shadow: 0px 0px 45px 5px rgba(89, 83, 76, 0.15); box-shadow: 0px 0px 45px 5px rgba(89, 83, 76, 0.15); } .testimonial-block-four .image { position: relative; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); display: inline-block; } .testimonial-block-four .image img { border-radius: 50%; } .testimonial-block-four .image:before { position: absolute; content: ''; left: -10px; top: -10px; right: -10px; bottom: -10px; border: 2px solid var(--theme-color); border-radius: 50%; -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0% 100%); clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0% 100%); } .testimonial-block-four .image:after { position: absolute; content: ''; left: -10px; top: -10px; right: -10px; bottom: -10px; border: 2px solid var(--theme-color); border-radius: 50%; -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0% 100%); clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0% 100%); opacity: 0; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; } .testimonial-block-four .inner-box:hover .image:after { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); opacity: 1; } .testimonial-block-four img { position: relative; } .testimonial-block-four h4 { font-size: 20px; margin-bottom: 15px; color: var(--dark-color-two); } .testimonial-block-four .text { margin-bottom: 20px; } .testimonial-block-four .author-title { font-size: 18px; margin-bottom: 5px; } .testimonial-block-four .designation { color: #757575; } .testimonial-block-four .designation a { color: var(--theme-color); } /*** ==================================================================== Team Section ==================================================================== ***/ .team-section { position: relative; padding: 110px 0 0px; background: #302c51; } .team-section.style-two { padding-bottom: 90px; background: #fff; } .team-section .wrapper-box { position: relative; margin-bottom: -72px; } .team-block-one { position: relative; } .team-block-one .inner-box { position: relative; margin-bottom: 30px; -webkit-box-shadow: 0px 0px 45px 5px rgba(89, 83, 76, 0.08); box-shadow: 0px 0px 45px 5px rgba(89, 83, 76, 0.08); background: #fff; border-radius: 6px; z-index: 9; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; } .team-block-one .inner-box:hover { -webkit-box-shadow: 0px 20px 20px 0px rgba(89, 83, 76, 0.1); box-shadow: 0px 20px 20px 0px rgba(89, 83, 76, 0.1); } .team-block-one .image { position: relative; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; border-top-left-radius: 6px; border-top-right-radius: 6px; overflow: hidden; } .team-block-one .inner-box:hover .image { -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } .team-block-one .image img { width: 100%; border-top-left-radius: 6px; border-top-right-radius: 6px; } .team-block-one .lower-content { position: relative; margin: 0 20px; padding: 23px 15px; background: #fff; text-align: center; border-radius: 6px; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; margin-top: -30px; z-index: 9; transition: .5s ease; } .team-block-one .inner-box:hover .lower-content { -webkit-transform: translateY(-73px); -ms-transform: translateY(-73px); transform: translateY(-73px); } .team-block-one .lower-content:before { position: absolute; content: ''; background: #ededed; height: 1px; left: 30px; right: 30px; bottom: 10px; -webkit-transition: 1s ease; -o-transition: 1s ease; transition: 1s ease; -webkit-transition-delay: .5s; -o-transition-delay: .5s; transition-delay: .5s; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); } .team-block-one .inner-box:hover .lower-content:before { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .team-block-one .lower-content h4 { font-size: 20px; margin-bottom: 5px; } .team-block-one .lower-content h4 a { color: var(--dark-color); -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; } .team-block-one .lower-content h4 a:hover { color: var(--theme-color); } .team-block-one .social-icon-two { position: absolute; left: 50%; bottom: 30px; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .team-block-one .social-icon-two a { opacity: 0; } .team-block-one .social-icon-two li:nth-child(odd) a { -webkit-transition-delay: .2s; -o-transition-delay: .2s; transition-delay: .2s; -webkit-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); } .team-block-one .social-icon-two li:nth-child(even) a { -webkit-transition-delay: .5s; -o-transition-delay: .5s; transition-delay: .5s; -webkit-transform: translateY(10px); -ms-transform: translateY(10px); transform: translateY(10px); } .team-block-one .inner-box:hover .social-icon-two a { opacity: 1; -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } /*** ==================================================================== Contact Form Section ==================================================================== ***/ .contact-form-section { position: relative; padding: 110px 0 0; background-size: cover; } /*Contact Form*/ .contact-form .row-10 { margin: 0 -10px; } .contact-form .form-group { margin-bottom: 30px; } .contact-form input[type="text"], .contact-form input[type="email"], .contact-form input[type="password"], .contact-form select, .contact-form textarea { display: block; width: 100%; height: 52px; font-size: 16px; color: #848484; line-height: 30px; padding: 11px 20px; font-weight: 300; background-color: #fff; border-radius: 6px; border: 1px solid #eaeaea; transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; } .contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color: var(--theme-color); } .contact-form textarea { height: 100px; resize: none; padding: 12px 25px; } .contact-form button { cursor: pointer; } .contact-form input.error, .contact-form select.error, .contact-form textarea.error { border-color: #ff0000 !important; } .contact-form label.error { display: block; line-height: 24px; padding: 5px 0px 0px; margin: 0px; text-transform: uppercase; font-size: 11px; color: #ff0000; font-weight: 500; } .contact-form .form-control:focus { -webkit-box-shadow: none; box-shadow: none; border-color: var(--theme-color); } /*** ==================================================================== Volunteer Section ==================================================================== ***/ .volunteer-section { position: relative; padding: 180px 0 110px; background: #f4f1ee; } .volunteer-section .image-wrapper-one { margin-left: -5px; margin-right: -45px; margin-top: -60px; } .volunteer-section .image-wrapper-two { margin-right: -5px; margin-left: -35px; margin-top: -60px; } .volunteer-section .image { position: relative; padding: 5px; } .volunteer-section .image img { border-radius: 6px; } .volunteer-section .default-form-area { background: #fff; padding: 60px 40px 30px; border-radius: 6px; } .volunteer-section .default-form-area .contact-section-btn label { font-size: 13px; font-weight: 500; color: var(--theme-color); } .volunteer-section .default-form-area .contact-section-btn input { width: 210px; } /*** ==================================================================== Blog Section ==================================================================== ***/ .blog-section { position: relative; padding: 110px 0 80px; } .news-block-one { position: relative; } .news-block-one .inner-box { position: relative; margin-bottom: 30px; -webkit-box-shadow: 0px 0px 45px 5px rgba(89, 83, 76, 0.08); box-shadow: 0px 0px 45px 5px rgba(89, 83, 76, 0.08); -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; border-radius: 6px; overflow: hidden; } .news-block-one .inner-box:hover { -webkit-transform: translateY(-5px); -ms-transform: translateY(-5px); transform: translateY(-5px); } .news-block-one .category { position: absolute; left: 20px; top: 20px; z-index: 9; } .news-block-one .category a { background: var(--dark-color); color: #fff; padding: 4px 10px; border-radius: 6px; margin-right: 6px; } .news-block-one .image { position: relative; } .news-block-one .image img { width: 100%; } .news-block-one .post-meta-info { position: absolute; bottom: 20px; right: 20px; } .news-block-one .post-meta-info a { color: #fff; margin-right: 10px; } .news-block-one .post-meta-info a span { margin-right: 10px; } .news-block-one .youtube-video-box { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .news-block-one .youtube-video-box a { color: #fff; font-size: 40px; } .news-block-one .lower-content { position: relative; padding: 20px; } .news-block-one .date { margin-bottom: 8px; color: #858585; } .news-block-one h4 { font-size: 18px; margin-bottom: 20px; } .news-block-one h4 a { color: var(--dark-color); -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; } .news-block-one h4 a:hover { color: var(--theme-color); } .news-block-one .author-info { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; } .news-block-one .author-info .image { position: relative; margin-right: 10px; } .news-block-one .author-info .image img { border-radius: 50%; } .news-block-one .author-info .author-title { font-size: 13px; font-weight: 500; color: #a6a6a6; text-transform: uppercase; } .news-block-one .author-info .author-title a { color: #a6a6a6; } /* Style Two */ .blog-section.style-two .news-block-one h4 a:hover { color: var(--theme-color-four); } .blog-section.style-two .share-icon.style-two ul a:hover { background-color: var(--theme-color-four); border-color: var(--theme-color-four); } /* Style Three */ .blog-section.style-three .link-btn .theme-btn { color: var(--theme-color-five); border-color: var(--theme-color-five); } .blog-section.style-three .link-btn .theme-btn:hover { color: #fff; } .blog-section.style-three .link-btn .theme-btn:before { background: var(--theme-color-five); } .blog-section.style-three .link-btn .theme-btn:after { background: var(--theme-color-five); } .blog-section.style-three .news-block-one .inner-box>.image { position: relative; background: #242424; margin: 30px; border-radius: 6px; } .blog-section.style-three .news-block-one .inner-box>.image img { border-radius: 6px; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; } .blog-section.style-three .news-block-one .inner-box:hover>.image img { opacity: .15; } .blog-section.style-three .news-block-one .category { top: 50px; left: 50px; } .blog-section.style-three .news-block-one .lower-content { padding: 0 30px 30px; } .blog-section.style-three .news-block-one .author-info .image { margin: 0; margin-right: 10px; } .blog-section.style-three .news-block-one .date span { color: var(--theme-color-five); margin-right: 10px; } .blog-section.style-three .news-block-one h4 { font-size: 20px; color: #1e1e1e; border-bottom: 1px solid #eaeaea; padding-bottom: 18px; } .blog-section.style-three .news-block-one h4 a { color: #1e1e1e; } .blog-section.style-three .news-block-one h4 a:hover { color: var(--theme-color-five); } .blog-section.style-three .news-block-one .category a { background: var(--theme-color-five); } .blog-section.style-three .share-icon.style-two ul a:hover { background: var(--theme-color-five); border-color: var(--theme-color-five); } .blog-section.style-three .news-block-one .inner-box:hover { -webkit-transform: translateY(-5px); -ms-transform: translateY(-5px); transform: translateY(-5px); -webkit-box-shadow: 0px 0px 45px 5px rgba(89, 83, 76, 0.16); box-shadow: 0px 0px 45px 5px rgba(89, 83, 76, 0.16); } .blog-section.style-three .news-block-one .inner-box:before { position: absolute; content: ''; background: var(--theme-color-five); height: 2px; width: 100%; left: 0; bottom: 0; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; } .blog-section.style-three .news-block-one .inner-box:hover:before { -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); } .blog-section.style-three .news-block-one .read-more-link { position: absolute; display: inline-block; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%) rotate(0deg); -ms-transform: translate(-50%, -50%) rotate(0deg); transform: translate(-50%, -50%) rotate(0deg); font-size: 28px; color: #fff; opacity: 0; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; pointer-events: none; } .blog-section.style-three .news-block-one .inner-box:hover .read-more-link { opacity: 1; -webkit-transform: translate(-50%, -50%) rotate(360deg); -ms-transform: translate(-50%, -50%) rotate(360deg); transform: translate(-50%, -50%) rotate(360deg); pointer-events: auto; } /*** ==================================================================== Blog Fullwidth ==================================================================== ***/ .blog-section.fullwidth .auto-container { max-width: 100%; padding: 0 75px; } /*** ==================================================================== Client section ==================================================================== ***/ .client-section { position: relative; padding: 70px 0; background: #f4f1ee; } .client-section .image { display: block; line-height: 60px; text-align: center; } .client-section .image a { display: inline-block; vertical-align: middle; } .client-section .image img { width: auto; opacity: .5; margin: 0 auto; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; -webkit-filter: grayscale(100%); filter: grayscale(100%); } .client-section .image:hover img { opacity: 1; -webkit-filter: grayscale(0%); filter: grayscale(0%); } .client-section .text-two { position: relative; padding-top: 40px; margin-top: 55px; border-top: 1px solid #eaeaea; text-align: center; } .client-section .text-two a { color: var(--theme-color-three); } /* Style Two */ .client-section.style-two { background: #fff; padding: 100px 0; } /* Style Three */ .client-section.style-three { background: #f4f1ee; padding: 100px 0; } .client-section.style-three .text-two { border-top: 1px solid #e1e1e1; } .client-section.style-three .text-two a { color: var(--theme-color); } /* Style Four */ .client-section.style-four { background: #fff; padding: 100px 0; } .client-section.style-four .text-two { border-top: 1px solid #e1e1e1; } .client-section.style-four .text-two a { color: var(--theme-color); } /* Style Five */ .client-section.style-five { background: #fff; padding: 100px 0; } .client-section.style-five .text-two a { color: var(--theme-color-four); } /* Tooltip */ .tooltip-inner { background: #fff; color: #48c7ec; min-width: 120px; } .tooltip-inner { max-width: 200px; padding: .25rem .5rem; color: #fff; text-align: center; background-color: #000; border-radius: .25rem; } .bs-tooltip-auto[x-placement^=top] .arrow::before, .bs-tooltip-top .arrow::before { top: 0; border-width: .4rem .4rem 0; border-top-color: #000; } /*** ==================================================================== Main Footer section ==================================================================== ***/ .main-footer { position: relative; background: #2d294d; } .main-footer.style-two { background: #1a1a1a; } .main-footer.style-three { background: #1b1b1b; } .main-footer .widget-wrapper { padding: 110px 0 40px; border-bottom: 1px solid #423f5f; } .main-footer.style-three .widget-wrapper { border-bottom: 0px; } .main-footer .footer-widget { position: relative; margin-bottom: 30px; } .main-footer .footer-widget .widget-title { font-size: 20px; font-weight: 500; color: #fff; margin-bottom: 30px; } .main-footer .footer-widget .widget-title-two { position: relative; font-size: 20px; font-weight: 500; color: #fff; padding-bottom: 20px; margin-bottom: 40px; } .main-footer .footer-widget .widget-title-two:before { position: absolute; content: ''; background: var(--theme-color-three); left: 0; bottom: 0; width: 50px; height: 2px; } .contact-widget { position: relative; } .contact-widget ul { margin-bottom: 15px; } .contact-widget ul li { font-size: 15px; color: #9b99ad; margin-bottom: 5px; } .contact-widget ul li a { color: #9b99ad; } .contact-widget h3 { font-size: 24px; color: #fff; } .contact-widget h3 a { color: #fff; } /*About Widget*/ .about-widget { position: relative; } .about-widget ul li { font-size: 15px; color: #9b99ad; margin-bottom: 10px; } .about-widget ul li { position: relative; margin-bottom: 6px; } .about-widget ul li a { position: relative; color: #9b99ad; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; } .about-widget ul li a:hover { padding-left: 22px; color: #fff; font-weight: 500; } .about-widget ul li a:before { position: absolute; content: "\f122"; font-size: 14px; font-family: Flaticon; color: var(--theme-color); left: 0; top: -4px; opacity: 0; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; } .about-widget ul li a:hover:before { opacity: 1; } /*Link Widget*/ .link-widget { position: relative; } .link-widget ul li { font-size: 15px; color: #9b99ad; margin-bottom: 10px; } .link-widget ul li { position: relative; margin-bottom: 6px; } .link-widget ul li a { position: relative; color: #9b99ad; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; } .link-widget ul li a:hover { padding-left: 22px; color: #fff; } .link-widget ul li a:before { position: absolute; content: "\f122"; font-size: 14px; font-family: Flaticon; color: var(--theme-color); left: 0; top: -4px; opacity: 0; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; } .link-widget ul li a:hover:before { opacity: 1; } /* Newsletter Widget */ .newsletter-widget { position: relative; } .newsletter-widget .text { position: relative; margin-bottom: 16px; color: #9b99ad; } .newsletter-widget form input { position: relative; padding: 0 15px; border: 1px solid #423f5f; height: 54px; line-height: 20px; background: transparent; border-radius: 6px; margin-bottom: 10px; color: #56546b; width: 100%; } .newsletter-widget form button { background: transparent; font-size: 13px; font-weight: 500; color: var(--theme-color); text-transform: uppercase; } .newsletter-widget form button span { margin-right: 10px; } /* About Widget Two */ .about-widget-two { position: relative; } .about-widget-two .text { color: #e0e0e0; margin-bottom: 35px; line-height: 30px; } /* Link Widget Two */ .link-widget-two { position: relative; } .link-widget-two ul li { font-size: 15px; color: #9b99ad; margin-bottom: 10px; } .link-widget-two ul li { position: relative; margin-bottom: 13px; } .link-widget-two ul li a { position: relative; padding-left: 22px; color: #e0e0e0; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; } .link-widget-two ul li a:hover { color: var(--theme-color-two); } .link-widget-two ul li a:before { position: absolute; content: "\f192"; font-size: 14px; font-family: FOntAwesome; left: 0; top: -4px; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; color: #5e5e5e; } .link-widget-two ul li a:hover:before { color: var(--theme-color-two); } /* Post Widget */ .post-widget .post { margin-bottom: 31px; } .post-widget .post .date { font-size: 15px; color: #858585; margin-bottom: 5px; } .post-widget .post .date span { margin-right: 8px; color: var(--theme-color-two); font-size: 15px; } .post-widget .post h4 { font-size: 18px; color: #e0e0e0; } .post-widget .post h4 a { color: #e0e0e0; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; } .post-widget .post h4 a:hover { color: var(--theme-color-two); } /* Office Location Widget */ .office-location-widget .wrapper-box { position: relative; height: 180px; width: 100%; margin-bottom: 22px; } .office-location-widget .wrapper-box:before { content: ''; position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; display: block; background: url(../images/resource/map.png) center center no-repeat; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .office-location-widget .location-point { position: absolute; left: 6%; top: 16%; width: 15px; height: 15px; border-radius: 50%; background: var(--theme-color-two); cursor: pointer; } .office-location-widget .location-point:nth-child(2) { left: 31%; top: 42%; } .office-location-widget .location-point:nth-child(3) { left: auto; right: 26%; top: 18%; } .office-location-widget .location-point:nth-child(4) { left: 43%; bottom: 17%; top: inherit; } .office-location-widget .location-point:nth-child(5) { left: auto; right: 23%; top: 58%; } .office-location-widget .location-point:after { position: absolute; content: '+'; left: 3px; top: -6.5px; font-size: 14px; font-weight: 700; } .office-location-widget .location-point:before { position: absolute; content: ''; left: 0px; top: 0px; height: 15px; width: 15px; border-radius: 50%; -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.09); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.09); -webkit-animation: ripple 1s infinite; animation: ripple 3s infinite; opacity: .2; } .office-location-widget .location-point:nth-child(1):before, .office-location-widget .location-point:nth-child(3):before { -webkit-animation-delay: .7s; animation-delay: .7s; } @-webkit-keyframes ripple { 70% { -webkit-box-shadow: 0 0 0 20px 0 0 20px 0 rgb(255, 255, 255); box-shadow: 0 0 0 20px 0 0 20px 0 rgb(255, 255, 255); } 100% { -webkit-box-shadow: 0 0 0 0 rgb(255, 255, 255); box-shadow: 0 0 0 0 rgb(255, 255, 255); } } @keyframes ripple { 70% { -webkit-box-shadow: 0 0 0 20px rgb(255, 255, 255, 0.2); box-shadow: 0 0 0 20px rgb(255, 255, 255, 0.2); } 100% { -webkit-box-shadow: 0 0 0 0 rgb(255, 255, 255, 0.0); box-shadow: 0 0 0 0 rgb(255, 255, 255, 0.0); } } .office-location-widget .location-point .content { opacity: 0; position: relative; min-width: 150px; bottom: 73px; left: -8px; -webkit-transition: 1s; -o-transition: 1s; transition: 1s; -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px); background: #fff; font-size: 15px; padding: 8px 10px; border-radius: 6px; z-index: 9; pointer-events: none; } .office-location-widget .location-point:hover .content { opacity: 1; -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } .office-location-widget .location-point .content:before { position: absolute; content: ''; left: 8px; height: 18px; width: 18px; bottom: -16px; background: #fff; -webkit-clip-path: polygon(50% 50%, 0 0, 100% 0); clip-path: polygon(50% 50%, 0 0, 100% 0); } .office-location-widget .location-point .text { font-size: 15px; font-weight: 400; line-height: 20px; color: #858585; } .office-location-widget .link-btn a { background: transparent; font-size: 13px; font-weight: 500; color: #fff; text-transform: uppercase; } .office-location-widget .link-btn a span { margin-right: 10px; color: var(--theme-color-two); } /* About Widget Three */ .about-widget-three { position: relative; } .about-widget-three .logo { margin-bottom: 30px; } .about-widget-three .text { margin-bottom: 30px; } .about-widget-three .copyright-text { font-size: 15px; color: #e0e0e0; } .about-widget-three .copyright-text span { color: var(--theme-color-three); margin-right: 8px; } /* Instagram-widget */ .instagram-widget { position: relative; } .instagram-widget .wrapper-box { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 -7px; } .instagram-widget .image { position: relative; margin: 0 7px 14px; } .instagram-widget .image a { position: relative; display: block; } .instagram-widget .image a:before { position: absolute; content: ''; background: #000; left: 5px; top: 5px; right: 5px; bottom: 5px; border-radius: 4px; opacity: 0; -webkit-transform: scale(.7); -ms-transform: scale(.7); transform: scale(.7); -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; } .instagram-widget .image:hover a:before { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: .85; } .instagram-widget .image img { border-radius: 4px; } /* Twitter Widget */ .twitter-widget { position: relative; } .twitter-widget .text { position: relative; margin-top: -10px; } .twitter-widget .link a, .twitter-widget .text a { color: var(--theme-color-three); } .twitter-widget .link { margin-bottom: 25px; } .twitter-widget .twitter-portfolio { position: relative; padding-left: 50px; } .twitter-widget .twitter-portfolio .icon { position: absolute; left: 0; top: 0; font-size: 40px; color: var(--theme-color-three); } .twitter-widget .twitter-portfolio h4 { font-size: 20px; color: #fff; } .twitter-widget .twitter-portfolio h4 a { color: #fff; } .twitter-widget .twitter-portfolio .user { color: #858585; } /* Contact Widget Two */ .contact-widget-two { position: relative; } .contact-widget-two ul { margin-bottom: 15px; } .contact-widget-two ul li { font-size: 15px; color: #9b99ad; margin-bottom: 5px; } .contact-widget-two ul li a { color: #9b99ad; } .contact-widget-two h3 { font-size: 24px; color: #fff; } .contact-widget-two h3 a { color: #fff; } /* Link Widget Three */ .link-widget-three { position: relative; } .link-widget-three ul li { font-size: 15px; color: #9b99ad; margin-bottom: 10px; } .link-widget-three ul li { position: relative; margin-bottom: 6px; } .link-widget-three ul li a { position: relative; padding-left: 22px; color: #acb2c3; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; } .link-widget-three ul li a:hover { color: var(--theme-color-four); } .link-widget-three ul li a:before { position: absolute; content: "\f00c"; font-size: 14px; font-family: FOntAwesome; left: 0; top: -4px; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; color: #acb2c3; } .link-widget-three ul li a:hover:before { color: var(--theme-color-four); } /* Footer Bottom */ .footer-bottom { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding-top: 35px; } .footer-bottom .left-content { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 35px; } .footer-bottom .left-content .icon { margin-right: 15px; } .footer-bottom .left-content .copyright-text { font-size: 16px; font-weight: 300; color: #9b99ad; } .footer-bottom .left-content .copyright-text a { color: #fff; } .footer-bottom .right-content { margin-bottom: 35px; } .footer-bottom-two .copy-right-text { text-align: center; color: #e0e0e0; padding: 24px 0; } .main-footer.style-two .widget-wrapper { border-bottom: 1px solid rgba(255, 255, 255, 0.10); } /* Footer Bottom Style Three */ .footer-bottom-three { border-top: 1px solid rgba(255, 255, 255, 0.10); } /* Main Footer Style Four */ .main-footer.style-four .footer-bottom-two { background: #1f2947; } .main-footer.style-four { background: #283354; } .main-footer.style-four .newsletter-one { -webkit-transform: translateY(-68px); -ms-transform: translateY(-68px); transform: translateY(-68px); margin-bottom: -65px; } .main-footer.style-four .widget-wrapper { border-bottom: 0px; padding-bottom: 100px; } .main-footer.style-four .post-widget .post h4 { font-size: 16px; line-height: 26px; margin-bottom: 7px; } .main-footer.style-four .post-widget .post { margin-bottom: 25px; } .main-footer.style-four .post-widget .post .date { color: var(--theme-color-four); } .main-footer.style-four .post-widget .post .date span { color: var(--theme-color-four); } .main-footer.style-four .post-widget .post h4 a:hover { color: var(--theme-color-four); } .main-footer.style-four .contact-widget ul li strong { color: #fff; font-weight: 500; font-size: 13px; } .main-footer.style-four .contact-widget ul li { color: #acb2c3; font-size: 15px; } .main-footer.style-four .contact-widget ul { margin-bottom: 25px; } .main-footer.style-four .social-icon-three li a:hover { background: var(--theme-color-four); border-color: var(--theme-color-four); } /* Social Icon Four */ .social-icon-four { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; border-left: 1px solid rgba(255, 255, 255, 0.1); border-right: 1px solid rgba(255, 255, 255, 0.1); } .social-icon-four li { width: 20%; } .social-icon-four li a { color: #858585; display: block; border-right: 1px solid rgba(255, 255, 255, 0.1); text-align: center; padding: 17px 0; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; } .social-icon-four li:last-child a { border-right: 0px; } .social-icon-four li a span { margin-right: 8px; } .social-icon-four .facebook:hover { color: #fff; background: #3a559f; } .social-icon-four .twitter:hover { color: #fff; background: #1c9deb; } .social-icon-four .linkedin:hover { color: #fff; background: #0073af; } .social-icon-four .linkedin:hover { color: #fff; background: #0073af; } .social-icon-four .google-plus:hover { color: #fff; background: #d64836; } .social-icon-four .pinterest:hover { color: #fff; background: #c62026; } /* Ui Selector */ .ui-selectmenu-button.ui-button { background: transparent; border-radius: 0px; border-color: #eaeaea; padding: 17px 18px; width: 100%; color: #848484; font-size: 14px; font-weight: 400; text-transform: capitalize; border-radius: 6px; } .ui-menu .ui-menu-item-wrapper { padding: 10px 18px; border-bottom: 1px solid #f4f4f4; } .ui-selectmenu-text { position: relative; overflow: visible; } .ui-selectmenu-text:after { position: absolute; content: "\f107"; font-size: 18px; font-family: Fontawesome; color: #1c1f26; top: 0; right: -18px; z-index: 99; } /* Language Switcher */ .languages { position: relative; display: inline-block; padding-right: 30px; } .languages:after { position: absolute; top: 1px; right: 30px; margin-left: -5px; z-index: 1; content: "\f107"; font-size: 15px; font-family: Fontawesome; color: #fff; padding: 0 4px; cursor: pointer; } .languages .hover { background: #e5e5e5; position: absolute; top: 0; right: 100%; display: none; margin-right: 5px; padding: 0 5px; line-height: 23px; opacity: 0; } .languages .current { display: inline-block; padding: 0 20px 0 6px; line-height: 22px; font-size: 14px; font-weight: 500; color: #fff; } .languages ul { background: #ffffff; display: none; left: 0; position: absolute; margin: 0; padding: 7px 6px; list-style: none; font-size: 13px; font-weight: 500; top: 100%; z-index: 99999; -webkit-transform: translate3d(0px, 12px, 0px); transform: translate3d(0px, 12px, 0px); -webkit-box-shadow: 0px 11px 20px rgba(0, 0, 0, 0.05); box-shadow: 0px 11px 20px rgba(0, 0, 0, 0.05); } .languages ul a { text-decoration: none; padding: 0px 10px 0 10px; display: inline-block; color: var(--dark-color); } .languages ul a.sel { color: #ccc; } .languages ul a.sel:hover { color: #ccc; } .languages ul a:hover { color: #000; } .languages:hover .hover { display: inline-block; } .languages:hover:after { border-top-color: #000; } .hidden-sidebar { position: fixed; top: 0; right: -100%; z-index: 9999; width: 100%; max-width: 470px; background: #ffffff; height: 100%; padding-left: 40px; padding-right: 40px; padding-top: 50px; overflow: auto; } .hidden-sidebar .widget-title { font-size: 20px; font-weight: 500; margin-bottom: 30px; } .hidden-sidebar-close { position: absolute; top: 40px; right: 40px; font-size: 30px; cursor: pointer; } .hidden-sidebar .logo { padding-bottom: 30px; margin-bottom: 50px; border-bottom: 1px solid #e7e7e7; } .sidebar-widget-two { margin-bottom: 50px; } .about-widget-four { position: relative; } .about-widget-four h3 { font-size: 24px; font-weight: 700; margin-bottom: 28px; } .news-widget-two { position: relative; } .widget-title-three { font-size: 18px; font-weight: 700; margin-bottom: 30px; } .news-widget-two .post-wrapper { position: relative; padding-left: 85px; margin-top: -10px; margin-bottom: 50px; } .news-widget-two .image { position: absolute; left: 0; top: 10px; } .news-widget-two .category { font-size: 13px; color: #a9a9a9; font-weight: 700; text-transform: uppercase; position: relative; margin-bottom: 0; padding-top: 8px; } .news-widget-two h4 { font-size: 16px; font-weight: 500; } .news-widget-two h4 a { color: var(--dark-color); -webkit-transition: .5s; -o-transition: .5s; transition: .5s; } .news-widget-two h4 a:hover { color: var(--theme-color); } .newsletter-widget-two { position: relative; } .newsletter-widget-two input[type="email"] { position: relative; border: 1px solid #e7e7e7; padding: 13px 20px; width: 100%; margin-bottom: 10px; } .newsletter-widget-two .theme-btn { padding: 16px 48px; } .newsletter-widget-two .theme-btn i { font-size: 13px; margin-right: 10px; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; position: relative; z-index: 5; } .newsletter-widget-two .theme-btn:hover i { color: #fff; } /* Style Two */ .hidden-sidebar.style-two .news-widget-two h4 a:hover { color: var(--theme-color-two); } .hidden-sidebar.style-two .newsletter-widget-two .theme-btn { color: var(--theme-color-two); border-color: var(--theme-color-two); } .hidden-sidebar.style-two .newsletter-widget-two .theme-btn:hover { color: #fff; } .hidden-sidebar.style-two .newsletter-widget-two .theme-btn:after, .hidden-sidebar.style-two .newsletter-widget-two .theme-btn:before { background: var(--theme-color-two); } /*** ==================================================================== donate Popup ==================================================================== ***/ .donate-popup { position: fixed; left: 0px; top: -100%; width: 100%; height: 100%; z-index: 999999; visibility: hidden; opacity: 0; pointer-events: none; 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; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .donate-popup.popup-visible { top: 0; visibility: visible; opacity: 1; pointer-events: auto; } .donate-popup .close-donate { position: absolute; right: 25px; top: 25px; font-size: 35px; color: var(--theme-color); cursor: pointer; z-index: 5; } .donate-popup .close-donate:hover { opacity: 0.70; } .donate-popup .popup-overlay { position: fixed; left: 0; top: 0; width: 100%; bottom: 0; background: #302c51; opacity: .95; cursor: url(../images/icons/close.png), auto; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; } /*============= donate form area =================*/ .donate-form-area { background: #ffffff; position: relative; max-width: 770px; margin: 0 auto; max-height: 100%; } .donate-form-area .donate-form-wrapper { background: #fff; padding: 80px 50px 50px; } .donate-form-area h3 { font-size: 24px; font-family: var(--prata); margin-top: 50px; margin-bottom: 30px; } /*check list*/ .chicklet-list { margin: 0 -4px; } .chicklet-list li { padding: 0 5px; display: inline-block; margin-bottom: 10px; position: relative; } .chicklet-list input { font-size: 15px; border: 1px solid #fff; padding: 0 20px; color: #858585; -webkit-box-shadow: inset 0px 0px 7.2px 0.8px rgba(0, 0, 0, 0.18); box-shadow: inset 0px 0px 7.2px 0.8px rgba(0, 0, 0, 0.18); max-width: 190px; border-radius: 6px; } .chicklet-list input[type=radio] { opacity: 0; position: absolute; top: 0; left: 0; } .chicklet-list label { display: block; font-size: 16px; font-weight: normal; background: #ffffff; border: 1px solid #fff; color: #000; padding: 10px 35px; text-align: center; border-radius: 0; cursor: pointer; -webkit-transition: all 0.1s ease-out; -o-transition: all 0.1s ease-out; transition: all 0.1s ease-out; -webkit-box-shadow: inset 0px 0px 7.2px 0.8px rgba(0, 0, 0, 0.18); box-shadow: inset 0px 0px 7.2px 0.8px rgba(0, 0, 0, 0.18); border-radius: 6px; } .chicklet-list :checked+label { background: var(--theme-color); color: #f7f7f7; text-shadow: none; } .chicklet-list li span { position: absolute; left: -30px; top: 9px; font-size: 16px; color: #303030; } .chicklet-list input[type="text"] { height: 50px; } /*==========*/ .donate-form-area .form-bg { background: #fff; padding: 30px 30px 15px; } .donate-form-area .default-form .form-group { margin-bottom: 30px; } .donate-form-area .default-form .form-group.d-flex { -ms-flex-wrap: wrap; flex-wrap: wrap; } .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; } .donate-form-area .checkbox { font-size: 15px; color: #858585; margin: 15px 0; } .donate-popup .form-group.d-flex { -ms-flex-wrap: wrap; flex-wrap: wrap; } .donate-popup .form-group.d-flex>* { margin-bottom: 30px; } /* Style Two */ .donate-popup.style-two .close-donate { color: var(--theme-color-two); } .donate-popup.style-two .chicklet-list :checked+label { background: var(--theme-color-two); } .donate-popup.style-two .contact-form input:focus, .donate-popup.style-two .contact-form select:focus, .donate-popup.style-two .contact-form textarea:focus { border-color: var(--theme-color-two); } .donate-popup.style-two .btn-style-one { color: var(--theme-color-two); border-color: var(--theme-color-two); } .donate-popup.style-two .btn-style-one:before { background: var(--theme-color-two); } .donate-popup.style-two .btn-style-one:after { background-color: var(--theme-color-two); } /* Style Three */ .donate-popup.style-three .close-donate { color: var(--theme-color-three); } .donate-popup.style-three .chicklet-list :checked+label { background: var(--theme-color-three); } .donate-popup.style-three .contact-form input:focus, .donate-popup.style-three .contact-form select:focus, .donate-popup.style-three .contact-form textarea:focus { border-color: var(--theme-color-three); } .donate-popup.style-three .btn-style-one { color: var(--theme-color-two); border-color: var(--theme-color-three); } .donate-popup.style-three .btn-style-one:before { background: var(--theme-color-three); } .donate-popup.style-three .btn-style-one:after { background-color: var(--theme-color-three); } /* Style Four */ .donate-popup.style-four .close-donate { color: var(--theme-color-four); } .donate-popup.style-four .chicklet-list :checked+label { background: var(--theme-color-four); } .donate-popup.style-four .contact-form input:focus, .donate-popup.style-four .contact-form select:focus, .donate-popup.style-four .contact-form textarea:focus { border-color: var(--theme-color-four); } .donate-popup.style-four .btn-style-one { color: var(--theme-color-four); border-color: var(--theme-color-four); } .donate-popup.style-four .btn-style-one:before { background: var(--theme-color-four); } .donate-popup.style-four .btn-style-one:after { background-color: var(--theme-color-four); } /* Style Five */ .donate-popup.style-five .close-donate { color: var(--theme-color-five); } .donate-popup.style-five .chicklet-list :checked+label { background: var(--theme-color-five); } .donate-popup.style-five .contact-form input:focus, .donate-popup.style-five .contact-form select:focus, .donate-popup.style-five .contact-form textarea:focus { border-color: var(--theme-color-five); } .donate-popup.style-five .btn-style-one { color: var(--theme-color-five); border-color: var(--theme-color-five); } .donate-popup.style-five .btn-style-one:hover { color: #fff; } .donate-popup.style-five .btn-style-one:before { background: var(--theme-color-five); } .donate-popup.style-five .btn-style-one:after { background-color: var(--theme-color-five); } /*** ==================================================================== Causes Section Two ==================================================================== ***/ .causes-section-two { position: relative; padding: 0 0 80px; z-index: 9; } .causes-section-two .cause-wrapper { position: relative; margin-top: -110px; } .cause-block-two { position: relative; margin-bottom: 30px; padding: 0 13px; } .cause-block-two .inner-box { position: relative; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; padding: 2px; } .cause-block-two .inner-box:before { position: absolute; content: ''; top: 0; right: 0; left: 0; bottom: 0; border: 2px solid var(--theme-color-two); border-radius: 6px; opacity: 0; -webkit-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; -webkit-transition-delay: .4s; -o-transition-delay: .4s; transition-delay: .4s; } .cause-block-two .inner-box:hover:before { -webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); opacity: 1; } .cause-block-two .image { position: relative; } .cause-block-two .image img { width: 100%; border-top-left-radius: 6px; border-top-right-radius: 6px; } .cause-block-two .image .overlay { position: absolute; top: 0; left: 0; bottom: 0; right: 0; opacity: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; } .cause-block-two .inner-box:hover .image .overlay { opacity: 1; } .cause-block-two .image .overlay:before { position: absolute; content: ''; background: #000; opacity: .8; left: 0; top: 0; right: 0; bottom: 0; border-radius: 6px; -webkit-transform: scaleY(.6); -ms-transform: scaleY(.6); transform: scaleY(.6); -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; -webkit-transform-origin: top; -ms-transform-origin: top; transform-origin: top; -webkit-transition-delay: .1s; -o-transition-delay: .1s; transition-delay: .1s; } .cause-block-two .inner-box:hover .image .overlay:before { -webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); } .cause-block-two .lower-content { -webkit-box-shadow: 0px 20px 20px 0px rgba(89, 83, 76, 0.1); box-shadow: 0px 20px 20px 0px rgba(89, 83, 76, 0.1); border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; } .progress-levels.style-two .progress-box { margin-top: -51px; padding-top: 45px; } .progress-levels.style-two .progress-box .bar .bar-fill { background: var(--theme-color-two); } .progress-levels.style-two .progress-box .percent { background: var(--theme-color-two); padding: 1px 7px 0; line-height: 27px; border-radius: 6px; top: -43px; } .progress-levels.style-two .progress-box .percent:before { position: absolute; content: ''; left: 50%; margin-left: -5px; height: 10px; width: 10px; bottom: -10px; background: var(--theme-color-two); -webkit-clip-path: polygon(50% 50%, 0 0, 100% 0); clip-path: polygon(50% 50%, 0 0, 100% 0); } .progress-levels.style-two .progress-box .bar { background: transparent; } .cause-block-two .wrapper-box { padding: 16px 30px 20px; } .cause-block-two h4 { font-size: 20px; margin-bottom: 5px; } .cause-block-two h4 a { color: var(--dark-color); } .cause-block-two .info-box a { position: relative; font-size: 15px; color: var(--theme-color-two); } .cause-block-two .info-box a+a { padding-left: 20px; margin-left: 6px; } .cause-block-two .info-box a+a:before { position: absolute; content: '//'; font-size: 15px; left: 0; top: -4px; } .cause-block-two .info-box a span { font-size: 13px; font-weight: 500; text-transform: uppercase; } /*** ==================================================================== Feature Section ==================================================================== ***/ .feature-section { position: relative; padding: 0 0 80px; } .feature-block-two .inner-box { position: relative; margin-bottom: 30px; padding: 45px 15px; border: 1px solid #eaeaea; border-radius: 6px; text-align: center; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; } .feature-block-two .inner-box:hover { -webkit-box-shadow: 0px 20px 20px 0px rgba(0, 0, 0, 0.15); box-shadow: 0px 20px 20px 0px rgba(0, 0, 0, 0.15); } .feature-block-two .icon-box { margin-bottom: 14px; line-height: 90px; } .feature-block-two h4 { font-size: 20px; } .feature-block-two .overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; border-radius: 6px; overflow: hidden; background-color: #222; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; padding-top: 40px; } .feature-block-two .inner-box:hover .overlay { opacity: 1; } .feature-block-two .overlay:before { position: absolute; content: ''; background: #000; opacity: .75; left: 0; top: 0; right: 0; bottom: 0; } .feature-block-two .overlay h4 { color: #fff; margin-bottom: 13px; } .feature-block-two .overlay .text { color: #bebebe; position: relative; } .feature-block-two .overlay .link-btn { position: absolute; left: 0; bottom: 0; width: 100%; } .feature-block-two .overlay .link-btn a { display: block; border-top-left-radius: 0px; border-top-right-radius: 0px; padding: 13px 40px; } .call-to-action { position: relative; margin-top: 40px; } .call-to-action .wrapper-box { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; } .call-to-action .left-content, .call-to-action .right-content { margin-bottom: 30px; } .call-to-action h3 { font-size: 24px; margin-bottom: 10px; } /*** ==================================================================== Causes Section Three ==================================================================== ***/ .causes-section-three { position: relative; background-size: cover; } .causes-section-three .cause-carousel-wrapper { position: relative; padding: 110px 0; padding-right: 170px; } .causes-section-three .cause-carousel-wrapper:before { position: absolute; content: ''; background: var(--theme-color-two); width: 2px; top: 0; right: 170px; bottom: 0; } .cause-block-three .inner-box { position: relative; padding-left: 184px; } .cause-block-three .image img { width: auto; border-radius: 6px; } .cause-block-three .content-wrapper { position: absolute; left: 0; top: 40px; width: 100%; max-width: 540px; } .cause-block-three .content { background: #fff; padding: 20px 15px 9px; border-radius: 6px; border-top-left-radius: 0px; text-align: center; } .cause-block-three .progress-levels.style-two .progress-box { margin-top: 0; margin-bottom: -10px; } .cause-block-three h4 { font-size: 20px; margin-bottom: 15px; text-transform: uppercase; } .cause-block-three h4 a { color: var(--dark-color); } .cause-block-three .text { margin-bottom: 20px; } .cause-block-three .info-box { margin-bottom: 25px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .cause-block-three .info-box li { position: relative; margin-right: 20px; padding-right: 20px; } .cause-block-three .info-box li:before { position: absolute; content: ''; background: #eaeaea; width: 1px; top: 8px; right: 0; bottom: 8px; } .cause-block-three .info-box li:last-child { margin-right: 0px; padding-right: 0px; } .cause-block-three .info-box li:last-child:before { display: none; } .cause-block-three .info-box a { font-size: 18px; color: var(--dark-color); line-height: 24px; } .cause-block-three .info-box a span { color: var(--theme-color-two); font-size: 15px; text-transform: uppercase; font-weight: 500; } .cause-block-three .donate-btn a:before { display: none; } .causes-section-three .owl-dot-style-one .owl-dots { position: absolute; right: -115px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); counter-reset: count; } .causes-section-three .owl-dot-style-one .owl-dots .owl-dot { display: block; margin: 15px 0; } .causes-section-three .owl-dot-style-one .owl-dots .owl-dot span { width: 60px; height: 60px; } .causes-section-three .owl-dot-style-one .owl-dots .owl-dot.active span, .causes-section-three .owl-dot-style-one .owl-dots .owl-dot:hover span { border-color: var(--theme-color-two); } .causes-section-three .owl-dot-style-one .owl-dots .owl-dot:before { position: absolute; display: inline-block; top: 0; left: 0; width: 58px; text-align: center; font-size: 18px; line-height: 60px; color: #858585; font-weight: 500; counter-increment: count; content: "" counter(count); } .causes-section-three .owl-dot-style-one .owl-dots .owl-dot.active:before { color: var(--theme-color-two); } /* Style Two */ .causes-section-three.style-two { padding: 110px 0 10px; } .causes-section-three.style-two .wrapper-box { counter-reset: count; } .cause-block-three.style-two .content { -webkit-box-shadow: 0px 0px 45px 5px rgba(89, 83, 76, 0.08); box-shadow: 0px 0px 45px 5px rgba(89, 83, 76, 0.08); } .cause-block-three.style-two .progress-levels.style-two .progress-box .percent { background: var(--theme-color); color: #fff; } .cause-block-three.style-two .progress-levels.style-two .progress-box .percent:before { background: var(--theme-color); } .cause-block-three.style-two .progress-levels.style-two .progress-box .bar .bar-fill { background: var(--theme-color); } .cause-block-three.style-two .info-box a span { color: var(--theme-color); } .cause-block-three.style-two .donate-btn .theme-btn { background: transparent; border: 2px solid var(--theme-color); border-radius: 22px; } .cause-block-three.style-two .donate-btn .theme-btn:hover { border-color: var(--dark-color); } .cause-block-three.style-two .inner-box { padding-right: 106px; margin-bottom: 100px; } .cause-block-three.style-two .inner-box:after { position: absolute; display: inline-block; top: 50%; display:none !important; right: 70px; font-size: 150px; line-height: 150px; color: #eeeeee; background: #fff; padding: 50px 0; font-family: var(--prata); counter-increment: count; content: "0" counter(count); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); font-style: italic; } .cause-block-three.style-two .inner-box:before { position: absolute; content: ''; width: 1px; top: 0; right: 140px; bottom: 0; background: #eaeaea; } /* Nth child even */ /*** ==================================================================== Projects Section ==================================================================== ***/ .projects-section { position: relative; padding:59px 0 59px; } .project-block-one { position: relative; } .project-block-one .inner-box { position: relative; margin-bottom: 30px; border-radius: 6px; overflow: hidden; } .project-block-one .image { position: relative; overflow: hidden; border-radius: 6px; } .project-block-one .image:before { position: absolute; content: ''; background: #000; opacity: .8; left: 0; bottom: 0; top: 0; right: 0; -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%); clip-path: polygon(100% 0, 100% 100%, 0 100%); -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); -webkit-transition-delay: .3s; -o-transition-delay: .3s; transition-delay: .3s; } .project-block-one .inner-box:hover .image:before { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .project-block-one .image img { width: 100%; } .project-block-one .image .icon-box { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-size: 65px; width: 90px; height: 90px; line-height: 90px; color: var(--dark-color-two); text-align: center; border-radius: 50%; opacity: 0; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; } .project-block-one .inner-box:hover .image .icon-box { opacity: 1; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .project-block-one .image .icon-box:before { content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; border-radius: 50%; -webkit-transform: scale(0, 0); -ms-transform: scale(0, 0); transform: scale(0, 0); background: var(--theme-color-two); -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; } .project-block-one .inner-box:hover .image .icon-box:before { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .project-block-one .image .icon-box span { display: inline-block; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; position: relative; } .project-block-one .inner-box:hover .image .icon-box span {} .project-block-one h3 { position: absolute; left: 50%; bottom: 20px; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); font-size: 24px; } .project-block-one h3 a { color: #fff; } /*** ==================================================================== Testimonial Section ==================================================================== ***/ .testimonial-section { position: relative; padding: 110px 0 80px; } .testimonial-section .sec-bg-one { position: absolute; left: 0; top: 0; height: 100%; width: 35%; background-position: left; background-size: cover; } .testimonial-section .sec-bg-one:before { position: absolute; content: ''; background: #f4f1ee; opacity: .85; left: 0; top: 0; width: 100%; height: 100%; } .testimonial-section .sec-bg-two { position: absolute; right: 0; top: 0; height: 100%; width: 65%; background-position: right; background-size: cover; } .testimonial-section .testimonial-carousel-wrapper { background: #fff; padding: 40px; border-radius: 6px; } .testimonial-block-one { position: relative; } .testimonial-block-one .inner-box { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; } .testimonial-block-one .author-box { position: relative; width: 50%; } .testimonial-block-one .author-info { position: relative; background: #f4f1ee; padding: 50px 30px; text-align: center; border-radius: 6px; margin-right: 35px; } .testimonial-block-one .author-box .image { margin-bottom: 15px; } .testimonial-block-one .author-box .image img { width: auto; border-radius: 50%; margin: 0 auto; } .testimonial-block-one .author-box .author-title { font-size: 20px; margin-bottom: 5px; } .testimonial-block-one .author-box .designation { font-size: 15px; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid #e1e1e1; } .testimonial-block-one .author-box .designation a { color: var(--theme-color-two); } .testimonial-block-one .logo img { width: auto; margin: 0 auto; } .testimonial-block-one .content-box { position: relative; width: 50%; padding: 40px 0; } .testimonial-block-one .content-box h4 { font-size: 20px; margin-bottom: 25px; line-height: 30px; } .testimonial-block-one .content-box .text { margin-bottom: 25px; font-size: 17px; font-weight: 300; } .testimonial-block-one .content-box .rating a { color: var(--theme-color-two); font-size: 20px; margin-right: 3px; } .testimonial-block-one .content-box .quote { position: absolute; bottom: 0; right: 0; font-size: 60px; color: #f4f1ee; } .testimonial-section .owl-nav { position: absolute; left: -140px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .testimonial-section .owl-next, .testimonial-section .owl-prev { position: relative; background: #fff; width: 60px; height: 60px; line-height: 60px; text-align: center; font-size: 30px; border-radius: 50%; color: #a6a6a6; margin: 20px 0; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; } .testimonial-section .owl-next:hover, .testimonial-section .owl-prev:hover { color: var(--theme-color-two); -webkit-box-shadow: 0px 20px 20px 0px rgba(0, 0, 0, 0.08); box-shadow: 0px 20px 20px 0px rgba(0, 0, 0, 0.08); } .testimonial-section .owl-next span, .testimonial-section .owl-prev span { display: inline-block; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); position: relative; left: 2px; top: 1px; } /* Style Two */ .testimonial-section.style-two .owl-next:hover, .testimonial-section.style-two .owl-prev:hover, .testimonial-block-one.style-two .content-box .rating a, .testimonial-block-one.style-two .author-box .designation a { color: var(--theme-color); } /*** ==================================================================== Events Section Two ==================================================================== ***/ .events-section-two { position: relative; padding: 60px 0 40px; } .event-block-two { position: relative; } .event-block-two .inner-box { position: relative; margin-bottom: 30px; -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1); border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; } .event-block-two .inner-box .image img { border-top-left-radius: 6px; border-top-right-radius: 6px; } .event-block-two .countdown-timer { position: relative; text-align: center; -webkit-box-shadow: 0px 20px 20px 0px rgba(89, 83, 76, 0.08); box-shadow: 0px 20px 20px 0px rgba(89, 83, 76, 0.08); margin-top: -68px; background: #fff; margin-bottom: 30px; padding: 13px 0; border-radius: 6px; } .countdown-timer li { position: relative; display: inline-block; float: none; text-align: center; margin: 0; } .countdown-timer li:first-child { margin-left: 0; } .countdown-timer li:last-child { margin-right: 0; } .countdown-timer li span.days, .countdown-timer li span.hours, .countdown-timer li span.minutes, .countdown-timer li span.seconds { position: relative; display: block; color: var(--dark-color); font-size: 24px; min-width: 25px; padding: 0 19px; text-align: center; border-radius: 0px; } .countdown-timer li span.timeRef { position: relative; color: #858585; font-size: 13px; font-weight: 400; text-transform: uppercase; } .event-block-two .lower-content { position: relative; padding: 25px 40px 35px; background: #fff; } .event-block-two h3 { font-size: 24px; } .event-block-two .event-info { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 10px; } .event-block-two .event-info div { font-size: 15px; margin-right: 20px; } .event-block-two .event-info span { color:#25ae42; margin-right: 8px; } .event-block-two h3 a { color: var(--dark-color-two); } /* Event Block Three */ .event-block-three { position: relative; } .event-block-three .inner-box { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1); margin-bottom: 30px; border-top-right-radius: 6px; border-bottom-right-radius: 6px; } .event-block-three .image img { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } .event-block-three .content { position: relative; padding: 35px 45px; min-height: 120px; } .event-block-three .content .toggle-btn { position: absolute; left: -14px; top: 50%; font-size: 13px; width: 28px; height: 28px; line-height: 28px; border: 1px solid #eaeaea; border-radius: 6px; text-align: center; margin-top: -14px; background: #fff; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; } .event-block-three .content .toggle-btn.active { background: var(--theme-color-two); } .event-block-three .content .toggle-btn.active span:before { content: "\f068"; } .event-block-three .content h4 { font-size: 20px; } .event-block-three .content h4 a { color: var(--dark-color-two); } .event-block-three .content .time { font-size: 15px; margin-right: 20px; } .event-block-three .content .time span { color:#25ae42; margin-right: 8px; } .event-block-three .join-btn { position: absolute; left: 100%; top: 0; color: var(--dark-color-two); font-size: 13px; font-weight: 500; text-transform: uppercase; background: #f4f1ee; padding: 9px 26px; width: -webkit-max-content; width: -moz-max-content; width: max-content; -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; border-top-right-radius: 6px; border-top-left-radius: 6px; } .event-block-three .join-btn:hover { background: var(--theme-color-two); } .event-block-three .content .text { display: none; position: absolute; top: 35px; left: 45px; width: -webkit-max-content; width: -moz-max-content; width: max-content; background: #fff; } /*** ==================================================================== Payment Donate Section ==================================================================== ***/ .payment-donate-section { position: relative; padding: 110px 0; background-color: #222; background-size: cover; } .payment-donate-section .chicklet-list label { font-size: 18px; background: transparent; color: #fff; border-color: rgba(236, 232, 229, 0.10); padding: 15px 70px; margin-bottom: 0; } .payment-donate-section .chicklet-list :checked+label { background: #242424; } .payment-donate-section .chicklet-list { margin: 0 -15px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .payment-donate-section .chicklet-list li { padding: 0 15px 30px; margin-bottom: 0; } .payment-donate-section .other-amount { -ms-flex-wrap: wrap; flex-wrap: wrap; } .payment-donate-section form .other-amount>* { margin-bottom: 30px; } .payment-donate-section .other-amount input { position: relative; -webkit-box-shadow: inset 0px 0px 7.2px 0.8px rgba(0, 0, 0, 0.18); box-shadow: inset 0px 0px 7.2px 0.8px rgba(0, 0, 0, 0.18); max-width: 370px; border-radius: 6px; font-size: 18px; background: transparent; color: #fff; border: 1px solid rgba(236, 232, 229, 0.10); padding: 15px 20px; padding-left: 80px; width: 100%; } .payment-donate-section .form-group { position: relative; margin: 0; margin-right: 30px; } .payment-donate-section .form-group:before { position: absolute; content: "$"; background: var(--theme-color-two); left: 0; top: 0; width: 60px; height: 100%; text-align: center; line-height: 60px; color: #1a1a1a; font-size: 18px; border-top-left-radius: 6px; border-bottom-left-radius: 6px; } /*** ==================================================================== Volunteer Section Two ==================================================================== ***/ .volunteer-section-two { position: relative; padding:57px 0 35px; background-color: #f7f7f7; background-size: cover; } .volunteer-section-two .volunteer-image { height: 363px; } .volunteer-section-two .volunteer-image img { border-radius: 6px; } .volunteer-section-two .swiper-nav-button { position: absolute; right: 30px; bottom: 33px; width: 86px; height: 60px; } .volunteer-section-two .swiper-nav-button .swiper-button-next { width: 37px; height: 37px; background:#25ae42; text-align: center; line-height: 37px; top: 0; right: 0; margin-top: 0; font-size: 26px; border-bottom-right-radius: 6px; } .volunteer-section-two .swiper-nav-button .swiper-button-prev { width: 37px; height: 37px; background:#25ae42; text-align: center; line-height: 37px; top: 0; left: 0; margin-top: 0; font-size: 26px; border-top-left-radius: 6px; } .volunteer-section-two .volunteer-block { position: relative; padding-bottom: 0px; } .volunteer-section-two .icon-box { position: relative; font-size: 60px; color: var(--theme-color-two); margin-bottom: 30px; line-height: 60px; } .volunteer-section-two h1 { font-size: 36px; line-height: 50px; font-family: var(--prata); margin-bottom: 35px; color: var(--dark-color-two); } .volunteer-section-two h4 { font-size: 20px; margin-bottom: 20px; color: var(--dark-color-two); } .volunteer-section-two h4 span { font-size: 16px; margin-right: 15px; color: #25ae42; } .volunteer-section-two .list { margin-left: 40px; margin-bottom: 38px; } .volunteer-section-two .list li { position: relative; font-size: 15px; color: #858585; padding-left: 23px; margin-bottom: 5px; } .volunteer-section-two .list li:before { position: absolute; content: "\f122"; font-size: 13px; font-family: Flaticon; color: #25ae42; left: 0; top: 1px; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; } .volunteer-section-two .volunteer-carousel-pagination { bottom: 0; counter-reset: count; } .volunteer-carousel-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active, .volunteer-carousel-pagination .swiper-pagination-bullet { position: relative; background: transparent; width: 40px; height: 35px; opacity: 1; top: 21px; } .volunteer-carousel-pagination .swiper-pagination-bullet:before { position: absolute; display: inline-block; top: 0; left: 0; text-align: center; font-size: 18px; color: #a6a6a6; font-weight: 400; counter-increment: count; content: "0" counter(count); -webkit-transition: .2s ease; -o-transition: .2s ease; transition: .2s ease; } .volunteer-carousel-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active:before { color: var(--theme-color-two); } .volunteer-carousel-pagination .swiper-container-horizontal>.swiper-pagination-bullets span+span:after { position: absolute; content: ''; left: 0; top: 0; width: 1px; height: 20px; background: #ccc; } /* Swiper Counter Two */ .swiper-counter-two { position: absolute; font-weight: 700; font-size: 12px; color: #999; left: 0; bottom: -14px; z-index: 9; line-height: 50px; display: inline-block; } .swiper-counter-two div { position: relative; top: 0; width: 32px; height: 32px; line-height: 32px; display: inline-block; font-size: 18px; font-weight: 400; color: #a6a6a6; } .swiper-counter-two div#current { margin-right: 20px; font-size: 30px; color: #25ae42; } .swiper-counter-two div#total { right: 6px; } .swiper-counter-two div#total:before { content: ''; position: absolute; left: -7px; width: 1px; height: 15px; top: 8px; font-size: 24px; background: #ccc; } /*** ==================================================================== Blog Section Two ==================================================================== ***/ .blog-section-two { position: relative; padding: 110px 0 80px; } .news-block-two { position: relative; } .news-block-two .inner-box { position: relative; margin-bottom: 30px; -webkit-box-shadow: 0px 0px 45px 5px rgba(89, 83, 76, 0.08); box-shadow: 0px 0px 45px 5px rgba(89, 83, 76, 0.08); -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; border-radius: 6px; padding: 30px; } .news-block-two .inner-box:hover { -webkit-transform: translateY(-5px); -ms-transform: translateY(-5px); transform: translateY(-5px); -webkit-box-shadow: 0px 0px 45px 5px rgba(89, 83, 76, 0.16); box-shadow: 0px 0px 45px 5px rgba(89, 83, 76, 0.16); } .news-block-two .inner-box:before { position: absolute; content: ''; background: var(--theme-color-two); height: 2px; width: 100%; left: 0; bottom: 0; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; } .news-block-two .inner-box:hover:before { -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); } .news-block-two .category { position: absolute; left: 20px; top: 20px; z-index: 9; } .news-block-two .category a { background: var(--dark-color); color: #fff; padding: 4px 10px; border-radius: 6px; margin-right: 6px; } .news-block-two .image { position: relative; } .news-block-two .image img { border-top-left-radius: 6px; border-top-right-radius: 6px; width: 100%; } .news-block-two .post-meta-info { position: absolute; bottom: 20px; right: 20px; } .news-block-two .post-meta-info a { color: #fff; margin-right: 10px; } .news-block-two .post-meta-info a span { margin-right: 10px; } .news-block-two .youtube-video-box { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .news-block-two .youtube-video-box a { color: #fff; font-size: 40px; } .news-block-two .lower-content { position: relative; padding: 20px 0 0; } .news-block-two .date { margin-bottom: 8px; color: #858585; } .news-block-two .date span { margin-right: 8px; color: var(--theme-color-two); font-size: 15px; } .news-block-two h4 { font-size: 20px; margin-bottom: 20px; } .news-block-two h4 a { color: var(--dark-color-two); -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; } .news-block-two h4 a:hover { color: var(--theme-color-two); } .news-block-two .author-info { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; } .news-block-two .author-info .image { position: relative; margin-right: 10px; } .news-block-two .author-info .image img { border-radius: 50%; } .news-block-two .author-info .author-title { font-size: 13px; font-weight: 500; color: #a6a6a6; text-transform: uppercase; } .news-block-two .author-info .author-title a { color: #a6a6a6; } .news-block-two .share-icon.style-two ul a:hover { background: var(--theme-color-two); border-color: var(--theme-color-two); } /* Style Two */ .news-block-two.style-two h4 { padding-bottom: 20px; border-bottom: 1px solid #eaeaea; } .news-block-two.style-two .category a { background: rgba(0, 0, 0, 0.70); } .news-block-two.style-two .date span { color: var(--theme-color-three); } .news-block-two.style-two h4 a:hover { color: var(--theme-color-three); } .news-block-two.style-two .inner-box:before { background: var(--theme-color-three); } .news-block-two.style-two .share-icon.style-two ul a:hover { background: var(--theme-color-three); border-color: var(--theme-color-three); } /* Style Three */ .news-block-two.style-three h4 a:hover { color: var(--theme-color); } .news-block-two.style-three .date span { color: var(--theme-color); } .news-block-two.style-three .inner-box:before { background: var(--theme-color); } .news-block-two.style-three .share-icon.style-two ul a:hover { background: var(--theme-color); border-color: var(--theme-color); } /*** ==================================================================== Via Payment Section ==================================================================== ***/ .via-payment-section { position: relative; padding: 108px 0; text-align: center; background-size: cover; } .via-payment-section:before { position: absolute; content: ''; background: var(--theme-color-two); opacity: .85; left: 0; top: 0; width: 100%; height: 100%; } .via-payment-section h5 { font-size: 13px; font-weight: 500; text-transform: uppercase; margin-bottom: 30px; } .via-payment-section h1 { font-size: 36px; line-height: 50px; font-family: var(--prata); text-transform: uppercase; margin-bottom: 15px; color: #2f2f2f; padding-bottom: 55px; border-bottom: 1px solid rgba(0, 0, 0, 0.12); margin-bottom: 50px; } .via-payment-section .owl-carousel .owl-item img { width: auto; } /*** ==================================================================== About Section Two ==================================================================== ***/ .about-section-two { position: relative; padding: 110px 0 90px; } .about-section-two .image { position: relative; margin-bottom: 30px; } .about-section-two .image img { width: 100%; } .about-section-two h4 { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-size: 20px; font-weight: 500; color: #fff; width: -webkit-max-content; width: -moz-max-content; width: max-content; text-align: center; } .about-section-two .video-btn { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-size: 20px; color: #fff; width: -webkit-max-content; width: -moz-max-content; width: max-content; text-align: center; } .about-section-two .text { position: relative; line-height: 26px; margin-top: -8px; margin-bottom: 15px; } .about-section-two .link-btn { position: relative; margin-bottom: 30px; } .about-section-two .link-btn a { background: transparent; font-size: 13px; font-weight: 500; color: #02c06d; text-transform: uppercase; } .about-section-two .link-btn a span { margin-right: 10px; } /*** ==================================================================== Caring Section ==================================================================== ***/ .caring-section { position: relative; } .caring-section .wrapper-box { position: relative; margin-bottom: -160px; background-color: rgb(255, 255, 255); -webkit-box-shadow: 0px -20px 20px 0px rgba(0, 0, 0, 0.05); box-shadow: 0px -20px 20px 0px rgba(0, 0, 0, 0.05); padding: 55px; z-index: 9; } .caring-block+.caring-block { position: relative; border-left: 1px solid #eaeaea; } .caring-block .inner-box { position: relative; } .caring-block .icon-box { position: relative; font-size: 60px; color: #b6b6b6; margin: 0 auto; margin-bottom: 30px; margin-top: 10px; width: 120px; height: 120px; line-height: 120px; background: #f4f1ee; border-radius: 50%; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; text-align: center; } .caring-block .icon-box span { position: relative; } .caring-block .inner-box:hover .icon-box { color: #fff; background: var(--theme-color-three); } .caring-block .icon-box:before { position: absolute; content: ''; border: 10px solid #fff; left: 0; top: 0; width: 120px; height: 120px; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; border-radius: 50%; } .caring-block .inner-box:hover .icon-box:before { border-color: var(--theme-color-three); } .caring-block .icon-box:after { position: absolute; content: ''; border: 3px dotted var(--theme-color-three); left: 0; top: 0; width: 120px; height: 120px; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; border-radius: 50%; } .caring-block .inner-box:hover .icon-box:after { border: 50px dotted var(--theme-color-three); } .caring-block .icon-box span { position: relative; z-index: 2; } .caring-block h4 { position: relative; font-size: 20px; text-align: center; } /*** ==================================================================== Funfacts Section Two ==================================================================== ***/ .funfacts-section-two { position: relative; padding: 260px 0 80px; background: #cd0a34; } .funfacts-section-two:before { position: absolute; content: ''; background: var(--theme-color-three); left: 0; top: 0; width: 100%; height: 100%; opacity: .90; } .funfacts-section-two .sec-title h5 { color: #fff; } .counter-block-two { position: relative; margin-bottom: 30px; padding: 20px 15px; } .counter-block-two:before { position: absolute; content: ''; background: rgba(255, 255, 255, 0.4); width: 1px; height: 100%; right: 45px; top: 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .counter-block-two:last-child:before { display: none; } .counter-block-two .inner-box { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; } .counter-block-two .count-box { position: relative; font-size: 48px; font-weight: 500; line-height: 55px; color: #fff; min-width: 120px; text-align: right; margin-right: 20px; } .counter-block-two .text { position: relative; font-size: 14px; font-weight: 500; color: #fff; line-height: 24px; } /* Style Two */ .funfacts-section-two.style-two { padding-top: 110px; background: #302c51; } .funfacts-section-two.style-two:before { background: #302c51; opacity: .95; } .funfacts-section-two.style-two .sec-title h5 { color: var(--theme-color); } .funfacts-section-two.style-two .counter-block-two .count-box { color: var(--theme-color); } /* Style Three */ .funfacts-section-two.style-three { padding: 70px 0 40px; background: #242424; } .funfacts-section-two.style-three .sec-title h5 { color: var(--theme-color-five); } .funfacts-section-two.style-three:before { background: #242424 url(../images/resource/pattern-2.png); } .funfacts-section-two.style-three .counter-block-two .inner-box { display: block; text-align: center; } .funfacts-section-two.style-three .counter-block-two .count-box { text-align: center; margin-bottom: 20px; color: #02c06d; } .funfacts-section-two.style-three .counter-block-two h4 { color: #fff; font-size: 20px; margin-bottom: 20px; } .funfacts-section-two.style-three .counter-block-two:before { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); right: 0; opacity: .2; } .funfacts-section-two.style-three .counter-block-two { padding: 0 15px; } /*** ==================================================================== Causes Section Four ==================================================================== ***/ .causes-section-four { position: relative; padding: 110px 0 70px; background: #fff; } .cause-block-four { position: relative; } .cause-block-four .inner-box { position: relative; border: 1px solid #eaeaea; padding-bottom: 40px; padding-top: 40px; margin-bottom: 40px; text-align: center; background-color: #fff; -webkit-transition: .7s ease; -o-transition: .7s ease; transition: .7s ease; } .cause-block-four .inner-box:hover { -webkit-box-shadow: 0px 20px 20px 0px rgba(89, 83, 76, 0.1); box-shadow: 0px 20px 20px 0px rgba(89, 83, 76, 0.1); border-color: #fff; } .cause-block-four .inner-box:before { position: absolute; content: ''; background-image: url(../images/resource/shape-1.png); background-size: cover; background-position: bottom center; top: 0; left: 0; width: 100%; height: 170px; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; } .cause-block-four .inner-box:hover:before { background-image: url(../images/resource/shape-2.png); } .cause-block-four .image { position: relative; margin-bottom: 20px; display: inline-block; } .cause-block-four .image img { border-radius: 50%; } .cause-block-four .image .overlay { position: absolute; left: 0; top: 0; bottom: 0; right: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .cause-block-four .image .overlay:before { position: absolute; content: ''; background: #302c51; opacity: 0; left: 0; top: 0; bottom: 0; right: 0; border-radius: 50%; -webkit-transition: 1s ease; -o-transition: 1s ease; transition: 1s ease; -webkit-transform: scale(.5); -ms-transform: scale(.5); transform: scale(.5); } .cause-block-four .image:hover .overlay:before { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: .93; } .cause-block-four .image .overlay .donate-box-btn { position: relative; font-size: 13px; color: #fff; text-transform: uppercase; opacity: 0; visibility: hidden; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; -webkit-transition-delay: .3s; -o-transition-delay: .3s; transition-delay: .3s; } .cause-block-four .image:hover .overlay .donate-box-btn { opacity: 1; visibility: visible; } .cause-block-four h4 { font-size: 20px; margin-bottom: 20px; } .cause-block-four h4 a { color: #1e1e1e; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; } .cause-block-four h4 a:hover { color: var(--theme-color-three); } .cause-block-four .text { margin-bottom: 30px; } .cause-block-four .info-box { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-wrap: wrap; flex-wrap: wrap; border: 1px solid #eaeaea; margin: 0 30px; padding: 20px 0; } .cause-block-four .info-box a { font-size: 13px; text-transform: uppercase; color: #1e1e1e; line-height: 11px; position: relative; top: 5px; } .cause-block-four .info-box a span { color: var(--theme-color-three); display: block; } .cause-block-four .info-box>div { position: relative; width: 33%; } .cause-block-four .info-box>div+div:before { position: absolute; content: ''; background: #eaeaea; height: 35px; width: 1px; left: 0px; top: 0; } .cause-block-four .count-box { position: relative; font-size: 18px; color: var(--theme-color-three); padding: 5px 0; } /* Style Two */ .cause-block-four.style-two .inner-box:hover:before { background-image: url(../images/resource/shape-3.png); } .cause-block-four.style-two h4 a:hover { color: var(--theme-color); } .cause-block-four.style-two .info-box a span { color: var(--theme-color); } .cause-block-four.style-two .count-box { color: var(--theme-color); } /*** ==================================================================== Upcomig Events Section ==================================================================== ***/ .upcoming-events-section { position: relative; padding: 110px 0; background: #1b1b1b; } .event-block-four { position: relative; text-align: center; } .event-block-four h1 { font-size: 72px; line-height: 80px; font-family: var(--prata); text-transform: uppercase; color: #fff; margin-bottom: 20px; } .event-block-four .text { margin-bottom: 30px; } .event-block-four .link-box a { margin: 0 10px; } .upcoming-events-section .owl-nav-style-three .owl-nav .owl-next, .upcoming-events-section .owl-nav-style-three .owl-nav .owl-prev { color: #858585; border-color: rgba(255, 255, 255, 0.10); } .upcoming-events-section .owl-nav-style-three .owl-nav .owl-next:hover, .upcoming-events-section .owl-nav-style-three .owl-nav .owl-prev:hover { color: var(--theme-color-three); border-color: var(--theme-color-three); } /*** ==================================================================== Team Section Two ==================================================================== ***/ .team-section-two { position: relative; padding: 110px 0; } .team-block-two { position: relative; } .team-block-two .inner-box { position: relative; padding-top: 22px; margin-bottom: 30px; } .team-block-two .inner-box .image img { width: 100%; } .team-block-two .overlay { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .team-block-two .author-info { position: relative; top: 0; width: 100%; padding: 45px 0; text-align: center; } .team-block-two .author-info:before { position: absolute; content: ''; background: var(--theme-color-three); left: 0; top: 0; height: 0%; right: 22px; left: 22px; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; border-radius: 4px; } .team-block-two .inner-box:hover .author-info:before { height: 100%; } .team-block-two .author-info h4 { font-size: 20px; color: #fff; -webkit-transition: .7s ease; -o-transition: .7s ease; transition: .7s ease; opacity: 0; visibility: hidden; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); margin-bottom: 5px; } .team-block-two .inner-box:hover .author-info h4 { opacity: 1; visibility: visible; -webkit-transition-delay: .5s; -o-transition-delay: .5s; transition-delay: .5s; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .team-block-two .author-info h4 a { color: #fff; } .team-block-two .author-info .designation { color: #fff; font-size: 15px; opacity: 0; visibility: hidden; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); -webkit-transition: .7s; -o-transition: .7s; transition: .7s; } .team-block-two .inner-box:hover .author-info .designation { opacity: 1; visibility: visible; -webkit-transition-delay: .9s; -o-transition-delay: .9s; transition-delay: .9s; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .team-block-two .social-icon-two { position: relative; margin-bottom: 20px; } .team-block-two .social-icon-two li { padding: 0; margin: 0 5px; border: 0; opacity: 0; visibility: hidden; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; } .team-block-two .inner-box:hover .social-icon-two li { opacity: 1; visibility: visible; -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } .team-block-two .social-icon-two li a { width: 48px; height: 48px; line-height: 48px; font-size: 14px; } .team-block-two .social-icon-two li a:hover { background: var(--theme-color-three); color: #fff; } .team-block-two .inner-box:hover .social-icon-two li:nth-child(2) { -webkit-transition-delay: .2s; -o-transition-delay: .2s; transition-delay: .2s; } .team-block-two .inner-box:hover .social-icon-two li:nth-child(3) { -webkit-transition-delay: .4s; -o-transition-delay: .4s; transition-delay: .4s; } .team-block-two .inner-box:hover .social-icon-two li:nth-child(4) { -webkit-transition-delay: .6s; -o-transition-delay: .6s; transition-delay: .6s; } .team-section-two .owl-dot-style-one .owl-dots { margin-top: 5px; } .team-section-two .owl-dot-style-one .owl-dots .owl-dot span { height: 14px; width: 14px; } .team-section-two .owl-dot-style-one .owl-dots .owl-dot.active span { border-color: var(--theme-color-three); } /* Style Two */ .team-section-two.style-two { padding-top: 70px; } .team-section-two.style-two .auto-container { max-width: 100%; padding: 0; } .team-section-two.style-two .team-block-two .author-info:before { background: var(--theme-color); } .team-section-two.style-two .team-block-two .social-icon-two li a:hover { background: var(--theme-color); } .team-section-two.style-two .owl-dot-style-one .owl-dots .owl-dot span { width: 9px; height: 9px; } .team-section-two.style-two .owl-dot-style-one .owl-dots .owl-dot.active span { border-color: var(--theme-color); } /*** ==================================================================== Payment Donate Section Two ==================================================================== ***/ .payment-donate-section-two { position: relative; background: #1a1a1a; } .payment-donate-section-two .sec-bg-one { position: absolute; left: 0; top: 0; height: 100%; width: 36%; background-position: left; background-size: cover; } .payment-donate-section-two .sec-bg-two { position: absolute; right: 0; top: 0; height: 100%; width: 35%; background-position: right; background-size: cover; } .payment-donate-section-two .tab-content { background: var(--theme-color-three); padding: 110px 50px; margin-right: -30px; } .payment-donate-section-two .tab-content h1 { font-size: 36px; color: #fff; font-family: var(--prata); line-height: 46px; margin-bottom: 20px; } .payment-donate-section-two .tab-content .text { color: #fff; margin-bottom: 30px; } .payment-donate-section-two .chicklet-list label { font-size: 18px; background: transparent; color: #fff; border-color: rgba(236, 232, 229, 0.10); padding: 10px 33px; margin-bottom: 0; border-radius: 0px; } .payment-donate-section-two .chicklet-list :checked+label { background: #b4002b; } .payment-donate-section-two .chicklet-list { margin: 0 -15px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -ms-flex-wrap: wrap; flex-wrap: wrap; } .payment-donate-section-two .chicklet-list li { padding: 0 15px 30px; margin-bottom: 0; } .payment-donate-section-two .other-amount { -ms-flex-wrap: wrap; flex-wrap: wrap; } .payment-donate-section-two .other-amount * { margin-bottom: 30px; } .payment-donate-section-two .other-amount input { position: relative; -webkit-box-shadow: inset 0px 0px 7.2px 0.8px rgba(0, 0, 0, 0.18); box-shadow: inset 0px 0px 7.2px 0.8px rgba(0, 0, 0, 0.18); max-width: 300px; border-radius: 6px; font-size: 18px; background: transparent; color: #fff; border: 1px solid rgba(236, 232, 229, 0.10); padding: 10px 20px; padding-left: 40px; width: 100%; border-radius: 0px; } .payment-donate-section-two .form-group { position: relative; margin: 0; margin-right: 30px; } .payment-donate-section-two .form-group:before { position: absolute; content: "$"; background: transparent; left: 0; top: 0; width: 60px; height: 100%; text-align: center; line-height: 50px; color: #fff; font-size: 18px; border-top-left-radius: 6px; border-bottom-left-radius: 6px; } .payment-donate-section-two .info-box { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .payment-donate-section-two .info-box a { color: #fff; } .payment-donate-section-two .info-box a span { font-size: 13px; font-weight: 500; text-transform: uppercase; color: #fff; } .payment-donate-section-two .progress-levels { padding-bottom: 40px; } .payment-donate-section-two .progress-levels .progress-box .bar { background: #b4002b; } .payment-donate-section-two .progress-levels .progress-box .bar .bar-fill { background: #fff; } .payment-donate-section-two .btn-style-ten { padding: 13px 40px; } .payment-donate-section-two .btn-style-ten:after { background: #b4002b; } .payment-donate-section-two .nav-tabs { border: none; margin-left: 80px; } .payment-donate-section-two .nav-tabs li { width: 100%; background: TRANSPARENT; margin: 10px 0; } .payment-donate-section-two .nav-tabs li .nav-link { position: relative; color: #505050; font-size: 18px; font-weight: 500; padding-left: 0; padding-right: 0; } .payment-donate-section-two .nav-tabs .nav-link.active { border: none; background: transparent; color: #fff; } .payment-donate-section-two .nav-tabs .nav-link:hover { border-color: transparent; } .payment-donate-section-two .nav-tabs li .nav-link:after { position: absolute; content: "\f128"; font-family: Flaticon; font-size: 16px; color: var(--theme-color-three); left: -32px; top: 9px; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; opacity: 0; -webkit-transform: translateX(-10px); -ms-transform: translateX(-10px); transform: translateX(-10px); } .payment-donate-section-two .nav-tabs .nav-link.active:after { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .payment-donate-section-two .nav-tabs li .nav-link:before { position: absolute; content: ''; background: var(--theme-color-three); height: 1px; width: 50px; left: -80px; top: 23px; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; opacity: 0; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition-delay: .4s; -o-transition-delay: .4s; transition-delay: .4s; -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; } .payment-donate-section-two .nav-tabs .nav-link.active:before { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } /*** ==================================================================== Testimonial Section Two ==================================================================== ***/ .testimonial-section-two { position: relative; padding: 110px 0 80px; background: #f4f1ee; } .testimonial-section-two:before { position: absolute; content: ''; left: 0; top: 0; right: 0; bottom: 0; background: url(../images/resource/map-2.png) no-repeat center; } .testimonial-section-two .wrapper-box { position: relative; padding-right: 50px; } .testimonial-block-two .inner-box { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .testimonial-block-two .author-box .image { margin-right: 80px; position: relative; } .testimonial-block-two .author-box .image img { border-radius: 50%; } .testimonial-block-two .author-box .image .share-icon { position: absolute; left: 0; bottom: 0; width: 50px; height: 50px; text-align: center; line-height: 50px; background: var(--theme-color-three); color: #fff; font-size: 13px; border-radius: 50%; } .testimonial-block-two .content-box { position: relative; background: #fff; padding: 45px 40px; padding-left: 85px; border-left: 2px solid var(--theme-color-three); } .testimonial-block-two .content-box .icon-box { position: absolute; left: -42px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .testimonial-block-two h3 { font-size: 24px; margin-bottom: 15px; } .testimonial-block-two .text { margin-bottom: 20px; font-size: 18px; font-weight: 300; line-height: 32px; margin-right: 50px; } .testimonial-block-two .author-info { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .testimonial-block-two .author-title { font-size: 20px; color: #1e1e1e; } .testimonial-block-two .designation { font-size: 15px; } .testimonial-block-two .designation a { color: var(--theme-color-three); } .testimonial-block-two .rating { position: absolute; right: 50px; bottom: 40px; } .testimonial-block-two .rating a { color: var(--theme-color-three); font-size: 16px; } .testimonial-block-two .rating a+a { margin-left: 2px; } .testimonial-section-two .owl-dot-style-one .owl-dots { position: absolute; right: -50px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); counter-reset: count; margin: 0; } .testimonial-section-two .owl-dot-style-one .owl-dots:before { position: absolute; content: ''; background: #dcd9d6; width: 2px; top: 20px; left: 19px; bottom: 20px; } .testimonial-section-two .owl-dot-style-one .owl-dots .owl-dot { display: block; margin: 15px 0; } .testimonial-section-two .owl-dot-style-one .owl-dots .owl-dot span { width: 40px; height: 40px; background: #f4f1ee; } .testimonial-section-two .owl-dot-style-one .owl-dots .owl-dot.active span, .testimonial-section-two .owl-dot-style-one .owl-dots .owl-dot:hover span { border-color: var(--theme-color-three); } .testimonial-section-two .owl-dot-style-one .owl-dots .owl-dot:before { position: absolute; display: inline-block; top: 0; left: 0; width: 40px; text-align: center; font-size: 18px; line-height: 40px; color: #a6a6a6; font-weight: 500; counter-increment: count; content: "" counter(count); z-index: 9; } .testimonial-section-two .owl-dot-style-one .owl-dots .owl-dot.active:before { color: var(--theme-color-three); } /*** ==================================================================== Gallery Section ==================================================================== ***/ .gallery-section { position: relative; background: #fff; } .gallery-section .wrapper-box { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; } .gallery-section .content-column { position: relative; padding: 100px 60px 45px; width: 25%; } .gallery-section .content-column h5 { color: #302c51; } .gallery-section .content-column .link-btn { text-align: right; } .gallery-section .content-column .link-btn a { background: transparent; font-size: 13px; font-weight: 500; color: #302c51; text-transform: uppercase; } .gallery-section .content-column .link-btn a span { margin-right: 10px; } .gallery-section .portfolio-column { position: relative; width: 75%; overflow: hidden; } .gallery-block-one .inner-box { position: relative; } .gallery-block-one .image { position: relative; overflow: hidden; } .gallery-block-one .image img { width: 100%; } .gallery-block-one .overlay { position: absolute; left: 0; top: 0; bottom: 0; right: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .gallery-block-one .overlay:before { position: absolute; content: ''; background: #000; left: 0; top: 0; width: 100%; height: 0%; opacity: .85; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; } .gallery-block-one .inner-box:hover .overlay:before { height: 100%; } .gallery-block-one h4 { position: relative; font-size: 20px; color: #fff; margin-bottom: 35px; opacity: 0; visibility: hidden; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; -webkit-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s; } .gallery-block-one .inner-box:hover h4 { opacity: 1; visibility: visible; -webkit-transform: translateY(2px); -ms-transform: translateY(2px); transform: translateY(2px); } .gallery-block-one h4 a { color: #fff; } .gallery-block-one .zoom-btn { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 80px; height: 80px; text-align: center; line-height: 80px; border-radius: 50%; font-size: 13px; font-weight: 500; color: #fff; opacity: 0; visibility: hidden; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; } .gallery-block-one .inner-box:hover .zoom-btn { opacity: 1; visibility: visible; } .gallery-block-one .zoom-btn:before { position: absolute; content: ''; background:#223263; left: 0; top: 0; width: 100%; height: 100%; -webkit-transition: .8s ease; -o-transition: .8s ease; transition: .8s ease; -webkit-transform: scale(.5); -ms-transform: scale(.5); transform: scale(.5); border-radius: 50%; -webkit-transition-delay: .5s; -o-transition-delay: .5s; transition-delay: .5s; } .gallery-block-one .inner-box:hover .zoom-btn:before { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .gallery-block-one .zoom-btn span { position: relative; } .gallery-section .owl-nav-style-three .owl-nav { z-index: 0; height: 0px; } .gallery-section .owl-nav-style-three .owl-nav .owl-prev { left: -55px; background: #fff; border-color: #fff; height: 110px; width: 110px; line-height: 110px; text-align: right; padding-right: 25px; font-size: 35px; } .gallery-section .owl-nav-style-three .owl-nav .owl-next { right: -55px; background: #fff; border-color: #fff; height: 110px; width: 110px; line-height: 110px; text-align: left; padding-left: 25px; font-size: 35px; } .gallery-section .owl-nav-style-three .owl-nav .owl-next:hover, .gallery-section .owl-nav-style-three .owl-nav .owl-prev:hover { color: var(--theme-color-three); border-color: #fff; } /*** ==================================================================== Page Title Style ==================================================================== ***/ .page-title { position: relative; background-size: cover; background-attachment: fixed; background-position: center; } .page-title:before { position: absolute; content: ''; background: rgba(29, 23, 71, 0.9); left: 0; top: 0; width: 100%; height: 100%; } .page-title .content-box { position: relative; padding: 56px 0; } .page-title h1 { color: #fff; font-size: 48px; font-family: var(--prata); text-align: center; } .page-title .text { position: relative; color: #fff; font-size: 20px; margin-bottom: 70px; } .page-title .bread-crumb { position: absolute; left: 0; bottom: -31px; background: #fff; padding: 15.5px 30px; border-radius: 6px; -webkit-box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.1); z-index: 9; } .page-title .bread-crumb li { position: relative; font-size: 16px; color: #302c51; font-weight: 400; display: inline-block; padding-right: 20px; margin-right: 10px; } .page-title .bread-crumb li:before { position: absolute; content: ''; right: 0; top: 0px; width: 1px; height: 30px; background: #eaeaea; } .page-title .bread-crumb li:last-child:before { display: none; } .page-title .bread-crumb li a { color: #2cbb4b; font-weight: 400; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; } .page-title .bread-crumb li a:hover { color: var(--theme-color); } .page-title .bread-crumb li a.home { font-size: 24px; } /*** ==================================================================== History Section ==================================================================== ***/ .history-section { position: relative; padding: 110px 0; background: #fff; } .history-section .description { position: relative; margin-bottom: 60px; } .history-section .description .top-content { margin-bottom: 50px; } .history-section .description .icon-box { position: relative; font-size: 65px; line-height: 65px; color: var(--theme-color); margin-bottom: 20px; } .history-section .description h1 { font-size: 36px; font-family: var(--prata); color: var(--dark-color); } .history-section .description h4 { font-size: 20px; line-height: 34px; color: var(--dark-color); margin-bottom: 30px; } .history-section .description h4 span { color: var(--theme-color); } .history-section .description h3 { font-size: 22px; color: var(--dark-color); font-family: var(--prata); margin-bottom: 15px; } .history-section .history-image { height: 390px; margin-bottom: 35px; } .history-section .history-image .image { position: relative; padding: 30px; text-align: center; -webkit-transform: scale(.7); -ms-transform: scale(.7); transform: scale(.7); -webkit-transition: 1s; -o-transition: 1s; transition: 1s; } .history-section .history-image .image:before { position: absolute; content: ''; background: #f4f1ee; left: 0; top: 0; bottom: 0; right: 0; border-radius: 50%; } .history-section .history-image .swiper-slide.swiper-slide-active .image { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .history-section .history-image img { position: relative; width: 100%; border-radius: 4px; } .history-section .history-image .year { position: absolute; left: 0; bottom: 60px; width: 100%; font-size: 30px; color: #fff; font-family: var(--prata); } .history-section .history-content .text { text-align: center; } .history-section .swiper-nav-button .swiper-button-prev, .history-section .swiper-nav-button .swiper-button-next { width: 60px; height: 60px; background: transparent; text-align: center; line-height: 60px; top: 0; right: 0; margin-top: 0; font-size: 24px; color: #a6a6a6; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; } .history-section .swiper-nav-button .swiper-button-prev:hover, .history-section .swiper-nav-button .swiper-button-next:hover { color: var(--theme-color); } .history-section .swiper-nav-button .swiper-button-prev { -webkit-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg); } .history-section .swiper-nav-button .swiper-button-prev:before { position: absolute; content: ''; background: #d8d8d8; height: 1px; width: 72px; left: -60px; top: 29px; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; } .history-section .swiper-nav-button .swiper-button-next:before { position: absolute; content: ''; background: #d8d8d8; height: 1px; width: 72px; left: -60px; top: 30px; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; } .history-section .swiper-nav-button .swiper-button-prev:hover:before, .history-section .swiper-nav-button .swiper-button-next:hover:before { background: var(--theme-color) } /*** ==================================================================== Why Choose Us Section ==================================================================== ***/ .whychoose-us-section { position: relative; padding: 110px 0 90px; background: #f4f1ee; } .whychoose-us-block { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 30px; } .whychoose-us-block .icon-box { position: relative; width: 62px; height: 62px; border: 2px solid #d2d2d2; border-radius: 50%; line-height: 58px; text-align: center; font-size: 16px; color: var(--theme-color); margin-right: 35px; margin-bottom: 15px; } .whychoose-us-block h4 { font-size: 20px; margin-bottom: 15px; } .whychoose-us-section .link-btn { padding-top: 20px; margin-bottom: 30px; } .whychoose-us-section .image-block { position: relative; text-align: center; margin-bottom: 30px; } .whychoose-us-section .image-block .logo-box { position: absolute; top: 50px; right: 0; width: 160px; height: 160px; text-align: center; line-height: 160px; background: #fff; border-radius: 50%; z-index: 99; } .whychoose-us-section .image-block .logo-box .image { position: absolute; top: 10px; left: 10px; width: 140px; height: 140px; text-align: center; line-height: 140px; background: #fff; border-radius: 50%; -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1); } .whychoose-us-section .image-block .logo-box .image:before { position: absolute; content: ''; width: 120px; height: 120px; border: 3px dotted var(--theme-color); left: 10px; top: 10px; border-radius: 50%; } .whychoose-us-section .image-block .logo-box img { position: relative; } .whychoose-us-section .image-block .contact-info-two { position: absolute; top: 100px; left: 0; padding: 40px 30px; -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1); background: #fff; text-align: center; border-radius: 4px; } .whychoose-us-section .image-block .contact-info-two h5 { font-size: 13px; font-weight: 500; color: var(--dark-color); text-transform: uppercase; margin-bottom: 15px; } .whychoose-us-section .image-block .contact-info-two .icon-box { position: relative; height: 60px; width: 60px; line-height: 60px; text-align: center; background: #f4f1ee; border-radius: 50%; font-size: 20px; color: var(--theme-color); margin: 0 auto; margin-bottom: 13px; } .whychoose-us-section .image-block .contact-info-two .phone-number a { font-size: 20px; color: var(--dark-color); } .whychoose-us-section .image-block .video-box { position: absolute; bottom: 50px; right: 0; border-radius: 4px; } .whychoose-us-section .image-block .video-box img { border-radius: 4px; } .whychoose-us-section .image-block .video-box:before { position: absolute; content: ''; background: #302c51; left: 0; top: 0; right: 0; bottom: 0; opacity: .9; border-radius: 4px; } .whychoose-us-section .image-block .video-box .video-btn { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 62px; height: 62px; line-height: 58px; text-align: center; font-size: 20px; color: #fff; border: 2px solid #fff; -webkit-box-shadow: 0px 20px 20px 0px rgba(89, 83, 76, 0.3); box-shadow: 0px 20px 20px 0px rgba(89, 83, 76, 0.3); border-radius: 50%; } /*** ============================================= Faq Area style ============================================= ***/ .faq-section { position: relative; padding: 110px 0 110px; } .accordion-box { position: relative; display: block; padding-left: 55px; counter-reset: count; } .accordion-box .accordion { position: relative; display: block; margin-bottom: 20px; border-left: 5px solid #eaeaea; border-bottom: 5px solid #eaeaea; padding: 0 30px; } .accordion-box .accordion.active { border-color: var(--theme-color); } .accordion-box .accordion .accord-btn { position: relative; display: block; cursor: pointer; background: #ffffff; padding: 24px 0; -webkit-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .accordion-box .accordion .accord-btn span { position: absolute; left: -90px; top: 14px; height: 40px; width: 40px; background: transparent; color: #bfbfbf; text-align: center; line-height: 38px; font-size: 14px; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; } .accordion-box .accordion .accord-btn span:before { position: absolute; display: inline-block; top: 0; left: 0; width: 58px; font-size: 24px; line-height: 48px; color: #a6a6a6; font-weight: 400; counter-increment: count; content: "0" counter(count)"."; text-align: left; } .accordion-box .accordion .accord-btn.active span { color: #fff; background: var(--theme-color); border-color: var(--theme-color); } .accordion-box .accordion .accord-btn h4 { color: var(--dark-color); font-size: 20px; line-height: 26px; font-weight: 400; -webkit-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .accordion-box .accordion .accord-btn::after { font-family: "Flaticon"; position: absolute; top: 25px; right: -30px; color: #b4b4b4; content: "\f121"; font-size: 24px; line-height: 25px; font-weight: 300; -webkit-transition: all 500ms ease 0s; -o-transition: all 500ms ease 0s; transition: all 500ms ease 0s; } .accordion-box .accordion .accord-btn.active { -webkit-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .accordion-box .accordion .accord-btn.active h4 {} .accordion-box .accordion.active .accord-btn:after { color: var(--theme-color); content: "\f10f"; } .accordion-box .accordion .accord-content { position: relative; display: block; padding-top: 0; padding-bottom: 20px; padding-left: 0px; padding-right: 20px; display: none; } .accordion-box .accordion .accord-content.collapsed { display: block; } .accordion-box .accordion .accord-content p { margin: 0; } /*** ==================================================================== Team Section Three ==================================================================== ***/ .team-section-three { position: relative; padding: 110px 0 0px; } .team-block-three { position: relative; } .team-block-three .inner-box { position: relative; margin-bottom: 30px; -webkit-box-shadow: 0px 0px 45px 5px rgba(89, 83, 76, 0.08); box-shadow: 0px 0px 45px 5px rgba(89, 83, 76, 0.08); background: #fff; border-radius: 6px; z-index: 9; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; } .team-block-three .inner-box:hover { -webkit-box-shadow: 0px 20px 20px 0px rgba(89, 83, 76, 0.1); box-shadow: 0px 20px 20px 0px rgba(89, 83, 76, 0.1); } .team-block-three .image { position: relative; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; border-top-left-radius: 6px; border-top-right-radius: 6px; overflow: hidden; } .team-block-three .image img { width: 100%; border-top-left-radius: 6px; border-top-right-radius: 6px; } .team-block-three .image .overlay { position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; } .team-block-three .image .overlay:before { position: absolute; content: ''; background: #302c51; left: 0; top: 0; right: 0; bottom: 0; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; opacity: 0; -webkit-transform: scale(.7); -ms-transform: scale(.7); transform: scale(.7); } .team-block-three .image:hover .overlay:before { opacity: .96; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .team-block-three .image .overlay h4 { color: #fff; font-size: 20px; -webkit-transition: .7s; -o-transition: .7s; transition: .7s; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); -webkit-transition-delay: .3s; -o-transition-delay: .3s; transition-delay: .3s; opacity: 0; visibility: hidden; margin-bottom: 6px; } .team-block-three .image:hover .overlay h4 { opacity: 1; visibility: visible; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .team-block-three .image .overlay .text { color: #9b99ad; margin-bottom: 15px; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); -webkit-transition-delay: .6s; -o-transition-delay: .6s; transition-delay: .6s; opacity: 0; visibility: hidden; } .team-block-three .image:hover .overlay .text { opacity: 1; visibility: visible; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .team-block-three .image .overlay .link-btn { position: relative; -webkit-transition: .9s; -o-transition: .9s; transition: .9s; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); -webkit-transition-delay: .9s; -o-transition-delay: .9s; transition-delay: .9s; opacity: 0; visibility: hidden; } .team-block-three .image .overlay .link-btn .theme-btn { padding: 11px 48px; } .team-block-three .image:hover .overlay .link-btn { opacity: 1; visibility: visible; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .team-block-three .lower-content { position: relative; margin: 0 20px; padding: 23px 15px; background: #fff; text-align: center; border-radius: 6px; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; margin-top: -30px; z-index: 9; transition: .5s ease; } .team-block-three .lower-content h4 { font-size: 20px; margin-bottom: 5px; } .team-block-three .lower-content h4 a { color: var(--dark-color); -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; } .team-block-three .lower-content h4 a:hover { color: var(--theme-color); } /* Posts Pagination */ .posts-pagination { position: relative; text-align: center; } .posts-pagination ul { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .posts-pagination ul li { margin: 0 9px; } .posts-pagination ul li a { position: relative; color: var(--dark-color); height: 52px; width: 52px; line-height: 48px; text-align: center; border: 2px solid #eaeaea; display: inline-block; border-radius: 50%; font-size: 16px; font-weight: 500; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; } .posts-pagination ul li:first-child a { -webkit-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg); } .posts-pagination ul li a:hover { color: var(--theme-color); border-color: var(--theme-color); } /* Default Video Box */ .default-video-box { position: relative; height: 100px; width: 100px; line-height: 100px; text-align: center; background: #fff; border-radius: 50%; font-size: 30px; float: right; } .default-video-box:before { position: absolute; content: ''; height: 140px; width: 140px; top: -20px; left: -20px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); } .default-video-box:after { position: absolute; content: ''; height: 120px; width: 120px; top: -10px; left: -10px; border-radius: 50%; border: 10px solid #fff; opacity: .3; } .default-video-box a { position: relative; z-index: 5; color: var(--theme-color-two); width: 100px; height: 100px; display: block; border-radius: 50%; background: #fff; } .default-video-box a:before { position: absolute; content: ''; background: var(--theme-color-two); left: 0; top: 0; right: 0; bottom: 0; border-radius: 50%; -webkit-transform: scale(.2); -ms-transform: scale(.2); transform: scale(.2); opacity: 0; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; } .default-video-box a:hover:before { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .default-video-box a:hover { color: #fff; } .default-video-box a span { position: relative; } .default-video-box:hover:before { -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.09); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.09); -webkit-animation: ripple 1s infinite; animation: ripple 3s infinite; } /* Style Two */ .default-video-box.style-two a { color: var(--theme-color); } .default-video-box.style-two a:hover { color: #fff; } .default-video-box.style-two a:before { background: var(--theme-color); } /*** ==================================================================== Cause Details ==================================================================== ***/ .case-details { position: relative; padding: 110px 0 90px; } /*===== Not The CSS :P =====*/ #wrapper { position: relative; } /*===== The CSS =====*/ .progress { width: 90px; height: 90px; background: transparent; font-size: inherit; border-radius: 0; } .progress .track, .progress .fill { fill: rgba(0, 0, 0, 0); stroke-width: 3; -webkit-transform: rotate(90deg)translate(0px, -80px); -ms-transform: rotate(90deg)translate(0px, -80px); transform: rotate(90deg)translate(0px, -80px); } .progress .track { stroke: #e1e1e1; } .progress .fill { stroke: rgb(255, 255, 255); stroke-dasharray: 219.99078369140625; stroke-dashoffset: -219.99078369140625; -webkit-transition: stroke-dashoffset 1s; -o-transition: stroke-dashoffset 1s; transition: stroke-dashoffset 1s; } .progress .fill { stroke: var(--theme-color); } .progress .value, .progress .text { fill: var(--theme-color); text-anchor: middle; } .noselect { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: default; } /*** ==================================================================== Upcomig Events Section Two ==================================================================== ***/ .upcoming-events-section-two { position: relative; padding: 110px 0; background: #1b1b1b; background-size: cover; } .upcoming-events-section-two .sec-title h5 { color: var(--theme-color); } .event-block-five { position: relative; text-align: center; } .event-block-five h1 { font-size: 72px; line-height: 80px; font-family: var(--prata); text-transform: uppercase; color: #fff; margin-bottom: 20px; } .event-block-five .text { margin-bottom: 30px; } .event-block-five .link-box a { margin: 0 10px; color: #fff; border-radius: 29px; } .event-block-five .link-box .btn-style-thirteen { padding: 17px 48px; } /* Countdown Timer Style Two */ .countdown-timer-two { text-align: center; margin-bottom: 55px; } .countdown-timer-two li { position: relative; display: inline-block; float: none; text-align: center; margin: 0 10px; } .countdown-timer-two li:first-child { margin-left: 0; } .countdown-timer-two li:last-child { margin-right: 0; } .countdown-timer-two li span.days, .countdown-timer-two li span.hours, .countdown-timer-two li span.minutes, .countdown-timer-two li span.seconds { position: relative; text-align: center; border-radius: 50%; font-size: 48px; color: var(--theme-color); height: 130px; width: 130px; line-height: 130px; background: url(../images/resource/border-circular-shape.png) no-repeat center; display: inline-block; } .countdown-timer-two li span.timeRef { position: relative; color: #fff; font-size: 20px; font-weight: 500; text-transform: uppercase; display: inline-block; -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); width: 60px; right: -40px; top: -20px; } /* Style Two */ .upcoming-events-section-two.style-two { padding: 175px 0; } /*** ================================================================== Map Section ================================================================== ***/ .google-map { position: relative; } .google-map .map-canvas { position: relative; height: 450px; width: 100%; } .market-update-area .btcwdgt { display: block !important; background-color: #202020 !important; color: #aaa !important; width: auto !important; min-width: 240px !important; max-width: 770px !important; margin: 0px !important; -webkit-box-shadow: none !important; box-shadow: none !important; font-size: 16px !important; font-weight: 300 !important; line-height: 1.0em !important; border: 1px solid #2a2a2a !important; } .market-update-area .btcwdgt-chart .btcwdgt-header { display: none !important; } .market-update-area .btcwdgt-chart .btcwdgt-footer { display: none !important; } .gm-style .gm-style-iw-c { position: absolute; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden; top: 0; left: 0; -webkit-transform: translate(-50%, -100%); -ms-transform: translate(-50%, -100%); transform: translate(-50%, -100%); background-color: white; border-radius: 0; padding: 0; -webkit-box-shadow: none; box-shadow: none; width: 380px; min-height: 200px; padding: 38px 70px 0px; -webkit-box-shadow: 0 0 40px rgba(0, 0, 0, 0.1); box-shadow: 0 0 40px rgba(0, 0, 0, 0.1); } .gm-style .gm-style-iw-c:before { position: absolute; top: 0; left: 0; bottom: 0; width: 60px; background: #ed6221; content: ""; } .gm-style .gm-style-iw-c:after { position: absolute; top: 0; left: 55px; bottom: 0; width: 130px; content: "contact details"; color: #ffffff; font-size: 14px; font-weight: 600; text-transform: uppercase; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); } .gm-style-iw-d h4 { position: relative; display: inline-block; border-bottom: 2px solid #c72a30; color: #1b1b1b; font-size: 20px; line-height: 20px; font-weight: 600; text-transform: capitalize; margin: 0 0 22px; } .gm-style-iw-d p { color: #858585; font-size: 15px; line-height: 26px; font-weight: 400; margin: 0; } .map-data { padding-left: 30px; } .map-data h6 { font-size: 20px; margin-bottom: 19px; border-bottom: 2px solid #c72a30; display: inline-block; color: #302c51; } .gmnoprint { display: none; } /*** ================================================================== Sidebar Page Container ================================================================== ***/ .sidebar-page-container { position: relative; } .sidebar-page-container .post-wrapper { padding: 110px 0 80px; margin-right: 30px; } .news-block-three { position: relative; } .news-block-three .inner-box { position: relative; margin-bottom: 60px; -webkit-box-shadow: 0px 0px 45px 5px rgba(89, 83, 76, 0.08); box-shadow: 0px 0px 45px 5px rgba(89, 83, 76, 0.08); -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; border-radius: 6px; padding: 30px; } .news-block-three .inner-box:hover { -webkit-transform: translateY(-5px); -ms-transform: translateY(-5px); transform: translateY(-5px); -webkit-box-shadow: 0px 0px 45px 5px rgba(89, 83, 76, 0.16); box-shadow: 0px 0px 45px 5px rgba(89, 83, 76, 0.16); } .news-block-three .inner-box:before { position: absolute; content: ''; background: var(--theme-color); height: 2px; width: 100%; left: 0; bottom: 0; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; } .news-block-three .inner-box:hover:before { -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); } .news-block-three .category { position: relative; color: #a6a6a6; text-transform: uppercase; font-weight: 500; font-size: 13px; } .news-block-three .category a { background: var(--dark-color); color: #fff; padding: 4px 10px; border-radius: 6px; margin-right: 6px; } .news-block-three .category span { color: var(--theme-color); margin-right: 8px; } .news-block-three .image { position: relative; } .news-block-three .image img { border-top-left-radius: 6px; border-top-right-radius: 6px; width: 100%; } .news-block-three .post-meta-info { position: absolute; bottom: 20px; right: 20px; } .news-block-three .post-meta-info a { color: #fff; margin-right: 10px; } .news-block-three .post-meta-info a span { margin-right: 10px; } .news-block-three .lower-content { position: relative; padding: 30px 0 0; } .news-block-three .date { color: #a6a6a6; font-weight: 500; text-transform: uppercase; font-size: 13px; } .news-block-three .date span { margin-right: 8px; color: var(--theme-color); font-size: 15px; } .news-block-three h2 { font-size: 30px; margin-bottom: 30px; } .news-block-three h2 a { color: var(--dark-color-two); -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; } .news-block-three h2 a:hover { color: var(--theme-color); } .news-block-three .post-info { position: relative; -webkit-box-shadow: 0px 0px 45px 5px rgba(89, 83, 76, 0.08); box-shadow: 0px 0px 45px 5px rgba(89, 83, 76, 0.08); padding: 20px 30px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 30px; } .news-block-three .post-info>div+div { margin-left: 15px; border-left: 1px solid #eaeaea; padding-left: 15px; } .news-block-three .post-info .author { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; } .news-block-three .post-info .image { position: relative; margin-right: 10px; } .news-block-three .post-info .image img { border-radius: 50%; } .news-block-three .post-info .author-title { font-size: 13px; font-weight: 500; color: #a6a6a6; text-transform: uppercase; } .news-block-three .post-info .author-title a { color: #a6a6a6; } .news-block-three .text { margin-bottom: 30px; } .news-block-three .share-info { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; } .news-block-three .share-icon.style-two { top: 18px; } .news-block-three .share-info .text { position: absolute; right: 22px; font-size: 15px; color: var(--dark-color); font-weight: 500; } /*** ==================================================================== Sidebar widgets ==================================================================== ***/ .sidebar-page-container .sidebar { position: relative; height: 100%; padding-top: 120px; padding-bottom: 90px; padding-left: 30px; } .sidebar-page-container .sidebar:before { position: absolute; content: ''; background: #f4f1ee; left: 0; top: 0; bottom: 0; width: 500%; } .sidebar-widget { position: relative; margin-bottom: 60px; } /* Sidebar widgets title */ .sidebar-title { position: relative; margin-bottom: 30px; } .sidebar-title h4 { position: relative; font-size: 22px; font-weight: 400; display: inline-block; text-transform: capitalize; } .sidebar-title-two { position: relative; margin-bottom: 10px; padding: 21px 30px; background-color: #f13729; } .sidebar-title-two h4 { position: relative; color: #ffffff; font-size: 18px; font-weight: 600; } /* Service category widget */ .service-category-widget { position: relative; } .service-category-widget li { position: relative; margin-bottom: 10px; } .service-category-widget li:last-child { margin-bottom: 0px; } .service-category-widget li a { position: relative; color: #7e8597; font-size: 14px; font-weight: 600; text-transform: uppercase; padding: 13px 33px; display: block; -webkit-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; border: 1px solid #e9e6e6; } .service-category-widget li a:hover { -webkit-box-shadow: 0px 21px 21px 0px rgba(1, 1, 1, 0.08); box-shadow: 0px 21px 21px 0px rgba(1, 1, 1, 0.08); color: #222; } .service-category-widget li.active a { border-top: 2px solid #f13729; -webkit-box-shadow: 0px 21px 21px 0px rgba(1, 1, 1, 0.08); box-shadow: 0px 21px 21px 0px rgba(1, 1, 1, 0.08); color: #222; } /*Search Box Widget*/ .sidebar .search-box .form-group { position: relative; margin: 0px; } .sidebar .search-box {} .sidebar .search-box .form-group input[type="text"], .sidebar .search-box .form-group input[type="search"] { position: relative; line-height: 33px; padding: 10px 30px; background: #ffffff; display: block; font-size: 14px; border-radius: 6px; width: 100%; height: 60px; font-weight: 400; border: 1px solid #fff; transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; -webkit-box-shadow: 0px 20px 20px 0px rgba(89, 83, 76, 0.1); box-shadow: 0px 20px 20px 0px rgba(89, 83, 76, 0.1); } .sidebar .search-box button { position: absolute; right: 15px; top: 15px; background: transparent; font-size: 18px; color: #9e9e9e; } /* Post Widget */ .post-widget-two { position: relative; } .post-widget-two .post { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; padding-bottom: 30px; border-bottom: 1px solid #e7e7e7; margin-bottom: 30px; } .post-widget-two .post:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; } .post-widget-two .thumb { position: relative; overflow: hidden; margin-right: 20px; } .post-widget-two img { width: 100%; -webkit-transition: all 8s cubic-bezier(0, 0, 0.2, 1); -o-transition: all 8s cubic-bezier(0, 0, 0.2, 1); transition: all 8s cubic-bezier(0, 0, 0.2, 1); -webkit-transition-delay: .2s; -o-transition-delay: .2s; transition-delay: .2s; display: block; -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .post-widget-two .thumb:hover img { -webkit-transform: scale(1.4); -ms-transform: scale(1.4); transform: scale(1.4); } .post-widget-two .overlay { position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 40px 45px; } .post-widget-two .overlay:before { position: absolute; content: ''; background: #222; left: 0; top: 0; right: 0; bottom: 0; -webkit-transform: scale(0, 1); -ms-transform: scale(0, 1); transform: scale(0, 1); -webkit-transition: all .5s linear; -o-transition: all .5s linear; transition: all .5s linear; } .post-widget-two .thumb:hover .overlay:before { -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); opacity: .75; } .post-widget-two .date { position: relative; font-size: 16px; margin-bottom: 10px; padding-left: 50px; } .post-widget-two .date:before { position: absolute; content: ''; background: var(--theme-color); height: 1px; width: 40px; top: 12px; left: 0; } .post-widget-two h4 { font-size: 18px; font-weight: 500; color: #1c1f26; } .post-widget-two h4 a { color: #1c1f26; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; } .post-widget-two h4 a:hover { color: var(--theme-color); } /* Blog Category Widget */ .blog-category-widget { position: relative; } .blog-category-widget ul { position: relative; } .blog-category-widget ul li { position: relative; margin-bottom: 10px; } .blog-category-widget ul li:last-child { margin-bottom: 0px; } .blog-category-widget ul li a { font-size: 16px; font-weight: 700; color: #888888; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; } .blog-category-widget ul li a:before { position: absolute; content: ''; height: 12px; width: 4px; background: #d4d4d4; left: 0; top: 6px; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; display: none; } .blog-category-widget ul li a:hover:before { opacity: 1; } .blog-category-widget ul li a:hover:before { background: #f13729; } .blog-category-widget ul li a:hover { color: var(--theme-color); } .blog-category-widget ul li span { position: relative; right: -2px; top: -8px; font-size: 14px; color: var(--theme-color); opacity: 0; } /* Instagram Widget Two */ .instagram-widget-two .instagram-wrapper { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 0 -5px; -ms-flex-wrap: wrap; flex-wrap: wrap; background: #fff; padding: 30px 30px; border-radius: 6px; } .instagram-widget-two .instagram-wrapper .image { position: relative; overflow: hidden; padding: 0 5px 10px; border-radius: 6px; width: 33.333%; } .instagram-widget-two .instagram-wrapper .image .overlay-link { position: absolute; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; height: 100%; left: 0; top: 100%; background: var(--dark-color); -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; opacity: .95; } .instagram-widget-two .instagram-wrapper .image .overlay-link ul { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .instagram-widget-two .instagram-wrapper .image:hover .overlay-link { top: 0 } .instagram-widget-two .instagram-wrapper .image .overlay-link li { color: #fff; margin: 0 5px; font-size: 14px; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; } .instagram-widget-two .instagram-wrapper .image .overlay-link li span { font-size: 12px; margin-right: 5px; } .instagram-widget-two .theme-btn { position: relative; background: #fff; display: inline-block; font-size: 16px; color: #1c1f26; padding: 5px 5px 0; } .instagram-widget-two .theme-btn span { margin-right: 8px; color: var(--theme-color); } .instagram-widget-two .instagram-wrapper .image .overlay-link { position: absolute; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; height: 100%; left: 0; top: 100%; background: var(--dark-color); -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; } .instagram-widget-two .instagram-wrapper .image:hover .overlay-link { top: 0 } .instagram-widget-two .instagram-wrapper .image .overlay-link li { color: #fff; font-size: 14px; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; } .instagram-widget-two .instagram-wrapper .image .overlay-link li span { font-size: 12px; margin-right: 5px; } /* Tag Cloud Widget */ .tag-cloud-widget ul { margin: 0 -5px; } .tag-cloud-widget ul li { margin: 0 5px 10px; float: left; } .tag-cloud-widget ul li a { position: relative; font-size: 15px; color: #858585; border: 1px solid #ededed; background: #fff; padding: 2.5px 20px; display: inline-block; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; border-radius: 4px; } .tag-cloud-widget ul li a:hover { color: #fff; background-color: var(--theme-color); border-color: var(--theme-color); -webkit-box-shadow: 0px 10px 10px 0px rgba(237, 98, 33, 0.3); box-shadow: 0px 10px 10px 0px rgba(237, 98, 33, 0.3); } /* Case Widget */ .case-widget { -webkit-box-shadow: 0px 20px 20px 0px rgba(89, 83, 76, 0.1); box-shadow: 0px 20px 20px 0px rgba(89, 83, 76, 0.1); border-radius: 6px; background: #fff; } .case-widget .cause-block-two { padding: 0; margin: 0; } .case-widget .cause-block-two .lower-content { -webkit-box-shadow: none; box-shadow: none; } .case-widget .cause-block-two .inner-box { padding: 0; } .case-widget .owl-dot-style-one .owl-dots { position: absolute; top: -60px; right: 0; margin: 0; } .case-widget .owl-dot-style-one .owl-dots .owl-dot.active span { background-color: var(--theme-color); -webkit-transform: scale(1.3); -ms-transform: scale(1.3); transform: scale(1.3); } .case-widget .btn-style-seven { color: var(--theme-color); border-color: var(--theme-color); } .case-widget .btn-style-seven:before { background-color: var(--theme-color); } .case-widget .btn-style-seven:after { background: var(--theme-color); } .case-widget .progress-levels.style-two .progress-box .bar .bar-fill { background: var(--theme-color); } .case-widget .progress-levels.style-two .progress-box .percent { background: var(--theme-color); color: #fff; } .case-widget .progress-levels.style-two .progress-box .percent:before { background: var(--theme-color); } .case-widget .cause-block-two .info-box a { color: var(--theme-color); } .case-widget .cause-block-two .inner-box:before { border-color: var(--theme-color); z-index: 9; pointer-events: none; } /* Event Widget */ .event-widget { position: relative; } .event-widget .event-item .image { position: absolute; left: 30px; } .event-widget .event-item { background: #fff; margin-bottom: 30px; padding: 30px; padding-left: 115px; border-radius: 6px; } .event-widget .event-item .date { color: #a6a6a6; font-size: 13px; font-weight: 500; text-transform: uppercase; } .event-widget .event-item h5 { font-size: 15px; } .event-widget .event-item .content { min-height: 70px; padding-top: 8px; } .event-widget .event-item h5 a { color: var(--dark-color); -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; } .event-widget .event-item h5 a:hover { color: var(--theme-color); } /* Newsletter Widget Three */ .newsletter-widget-three { position: relative; background: #fff; padding: 30px; border-radius: 6px; } .newsletter-widget-three .text { position: relative; margin-bottom: 15px; line-height: 24px; } .newsletter-widget-three form input { position: relative; padding: 0 15px; border: 1px solid #eaeaea; height: 54px; line-height: 20px; background: transparent; border-radius: 6px; margin-bottom: 15px; color: #56546b; width: 100%; } .newsletter-widget-three form button { position: relative; -webkit-box-shadow: none; box-shadow: none; } /* Category Widget Two */ .category-widget-two ul { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-wrap: wrap; flex-wrap: wrap; } .category-widget-two ul li { width: 50%; padding: 5px; text-align: center; } .category-widget-two ul li .wrapper-box { background: #fff; padding: 25px 0; border-radius: 6px; } .category-widget-two ul li img { border-radius: 50%; margin: 0 auto; } .category-widget-two ul li .post-count { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-size: 18px; color: #fff; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; } .category-widget-two ul li .image { position: relative; width: -webkit-max-content; width: -moz-max-content; width: max-content; margin: 0 auto 10px; } .category-widget-two ul li .image:before { position: absolute; content: ''; left: 0; top: 0; background: var(--dark-color); width: 100%; height: 100%; border-radius: 50%; opacity: .8; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; } .category-widget-two ul li a { position: relative; color: #858585; font-size: 13px; font-weight: 500; text-transform: uppercase; } .category-widget-two ul li:hover .image:before { opacity: 0; } .category-widget-two ul li:hover .post-count { opacity: 0; } /* Event Widget */ .post-widget-three { position: relative; } .post-widget-three .post .thumb { position: absolute; left: 30px; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; } .post-widget-three .post { background: #fff; margin-bottom: 30px; padding: 30px; padding-left: 115px; border-radius: 6px; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; } .post-widget-three .post:hover { -webkit-box-shadow: 0px 20px 20px 0px rgba(89, 83, 76, 0.1); box-shadow: 0px 20px 20px 0px rgba(89, 83, 76, 0.1); } .post-widget-three .post .date { color: #a6a6a6; font-size: 13px; font-weight: 500; text-transform: uppercase; } .post-widget-three .post h5 { font-size: 15px; } .post-widget-three .post .content { min-height: 70px; padding-top: 8px; } .post-widget-three .post h5 a { color: var(--dark-color); -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; } .post-widget-three .post h5 a:hover { color: var(--theme-color); } /*** ==================================================================== Call To Action Tow ==================================================================== ***/ .call-to-action-two { position: relative; padding: 65px 0; background-size: cover; } .call-to-action-two:before { position: absolute; content: ''; background:#2c3c6a; opacity: .9; top: 0; left: 0; right: 0; bottom: 0; } .call-to-action-two h5 { font-size: 14px; color: #fff; text-transform: uppercase; font-weight: 500; margin-bottom: 20px; } .call-to-action-two h1 { font-size: 36px; color: #fff; font-family: var(--prata); margin-bottom: 25px; text-transform: uppercase; } .call-to-action-two .text { color: #fff; margin-bottom: 30px; position: relative; } /*** ==================================================================== Newsletter One ==================================================================== ***/ .newsletter-one { position: relative; padding: 24px 40px; border: 1px solid #374468; border-radius: 5px; background-color: #283354; } .newsletter-one h3 { font-size: 24px; color: #fff; font-family: var(--prata); margin-bottom: 10px; margin-top: 10px; } .newsletter-one .text { color: #9b99ad; margin-bottom: 10px; } .newsletter-one input[type="email"] { position: relative; width: 100%; height: 56px; border-radius: 5px; padding: 0 20px; margin: 15px 0; } .newsletter-one .theme-btn { width: 100%; margin: 15px 0; } .newsletter-one .theme-btn:hover { color: var(--theme-color-four); } .newsletter-one .btn-style-fourteen:before { background: #fff; } /*** ==================================================================== Intro Section ==================================================================== ***/ .intro-section { position: relative; padding: 77px 0 55px; } .intro-section:before { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; background: #f4f1ee url(../images/resource/map-3.png) no-repeat center; } .intro-section .experience-block { position: relative; padding-left: 180px; min-height: 130px; } .intro-section .experience-years { position: absolute; left: 0; top: 0; border: 2px solid var(--theme-color-four); border-radius: 5px; height: 130px; width: 140px; text-align: center; font-size: 60px; font-family: var(--prata); padding-top: 42px; } .intro-section .experience-block span { font-size: 13px; font-family: var(--rubik); font-weight: 500; text-transform: uppercase; } .intro-section .experience-block h4 { font-size: 20px; margin-bottom: 13px; font-family: var(--prata); } .intro-section .experience-block h1 { font-size: 48px; font-family: var(--prata); margin-bottom: 13px; } .intro-section .top-content { margin-bottom: 90px; } .intro-section .top-content .text { margin-bottom: 18px; } .intro-section .top-content a { font-size: 13px; font-weight: 500; text-transform: uppercase; color: var(--theme-color-four); border-bottom: 2px solid var(--theme-color-four); padding-bottom: 3px; } .intro-section .top-content a span { margin-right: 3px; } .intro-section .bottom-content { position: relative; } .intro-block-one { position: relative; } .intro-block-one .inner-box { position: relative; padding-right: 20px; max-width: 370px; margin: 0 auto; margin-bottom: 30px; } .intro-block-one .image { position: relative; overflow: hidden; border-top-left-radius: 5px; border-top-right-radius: 5px; } .intro-block-one .wrrapper-box { position: relative; -webkit-transition: 1s; -o-transition: 1s; transition: 1s; } .intro-block-one .inner-box:hover .wrrapper-box { -webkit-transform: translateY(-50px); -ms-transform: translateY(-50px); transform: translateY(-50px); } .intro-block-one .content { position: relative; background: #fff; border: 1px solid #eaeaea; padding: 30px; border-top-left-radius: 30px; border-top-right-radius: 30px; margin-top: -40px; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; } .intro-block-one .campaigns { position: absolute; right: -20px; top: -55px; } .intro-block-one .campaigns a { background: var(--theme-color-four); color: #fff; padding: 8.5px 15px; font-size: 13px; font-weight: 500; text-transform: uppercase; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; position: relative; } .intro-block-one .campaigns a span { position: absolute; left: 15px; top: 2px; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; opacity: 0; -webkit-transition-delay: .0s; -o-transition-delay: .0s; transition-delay: .0s; } .intro-block-one .campaigns a:hover { padding-left: 35px; } .intro-block-one .campaigns a:hover span { opacity: 1; -webkit-transition-delay: .3s; -o-transition-delay: .3s; transition-delay: .3s; } .intro-block-one .campaigns a:before { position: absolute; content: ''; background: transparent; height: 20px; width: 20px; right: 0; bottom: -20px; border: 10px solid #019554; border-bottom-color: transparent; border-right-color: transparent; } .intro-block-one h4 { position: relative; font-size: 20px; margin-bottom: 10px; } .intro-block-one .link-btn { position: absolute; opacity: 0; left: 0; bottom: 0; right: 20px; text-align: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: perspective(1200px) rotateX(90deg) translateZ(40px); transform: perspective(1200px) rotateX(90deg) translateZ(40px); -webkit-transition: all 900ms ease 100ms; -o-transition: all 900ms ease 100ms; transition: all 900ms ease 100ms; } .intro-block-one .inner-box:hover .link-btn { opacity: 1; -webkit-transform: perspective(1200px) rotateX(0deg) translateZ(0px); transform: perspective(1200px) rotateX(0deg) translateZ(0px); -webkit-transition: all 900ms ease 500ms; -o-transition: all 900ms ease 500ms; transition: all 900ms ease 500ms; } .intro-block-one .link-btn a { font-size: 13px; font-weight: 500; color: #fff; background: var(--theme-color-four); width: 100%; display: block; padding: 11px 0; text-transform: uppercase; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } .intro-block-one .inner-box:hover .content { -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1); border-color: #fff; } /*** ==================================================================== About Section Three ==================================================================== ***/ .about-section-three { padding: 0 0 80px; } .about-section-three .image-box { position: relative; padding-right: 20px; } .about-section-three .image-box img { width: 100%; } .about-section-three .contact-box { position: absolute; right: 55px; bottom: 35px; background: #fff; padding: 30px; border-radius: 5px; text-align: center; } .about-section-three .contact-box .icon-box { position: relative; height: 60px; width: 60px; background: var(--theme-color-four); border-radius: 50%; line-height: 60px; color: #fff; font-size: 20px; margin: 0 auto; margin-top: -60px; margin-bottom: 20px; -webkit-box-shadow: 0 0 0px 5px rgba(2, 192, 109, 0.3); box-shadow: 0 0 0px 5px rgba(2, 192, 109, 0.3); } .about-section-three .contact-box h5 { font-size: 13px; font-weight: 500; text-transform: uppercase; margin-bottom: 15px; } .about-section-three .contact-box h4 { font-size: 20px; color: var(--theme-color-four); } .about-section-three .contact-box h4 a { color: var(--theme-color-four); } .about-section-three .content { position: relative; margin-bottom: 30px; } .about-section-three .content h1 { position: relative; font-size: 36px; font-family: var(--prata); margin-bottom: 30px; } .about-section-three .content h4 { font-size: 20px; color: var(--theme-color-four); margin-bottom: 20px; } .about-section-three .content .text { margin-bottom: 30px; } .about-section-three .content .point-block { position: relative; padding-left: 45px; } .about-section-three .content .point-block span { position: absolute; left: 0; top: 4px; color: var(--theme-color-four); font-size: 20px; } .about-section-three .content .point-block h4 { font-size: 20px; color: var(--dark-color); margin-bottom: 10px; } .about-section-three .content .point-block .text { margin-bottom: 20px; } /*** ==================================================================== Feature Section Two ==================================================================== ***/ .feature-section-two { position: relative; padding: 110px 0 80px; background: #283354 url(../images/resource/pattern.png); } .feature-block-four .inner-box { position: relative; margin-bottom: 30px; padding: 45px 15px; border: 4px solid #fff; border-radius: 10px; text-align: center; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; background: #fff; } .feature-block-four .inner-box:hover { -webkit-box-shadow: 0px 20px 20px 0px rgba(0, 0, 0, 0.15); box-shadow: 0px 20px 20px 0px rgba(0, 0, 0, 0.15); border-color: #02a35d; } .feature-block-four .icon-box { margin-bottom: 14px; line-height: 90px; } .feature-block-four h4 { font-size: 20px; } .feature-block-four .overlay { position: absolute; top: 0px; left: 0; right: 0; bottom: 0; opacity: 0; border-radius: 6px; overflow: hidden; background-color: #283354; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; padding-top: 40px; } .feature-block-four .inner-box:hover .overlay { opacity: 1; } .feature-block-four .overlay:before { position: absolute; content: ''; background: #283354; opacity: .95; left: 0; top: 0; right: 0; bottom: 0; } .feature-block-four .overlay h4 { color: #fff; margin-bottom: 13px; } .feature-block-four .overlay .text { color: #bebebe; position: relative; } .feature-block-four .overlay .link-btn { position: absolute; left: 0; bottom: 0; width: 100%; } .feature-block-four .overlay .link-btn a { display: block; border-top-left-radius: 0px; border-top-right-radius: 0px; padding: 13px 40px; background: var(--theme-color-four); color: #fff; } .feature-block-four .overlay .link-btn a:hover { color: var(--theme-color-foour); } .feature-block-four .overlay .link-btn a:before { background: #fff; } /*** ==================================================================== Causes Section Five ==================================================================== ***/ .causes-section-five { position: relative; padding: 110px 0 80px; } .progress-block { position: relative; margin-bottom: 50px; margin-top: -105px; margin-left: 25px; z-index: 10; } .progress-block .inner-box { position: relative; min-height: 70px; } .progress-block .graph-outer { position: absolute; left: 0; top: 0; display: inline-block; text-align: center; background: #fff; border-radius: 50%; } .progress-block .graph-outer .count-box { position: absolute; left: 0; top: 50%; width: 100%; margin-top: -4px; font-size: 18px; color: var(--dark-color); font-weight: 500; line-height: 1.4em; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .progress-block .graph-outer .count-text { position: relative; font-size: 18px; line-height: 1.2em; color: var(--dark-color); font-weight: 500; } .causes-section-five .cause-carousel-wrapper { margin: 0 -15px; } .cause-block-five { position: relative; padding: 0 15px; } .cause-block-five>.inner-box { position: relative; margin-bottom: 30px; max-width: 270px; border: 1px solid #eaeaea; border-top: 0; border-bottom: 0; border-radius: 5px; } .cause-block-five>.inner-box:before { position: absolute; content: ''; left: 0; top: 0; bottom: 0; right: 0; } .cause-block-five .image { position: relative; overflow: hidden; } .cause-block-five .image:after { position: absolute; content: ''; height: 75px; width: 100%; left: 0; bottom: 0; background: url(../images/resource/shape-4.png) no-repeat; z-index: 9; -webkit-transform: scale(1.02); -ms-transform: scale(1.02); transform: scale(1.02); } .cause-block-five .image:before { position: absolute; content: ''; left: 0; top: 0; width: 100%; height: 0%; background: var(--dark-color); opacity: .9; -webkit-transition: .8s; -o-transition: .8s; transition: .8s; z-index: 9; } .cause-block-five .inner-box:hover .image:before { height: 100%; } .cause-block-five .image .link-btn { position: absolute; right: 30px; top: 30px; z-index: 10; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; opacity: 0; } .cause-block-five .inner-box:hover .image .link-btn { opacity: 1; } .cause-block-five .image .link-btn a { font-size: 13px; font-weight: 500; color: #fff; text-transform: uppercase; } .cause-block-five .image .link-btn a i { margin-right: 5px; } .cause-block-five .lower-content { position: relative; text-align: center; } .cause-block-five .lower-content h4 { font-size: 18px; margin-bottom: 15px; line-height: 1.4em; } .cause-block-five .lower-content h4 a { color: var(--dark-color); } .cause-block-five .lower-content .text { margin-bottom: 25px; } .cause-block-five .lower-content .info-box { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-pack: distribute; justify-content: space-around; background: #f4f1ee; padding: 18px 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } .cause-block-five .lower-content .info-box a { color: var(--dark-color); font-size: 16px; line-height: 1.4em; } .cause-block-five .lower-content .info-box a span { color: var(--theme-color-four); font-size: 13px; font-weight: 500; text-transform: uppercase; } .causes-section-five .owl-nav>div:hover { color: var(--theme-color-four); } /*** ==================================================================== Payment Donate Section Three ==================================================================== ***/ .payment-donate-section-three { position: relative; padding: 120px 0; background: #f2f2f2; } .payment-donate-section-three .sec-bg-one { position: absolute; left: 0; top: 0; height: 100%; width: 38%; background-position: left; background-size: cover; } .payment-donate-section-three .sec-bg-one:before { position: absolute; content: ''; background: var(--dark-color); left: 0; top: 0; width: 100%; height: 100%; opacity: .95; } .payment-donate-section-three .sec-bg-two { position: absolute; right: 0; top: 0; height: 100%; width: 62%; background-position: right; background-size: cover; } .payment-donate-section-three .wrapper-box { max-width: 600px; background: var(--theme-color-four); padding: 50px; border-radius: 5px; } .payment-donate-section-three .wrapper-box h1 { font-size: 36px; font-family: "prata"; color: #fff; margin-bottom: 30px; } .payment-donate-section-three .chicklet-list label { font-size: 18px; background: #00a75e; color: #ffffff; border-color: rgba(236, 232, 229, 0.10); padding: 10px 33px; margin-bottom: 0; border-radius: 5px; -webkit-box-shadow: none; box-shadow: none; } .payment-donate-section-three .chicklet-list :checked+label { background: #ffffff; color: #02c06d; } .payment-donate-section-three .chicklet-list { margin: 0 -15px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -ms-flex-wrap: wrap; flex-wrap: wrap; } .payment-donate-section-three .chicklet-list li { padding: 0 15px 30px; margin-bottom: 0; } .payment-donate-section-three .other-amount { -ms-flex-wrap: wrap; flex-wrap: wrap; } .payment-donate-section-three .other-amount * { margin-bottom: 30px; } .payment-donate-section-three .other-amount input { position: relative; max-width: 300px; border-radius: 6px; font-size: 18px; background: #00a75e; color: #fff; border: 1px solid rgba(236, 232, 229, 0.10); padding: 10px 20px; padding-left: 40px; width: 100%; border-radius: 5px; } .payment-donate-section-three .form-group { position: relative; margin: 0; margin-right: 30px; } .payment-donate-section-three .form-group:before { position: absolute; content: "$"; background: transparent; left: 0; top: 0; width: 60px; height: 100%; text-align: center; line-height: 50px; color: #fff; font-size: 18px; border-top-left-radius: 6px; border-bottom-left-radius: 6px; } .payment-donate-section-three .info-box { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .payment-donate-section-three .info-box a { color: #fff; font-size: 15px; } .payment-donate-section-three .info-box a span { font-size: 13px; font-weight: 500; text-transform: uppercase; color: #fff; } .payment-donate-section-three .progress-levels { padding-bottom: 40px; } .payment-donate-section-three .progress-levels .progress-box .bar { background: #00a75e; height: 8px; border-radius: 5px; } .payment-donate-section-three .progress-levels .progress-box .bar .bar-fill { background: #fff; height: 8px; border-radius: 5px; } .payment-donate-section-three .btn-style-ten { padding: 13px 40px; color: var(--dark-color-four); border-radius: 5px; } .payment-donate-section-three .btn-style-ten:after { background: #b4002b; } .payment-donate-section-three .btn-style-ten:hover { color: #fff; } .payment-donate-section-three .btn-style-ten:after { background: var(--dark-color); } .payment-donate-section-three .btn-style-ten:before { background: var(--theme-color-four); } .payment-donate-section-three .default-video-box a { color: #fff; background: var(--theme-color-four); } .payment-donate-section-three .default-video-box:after { border-color: #02c06d; } .payment-donate-section-three .default-video-box:before { background-color: rgba(2, 192, 109, 0.2); } .payment-donate-section-three .default-video-box a:before { background: #fff; } .payment-donate-section-three .default-video-box a:hover { color: var(--theme-color-four); } /*** ==================================================================== Team Section Five ==================================================================== ***/ .team-section-five { position: relative; padding: 110px 0 110px; } .team-section-five .wrapper-box { margin: 0 -15px; } .team-block-five { position: relative; padding: 5px; border-radius: 6px; margin: 0px 10px; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; } .team-block-five:before { position: absolute; content: ''; top: 0; right: 0px; left: 0px; bottom: 0; border: 1px solid var(--theme-color-four); border-radius: 6px; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; -webkit-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; } .team-block-five:hover:before { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .team-block-five .inner-box { position: relative; background: #fff; border-radius: 6px; z-index: 9; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; -webkit-box-shadow: 0px 0px 15px 5px rgba(89, 83, 76, 0.06); box-shadow: 0px 0px 15px 5px rgba(89, 83, 76, 0.06); } .team-block-five .inner-box:hover { -webkit-box-shadow: 0px 20px 20px 0px rgba(89, 83, 76, 0.1); box-shadow: 0px 20px 20px 0px rgba(89, 83, 76, 0.1); } .team-block-five .image { position: relative; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; border-top-left-radius: 6px; border-top-right-radius: 6px; overflow: hidden; } .team-block-five .image img { width: 100%; border-top-left-radius: 6px; border-top-right-radius: 6px; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; } .team-block-five .lower-content { position: relative; padding: 30px 30px; background: #fff; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; z-index: 9; transition: .5s ease; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; } .team-block-five .lower-content h4 { font-size: 20px; margin-bottom: 5px; border-bottom: 1px solid #eaeaea; padding-bottom: 10px; } .team-block-five .lower-content h4 a { color: var(--dark-color); -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; } .social-icon-six { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .social-icon-six li+li { margin-left: 20px; } .social-icon-six li a { position: relative; height: 38px; width: 38px; line-height: 38px; display: inline-block; text-align: center; background: #fff; color: #848484; border-radius: 50%; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; } .social-icon-six li a:hover { color: var(--theme-color-four); } .team-block-five .social-icon-six { position: relative; } .team-block-five .social-icon-six a { opacity: 0; } .team-block-five .social-icon-six li:nth-child(odd) a { -webkit-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); } .team-block-five .social-icon-six li:nth-child(even) a { -webkit-transform: translateY(10px); -ms-transform: translateY(10px); transform: translateY(10px); } .team-block-five .inner-box:hover .social-icon-six a { opacity: 1; -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } .team-block-five .overlay-content { position: absolute; left: 0; bottom: 0; padding: 25px 30px; width: 100%; -webkit-transition: .8s; -o-transition: .8s; transition: .8s; background: var(--theme-color-four); opacity: 0; pointer-events: none; z-index: 9; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; } .team-block-five .inner-box:hover .overlay-content { opacity: 1; pointer-events: auto; } .team-block-five .overlay-content h4 { font-size: 20px; margin-bottom: 5px; border-bottom: 1px solid #eaeaea; padding-bottom: 10px; } .team-block-five .overlay-content h4 a { color: #fff; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; } .team-block-five .overlay-content .designation { color: #fff; margin-bottom: 15px; } .team-section-five .owl-dot-style-one .owl-dots .owl-dot.active span, .team-section-five .owl-dot-style-one .owl-dots .owl-dot:hover span { border-color: var(--theme-color-four); } /*** ==================================================================== Testimonial Section Three ==================================================================== ***/ .testimonial-section-three { position: relative; padding: 110px 0; background: #f4f1ee; } .testimonial-section-three .wrapper-box { margin: 0 -15px; } .testimonial-block-three { position: relative; padding: 0 15px; } .testimonial-block-three .inner-box { position: relative; text-align: center; overflow: hidden; border-radius: 6px; } .testimonial-block-three .top-content { position: relative; background: #fff; padding: 30px; padding-top: 51px; border-radius: 6px; margin-bottom: 55px; } .testimonial-block-three .top-content:before { position: absolute; content: ''; left: 50%; bottom: -70px; width: 70px; height: 70px; border: 34px solid transparent; border-top-color: #fff; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .testimonial-block-three .quote { position: absolute; left: -36px; top: -50px; width: 100px; height: 100px; padding-left: 30px; background: var(--theme-color-four); color: #fff; font-size: 25px; line-height: 148px; border-radius: 50%; } .testimonial-block-three h4 { position: relative; margin-bottom: 15px; font-size: 20px; } .testimonial-block-three .author-title { font-size: 18px; color: #283354; margin-bottom: 3px; } .testimonial-block-three .designation { position: relative; font-size: 15px; color: #757575; } .testimonial-block-three .designation a { color: var(--theme-color-four); } .testimonial-section-three .owl-nav-style-two .owl-nav { -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } .testimonial-section-three .owl-nav-style-two .owl-nav .owl-next, .testimonial-section-three .owl-nav-style-two .owl-nav .owl-prev { border-radius: 50%; background: transparent; border: 2px solid #dcd9d6; line-height: 56px; font-size: 28px; } .testimonial-section-three .owl-nav-style-two .owl-nav .owl-next:hover, .testimonial-section-three .owl-nav-style-two .owl-nav .owl-prev:hover { color: var(--theme-color-four); border-color: var(--theme-color-four); } /*** ==================================================================== Testimonial Section Five ==================================================================== ***/ .testimonial-section-five { position: relative; padding: 110px 0; } .testimonial-section-five .owl-dots .owl-dot.active span, .testimonial-section-five .owl-dots .owl-dot:hover span { border-color: var(--theme-color-five); } .testimonial-section-five .wrapper-box { margin: 0 -15px; } .testimonial-block-five { position: relative; padding: 0 15px; } .testimonial-block-five .inner-box { position: relative; text-align: center; border-radius: 6px; padding: 40px 0 0; } .testimonial-block-five .top-content { position: relative; background: #fff; padding: 30px; padding-top: 0; border-radius: 6px; margin-bottom: 55px; -webkit-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.05); box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.05); } .testimonial-block-five .top-content:before { position: absolute; content: ''; left: 50%; bottom: -70px; width: 70px; height: 70px; border: 34px solid transparent; border-top-color: #ffffff; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .testimonial-block-five .image { position: relative; -webkit-transform: translateY(-38px); -ms-transform: translateY(-38px); transform: translateY(-38px); display: inline-block; margin-bottom: -25px; } .testimonial-block-five .image img { border-radius: 50%; } .testimonial-block-five h4 { position: relative; margin-bottom: 15px; font-size: 20px; color: #242424; } .testimonial-block-five .author-title { font-size: 18px; color: #242424; margin-bottom: 3px; } .testimonial-block-five .designation { position: relative; font-size: 15px; color: #757575; } .testimonial-block-five .designation a { color: var(--theme-color-five); } .testimonial-section-five .owl-nav-style-two .owl-nav { -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } .testimonial-section-five .owl-nav-style-two .owl-nav .owl-next, .testimonial-section-five .owl-nav-style-two .owl-nav .owl-prev { border-radius: 50%; background: transparent; border: 2px solid #dcd9d6; line-height: 56px; font-size: 28px; } .testimonial-section-five .owl-nav-style-two .owl-nav .owl-next:hover, .testimonial-section-five .owl-nav-style-two .owl-nav .owl-prev:hover { color: var(--theme-color-four); border-color: var(--theme-color-four); } /*** ==================================================================== Gallery Section Two ==================================================================== ***/ .gallery-section-two { position: relative; background: var(--theme-color-four); } .gallery-section-two .wrapper-box { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .gallery-section-two .wrapper-box>div { width: 25%; } .gallery-block-two { position: relative; padding: 0; } .gallery-block-two .inner-box { position: relative; } .gallery-block-two .image img { width: 100%; } .gallery-block-two .image::before { background: var(--dark-color); bottom: 0px; content: ""; left: 0px; opacity: 0; position: absolute; right: 0px; top: 0px; z-index: 9; -webkit-transition: all 0.4s ease-in-out 0s; -o-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; } .gallery-block-two:hover .image::before { opacity: 0.95; } .gallery-block-two .image { position: relative; overflow: hidden; margin: 0; } .gallery-block-two .image img { -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; } .gallery-block-two:hover .image img { -webkit-transform: translateX(0%) translateY(-90px) scale(1); -ms-transform: translateX(0%) translateY(-90px) scale(1); transform: translateX(0%) translateY(-90px) scale(1); } .gallery-block-two .overlay a { background: #fff; border-radius: 50%; color: #8a8a8a; font-size: 20px; height: 56px; margin: 0 5px; line-height: 56px; opacity: 0; display: inline-block; text-align: center; -webkit-transform: translateX(0%) translateY(-30%) scale(0.5); -ms-transform: translateX(0%) translateY(-30%) scale(0.5); transform: translateX(0%) translateY(-30%) scale(0.5); -webkit-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; width: 56px; } .gallery-block-two .overlay a:hover { background: var(--theme-color-four); color: #fff; } .gallery-block-two:hover .overlay a { opacity: 1; -webkit-transform: translateX(0) translateY(0%) scale(1); -ms-transform: translateX(0) translateY(0%) scale(1); transform: translateX(0) translateY(0%) scale(1); } .gallery-block-two .overlay { left: 0; opacity: 0; position: absolute; right: 0; text-align: center; top: 50%; margin-top: -46.5px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; z-index: 10; } .gallery-block-two:hover .overlay { opacity: 1; } .gallery-block-two .caption-title { bottom: 0; left: 0; opacity: 0; position: absolute; -webkit-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; z-index: 12; background-color: var(--theme-color-four); width: 100%; padding: 21px 30px 26px; text-align: center; } .gallery-block-two:hover .caption-title { opacity: 1; } .gallery-block-two .caption-title h4 { color: #fff; font-size: 20px; font-weight: 400; text-transform: capitalize; -webkit-transform: translateY(15px); -ms-transform: translateY(15px); transform: translateY(15px); -webkit-transition: all 0.4s ease-in-out 0s; -o-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; } .gallery-block-two .caption-title h4 a { color: #fff; } .gallery-block-two:hover .caption-title h4, .gallery-block-two:hover .caption-title span { -webkit-transform: translateX(0px); -ms-transform: translateX(0px); transform: translateX(0px); } .gallery-block-two .caption-title span { color: #fff; display: inline-block; font-size: 15px; line-height: 16px; -webkit-transform: translateY(15px); -ms-transform: translateY(15px); transform: translateY(15px); -webkit-transition: all 0.4s ease-in-out 0s; -o-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; text-transform: capitalize; } .gallery-block-two .inner-box:before { position: absolute; content: ''; left: 0; top: 0; right: 0; bottom: 0; border: 6px solid #fff; z-index: 99; pointer-events: none; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; opacity: 0; } .gallery-block-two .inner-box:after { position: absolute; content: ''; left: 0; top: 0; right: 0; bottom: 0; border: 1px solid #02c06d; z-index: 99; pointer-events: none; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; opacity: 0; } .gallery-block-two .inner-box:hover:before, .gallery-block-two .inner-box:hover:after { opacity: 1; } .gallery-section-two .content-column { padding: 0 30px; padding-left: 60px; } .gallery-section-two .content-column h5 { color: #fff; } .gallery-section-two .content-column a { color: #fff; font-size: 13px; font-weight: 500; text-transform: uppercase; } .gallery-section-two .content-column a span { margin-right: 5px; } /*** ==================================================================== Payment Donate Section Four ==================================================================== ***/ .payment-donate-section-four { position: relative; padding: 110px 0; background-color: #222; background-size: cover; } .payment-donate-section-four .wrapper-box { max-width: 780px; margin: 0 auto; } .payment-donate-section-four .chicklet-list label { font-size: 18px; background: transparent; color: #fff; border-color: rgba(236, 232, 229, 0.10); padding: 15px 68px; margin-bottom: 0; } .payment-donate-section-four .chicklet-list :checked+label { background: #242424; } .payment-donate-section-four .chicklet-list { margin: 0 -15px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .payment-donate-section-four .chicklet-list li { padding: 0 15px 30px; margin-bottom: 0; } .payment-donate-section-four .other-amount { -ms-flex-wrap: wrap; flex-wrap: wrap; } .payment-donate-section-four form .other-amount>* { margin-bottom: 30px; } .payment-donate-section-four .other-amount input { position: relative; -webkit-box-shadow: inset 0px 0px 7.2px 0.8px rgba(0, 0, 0, 0.18); box-shadow: inset 0px 0px 7.2px 0.8px rgba(0, 0, 0, 0.18); max-width: 370px; border-radius: 6px; font-size: 18px; background: transparent; color: #fff; border: 1px solid rgba(236, 232, 229, 0.10); padding: 15px 20px; padding-left: 80px; width: 100%; } .payment-donate-section-four .form-group { position: relative; margin: 0; margin-right: 30px; } .payment-donate-section-four .form-group:before { position: absolute; content: "$"; background: var(--theme-color-five); left: 0; top: 0; width: 60px; height: 100%; text-align: center; line-height: 60px; color: #fff; font-size: 18px; border-top-left-radius: 6px; border-bottom-left-radius: 6px; } .payment-donate-section-four .info-box { position: relative; margin-bottom: 5px; } .payment-donate-section-four .info-box a { position: relative; color: #fff; font-size: 18px; font-weight: 500; } .payment-donate-section-four .info-box a+a { margin-left: 10px; } .payment-donate-section-four .donate-info-wrapper { position: relative; margin-bottom: 35px; } .payment-donate-section-four .progress-levels .progress-box .bar { height: 14px; background: #343434; border-radius: 6px; } .payment-donate-section-four .progress-levels .progress-box .bar .bar-innner { height: 14px; } .payment-donate-section-four .progress-levels .progress-box .bar .bar-fill { height: 14px; } .payment-donate-section-four .progress-levels .progress-box .percent { color: #fff; top: -12px; right: -10px; background: var(--theme-color-five); border-radius: 50%; width: 35px; height: 35px; line-height: 35px; text-align: center; } .payment-donate-section-four .progress-levels .progress-box { padding: 15px 0; } .payment-donate-section-four .progress-levels .progress-box .bar .bar-fill { background: var(--theme-color-five); border-radius: 6px; } .payment-donate-section-four .payment-donate-section-four .chicklet-list :checked+label { background: #242424; } .payment-donate-section-four .payment-donate-section-four .form-group:before { background: var(--theme-color-five); color: #fff; } .payment-donate-section-four .btn-style-five { background: var(--theme-color-five); color: #fff; } /*** ==================================================================== Causes Section Six ==================================================================== ***/ .causes-section-six { position: relative; padding: 110px 0; background-image: -ms-linear-gradient( 90deg, rgb(244, 241, 238) 0%, rgb(255, 255, 255) 100%); } .causes-section-six:before { position: absolute; content: ''; background: #242424 url(../images/resource/pattern-3.png) repeat 0 0; width: 100%; height: 100%; max-height: 390px; top: 0; right: 0; } .causes-section-six .wrapper-box { position: relative; background: var(--theme-color-five); border-top-right-radius: 5px; border-bottom-right-radius: 5px; } .causes-section-six .image { position: relative; padding-right: 20px; max-width: 370px; } .causes-section-six .image:before { position: absolute; content: ''; background: url(../images/resource/shape-5.png) no-repeat right center; width: 100%; height: 100%; top: 0; right: 20px; } .causes-section-six h2 { font-size: 30px; color: #fff; font-family: var(--prata); margin-bottom: 20px; } .causes-section-six .wrapper-box .text { margin-bottom: 25px; line-height: 26px; color: #fff; } .causes-section-six .theme-btn { display: inherit; width: -webkit-max-content; width: -moz-max-content; width: max-content; padding: 12px 40px; } .causes-section-six .theme-btn:hover { color: var(--theme-color-five); border-color: #fff; } .causes-section-six .theme-btn:after { background: #fff; } .causes-section-six .theme-btn:before { background: #fff; } .causes-section-six .progress-block .graph-outer { position: relative; padding: 15px; } .causes-section-six .progress-block { margin: 0; } .causes-section-six .progress-block .graph-outer .count-box { margin-top: 0; } .causes-section-six .progress-block .graph-outer>div { display: block !important; } .causes-section-six .info-box { position: relative; font-size: 24px; color: #fff; } .causes-section-six .info-box a { color: #fff; margin: 5px 0; display: inline-block; } .causes-section-six .info-box a span { font-size: 18px; text-transform: uppercase; font-weight: 400; } .causes-section-six .donation-wrapper { position: relative; padding: 20px 45px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; border-left: 1px solid #13a4a7; margin: 30px 0; } /* Caring Outer */ .caring-outer { position: relative; padding-top: 110px; } .caring-block-two+.caring-block-two { position: relative; } .caring-block-two .inner-box { position: relative; text-align: center; padding: 50px 30px; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; } .caring-block-two .icon-box { position: relative; font-size: 60px; color: var(--theme-color-five); margin: 0 auto; margin-bottom: 30px; margin-top: 10px; width: 120px; height: 120px; line-height: 120px; background: #ffffff; border-radius: 50%; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; text-align: center; } .caring-block-two .icon-box span { position: relative; } .caring-block-two .inner-box:hover .icon-box { color: #fff; background: var(--theme-color-five); } .caring-block-two .icon-box:before { position: absolute; content: ''; border: 10px solid #f4f1ee; left: 0; top: 0; width: 120px; height: 120px; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; border-radius: 50%; } .caring-block-two .inner-box:hover .icon-box:before { border-color: var(--theme-color-five); } .caring-block-two .icon-box:after { position: absolute; content: ''; border: 3px dotted var(--theme-color-five); left: 0; top: 0; width: 120px; height: 120px; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; border-radius: 50%; } .caring-block-two .inner-box:hover .icon-box:after { border: 50px dotted var(--theme-color-five); } .caring-block-two .icon-box span { position: relative; z-index: 2; } .caring-block-two h4 { position: relative; font-size: 20px; text-align: center; margin-bottom: 20px; color: #242424; } .caring-block-two .theme-btn { padding: 0; margin: 0 auto; color: #242424; text-transform: uppercase; font-size: 13px; font-weight: 500; } .causes-section-six .text { margin-bottom: 20px; } .caring-block-two .inner-box:hover { background: #fff; -webkit-box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.08); box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.08); } /*** ==================================================================== Causes Section Seven ==================================================================== ***/ .causes-section-seven { position: relative; padding: 110px 0; background-color: #fff; } .causes-section-seven .cause-carousel-wrapper { position: relative; margin: 0 -15px; } .cause-block-seven { position: relative; margin: 15px; } .cause-block-seven .inner-box { position: relative; background: #fff; padding: 20px; border-radius: 6px; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; border: 1px solid #eaeaea; } .cause-block-seven .inner-box:hover { -webkit-box-shadow: 0px 0px 20px 0px rgba(89, 83, 76, 0.1); box-shadow: 0px 0px 20px 0px rgba(89, 83, 76, 0.1); border-color: #fff; } .cause-block-seven .image { position: relative; overflow: hidden; margin-bottom: 30px; background: #242424; } .cause-block-seven .image img { width: 100%; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; } .cause-block-seven .inner-box:hover .image img { opacity: .1; } .cause-block-seven .image .link-btn { position: absolute; left: 50%; top: 50%; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; width: -webkit-max-content; width: -moz-max-content; width: max-content; opacity: 0; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: perspective(1200px) rotateX(90deg) translateZ(-10px) translateX(-50%) translateY(-50%); transform: perspective(1200px) rotateX(90deg) translateZ(-10px) translateX(-50%) translateY(-50%); } .cause-block-seven .inner-box:hover .image .link-btn { -webkit-transform: perspective(1200px) rotateX(0deg) translateZ(0px) translateX(-50%) translateY(-50%); transform: perspective(1200px) rotateX(0deg) translateZ(0px) translateX(-50%) translateY(-50%); opacity: 1; } .cause-block-seven .image .link-btn .theme-btn { color: #fff; background: var(--theme-color-five); border-color: var(--theme-color-five); padding: 11px 40px; } .cause-block-seven .image .link-btn a:hover { color: var(--theme-color-five); border-color: #fff; } .cause-block-seven .image .link-btn a:before { background: var(--theme-color-five); } .cause-block-seven .image .link-btn a:after { background: #fff; } .cause-block-seven .lower-content { position: relative; padding: 0px 20px 15px; } .cause-block-seven h4 { font-size: 20px; margin-bottom: 3px; } .cause-block-seven h4 a { color: #242424; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; } .cause-block-seven h4 a:hover { color: var(--theme-color-five); } .cause-block-seven .category { font-size: 15px; color: #a6a6a6; margin-bottom: 14px; } .cause-block-seven .category a { color: #a6a6a6; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; display: inline-block; position: relative; } .cause-block-seven .category a:hover { color: var(--theme-color-five); } .cause-block-seven .category a:before { position: absolute; content: ''; background: #a6a6a6; height: 1px; left: 28px; right: 0; bottom: 3px; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; } .cause-block-seven .category a:hover:before { background: var(--theme-color-five); } .cause-block-seven .category span { margin-right: 10px; font-size: 18px; position: relative; top: 3px; } .cause-block-seven .lower-content .text { margin-bottom: 18px; } .cause-block-seven .lower-content .info-box { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .cause-block-seven .lower-content .info-box a { color: #858585; } .cause-block-seven .lower-content .info-box a span { font-size: 13px; font-weight: 500; text-transform: uppercase; color: var(--dark-color); } .cause-block-seven .progress-levels .progress-box .bar .bar-fill { background: var(--theme-color-five); } .causes-section-seven .owl-dot-style-one .owl-dots .owl-dot.active span, .causes-section-seven .owl-dot-style-one .owl-dots .owl-dot:hover span { border-color: var(--theme-color-five); } /*** ==================================================================== Why Choose Us Section Two ==================================================================== ***/ .whychoose-us-section-two { position: relative; padding: 110px 0 80px; } .whychoose-block-two { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 30px; } .whychoose-block-two .icon-box { position: relative; width: 62px; height: 62px; border: 2px solid #d2d2d2; border-radius: 50%; line-height: 58px; text-align: center; font-size: 16px; color: var(--theme-color-five); margin-right: 35px; margin-bottom: 15px; } .whychoose-block-two h4 { font-size: 20px; margin-bottom: 15px; } .whychoose-us-section-two .link-btn { margin-right: 30px; margin-top: 15px; } .whychoose-us-section-two .link-btn .theme-btn { color: #fff; background: var(--theme-color-five); border-color: var(--theme-color-five); padding: 14px 50px; } .whychoose-us-section-two .link-btn a:hover { color: var(--theme-color-five); border-color: var(--theme-color-five); } .whychoose-us-section-two .link-btn a:before { background: var(--theme-color-five); } .whychoose-us-section-two .link-btn a:after { background: #fff; } .whychoose-us-section-two .wrapper-box { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; } .whychoose-us-section-two .image-block-two { position: relative; text-align: center; max-width: 570px; margin: 0 auto; margin-bottom: 30px; } .whychoose-us-section-two .image-block-two .logo-box { position: absolute; top: 50px; right: 0; width: 160px; height: 160px; text-align: center; line-height: 160px; background: #fff; border-radius: 50%; z-index: 99; } .whychoose-us-section-two .image-block-two .logo-box .image { position: absolute; top: 10px; left: 10px; width: 140px; height: 140px; text-align: center; line-height: 140px; background: #fff; border-radius: 50%; -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1); } .whychoose-us-section-two .image-block-two .logo-box .image:before { position: absolute; content: ''; width: 120px; height: 120px; border: 3px dotted var(--theme-color-five); left: 10px; top: 10px; border-radius: 50%; } .whychoose-us-section-two .image-block-two .logo-box img { position: relative; } .whychoose-us-section-two .image-block-two .video-box { position: absolute; bottom: 50px; left: 0; border-radius: 4px; -webkit-box-shadow: 0px 20px 20px 0px rgba(89, 83, 76, 0.3); box-shadow: 0px 20px 20px 0px rgba(89, 83, 76, 0.3); } .whychoose-us-section-two .image-block-two .video-box img { border-radius: 4px; } .whychoose-us-section-two .image-block-two .video-box:before { position: absolute; content: ''; background: #242424; left: 0; top: 0; right: 0; bottom: 0; opacity: .9; border-radius: 4px; } .whychoose-us-section-two .image-block-two .video-box .video-btn { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 62px; height: 62px; line-height: 58px; text-align: center; font-size: 20px; color: #fff; border: 2px solid #fff; -webkit-box-shadow: 0px 20px 20px 0px rgba(89, 83, 76, 0.3); box-shadow: 0px 20px 20px 0px rgba(89, 83, 76, 0.3); border-radius: 50%; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; } .whychoose-us-section-two .contact-info-five { position: relative; padding-left: 70px; } .whychoose-us-section-two .contact-info-five .icon-box { position: absolute; left: 0; top: 0; width: 56px; height: 56px; line-height: 56px; text-align: center; border: 2px solid var(--theme-color-five); border-radius: 50%; color: var(--theme-color-five); } .whychoose-us-section-two .contact-info-five h5 { font-size: 13px; font-weight: 500; text-transform: uppercase; color: #242424; margin-bottom: 10px; } .whychoose-us-section-two .contact-info-five h4 { font-size: 20px; color: var(--theme-color-five); } .whychoose-us-section-two .contact-info-five h4 a { color: var(--theme-color-five); } .whychoose-us-section-two .image-block-two .video-box .video-btn:hover { background: #fff; color: var(--theme-color-five); } /*** ==================================================================== Team Section Two ==================================================================== ***/ .team-section-six { position: relative; padding-bottom: 20px; } .team-section-six .auto-container { max-width: 100%; padding: 0; } .team-block-six { position: relative; z-index: 999; } .team-block-six .inner-box { position: relative; padding-bottom: 80px; margin-bottom: 30px; } .team-block-six .inner-box .image img { width: 100%; } .team-block-six .overlay { position: absolute; left: 0; right: 0; bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; z-index: 9; } .team-block-six .author-info { position: relative; top: 0; width: 100%; padding: 31px 0; text-align: center; } .team-block-six .author-info:before { position: absolute; content: ''; background: var(--theme-color-five); left: 0; top: 0; height: 0%; right: 22px; left: 22px; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; border-radius: 4px; } .team-block-six .inner-box:hover .author-info:before { height: 100%; } .team-block-six .author-info h4 { font-size: 20px; color: #fff; -webkit-transition: .7s ease; -o-transition: .7s ease; transition: .7s ease; opacity: 0; visibility: hidden; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); margin-bottom: 5px; } .team-block-six .inner-box:hover .author-info h4 { opacity: 1; visibility: visible; -webkit-transition-delay: .5s; -o-transition-delay: .5s; transition-delay: .5s; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .team-block-six .author-info h4 a { color: #fff; } .team-block-six .author-info .designation { color: #fff; font-size: 15px; opacity: 0; visibility: hidden; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); -webkit-transition: .7s; -o-transition: .7s; transition: .7s; } .team-block-six .inner-box:hover .author-info .designation { opacity: 1; visibility: visible; -webkit-transition-delay: .9s; -o-transition-delay: .9s; transition-delay: .9s; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .team-block-six .social-icon-two { position: relative; margin-bottom: 30px; } .team-block-six .social-icon-two li { padding: 0; margin: 0 5px; border: 0; opacity: 0; visibility: hidden; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; } .team-block-six .inner-box:hover .social-icon-two li { opacity: 1; visibility: visible; -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } .team-block-six .social-icon-two li a { width: 48px; height: 48px; line-height: 48px; font-size: 14px; } .team-block-six .social-icon-two li a:hover { background: var(--theme-color-five); color: #fff; } .team-block-six .inner-box:hover .social-icon-two li:nth-child(2) { -webkit-transition-delay: .2s; -o-transition-delay: .2s; transition-delay: .2s; } .team-block-six .inner-box:hover .social-icon-two li:nth-child(3) { -webkit-transition-delay: .4s; -o-transition-delay: .4s; transition-delay: .4s; } .team-block-six .inner-box:hover .social-icon-two li:nth-child(4) { -webkit-transition-delay: .6s; -o-transition-delay: .6s; transition-delay: .6s; } .team-section-six .owl-dot-style-one .owl-dots { margin-top: -75px; } .team-section-six .owl-dot-style-one .owl-dots .owl-dot.active span { border-color: var(--theme-color-five); } .team-section-six .owl-dot-style-one .owl-dots .owl-dot.active span, .team-section-six .owl-dot-style-one .owl-dots .owl-dot:hover span { border-color: var(--theme-color-five); } /*** ==================================================================== Gallery Section Three ==================================================================== ***/ /* Filter Text */ .filters { position: relative; } .filters ul { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .filters li { border: 1px solid #eaeaea; border-right: 0px; padding: 15px 40px; font-size: 16px; cursor: pointer; -webkit-transition: .9s ease; -o-transition: .9s ease; transition: .9s ease; } .filters li .count { position: absolute; opacity: 0; left: 0; top: 0; } .filters li:last-child { border-right: 1px solid #eaeaea; border-top-right-radius: 5px; border-bottom-right-radius: 5px; } .filters li:first-child { border-bottom-left-radius: 5px; border-top-left-radius: 5px; } .filters li.active { background: #2cbb4b; border-color: #2cbb4b; color: #fff; } .gallery-section-three { position: relative; padding: 70px 0 80px; } .gallery-block-three { position: relative; padding: 0 15px; } .gallery-block-three .inner-box { position: relative; margin-bottom: 30px; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; } .gallery-block-three .inner-box:hover { -webkit-box-shadow: 0px 20px 20px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 20px 20px 0px rgba(0, 0, 0, 0.25); -webkit-transform: perspective(80px) rotateX(1deg); transform: perspective(80px) rotateX(1deg); } .gallery-block-three .image img { width: 100%; } .gallery-block-three .image::before { background: #242424; bottom: 0px; content: ""; left: 0px; opacity: 0; position: absolute; right: 0px; top: 0px; z-index: 9; -webkit-transition: all 0.4s ease-in-out 0s; -o-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; } .gallery-block-three:hover .image::before { opacity: 0.95; } .gallery-block-three .image { position: relative; overflow: hidden; margin: 0; border-radius: 6px; } .gallery-block-three .image img { -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; } .gallery-block-three:hover .image img { -webkit-transform: translateX(0%) translateY(0px) scale(1); -ms-transform: translateX(0%) translateY(0px) scale(1); transform: translateX(0%) translateY(0px) scale(1); } .gallery-block-three .overlay a { background: transparent; border-radius: 50%; color: #fff; font-size: 20px; height: 72px; width: 72px; margin: 0 5px; line-height: 68px; border: 2px solid #fff; opacity: 0; display: inline-block; text-align: center; -webkit-transform: translateX(0%) translateY(-30%) scale(0.5); -ms-transform: translateX(0%) translateY(-30%) scale(0.5); transform: translateX(0%) translateY(-30%) scale(0.5); -webkit-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .gallery-block-three .overlay a:hover { background: #2cbb4b; border-color: #2cbb4b; color: #fff; } .gallery-block-three:hover .overlay a { opacity: 1; -webkit-transform: translateX(0) translateY(0%) scale(1); -ms-transform: translateX(0) translateY(0%) scale(1); transform: translateX(0) translateY(0%) scale(1); } .gallery-block-three .overlay { left: 0; opacity: 0; position: absolute; right: 0; text-align: center; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; z-index: 10; } .gallery-block-three:hover .overlay { opacity: 1; } .gallery-block-three .caption-title { bottom: 0; left: 0; opacity: 0; position: absolute; -webkit-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; z-index: 12; width: 100%; padding: 21px 30px 26px; } .gallery-block-three:hover .caption-title { opacity: 1; } .gallery-block-three .caption-title h4 { color: #fff; font-size: 20px; font-weight: 400; text-transform: capitalize; -webkit-transform: translateY(15px); -ms-transform: translateY(15px); transform: translateY(15px); -webkit-transition: all 0.4s ease-in-out 0s; -o-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; } .gallery-block-three .caption-title h4 a { color: #fff; } .gallery-block-three:hover .caption-title h4, .gallery-block-three:hover .caption-title h5 { -webkit-transform: translateX(0px); -ms-transform: translateX(0px); transform: translateX(0px); } .gallery-block-three .caption-title h5 { color: var(--theme-color-five); display: inline-block; font-size: 15px; line-height: 16px; -webkit-transform: translateY(15px); -ms-transform: translateY(15px); transform: translateY(15px); -webkit-transition: all 0.4s ease-in-out 0s; -o-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; text-transform: capitalize; } /* Gallery Section Four */ .gallery-section-four { position: relative; padding: 110px 0 80px; } .gallery-section-four .gallery-block-three .image::before { background: var(--dark-color); } .gallery-section-four .gallery-block-three .caption-title h5 { color: var(--theme-color); } .gallery-section-four .gallery-block-three .overlay a:hover { background: var(--theme-color); border-color: var(--theme-color); } /* Gallery Section Five */ .gallery-section-five { position: relative; padding: 110px 0 80px; } .gallery-section-five .filters li.active { background: var(--theme-color); border-color: var(--theme-color); } .gallery-block-four { position: relative; padding: 0 15px; } .gallery-block-four .inner-box { position: relative; margin-bottom: 30px; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; } .gallery-block-four .image { position: relative; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; } .gallery-block-four .inner-box:hover .image { -webkit-box-shadow: 0px 20px 20px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 20px 20px 0px rgba(0, 0, 0, 0.25); -webkit-transform: perspective(80px) rotateX(1deg); transform: perspective(80px) rotateX(1deg); } .gallery-block-four .image img { width: 100%; } .gallery-block-four .image::before { background: var(--dark-color); bottom: 0px; content: ""; left: 0px; opacity: 0; position: absolute; right: 0px; top: 0px; z-index: 9; -webkit-transition: all 0.4s ease-in-out 0s; -o-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; } .gallery-block-four:hover .image::before { opacity: 0.95; } .gallery-block-four .image { position: relative; overflow: hidden; margin: 0; border-radius: 6px; } .gallery-block-four .image img { -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; } .gallery-block-four:hover .image img { -webkit-transform: translateX(0%) translateY(0px) scale(1); -ms-transform: translateX(0%) translateY(0px) scale(1); transform: translateX(0%) translateY(0px) scale(1); } .gallery-block-four .overlay a { background: transparent; border-radius: 50%; color: #fff; font-size: 20px; height: 72px; width: 72px; margin: 0 5px; line-height: 68px; border: 2px solid #fff; opacity: 0; display: inline-block; text-align: center; -webkit-transform: translateX(0%) translateY(-30%) scale(0.5); -ms-transform: translateX(0%) translateY(-30%) scale(0.5); transform: translateX(0%) translateY(-30%) scale(0.5); -webkit-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .gallery-block-four .overlay a:hover { background: var(--theme-color); border-color: var(--theme-color); color: #fff; } .gallery-block-four:hover .overlay a { opacity: 1; -webkit-transform: translateX(0) translateY(0%) scale(1); -ms-transform: translateX(0) translateY(0%) scale(1); transform: translateX(0) translateY(0%) scale(1); } .gallery-block-four .overlay { left: 0; opacity: 0; position: absolute; right: 0; text-align: center; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; z-index: 10; } .gallery-block-four:hover .overlay { opacity: 1; } .gallery-block-four .caption-title { position: relative; ; -webkit-transition: all 0.3s ease-in-out 0s; ; -o-transition: all 0.3s ease-in-out 0s; ; transition: all 0.3s ease-in-out 0s; z-index: 12; width: 100%; padding: 21px 30px 26px; text-align: center; } .gallery-block-four .caption-title h4 { color: #fff; font-size: 20px; font-weight: 400; text-transform: capitalize; -webkit-transition: all 0.4s ease-in-out 0s; -o-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; } .gallery-block-four .caption-title h4 a { color: var(--dark-color); } .gallery-block-four .caption-title h5 { color: var(--theme-color); display: inline-block; font-size: 15px; line-height: 16px; -webkit-transition: all 0.4s ease-in-out 0s; -o-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; text-transform: capitalize; } /* Gallery Section Six */ .gallery-section-six { position: relative; padding: 110px 0 80px; } .gallery-section-six .gallery-block-three .inner-box:hover { -webkit-transform: perspective(0px) rotateX(0deg); transform: perspective(0px) rotateX(0deg); } .gallery-section-six .gallery-block-three .image::before { background: var(--dark-color); } .gallery-section-six .gallery-block-three .caption-title h5 { color: var(--theme-color); } .gallery-section-six .gallery-block-three .overlay a:hover { background: var(--theme-color); border-color: var(--theme-color); } /* Gallery Block Five*/ .gallery-block-five { position: relative; padding: 0 15px; } .gallery-block-five .inner-box { position: relative; margin-bottom: 30px; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; } .gallery-block-five .inner-box:hover { -webkit-box-shadow: 0px 20px 20px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 20px 20px 0px rgba(0, 0, 0, 0.25); } .gallery-block-five .image img { width: 100%; } .gallery-block-five .image::before { background: var(--dark-color); bottom: 0px; content: ""; left: 0px; opacity: 0; position: absolute; right: 0px; top: 0px; z-index: 9; -webkit-transition: all 0.4s ease-in-out 0s; -o-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; } .gallery-block-five:hover .image::before { opacity: 0.95; } .gallery-block-five .image { position: relative; overflow: hidden; margin: 0; border-radius: 6px; } .gallery-block-five .image img { -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; } .gallery-block-five:hover .image img { -webkit-transform: translateX(0%) translateY(0px) scale(1); -ms-transform: translateX(0%) translateY(0px) scale(1); transform: translateX(0%) translateY(0px) scale(1); } .gallery-block-five .overlay a { background: transparent; border-radius: 50%; color: #fff; font-size: 20px; height: 72px; width: 72px; margin: 0 5px; line-height: 68px; border: 2px solid #fff; opacity: 0; display: inline-block; text-align: center; -webkit-transform: translateX(0%) translateY(-30%) scale(0.5); -ms-transform: translateX(0%) translateY(-30%) scale(0.5); transform: translateX(0%) translateY(-30%) scale(0.5); -webkit-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .gallery-block-five .overlay a:hover { background: var(--theme-color-five); border-color: var(--theme-color-five); color: #fff; } .gallery-block-five:hover .overlay a { opacity: 1; -webkit-transform: translateX(0) translateY(0%) scale(1); -ms-transform: translateX(0) translateY(0%) scale(1); transform: translateX(0) translateY(0%) scale(1); } .gallery-block-five .overlay { left: 0; opacity: 0; position: absolute; right: 0; text-align: center; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; z-index: 10; } .gallery-block-five:hover .overlay { opacity: 1; } .gallery-block-five .caption-title { bottom: 30px; left: 30px; position: absolute; -webkit-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; z-index: 12; } .gallery-block-five .caption-title h4 { color: #fff; font-size: 18px; font-weight: 400; text-transform: capitalize; -webkit-transition: all 0.4s ease-in-out 0s; -o-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; } .gallery-block-five .caption-title h4 a { color: var(--dark-color); padding: 19px 30px; display: inline-block; border-radius: 6px; background: #fff; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; } .gallery-block-five .caption-title h4 a span { position: absolute; background: var(--theme-color); color: #fff; padding: 19px 6px; width: 50px; display: inline-block; text-align: center; top: 0; right: -50px; border-bottom-right-radius: 6px; border-top-right-radius: 6px; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; opacity: 0; } .gallery-block-five .inner-box:hover .caption-title h4 a span { opacity: 1; } .gallery-block-five .inner-box:hover .caption-title h4 a { border-bottom-right-radius: 0px; border-top-right-radius: 0px; } /*** ==================================================================== Newsletter Two ==================================================================== ***/ .newsletter-two { position: relative; } .newsletter-two .wrapper-box { position: relative; border-radius: 100px; z-index: 99; margin-bottom: -60px; } .newsletter-two .column { position: relative; padding: 20px 40px; } .newsletter-two input[type="email"] { height: 56px; width: calc(100% - 178px); padding: 0 30px; border: 2px solid #fff; background: transparent; color: #fff; border-top-left-radius: 28px; border-bottom-left-radius: 28px; } .newsletter-two .theme-btn { background: #fff; color: #222; border-radius: 0px; border-top-right-radius: 28px; border-bottom-right-radius: 28px; } .newsletter-two .theme-btn:hover { color: #fff; } .newsletter-two form { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; } .newsletter-two .social-icon-three li a { color: #fff; border-color: #20aa3d; background: #20aa3d; } .newsletter-two .social-icon-three li a:hover { background: #fff; color: var(--theme-color-five); } /*** ==================================================================== Main Footer Style Five ==================================================================== ***/ .main-footer.style-five::before { position:absolute; top:0; left:0; width:100%; height:100%; background-color:#000000db; content:''; } .main-footer.style-five { background-image: url(../img/home/karate-training.jpg); padding-top: 30px; position:relative; background-size:cover; } .main-footer.style-five .widget-wrapper { border-color: transparent; } .main-footer.style-five .footer-bottom-two { background: #1c1c1c; } /* About Widget Five */ .about-widget-five .text { color: #afafaf; margin-bottom: 25px; line-height: 26px; } .about-widget-five ul { position: relative; margin-top: -10px; } .about-widget-five ul li { font-size: 13px; font-weight: 500; color: #fff; text-transform: uppercase; } .about-widget-five ul li strong { font-weight: 500; } .about-widget-five ul li a { color: #afafaf; font-size: 15px; font-weight: 400; text-transform: capitalize; } .main-footer.style-five .link-widget-three ul li a { color: #afafaf; font-size: 15px; } .main-footer.style-five .link-widget-three ul li { margin-bottom: 17px; } .main-footer.style-five .link-widget-three ul li a:before { color: #afafaf; content: "\f101"; } .main-footer.style-five .link-widget-three ul li a:hover { color: var(--theme-color-five); } .main-footer.style-five .link-widget-three ul li a:hover:before { color: var(--theme-color-five); } /* Event Widget */ .event-widget .signle-event { position: relative; padding: 10px 20px; padding-left: 100px; border: 1px solid rgba(236, 232, 229, 0.10); margin-bottom: 20px; border-radius: 6px; min-height: 70px; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; } .event-widget .signle-event:hover { border-color: #02c06d; } .event-widget .signle-event .date { position: absolute; left: 0; top: 0; width: 70px; height: 68px; background: #02c06d; color: #fff; font-size: 14px; font-weight: 500; text-transform: uppercase; text-align: center; line-height: 1.5em; padding: 14px 0 0; border-top-left-radius: 6px; border-bottom-left-radius: 6px; } .event-widget .signle-event h5 { font-size: 16px; } .event-widget .signle-event h5 a { color: #fff; } .event-widget .signle-event .location { color: #afafaf; font-size: 13px; text-transform: uppercase; position: relative; bottom: -4px; } .event-widget .signle-event .location span { margin-right: 5px; } /* Footer Bottom */ .main-footer.style-five .footer-bottom-two .copy-right-text { color: #afafaf; } /* Footer Menu */ .footer-menu { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; } .footer-menu li+li { margin-left: 25px; position: relative; } .footer-menu li a { color: #afafaf; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; } .footer-menu li+li:before { position: absolute; content: ''; background: #afafaf; width: 1px; height: 12px; left: -13px; bottom: 10px; } .footer-menu li a:hover { color: var(--theme-color-five); } /*** ==================================================================== Cause Info ==================================================================== ***/ .cause-info { position: relative; margin-bottom: -120px; z-index: 9; } .cause-info .wrapper-box { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-shadow: 0px 20px 20px 0px rgba(89, 83, 76, 0.1); box-shadow: 0px 20px 20px 0px rgba(89, 83, 76, 0.1); background: #fff; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); border-radius: 6px; max-width: 970px; margin: 0 auto; padding: 25px 0; } .cause-info .wrapper-box>div { min-width: 145px; text-align: center; border-right: 1px solid #eaeaea; } .cause-info .wrapper-box>div:last-child { border-right: 0px; } .cause-info .wrapper-box>div span { color: var(--theme-color); text-transform: uppercase; } .cause-info .progress-block { margin: 0; } .cause-info .progress-block .inner-box { max-width: 70px; margin: 0 auto; } .cause-info .progress-block .graph-outer .count-box { color: var(--theme-color); font-weight: 400; } .cause-info .progress-block .graph-outer .count-text { color: var(--theme-color); font-weight: 400; } /*** ================================================================== Causes Details ================================================================== ***/ .cause-details .content-column { position: relative; padding-top: 170px; } .sidebar-page-container.cause-details .sidebar { padding-top: 170px; } .cause-details .content-column h4 { font-size: 20px; margin-bottom: 30px; } .cause-details ul.list { position: relative; margin-bottom: 30px; } .cause-details ul.list li { font-size: 15px; color: #858585; margin-bottom: 6px; } .cause-details ul.list li span { color: var(--theme-color); margin-right: 15px; font-size: 14px; } .feature-block-three { position: relative; } .feature-block-three .inner-box { position: relative; padding-left: 125px; margin-bottom: 45px; } .feature-block-three .icon-box { position: absolute; left: 0; top: 10px; width: 100px; height: 100px; line-height: 100px; background: #f4f1ee; text-align: center; color: #a8a8a8; font-size: 50px; border-radius: 50%; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; } .feature-block-three .icon-box:hover { background: var(--theme-color); color: #fff; } .feature-block-three h5 { margin-bottom: 20px; } .feature-block-three .inner-box h4 { margin-bottom: 18px; } .feature-block-three .inner-box .text { line-height: 26px; margin-bottom: 10px; } .feature-block-three .inner-box a { font-size: 15px; text-transform: uppercase; font-weight: 500; font-size: 13px; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; position: relative; } .feature-block-three .inner-box a:hover { padding-left: 20px; color: var(--theme-color); } .feature-block-three .inner-box a i { position: absolute; left: 0; top: -6px; opacity: 0; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; } .feature-block-three .inner-box a:hover i { opacity: 1; } .cause-details .video-box { position: relative; width: -webkit-max-content; width: -moz-max-content; width: max-content; margin-bottom: 30px; } .cause-details .video-box a { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); height: 90px; width: 90px; background: #fff; text-align: center; line-height: 90px; font-size: 40px; border-radius: 50px; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; } .cause-details .video-box a:hover { color: #fff; background: var(--theme-color); } /* Office Location Widget */ .cause-details .recent-donars .wrapper-box { position: relative; height: 480px; width: 100%; margin-bottom: 22px; } .cause-details .recent-donars .wrapper-box:before { content: ''; position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; display: block; background: url(../images/resource/map-4.png) center center no-repeat; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .cause-details .recent-donars .donor-thumb { position: absolute; left: 6%; top: 16%; width: 60px; height: 60px; border-radius: 50%; background: var(--theme-color-two); cursor: pointer; } .cause-details .recent-donars .donor-thumb img { border-radius: 50%; } .cause-details .recent-donars .donor-thumb:nth-child(2) { left: 26%; top: 33%; } .cause-details .recent-donars .donor-thumb:nth-child(3) { left: 40%; top: 18%; } .cause-details .recent-donars .donor-thumb:nth-child(4) { left: auto; top: 18%; right: 20%; } .cause-details .recent-donars .donor-thumb:nth-child(5) { left: 27%; top: auto; bottom: 17%; } .cause-details .recent-donars .donor-thumb:nth-child(6) { left: auto; right: 39%; top: 32%; } .cause-details .recent-donars .donor-thumb:nth-child(7) { left: auto; right: 20%; top: 48%; } .cause-details .recent-donars .donor-thumb:nth-child(8) { left: auto; right: 9%; bottom: 17%; top: auto; } .cause-details .recent-donars .donor-thumb .content { opacity: 0; position: relative; min-width: 150px; bottom: 135px; left: 0px; -webkit-transition: 1s; -o-transition: 1s; transition: 1s; -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px); background: var(--theme-color); font-size: 15px; padding: 10px 15px; border-radius: 6px; z-index: 9; pointer-events: none; } .cause-details .recent-donars .donor-thumb:hover .content { opacity: 1; -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } .cause-details .recent-donars .donor-thumb .content:before { position: absolute; content: ''; left: 20px; height: 18px; width: 18px; bottom: -16px; background: var(--theme-color); -webkit-clip-path: polygon(50% 50%, 0 0, 100% 0); clip-path: polygon(50% 50%, 0 0, 100% 0); } .cause-details .recent-donars .donor-thumb .text { font-size: 15px; font-weight: 400; line-height: 20px; color: #fff; } .cause-details .recent-donars .link-btn a { background: transparent; font-size: 13px; font-weight: 500; color: #fff; text-transform: uppercase; } .cause-details .recent-donars .link-btn a span { margin-right: 10px; color: var(--theme-color-two); } /* Share Post */ .cause-details .share-post { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; padding-top: 40px; border-top: 1px solid #eaeaea; margin-top: 50px; margin-bottom: 80px; } .cause-details .share-post .text { font-size: 13px; font-weight: 500; text-transform: uppercase; color: var(--dark-color); margin-right: 20px; } .cause-details .share-post .text i { margin-right: 8px; } .social-icon-seven { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .social-icon-seven li+li { margin-left: 10px; } .social-icon-seven li a { font-size: 15px; padding: 4px 15px; background: #222; color: #fff; display: inline-block; border-radius: 6px; } .social-icon-seven li a span { margin-right: 7px; } .social-icon-seven li a.facebook { background: #395599; } .social-icon-seven li a.twitter { background: #1c9deb; } .social-icon-seven li a.pinterest { background: #c51f26; } /* Donate Form */ .cause-details .donate-form-area .donate-form-wrapper { -webkit-box-shadow: 0px 0px 30px 0px rgba(89, 83, 76, 0.15); box-shadow: 0px 0px 30px 0px rgba(89, 83, 76, 0.15); margin-bottom: 100px; } /* Event Time Place */ .event-time-place { position: relative; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .event-time-place .content { position: relative; background: #fff; padding: 42px 30px; text-align: center; border-radius: 6px; -webkit-box-shadow: 0px 20px 20px 0px rgba(89, 83, 76, 0.1); box-shadow: 0px 20px 20px 0px rgba(89, 83, 76, 0.1); } .event-time-place .content h2 { font-size: 30px; margin-bottom: 20px; padding-bottom: 20px; font-family: var(--prata); position: relative; } .event-time-place .content h2:before { position: absolute; content: ''; height: 2px; width: 50px; left: 50%; bottom: 0; background: var(--theme-color); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } /* About Event */ .about-event { position: relative; padding-bottom: 80px; } .about-event .tab-btn-style-one { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border: 0px; z-index: 9; } .about-event .tab-btn-style-one .nav-link { border: 0px; background: #fff; -webkit-box-shadow: 0px 0px 20px 0px rgba(89, 83, 76, 0.15); box-shadow: 0px 0px 20px 0px rgba(89, 83, 76, 0.15); padding: 14.5px 30px; font-size: 18px; color: var(--dark-color); border-radius: 5px; } .about-event .tab-btn-style-one .nav-item { margin: 0 23px 20px; } .about-event .tab-btn-style-one .nav-link h4 { font-size: 18px; } .about-event .tab-btn-style-one .nav-link.active { background: var(--theme-color); color: #fff; } .about-event .border-shape { position: relative; display: inline-block; max-width: 770px; margin: 0 auto; height: 1px; width: 100%; background: #eaeaea; -webkit-transform: translateY(-65px); -ms-transform: translateY(-65px); transform: translateY(-65px); } .about-event .border-shape:before { position: absolute; content: ''; height: 10px; width: 10px; border: 2px solid #c2c2c2; border-radius: 50%; top: 0; left: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .about-event .border-shape:after { position: absolute; content: ''; height: 10px; width: 10px; border: 2px solid #c2c2c2; border-radius: 50%; top: 0; right: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .about-event .content { position: relative; } .about-event .content h2 { font-size: 30px; font-family: var(--prata); margin-bottom: 30px; } .about-event .content .info-box { position: relative; margin-bottom: 20px; } .about-event .content .info-box h5 { font-size: 13px; font-weight: 500; color: #a6a6a6; text-transform: uppercase; margin-bottom: 3px; } .about-event .content .info-box a { font-size: 18px; color: var(--dark-color); } /*** ================================================================== Team Section Four ================================================================== ***/ .team-section-four { position: relative; padding: 0 0 90px; } .team-block-four { position: relative; padding: 0 15px 30px; } .team-block-four .inner-box { position: relative; } .team-block-four .lower-content { background: #fff; -webkit-box-shadow: 0px 0px 20px 0px rgba(89, 83, 76, 0.15); box-shadow: 0px 0px 20px 0px rgba(89, 83, 76, 0.15); padding: 80px 20px 20px; text-align: center; border-radius: 6px; margin-top: -60px; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; } .team-block-four .inner-box .image img { border-radius: 50%; margin: 0 auto; } .team-block-four .inner-box h4 { font-size: 18px; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; } .team-block-four .inner-box h4 a { color: var(--dark-color); -webkit-transition: .5s; -o-transition: .5s; transition: .5s; } .team-block-four .inner-box .designation { color: var(--theme-color); border-bottom: 1px solid #eaeaea; padding-bottom: 8px; max-width: 190px; margin: 0 auto; margin-bottom: 15px; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; } .team-block-four .inner-box .social-icon-two { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .team-block-four .inner-box .social-icon-two li { border: none; } .team-block-four .inner-box .social-icon-two li a { color: var(--dark-color); } .team-block-four .inner-box:hover .lower-content { background: var(--theme-color); } .team-block-four .inner-box:hover h4 a { color: #fff; } .team-block-four .inner-box:hover .designation { color: #fff; } .team-block-four .inner-box:hover .social-icon-two li a { color: #fff; background: var(--theme-color); } .border-bottom { border-bottom: 1px solid #eaeaea; width: 100%; height: 1px; display: block; } .team-section-four .sec-title h1 { background: #fff; display: inline-block; padding-right: 60px; z-index: 5; } .team-section-four .border-bottom { -webkit-transform: translateY(-32px); -ms-transform: translateY(-32px); transform: translateY(-32px); } .team-section-four .owl-nav { background: #fff; -webkit-transform: translateY(-24px); -ms-transform: translateY(-24px); transform: translateY(-24px); margin: 0 -14px; padding-left: 30px; } .team-section-four .owl-nav>div { width: 20px; } .team-section-four .owl-nav-style-two .owl-nav>div { width: 29px; } /* Participate Form */ .participate-form { padding-bottom: 110px; } .participate-form label { color: #a6a6a6; font-size: 13px; font-weight: 500; text-transform: uppercase; margin-bottom: 16px; } .participate-form .contact-form input[type="text"], .participate-form .contact-form input[type="email"], .participate-form .contact-form input[type="password"], .participate-form .contact-form select, .participate-form .contact-form textarea { height: 65px; } .participate-form .ui-selectmenu-button.ui-button { padding: 23.5px 18px; } .participate-form .contact-form textarea { height: 160px; } .participate-form .contact-form .form-group { position: relative; } .participate-form .contact-form .submit-btn { position: absolute; top: 45px; right: 0; } .participate-form .contact-form .submit-btn span { display: block; font-size: 40px; margin-bottom: 10px; } .participate-form .contact-form button { font-size: 13px; font-weight: 500; text-transform: uppercase; padding: 46px 30px; background: #f4f1ee; border-top-right-radius: 6px; border-bottom-right-radius: 6px; } /* Single Blog Post */ .single-blog-post { position: relative; margin-top: 10px; } .single-blog-post .inner-box { position: relative; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; border-radius: 6px; } .single-blog-post .views, .single-blog-post .category { position: relative; color: #a6a6a6; text-transform: uppercase; font-weight: 500; font-size: 13px; } .single-blog-post .views a, .single-blog-post .category a { background: var(--dark-color); color: #fff; padding: 4px 10px; border-radius: 6px; margin-right: 6px; } .single-blog-post .category span { color: var(--theme-color); margin-right: 8px; font-size: 15px; } .single-blog-post .views span { color: var(--theme-color); margin-right: 8px; font-size: 16px; } .single-blog-post .top-content .image { position: relative; margin-bottom: 30px; } .single-blog-post .top-content .image img { border-top-left-radius: 6px; border-top-right-radius: 6px; width: 100%; } .single-blog-post .post-meta-info { position: absolute; bottom: 20px; right: 20px; } .single-blog-post .post-meta-info a { color: #fff; margin-right: 10px; } .single-blog-post .post-meta-info a span { margin-right: 10px; } .single-blog-post .lower-content { position: relative; padding: 30px 0 0; } .single-blog-post .top-content .date { color: #a6a6a6; font-weight: 500; text-transform: uppercase; font-size: 13px; } .single-blog-post .top-content .date span { margin-right: 8px; color: var(--theme-color); font-size: 15px; } .single-blog-post .top-content h2 { font-size: 30px; margin-bottom: 30px; } .single-blog-post .top-content h2 a { color: var(--dark-color-two); -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; } .single-blog-post .top-content h2 a:hover { color: var(--theme-color); } .single-blog-post .post-info { position: relative; -webkit-box-shadow: 0px 0px 45px 5px rgba(89, 83, 76, 0.08); box-shadow: 0px 0px 45px 5px rgba(89, 83, 76, 0.08); padding: 20px 30px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 30px; } .single-blog-post .post-info>div+div { margin-left: 15px; border-left: 1px solid #eaeaea; padding-left: 15px; } .single-blog-post .post-info .author { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; } .single-blog-post .post-info .author-thumb { position: relative; margin-right: 10px; } .single-blog-post .post-info .author-thumb img { border-radius: 50%; } .single-blog-post .post-info .author-title { font-size: 13px; font-weight: 500; color: #a6a6a6; text-transform: uppercase; } .single-blog-post .post-info .author-title a { color: #a6a6a6; } .single-blog-post .top-content .text { margin-bottom: 30px; } .single-blog-post .share-info { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; } .single-blog-post .share-icon.style-two ul a:hover { background: var(--theme-color-two); border-color: var(--theme-color-two); } .single-blog-post .share-icon.style-two { top: 18px; } .single-blog-post .share-info .text { position: absolute; right: 22px; font-size: 15px; color: var(--dark-color); font-weight: 500; } /* Blockquote */ .single-blog-post blockquote { position: relative; padding: 15px 0; padding-left: 100px; } .single-blog-post blockquote .text { color: var(--dark-color); font-size: 20px; font-family: var(--prata); } .single-blog-post .quote-icon { position: absolute; left: 0; top: 20px; } .single-blog-post ul.list { position: relative; margin-bottom: 50px; } .single-blog-post ul.list li { font-size: 15px; color: #858585; margin-bottom: 6px; } .single-blog-post ul.list li strong { font-weight: 500; } .single-blog-post ul.list li span { color: var(--theme-color); margin-right: 15px; font-size: 13px; } .single-blog-post .top-content h3 { font-size: 24px; font-family: var(--prata); margin-bottom: 30px; } .single-blog-post .post-tag { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; padding-bottom: 60px; margin-bottom: 40px; border-bottom: 1px solid #eaeaea; } .single-blog-post .post-tag .social-icon-three { margin-top: 30px; } .single-blog-post .post-tag .social-icon-three li a { border-color: #eaeaea; color: #858585; } .single-blog-post .post-tag .social-icon-three li a:hover { color: #fff; } .single-blog-post .post-tag .hint { margin-bottom: 5px; } .single-blog-post .post-tag .tag { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; } .single-blog-post .post-tag .tag a { font-size: 15px; color: #858585; display: inline-block; padding: 3px 20px; border: 1px solid #eaeaea; border-radius: 5px; } .single-blog-post .post-tag .tag li+li { margin-left: 10px; } .single-blog-post .author-box { position: relative; padding-bottom: 40px; border-bottom: 1px solid #eaeaea; margin-bottom: 50px; } .single-blog-post .author-box .wrapper-area { position: relative; padding-left: 205px; padding-top: 20px; min-height: 170px; } .single-blog-post .author-box .img-box { position: absolute; left: 0; top: 0; } .single-blog-post .author-box h3 { font-size: 20px; color: var(--dark-color); margin-bottom: 15px; } .single-blog-post .author-box .text { margin-bottom: 15px; } .single-blog-post .author-box .social-icon-three {} .single-blog-post .author-box .social-icon-three li a { border-color: transparent; color: #858585; width: auto; height: auto; line-height: 20px; padding-right: 11px; font-size: 16px; color: var(--dark-color); } .single-blog-post .author-box .social-icon-three li a:hover { color: var(--theme-color); background: transparent; } .blog-post-pagination .wrapper-box { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .blog-post-pagination { position: relative; margin-bottom: 80px; } .blog-post-pagination a { font-size: 13px; font-weight: 500; text-transform: uppercase; color: #858585; margin-bottom: 5px; display: inline-block; } .blog-post-pagination h4 { font-size: 20px; } .blog-post-pagination .next-post { text-align: right; } .blog-post-pagination .page-view { font-size: 50px; color: var(--theme-color); } .blog-post-pagination .comments-area { margin-bottom: 90px; } .single-blog-post .group-title { position: relative; margin-bottom: 40px; } .single-blog-post .group-title h2 { position: relative; font-size: 30px; font-family: var(--prata); } .comments-area .comment-box { position: relative; margin-bottom: 40px; -webkit-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .comments-area .comment-box:last-child .comment { padding-bottom: 0px; border-bottom: 0px; } .comments-area .comment-box:hover { border-color: #eb5310; } .comments-area .comment-box.reply-comment { margin-left: 50px; } .comments-area .comment { position: relative; font-size: 14px; border-bottom: 1px solid #e9e6e6; padding-bottom: 30px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .comments-area .comment .comment-inner { position: relative; width: 80%; } .comments-area .comment .comment-inner .text { position: relative; line-height: 1.5em; margin-bottom: 15px; } .comments-area .comment-box .author-thumb { position: relative; overflow: hidden; margin-bottom: 20px; margin-right: 30px; } .comments-area .comment-box .author-thumb img { width: 80px; display: block; } .comments-area .comment-info { position: relative; color: var(--dark-color); line-height: 24px; font-size: 20px; font-weight: 400; text-transform: capitalize; margin-bottom: 10px; } .comments-area .comment-info a { position: relative; color: #1e1e29; } .comments-area .date { font-size: 15px; color: #858585; margin-bottom: 20px; margin-left: 15px; } .comments-area .comment-box .reply-comment { position: relative; color: var(--dark-color); font-size: 13px; font-weight: 500; text-transform: uppercase; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; } .comments-area .comment-box .reply-comment:hover { color: #f13729; padding-left: 20px; } .comments-area .comment-box .reply-comment span { position: absolute; left: 0; top: -5px; opacity: 0; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; font-size: 13px; } .comments-area .comment-box .reply-comment:hover span { opacity: 1; } /*Comment Form*/ .comment-form { position: relative; margin-bottom: 30px; } .comment-form .form-group { position: relative; margin-bottom: 30px; } .comment-form .form-group:last-child { margin-bottom: 0px; } .comment-form .form-group input[type="text"], .comment-form .form-group input[type="password"], .comment-form .form-group input[type="tel"], .comment-form .form-group input[type="email"], .comment-form .form-group select { position: relative; display: block; width: 100%; line-height: 28px; padding: 15px 20px; height: 55px; color: #7c7b7b; font-size: 16px; font-weight: 400; background: #ffffff; border: 1px solid #eef2ed; -webkit-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .comment-form .form-group input[type="text"]:focus, .comment-form .form-group input[type="password"]:focus, .comment-form .form-group input[type="tel"]:focus, .comment-form .form-group input[type="email"]:focus, .comment-form .form-group select:focus, .comment-form .form-group textarea:focus { border-color: #f13729; } .comment-form .form-group textarea { position: relative; display: block; width: 100%; line-height: 26px; padding: 10px 20px; color: #7c7b7b; font-size: 16px; font-weight: 400; background: #ffffff; resize: none; height: 125px; border: 1px solid #eef2ed; -webkit-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .comment-form button { position: relative; display: block; margin-top: 10px; } /* Contact Info Three */ .contact-info-three { position: relative; padding: 60px 50px; -webkit-box-shadow: 0px 20px 48px 2px rgba(0, 0, 0, 0.08); box-shadow: 0px 20px 48px 2px rgba(0, 0, 0, 0.08); } .contact-info-three .single-info { position: relative; } .contact-info-three .single-info+.single-info { border-top: 1px solid #eaeaea; padding-top: 35px; margin-top: 35px; } .contact-info-three h4 { position: relative; margin-bottom: 20px; } .contact-info-three h4:before { position: absolute; content: ''; background: var(--theme-color); height: 15px; width: 3px; top: 8px; left: -50px; } .contact-info-three .text { margin-bottom: 15px; } .contact-info-three .link-btn { position: relative; font-size: 13px; font-weight: 500; color: var(--theme-color); text-transform: uppercase; } .contact-info-three .wrapper-box { position: relative; margin-bottom: 20px; } .contact-info-three .wrapper-box a { font-size: 15px; color: #858585; } .contact-form-section .contact-form input[type="text"], .contact-form-section .contact-form input[type="email"], .contact-form-section .contact-form input[type="password"], .contact-form-section .contact-form select, .contact-form-section .contact-form textarea { height: 65px; } .contact-form-section .ui-selectmenu-button.ui-button { padding: 23.5px 18px; } .contact-form-section .contact-form textarea { height: 140px; } .contact-form-section .flex-box { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .contact-form-section .hint { margin: 20px; margin-right: 0px; } home/fenix/domains/fenixsportsassociation.com/public_html/admin/assets/fonts/style.css 0000644 00000060531 14656235266 0025560 0 ustar 00 @font-face { font-family: 'clip-font'; src:url('fonts/clip-font.eot'); src:url('fonts/clip-font.eot?#iefix') format('embedded-opentype'), url('fonts/clip-font.woff') format('woff'), url('fonts/clip-font.ttf') format('truetype'), url('fonts/clip-font.svg#clip-font') format('svg'); font-weight: normal; font-style: normal; } /* Use the following CSS code if you want to use data attributes for inserting your icons */ [data-icon]:before { font-family: 'clip-font'; content: attr(data-icon); speak: none; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Use the following CSS code if you want to have a class per icon */ /* Instead of a list of all class selectors, you can use the generic selector below, but it's slower: [class*="clip-"] { */ .clip-settings, .clip-camera, .clip-tag, .clip-bulb, .clip-paperplane, .clip-bubble, .clip-banknote, .clip-music, .clip-data, .clip-t-shirt, .clip-clip, .clip-calendar, .clip-vynil, .clip-truck, .clip-note, .clip-world, .clip-key, .clip-pencil, .clip-pencil-2, .clip-images, .clip-images-2, .clip-list, .clip-earth, .clip-pictures, .clip-cog, .clip-home, .clip-home-2, .clip-pencil-3, .clip-images-3, .clip-eyedropper, .clip-droplet, .clip-droplet-2, .clip-image, .clip-music-2, .clip-camera-2, .clip-camera-3, .clip-headphones, .clip-headphones-2, .clip-gamepad, .clip-podcast, .clip-connection, .clip-connection-2, .clip-new, .clip-book, .clip-file, .clip-file-2, .clip-file-plus, .clip-file-minus, .clip-file-check, .clip-file-remove, .clip-file-3, .clip-copy, .clip-copy-2, .clip-copy-3, .clip-copy-4, .clip-paste, .clip-stack, .clip-stack-2, .clip-folder, .clip-folder-upload, .clip-folder-download, .clip-folder-remove, .clip-folder-plus, .clip-folder-2, .clip-folder-open, .clip-cc, .clip-tag-2, .clip-barcode, .clip-cart, .clip-phone-hang-up, .clip-phone, .clip-phone-2, .clip-location, .clip-compass, .clip-map, .clip-alarm, .clip-clock, .clip-history, .clip-stopwatch, .clip-keyboard, .clip-screen, .clip-laptop, .clip-mobile, .clip-mobile-2, .clip-tablet, .clip-mobile-3, .clip-rotate, .clip-rotate-2, .clip-redo, .clip-undo, .clip-database, .clip-bubble-2, .clip-bubbles, .clip-bubble-3, .clip-bubble-4, .clip-bubble-dots, .clip-bubble-dots-2, .clip-bubbles-2, .clip-bubbles-3, .clip-user, .clip-users, .clip-user-plus, .clip-user-minus, .clip-user-cancel, .clip-user-block, .clip-user-2, .clip-user-3, .clip-users-2, .clip-user-4, .clip-user-5, .clip-hanger, .clip-quotes-left, .clip-quotes-right, .clip-busy, .clip-spinner, .clip-spinner-2, .clip-spinner-3, .clip-spinner-4, .clip-spinner-5, .clip-spinner-6, .clip-microscope, .clip-search, .clip-zoom-in, .clip-zoom-out, .clip-search-2, .clip-key-2, .clip-key-3, .clip-keyhole, .clip-wrench, .clip-wrench-2, .clip-cog-2, .clip-cogs, .clip-health, .clip-stats, .clip-inject, .clip-bars, .clip-rating, .clip-rating-2, .clip-rating-3, .clip-leaf, .clip-balance, .clip-atom, .clip-atom-2, .clip-lamp, .clip-remove, .clip-puzzle, .clip-puzzle-2, .clip-cube, .clip-cube-2, .clip-pyramid, .clip-puzzle-3, .clip-puzzle-4, .clip-clipboard, .clip-switch, .clip-list-2, .clip-list-3, .clip-list-4, .clip-list-5, .clip-list-6, .clip-grid, .clip-grid-2, .clip-grid-3, .clip-grid-4, .clip-grid-5, .clip-grid-6, .clip-menu, .clip-menu-2, .clip-circle-small, .clip-tree, .clip-menu-3, .clip-menu-4, .clip-cloud, .clip-download, .clip-upload, .clip-download-2, .clip-upload-2, .clip-globe, .clip-upload-3, .clip-download-3, .clip-earth-2, .clip-network, .clip-link, .clip-link-2, .clip-link-3, .clip-link-4, .clip-attachment, .clip-attachment-2, .clip-eye, .clip-eye-2, .clip-windy, .clip-bookmark, .clip-bookmark-2, .clip-brightness-high, .clip-brightness-medium, .clip-star, .clip-star-2, .clip-star-3, .clip-star-4, .clip-star-5, .clip-star-6, .clip-heart, .clip-thumbs-up, .clip-thumbs-up-2, .clip-cursor, .clip-stack-empty, .clip-question, .clip-notification, .clip-notification-2, .clip-question-2, .clip-plus-circle, .clip-plus-circle-2, .clip-minus-circle, .clip-minus-circle-2, .clip-info, .clip-info-2, .clip-cancel-circle, .clip-cancel-circle-2, .clip-checkmark-circle, .clip-checkmark-circle-2, .clip-close, .clip-close-2, .clip-close-3, .clip-checkmark, .clip-checkmark-2, .clip-close-4, .clip-wave, .clip-wave-2, .clip-arrow-up-left, .clip-arrow-up, .clip-arrow-up-right, .clip-arrow-right, .clip-arrow-down-right, .clip-arrow-down, .clip-arrow-down-left, .clip-arrow-left, .clip-arrow-up-left-2, .clip-arrow-up-2, .clip-arrow-up-right-2, .clip-arrow-right-2, .clip-arrow-down-right-2, .clip-arrow-down-2, .clip-arrow-down-left-2, .clip-arrow-left-2, .clip-arrow, .clip-arrow-2, .clip-arrow-3, .clip-arrow-4, .clip-arrow-up-3, .clip-arrow-right-3, .clip-arrow-down-3, .clip-arrow-left-3, .clip-checkbox-unchecked, .clip-checkbox, .clip-checkbox-checked, .clip-checkbox-unchecked-2, .clip-square, .clip-checkbox-partial, .clip-checkbox-partial-2, .clip-checkbox-checked-2, .clip-checkbox-unchecked-3, .clip-radio-checked, .clip-radio-unchecked, .clip-circle, .clip-circle-2, .clip-new-tab, .clip-popout, .clip-embed, .clip-code, .clip-seven-segment-0, .clip-seven-segment-1, .clip-seven-segment-2, .clip-seven-segment-3, .clip-seven-segment-4, .clip-seven-segment-5, .clip-seven-segment-6, .clip-seven-segment-7, .clip-seven-segment-8, .clip-seven-segment-9, .clip-share, .clip-google, .clip-google-plus, .clip-facebook, .clip-twitter, .clip-feed, .clip-youtube, .clip-youtube-2, .clip-vimeo, .clip-flickr, .clip-picassa, .clip-dribbble, .clip-forrst, .clip-deviantart, .clip-steam, .clip-github, .clip-github-2, .clip-wordpress, .clip-blogger, .clip-tumblr, .clip-yahoo, .clip-tux, .clip-apple, .clip-finder, .clip-android, .clip-windows, .clip-windows8, .clip-soundcloud, .clip-skype, .clip-reddit, .clip-linkedin, .clip-lastfm, .clip-stumbleupon, .clip-stackoverflow, .clip-pinterest, .clip-xing, .clip-foursquare, .clip-paypal, .clip-paypal-2, .clip-libreoffice, .clip-file-pdf, .clip-file-openoffice, .clip-file-word, .clip-file-excel, .clip-file-zip, .clip-file-powerpoint, .clip-file-xml, .clip-file-css, .clip-html5, .clip-css3, .clip-chrome, .clip-firefox, .clip-IE, .clip-opera, .clip-safari, .clip-IcoMoon, .clip-fullscreen-exit-alt, .clip-fullscreen, .clip-fullscreen-alt, .clip-fullscreen-exit, .clip-transfer, .clip-left-quote, .clip-right-quote, .clip-heart-2, .clip-study, .clip-wand, .clip-zoom-in-2, .clip-zoom-out-2, .clip-search-3, .clip-user-6, .clip-users-3, .clip-archive, .clip-keyboard-2, .clip-paperclip, .clip-home-3, .clip-chevron-up, .clip-chevron-right, .clip-chevron-left, .clip-chevron-down, .clip-error, .clip-add, .clip-minus, .clip-alert, .clip-pictures-2, .clip-atom-3, .clip-eyedropper-2, .clip-warning, .clip-expand, .clip-clock-2, .clip-target, .clip-loop, .clip-refresh, .clip-spin-alt, .clip-exit, .clip-enter, .clip-locked, .clip-unlocked, .clip-arrow-5, .clip-music-3, .clip-droplet-3, .clip-credit, .clip-phone-3, .clip-phone-4, .clip-map-2, .clip-clock-3, .clip-calendar-2, .clip-calendar-3, .clip-pie, .clip-airplane, .clip-tree-2, .clip-sun, .clip-bubble-paperclip { font-family: 'clip-font'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; } .clip-settings:before { content: "\e000"; } .clip-camera:before { content: "\e001"; } .clip-tag:before { content: "\e002"; } .clip-bulb:before { content: "\e003"; } .clip-paperplane:before { content: "\e004"; } .clip-bubble:before { content: "\e005"; } .clip-banknote:before { content: "\e006"; } .clip-music:before { content: "\e007"; } .clip-data:before { content: "\e008"; } .clip-t-shirt:before { content: "\e009"; } .clip-clip:before { content: "\e00a"; } .clip-calendar:before { content: "\e00b"; } .clip-vynil:before { content: "\e00c"; } .clip-truck:before { content: "\e00d"; } .clip-note:before { content: "\e00e"; } .clip-world:before { content: "\e00f"; } .clip-key:before { content: "\e010"; } .clip-pencil:before { content: "\e011"; } .clip-pencil-2:before { content: "\e012"; } .clip-images:before { content: "\e013"; } .clip-images-2:before { content: "\e014"; } .clip-list:before { content: "\e015"; } .clip-earth:before { content: "\e016"; } .clip-pictures:before { content: "\e017"; } .clip-cog:before { content: "\e018"; } .clip-home:before { content: "\e019"; } .clip-home-2:before { content: "\e01a"; } .clip-pencil-3:before { content: "\e01b"; } .clip-images-3:before { content: "\e01c"; } .clip-eyedropper:before { content: "\e01d"; } .clip-droplet:before { content: "\e01e"; } .clip-droplet-2:before { content: "\e01f"; } .clip-image:before { content: "\e020"; } .clip-music-2:before { content: "\e021"; } .clip-camera-2:before { content: "\e022"; } .clip-camera-3:before { content: "\e023"; } .clip-headphones:before { content: "\e024"; } .clip-headphones-2:before { content: "\e025"; } .clip-gamepad:before { content: "\e026"; } .clip-podcast:before { content: "\e027"; } .clip-connection:before { content: "\e028"; } .clip-connection-2:before { content: "\e029"; } .clip-new:before { content: "\e02a"; } .clip-book:before { content: "\e02b"; } .clip-file:before { content: "\e02c"; } .clip-file-2:before { content: "\e02d"; } .clip-file-plus:before { content: "\e02e"; } .clip-file-minus:before { content: "\e02f"; } .clip-file-check:before { content: "\e030"; } .clip-file-remove:before { content: "\e031"; } .clip-file-3:before { content: "\e032"; } .clip-copy:before { content: "\e033"; } .clip-copy-2:before { content: "\e034"; } .clip-copy-3:before { content: "\e035"; } .clip-copy-4:before { content: "\e036"; } .clip-paste:before { content: "\e037"; } .clip-stack:before { content: "\e038"; } .clip-stack-2:before { content: "\e039"; } .clip-folder:before { content: "\e03a"; } .clip-folder-upload:before { content: "\e03b"; } .clip-folder-download:before { content: "\e03c"; } .clip-folder-remove:before { content: "\e03d"; } .clip-folder-plus:before { content: "\e03e"; } .clip-folder-2:before { content: "\e03f"; } .clip-folder-open:before { content: "\e040"; } .clip-cc:before { content: "\e041"; } .clip-tag-2:before { content: "\e042"; } .clip-barcode:before { content: "\e043"; } .clip-cart:before { content: "\e044"; } .clip-phone-hang-up:before { content: "\e045"; } .clip-phone:before { content: "\e046"; } .clip-phone-2:before { content: "\e047"; } .clip-location:before { content: "\e048"; } .clip-compass:before { content: "\e049"; } .clip-map:before { content: "\e04a"; } .clip-alarm:before { content: "\e04b"; } .clip-clock:before { content: "\e04c"; } .clip-history:before { content: "\e04d"; } .clip-stopwatch:before { content: "\e04e"; } .clip-keyboard:before { content: "\e04f"; } .clip-screen:before { content: "\e050"; } .clip-laptop:before { content: "\e051"; } .clip-mobile:before { content: "\e052"; } .clip-mobile-2:before { content: "\e053"; } .clip-tablet:before { content: "\e054"; } .clip-mobile-3:before { content: "\e055"; } .clip-rotate:before { content: "\e056"; } .clip-rotate-2:before { content: "\e057"; } .clip-redo:before { content: "\e058"; } .clip-undo:before { content: "\e059"; } .clip-database:before { content: "\e05a"; } .clip-bubble-2:before { content: "\e05b"; } .clip-bubbles:before { content: "\e05c"; } .clip-bubble-3:before { content: "\e05d"; } .clip-bubble-4:before { content: "\e05e"; } .clip-bubble-dots:before { content: "\e05f"; } .clip-bubble-dots-2:before { content: "\e060"; } .clip-bubbles-2:before { content: "\e061"; } .clip-bubbles-3:before { content: "\e062"; } .clip-user:before { content: "\e063"; } .clip-users:before { content: "\e064"; } .clip-user-plus:before { content: "\e065"; } .clip-user-minus:before { content: "\e066"; } .clip-user-cancel:before { content: "\e067"; } .clip-user-block:before { content: "\e068"; } .clip-user-2:before { content: "\e069"; } .clip-user-3:before { content: "\e06a"; } .clip-users-2:before { content: "\e06b"; } .clip-user-4:before { content: "\e06c"; } .clip-user-5:before { content: "\e06d"; } .clip-hanger:before { content: "\e06e"; } .clip-quotes-left:before { content: "\e06f"; } .clip-quotes-right:before { content: "\e070"; } .clip-busy:before { content: "\e071"; } .clip-spinner:before { content: "\e072"; } .clip-spinner-2:before { content: "\e073"; } .clip-spinner-3:before { content: "\e074"; } .clip-spinner-4:before { content: "\e075"; } .clip-spinner-5:before { content: "\e076"; } .clip-spinner-6:before { content: "\e077"; } .clip-microscope:before { content: "\e078"; } .clip-search:before { content: "\e079"; } .clip-zoom-in:before { content: "\e07a"; } .clip-zoom-out:before { content: "\e07b"; } .clip-search-2:before { content: "\e07c"; } .clip-key-2:before { content: "\e07d"; } .clip-key-3:before { content: "\e07e"; } .clip-keyhole:before { content: "\e07f"; } .clip-wrench:before { content: "\e080"; } .clip-wrench-2:before { content: "\e081"; } .clip-cog-2:before { content: "\e082"; } .clip-cogs:before { content: "\e083"; } .clip-health:before { content: "\e084"; } .clip-stats:before { content: "\e085"; } .clip-inject:before { content: "\e086"; } .clip-bars:before { content: "\e087"; } .clip-rating:before { content: "\e088"; } .clip-rating-2:before { content: "\e089"; } .clip-rating-3:before { content: "\e08a"; } .clip-leaf:before { content: "\e08b"; } .clip-balance:before { content: "\e08c"; } .clip-atom:before { content: "\e08d"; } .clip-atom-2:before { content: "\e08e"; } .clip-lamp:before { content: "\e08f"; } .clip-remove:before { content: "\e090"; } .clip-puzzle:before { content: "\e091"; } .clip-puzzle-2:before { content: "\e092"; } .clip-cube:before { content: "\e093"; } .clip-cube-2:before { content: "\e094"; } .clip-pyramid:before { content: "\e095"; } .clip-puzzle-3:before { content: "\e096"; } .clip-puzzle-4:before { content: "\e097"; } .clip-clipboard:before { content: "\e098"; } .clip-switch:before { content: "\e099"; } .clip-list-2:before { content: "\e09a"; } .clip-list-3:before { content: "\e09b"; } .clip-list-4:before { content: "\e09c"; } .clip-list-5:before { content: "\e09d"; } .clip-list-6:before { content: "\e09e"; } .clip-grid:before { content: "\e09f"; } .clip-grid-2:before { content: "\e0a0"; } .clip-grid-3:before { content: "\e0a1"; } .clip-grid-4:before { content: "\e0a2"; } .clip-grid-5:before { content: "\e0a3"; } .clip-grid-6:before { content: "\e0a4"; } .clip-menu:before { content: "\e0a5"; } .clip-menu-2:before { content: "\e0a6"; } .clip-circle-small:before { content: "\e0a7"; } .clip-tree:before { content: "\e0a8"; } .clip-menu-3:before { content: "\e0a9"; } .clip-menu-4:before { content: "\e0aa"; } .clip-cloud:before { content: "\e0ab"; } .clip-download:before { content: "\e0ac"; } .clip-upload:before { content: "\e0ad"; } .clip-download-2:before { content: "\e0ae"; } .clip-upload-2:before { content: "\e0af"; } .clip-globe:before { content: "\e0b0"; } .clip-upload-3:before { content: "\e0b1"; } .clip-download-3:before { content: "\e0b2"; } .clip-earth-2:before { content: "\e0b3"; } .clip-network:before { content: "\e0b4"; } .clip-link:before { content: "\e0b5"; } .clip-link-2:before { content: "\e0b6"; } .clip-link-3:before { content: "\e0b7"; } .clip-link-4:before { content: "\e0b8"; } .clip-attachment:before { content: "\e0b9"; } .clip-attachment-2:before { content: "\e0ba"; } .clip-eye:before { content: "\e0bb"; } .clip-eye-2:before { content: "\e0bc"; } .clip-windy:before { content: "\e0bd"; } .clip-bookmark:before { content: "\e0be"; } .clip-bookmark-2:before { content: "\e0bf"; } .clip-brightness-high:before { content: "\e0c0"; } .clip-brightness-medium:before { content: "\e0c1"; } .clip-star:before { content: "\e0c2"; } .clip-star-2:before { content: "\e0c3"; } .clip-star-3:before { content: "\e0c4"; } .clip-star-4:before { content: "\e0c5"; } .clip-star-5:before { content: "\e0c6"; } .clip-star-6:before { content: "\e0c7"; } .clip-heart:before { content: "\e0c8"; } .clip-thumbs-up:before { content: "\e0c9"; } .clip-thumbs-up-2:before { content: "\e0ca"; } .clip-cursor:before { content: "\e0cb"; } .clip-stack-empty:before { content: "\e0cc"; } .clip-question:before { content: "\e0cd"; } .clip-notification:before { content: "\e0ce"; } .clip-notification-2:before { content: "\e0cf"; } .clip-question-2:before { content: "\e0d0"; } .clip-plus-circle:before { content: "\e0d1"; } .clip-plus-circle-2:before { content: "\e0d2"; } .clip-minus-circle:before { content: "\e0d3"; } .clip-minus-circle-2:before { content: "\e0d4"; } .clip-info:before { content: "\e0d5"; } .clip-info-2:before { content: "\e0d6"; } .clip-cancel-circle:before { content: "\e0d7"; } .clip-cancel-circle-2:before { content: "\e0d8"; } .clip-checkmark-circle:before { content: "\e0d9"; } .clip-checkmark-circle-2:before { content: "\e0da"; } .clip-close:before { content: "\e0db"; } .clip-close-2:before { content: "\e0dc"; } .clip-close-3:before { content: "\e0dd"; } .clip-checkmark:before { content: "\e0de"; } .clip-checkmark-2:before { content: "\e0df"; } .clip-close-4:before { content: "\e0e0"; } .clip-wave:before { content: "\e0e1"; } .clip-wave-2:before { content: "\e0e2"; } .clip-arrow-up-left:before { content: "\e0e3"; } .clip-arrow-up:before { content: "\e0e4"; } .clip-arrow-up-right:before { content: "\e0e5"; } .clip-arrow-right:before { content: "\e0e6"; } .clip-arrow-down-right:before { content: "\e0e7"; } .clip-arrow-down:before { content: "\e0e8"; } .clip-arrow-down-left:before { content: "\e0e9"; } .clip-arrow-left:before { content: "\e0ea"; } .clip-arrow-up-left-2:before { content: "\e0eb"; } .clip-arrow-up-2:before { content: "\e0ec"; } .clip-arrow-up-right-2:before { content: "\e0ed"; } .clip-arrow-right-2:before { content: "\e0ee"; } .clip-arrow-down-right-2:before { content: "\e0ef"; } .clip-arrow-down-2:before { content: "\e0f0"; } .clip-arrow-down-left-2:before { content: "\e0f1"; } .clip-arrow-left-2:before { content: "\e0f2"; } .clip-arrow:before { content: "\e0f3"; } .clip-arrow-2:before { content: "\e0f4"; } .clip-arrow-3:before { content: "\e0f5"; } .clip-arrow-4:before { content: "\e0f6"; } .clip-arrow-up-3:before { content: "\e0f7"; } .clip-arrow-right-3:before { content: "\e0f8"; } .clip-arrow-down-3:before { content: "\e0f9"; } .clip-arrow-left-3:before { content: "\e0fa"; } .clip-checkbox-unchecked:before { content: "\e0fb"; } .clip-checkbox:before { content: "\e0fc"; } .clip-checkbox-checked:before { content: "\e0fd"; } .clip-checkbox-unchecked-2:before { content: "\e0fe"; } .clip-square:before { content: "\e0ff"; } .clip-checkbox-partial:before { content: "\e100"; } .clip-checkbox-partial-2:before { content: "\e101"; } .clip-checkbox-checked-2:before { content: "\e102"; } .clip-checkbox-unchecked-3:before { content: "\e103"; } .clip-radio-checked:before { content: "\e104"; } .clip-radio-unchecked:before { content: "\e105"; } .clip-circle:before { content: "\e106"; } .clip-circle-2:before { content: "\e107"; } .clip-new-tab:before { content: "\e108"; } .clip-popout:before { content: "\e109"; } .clip-embed:before { content: "\e10a"; } .clip-code:before { content: "\e10b"; } .clip-seven-segment-0:before { content: "\e10c"; } .clip-seven-segment-1:before { content: "\e10d"; } .clip-seven-segment-2:before { content: "\e10e"; } .clip-seven-segment-3:before { content: "\e10f"; } .clip-seven-segment-4:before { content: "\e110"; } .clip-seven-segment-5:before { content: "\e111"; } .clip-seven-segment-6:before { content: "\e112"; } .clip-seven-segment-7:before { content: "\e113"; } .clip-seven-segment-8:before { content: "\e114"; } .clip-seven-segment-9:before { content: "\e115"; } .clip-share:before { content: "\e116"; } .clip-google:before { content: "\e117"; } .clip-google-plus:before { content: "\e118"; } .clip-facebook:before { content: "\e119"; } .clip-twitter:before { content: "\e11a"; } .clip-feed:before { content: "\e11b"; } .clip-youtube:before { content: "\e11c"; } .clip-youtube-2:before { content: "\e11d"; } .clip-vimeo:before { content: "\e11e"; } .clip-flickr:before { content: "\e11f"; } .clip-picassa:before { content: "\e120"; } .clip-dribbble:before { content: "\e121"; } .clip-forrst:before { content: "\e122"; } .clip-deviantart:before { content: "\e123"; } .clip-steam:before { content: "\e124"; } .clip-github:before { content: "\e125"; } .clip-github-2:before { content: "\e126"; } .clip-wordpress:before { content: "\e127"; } .clip-blogger:before { content: "\e128"; } .clip-tumblr:before { content: "\e129"; } .clip-yahoo:before { content: "\e12a"; } .clip-tux:before { content: "\e12b"; } .clip-apple:before { content: "\e12c"; } .clip-finder:before { content: "\e12d"; } .clip-android:before { content: "\e12e"; } .clip-windows:before { content: "\e12f"; } .clip-windows8:before { content: "\e130"; } .clip-soundcloud:before { content: "\e131"; } .clip-skype:before { content: "\e132"; } .clip-reddit:before { content: "\e133"; } .clip-linkedin:before { content: "\e134"; } .clip-lastfm:before { content: "\e135"; } .clip-stumbleupon:before { content: "\e136"; } .clip-stackoverflow:before { content: "\e137"; } .clip-pinterest:before { content: "\e138"; } .clip-xing:before { content: "\e139"; } .clip-foursquare:before { content: "\e13a"; } .clip-paypal:before { content: "\e13b"; } .clip-paypal-2:before { content: "\e13c"; } .clip-libreoffice:before { content: "\e13d"; } .clip-file-pdf:before { content: "\e13e"; } .clip-file-openoffice:before { content: "\e13f"; } .clip-file-word:before { content: "\e140"; } .clip-file-excel:before { content: "\e141"; } .clip-file-zip:before { content: "\e142"; } .clip-file-powerpoint:before { content: "\e143"; } .clip-file-xml:before { content: "\e144"; } .clip-file-css:before { content: "\e145"; } .clip-html5:before { content: "\e146"; } .clip-css3:before { content: "\e147"; } .clip-chrome:before { content: "\e148"; } .clip-firefox:before { content: "\e149"; } .clip-IE:before { content: "\e14a"; } .clip-opera:before { content: "\e14b"; } .clip-safari:before { content: "\e14c"; } .clip-IcoMoon:before { content: "\e14d"; } .clip-fullscreen-exit-alt:before { content: "\e14e"; } .clip-fullscreen:before { content: "\e14f"; } .clip-fullscreen-alt:before { content: "\e150"; } .clip-fullscreen-exit:before { content: "\e151"; } .clip-transfer:before { content: "\e152"; } .clip-left-quote:before { content: "\e153"; } .clip-right-quote:before { content: "\e154"; } .clip-heart-2:before { content: "\e155"; } .clip-study:before { content: "\e156"; } .clip-wand:before { content: "\e157"; } .clip-zoom-in-2:before { content: "\e158"; } .clip-zoom-out-2:before { content: "\e159"; } .clip-search-3:before { content: "\e15a"; } .clip-user-6:before { content: "\e15b"; } .clip-users-3:before { content: "\e15c"; } .clip-archive:before { content: "\e15d"; } .clip-keyboard-2:before { content: "\e15e"; } .clip-paperclip:before { content: "\e15f"; } .clip-home-3:before { content: "\e160"; } .clip-chevron-up:before { content: "\e161"; } .clip-chevron-right:before { content: "\e162"; } .clip-chevron-left:before { content: "\e163"; } .clip-chevron-down:before { content: "\e164"; } .clip-error:before { content: "\e165"; } .clip-add:before { content: "\e166"; } .clip-minus:before { content: "\e167"; } .clip-alert:before { content: "\e168"; } .clip-pictures-2:before { content: "\e169"; } .clip-atom-3:before { content: "\e16a"; } .clip-eyedropper-2:before { content: "\e16b"; } .clip-warning:before { content: "\e16d"; } .clip-expand:before { content: "\e16e"; } .clip-clock-2:before { content: "\e16f"; } .clip-target:before { content: "\e170"; } .clip-loop:before { content: "\e171"; } .clip-refresh:before { content: "\e173"; } .clip-spin-alt:before { content: "\e172"; } .clip-exit:before { content: "\e174"; } .clip-enter:before { content: "\e175"; } .clip-locked:before { content: "\e176"; } .clip-unlocked:before { content: "\e177"; } .clip-arrow-5:before { content: "\e16c"; } .clip-music-3:before { content: "\e178"; } .clip-droplet-3:before { content: "\e179"; } .clip-credit:before { content: "\e17a"; } .clip-phone-3:before { content: "\e17b"; } .clip-phone-4:before { content: "\e17c"; } .clip-map-2:before { content: "\e17d"; } .clip-clock-3:before { content: "\e17e"; } .clip-calendar-2:before { content: "\e17f"; } .clip-calendar-3:before { content: "\e180"; } .clip-pie:before { content: "\e181"; } .clip-airplane:before { content: "\e182"; } .clip-tree-2:before { content: "\e183"; } .clip-sun:before { content: "\e184"; } .clip-bubble-paperclip:before { content: "\e185"; }
| ver. 1.4 |
Github
|
.
| PHP 8.1.28 | Генерация страницы: 0.01 |
proxy
|
phpinfo
|
Настройка