* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html { overflow: -moz-scrollbars-vertical; overflow-y: scroll; overflow-x: auto; } body { margin: 0px; padding: 0px; background: #fff; font-family: 'Jost', sans-serif, Arial; font-weight: 400; color: #263B35; } img { border: none; } h1, h2, h3, h4, h5, h6 { font-family: 'El Messiri', sans-serif, Arial; font-weight: 700; } @-webkit-keyframes headerSlide { 0% { opacity: 0.5; -webkit-transform: translateY(-100%); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes headerSlide { 0% { opacity: 0.5; -moz-transform: translateY(-100%); } 100% { opacity: 1; -moz-transform: translateY(0); } } @keyframes headerSlide { 0% { opacity: 0.5; transform: translateY(-100%); } 100% { opacity: 1; transform: translateY(0); } } header { width: 100%; position: absolute; left: 0px; top: 0px; z-index: 99; -moz-transition: all 0.2s ease-in; -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in; } header .container { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; height: 120px; padding: 0px 50px; } header .container .left { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; } header .container .right { margin-left: auto; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } header ul { list-style: none; margin: 0px; padding: 0px; } @media (max-width:1367px) { header .container { padding: 0px 30px; } } @media (max-width:767px) { header .container { height: 70px; padding: 0px 15px; } } header.fixed { position: fixed; -webkit-animation: headerSlide 0.5s; -moz-animation: headerSlide 0.5s; animation: headerSlide 0.5s; } header.fixed .container { background: #164B3F; -webkit-border-bottom-right-radius: 50px; -moz-border-radius-bottomright: 50px; border-bottom-right-radius: 50px; -webkit-border-bottom-left-radius: 50px; -moz-border-radius-bottomleft: 50px; border-bottom-left-radius: 50px; } header.menu-active { background: #164B3F; } @media (max-width:1199px) { header.fixed { background: #164B3F; } header.fixed .container { -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; } } header .logo { margin-right: 30px; } header .logo a { display: block; width: 175px; height: 53px; background: url(../images/logo/default-white.svg) no-repeat; background-size: 175px 53px; text-indent: -9999px; -moz-transition: none; -webkit-transition: none; transition: none; } @media (max-width:991px) { header .logo { margin-right: 20px; } } @media (max-width:767px) { header .logo a { width: 120px; height: 37px; background: url(../images/logo/mobile-white.svg) no-repeat; background-size: 120px 37px; } } @media (max-width:481px) { header .logo { margin-right: 15px; } } @media (max-width:381px) { header .logo { margin-right: 10px; } } header .menu { padding-right: 15px; } header .menu ul { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } header .menu ul li { position: relative; } header .menu ul li a { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: center; align-items: center; height: 50px; padding: 0px 15px; border: solid 1px transparent; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; font-size: 14px; font-weight: 500; color: #fff; text-decoration: none; -moz-transition: all 0.1s ease-in; -webkit-transition: all 0.1s ease-in; transition: all 0.1s ease-in; } header .menu ul li > a { white-space: nowrap; } header .menu ul li a.more { color: #28745D; } header .menu ul li:hover a { border: solid 1px #28745D; color: #E8F1EB; } header .menu ul li .submenu { padding-top: 8px; position: absolute; left: 0px; top: 55px; z-index: 9; visibility: hidden; opacity: 0; filter: alpha(opacity=0); -moz-transition: all 0.2s ease-in; -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in; } header .menu ul li .submenu::before { display: block; content: ""; width: 0px; height: 0px; border-left: solid 10px transparent; border-right: solid 10px transparent; border-top: solid 10px #164B3F; position: absolute; left: 30px; top: 8px; } header .menu ul li .submenu.donation-submenu { left: 50%; -webkit-transform: translate(-50%, 0); -moz-transform: translate(-50%, 0); transform: translate(-50%, 0); } header .menu ul li .submenu.donation-submenu::before { left: 50%; -webkit-transform: translate(-50%, 0); -moz-transform: translate(-50%, 0); transform: translate(-50%, 0); } header .menu ul li .submenu.more-submenu { left: auto; right: 0px; } header .menu ul li .submenu.more-submenu::before { left: auto; right: 30px; } header .menu ul li:hover .submenu { top: 50px; visibility: visible; opacity: 1; filter: alpha(opacity=100); } header .menu ul li .submenu ul { display: block; width: 300px; padding: 20px 30px; background: #fff; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; -webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.15); box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.15); } header .menu ul li .submenu.more-submenu ul{ padding: 20px 0px; } header .menu ul li .submenu.more-submenu ul li{ padding: 0px 30px; } header .menu ul li .submenu.more-submenu ul ul{ -moz-transition: all 0.2s ease-in; -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in; position: absolute; left: 100%; top: 0; opacity: 0; visibility: hidden; pointer-events: none;} header .menu ul li .submenu.more-submenu ul ul li a{ text-align: left;} header .menu ul li .submenu.more-submenu ul li:hover ul { opacity: 1; visibility: visible; pointer-events: all; } header .menu ul li .submenu.donation-submenu ul { width: 800px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; } header .menu ul li .submenu ul li { border-top: solid 1px #efefef; } header .menu ul li .submenu ul li:first-child { border-top: none; } header .menu ul li .submenu ul li a { display: block; height: auto; padding: 15px 0px; border: none; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; font-size: 16px; color: #263B35; position: relative; } header .menu ul li .submenu ul li a:hover { color: #28745D; } header .menu ul li .submenu ul li a::before { display: block; content: ""; width: 10px; height: 10px; background: url(../images/icon/menu-right.svg) no-repeat center; background-size: 10px 10px; position: absolute; left: -25px; top: 50%; -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); transform: translate(0, -50%); visibility: hidden; opacity: 0; filter: alpha(opacity=0); -moz-transition: all 0.2s ease-in; -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in; } header .menu ul li .submenu ul li a:hover::before { left: -15px; visibility: visible; opacity: 1; filter: alpha(opacity=100); } header .menu ul li .submenu.more-submenu ul li a { text-align: right; } header .menu ul li .submenu.more-submenu ul li a::before { background: url(../images/icon/menu-left.svg) no-repeat center; left: auto; right: -25px; } header .menu ul li .submenu.more-submenu ul li a:hover::before { right: -15px; } header .menu ul li .submenu.donation-submenu ul { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-wrap: wrap; } header .menu ul li .submenu.donation-submenu ul li { width: 49%; margin-right: 2%; } header .menu ul li .submenu.donation-submenu ul li:nth-child(2n+0) { margin-right: 0px; } header .menu ul li .submenu.donation-submenu ul li:nth-child(1), header .menu ul li .submenu.donation-submenu ul li:nth-child(2) { border-top: none; } header .menu ul li .submenu.donation-submenu ul li a { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; padding-right: 15px; } header .menu ul li .submenu.donation-submenu ul li a .icon { width: 60px; } header .menu ul li .submenu.donation-submenu ul li a .icon img { display: block; width: 46px; height: 46px; } header .menu ul li .submenu.donation-submenu ul li a .name { flex: 1; } header .menu ul li .submenu.donation-submenu ul li a::before { left: auto; right: -10px; } header .menu ul li .submenu.donation-submenu ul li a:hover::before { right: 0px; } @media (max-width:1367px) { header .menu { padding-right: 10px; } header .menu ul li a { padding: 0px 10px; } } @media (max-width:1199px) { header .menu { display: none; } } header .menu-btn { padding-right: 30px; display: none; } header .menu-btn a { display: block; width: 30px; height: 30px; position: relative; cursor: pointer; } header .menu-btn a span { display: block; width: 30px; height: 2px; background: #fff; position: absolute; left: 0px; -moz-transition: all 0.2s ease-in; -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in; -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; } header .menu-btn a span:nth-child(1) { top: 6px; } header .menu-btn a span:nth-child(2) { top: 14px; } header .menu-btn a span:nth-child(3) { top: 22px; } header .menu-btn a.active span:nth-child(1) { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); top: 11px; } header .menu-btn a.active span:nth-child(2) { left: 0px; opacity: 0; filter: alpha(opacity=0); } header .menu-btn a.active span:nth-child(3) { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); top: 11px; } @media (max-width:1199px) { header .menu-btn { display: block; } } @media (max-width:767px) { header .menu-btn a { width: 24px; height: 24px; } header .menu-btn a span { width: 24px; } header .menu-btn a span:nth-child(1) { top: 3px; } header .menu-btn a span:nth-child(2) { top: 11px; } header .menu-btn a span:nth-child(3) { top: 19px; } } @media (max-width:481px) { header .menu-btn { padding-right: 15px; } } @media (max-width:381px) { header .menu-btn { padding-right: 10px; } } header .language { margin-right: 10px; position: relative; } header .language a { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; text-align: center; cursor: pointer; text-decoration: none; } header .language a span { font-size: 11px; font-weight: 700; color: #164B3F; } header.fixed .language a span { color: #fff; } header .language a span::before { display: block; content: ""; width: 18px; height: 18px; background-image: url(../images/icon/language-blue.svg); background-repeat: no-repeat; background-position: center center; background-size: 18px 18px; margin: 0px auto; margin-bottom: 2px; } header.fixed .language a span::before { background-image: url(../images/icon/language-white.svg); } header .language .dropdown-toggle::after { display: none; } header .language .dropdown-menu { width: 90px; min-width: 0px; padding: 10px 0px 0px 0px; top: 60px !important; left: 50% !important; -webkit-transform: translate(-50%, 0) !important; -moz-transform: translate(-50%, 0) !important; transform: translate(-50%, 0) !important; background: #fff; border: none; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; -webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.15); box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.15); } header .language .dropdown-menu::before { display: block; content: ""; width: 0px; height: 0px; border-left: solid 10px transparent; border-right: solid 10px transparent; border-top: solid 10px #164B3F; position: absolute; top: 0px; left: 50%; -webkit-transform: translate(-50%, 0); -moz-transform: translate(-50%, 0); transform: translate(-50%, 0); } header .language .dropdown-menu a { display: block; width: 24px; height: auto; margin: 0px auto; padding: 15px 0px; border-top: solid 1px #efefef; color: #263B35; font-size: 12px; font-weight: 500; position: relative; } header .language .dropdown-menu a:first-child { border-top: none; } header .language .dropdown-menu a:hover { color: #28745D; } header .language .dropdown-menu a::before { display: block; content: ""; width: 10px; height: 10px; background: url(../images/icon/menu-right.svg) no-repeat center; background-size: 10px 10px; position: absolute; left: -20px; top: 50%; -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); transform: translate(0, -50%); visibility: hidden; opacity: 0; filter: alpha(opacity=0); -moz-transition: all 0.2s ease-in; -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in; } header .language .dropdown-menu a:hover::before { left: -10px; visibility: visible; opacity: 1; filter: alpha(opacity=100); } @media (max-width:1199px) { header .language { display: none; } } header .search { margin-right: 15px; position: relative; } header .search > a { display: block; width: 50px; height: 50px; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; background-color: #E8F1EB; background-image: url(../images/icon/search.svg); background-repeat: no-repeat; background-position: center center; cursor: pointer; -moz-transition: all 0.1s ease-in; -webkit-transition: all 0.1s ease-in; transition: all 0.1s ease-in; } header .search > a:hover { opacity: 0.9; filter: alpha(opacity=90); } header .search .form { height: 50px; position: absolute; right: 0px; top: 0px; display: none; } header .search .form .form-control, header .search .form .button { position: relative; z-index: 881; } header .search .form .form-control { width: 100%; height: 50px; padding: 0px 60px 0px 30px; background: #E8F1EB; outline: none; border: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; font-size: 16px; color: #263B35; } header .search .form .button { display: block; width: 50px; height: 50px; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; background-color: #E8F1EB; background-image: url(../images/icon/search.svg); background-repeat: no-repeat; background-position: center center; cursor: pointer; text-indent: -9999px; border: none; outline: none; position: absolute; right: 0px; top: 0px; } @media (max-width:1199px) { header .search { display: none; } } .search-content { width: 100%; } .search-content .search-result-item { padding-right: 15px; margin-bottom: 30px; } .search-content .search-result-item:last-child { margin-bottom: 0px; } .search-content .search-result-item .title { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; margin-bottom: 15px; } .search-content .search-result-item .title h4 { font-family: 'Jost', sans-serif, Arial; font-size: 16px; font-weight: 500; margin-right: 15px; } .search-content .search-result-item .title span { font-size: 12px; margin-left: auto; } .search-content .search-result-item .list ul { list-style: none; margin: 0px; padding: 0px; } .search-content .search-result-item .list ul li { margin-bottom: 10px; } .search-content .search-result-item .list ul li:last-child { margin-bottom: 0px; } .search-content .search-result-item .list ul li a { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; background-color: #fff; background-image: url(../images/icon/right-blue.svg); background-repeat: no-repeat; background-position: right 15px center; background-size: 14px 12px; padding: 15px 45px 15px 30px; color: #263B35 !important; text-decoration: none; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; -moz-transition: all 0.1s ease-in; -webkit-transition: all 0.1s ease-in; transition: all 0.1s ease-in; } .search-content .search-result-item .list ul li a:hover { background-color: #E8F1EB; } .search-content .search-result-item .list ul li a .name { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; font-size: 14px; font-weight: 500; margin-right: 15px; } .search-content .search-result-item .list ul li a .name img { display: block; width: 30px; height: auto; margin-right: 5px; } .search-content .search-result-item .list ul li a .category { display: -webkit-inline-box; display: -ms-inline-flexbox; display: -webkit-inline-flex; display: inline-flex; align-items: center; height: 30px; padding: 0px 15px; font-size: 10px; font-weight: 500; color: #164B3F !important; background: #E8F1EB; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; margin-left: auto; } @media (max-width:991px) { .search-content .search-result-item { margin-bottom: 15px; } .search-content .search-result-item .title h4 { font-size: 14px; margin-right: 10px; } .search-content .search-result-item .title span { font-size: 10px; } .search-content .search-result-item .list ul li a { padding: 15px 40px 15px 15px; } .search-content .search-result-item .list ul li a .name { font-size: 13px; margin-right: 10px; } .search-content .search-result-item .list ul li a .name img { width: 24px; } .search-content .search-result-item .list ul li a .category { padding: 0px 10px; font-size: 10px; } } @media (max-width:481px) { .search-content .search-result-item .list ul li a { display: block; padding: 15px; background-image: none; } .search-content .search-result-item .list ul li a .name { font-size: 12px; margin-right: 0px; margin-bottom: 10px; } } header .search .search-overlay { display: block; content: ""; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); position: fixed; left: 0px; top: 0px; z-index: 880; } header .search .search-content { padding: 30px 15px 30px 30px; background: #FAF8F2; position: absolute; left: 0px; right: 0px; top: 60px; z-index: 881; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; } header .search .search-content .inner { max-height: 400px; overflow-y: auto; } header .account { margin-right: 15px; position: relative; } header .account > a { display: block; width: 50px; height: 50px; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; background-color: #28745D; background-image: url(../images/icon/account.svg); background-repeat: no-repeat; background-position: center center; cursor: pointer; -moz-transition: all 0.1s ease-in; -webkit-transition: all 0.1s ease-in; transition: all 0.1s ease-in; } header .account > a:hover { opacity: 0.9; filter: alpha(opacity=90); } header .account .dropdown-toggle::after { display: none; } header .account .dropdown-menu { width: 360px; padding: 30px; margin-top: 10px !important; left: auto !important; right: -15px !important; background: #fff; border: none; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; -webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.15); box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.15); } header .account .dropdown-menu::before { display: block; content: ""; width: 0px; height: 0px; border-left: solid 10px transparent; border-right: solid 10px transparent; border-top: solid 10px #164B3F; position: absolute; top: 0px; right: 30px; } header .account .dropdown-menu .tab-menu { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } header .account .dropdown-menu .tab-menu a { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; width: 50%; height: 50px; background: #fff; background-image: none; font-size: 13px; font-weight: 600; color: #164B3F; text-decoration: none; position: relative; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; } header .account .dropdown-menu .tab-menu a.active { background: #E8F1EB; } header .account .dropdown-menu .tab-menu a.active::before { display: block; content: ""; width: 0px; height: 0px; border-left: solid 10px transparent; border-right: solid 10px transparent; border-top: solid 10px #E8F1EB; position: absolute; top: 48px; left: 50%; -webkit-transform: translate(-50%, 0); -moz-transform: translate(-50%, 0); transform: translate(-50%, 0); } header .account .dropdown-menu .tab-content { padding-top: 20px; display: none; } header .account .dropdown-menu .tab-content .account-form .item { margin-bottom: 15px; position: relative; } header .account .dropdown-menu .tab-content .account-form .item .form-control { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; height: 50px; padding: 0px 25px; border: none; background: #FAF8F2; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; font-size: 14px; color: #263B35; } header .account .dropdown-menu .tab-content .account-form .item .button { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; width: 100%; height: 50px; padding: 0px 15px; background: #E8F1EB; border: none; outline: none; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; font-size: 13px; font-weight: 600; color: #164B3F; -moz-transition: all 0.1s ease-in; -webkit-transition: all 0.1s ease-in; transition: all 0.1s ease-in; } header .account .dropdown-menu .tab-content .account-form .item .button::after { display: block; content: ""; width: 14px; height: 12px; background: url(../images/icon/right-blue.svg) no-repeat center; background-size: 14px 12px; margin-left: 10px; } header .account .dropdown-menu .tab-content .account-form .item .button:hover { background: #28745D; color: #fff; } header .account .dropdown-menu .tab-content .account-form .item .button:hover::after { background: url(../images/icon/right-white.svg) no-repeat center; } header .account .dropdown-menu .tab-content .account-form .item .show-hide-password { width: 24px; height: 24px; background: none; color: #263B35; font-size: 13px; position: absolute; right: 15px; top: 50%; -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); transform: translate(0, -50%); cursor: pointer; } header .account .dropdown-menu .tab-content .account-form .item label.checkbox { display: block; min-height: 18px; cursor: pointer; position: relative; line-height: 120%; margin: 0px; } header .account .dropdown-menu .tab-content .account-form .item label.checkbox input[type="checkbox"] { display: none; visibility: hidden; } header .account .dropdown-menu .tab-content .account-form .item label.checkbox span { display: block; } header .account .dropdown-menu .tab-content .account-form .item label.checkbox span.control { display: block; width: 18px; height: 18px; background: #FAF8F2; position: absolute; left: 0px; top: 0px; } header .account .dropdown-menu .tab-content .account-form .item label.checkbox span.control::after { display: block; content: ""; width: 6px; height: 12px; border-bottom: 2px solid #164B3F; border-right: 2px solid #164B3F; position: absolute; left: 6px; top: 1px; opacity: 0; filter: alpha(opacity=0); transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); } header .account .dropdown-menu .tab-content .account-form .item label.checkbox span.name { padding-left: 28px; padding-top: 0px; font-size: 14px; color: #263B35; } header .account .dropdown-menu .tab-content .account-form .item label.checkbox span.name a { color: #263B35; text-decoration: none; } header .account .dropdown-menu .tab-content .account-form .item label.checkbox span.name a:hover { text-decoration: underline; } header .account .dropdown-menu .tab-content .account-form .item label.checkbox input[type="checkbox"]:checked + span.control::after { opacity: 1; filter: alpha(opacity=100); } header .account .dropdown-menu .tab-content .account-form .item label.checkbox input[type="checkbox"]:disabled + span.control { background: #f5f5f5; border: solid 1px #ccc; } header .account .dropdown-menu .tab-content .account-form .item .iti { width: 100%; } header .account .dropdown-menu .tab-content .account-form .item .iti--separate-dial-code .iti__selected-flag { background: none; } header .account .dropdown-menu .tab-content .account-form .item .iti__selected-flag { padding: 0px 15px; } header .account .dropdown-menu .tab-content .account-form .item .iti--separate-dial-code .iti__selected-dial-code { font-size: 14px; color: #263B35; } header .account .dropdown-menu .tab-content .account-form .item .iti__arrow { border-top: 4px solid #263B35; } header .account .dropdown-menu .tab-content .account-form .item .iti__arrow.iti__arrow--up { border-top: none; border-bottom: 4px solid #263B35; } header .account .dropdown-menu .tab-content .account-form .item .iti__country-list { font-size: 13px; color: #263B35; } header .account .dropdown-menu .tab-content .forgot-password { border-top: solid 1px #efefef; padding-top: 20px; margin-top: 20px; } header .account .dropdown-menu .tab-content .forgot-password p { color: #263B35; text-align: center; margin-bottom: 10px; } header .account .dropdown-menu .tab-content .forgot-password a { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; width: 100%; height: 50px; padding: 0px 15px; background: #FAF8F2; border: none; outline: none; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; font-size: 13px; font-weight: 600; color: #164B3F; text-decoration: none; } header .account .dropdown-menu .tab-content .forgot-password a::after { display: block; content: ""; width: 12px; height: 12px; background: url(../images/icon/menu-right.svg) no-repeat center; background-size: 12px 12px; margin-left: 10px; } @media (max-width:991px) { header .account .dropdown-menu { width: 300px; padding: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; } } @media (max-width:767px) { header .account > a { width: 40px; height: 40px; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; background-size: 14px auto; } header .account .dropdown-menu { right: auto !important; left: 50% !important; -webkit-transform: translate(-50%, 32px) !important; -moz-transform: translate(-50%, 32px) !important; transform: translate(-50%, 32px) !important; } header .account .dropdown-menu::before { right: auto; left: 50%; -webkit-transform: translate(-50%, 0); -moz-transform: translate(-50%, 0); transform: translate(-50%, 0); } } @media (max-width:481px) { header .account { margin-right: 10px; } header .account .dropdown-menu { width: 250px; } } @media (max-width:381px) { header .account { margin-right: 5px; } } header .donate { position: relative; } header .donate > a { display: -webkit-inline-box; display: -ms-inline-flexbox; display: -webkit-inline-flex; display: inline-flex; align-items: center; height: 50px; padding: 0px 30px 0px 20px; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; background: #164B3F; font-size: 13px; font-weight: 600; color: #fff !important; text-decoration: none; position: relative; cursor: pointer; line-height: 100%; -moz-transition: all 0.1s ease-in; -webkit-transition: all 0.1s ease-in; transition: all 0.1s ease-in; } header .donate > a:hover { opacity: 0.9; filter: alpha(opacity=90); } header.fixed .donate > a { background: #fff; color: #164B3F !important; } header.menu-active .donate > a { background: #fff; color: #164B3F !important; } header .donate > a .icon { display: block; width: 24px; height: 24px; background: url(../images/icon/donate-white.svg) no-repeat center center; background-size: 24px 24px; margin-right: 5px; } header.fixed .donate > a .icon { background: url(../images/icon/donate-blue.svg) no-repeat center center; background-size: 24px 24px; } header.menu-active .donate > a .icon { background: url(../images/icon/donate-blue.svg) no-repeat center center; background-size: 24px 24px; } header .donate > a .number { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; background: #fff; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; margin-right: 5px; font-size: 13px; font-weight: 600; color: #164B3F; } header.fixed .donate > a .number { background: #164B3F; color: #fff; } header.menu-active .donate > a .number { background: #164B3F; color: #fff; } header .donate .dropdown-toggle::after { display: none; } header .donate .dropdown-menu { width: 320px; padding: 30px; margin-top: 10px !important; left: auto !important; right: 0px !important; background: #fff; border: none; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; -webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.15); box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.15); } header .donate .dropdown-menu::before { display: block; content: ""; width: 0px; height: 0px; border-left: solid 10px transparent; border-right: solid 10px transparent; border-top: solid 10px #164B3F; position: absolute; top: 0px; right: 30px; } header .donate .dropdown-menu .donate-menu { font-size: 14px; font-weight: 500; margin-bottom: 25px; } header .donate .dropdown-menu .donate-menu ul li { border-bottom: solid 1px #efefef; } header .donate .dropdown-menu .donate-menu ul li a { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-wrap: wrap; padding: 15px 24px 15px 0px; position: relative; text-decoration: none; color: #263B35; } header .donate .dropdown-menu .donate-menu ul li a span { margin-left: auto; } header .donate .dropdown-menu .donate-menu ul li a::after { display: block; content: ""; width: 14px; height: 12px; background: url(../images/icon/right-dark.svg) no-repeat center; background-size: 12px 12px; position: absolute; right: 0px; top: 50%; -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); transform: translate(0, -50%); } header .donate .dropdown-menu .donate-menu ul li a:hover { color: #28745D; } header .donate .dropdown-menu .donate-menu ul li a:hover::after { background: url(../images/icon/right-turquoise.svg) no-repeat center; } header .donate .dropdown-menu .support { text-align: right; } header .donate .dropdown-menu .support a { display: inline-block; min-height: 54px; padding-top: 5px; padding-right: 70px; background: url(../images/icon/header-support.png) no-repeat right top; font-size: 24px; text-decoration: none; color: #164B3F; } header .donate .dropdown-menu .support a span { display: block; font-size: 14px; color: #28745D; } header .donate .dropdown-menu .support a:hover { color: #28745D; } @media (max-width:991px) { header .donate .dropdown-menu { width: 300px; padding: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; } } @media (max-width:767px) { header .donate > a { height: 40px; padding: 0px 20px 0px 15px; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; } header .donate > a .icon {/* width: 18px; *//* height: 18px; */background-size: 18px 18px; } header.fixed .donate > a .icon { background-size: 18px 18px; } header .donate > a .number { width: 18px; height: 18px; -webkit-border-radius: 9px; -moz-border-radius: 9px; border-radius: 9px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; font-size: 11px; } } @media (max-width:481px) { header .donate > a { font-size: 12px; } header .donate .dropdown-menu { width: 250px; } header .donate .dropdown-menu .support a { font-size: 21px; padding-right: 60px; } header .donate .dropdown-menu .support a span { font-size: 12px; } } @media (max-width:381px) { header .donate > a { padding: 0px 15px 0px 10px; font-size: 11px; } } .mobile-navigation { width: 100%; height: 100%; overflow: auto; position: fixed; left: 0px; top: 0px; z-index: 96; display: none; } .mobile-navigation.active { display: block; } .mobile-navigation .overlay { width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); position: absolute; top: 0px; left: 0px; z-index: 97; } .mobile-navigation .content { width: 100%; padding-top: 120px; padding-bottom: 30px; background: #164B3F; -webkit-border-bottom-right-radius: 25px; -moz-border-radius-bottomright: 25px; border-bottom-right-radius: 25px; -webkit-border-bottom-left-radius: 25px; -moz-border-radius-bottomleft: 25px; border-bottom-left-radius: 25px; position: relative; z-index: 98; } .mobile-navigation .concept { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; padding: 0px 30px; margin-bottom: 15px; } .mobile-navigation .concept .search { height: 50px; flex: 1; position: relative; } .mobile-navigation .concept .search .form-control, .mobile-navigation .concept .search .button { position: relative; z-index: 881; } .mobile-navigation .concept .search .form-control { width: 100%; height: 50px; padding: 0px 60px 0px 30px; background: #fff; outline: none; border: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; font-size: 13px; color: #164B3F; } .mobile-navigation .concept .search .button { display: block; width: 50px; height: 50px; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; background-color: #fff; background-image: url(../images/icon/search.svg); background-repeat: no-repeat; background-position: center center; cursor: pointer; text-indent: -9999px; border: none; outline: none; position: absolute; right: 0px; top: 0px; } .mobile-navigation .concept .language { position: relative; } .mobile-navigation .concept .language a { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; text-align: center; cursor: pointer; text-decoration: none; } .mobile-navigation .concept .language a span { font-size: 11px; font-weight: 700; color: #fff; } .mobile-navigation .concept .language a span::before { display: block; content: ""; width: 18px; height: 18px; background-image: url(../images/icon/language-white.svg); background-repeat: no-repeat; background-position: center center; background-size: 18px 18px; margin: 0px auto; margin-bottom: 2px; } .mobile-navigation .concept .language .dropdown-toggle::after { display: none; } .mobile-navigation .concept .language .dropdown-menu { width: 90px; min-width: 0px; padding: 10px 0px 0px 0px; top: 60px !important; left: 50% !important; -webkit-transform: translate(-50%, 0) !important; -moz-transform: translate(-50%, 0) !important; transform: translate(-50%, 0) !important; background: #fff; border: none; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; -webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.15); box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.15); } .mobile-navigation .concept .language .dropdown-menu::before { display: block; content: ""; width: 0px; height: 0px; border-left: solid 10px transparent; border-right: solid 10px transparent; border-top: solid 10px #164B3F; position: absolute; top: 0px; left: 50%; -webkit-transform: translate(-50%, 0); -moz-transform: translate(-50%, 0); transform: translate(-50%, 0); } .mobile-navigation .concept .language .dropdown-menu a { display: block; width: 24px; height: auto; margin: 0px auto; padding: 15px 0px; border-top: solid 1px #efefef; color: #263B35; font-size: 12px; font-weight: 500; position: relative; } .mobile-navigation .concept .language .dropdown-menu a:first-child { border-top: none; } .mobile-navigation .concept .language .dropdown-menu a:hover { color: #28745D; } .mobile-navigation .concept .language .dropdown-menu a::before { display: block; content: ""; width: 10px; height: 10px; background: url(../images/icon/menu-right.svg) no-repeat center; background-size: 10px 10px; position: absolute; left: -20px; top: 50%; -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); transform: translate(0, -50%); visibility: hidden; opacity: 0; filter: alpha(opacity=0); -moz-transition: all 0.2s ease-in; -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in; } .mobile-navigation .concept .language .dropdown-menu a:hover::before { left: -10px; visibility: visible; opacity: 1; filter: alpha(opacity=100); } .mobile-navigation .menu { margin-bottom: 30px; } .mobile-navigation .menu a { text-decoration: none; } .mobile-navigation .menu .item { font-size: 14px; font-weight: 600; color: #fff; border-bottom: solid 1px rgba(255, 255, 255, 0.1); } .mobile-navigation .menu .item > a { display: block; padding: 12px 30px; color: #fff; } .mobile-navigation .menu .item .acr-title { padding: 12px 60px 12px 30px; position: relative; cursor: pointer; } .mobile-navigation .menu .item.more .acr-title { color: #28745D; } .mobile-navigation .menu .item .acr-title::after { display: block; content: ""; width: 14px; height: 14px; background: url(../images/icon/right-white.svg) no-repeat center; background-size: 14px 12px; position: absolute; right: 30px; top: 50%; margin-top: -7px; -moz-transition: all 0.2s ease-in; -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in; } .mobile-navigation .menu .item.more .acr-title::after { background: url(../images/icon/right-turquoise.svg) no-repeat center; background-size: 14px 12px; } .mobile-navigation .menu .item .acr-title.active::after { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); transform: rotate(90deg); } .mobile-navigation .menu .item .acr-content { padding: 0px; background: #fff; display: none; } .mobile-navigation .menu .item .acr-content a { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; padding: 10px 30px; color: #263B35; border-top: solid 1px #efefef; } .mobile-navigation .menu .item .acr-content a:first-child { border-top: none; } .mobile-navigation .menu .item .acr-content a:hover { color: #164B3F; } .mobile-navigation .menu .item .acr-content a img { display: block; width: 36px; height: auto; margin-right: 10px; } .mobile-navigation .social { padding: 0px 30px; } .mobile-navigation .social ul { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; list-style: none; margin: 0px; padding: 0px; } .mobile-navigation .social ul li { margin-right: 20px; } .mobile-navigation .social ul li:last-child { margin-right: 0px; } .mobile-navigation .social ul li a { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; background: #205E4D; color: #fff; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; text-decoration: none; } .mobile-navigation .social ul li a:hover { background: #43816B; color: #fff; } @media (max-width:767px) { .mobile-navigation .content { padding-top: 70px; } } .mobile-navigation .concept .search .search-content { padding: 30px 15px 30px 30px; background: #FAF8F2; position: absolute; left: 0px; right: 0px; top: 60px; z-index: 881; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; -webkit-box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.15); box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.15); display: none; } .mobile-navigation .concept .search .search-content .inner { max-height: 240px; overflow-y: auto; } @media (max-width:991px) { .mobile-navigation .concept .search .search-content { -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; } } .intro { padding-top: 120px; position: relative; margin-bottom: 50px; } .intro.concept-intro { margin-bottom: 0px; } .intro .bg { display: block; content: ""; background: #164B3F; position: absolute; top: 0px; bottom: 0px; left: 0px; -webkit-border-top-right-radius: 50px; -moz-border-radius-topright: 50px; border-top-right-radius: 50px; -webkit-border-bottom-right-radius: 50px; -moz-border-radius-bottomright: 50px; border-bottom-right-radius: 50px; } .intro.sub-intro .bg { bottom: 70px; } .intro.concept-intro .bg { -webkit-border-bottom-right-radius: 0px; -moz-border-radius-bottomright: 0px; border-bottom-right-radius: 0px; } .intro .container { position: relative; z-index: 2; } .intro ul { list-style: none; margin: 0px; padding: 0px; } @media (max-width:1367px) { .intro.sub-intro .bg { bottom: 50px; } } @media (max-width:991px) { .intro .bg { -webkit-border-top-right-radius: 25px; -moz-border-radius-topright: 25px; border-top-right-radius: 25px; -webkit-border-bottom-right-radius: 25px; -moz-border-radius-bottomright: 25px; border-bottom-right-radius: 25px; } } @media (max-width:767px) { .intro { padding-top: 70px; } } .intro .main-banner { padding-bottom: 75px; } .intro .main-banner .slider { margin-bottom: 0px; display: none; background: #fff; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; } .intro .main-banner .slider.slick-initialized { display: block; } .intro .main-banner .slider .item { display: -webkit-box !important; display: -ms-flexbox !important; display: -webkit-flex !important; display: flex !important; align-items: center; padding: 50px 50px 100px 50px; position: relative; background: #d6f1f2; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; } .intro .main-banner .slider .item .info { width: 50%; padding-right: 50px; } .intro .main-banner .slider .item .info .title { font-family: 'El Messiri', sans-serif, Arial; font-weight: 700; font-size: 60px; color: #0772ba; line-height: 95%; margin-bottom: 30px; animation: fadeOutUp 1s both; } .intro .main-banner .slider .item .info .title span { color: #3bc1c5; display: block; } .intro .main-banner .slider .item.slick-active .info .title { animation: fadeInDown 0.5s both 0.5s; } .intro .main-banner .slider .item .info .text { font-size: 20px; margin-bottom: 30px; } .intro .main-banner .slider .item .info .action { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-wrap: wrap; align-items: center; animation: fadeOutRight 1s both; } .intro .main-banner .slider .item.slick-active .info .action { animation: fadeInUp 0.5s both 0.5s; } .intro .main-banner .slider .item .info .action a { -moz-transition: all 0.1s ease-in; -webkit-transition: all 0.1s ease-in; transition: all 0.1s ease-in; text-decoration: none; font-size: 13px; font-weight: 600; color: #0772BA; } .intro .main-banner .slider .item .info .action a.donate { display: -webkit-inline-box; display: -ms-inline-flexbox; display: -webkit-inline-flex; display: inline-flex; align-items: center; height: 50px; padding: 0px 30px; background: #0772BA; color: #fff; line-height: 100%; border: none; outline: none; white-space: nowrap; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; margin-right: 15px; } .intro .main-banner .slider .item .info .action a.donate:hover { background: #004676; } .intro .main-banner .slider .item .info .action a.donate::before { display: none; content: ""; width: 20px; height: 20px; background: url(../images/icon/donate-white.svg) no-repeat center center; background-size: 20px 20px; margin-right: 5px; } .intro .main-banner .slider .item .info .action a.detail { display: -webkit-inline-box; display: -ms-inline-flexbox; display: -webkit-inline-flex; display: inline-flex; align-items: center; height: 50px; /* background: url(../images/icon/next-blue.svg) no-repeat right 5px center; */ /* padding-right: 35px; */ } .intro .main-banner .slider .item .info .action a.detail svg { -moz-transition: all 0.1s ease-in; -webkit-transition: all 0.1s ease-in; transition: all 0.1s ease-in; } .intro .main-banner .slider .item .info .action a.detail:hover { /* background: url(../images/icon/next-blue.svg) no-repeat right center; */ } .intro .main-banner .slider .item .info .action a.detail:hover svg { margin-left: 5px; } .intro .main-banner .slider .item .photo { width: 50%; } .intro .main-banner .slider .item .photo img { display: block; width: 100%; height: auto; } .intro .main-banner .slider .slick-prev, .intro .main-banner .slider .slick-next { width: 50px; height: 50px; border: none; text-indent: -9999px; background-color: #3bc1c5; background-repeat: no-repeat; background-position: center center; background-size: 20px 18px; opacity: 1; filter: alpha(opacity=100); -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; z-index: 2; } .intro .main-banner .slider .slick-prev { background-image: url(../images/icon/prev-white.svg); left: -25px; } .intro .main-banner .slider .slick-next { background-image: url(../images/icon/next-white.svg); right: -25px; } .intro .main-banner .slider .slick-dots { position: absolute; bottom: auto; padding: 15px 0px; bottom: 0; left: 0; } .intro .main-banner .slider .slick-dots li { width: 12px; height: 12px; margin: 0px 6px 6px 6px; } .intro .main-banner .slider .slick-dots li button { width: 12px; height: 12px; padding: 0px; border: none; background: #fff; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .intro .main-banner .slider .slick-dots li button::before { display: none; } .intro .main-banner .slider .slick-dots li.slick-active button { background: #3bc1c5; } @media (max-width:1199px) { .intro .main-banner .slider .item .info .title { font-size: 52px; margin-bottom: 15px; } .intro .main-banner .slider .item .info .text { font-size: 18px; margin-bottom: 15px; } } @media (max-width:991px) { .intro .main-banner { padding-bottom: 50px; } .intro .main-banner .slider { -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; display: none; } .intro .main-banner .slider .item { -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; } .intro .main-banner .slider .item { display: block !important; } .intro .main-banner .slider .item .info { width: auto; padding-right: 0px; margin-bottom: 15px; } .intro .main-banner .slider .item .info .title { font-size: 46px; margin-bottom: 30px; } .intro .main-banner .slider .item .info .text { margin-bottom: 30px; } .intro .main-banner .slider .item .photo { width: auto; } } @media (max-width:767px) { .intro .main-banner .slider .item { padding: 50px 30px 30px 30px; } .intro .main-banner .slider .item .info .title { font-size: 46px; margin-bottom: 15px; } .intro .main-banner .slider .item .info .text { font-size: 17px; margin-bottom: 15px; } } @media (max-width:481px) { .intro .main-banner .slider .item .info .title { font-size: 32px; } .intro .main-banner .slider .item .info .text { font-size: 16px; } .intro .main-banner .slider .item .info .action a.donate { height: 40px; padding: 0px 15px; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; margin-right: 10px; } .intro .main-banner .slider .item .info .action a.donate::before { width: 16px; height: 16px; background: url(../images/icon/donate-white.svg) no-repeat center center; background-size: 16px 16px; } .intro .main-banner .slider .item .info .action a.donate:hover::before { background: url(../images/icon/donate-white.svg) no-repeat center center; background-size: 16px 16px; } .intro .main-banner .slider .item .info .action a.detail { height: 30px;/* background: url(../images/icon/next-blue.svg) no-repeat right 5px center; *//* background-size: 16px auto; *//* padding-right: 30px; */ } .intro .main-banner .slider .item .info .action a.detail:hover { background: url(../images/icon/next-blue.svg) no-repeat right center; background-size: 16px auto; } } .home-category { margin-bottom: 50px; overflow: hidden; } .home-category .thumb-slider { margin-bottom: 50px; display: none; } .home-category .thumb-slider.slick-initialized { display: block; } .home-category .thumb-slider .slick-track { margin: 0px auto; } .home-category .thumb-slider .slick-list { padding: 0px 80px !important; } .home-category .thumb-slider .item { margin: 0px 5px; } .home-category .thumb-slider .item a { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; width: 140px; height: 140px; text-decoration: none; -webkit-border-radius: 70px; -moz-border-radius: 70px; border-radius: 70px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; margin: 0px auto; cursor: pointer; text-transform: uppercase; } .home-category .thumb-slider .slick-current a { background: #E8F1EB; } .home-category .thumb-slider .item .info img { display: block; width: 56px; height: 56px; margin: 0px auto; margin-bottom: 5px; } .home-category .thumb-slider .item .info span { display: block; width: 100%; padding: 0px 5px; line-height: 100%; font-size: 14px; font-weight: 500; color: #164B3F; text-align: center; } .home-category .content-slider { padding: 50px; background: #FAF8F2; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; position: relative; overflow: hidden; position: relative; display: none; } .home-category .content-slider.slick-initialized { display: block; } .home-category .content-slider::before { display: block; content: ""; width: 240px; height: 240px; background: #E8F1EB; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; position: absolute; left: -110px; top: -130px; z-index: 1; } .home-category .content-slider::after { display: block; content: ""; width: 240px; height: 240px; background: #F1ECDD; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; position: absolute; right: -110px; bottom: -130px; z-index: 1; } .home-category .content-slider .slick-list { position: relative; z-index: 2; } .home-category .content-slider .item { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; position: relative; z-index: 2; } .home-category .content-slider .item .info { width: 55%; order: 2; padding-left: 50px; animation: fadeOutRight 1s both; } .home-category .content-slider .item.slick-active .info { animation: fadeInDown 0.5s both 0.5s; } .home-category .content-slider .item .info h1, .home-category .content-slider .item .info h2, .home-category .content-slider .item .info h3, .home-category .content-slider .item .info h4, .home-category .content-slider .item .info h5, .home-category .content-slider .item .info h6 { font-size: 44px; color: #164B3F; margin-bottom: 15px; } .home-category .content-slider .item .info p { font-size: 18px; margin-bottom: 30px; } .home-category .content-slider .item .info .action { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-wrap: wrap; align-items: center; } .home-category .content-slider .item .info .action a { text-decoration: none; -moz-transition: all 0.1s ease-in; -webkit-transition: all 0.1s ease-in; transition: all 0.1s ease-in; font-size: 13px; font-weight: 600; color: #164B3F; line-height: 100%; } .home-category .content-slider .item .info .action a.donate { display: -webkit-inline-box; display: -ms-inline-flexbox; display: -webkit-inline-flex; display: inline-flex; align-items: center; height: 50px; padding: 0px 30px; background: #E8F1EB; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; margin-right: 15px; } .home-category .content-slider .item .info .action a.donate:hover { background: #28745D; color: #fff; } .home-category .content-slider .item .info .action a.donate::before { display: block; content: ""; width: 20px; height: 20px; background: url(../images/icon/donate-blue.svg) no-repeat center center; background-size: 20px 20px; margin-right: 5px; } .home-category .content-slider .item .info .action a.donate:hover::before { background: url(../images/icon/donate-white.svg) no-repeat center center; background-size: 20px 20px; } .home-category .content-slider .item .info .action a.detail { display: -webkit-inline-box; display: -ms-inline-flexbox; display: -webkit-inline-flex; display: inline-flex; align-items: center; height: 50px; background: url(../images/icon/next-blue.svg) no-repeat right 5px center; padding-right: 35px; } .home-category .content-slider .item .info .action a.detail:hover { background: url(../images/icon/next-blue.svg) no-repeat right center; } .home-category .content-slider .item .photo { width: 45%; } .home-category .content-slider .item .photo img { display: block; width: 100%; height: auto; } @media (max-width:1199px) { .home-category { margin-bottom: 0px; } .home-category .content-slider .item .info h1, .home-category .content-slider .item .info h2, .home-category .content-slider .item .info h3, .home-category .content-slider .item .info h4, .home-category .content-slider .item .info h5, .home-category .content-slider .item .info h6 { font-size: 36px; } } @media (max-width:991px) { .home-category .content-slider { -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; } .home-category .content-slider::before { width: 120px; height: 120px; left: -50px; top: -80px; } .home-category .content-slider::after { width: 120px; height: 120px; right: -50px; bottom: -80px; } .home-category .content-slider .item { display: block; } .home-category .content-slider .item .info { width: auto; padding-left: 0px; } .home-category .content-slider .item .info h1, .home-category .content-slider .item .info h2, .home-category .content-slider .item .info h3, .home-category .content-slider .item .info h4, .home-category .content-slider .item .info h5, .home-category .content-slider .item .info h6 { font-size: 32px; } .home-category .content-slider .item .photo { width: auto; } } @media (max-width:767px) { .home-category .thumb-slider .slick-list { padding: 0px 60px !important; } .home-category .thumb-slider .item a { width: 120px; height: 120px; -webkit-border-radius: 60px; -moz-border-radius: 60px; border-radius: 60px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; } .home-category .thumb-slider .item .info img { width: 48px; height: 48px; } .home-category .thumb-slider .item .info span { font-size: 13px; } .home-category .content-slider { padding: 30px; } .home-category .content-slider .item .info h1, .home-category .content-slider .item .info h2, .home-category .content-slider .item .info h3, .home-category .content-slider .item .info h4, .home-category .content-slider .item .info h5, .home-category .content-slider .item .info h6 { font-size: 28px; } .home-category .content-slider .item .info p { font-size: 17px; } } @media (max-width:575px) { .home-category .thumb-slider .slick-list { padding: 0px 50px !important; } } @media (max-width:481px) { .home-category .thumb-slider .slick-list { padding: 0px 30px !important; } .home-category .thumb-slider .item a { width: 100px; height: 100px; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; } .home-category .thumb-slider .item .info img { width: 36px; height: 36px; } .home-category .thumb-slider .item .info span { font-size: 12px; } .home-category .content-slider .item .info h1, .home-category .content-slider .item .info h2, .home-category .content-slider .item .info h3, .home-category .content-slider .item .info h4, .home-category .content-slider .item .info h5, .home-category .content-slider .item .info h6 { font-size: 24px; } .home-category .content-slider .item .info p { font-size: 16px; } .home-category .content-slider .item .info .action a.donate { height: 30px; padding: 0px 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; margin-right: 10px; } .home-category .content-slider .item .info .action a.donate::before { width: 16px; height: 16px; background: url(../images/icon/donate-blue.svg) no-repeat center center; background-size: 16px 16px; } .home-category .content-slider .item .info .action a.donate:hover::before { background: url(../images/icon/donate-white.svg) no-repeat center center; background-size: 16px 16px; } .home-category .content-slider .item .info .action a.detail { height: 30px; background: url(../images/icon/next-blue.svg) no-repeat right 5px center; background-size: 16px auto; padding-right: 30px; } .home-category .content-slider .item .info .action a.detail:hover { background: url(../images/icon/next-blue.svg) no-repeat right center; background-size: 16px auto; } } @media (max-width:381px) { .home-category .thumb-slider .item a { width: 90px; height: 90px; -webkit-border-radius: 45px; -moz-border-radius: 45px; border-radius: 45px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; } .home-category .thumb-slider .item .info span { font-size: 11px; } } .project-item { position: relative; } .project-item::before { display: block; content: ""; background: #FAF8F2; position: absolute; left: 10px; right: 10px; top: 50px; bottom: 0px; z-index: 1; -webkit-border-bottom-left-radius: 50px; -moz-border-radius-bottomleft: 50px; border-bottom-left-radius: 50px; -webkit-border-bottom-right-radius: 50px; -moz-border-radius-bottomright: 50px; border-bottom-right-radius: 50px; } .project-item .photo { position: relative; z-index: 2; background: #263B35; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; } .project-item .photo a { display: block; } .project-item .photo a img { display: block; width: 100%; height: auto; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; -moz-transition: all 0.2s ease-in; -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in; } .project-item .photo a:hover img { opacity: 0.75; filter: alpha(opacity=75); } .project-item .photo .percentage { height: 10px; position: absolute; left: 60px; right: 60px; bottom: -5px; } .project-item .photo .percentage .bar { height: 10px; background: #164B3F; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; position: absolute; left: 0px; top: 0px; } .project-item .photo .percentage .bar::after { display: block; content: ""; width: 16px; height: 20px; background: url(../images/icon/drop-turquoise.svg) no-repeat center center; position: absolute; right: -8px; top: -5px; } .project-item .photo .location { height: 30px; line-height: 30px; padding: 0px 15px 0px 35px; background: url(../images/icon/location.svg) no-repeat left 10px center #fff; -webkit-border-top-right-radius: 15px; -moz-border-radius-topright: 15px; border-top-right-radius: 15px; -webkit-border-bottom-right-radius: 15px; -moz-border-radius-bottomright: 15px; border-bottom-right-radius: 15px; font-size: 11px; font-weight: 500; color: #164B3F; position: absolute; left: 0px; top: 15px; } .project-item .info { padding: 15px 30px 120px 30px; position: relative; z-index: 2; } .project-item .info.childs { padding-bottom: 35px;} .project-item .info.childs .general-name{ min-height: 50px;} .project-item .info .financial { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; padding: 5px 0px; min-height: 90px; border-bottom: solid 1px #E5E1D9; margin-bottom: 15px; } .project-item .info .financial p { font-size: 14px; margin-bottom: 0px; } .project-item .info .financial span { font-size: 16px; font-weight: 500; } .project-item .info .financial .total { margin-right: auto; flex: 1; } .project-item .info .financial .percentage { padding: 0px 10px; text-align: center; font-family: 'El Messiri', sans-serif, Arial; font-size: 36px; font-weight: 700; color: #164B3F; } .project-item .info .financial .target { margin-left: auto; flex: 1; text-align: right; } .project-item .info .general-name { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; padding: 5px 0px; min-height: 90px; border-bottom: solid 1px #E5E1D9; margin-bottom: 15px; font-size: 20px; font-weight: 500; color: #164B3F; } .project-item .info .project-name { font-size: 20px; line-height: 110%; } .project-item .info .text { font-size: 16px; line-height: 130%; } .project-item .donate { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; height: 50px; background: #fff; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; position: absolute; left: 30px; right: 30px; bottom: 30px; z-index: 3; } .project-item .donate .form-control, .project-item .donate .form-select { display: block; width: auto; height: 30px; padding: 0px; background-color: transparent; border: none; outline: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; font-size: 16px; font-weight: 700; color: #263B35; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; } .project-item .donate .form-control { min-width: 0px; width: 120px; padding: 0px 15px; border-right: solid 1px #F1ECDD; font-family: 'El Messiri', sans-serif, Arial; } .project-item .donate .form-select { padding: 0px 35px 0px 10px; } .project-item .donate .button { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; width: 110px; height: 50px; padding: 0px 5px; background: #164B3F; font-size: 13px; font-weight: 600; color: #fff; line-height: 100%; border: none; outline: none; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; -moz-transition: all 0.1s ease-in; -webkit-transition: all 0.1s ease-in; transition: all 0.1s ease-in; margin-left: auto; white-space: nowrap; } .project-item .donate .button:hover { background: #263B35; } .project-item .donate .button::before { display: block; content: ""; width: 20px; height: 20px; background: url(../images/icon/donate-white.svg) no-repeat center center; background-size: 20px 20px; margin-right: 5px; } @media (max-width:991px) { .project-item::before { -webkit-border-bottom-left-radius: 25px; -moz-border-radius-bottomleft: 25px; border-bottom-left-radius: 25px; -webkit-border-bottom-right-radius: 25px; -moz-border-radius-bottomright: 25px; border-bottom-right-radius: 25px; } .project-item .photo { -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; } .project-item .photo a img { -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; } .project-item .photo .percentage { left: 30px; right: 30px; } .project-item .info .financial p { font-size: 13px; } .project-item .info .financial span { font-size: 15px; } .project-item .info .financial .percentage { font-size: 32px; } .project-item .info .general-name, .project-item .info .project-name { font-size: 18px; } .project-item .info .text { font-size: 15px; } .project-item .donate .form-control { width: 100px; padding: 0px 10px; } .project-item .donate .form-select { padding: 0px 30px 0px 10px; } } @media (max-width:767px) { .project-item .info .financial p { font-size: 12px; } .project-item .info .financial span { font-size: 14px; } .project-item .info .financial .percentage { font-size: 28px; } .project-item .info .general-name, .project-item .info .project-name { font-size: 17px; } .project-item .info .text { font-size: 14px; } } @media (max-width:481px) { .project-item .info { padding: 15px 30px 110px 30px; } .project-item .info .financial { min-height: 70px; } .project-item .info .financial p { font-size: 11px; } .project-item .info .financial span { font-size: 13px; } .project-item .info .financial .percentage { font-size: 24px; } .project-item .info .general-name, .project-item .info .project-name { font-size: 16px; } } .slider-navigation a { display: block; width: 50px; font-size: 11px; font-weight: 500; color: #164B3F; text-decoration: none; text-align: center; cursor: pointer; } .slider-navigation a.next { margin-bottom: 15px; } .slider-navigation a.next::after, .slider-navigation a.prev::before { display: block; content: ""; width: 50px; height: 50px; background-color: #E8F1EB; background-position: center center; background-repeat: no-repeat; background-size: 20px 18px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .slider-navigation a.next::after { background-image: url(../images/icon/next-blue.svg); margin-top: 5px; } .slider-navigation a.prev::before { background-image: url(../images/icon/prev-blue.svg); margin-bottom: 5px; } .home-projects { margin-bottom: 50px; } .home-projects .container { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: flex-start; } .home-projects .left { width: 30%; padding: 50px; position: relative; } .home-projects .left::before { display: block; content: ""; background: #E8F1EB; position: absolute; top: 0px; bottom: 0px; left: -9999px; right: 0px; z-index: -1; -webkit-border-top-right-radius: 50px; -moz-border-radius-topright: 50px; border-top-right-radius: 50px; -webkit-border-bottom-right-radius: 50px; -moz-border-radius-bottomright: 50px; border-bottom-right-radius: 50px; } .home-projects .right { width: 70%; padding-left: 50px; padding-top: 90px; } .home-projects .left .title { margin-bottom: 30px; } .home-projects .left .title p { font-size: 18px; color: #28745D; margin-bottom: 10px; } .home-projects .left .title h1, .home-projects .left .title h2, .home-projects .left .title h3, .home-projects .left .title h4, .home-projects .left .title h5, .home-projects .left .title h6 { font-size: 44px; color: #164B3F; line-height: 95%; margin: 0px; } .home-projects .left .category-slider { display: none; } .home-projects .left .category-slider.slick-initialized { display: block; } .home-projects .left .category-slider .slick-list { padding: 0px !important; } .home-projects .left .category-slider .item { margin: 10px 0px; } .home-projects .left .category-slider .item a { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; height: 80px; padding: 0px 30px; background: rgba(255, 255, 255, 0.3); -webkit-border-radius: 40px; -moz-border-radius: 40px; border-radius: 40px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; cursor: pointer; font-size: 14px; font-weight: 500; color: #164B3F; text-transform: uppercase; } .home-projects .left .category-slider .slick-current a { background: #fff; } .home-projects .left .category-slider .item a img { display: block; width: 46px; height: auto; margin-right: 10px; } .home-projects .right .content-slider { display: none; } .home-projects .right .content-slider.slick-initialized { display: block; } .home-projects .right .title { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; padding-right: 100px; margin-bottom: 15px; } .home-projects .right .title h1, .home-projects .right .title h2, .home-projects .right .title h3, .home-projects .right .title h4, .home-projects .right .title h5, .home-projects .right .title h6 { font-size: 30px; font-weight: 700; color: #164B3F; margin-right: 10px; } .home-projects .right .title a { display: -webkit-inline-box; display: -ms-inline-flexbox; display: -webkit-inline-flex; display: inline-flex; align-items: center; height: 20px; padding-right: 30px; color: #164B3F; text-decoration: none; font-size: 13px; font-weight: 600; line-height: 100%; background: url(../images/icon/right-blue.svg) no-repeat right 5px center; -moz-transition: all 0.1s ease-in; -webkit-transition: all 0.1s ease-in; transition: all 0.1s ease-in; margin-left: auto; } .home-projects .right .title a:hover { background: url(../images/icon/right-blue.svg) no-repeat right center; } .home-projects .right .list { position: relative; padding-right: 100px; } .home-projects .right .slider-navigation { position: absolute; right: 0px; top: 50%; -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); transform: translate(0, -50%); } .home-projects .right .project-slider { margin: 0px -15px; display: none; } .home-projects .right .project-slider.slick-initialized { display: block; } .home-projects .right .project-slider .slick-track { display: flex !important; } .home-projects .right .project-slider .slick-slide { height: inherit !important; } .home-projects .right .project-slider .project-item { margin: 0px 15px; } .home-projects .right .project-slider .slick-dots { position: relative; bottom: auto; padding: 15px 0px; } .home-projects .right .project-slider .slick-dots li { width: 12px; height: 12px; margin: 0 6px; } .home-projects .right .project-slider .slick-dots li button { width: 12px; height: 12px; padding: 0px; border: none; background: #DCEADD; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .home-projects .right .project-slider .slick-dots li button::before { display: none; } .home-projects .right .project-slider .slick-dots li.slick-active button { background: #164B3F; } @media (max-width:1199px) { .home-projects { background: #E8F1EB; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; margin-top: -50px; padding-top: 100px; } .home-projects .container { display: block; } .home-projects .left { width: auto; padding: 0px; margin-bottom: 30px; } .home-projects .left::before { display: none; } .home-projects .left .title h1, .home-projects .left .title h2, .home-projects .left .title h3, .home-projects .left .title h4, .home-projects .left .title h5, .home-projects .left .title h6 { font-size: 36px; } .home-projects .left .category-slider { margin: 0px -15px; } .home-projects .left .category-slider .item { margin: 0px 15px; } .home-projects .right { width: auto; padding-left: 0px; padding-top: 0px; } .home-projects .right .title { display: none; } .home-projects .right .list { padding-right: 0px; } .home-projects .right .slider-navigation { display: none; } } @media (max-width:991px) { .home-projects .left .title p { font-size: 17px; } .home-projects .left .title h1, .home-projects .left .title h2, .home-projects .left .title h3, .home-projects .left .title h4, .home-projects .left .title h5, .home-projects .left .title h6 { font-size: 32px; } } @media (max-width:767px) { .home-projects { overflow: hidden; } .home-projects .container { width: 100%; max-width: 100%; padding: 0px; } .home-projects .left .title { padding: 0px 30px; } .home-projects .left .title p { font-size: 16px; } .home-projects .left .title h1, .home-projects .left .title h2, .home-projects .left .title h3, .home-projects .left .title h4, .home-projects .left .title h5, .home-projects .left .title h6 { font-size: 28px; } .home-projects .left .category-slider { margin: 0px -10px; } .home-projects .left .category-slider .slick-list { padding: 0px 100px !important; overflow: visible; } .home-projects .left .category-slider .item { margin: 0px 10px; } .home-projects .right .project-slider { margin: 0px -10px; } .home-projects .right .project-slider .slick-list { padding: 0px 60px !important; overflow: visible; } .home-projects .right .project-slider .project-item { margin: 0px 10px; } } @media (max-width:481px) { .home-projects .left .title p { font-size: 15px; } .home-projects .left .title h1, .home-projects .left .title h2, .home-projects .left .title h3, .home-projects .left .title h4, .home-projects .left .title h5, .home-projects .left .title h6 { font-size: 24px; } .home-projects .left .category-slider { margin: 0px -5px; } .home-projects .left .category-slider .slick-list { padding: 0px 80px !important; } .home-projects .left .category-slider .item { margin: 0px 5px; } .home-projects .left .category-slider .item a { height: 50px; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; font-size: 13px; } .home-projects .left .category-slider .item a img { width: 36px; } .home-projects .right .project-slider .slick-list { padding: 0px 30px !important; overflow: visible; } } .news-item { position: relative; } .news-item::before { display: block; content: ""; background: #FAF8F2; position: absolute; left: 10px; right: 10px; top: 50px; bottom: 0px; z-index: 1; -webkit-border-bottom-left-radius: 50px; -moz-border-radius-bottomleft: 50px; border-bottom-left-radius: 50px; -webkit-border-bottom-right-radius: 50px; -moz-border-radius-bottomright: 50px; border-bottom-right-radius: 50px; } .news-item .photo { position: relative; z-index: 2; background: #263B35; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; overflow: hidden; } .news-item .photo a { display: block; } .news-item .photo a img { display: block; width: 100%; height: auto; opacity: 0.75; filter: alpha(opacity=75); -moz-transition: all 0.2s ease-in; -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in; } .news-item .photo a:hover img { opacity: 1; filter: alpha(opacity=100); } .news-item .info { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; padding: 30px 30px 60px 30px; position: relative; z-index: 1; } .news-item .info .date { width: 70px; color: #28745D; text-align: center; } .news-item .info .date .day { font-family: 'El Messiri', sans-serif, Arial; font-weight: 700; font-size: 36px; line-height: 95%; } .news-item .info .date .month, .news-item .info .date .year { font-size: 12px; font-weight: 500; line-height: 120%; } .news-item .info .name { flex: 1; } .news-item .info .action { position: absolute; left: 100px; bottom: 30px; } .news-item .info .action a { display: -webkit-inline-box; display: -ms-inline-flexbox; display: -webkit-inline-flex; display: inline-flex; align-items: center; height: 20px; padding-right: 30px; color: #164B3F; text-decoration: none; font-size: 13px; font-weight: 600; background: url(../images/icon/right-blue.svg) no-repeat right 5px center; -moz-transition: all 0.1s ease-in; -webkit-transition: all 0.1s ease-in; transition: all 0.1s ease-in; } .news-item .info .action a:hover { background: url(../images/icon/right-blue.svg) no-repeat right center; } @media (max-width:1199px) { .news-item .info .date .day { font-size: 32px; } .news-item .info .date .month, .news-item .info .date .year { font-size: 11px; } } @media (max-width:991px) { .news-item::before { -webkit-border-bottom-left-radius: 25px; -moz-border-radius-bottomleft: 25px; border-bottom-left-radius: 25px; -webkit-border-bottom-right-radius: 25px; -moz-border-radius-bottomright: 25px; border-bottom-right-radius: 25px; } .news-item .photo { -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; } } @media (max-width:481px) { .news-item .info .date .day { font-size: 30px; } .news-item .info .date .month, .news-item .info .date .date .year { font-size: 10px; } } .home-news { margin-bottom: 50px; } .home-news .title { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: flex-end; margin-bottom: 50px; padding-left: 100px; } .home-news .title .left { margin-right: 15px; } .home-news .title .left p { font-size: 18px; color: #28745D; margin-bottom: 10px; } .home-news .title .left h1, .home-news .title .left h2, .home-news .title .left h3, .home-news .title .left h4, .home-news .title .left h5, .home-news .title .left h6 { color: #164B3F; line-height: 95%; margin: 0px; } .home-news .title .left h1, .home-news .title .left h2 { font-size: 44px; } .home-news .title .left h3, .home-news .title .left h4, .home-news .title .left h5, .home-news .title .left h6 { font-size: 30px; } .home-news .title .right { margin-left: auto; } .home-news .title .right a { display: -webkit-inline-box; display: -ms-inline-flexbox; display: -webkit-inline-flex; display: inline-flex; align-items: center; height: 20px; padding-right: 30px; color: #164B3F; text-decoration: none; font-size: 13px; font-weight: 600; background: url(../images/icon/right-blue.svg) no-repeat right 5px center; -moz-transition: all 0.1s ease-in; -webkit-transition: all 0.1s ease-in; transition: all 0.1s ease-in; } .home-news .title .right a:hover { background: url(../images/icon/right-blue.svg) no-repeat right center; } .home-news .list { position: relative; padding-left: 100px; } .home-news .slider-navigation { position: absolute; left: 0px; top: 50%; -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); transform: translate(0, -50%); z-index: 2; } .home-news .slider { margin: 0px -15px; display: none; } .home-news .slider.slick-initialized { display: block; } .home-news .slider .news-item { margin: 0px 15px; } .home-news .slider .slick-dots { position: relative; bottom: auto; padding: 15px 0px; } .home-news .slider .slick-dots li { width: 12px; height: 12px; margin: 0 6px; } .home-news .slider .slick-dots li button { width: 12px; height: 12px; padding: 0px; border: none; background: #DCEADD; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .home-news .slider .slick-dots li button::before { display: none; } .home-news .slider .slick-dots li.slick-active button { background: #164B3F; } @media (max-width:1199px) { .home-news .title { padding-left: 0px; margin-bottom: 30px; } .home-news .title .left { margin-right: 0px; } .home-news .title .left h1, .home-news .title .left h2 { font-size: 36px; } .home-news .title .right { display: none; } .home-news .list { padding-left: 0px; } .home-news .slider-navigation { position: relative; right: auto; top: auto; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); transform: translate(0, 0); } .home-news .slider-navigation a { width: 40px; height: 40px; text-indent: -9999px; background-color: #E8F1EB; background-position: center center; background-repeat: no-repeat; background-size: 16px auto; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; position: absolute; } .home-news .slider-navigation a.next { background-image: url(../images/icon/next-blue.svg); margin-bottom: 0px; right: 0px; top: -70px; } .home-news .slider-navigation a.prev { background-image: url(../images/icon/prev-blue.svg); right: 50px; top: -70px; } .home-news .slider-navigation a.next::after, .home-news .slider-navigation a.prev::before { display: none; } } @media (max-width:991px) { .home-news .title .left p { font-size: 17px; } .home-news .title .left h1, .home-news .title .left h2 { font-size: 32px; } .home-news .title .left h3, .home-news .title .left h4, .home-news .title .left h5, .home-news .title .left h6 { font-size: 28px; } } @media (max-width:767px) { .home-news { overflow: hidden; } .home-news .container { width: 100%; max-width: 100%; padding: 0px; } .home-news .title { min-height: 40px; padding: 0px 30px; } .home-news .title .left p { font-size: 16px; } .home-news .title .left h1, .home-news .title .left h2 { font-size: 28px; } .home-news .title .left h3, .home-news .title .left h4, .home-news .title .left h5, .home-news .title .left h6 { font-size: 24px; } .home-news .slider { margin: 0px -10px; } .home-news .slider .slick-list { padding: 0px 60px !important; overflow: visible; } .home-news .slider .news-item { margin: 0px 10px; } .home-news .slider-navigation a.next { right: 30px; } .home-news .slider-navigation a.prev { right: 80px; } } @media (max-width:481px) { .home-news .title .left p { font-size: 15px; } .home-news .title .left h1, .home-news .title .left h2 { font-size: 24px; } .home-news .title .left h3, .home-news .title .left h4, .home-news .title .left h5, .home-news .title .left h6 { font-size: 21px; } .home-news .slider .slick-list { padding: 0px 30px !important; overflow: visible; } } footer { color: #fff; } footer ul { list-style: none; margin: 0; padding: 0; } footer p { margin: 0; padding: 0; } footer a { color: #fff; text-decoration: none; transition: all .18s ease; } footer.umut-footer { width: calc(100% - 96px); max-width: 1100px; margin: 70px auto 0; padding: 0; } footer.umut-footer .content { position: relative; isolation: isolate; overflow: hidden; padding: 46px 54px 34px; border-radius: 44px; background: radial-gradient(circle at 88% 18%, rgba(242,193,78,.07), transparent 22%), radial-gradient(circle at 18% 90%, rgba(255,255,255,.05), transparent 26%), linear-gradient(135deg, #174F42 0%, #123F35 100%); box-shadow: 0 20px 45px rgba(20,43,35,.10); } footer.umut-footer .content::before, footer.umut-footer .content::after { content: ""; position: absolute; z-index: -1; pointer-events: none; border-radius: 50%; } footer.umut-footer .content::before { width: 300px; height: 300px; left: -120px; top: -140px; background: rgba(255,255,255,.025); } footer.umut-footer .content::after { width: 360px; height: 360px; right: -180px; bottom: -220px; background: rgba(242,193,78,.035); } footer.umut-footer .footer-reflection { position: absolute; z-index: -1; right: 4%; top: 50%; width: min(520px, 39vw); height: min(360px, 28vw); transform: translateY(-46%); opacity: .09; pointer-events: none; background: url(../blog/footer-yardim-eli.png) no-repeat center center; background-size: contain; filter: grayscale(100%); } footer.umut-footer .footer-reflection svg { display: none; } footer.umut-footer .footer-top, footer.umut-footer .footer-middle, footer.umut-footer .footer-bottom { position: relative; z-index: 2; display: flex; align-items: center; } footer.umut-footer .footer-top { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: 32px; min-height: 82px; } footer.umut-footer .mail { justify-self: start; min-width: 0; } footer.umut-footer .support { justify-self: end; text-align: right; min-width: 0; } footer.umut-footer .logo { position: static; width: 178px; transform: none; justify-self: center; } footer.umut-footer .logo img { display: block; width: 178px; height: auto; } footer.umut-footer .mail a, footer.umut-footer .support a { display: inline-flex; flex-direction: column; justify-content: center; min-height: 58px; font-size: 21px; font-weight: 500; line-height: 1.2; letter-spacing: -.01em; } footer.umut-footer .mail a { padding-left: 66px; background: url(../images/icon/footer-mail.png) no-repeat left center; background-size: 48px auto; } footer.umut-footer .support a { padding-right: 66px; background: url(../images/icon/footer-support.png) no-repeat right center; background-size: 48px auto; } footer.umut-footer .mail a span, footer.umut-footer .support a span { display: block; margin-bottom: 5px; color: rgba(255,255,255,.72); font-size: 11px; font-weight: 500; letter-spacing: .055em; } footer.umut-footer .mail a:hover, footer.umut-footer .support a:hover { color: #F2C14E; } footer.umut-footer .footer-middle { justify-content: space-between; gap: 28px; margin-top: 32px; padding: 28px 0; border-top: 1px solid rgba(255,255,255,.12); border-bottom: 1px solid rgba(255,255,255,.12); } footer.umut-footer .menu { min-width: 0; font-size: 15px; } footer.umut-footer .menu ul { display: flex; flex-wrap: wrap; gap: 8px 18px; } footer.umut-footer .menu ul li a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid transparent; border-radius: 14px; color: rgba(255,255,255,.92); } footer.umut-footer .menu ul li a:hover { border-color: rgba(242,193,78,.35); background: rgba(255,255,255,.06); color: #F2C14E; } footer.umut-footer .social { margin-left: auto; } footer.umut-footer .social ul { display: flex; gap: 10px; } footer.umut-footer .social ul li { margin: 0; } footer.umut-footer .social ul li a { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; background: rgba(255,255,255,.07); color: #fff; } footer.umut-footer .social ul li a:hover { background: #F2C14E; color: #164B3F; transform: translateY(-2px); } footer.umut-footer .footer-bottom { justify-content: space-between; gap: 40px; padding-top: 28px; } footer.umut-footer .copyright { flex: 1 1 32%; order: 0; margin: 0; color: rgba(255,255,255,.74); font-size: 13px; line-height: 1.7; } footer.umut-footer .copyright p:first-child { color: #fff; font-size: 14px; } footer.umut-footer .brand { display: none; } footer.umut-footer .footer-payment { flex: 0 0 360px; display: flex; align-items: center; justify-content: center; min-width: 0; } footer.umut-footer .footer-payment img { display: block; width: 100%; max-width: 360px; height: auto; object-fit: contain; opacity: .92; } footer.umut-footer .other-menu { flex: 1 1 32%; order: 0; margin: 0; text-align: right; font-size: 12.5px; } footer.umut-footer .other-menu ul { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 18px; } footer.umut-footer .other-menu ul li { margin: 0; } footer.umut-footer .other-menu ul li a { color: rgba(255,255,255,.78); } footer.umut-footer .other-menu ul li a:hover { color: #F2C14E; } @media (max-width: 991px) { footer.umut-footer { width: calc(100% - 24px); margin-top: 45px; } footer.umut-footer .content { padding: 34px 28px 28px; border-radius: 32px; } footer.umut-footer .footer-reflection { right: -8%; top: 56%; width: 430px; height: 280px; max-width: 72vw; opacity: .08; } footer.umut-footer .footer-top { grid-template-columns: 1fr 1fr; gap: 22px; } footer.umut-footer .logo { grid-column: 1 / -1; grid-row: 1; margin: 0 auto 8px; } footer.umut-footer .mail { grid-column: 1; grid-row: 2; } footer.umut-footer .support { grid-column: 2; grid-row: 2; } footer.umut-footer .footer-middle { align-items: flex-start; flex-direction: column; } footer.umut-footer .menu { display: block; } footer.umut-footer .social { margin-left: 0; } footer.umut-footer .footer-bottom { align-items: flex-start; flex-direction: column; gap: 18px; } footer.umut-footer .footer-payment { display: none; } footer.umut-footer .copyright, footer.umut-footer .other-menu { flex: none; width: 100%; text-align: left; } footer.umut-footer .other-menu { padding: 0; border: 0; margin: 0; } footer.umut-footer .other-menu ul { justify-content: flex-start; } } @media (max-width: 600px) { footer.umut-footer .content { padding: 30px 20px 24px; border-radius: 26px; } footer.umut-footer .footer-top { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; } footer.umut-footer .logo { order: 0; width: 150px; margin: 0 0 8px; } footer.umut-footer .logo img { width: 150px; } footer.umut-footer .mail, footer.umut-footer .support { width: 100%; text-align: left; } footer.umut-footer .mail a, footer.umut-footer .support a { min-height: 46px; padding-left: 54px; padding-right: 0; background-position: left center; background-size: 38px auto; font-size: 18px; } footer.umut-footer .footer-middle { margin-top: 24px; padding: 22px 0; } footer.umut-footer .menu ul { gap: 4px 8px; } footer.umut-footer .menu ul li a { min-height: 36px; padding: 0 10px; font-size: 13px; } footer.umut-footer .social ul { flex-wrap: wrap; } footer.umut-footer .social ul li a { width: 40px; height: 40px; } footer.umut-footer .footer-bottom { padding-top: 22px; } footer.umut-footer .other-menu ul { display: block; } footer.umut-footer .other-menu ul li { margin-bottom: 7px; } footer.umut-footer .footer-reflection { right: -48%; top: 62%; width: 520px; height: 280px; max-width: none; opacity: .06; } } @-webkit-keyframes scrollBounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); } 40% { -webkit-transform: translateY(-10px); } 60% { -webkit-transform: translateY(-5px); } } @-moz-keyframes scrollBounce { 0%, 20%, 50%, 80%, 100% { -moz-transform: translateY(0); } 40% { -moz-transform: translateY(-10px); } 60% { -moz-transform: translateY(-5px); } } @keyframes scrollBounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-10px); } 60% { transform: translateY(-5px); } } .intro .page-concept { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .intro .page-concept .left { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-wrap: wrap; flex-direction: column; align-items: stretch; width: 35%; padding-left: 50px; padding-right: 30px; padding-bottom: 180px; color: #fff; position: relative; } .intro .page-concept .right { width: 65%; position: relative; } .intro .page-concept .left .breadcrumb { display: block; width: 100%; margin: 0px; font-size: 13px; } .intro .page-concept .left .breadcrumb ul { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-wrap: wrap; } .intro .page-concept .left .breadcrumb ul li::after { content: ">"; font-family: "Trebuchet MS"; opacity: 0.7; filter: alpha(opacity=70); padding: 0px 8px; } .intro .page-concept .left .breadcrumb ul li:last-child::after { display: none; } .intro .page-concept .left .breadcrumb ul li a { color: #fff; text-decoration: none; opacity: 0.7; filter: alpha(opacity=70); -moz-transition: all 0.1s ease-in; -webkit-transition: all 0.1s ease-in; transition: all 0.1s ease-in; } .intro .page-concept .left .breadcrumb ul li a:hover { opacity: 1; filter: alpha(opacity=100); } .intro .page-concept .left .info { width: 100%; flex: 1; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; } .intro .page-concept .left .info h1, .intro .page-concept .left .info h2, .intro .page-concept .left .info h3, .intro .page-concept .left .info h4, .intro .page-concept .left .info h5, .intro .page-concept .left .info h6 { font-size: 36px; font-weight: 700; line-height: 100%; margin-bottom: 10px; } .intro .page-concept .left .info p { font-size: 20px; line-height: 120%; margin: 0px; } .intro .page-concept .left .scroll-down { width: 50px; height: 50px; background: url(../images/icon/down-white.svg) no-repeat center center; border: solid 2px #fff; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; position: absolute; left: 50px; bottom: 100px; -webkit-animation: scrollBounce 2s infinite; -moz-animation: scrollBounce 2s infinite; animation: scrollBounce 2s infinite; cursor: pointer; } .intro .page-concept .right .slider { background: #164B3F; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; margin: 0px; display: none; } .intro .page-concept .right .slider.slick-initialized { display: block; } .intro .page-concept .right .slider .item { position: relative; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; overflow: hidden; } .intro .page-concept .right .slider .item img { display: block; width: 100%; height: auto; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; } .intro .page-concept .right .slider .item .caption { width: 100%; padding: 30px 30px 45px 30px; position: absolute; left: 0px; bottom: 0px; z-index: 9; background: rgba(0, 0, 0, 0); background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 1))); background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%); background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%); background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%); background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#000000', GradientType=0); } .intro .page-concept .right .slider .item .caption .action a { display: -webkit-inline-box; display: -ms-inline-flexbox; display: -webkit-inline-flex; display: inline-flex; align-items: center; padding: 15px 50px 15px 25px; background-color: #fff; background-repeat: no-repeat; background-position: right 30px center; background-image: url(../images/icon/right-blue.svg); text-decoration: none; font-size: 18px; font-weight: 500; color: #164B3F; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; -moz-transition: all 0.1s ease-in; -webkit-transition: all 0.1s ease-in; transition: all 0.1s ease-in; line-height: 100%; } .intro .page-concept .right .slider .item .caption .action a img { display: block; width: auto; height: 30px; margin-right: 10px; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; } .intro .page-concept .right .slider .item .caption .action a:hover { background-color: #E8F1EB; } .intro .page-concept .right .slider .item .caption .action .date { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; color: #28745D; margin-right: 10px; } .intro .page-concept .right .slider .item .caption .action .date .day { font-family: 'El Messiri', sans-serif, Arial; font-weight: 700; font-size: 32px; line-height: 95%; margin-right: 5px; } .intro .page-concept .right .slider .item .caption .action .date .other { font-size: 12px; font-weight: 500; line-height: 110%; } .intro .page-concept .right .slider .item .location { height: 50px; line-height: 50px; padding: 0px 15px 0px 45px; background: url(../images/icon/location.svg) no-repeat left 10px center #fff; background-size: auto 30px; -webkit-border-top-right-radius: 25px; -moz-border-radius-topright: 25px; border-top-right-radius: 25px; -webkit-border-bottom-right-radius: 25px; -moz-border-radius-bottomright: 25px; border-bottom-right-radius: 25px; font-size: 13px; font-weight: 500; color: #164B3F; position: absolute; left: 0px; top: 20px; } .intro .page-concept .right .slider .item .action-icon { width: 50px; height: 50px; background-repeat: no-repeat; background-position: center center; background-color: #fff; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -moz-transition: all 0.1s ease-in; -webkit-transition: all 0.1s ease-in; transition: all 0.1s ease-in; position: absolute; right: 30px; bottom: 30px; z-index: 9; } .intro .page-concept .right .slider .item .action-icon:hover { background-color: #E8F1EB; } .intro .page-concept .right .slider .item .action-icon.action-gallery-category { background-image: url(../images/icon/right-blue.svg); } .intro .page-concept .right .slider .item .action-icon.action-gallery-photo { background-image: url(../images/icon/zoom-blue.svg); } .intro .page-concept .right .slider .item .action-icon.action-gallery-video { background-image: url(../images/icon/play-blue.svg); } .intro .page-concept .right .slider .item .contact-map { width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; } .intro .page-concept .right .slider .item .contact-map iframe { display: block; width: 100%; height: 100%; } .intro .page-concept .right .slider .slick-prev, .intro .page-concept .right .slider .slick-next { width: 50px; height: 50px; border: none; text-indent: -9999px; background-color: #28745D; background-repeat: no-repeat; background-position: center center; background-size: 20px 18px; opacity: 1; filter: alpha(opacity=100); -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; z-index: 9; } .intro .page-concept .right .slider .slick-prev { background-image: url(../images/icon/prev-white.svg); left: -25px; } .intro .page-concept .right .slider .slick-next { background-image: url(../images/icon/next-white.svg); right: -25px; } .intro .page-concept .right .slider .slick-dots { bottom: 15px; padding: 0px; } .intro .page-concept .right .slider .slick-dots li { width: 12px; height: 12px; margin: 0 5px; } .intro .page-concept .right .slider .slick-dots li:only-child { display: none; } .intro .page-concept .right .slider .slick-dots li button { width: 12px; height: 12px; padding: 0px; border: none; background: #fff; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .intro .page-concept .right .slider .slick-dots li button::before { display: none; } .intro .page-concept .right .slider .slick-dots li.slick-active button { background: #28745D; } .intro .page-concept .right .percentage { height: 10px; position: absolute; left: 60px; right: 60px; bottom: -5px; } .intro .page-concept .right .percentage .bar { height: 10px; background: #164B3F; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; position: absolute; left: 0px; top: 0px; } .intro .page-concept .right .percentage .bar::after { display: block; content: ""; width: 16px; height: 20px; background: url(../images/icon/drop-turquoise.svg) no-repeat center center; position: absolute; right: -8px; top: -5px; } @media (max-width:1367px) { .intro .page-concept .left { padding-left: 30px; padding-bottom: 150px; } .intro .page-concept .left .info h1, .intro .page-concept .left .info h2, .intro .page-concept .left .info h3, .intro .page-concept .left .info h4, .intro .page-concept .left .info h5, .intro .page-concept .left .info h6 { font-size: 32px; } .intro .page-concept .left .info p { font-size: 18px; } .intro .page-concept .left .scroll-down { width: 40px; height: 40px; left: 30px; bottom: 90px; } } @media (max-width:1199px) { .intro .page-concept { padding: 30px; background: #164B3F; background: #E8F1EB; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; } .intro .page-concept .left { width: 50%; padding-left: 0px; padding-bottom: 0px; color: #164B3F; } .intro .page-concept .right { width: 50%; } .intro .page-concept .left .breadcrumb ul li a { color: #164B3F; } .intro .page-concept .left .scroll-down { position: relative; left: auto; bottom: auto; background: url(../images/icon/down-blue.svg) no-repeat center center; border: solid 2px #164B3F; } .intro .page-concept .right .slider .item .caption .action a { padding: 15px 40px 15px 20px; background-position: right 20px center; font-size: 16px; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; } .intro .page-concept .right .slider .item .caption .action a img { height: 24px; margin-right: 8px; } .intro .page-concept .right .slider .item .location { height: 40px; line-height: 40px; padding: 0px 15px 0px 40px; background-size: auto 24px; -webkit-border-top-right-radius: 20px; -moz-border-radius-topright: 20px; border-top-right-radius: 20px; -webkit-border-bottom-right-radius: 20px; -moz-border-radius-bottomright: 20px; border-bottom-right-radius: 20px; font-size: 12px; top: 15px; } } @media (max-width:991px) { .intro .page-concept { display: block; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; } .intro .page-concept .left { width: auto; margin-bottom: 15px; } .intro .page-concept .right { width: auto; } .intro .page-concept .left .breadcrumb { margin-bottom: 30px; } .intro .page-concept .left .info { margin-bottom: 30px; } .intro .page-concept .right .slider, .intro .page-concept .right .slider .item, .intro .page-concept .right .slider .item img { -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; } .intro .page-concept .right .slider .item .caption { padding: 15px 15px 40px 15px; } .intro .page-concept .right .slider .item .caption .action a { padding: 10px 35px 10px 15px; background-position: right 15px center; font-size: 15px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; } .intro .page-concept .right .slider .item .caption .action a img { height: 20px; margin-right: 5px; } .intro .page-concept .right .percentage { left: 30px; right: 30px; } } @media (max-width:767px) { .intro .page-concept .left .info h1, .intro .page-concept .left .info h2, .intro .page-concept .left .info h3, .intro .page-concept .left .info h4, .intro .page-concept .left .info h5, .intro .page-concept .left .info h6 { font-size: 28px; } .intro .page-concept .left .info p { font-size: 17px; } .intro .page-concept .right .slider .item .caption .action .date .day { font-size: 28px; } .intro .page-concept .right .slider .item .caption .action .date .other { font-size: 11px; } } @media (max-width:481px) { .intro .page-concept .left .breadcrumb { font-size: 12px; } .intro .page-concept .left .info { margin-bottom: 15px; } .intro .page-concept .right .slider .item .caption .action a { font-size: 14px; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; } .intro .page-concept .right .slider .item .caption .action a img { height: 16px; } .intro .page-concept .right .slider .item .caption .action .date .day { font-size: 24px; } .intro .page-concept .right .slider .item .caption .action .date .other { font-size: 10px; } .intro .page-concept .right .slider .item .location { height: 30px; line-height: 30px; padding: 0px 15px 0px 35px; background-size: auto 20px; -webkit-border-top-right-radius: 15px; -moz-border-radius-topright: 15px; border-top-right-radius: 15px; -webkit-border-bottom-right-radius: 15px; -moz-border-radius-bottomright: 15px; border-bottom-right-radius: 15px; font-size: 11px; top: 10px; } } @media (max-width:381px) { .intro .page-concept .right .slider .item .caption .action a { font-size: 12px; } } .category-menu-slider { margin-bottom: 50px; display: none; } .category-menu-slider.slick-initialized { display: block; } .category-menu-slider .slick-track { margin: 0px auto; } .category-menu-slider .slick-list { padding: 0px 60px !important; } .category-menu-slider .item { margin: 0px 5px; } .category-menu-slider .item a { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; height: 80px; padding: 0px 15px; text-decoration: none; -webkit-border-radius: 40px; -moz-border-radius: 40px; border-radius: 40px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; cursor: pointer; text-transform: uppercase; } .category-menu-slider .item.slick-current a { background: #E8F1EB; } .category-menu-slider .item img { display: block; width: 56px; height: 56px; margin-right: 5px; } .category-menu-slider .item span { display: block; line-height: 100%; font-size: 14px; font-weight: 500; color: #164B3F; } @media (max-width:767px) { .category-menu-slider .slick-list { padding: 0px 40px !important; } .category-menu-slider .item img { width: 48px; height: 48px; } .category-menu-slider .item span { font-size: 13px; } } @media (max-width:481px) { .category-menu-slider .slick-list { padding: 0px 100px !important; } .category-menu-slider .item a { height: 60px; padding: 0px 10px; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; } .category-menu-slider .item img { width: 36px; height: 36px; } .category-menu-slider .item span { font-size: 12px; } } @media (max-width:381px) { .category-menu-slider .slick-list { padding: 0px 80px !important; } .category-menu-slider .item span { font-size: 11px; } } .project-category { margin-bottom: 50px; } .project-category .list .item { margin-bottom: 30px; } .project-category .list .project-item { height: 100%; } .static-content { font-size: 17px; } .static-content h1, .static-content h2, .static-content h3, .static-content h4, .static-content h5, .static-content h6 { font-family: 'Jost', sans-serif, Arial; font-size: 17px; font-weight: 600; color: #164B3F; margin-bottom: 20px; } .static-content h1 { font-size: 28px; font-weight: 700; } .static-content h2 { font-size: 24px; font-weight: 600; } .static-content h3 { font-size: 20px; font-weight: 500; } .static-content h3 { font-size: 18px; } .static-content p { margin-bottom: 20px; } .static-content p.lead { font-size: 20px; font-weight: 400; color: #164B3F; line-height: 130%; } .static-content p:last-child { margin-bottom: 0px; } .static-content img { max-width: 100%; height: auto; } .static-content .video { position: relative; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; overflow: hidden; } .static-content .video::before { display: block; content: ""; width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; z-index: 1; background: rgba(0, 0, 0, 0); background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 1))); background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%); background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%); background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%); background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#000000', GradientType=0); opacity: 0.3; filter: alpha(opacity=30); } .static-content .video a { display: block; } .static-content .video img { display: block; width: 100%; height: auto; } .static-content .video .play { width: 100%; height: 100%; background: url(../images/icon/play.svg) no-repeat center center; background-size: 50px 50px; position: absolute; left: 0px; top: 0px; z-index: 2; -moz-transition: all 0.1s ease-in; -webkit-transition: all 0.1s ease-in; transition: all 0.1s ease-in; } .static-content .video .play:hover { background-size: 56px 56px; } .static-content img.radius { -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; } .static-content .features { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: center; flex-wrap: wrap; margin: 0px -1%; padding: 30px 0px; } .static-content .features .item { width: 31.33%; margin: 0px 1%; margin-bottom: 2%; padding: 30px 15px; border: solid 2px #E8F1EB; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; text-align: center; } .static-content .features .item .icon { margin-bottom: 15px; } .static-content .features .item .icon img { display: block; width: 56px; height: auto; margin: 0px auto; } .static-content .features .item .name { font-size: 14px; font-weight: 500; color: #164B3F; } .static-content .features .item .name span { display: block; font-family: 'El Messiri', sans-serif, Arial; font-size: 40px; font-weight: 700; line-height: 110%; } .static-content .activity-list { padding: 50px; background: #FAF8F2; font-size: 16px; font-weight: 500; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; } .static-content .activity-list h3 { font-size: 20px; font-weight: 500; color: #164B3F; margin-bottom: 30px; } .static-content .activity-list ul { list-style: none; margin: 0px; padding: 0px; } .static-content .activity-list ul li { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; padding: 15px 0px; border-top: solid 1px #EFEFEF; } .static-content .activity-list ul li:first-child { border-top: none; } .static-content .activity-list ul li img { display: block; width: 46px; height: auto; margin-right: 10px; } @media (max-width:1367px) { .static-content .features .item .name span { font-size: 36px; } } @media (max-width:1199px) { .static-content .features .item .name span { font-size: 32px; } .static-content .activity-list { padding: 30px; } } @media (max-width:991px) { .static-content .video { -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; } img.radius { -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; } .static-content .features .item { -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; } .static-content .features .item .name { font-size: 13px; } .static-content .features .item .name span { font-size: 28px; } .static-content .activity-list { -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; font-size: 15px; } .static-content .activity-list h3 { font-size: 18px; } .static-content .activity-list ul li img { width: 40px; } } @media (max-width:767px) { .static-content { font-size: 16px; } .static-content h1, .static-content h2, .static-content h3, .static-content h4, .static-content h5, .static-content h6 { font-size: 16px; } .static-content h1 { font-size: 24px; } .static-content h2 { font-size: 21px; } .static-content h3 { font-size: 18px; } .static-content h3 { font-size: 17px; } .static-content p.lead { font-size: 18px; } .static-content .features .item { width: 48%; } } @media (max-width:481px) { .static-content .features .item .name { font-size: 12px; } .static-content .features .item .name span { font-size: 24px; } .static-content .activity-list { font-size: 14px; } .static-content .activity-list h3 { font-size: 16px; } .static-content .activity-list ul li img { width: 36px; } } .corporate-title { margin-bottom: 30px; } .corporate-title p { font-size: 18px; color: #28745D; margin-bottom: 5px; } .corporate-title h1, .corporate-title h2, .corporate-title h3, .corporate-title h4, .corporate-title h5, .corporate-title h6 { font-family: 'El Messiri', sans-serif, Arial; font-size: 44px; font-weight: 700; color: #164B3F; margin: 0px; line-height: 110%; } @media (max-width:1367px) { .corporate-title h1, .corporate-title h2, .corporate-title h3, .corporate-title h4, .corporate-title h5, .corporate-title h6 { font-size: 40px; } } @media (max-width:1199px) { .corporate-title h1, .corporate-title h2, .corporate-title h3, .corporate-title h4, .corporate-title h5, .corporate-title h6 { font-size: 36px; } } @media (max-width:991px) { .corporate-title p { font-size: 17px; } .corporate-title h1, .corporate-title h2, .corporate-title h3, .corporate-title h4, .corporate-title h5, .corporate-title h6 { font-size: 32px; } } @media (max-width:767px) { .corporate-title p { font-size: 16px; } .corporate-title h1, .corporate-title h2, .corporate-title h3, .corporate-title h4, .corporate-title h5, .corporate-title h6 { font-size: 28px; } } .general-detail { margin-bottom: 50px; } .general-detail .content { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; margin-top: -180px; } .general-detail .content .left { width: 35%; padding-right: 50px; } .general-detail .content .right { width: 65%; padding-top: 180px; order: 2; } .general-detail .content .side-menu { width: 100%; padding: 50px; background: #FAF8F2; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; position: relative; z-index: 9; overflow: hidden; } .general-detail .content .side-menu::before { display: block; content: ""; width: 120px; height: 120px; background: #E8F1EB; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; position: absolute; left: -50px; top: -70px; z-index: 1; } .general-detail .content .side-menu::after { display: block; content: ""; width: 120px; height: 120px; background: #F1ECDD; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; position: absolute; right: -50px; bottom: -70px; z-index: 1; } .general-detail .content .side-menu h1, .general-detail .content .side-menu h2, .general-detail .content .side-menu h3, .general-detail .content .side-menu h4, .general-detail .content .side-menu h5, .general-detail .content .side-menu h6 { font-size: 24px; font-weight: 600; color: #164B3F; margin-bottom: 30px; } .general-detail .content .side-menu ul { list-style: none; margin: 0px; padding: 0px; } .general-detail .content .side-menu ul li { border-top: solid 1px #efefef; } .general-detail .content .side-menu ul li:first-child { border-top: none; } .general-detail .content .side-menu ul li a { display: block; height: auto; padding: 15px 0px; border: none; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; font-size: 16px; font-weight: 500; color: #263B35; text-decoration: none; position: relative; } .general-detail .content .side-menu ul li a:hover { color: #28745D; } .general-detail .content .side-menu ul li a::before { display: block; content: ""; width: 10px; height: 10px; background: url(../images/icon/menu-right.svg) no-repeat center; background-size: 10px 10px; position: absolute; left: -25px; top: 50%; -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); transform: translate(0, -50%); visibility: hidden; opacity: 0; filter: alpha(opacity=0); -moz-transition: all 0.2s ease-in; -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in; } .general-detail .content .side-menu ul li a:hover::before { left: -15px; visibility: visible; opacity: 1; filter: alpha(opacity=100); } .general-detail .content .side-menu ul li a.active { color: #28745D; } .general-detail .content .side-menu ul li a.active::before { left: -15px; visibility: visible; opacity: 1; filter: alpha(opacity=100); } .general-detail .content .side-menu ul li ul { border-top: solid 1px #efefef; } .general-detail .content .side-menu ul li ul li { padding-left: 15px; } @media (max-width:1199px) { .general-detail .content { display: block; margin-top: 0px; } .general-detail .content .left { width: auto; padding-right: 0px; } .general-detail .content .right { width: auto; padding-top: 0px; margin-bottom: 30px; } } @media (max-width:991px) { .general-detail .content .side-menu { padding: 50px 30px; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; } } @media (max-width:767px) { .general-detail .content .side-menu h1, .general-detail .content .side-menu h2, .general-detail .content .side-menu h3, .general-detail .content .side-menu h4, .general-detail .content .side-menu h5, .general-detail .content .side-menu h6 { font-size: 21px; margin-bottom: 15px; } } @media (max-width:481px) { .general-detail .content .side-menu h1, .general-detail .content .side-menu h2, .general-detail .content .side-menu h3, .general-detail .content .side-menu h4, .general-detail .content .side-menu h5, .general-detail .content .side-menu h6 { font-size: 18px; } .general-detail .content .side-menu ul li a { font-size: 15px; } } .presentation-catalog { margin-bottom: 50px; } .presentation-catalog .content { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; height: 150px; padding: 15px 50px; background: #E8F1EB; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; } .presentation-catalog .content .name { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; min-height: 46px; background: url(../images/icon/document.svg) no-repeat left center; background-size: 46px 46px; padding-left: 60px; margin-right: 10px; font-family: 'El Messiri', sans-serif, Arial; font-size: 26px; font-weight: 700; color: #164B3F; } .presentation-catalog .content .action { margin-left: auto; } .presentation-catalog .content .action a { display: -webkit-inline-box; display: -ms-inline-flexbox; display: -webkit-inline-flex; display: inline-flex; align-items: center; justify-content: center; height: 50px; padding: 5px 40px 5px 20px; background: #164B3F; font-size: 13px; font-weight: 600; color: #fff; text-decoration: none; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; -moz-transition: all 0.1s ease-in; -webkit-transition: all 0.1s ease-in; transition: all 0.1s ease-in; } .presentation-catalog .content .action a::before { display: block; content: ""; width: 50px; height: 50px; background: url(../images/icon/download.svg) no-repeat left center; background-size: 50px 50px; } .presentation-catalog .content .action a:hover { background: #263B35; } @media (max-width:1199px) { .presentation-catalog .content { height: 100px; padding: 15px 30px; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; } .presentation-catalog .content .name { min-height: 40px; background-size: 40px 40px; padding-left: 55px; font-size: 24px; } } @media (max-width:767px) { .presentation-catalog .content { display: block; height: auto; padding: 30px; } .presentation-catalog .content .name { min-height: 36px; background-size: 36px 36px; padding-left: 45px; margin-right: 0px; margin-bottom: 15px; font-size: 21px; } } @media (max-width:481px) { .presentation-catalog .content .name { font-size: 18px; } } .branch-list { margin-bottom: 50px; } .branch-list .item { padding: 50px; background: #FAF8F2; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; margin-bottom: 50px; } .branch-list .item:last-child { margin-bottom: 0px; } .branch-list .item .title { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-wrap: wrap; margin-bottom: 30px; } .branch-list .item .title h1, .branch-list .item .title h2, .branch-list .item .title h3, .branch-list .item .title h4, .branch-list .item .title h5, .branch-list .item .title h6 { font-family: 'Jost', sans-serif, Arial; font-size: 20px; font-weight: 500; color: #164B3F; margin-right: 10px; } .branch-list .item .title a { margin-left: auto; display: -webkit-inline-box; display: -ms-inline-flexbox; display: -webkit-inline-flex; display: inline-flex; align-items: center; height: 20px; padding-right: 30px; color: #164B3F; text-decoration: none; font-size: 13px; font-weight: 600; background: url(../images/icon/right-blue.svg) no-repeat right 5px center; -moz-transition: all 0.1s ease-in; -webkit-transition: all 0.1s ease-in; transition: all 0.1s ease-in; } .branch-list .item .title a:hover { background: url(../images/icon/right-blue.svg) no-repeat right center; } .branch-list .item .contact { font-size: 16px; font-weight: 500; } .branch-list .item .contact .info { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; margin-bottom: 15px; } .branch-list .item .contact .info:last-child { margin-bottom: 0px; } .branch-list .item .contact .info img { display: block; width: 46px; height: auto; margin-right: 10px; } @media (max-width:1199px) { .branch-list .item { padding: 30px; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; margin-bottom: 30px; } .branch-list .item:last-child { margin-bottom: 0px; } } @media (max-width:991px) { .branch-list .item .title h1, .branch-list .item .title h2, .branch-list .item .title h3, .branch-list .item .title h4, .branch-list .item .title h5, .branch-list .item .title h6 { font-size: 18px; } .branch-list .item .contact { font-size: 15px; } .branch-list .item .contact .info img { width: 40px; } } @media (max-width:481px) { .branch-list .item .title a { padding-right: 25px; font-size: 12px; } .branch-list .item .title h1, .branch-list .item .title h2, .branch-list .item .title h3, .branch-list .item .title h4, .branch-list .item .title h5, .branch-list .item .title h6 { font-size: 16px; } .branch-list .item .contact { font-size: 14px; } } .project-detail { margin-bottom: 50px; } .project-detail .content { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; margin-top: -180px; } .project-detail .content .left { width: 35%; padding-right: 50px; } .project-detail .content .right { width: 65%; padding-top: 180px; } .project-detail .content .donate-box { width: 100%; position: relative; z-index: 9; } .project-detail .content .donate-box .inner { width: 100%; padding: 50px 30px; background: #FAF8F2; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; position: relative; overflow: hidden; } .project-detail .content .donate-box .inner::before { display: block; content: ""; width: 120px; height: 120px; background: #E8F1EB; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; position: absolute; left: -50px; top: -70px; z-index: 1; } .project-detail .content .donate-box .inner::after { display: block; content: ""; width: 120px; height: 120px; background: #F1ECDD; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; position: absolute; right: -50px; bottom: -70px; z-index: 1; } .project-detail .content .donate-box .title { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; margin-bottom: 30px; } .project-detail .content .donate-box .title img { display: block; width: 50px; height: auto; margin-right: 10px; } .project-detail .content .donate-box .title h1, .project-detail .content .donate-box .title h2, .project-detail .content .donate-box .title h3, .project-detail .content .donate-box .title h4, .project-detail .content .donate-box .title h5, .project-detail .content .donate-box .title h6 { font-family: 'Jost', sans-serif, Arial; font-size: 16px; font-weight: 500; color: #164B3F; margin: 0px; } .project-detail .content .donate-box .financial { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; margin-bottom: 30px; } .project-detail .content .donate-box .financial p { font-size: 14px; margin-bottom: 0px; } .project-detail .content .donate-box .financial span { font-size: 16px; font-weight: 500; } .project-detail .content .donate-box .financial .total { margin-right: auto; flex: 1; } .project-detail .content .donate-box .financial .target { margin-left: auto; flex: 1; text-align: right; } .project-detail .content .donate-box .price-list { margin-bottom: 15px; } .project-detail .content .donate-box .price-list ul { list-style: none; margin: 0px; padding: 0px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-wrap: wrap; } .project-detail .content .donate-box .price-list ul li { margin-right: 10px; margin-bottom: 10px; } .project-detail .content .donate-box .price-list label.radio { display: block; min-height: 18px; cursor: pointer; position: relative; line-height: 120%; margin: 0px; } .project-detail .content .donate-box .price-list label.radio input[type="radio"] { display: none; visibility: hidden; } .project-detail .content .donate-box .price-list label.radio span { display: block; } .project-detail .content .donate-box .price-list label.radio span.name { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; height: 50px; padding: 0px 15px; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; background: #fff; font-family: 'El Messiri', sans-serif, Arial; font-size: 16px; font-weight: 700; color: #263B35; } .project-detail .content .donate-box .price-list label.radio input[type="radio"]:checked + span.name { background: #164B3F; color: #fff; } .project-detail .content .donate-box .donate { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; height: 50px; background: #fff; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; margin-bottom: 30px; } .project-detail .content .donate-box .donate .form-control, .project-detail .content .donate-box .donate .form-select { display: block; width: auto; height: 30px; padding: 0px; background-color: transparent; border: none; outline: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; font-size: 16px; font-weight: 700; color: #263B35; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; } .project-detail .content .donate-box .donate .form-control { min-width: 0px; width: 100px; padding: 0px 15px; border-right: solid 1px #F1ECDD; } .project-detail .content .donate-box .donate .form-select { padding: 0px 35px 0px 10px; } .project-detail .content .donate-box .donate .button { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; width: 110px; height: 50px; padding: 0px 5px; background: #164B3F; font-size: 13px; font-weight: 600; color: #fff; line-height: 100%; border: none; outline: none; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; -moz-transition: all 0.1s ease-in; -webkit-transition: all 0.1s ease-in; transition: all 0.1s ease-in; margin-left: auto; } .project-detail .content .donate-box .donate .button:hover { background: #263B35; } .project-detail .content .donate-box .donate .button::before { display: block; content: ""; width: 20px; height: 20px; background: url(../images/icon/donate-white.svg) no-repeat center center; background-size: 20px 20px; margin-right: 5px; } .project-detail .content .donate-box .links .item { padding: 15px 0px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; border-top: solid 1px #E7E4DF; } .project-detail .content .donate-box .links .item:first-child { padding-top: 0px; border-top: none; } .project-detail .content .donate-box .links .item:last-child { padding-bottom: 0px; } .project-detail .content .donate-box .links .item img { display: block; width: 40px; height: auto; margin-right: 10px; } .project-detail .content .donate-box .links .item .name { flex: 1; font-size: 14px; font-weight: 500; } .project-detail .content .donate-box .links .item .name p { margin: 0px; } .project-detail .content .donate-box .links .item .name a { display: -webkit-inline-box; display: -ms-inline-flexbox; display: -webkit-inline-flex; display: inline-flex; align-items: center; height: 20px; padding-right: 30px; color: #164B3F; text-decoration: none; background: url(../images/icon/right-blue.svg) no-repeat right 5px center; -moz-transition: all 0.1s ease-in; -webkit-transition: all 0.1s ease-in; transition: all 0.1s ease-in; } .project-detail .content .donate-box .links .item .name a:hover { background: url(../images/icon/right-blue.svg) no-repeat right center; } .project-detail .content .donate-box .percentage { height: 10px; position: absolute; left: 60px; right: 60px; bottom: -5px; } .project-detail .content .donate-box .percentage .bar { height: 10px; background: #E8F1EB; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; position: absolute; left: 0px; top: 0px; } .project-detail .content .donate-box .percentage .bar::after { display: block; content: ""; width: 16px; height: 20px; background: url(../images/icon/drop-turquoise.svg) no-repeat center center; position: absolute; right: -8px; top: -5px; } .radio-list { margin-bottom: 15px; } .radio-list ul { list-style: none; margin: 0px; padding: 0px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-wrap: wrap; } .radio-list ul li { margin-right: 10px; margin-bottom: 10px; } .radio-list label.radio { display: block; min-height: 18px; cursor: pointer; position: relative; line-height: 120%; margin: 0px; } .radio-list label.radio input[type="radio"] { display: none; visibility: hidden; } .radio-list label.radio span { display: block; } .radio-list label.radio span.name { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; height: 50px; padding: 0px 15px; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; background: #fff; font-family: 'El Messiri', sans-serif, Arial; font-size: 16px; font-weight: 700; color: #263B35; } .radio-list label.radio input[type="radio"]:checked + span.name { background: #164B3F; color: #fff; } @media (max-width:1367px) { .project-detail .content .donate-box .financial p { font-size: 13px; } .project-detail .content .donate-box .financial span { font-size: 15px; } } @media (max-width:1199px) { .project-detail .content { display: block; margin-top: 0px; } .project-detail .content .left { width: auto; padding-right: 0px; margin-bottom: 30px; } .project-detail .content .right { width: auto; padding-top: 0px; } .project-detail .content .donate-box .financial p { font-size: 14px; } .project-detail .content .donate-box .financial span { font-size: 16px; } } @media (max-width:991px) { .project-detail .content .donate-box .percentage { left: 30px; right: 30px; } } @media (max-width:481px) { .project-detail .content .donate-box .financial p { font-size: 12px; } .project-detail .content .donate-box .financial span { font-size: 14px; } } .container.faq { margin-bottom: 50px; } .faq-content { padding: 50px; background: #FAF8F2; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; } .faq-content h1, .faq-content h2, .faq-content h3, .faq-content h4, .faq-content h5, .faq-content h6 { font-size: 30px; font-weight: 700; color: #164B3F; margin-bottom: 30px; } .faq-content .acr-item { background: #fff; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; margin-bottom: 30px; } .faq-content .acr-item:last-child { margin-bottom: 0px; } .faq-content .acr-item .acr-title { padding: 30px 60px 30px 30px; cursor: pointer; font-size: 20px; font-weight: 500; color: #263B35; position: relative; } .faq-content .acr-item .acr-title::after { display: block; content: ""; width: 20px; height: 20px; background-image: url(../images/icon/down-dark.svg); background-repeat: no-repeat; background-position: center center; background-size: 18px auto; position: absolute; right: 30px; top: 50%; -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); transform: translate(0, -50%); } .faq-content .acr-item .acr-title.active { color: #28745D; } .faq-content .acr-item .acr-title.active::before { display: block; content: ""; width: 6px; height: 6px; background: #28745D; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; position: absolute; left: 15px; top: 40px; } .faq-content .acr-item .acr-title.active::after { background-image: url(../images/icon/up-turquoise.svg); } .faq-content .acr-item .acr-content { padding: 0px 30px 30px 30px; font-size: 18px; position: relative; overflow: hidden; display: none; } .faq-content .acr-item .acr-content::after { display: block; content: ""; width: 120px; height: 120px; background: #E8F1EB; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; position: absolute; right: -60px; bottom: -80px; z-index: 1; } .faq-content .acr-item .acr-content p { margin-bottom: 15px; } .faq-content .acr-item .acr-content p:last-child { margin-bottom: 0px; } @media (max-width:991px) { .faq-content h1, .faq-content h2, .faq-content h3, .faq-content h4, .faq-content h5, .faq-content h6 { font-size: 28px; } .faq-content, .faq-content .acr-item { -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; } .faq-content .acr-item .acr-title { font-size: 18px; } .faq-content .acr-item .acr-content { font-size: 17px; } } @media (max-width:767px) { .faq-content { padding: 30px; } .faq-content h1, .faq-content h2, .faq-content h3, .faq-content h4, .faq-content h5, .faq-content h6 { font-size: 24px; } .faq-content .acr-item .acr-title { padding: 30px 50px 30px 30px; } .faq-content .acr-item .acr-title::after { width: 16px; height: 16px; background-size: 12px auto; right: 20px; top: 50%; } .faq-content .acr-item .acr-content { font-size: 16px; } } @media (max-width:481px) { .faq-content h1, .faq-content h2, .faq-content h3, .faq-content h4, .faq-content h5, .faq-content h6 { font-size: 21px; } .faq-content .acr-item { margin-bottom: 15px; } .faq-content .acr-item:last-child { margin-bottom: 0px; } .faq-content .acr-item .acr-title { font-size: 16px; } .faq-content .acr-item .acr-content { font-size: 15px; } } .other-projects { margin-bottom: 50px; } .other-projects .title { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: flex-end; margin-bottom: 30px; padding-right: 100px; } .other-projects .title h1, .other-projects .title h2, .other-projects .title h3, .other-projects .title h4, .other-projects .title h5, .other-projects .title h6 { font-size: 30px; font-weight: 700; color: #164B3F; line-height: 95%; margin: 0px; margin-right: 15px; } .other-projects .title a { display: -webkit-inline-box; display: -ms-inline-flexbox; display: -webkit-inline-flex; display: inline-flex; align-items: center; height: 20px; padding-right: 30px; color: #164B3F; text-decoration: none; font-size: 13px; font-weight: 600; background: url(../images/icon/right-blue.svg) no-repeat right 5px center; -moz-transition: all 0.1s ease-in; -webkit-transition: all 0.1s ease-in; transition: all 0.1s ease-in; margin-left: auto; } .other-projects .title a:hover { background: url(../images/icon/right-blue.svg) no-repeat right center; } .other-projects .list { position: relative; padding-right: 100px; } .other-projects .slider-navigation { position: absolute; right: 0px; top: 50%; -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); transform: translate(0, -50%); z-index: 2; } .other-projects .other-projects-slider { margin: 0px -15px; display: none; } .other-projects .other-projects-slider.slick-initialized { display: block; } .other-projects .other-projects-slider .slick-track { display: flex !important; } .other-projects .other-projects-slider .slick-slide { height: inherit !important; } .other-projects .other-projects-slider .project-item { margin: 0px 15px; } .other-projects .other-projects-slider .slick-dots { position: relative; bottom: auto; padding: 15px 0px; } .other-projects .other-projects-slider .slick-dots li { width: 12px; height: 12px; margin: 0 6px; } .other-projects .other-projects-slider .slick-dots li button { width: 12px; height: 12px; padding: 0px; border: none; background: #DCEADD; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .other-projects .other-projects-slider .slick-dots li button::before { display: none; } .other-projects .other-projects-slider .slick-dots li.slick-active button { background: #164B3F; } @media (max-width:1199px) { .other-projects .title { min-height: 40px; padding-right: 0px; margin-bottom: 30px; } .other-projects .title h1, .other-projects .title h2, .other-projects .title h3, .other-projects .title h4, .other-projects .title h5, .other-projects .title h6 { font-size: 36px; margin-right: 0px; } .other-projects .title a { display: none; } .other-projects .list { padding-right: 0px; } .other-projects .slider-navigation { position: relative; right: auto; top: auto; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); transform: translate(0, 0); } .other-projects .slider-navigation a { width: 40px; height: 40px; text-indent: -9999px; background-color: #E8F1EB; background-position: center center; background-repeat: no-repeat; background-size: 16px auto; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; position: absolute; } .other-projects .slider-navigation a.next { background-image: url(../images/icon/next-blue.svg); margin-bottom: 0px; right: 0px; top: -60px; } .other-projects .slider-navigation a.prev { background-image: url(../images/icon/prev-blue.svg); right: 50px; top: -60px; } .other-projects .slider-navigation a.next::after, .other-projects .slider-navigation a.prev::before { display: none; } } @media (max-width:991px) { .other-projects .title h1, .other-projects .title h2, .other-projects .title h3, .other-projects .title h4, .other-projects .title h5, .other-projects .title h6 { font-size: 32px; } } @media (max-width:767px) { .other-projects { width: 100%; max-width: 100%; padding: 0px; overflow: hidden; } .other-projects .title { padding: 0px 30px; } .other-projects .title h1, .other-projects .title h2, .other-projects .title h3, .other-projects .title h4, .other-projects .title h5, .other-projects .title h6 { font-size: 28px; } .other-projects .other-projects-slider { margin: 0px -10px; } .other-projects .other-projects-slider .slick-list { padding: 0px 60px !important; overflow: visible; } .other-projects .other-projects-slider .project-item { margin: 0px 10px; } .other-projects .slider-navigation a.next { right: 30px; } .other-projects .slider-navigation a.prev { right: 80px; } } @media (max-width:481px) { .other-projects .title h1, .other-projects .title h2, .other-projects .title h3, .other-projects .title h4, .other-projects .title h5, .other-projects .title h6 { font-size: 24px; } .other-projects .other-projects-slider .slick-list { padding: 0px 30px !important; overflow: visible; } } .donate-popup { width: 450px; padding: 0px; background: transparent; overflow: visible; display: none; } .donate-popup .content { width: 100%; padding: 50px 30px; background: #fff; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; text-align: center; position: relative; overflow: hidden; } .donate-popup .content::after { display: block; content: ""; width: 120px; height: 120px; background: #E8F1EB; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; position: absolute; right: -40px; bottom: -70px; z-index: 1; } .donate-popup .fancybox-close-small { display: none; } .donate-popup .close { width: 50px; height: 50px; background: url(../images/icon/close.svg) no-repeat center #28745D; background-size: 50px 50px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; position: absolute; left: -15px; top: -15px; z-index: 2; cursor: pointer; } .donate-popup .icon { margin-bottom: 30px; } .donate-popup .icon img { display: block; width: 60px; height: auto; margin: 0px auto; } .donate-popup .title { font-size: 20px; font-weight: 500; color: #164B3F; margin-bottom: 20px; } .donate-popup .text { font-size: 16px; margin-bottom: 30px; } .donate-popup .action { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: center; } .donate-popup .action a { display: -webkit-inline-box; display: -ms-inline-flexbox; display: -webkit-inline-flex; display: inline-flex; align-items: center; justify-content: center; width: 180px; height: 50px; padding: 0px 5px; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; background: #164B3F; font-size: 13px; font-weight: 600; color: #fff; text-decoration: none; -moz-transition: all 0.1s ease-in; -webkit-transition: all 0.1s ease-in; transition: all 0.1s ease-in; margin: 10px; line-height: 110%; } .donate-popup .action a.back { background: #28745D; } .donate-popup .action a.arrow::after { display: block; content: ""; width: 14px; height: 12px; background: url(../images/icon/right-white.svg) no-repeat center; background-size: 14px 12px; margin-left: 10px; } .donate-popup .action a.cancel { background: #676767; } .donate-popup .action a:hover { opacity: 0.9; filter: alpha(opacity=90); } @media (max-width:767px) { .donate-popup { width: 90%; } .donate-popup .content { padding: 40px 20px; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; } } @media (max-width:481px) { .donate-popup .content::after { width: 100px; height: 100px; } .donate-popup .close { width: 40px; height: 40px; background: url(../images/icon/close.svg) no-repeat center #28745D; background-size: 40px 40px; left: -10px; top: -10px; } .donate-popup .title { font-size: 18px; margin-bottom: 15px; } .donate-popup .text { font-size: 15px; margin-bottom: 20px; } .donate-popup .action a { margin: 5px; } } .gallery-item { position: relative; } .gallery-item::before { display: block; content: ""; background: #FAF8F2; position: absolute; left: 10px; right: 10px; top: 50px; bottom: 0px; z-index: 1; -webkit-border-bottom-left-radius: 50px; -moz-border-radius-bottomleft: 50px; border-bottom-left-radius: 50px; -webkit-border-bottom-right-radius: 50px; -moz-border-radius-bottomright: 50px; border-bottom-right-radius: 50px; } .gallery-item .photo { -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; position: relative; z-index: 2; overflow: hidden; background: #263B35; } .gallery-item .photo a { display: block; } .gallery-item .photo a img { display: block; width: 100%; height: auto; -moz-transition: all 0.2s ease-in; -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in; } .gallery-item .photo a:hover img { opacity: 0.75; filter: alpha(opacity=75); } .gallery-item .info { padding: 30px 40px; position: relative; z-index: 2; } .gallery-item .info a { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; font-size: 18px; font-weight: 500; color: #164B3F; line-height: 110%; text-decoration: none; } .gallery-item .info a img { display: block; width: 46px; height: auto; margin-right: 10px; } .gallery-item-category .photo a::before { display: block; content: ""; width: 50px; height: 50px; background: url(../images/icon/right-blue.svg) no-repeat center center #E8F1EB; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; position: absolute; left: 50%; top: 50%; margin-left: -25px; margin-top: -25px; z-index: 2; -moz-transition: all 0.1s ease-in; -webkit-transition: all 0.1s ease-in; transition: all 0.1s ease-in; } .gallery-item-category .photo a:hover::before { background: url(../images/icon/right-white.svg) no-repeat center center #164B3F; } .gallery-item-photo .photo a::before { display: block; content: ""; width: 50px; height: 50px; background: url(../images/icon/zoom-blue.svg) no-repeat center center #E8F1EB; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; position: absolute; left: 50%; top: 50%; margin-left: -25px; margin-top: -25px; z-index: 2; -moz-transition: all 0.1s ease-in; -webkit-transition: all 0.1s ease-in; transition: all 0.1s ease-in; opacity: 0; filter: alpha(opacity=0); visibility: visible; } .gallery-item-photo .photo a:hover::before { opacity: 1; filter: alpha(opacity=100); visibility: visible; } .gallery-item-video .photo a::before { display: block; content: ""; width: 50px; height: 50px; background: url(../images/icon/play-blue.svg) no-repeat center center #E8F1EB; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; position: absolute; left: 50%; top: 50%; margin-left: -25px; margin-top: -25px; z-index: 2; -moz-transition: all 0.1s ease-in; -webkit-transition: all 0.1s ease-in; transition: all 0.1s ease-in; } .gallery-item-video .photo a:hover::before { background: url(../images/icon/play-white.svg) no-repeat center center #164B3F; } @media (max-width:991px) { .gallery-item::before { -webkit-border-bottom-left-radius: 25px; -moz-border-radius-bottomleft: 25px; border-bottom-left-radius: 25px; -webkit-border-bottom-right-radius: 25px; -moz-border-radius-bottomright: 25px; border-bottom-right-radius: 25px; } .gallery-item .photo { -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; } .gallery-item .info a { font-size: 16px; } .gallery-item .info a img { width: 40px; } } @media (max-width:767px) { .gallery-item .info { padding: 15px 30px; } .gallery-item .info a { font-size: 15px; } .gallery-item .info a img { width: 36px; } .gallery-item-category .photo a::before, .gallery-item-photo .photo a::before, .gallery-item-video .photo a::before { width: 40px; height: 40px; } } @media (max-width:481px) { .gallery-item .info a { font-size: 14px; } .gallery-item .info a img { width: 32px; } } .gallery-list .item { margin-bottom: 30px; } .gallery-list .gallery-item { height: 100%; } .news-list .item { margin-bottom: 30px; } .news-list .news-item { height: 100%; } .news-title { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; margin-bottom: 30px; } .news-title h1, .news-title h2, .news-title h3, .news-title h4, .news-title h5, .news-title h6 { font-size: 30px; font-weight: 700; color: #164B3F; margin: 0px; margin-right: 10px; } .news-title .date { display: -webkit-inline-box; display: -ms-inline-flexbox; display: -webkit-inline-flex; display: inline-flex; align-items: center; color: #28745D; border: solid 1px #E8F1EB; padding: 10px 15px; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; margin-left: auto; } .news-title .date .day { font-family: 'El Messiri', sans-serif, Arial; font-weight: 700; font-size: 32px; line-height: 95%; margin-right: 5px; } .news-title .date .other { font-size: 12px; font-weight: 500; line-height: 110%; } @media (max-width:1199px) { .news-title h1, .news-title h2, .news-title h3, .news-title h4, .news-title h5, .news-title h6 { font-size: 28px; } } @media (max-width:767px) { .news-title h1, .news-title h2, .news-title h3, .news-title h4, .news-title h5, .news-title h6 { font-size: 24px; } .news-title .date { padding: 10px; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; } .news-title .date .day { font-size: 28px; } .news-title .date .other { font-size: 11px; } } @media (max-width:481px) { .news-title h1, .news-title h2, .news-title h3, .news-title h4, .news-title h5, .news-title h6 { font-size: 21px; } .news-title .date .day { font-size: 24px; } .news-title .date .other { font-size: 10px; } } .donor-content { padding: 50px; background: #FAF8F2; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; } .donor-content .title { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; flex-wrap: wrap; margin-bottom: 30px; } .donor-content .title h1, .donor-content .title h2, .donor-content .title h3, .donor-content .title h4, .donor-content .title h5, .donor-content .title h6 { display: -webkit-inline-box; display: -ms-inline-flexbox; display: -webkit-inline-flex; display: inline-flex; align-items: center; min-height: 46px; background: url(../images/icon/yardim.svg) no-repeat left center; padding-left: 60px; margin: 0px; margin-right: 10px; font-family: 'Jost', sans-serif, Arial; font-size: 20px; font-weight: 500; color: #164B3F; } .donor-content .title .search { margin-left: auto; position: relative; } .donor-content .title .search::after { display: block; content: ""; width: 20px; height: 20px; background: url(../images/icon/search.svg) no-repeat center center; position: absolute; right: 20px; top: 50%; margin-top: -10px; } .donor-content .title .search .form-control { width: 260px; height: 50px; padding: 0px 50px 0px 20px; background: #fff; outline: none; border: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; font-size: 16px; color: #263B35; } .donor-content .list { max-height: 400px; overflow-y: auto; font-size: 16px; font-weight: 500; } .donor-content .list ol { list-style-position: inside; margin: 0px; padding: 0px; } .donor-content .list ol li { padding: 15px 0px; border-top: solid 1px #EFEFEF; } .donor-content .list ol li:first-child { border-top: none; } .donor-content .list ol li::marker { font-family: 'El Messiri', sans-serif, Arial; font-size: 20px; font-weight: 700; color: #164B3F; } .donor-content .no-result-message { display: none; } @media (max-width:991px) { .donor-content { padding: 30px; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; } .donor-content .list { max-height: 360px; font-size: 15px; } .donor-content .list ol li::marker { font-size: 18px; } } @media (max-width:767px) { .donor-content .title { display: block; } .donor-content .title h1, .donor-content .title h2, .donor-content .title h3, .donor-content .title h4, .donor-content .title h5, .donor-content .title h6 { font-size: 18px; margin-right: 0px; margin-bottom: 10px; } .donor-content .title .search .form-control { width: 100%; } .donor-content .list { max-height: 300px; } } @media (max-width:481px) { .donor-content .title h1, .donor-content .title h2, .donor-content .title h3, .donor-content .title h4, .donor-content .title h5, .donor-content .title h6 { font-size: 16px; } .donor-content .list { max-height: 240px; font-size: 14px; } .donor-content .list ol li::marker { font-size: 16px; } } .news-share { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; flex-wrap: wrap; padding: 30px; background: #FAF8F2; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; } .news-share .social { margin: 10px 0px; margin-right: 10px; } .news-share .social ul { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; flex-wrap: wrap; list-style: none; margin: 0px; padding: 0px; } .news-share .social ul li { margin: 2px 15px 2px 0px; font-size: 16px; font-weight: 500; color: #164B3F; } .news-share .social ul li:last-child { margin-right: 0px; } .news-share .social ul li a { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; background: #205E4D; color: #fff; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; text-decoration: none; } .news-share .social ul li a:hover { background: #263B35; color: #fff; } .news-share .back { margin-left: auto; } .news-share .back a { display: -webkit-inline-box; display: -ms-inline-flexbox; display: -webkit-inline-flex; display: inline-flex; align-items: center; height: 20px; padding-left: 30px; font-size: 16px; font-weight: 500; color: #164B3F; text-decoration: none; background: url(../images/icon/prev-blue.svg) no-repeat left 5px center; -moz-transition: all 0.1s ease-in; -webkit-transition: all 0.1s ease-in; transition: all 0.1s ease-in; } .news-share .back a:hover { background: url(../images/icon/prev-blue.svg) no-repeat left center; } @media (max-width:991px) { .news-share { -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; } } @media (max-width:767px) { .news-share .social ul li { margin: 2px 10px 2px 0px; font-size: 15px; } .news-share .social ul li a { width: 36px; height: 36px; } } @media (max-width:481px) { .news-share .social ul li { font-size: 14px; } .news-share .social ul li a { width: 30px; height: 30px; } .news-share .back a { font-size: 15px; } } .pagination { padding: 15px 0px; } .pagination ul { width: 100%; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: center; flex-wrap: wrap; list-style: none; margin: 0px; padding: 0px; } .pagination ul li { margin: 3px; } .pagination ul li a { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; font-size: 14px; font-weight: 500; color: #164B3F; text-decoration: none; } .pagination ul li a:hover { color: #263B35; } .pagination ul li a.active { background: #164B3F; color: #fff; } .pagination ul li a.prev, .pagination ul li a.next { width: auto; } .pagination ul li a.prev::before, .pagination ul li a.next::after { display: block; content: ""; width: 46px; height: 46px; background-color: #E8F1EB; background-repeat: no-repeat; background-position: center center; background-size: 16px auto; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .pagination ul li a.prev::before { background-image: url(../images/icon/prev-blue.svg); margin-right: 10px; } .pagination ul li a.next::after { background-image: url(../images/icon/next-blue.svg); margin-left: 10px; } @media (max-width:991px) { .pagination ul li a { width: 40px; height: 40px; font-size: 13px; } .pagination ul li a.prev::before, .pagination ul li a.next::after { width: 40px; height: 40px; background-size: 12px auto; } .pagination ul li a.prev::before { margin-right: 5px; } .pagination ul li a.next::after { margin-left: 5px; } } @media (max-width:481px) { .pagination ul li a { width: 32px; height: 32px; font-size: 12px; } .pagination ul li a.prev::before, .pagination ul li a.next::after { width: 32px; height: 32px; } } .tooltip .tooltip-inner { padding: 10px; background: #164B3F; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; } .bs-tooltip-top .tooltip-arrow::before { border-top-color: #164B3F; } .bs-tooltip-end .tooltip-arrow::before { border-right-color: #164B3F; } .bs-tooltip-bottom .tooltip-arrow::before { border-bottom-color: #164B3F; } .bs-tooltip-start .tooltip-arrow::before { border-left-color: #164B3F; } @media (max-width:1199px) { .tooltip .tooltip-inner { font-size: 13px; } } @media (max-width:767px) { .tooltip .tooltip-inner { padding: 8px; font-size: 12px; } } @media (max-width:481px) { .tooltip .tooltip-inner { padding: 5px; font-size: 11px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; } } .bank-account-list .acr-item { background: #FAF8F2; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; margin-bottom: 30px; } .bank-account-list .acr-item .acr-title { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: space-between; padding: 50px 60px 50px 30px; cursor: pointer; font-size: 15px; font-weight: 500; color: #263B35; position: relative; } .bank-account-list .acr-item .acr-title::after { display: block; content: ""; width: 20px; height: 20px; background-image: url(../images/icon/down-dark.svg); background-repeat: no-repeat; background-position: center center; background-size: 18px auto; position: absolute; right: 30px; top: 50%; -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); transform: translate(0, -50%); } .bank-account-list .acr-item .acr-title.active::after { background-image: url(../images/icon/up-turquoise.svg); } .bank-account-list .acr-item .acr-title span { display: block; color: #164B3F; } .bank-account-list .acr-item .acr-title .logo { padding-right: 15px; } .bank-account-list .acr-item .acr-title .logo img { display: block; width: 180px; height: auto; } .bank-account-list .acr-item .acr-title .branch { padding-right: 15px; } .bank-account-list .acr-item .acr-title .swift { padding-right: 15px; } .bank-account-list .acr-item .acr-title .name { padding-right: 30px; } .bank-account-list .acr-content { padding: 15px 30px 30px 30px; font-size: 15px; font-weight: 500; position: relative; display: none; } .bank-account-list .acr-content .account-head { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; padding: 15px; color: #164B3F; } .bank-account-list .acr-content .account-head .type { width: 20%; } .bank-account-list .acr-content .account-head .number { width: 35%; } .bank-account-list .acr-content .account-head .iban { width: 45%; } .bank-account-list .acr-content .account-body .item { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; padding: 30px 15px; background: #fff; border: solid 2px #fff; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; margin-bottom: 15px; position: relative; } .bank-account-list .acr-content .account-body .item:hover { border: solid 2px #164B3F; } .bank-account-list .acr-content .account-body .item:last-child { margin-bottom: 0px; } .bank-account-list .acr-content .account-body .type { width: 20%; padding: 0px 15px; } .bank-account-list .acr-content .account-body .number { width: 35%; } .bank-account-list .acr-content .account-body .iban { width: 45%; } .bank-account-list .acr-content .account-body .copy { display: block; width: 36px; height: 36px; background: url(../images/icon/copy.svg) no-repeat center center; background-size: 36px 36px; position: absolute; right: 15px; top: 50%; -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); transform: translate(0, -50%); cursor: pointer; } @media (max-width:1367px) { .bank-account-list .acr-item .acr-title .logo img { width: 160px; } } @media (max-width:1199px) { .bank-account-list .acr-item .acr-title { padding: 30px 60px 30px 30px; font-size: 14px; } .bank-account-list .acr-item .acr-title .logo { padding-right: 10px; } .bank-account-list .acr-item .acr-title .logo img { width: 120px; } .bank-account-list .acr-item .acr-title .branch { padding-right: 10px; } .bank-account-list .acr-item .acr-title .swift { padding-right: 10px; } .bank-account-list .acr-item .acr-title .name { padding-right: 20px; } .bank-account-list .acr-content { font-size: 14px; } } @media (max-width:991px) { .bank-account-list .acr-item { -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; } .bank-account-list .acr-item .acr-title { flex-wrap: wrap; justify-content: flex-start; } .bank-account-list .acr-item .acr-title::after { top: 30px; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); transform: translate(0, 0); } .bank-account-list .acr-item .acr-title .logo { padding-right: 0px; margin-bottom: 10px; } .bank-account-list .acr-item .acr-title .logo img { width: 160px; } .bank-account-list .acr-item .acr-title .branch { width: 100%; padding-right: 0px; } .bank-account-list .acr-item .acr-title .swift { width: 100%; padding-right: 0px; } .bank-account-list .acr-item .acr-title .name { width: 100%; padding-right: 0px; } .bank-account-list .acr-content .account-head { display: none; } .bank-account-list .acr-content .account-body .item { display: block; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; padding-right: 50px; } .bank-account-list .acr-content .account-body .item div::before { content: attr(data-head); color: #164B3F; margin-right: 5px; } .bank-account-list .acr-content .account-body .type { width: auto; padding: 0px; } .bank-account-list .acr-content .account-body .number { width: auto; } .bank-account-list .acr-content .account-body .iban { width: auto; } .bank-account-list .acr-content .account-body .copy { top: 15px; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); transform: translate(0, 0); } .bank-account-list .acr-content .account-body .copy::before { display: none; } } @media (max-width:481px) { .bank-account-list .acr-item .acr-title .logo img { width: 120px; } } .currency-info { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: space-between; padding: 30px; border: solid 2px #E8F1EB; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; margin-bottom: 50px; } .currency-info .title { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; height: 50px; font-size: 16px; font-weight: 500; color: #164B3F; background: url(../images/icon/currency.svg) no-repeat left center; padding-left: 60px; margin-right: 15px; } .currency-info .list { margin-right: 15px; } .currency-info .list ul { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-wrap: wrap; list-style: none; margin: 0px; padding: 0px; } .currency-info .list ul li { font-size: 16px; font-weight: 500; margin: 0px 20px; } .currency-info .list ul li span { display: block; color: #164B3F; } .currency-info .update { font-size: 13px; } @media (max-width:1367px) { .currency-info .list ul li { font-size: 15px; margin: 0px 15px; } } @media (max-width:1199px) { .currency-info { display: block; } .currency-info .title { margin-right: 0px; margin-bottom: 15px; } .currency-info .list { margin-right: 0px; margin-bottom: 15px; } .currency-info .list ul li { margin: 0px 30px 15px 0px; } } .calculator-content { padding: 50px; background: #FAF8F2; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; } .calculator-content h1, .calculator-content h2, .calculator-content h3, .calculator-content h4, .calculator-content h5, .calculator-content h6 { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; font-family: 'Jost', sans-serif, Arial; font-size: 16px; font-weight: 500; color: #164B3F; margin-bottom: 30px; } .calculator-content h2::before { display: block; content: ""; width: 40px; height: 40px; background: url(../images/icon/calculator.svg) no-repeat center center; background-size: 40px 40px; margin-right: 10px; } .calculator-content .type { margin-bottom: 30px; } .calculator-content .type p { font-size: 20px; font-weight: 500; color: #164B3F; margin-bottom: 30px; } .calculator-content .type ul { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-wrap: wrap; list-style: none; margin: 0px; padding: 0px; } .calculator-content .type ul li { margin-right: 15px; margin-bottom: 15px; } .calculator-content .type ul li label.radio { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; padding: 15px 30px; cursor: pointer; position: relative; line-height: 120%; margin: 0px; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; position: relative; overflow: hidden; } .calculator-content .type ul li label.radio input[type="radio"] { display: none; visibility: hidden; } .calculator-content .type ul li label.radio span { display: block; } .calculator-content .type ul li label.radio span.bg { width: 100%; height: 100%; background: #fff; position: absolute; left: 0px; top: 0px; z-index: 1; } .calculator-content .type ul li label.radio span.control { display: block; width: 20px; height: 20px; background: #FAF8F2; border: none; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; margin-right: 10px; position: relative; z-index: 2; } .calculator-content .type ul li label.radio span.control::after { display: block; content: ""; width: 14px; height: 14px; background: #164B3F; border: solid 2px #fff; position: absolute; left: 3px; top: 3px; opacity: 0; filter: alpha(opacity=0); -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .calculator-content .type ul li label.radio span.name { font-size: 14px; font-weight: 500; color: #263B35; position: relative; z-index: 2; } .calculator-content .type ul li label.radio input[type="radio"]:checked + span.bg { background: #E8F1EB; } .calculator-content .type ul li label.radio input[type="radio"]:checked ~ span.control { background: #164B3F; } .calculator-content .type ul li label.radio input[type="radio"]:checked ~ span.control::after { opacity: 1; filter: alpha(opacity=100); } .calculator-content .form-content .item { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; padding: 30px; background: #fff; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; margin-bottom: 15px; } .calculator-content .form-content .item .label { width: 45%; font-size: 16px; font-weight: 500; } .calculator-content .form-content .item .input { width: 50%; height: 50px; padding: 0px 15px; margin-left: auto; background: #FAF8F2; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; } .calculator-content .form-content .item .input.input-price { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .calculator-content .form-content .item .input .form-control { width: 100%; height: 50px; padding: 0px 10px; background: transparent; outline: none; border: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; font-family: 'El Messiri', sans-serif, Arial; font-size: 16px; font-weight: 700; color: #263B35; } .calculator-content .form-content .item .input.input-price .form-control { width: 50%; } .calculator-content .form-content .item .input .form-select { width: 100%; height: 50px; padding: 0px 10px; background-color: transparent; outline: none; border: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; font-size: 14px; color: #263B35; } .calculator-content .form-content .item .input.input-price .form-select { width: 50%; } .calculator-content .form-content .info { padding: 15px; font-size: 14px; font-weight: 500; margin-bottom: 30px; } .calculator-content .form-content .action { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-wrap: wrap; justify-content: flex-end; } .calculator-content .form-content .action .button { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; height: 50px; cursor: pointer; outline: none; border: none; font-size: 13px; font-weight: 600; -moz-transition: all 0.1s ease-in; -webkit-transition: all 0.1s ease-in; transition: all 0.1s ease-in; } .calculator-content .form-content .action .button:hover { opacity: 0.85; filter: alpha(opacity=85); } .calculator-content .form-content .action .button.clear { padding: 0px 30px; background: transparent; color: #E27373; } .calculator-content .form-content .action .button.submit { width: 260px; padding: 0px 15px; background: #E8F1EB; color: #164B3F; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; } .calculator-content .form-content .action .button.clear::before { display: block; content: ""; width: 12px; height: 12px; background: url(../images/icon/clear.svg) no-repeat center center; background-size: 12px 12px; margin-right: 10px; } .calculator-content .form-content .action .button.submit::after { display: block; content: ""; width: 14px; height: 12px; background: url(../images/icon/right-blue.svg) no-repeat center center; background-size: 14px 12px; margin-left: 10px; } .calculator-content .form-content .summary { padding: 30px; background: #fff; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; } .calculator-content .form-content .summary h1, .calculator-content .form-content .summary h2, .calculator-content .form-content .summary h3, .calculator-content .form-content .summary h4, .calculator-content .form-content .summary h5, .calculator-content .form-content .summary h6 { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; font-family: 'Jost', sans-serif, Arial; font-size: 16px; font-weight: 500; color: #164B3F; margin-bottom: 20px; padding-bottom: 20px; border-bottom: solid 1px #EFEFEF; } .calculator-content .form-content .summary h1::before, .calculator-content .form-content .summary h2::before, .calculator-content .form-content .summary h3::before, .calculator-content .form-content .summary h4::before, .calculator-content .form-content .summary h5::before, .calculator-content .form-content .summary h6::before { display: block; content: ""; width: 40px; height: 40px; background: url(../images/icon/zekat.svg) no-repeat center center; background-size: 40px 40px; margin-right: 10px; } .calculator-content .form-content .summary .asset { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; font-size: 16px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: solid 1px #EFEFEF; } .calculator-content .form-content .summary .asset .name { font-weight: 500; } .calculator-content .form-content .summary .asset .value { font-family: 'El Messiri', sans-serif, Arial; font-weight: 700; margin-left: auto; } .calculator-content .form-content .summary .total { font-size: 16px; font-weight: 500; color: #164B3F; } .calculator-content .form-content .summary .total span { display: block; padding-top: 5px; font-family: 'El Messiri', sans-serif, Arial; font-size: 26px; font-weight: 700; color: #263B35; } .bagis-list-content { } .bagis-list-content h1, .calculator-content h2, .calculator-content h3, .calculator-content h4, .calculator-content h5, .calculator-content h6 { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; font-family: 'Jost', sans-serif, Arial; font-size: 16px; font-weight: 500; color: #164B3F; margin-bottom: 30px; } .bagis-list-content h2::before { display: block; content: ""; width: 40px; height: 40px; background: url(../images/icon/calculator.svg) no-repeat center center; background-size: 40px 40px; margin-right: 10px; } .bagis-list-content .type { margin-bottom: 30px; } .bagis-list-content .type p { font-size: 20px; font-weight: 500; color: #164B3F; margin-bottom: 30px; } .bagis-list-content .type ul { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-wrap: wrap; list-style: none; margin: 0px; padding: 0px; } .bagis-list-content .type ul li { margin-right: 15px; margin-bottom: 15px; } .bagis-list-content .type ul li label.radio { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; padding: 15px 30px; cursor: pointer; position: relative; line-height: 120%; margin: 0px; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; position: relative; overflow: hidden; } .bagis-list-content .type ul li label.radio input[type="radio"] { display: none; visibility: hidden; } .bagis-list-content .type ul li label.radio span { display: block; } .bagis-list-content .type ul li label.radio span.bg { width: 100%; height: 100%; background: #fff; position: absolute; left: 0px; top: 0px; z-index: 1; } .bagis-list-content .type ul li label.radio span.control { display: block; width: 20px; height: 20px; background: #FAF8F2; border: none; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; margin-right: 10px; position: relative; z-index: 2; } .bagis-list-content .type ul li label.radio span.control::after { display: block; content: ""; width: 14px; height: 14px; background: #164B3F; border: solid 2px #fff; position: absolute; left: 3px; top: 3px; opacity: 0; filter: alpha(opacity=0); -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .bagis-list-content .type ul li label.radio span.name { font-size: 14px; font-weight: 500; color: #263B35; position: relative; z-index: 2; } .bagis-list-content .type ul li label.radio input[type="radio"]:checked + span.bg { background: #E8F1EB; } .bagis-list-content .type ul li label.radio input[type="radio"]:checked ~ span.control { background: #164B3F; } .bagis-list-content .type ul li label.radio input[type="radio"]:checked ~ span.control::after { opacity: 1; filter: alpha(opacity=100); } .bagis-list-content .form-content .item { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; padding: 30px; background: #fff; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; margin-bottom: 15px; } .bagis-list-content .form-content .item .label { width: 45%; font-size: 16px; font-weight: 500; } .bagis-list-content .form-content .item .input { width: 50%; height: 50px; padding: 0px 15px; margin-left: auto; background: #FAF8F2; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; } .bagis-list-content .form-content .item .input.input-price { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .bagis-list-content .form-content .item .input .form-control { width: 100%; height: 50px; padding: 0px 10px; background: transparent; outline: none; border: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; font-family: 'El Messiri', sans-serif, Arial; font-size: 16px; font-weight: 700; color: #263B35; } .bagis-list-content .form-content .item .input.input-price .form-control { width: 50%; } .bagis-list-content .form-content .item .input .form-select { width: 100%; height: 50px; padding: 0px 10px; background-color: transparent; outline: none; border: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; font-size: 14px; color: #263B35; } .bagis-list-content .form-content .item .input.input-price .form-select { width: 50%; } .bagis-list-content .form-content .info { padding: 15px; font-size: 14px; font-weight: 500; margin-bottom: 30px; } .bagis-list-content .form-content .action { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-wrap: wrap; justify-content: flex-end; } .bagis-list-content .form-content .action .button { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; height: 50px; cursor: pointer; outline: none; border: none; font-size: 13px; font-weight: 600; -moz-transition: all 0.1s ease-in; -webkit-transition: all 0.1s ease-in; transition: all 0.1s ease-in; } .bagis-list-content .form-content .action .button:hover { opacity: 0.85; filter: alpha(opacity=85); } .bagis-list-content .form-content .action .button.clear { padding: 0px 30px; background: transparent; color: #E27373; } .bagis-list-content .form-content .action .button.submit { width: 260px; padding: 0px 15px; background: #E8F1EB; color: #164B3F; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; } .bagis-list-content .form-content .action .button.clear::before { display: block; content: ""; width: 12px; height: 12px; background: url(../images/icon/clear.svg) no-repeat center center; background-size: 12px 12px; margin-right: 10px; } .bagis-list-content .form-content .action .button.submit::after { display: block; content: ""; width: 14px; height: 12px; background: url(../images/icon/right-blue.svg) no-repeat center center; background-size: 14px 12px; margin-left: 10px; } .bagis-list-content .form-content .summary { padding: 30px; background: #fff; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; } .bagis-list-content .form-content .summary h1, .calculator-content .form-content .summary h2, .calculator-content .form-content .summary h3, .calculator-content .form-content .summary h4, .calculator-content .form-content .summary h5, .calculator-content .form-content .summary h6 { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; font-family: 'Jost', sans-serif, Arial; font-size: 16px; font-weight: 500; color: #164B3F; margin-bottom: 20px; padding-bottom: 20px; border-bottom: solid 1px #EFEFEF; } .bagis-list-content .form-content .summary h1::before, .calculator-content .form-content .summary h2::before, .calculator-content .form-content .summary h3::before, .calculator-content .form-content .summary h4::before, .calculator-content .form-content .summary h5::before, .calculator-content .form-content .summary h6::before { display: block; content: ""; width: 40px; height: 40px; background: url(../images/icon/zekat.svg) no-repeat center center; background-size: 40px 40px; margin-right: 10px; } .bagis-list-content .form-content .summary .asset { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; font-size: 16px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: solid 1px #EFEFEF; } .bagis-list-content .form-content .summary .asset .name { font-weight: 500; } .bagis-list-content .form-content .summary .asset .value { font-family: 'El Messiri', sans-serif, Arial; font-weight: 700; margin-left: auto; } .bagis-list-content .form-content .summary .total { font-size: 16px; font-weight: 500; color: #164B3F; } .bagis-list-content .form-content .summary .total span { display: block; padding-top: 5px; font-family: 'El Messiri', sans-serif, Arial; font-size: 26px; font-weight: 700; color: #263B35; } @media (max-width:1199px) { .calculator-content .type p { font-size: 18px; } .calculator-content .type ul li label.radio { padding: 15px; } .calculator-content .form-content .summary .total span { font-size: 24px; } } @media (max-width:991px) { .calculator-content { padding: 30px; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; } .calculator-content .form-content .left { margin-bottom: 30px; } .calculator-content .form-content .item { -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; } .calculator-content .form-content .item .label { font-size: 15px; } .calculator-content .form-content .summary { -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; } } @media (max-width:767px) { .calculator-content .type ul li { margin-right: 10px; margin-bottom: 10px; } .calculator-content .form-content .item { display: block; } .calculator-content .form-content .item .label { width: auto; margin-bottom: 5px; } .calculator-content .form-content .item .input { width: auto; } .calculator-content .form-content .action .button.clear { padding: 0px 15px; } .calculator-content .form-content .action .button.submit { width: 200px; } } @media (max-width:481px) { .calculator-content .type ul li { margin-right: 5px; margin-bottom: 5px; } .calculator-content .form-content .item { padding: 15px; } .calculator-content .form-content .info { margin-bottom: 15px; } .calculator-content .form-content .action .button.submit { width: auto; padding: 0px 15px; } .calculator-content .form-content .summary .asset { font-size: 15px; } .calculator-content .form-content .summary .total { font-size: 15px; } .calculator-content .form-content .summary .total span { font-size: 21px; } } .checkout-content { padding: 50px; background-image: url(../images/logo/checkout.png); background-repeat: no-repeat; background-position: top 30px center; background-color: #FAF8F2; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; } @media (max-width:991px) { .checkout-content { padding: 30px; background-size: 25% auto; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; } } @media (max-width:481px) { .checkout-content { background-size: 35% auto; } } .checkout-step { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: center; margin-bottom: 50px; } .checkout-step .item { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; } .checkout-step .item::after { display: block; content: ""; width: 90px; height: 14px; background: url(../images/icon/right-grey.svg) no-repeat center center; background-size: 14px 14px; } .checkout-step .item:last-child::after { display: none; } .checkout-step .item a { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; font-size: 14px; font-weight: 500; color: #164B3F !important; text-decoration: none !important; } .checkout-step .item .number { width: 50px; height: 50px; line-height: 50px; text-align: center; background-color: #fff; background-repeat: no-repeat; background-position: center center; background-size: 18px 14px; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; margin-right: 15px; font-size: 18px; } .checkout-step .item.active .number { background-color: #164B3F; background-image: url(../images/icon/tick-white.svg); text-indent: -9999px; } .checkout-step .item.completed .number { background-color: #E8F1EB; background-image: url(../images/icon/tick-blue.svg); text-indent: -9999px; } .checkout-step .item .name { line-height: 120%; } @media (max-width:1199px) { .checkout-step .item::after { width: 60px; } } @media (max-width:991px) { .checkout-step .item::after { width: 40px; } } @media (max-width:767px) { .checkout-step .item { width: 33%; } .checkout-step .item::after { display: none; } .checkout-step .item a { display: block; padding: 0px 15px; text-align: center; } .checkout-step .item .number { margin: 0px auto; margin-bottom: 10px; } } @media (max-width:481px) { .checkout-step .item a { font-size: 13px; } .checkout-step .item .number { width: 40px; height: 40px; line-height: 40px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; font-size: 16px; } } .checkout-info { max-width: 800px; margin: 0px auto; margin-bottom: 50px; font-size: 20px; font-weight: 500; color: #164B3F; text-align: center; } @media (max-width:991px) { .checkout-info { max-width: 100%; font-size: 18px; } } @media (max-width:767px) { .checkout-info { font-size: 17px; } } @media (max-width:481px) { .checkout-info { font-size: 16px; } } .checkout-action .price .item { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; font-size: 16px; font-weight: 500; margin-bottom: 30px; } .checkout-action .price .item .name { margin-right: 15px; } .checkout-action .price .item .value { margin-left: auto; } .checkout-action .action a { margin-bottom: 5px; } .checkout-action .action a:last-child { margin-bottom: 0px; } .checkout-action .action a { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; width: 100%; height: 50px; padding: 0px 15px; cursor: pointer; outline: none; border: none; font-size: 13px; font-weight: 600; -moz-transition: all 0.1s ease-in; -webkit-transition: all 0.1s ease-in; transition: all 0.1s ease-in; text-decoration: none; } .checkout-action .action a:hover { opacity: 0.85; filter: alpha(opacity=85); } .checkout-action .action a.back { background: transparent; color: #888; } .checkout-action .action a.submit { background: #E8F1EB; color: #164B3F; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; } .checkout-action .action a.back::before { display: block; content: ""; width: 13px; height: 12px; background: url(../images/icon/back-grey.svg) no-repeat center center; background-size: 13px 12px; margin-right: 10px; } .checkout-action .action a.submit::after { display: block; content: ""; width: 14px; height: 12px; background: url(../images/icon/right-blue.svg) no-repeat center center; background-size: 14px 12px; margin-left: 10px; } .payment-h3 { display: flex; align-items: center; justify-content: space-between; } .payment-h3 .title { } .payment-add-btn { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; width: auto; height: auto; padding: 0; cursor: pointer; outline: none; border: none; font-size: 14px; font-weight: 500; -moz-transition: all 0.1s ease-in; -webkit-transition: all 0.1s ease-in; transition: all 0.1s ease-in; text-decoration: none; } .payment-add-btn.submit { background: none; color: #164B3F; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; display: flex; } .payment-add-btn.submit::after { display: block; content: " + "; width: auto; height: auto; background: url(../images/icon/right-blue.svg) no-repeat center center; background-size: 14px 12px; margin-left: 10px; background: none; font-size: 20px; font-weight: 400; line-height: 1; } .checkout-donate-cart { max-width: 800px; margin: 0px auto; } .checkout-donate-cart .list { margin-bottom: 50px; } .checkout-donate-cart .list .item { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; padding: 30px 90px 30px 30px; background: #fff; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; margin-bottom: 15px; position: relative; } .checkout-donate-cart .list .item:last-child { margin-bottom: 0px; } .checkout-donate-cart .list .item .name { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; font-size: 16px; font-weight: 500; margin-right: 15px; } .checkout-donate-cart .list .item .name img { display: block; width: 46px; height: auto; margin-right: 10px; } .checkout-donate-cart .list .item .price { margin-left: auto; font-size: 16px; font-weight: 500; color: #164B3F; } .checkout-donate-cart .list .item .delete { position: absolute; right: 30px; top: 50%; -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); transform: translate(0, -50%); } .checkout-donate-cart .list .item .delete a { display: block; width: 36px; height: 36px; background: url(../images/icon/delete.svg) no-repeat center center; background-size: 36px 36px; cursor: pointer; } .checkout-donate-cart .checkout-action { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: flex-end; } .checkout-donate-cart .checkout-action .inner { width: 300px; } @media (max-width:991px) { .checkout-donate-cart { max-width: 100%; } .checkout-donate-cart .list .item { padding: 15px 75px 15px 30px; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; } .checkout-donate-cart .list .item .name { font-size: 15px; margin-right: 10px; } .checkout-donate-cart .list .item .name img { width: 40px; } } @media (max-width:767px) { .checkout-donate-cart .list .item { padding: 15px 60px 15px 15px; } .checkout-donate-cart .list .item .name { font-size: 14px; } .checkout-donate-cart .list .item .delete { right: 15px; top: 15px; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); transform: translate(0, 0); } } @media (max-width:481px) { .checkout-donate-cart .list .item { display: block; } .checkout-donate-cart .list .item .name { margin-right: 0px; margin-bottom: 10px; } .checkout-donate-cart .list .item .name img { width: 32px; } .checkout-donate-cart .checkout-action .inner { width: 100%; } } .payment-content { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .payment-content .left { width: 65%; padding-right: 50px; } .payment-content .right { width: 35%; } .payment-content h1, .payment-content h2, .payment-content h3, .payment-content h4, .payment-content h5, .payment-content h6 { font-family: 'Jost', sans-serif, Arial; font-size: 20px; font-weight: 500; color: #164B3F; margin-bottom: 20px; } .payment-content .form .item { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; padding: 15px 15px 15px 30px; background: #fff; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; margin-bottom: 15px; } .payment-content .form .item .label { width: 45%; font-size: 16px; font-weight: 500; } .payment-content .form .item .input { width: 50%; height: 50px; padding: 0px 15px; margin-left: auto; background: #FAF8F2; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; } .payment-content .form .item .input .form-control { width: 100%; height: 50px; padding: 0px 10px; background: transparent; outline: none; border: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; font-size: 14px; color: #263B35; } .payment-content .form .item .input .form-select { width: 100%; height: 50px; padding: 0px 10px; background-color: transparent; outline: none; border: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; font-size: 14px; color: #263B35; } .payment-content .form .item .input.input-date { padding: 0px; background: #fff; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: space-between; } .payment-content .form .item .input.input-date .form-select { width: 48%; padding: 0px 15px; background-color: #FAF8F2; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; } .payment-content .form .item .input.input-cvv { padding: 0px; background: #fff; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; } .payment-content .form .item .input.input-cvv .form-control { width: 120px; padding: 0px 15px; background-color: #FAF8F2; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; } .payment-content .form .item .iti { width: 100%; } .payment-content .form .item .iti--separate-dial-code .iti__selected-flag { background: none; } .payment-content .form .item .iti__selected-flag { padding: 0px 15px; } .payment-content .form .item .iti--separate-dial-code .iti__selected-dial-code { font-size: 14px; color: #263B35; } .payment-content .form .item .iti__arrow { border-top: 4px solid #263B35; } .payment-content .form .item .iti__arrow.iti__arrow--up { border-top: none; border-bottom: 4px solid #263B35; } .payment-content .form .item .iti__country-list { font-size: 13px; color: #263B35; } .payment-content .form .item .input.input-cvv span { flex: 1; padding-left: 10px; font-size: 12px; color: #888; font-weight: 400; line-height: 110%; } .payment-content .form .info { font-size: 14px; font-weight: 500; text-align: center; margin-bottom: 30px; } .payment-content .summary .checkout-action { padding: 30px; background: #fff; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; margin-bottom: 30px; } .payment-content .summary .checkout-action .price .item { padding: 30px 0px; margin: 0px; border-top: solid 1px #EFEFEF; } .payment-content .summary .checkout-action .price .item:first-child { border-top: none; padding-top: 0px; } .payment-content .summary .checkout-action .price .item.total { color: #164B3F; } .payment-content .credit-card { width: 100%; height: 240px; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; background: rgba(40, 116, 93, 1); background: -moz-linear-gradient(-45deg, rgba(40, 116, 93, 1) 0%, rgba(22, 75, 63, 1) 50%, rgba(38, 59, 53, 1) 100%); background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(40, 116, 93, 1)), color-stop(50%, rgba(22, 75, 63, 1)), color-stop(100%, rgba(38, 59, 53, 1))); background: -webkit-linear-gradient(-45deg, rgba(40, 116, 93, 1) 0%, rgba(22, 75, 63, 1) 50%, rgba(38, 59, 53, 1) 100%); background: -o-linear-gradient(-45deg, rgba(40, 116, 93, 1) 0%, rgba(22, 75, 63, 1) 50%, rgba(38, 59, 53, 1) 100%); background: -ms-linear-gradient(-45deg, rgba(40, 116, 93, 1) 0%, rgba(22, 75, 63, 1) 50%, rgba(38, 59, 53, 1) 100%); background: linear-gradient(135deg, rgba(40, 116, 93, 1) 0%, rgba(22, 75, 63, 1) 50%, rgba(38, 59, 53, 1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#28745D', endColorstr='#263B35', GradientType=1); position: relative; color: rgba(255, 255, 255, 0.5); font-weight: 600; } .payment-content .credit-card .magnetic { width: 60px; height: 40px; background: #d9d9d9; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; position: absolute; top: 50px; left: 30px; } .payment-content .credit-card .magnetic::before { display: block; content: ""; width: 35px; height: 30px; background: rgba(0, 0, 0, 0.1); -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; position: absolute; left: 5px; top: 5px; } .payment-content .credit-card .logo { position: absolute; top: 30px; right: 30px; } .payment-content .credit-card .logo img { display: block; width: auto; height: 32px; } .payment-content .credit-card .cvv { font-size: 14px; position: absolute; top: 80px; right: 35px; } .payment-content .credit-card .name-surname { width: 50%; font-size: 18px; position: absolute; bottom: 30px; left: 30px; white-space: nowrap; overflow: hidden; } .payment-content .credit-card .card-number { font-size: 24px; position: absolute; bottom: 80px; left: 30px; } .payment-content .credit-card .expiration-date-label { font-size: 10px; font-weight: 400; color: rgba(255, 255, 255, 0.4); position: absolute; bottom: 50px; right: 30px; } .payment-content .credit-card .expiration-date { font-size: 14px; position: absolute; bottom: 30px; right: 30px; } .item-copy-content { background: #E8F1EB; padding: 20px 20px 10px 20px; border-radius: 50px; border-top-left-radius: 0px; margin-bottom: 15px; position: relative; } .item-copy-content .delete-single-item { color: #E27373; display: block; width: 30px; height: 30px; background: url(../images/icon/clear.svg) no-repeat center center #ffffff; background-size: 12px 12px; margin-right: 0; font-size: 0px; text-indent: -9999px; position: absolute; left: -10px; top: -10px; border-radius: 50px; border: 2px solid #e27373; } @media (max-width:1199px) { .payment-content { display: block; } .payment-content .left { width: auto; padding-right: 0px; margin-bottom: 30px; } .payment-content .right { width: auto; } .payment-content .credit-card { width: 360px; margin: 0px auto; } } @media (max-width:991px) { .payment-content h1, .payment-content h2, .payment-content h3, .payment-content h4, .payment-content h5, .payment-content h6 { font-size: 18px; } .payment-content .form .item { -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; } .payment-content .form .item .label { font-size: 15px; } .payment-content .summary .checkout-action { -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; } } @media (max-width:767px) { .payment-content .form .item { display: block; } .payment-content .form .item .label { width: auto; margin-bottom: 5px; } .payment-content .form .item .input { width: auto; } } @media (max-width:481px) { .payment-content h1, .payment-content h2, .payment-content h3, .payment-content h4, .payment-content h5, .payment-content h6 { font-size: 16px; margin-bottom: 15px; } .payment-content .form .item { padding: 15px; } .payment-content .credit-card { width: 260px; height: 180px; } .payment-content .credit-card .magnetic { width: 40px; height: 25px; top: 30px; left: 15px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .payment-content .credit-card .magnetic::before { width: 25px; height: 15px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .payment-content .credit-card .logo { top: 20px; right: 15px; } .payment-content .credit-card .logo img { height: 24px; } .payment-content .credit-card .cvv { font-size: 13px; top: 55px; right: 20px; } .payment-content .credit-card .name-surname { font-size: 16px; bottom: 20px; left: 15px; } .payment-content .credit-card .card-number { font-size: 18px; bottom: 60px; left: 15px; } .payment-content .credit-card .expiration-date-label { font-size: 8px; bottom: 40px; right: 15px; } .payment-content .credit-card .expiration-date { font-size: 12px; bottom: 20px; right: 15px; } } .checkout-result { max-width: 800px; margin: 0px auto; } .checkout-result h1, .checkout-result h2, .checkout-result h3, .checkout-result h4, .checkout-result h5, .checkout-result h6 { font-family: 'Jost', sans-serif, Arial; font-size: 20px; font-weight: 500; color: #164B3F; margin-bottom: 30px; } .checkout-result .personal-info { margin-bottom: 50px; } .checkout-result .personal-info .form .item { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; padding: 15px 15px 15px 30px; background: #fff; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; margin-bottom: 15px; } .checkout-result .personal-info .form .item .label { width: 45%; font-size: 16px; font-weight: 500; } .checkout-result .personal-info .form .item .input { width: 50%; height: 50px; padding: 0px 15px; margin-left: auto; background: #FAF8F2; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; } .checkout-result .personal-info .form .item .input .form-control { width: 100%; height: 50px; padding: 0px 10px; background: transparent; outline: none; border: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; font-size: 14px; color: #263B35; } .checkout-result .personal-info .form .item .iti { width: 100%; } .checkout-result .personal-info .form .item .iti--separate-dial-code .iti__selected-flag { background: none; } .checkout-result .personal-info .form .item .iti__selected-flag { padding: 0px 15px; } .checkout-result .personal-info .form .item .iti--separate-dial-code .iti__selected-dial-code { font-size: 14px; color: #263B35; } .checkout-result .personal-info .form .item .iti__arrow { border-top: 4px solid #263B35; } .checkout-result .personal-info .form .item .iti__arrow.iti__arrow--up { border-top: none; border-bottom: 4px solid #263B35; } .checkout-result .personal-info .form .item .iti__country-list { font-size: 13px; color: #263B35; } .checkout-result .donate-info { margin-bottom: 50px; } .checkout-result .donate-info .list .item { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; padding: 30px; background: #fff; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; margin-bottom: 15px; position: relative; } .checkout-result .donate-info .list .item:last-child { margin-bottom: 0px; } .checkout-result .donate-info .list .item .name { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; font-size: 16px; font-weight: 500; margin-right: 15px; } .checkout-result .donate-info .list .item .name img { display: block; width: 46px; height: auto; margin-right: 10px; } .checkout-result .donate-info .list .item .price { margin-left: auto; font-size: 16px; font-weight: 500; color: #164B3F; } .checkout-result .total { font-size: 16px; font-weight: 500; color: #164B3F; text-align: right; } .checkout-result .total span { display: block; padding-top: 5px; font-family: 'El Messiri', sans-serif, Arial; font-size: 26px; font-weight: 700; color: #263B35; } @media (max-width:1199px) { .checkout-result .total span { font-size: 24px; } } @media (max-width:991px) { .checkout-result { max-width: 100%; } .checkout-result h1, .checkout-result h2, .checkout-result h3, .checkout-result h4, .checkout-result h5, .checkout-result h6 { font-size: 18px; } .checkout-result .personal-info .form .item { -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; } .checkout-result .personal-info .form .item .label { font-size: 15px; } .checkout-result .donate-info .list .item { padding: 15px 30px; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; } .checkout-result .donate-info .list .item .name { font-size: 15px; margin-right: 10px; } .checkout-result .donate-info .list .item .name img { width: 40px; } } @media (max-width:767px) { .checkout-result .personal-info .form .item { display: block; } .checkout-result .personal-info .form .item .label { width: auto; margin-bottom: 5px; } .checkout-result .personal-info .form .item .input { width: auto; } .checkout-result .donate-info .list .item .name { font-size: 14px; } } @media (max-width:481px) { .checkout-result .personal-info .form .item { padding: 15px; } .checkout-donate-cart .list .item .name img { width: 32px; } .checkout-result .total { font-size: 15px; } .checkout-result .total span { font-size: 21px; } } .account-content { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; padding: 50px; background-color: #FAF8F2; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; } .account-content .left { width: 35%; padding-right: 50px; } .account-content .right { width: 65%; order: 2; } .account-content .account-menu { width: 100%; padding: 50px; background: #fff; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; position: relative; z-index: 9; overflow: hidden; } .account-content .account-menu::before { display: block; content: ""; width: 120px; height: 120px; background: #E8F1EB; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; position: absolute; left: -50px; top: -70px; z-index: 1; } .account-content .account-menu::after { display: block; content: ""; width: 120px; height: 120px; background: #F1ECDD; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; position: absolute; right: -50px; bottom: -70px; z-index: 1; } .account-content .account-menu .hello { font-family: 'El Messiri', sans-serif, Arial; font-size: 16px; font-weight: 600; margin-bottom: 30px; } .account-content .account-menu .hello span { display: block; font-size: 24px; } .account-content .account-menu ul { list-style: none; margin: 0px; padding: 0px; } .account-content .account-menu ul li { border-top: solid 1px #efefef; } .account-content .account-menu ul li:first-child { border-top: none; } .account-content .account-menu ul li a { display: block; height: auto; padding: 15px 0px; border: none; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; font-size: 16px; font-weight: 500; color: #263B35; text-decoration: none; position: relative; } .account-content .account-menu ul li a:hover { color: #28745D; } .account-content .account-menu ul li a::before { display: block; content: ""; width: 10px; height: 10px; background: url(../images/icon/menu-right.svg) no-repeat center; background-size: 10px 10px; position: absolute; left: -25px; top: 50%; -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); transform: translate(0, -50%); visibility: hidden; opacity: 0; filter: alpha(opacity=0); -moz-transition: all 0.2s ease-in; -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in; } .account-content .account-menu ul li a:hover::before { left: -15px; visibility: visible; opacity: 1; filter: alpha(opacity=100); } .account-content .account-menu ul li a.active { color: #28745D; } .account-content .account-menu ul li a.active::before { left: -15px; visibility: visible; opacity: 1; filter: alpha(opacity=100); } .account-content .account-intro { font-size: 16px; margin-bottom: 30px; } .account-content .account-intro h1, .account-content .account-intro h2 { font-family: 'Jost', sans-serif, Arial; font-size: 20px; font-weight: 500; color: #164B3F; margin-bottom: 15px; } .account-content .account-intro p { margin: 0px; } .account-content .account-donate-list { margin-bottom: 30px; } .account-content .account-donate-list .item { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; padding: 15px 30px; background: #fff; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; margin-bottom: 15px; } .account-content .account-donate-list .item:last-child { margin-bottom: 0px; } .account-content .account-donate-list .item .name { width: 65%; font-size: 16px; font-weight: 500; padding-right: 10px; } .account-content .account-donate-list .item .date { width: 20%; font-size: 13px; color: #888; padding-right: 10px; } .account-content .account-donate-list .item .price { margin-left: auto; font-size: 13px; color: #888; } .account-content .account-donate-list .item span { display: block; font-size: 16px; font-weight: 500; color: #164B3F; } .account-content .account-form { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-wrap: wrap; margin-bottom: 40px; } .account-content .account-form .item { width: 48%; margin-right: 4%; margin-bottom: 4%; } .account-content .account-form .item:nth-child(2n+0) { margin-right: 0px; } .account-content .account-form .item .form-control { width: 100%; height: 50px; padding: 0px 15px; background: #fff; outline: none; border: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; font-size: 14px; color: #263B35; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; } .account-content .account-form .item .iti { width: 100%; } .account-content .account-form .item .iti--separate-dial-code .iti__selected-flag { background: none; } .account-content .account-form .item .iti__selected-flag { padding: 0px 15px; } .account-content .account-form .item .iti--separate-dial-code .iti__selected-dial-code { font-size: 14px; color: #263B35; } .account-content .account-form .item .iti__arrow { border-top: 4px solid #263B35; } .account-content .account-form .item .iti__arrow.iti__arrow--up { border-top: none; border-bottom: 4px solid #263B35; } .account-content .account-form .item .iti__country-list { font-size: 13px; color: #263B35; } .account-content .account-form .item a.submit { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; width: 100%; height: 50px; padding: 0px 15px; cursor: pointer; outline: none; border: none; font-size: 13px; font-weight: 600; -moz-transition: all 0.1s ease-in; -webkit-transition: all 0.1s ease-in; transition: all 0.1s ease-in; text-decoration: none; background: #E8F1EB; color: #164B3F; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; } .account-content .account-form .item a.submit::after { display: block; content: ""; width: 14px; height: 12px; background: url(../images/icon/right-blue.svg) no-repeat center center; background-size: 14px 12px; margin-left: 10px; } .account-content .account-form .item a:hover { opacity: 0.85; filter: alpha(opacity=85); } @media (max-width:1199px) { .account-content .left { width: 40%; padding-right: 30px; } .account-content .right { width: 60%; } .account-content .account-donate-list .item .name { width: 60%; } .account-content .account-form .item { width: 49%; margin-right: 2%; margin-bottom: 2%; } .account-content .account-form .item:nth-child(2n+0) { margin-right: 0px; } } @media (max-width:991px) { .account-content { display: block; padding: 30px; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; } .account-content .left { width: auto; padding-right: 0px; } .account-content .right { width: auto; margin-bottom: 30px; } .account-content .account-menu { padding: 50px 30px; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; } .account-content .account-intro h1, .account-content .account-intro h2 { font-size: 18px; } .account-content .account-donate-list .item { -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; } } @media (max-width:767px) { .account-content .account-menu .hello span { font-size: 21px; } .account-content .account-donate-list .item { padding: 15px; flex-wrap: wrap; } .account-content .account-donate-list .item .name { width: 100%; font-size: 15px; padding-right: 0px; margin-bottom: 10px; } .account-content .account-donate-list .item .date { width: 50%; font-size: 12px; } .account-content .account-donate-list .item .price { width: 50%; font-size: 12px; } .account-content .account-donate-list .item span { font-size: 15px; } } @media (max-width:481px) { .account-content .account-menu .hello span { font-size: 18px; } .account-content .account-menu ul li a { font-size: 15px; } .account-content .account-form { display: block; } .account-content .account-form .item { width: auto; margin-right: 0px; margin-bottom: 15px; } .account-content .account-form .item:last-child { margin-bottom: 0px; } } @-webkit-keyframes iconAnime1 { 0% { opacity: 0; filter: alpha(opacity=10); } 100% { opacity: 1; filter: alpha(opacity=100); } } @-moz-keyframes iconAnime1 { 0% { opacity: 0; filter: alpha(opacity=10); } 100% { opacity: 1; filter: alpha(opacity=100); } } @keyframes iconAnime1 { 0% { opacity: 0; filter: alpha(opacity=10); } 100% { opacity: 1; filter: alpha(opacity=100); } } @-webkit-keyframes iconAnime2 { 30% { opacity: 0; filter: alpha(opacity=10); } 100% { opacity: 1; filter: alpha(opacity=100); } } @-moz-keyframes iconAnime2 { 30% { opacity: 0; filter: alpha(opacity=10); } 100% { opacity: 1; filter: alpha(opacity=100); } } @keyframes iconAnime2 { 30% { opacity: 0; filter: alpha(opacity=10); } 100% { opacity: 1; filter: alpha(opacity=100); } } @-webkit-keyframes iconAnime3 { 50% { opacity: 0; filter: alpha(opacity=10); } 100% { opacity: 1; filter: alpha(opacity=100); } } @-moz-keyframes iconAnime3 { 50% { opacity: 0; filter: alpha(opacity=10); } 100% { opacity: 1; filter: alpha(opacity=100); } } @keyframes iconAnime3 { 50% { opacity: 0; filter: alpha(opacity=10); } 100% { opacity: 1; filter: alpha(opacity=100); } } .page-loading { width: 100%; height: 100%; position: fixed; left: 0px; top: 0px; z-index: 9997; } .page-loading::before { display: block; content: ""; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.9); position: absolute; left: 0px; top: 0px; z-index: 9998; } .page-loading .content { width: 90px; height: 30px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; position: absolute; left: 50%; top: 50%; z-index: 9999; margin-left: -45px; margin-top: -15px; } .page-loading .content span { display: block; width: 24px; height: 30px; margin: 0px 3px; background: url(../images/logo/loading.png) no-repeat; opacity: 0.1; filter: alpha(opacity=10); } .page-loading .content span:nth-child(1) { left: 0px; -webkit-animation: iconAnime1 2s infinite; -moz-animation: iconAnime1 2s infinite; animation: iconAnime1 1.5s ease-in-out infinite; } .page-loading .content span:nth-child(2) { left: 20px; -webkit-animation: iconAnime2 2s infinite; -moz-animation: iconAnime2 2s infinite; animation: iconAnime2 1.5s -1s ease-in-out infinite; } .page-loading .content span:nth-child(3) { left: 40px; -webkit-animation: iconAnime3 2s infinite; -moz-animation: iconAnime3 2s infinite; animation: iconAnime3 1.5s -0.5s ease-in-out infinite; } .contact-form h1, .contact-form h2, .contact-form h3, .contact-form h4, .contact-form h5, .contact-form h6 { font-family: 'Jost', sans-serif, Arial; font-size: 20px; font-weight: 500; color: #164B3F; margin-bottom: 30px; } .contact-form .item { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; padding: 15px 15px 15px 30px; background: #FAF8F2; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; margin-bottom: 15px; } .contact-form .item .label { width: 40%; font-size: 16px; font-weight: 500; } .contact-form .item .input { width: 55%; height: 50px; padding: 0px 15px; margin-left: auto; background: #fff; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; } .contact-form .item .input .form-control { width: 100%; height: 50px; padding: 0px 10px; background: transparent; outline: none; border: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; font-size: 14px; color: #263B35; } .contact-form .item.item-textarea { align-items: flex-start; } .contact-form .item.item-textarea .input { height: 140px; } .contact-form .item.item-textarea .input .form-control { height: 140px; padding: 15px 10px; } .contact-form .item .iti { width: 100%; } .contact-form .item .iti--separate-dial-code .iti__selected-flag { background: none; } .contact-form .item .iti__selected-flag { padding: 0px 15px; } .contact-form .item .iti--separate-dial-code .iti__selected-dial-code { font-size: 14px; color: #263B35; } .contact-form .item .iti__arrow { border-top: 4px solid #263B35; } .contact-form .item .iti__arrow.iti__arrow--up { border-top: none; border-bottom: 4px solid #263B35; } .contact-form .item .iti__country-list { font-size: 13px; color: #263B35; } .contact-form .action { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: flex-end; } .contact-form .action .submit { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; width: 300px; height: 50px; padding: 0px 15px; cursor: pointer; outline: none; border: none; font-size: 13px; font-weight: 600; -moz-transition: all 0.1s ease-in; -webkit-transition: all 0.1s ease-in; transition: all 0.1s ease-in; text-decoration: none; background: #E8F1EB; color: #164B3F; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; } .contact-form .action .submit:hover { opacity: 0.85; filter: alpha(opacity=85); } .contact-form .action .submit::after { display: block; content: ""; width: 14px; height: 12px; background: url(../images/icon/right-blue.svg) no-repeat center center; background-size: 14px 12px; margin-left: 10px; } @media (max-width:991px) { .contact-form h1, .contact-form h2, .contact-form h3, .contact-form h4, .contact-form h5, .contact-form h6 { font-size: 18px; } .contact-form .item { -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; } } @media (max-width:481px) { .contact-form h1, .contact-form h2, .contact-form h3, .contact-form h4, .contact-form h5, .contact-form h6 { font-size: 16px; } .contact-form .item { display: block; padding: 15px; } .contact-form .item .label { width: auto; margin-bottom: 10px; } .contact-form .item .input { width: auto; } .contact-form .action .submit { width: 100%; } } .footer__buttons { position: fixed; right: 30px; bottom: 30px; z-index: 3; text-align: right; display: -ms-flex; display: flex; flex-wrap: wrap; } .footer__buttons, .footer__top { align-items: center; justify-content: space-between; } .whatsapp { background: #164B3F; font-size: 1.8rem; box-shadow: 0 2px 6px rgba(0, 0, 0, .1), 0 2px 6px rgba(0, 0, 0, .1); } .whatsapp:hover { color: white !important; } .whatsapp { position: relative; display: -ms-flex; display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 50%; color: #fff; text-decoration: none; transition: all .2s ease-in-out; } /* ar language */ .lang-ar { } .lang-ar header { } .lang-ar header .container { flex-direction: row-reverse; } .lang-ar header .container .right { margin-left: 0; margin-right: auto; } .lang-ar header .container .left { margin-right: 0; margin-left: auto; flex-direction: row-reverse; } .lang-ar header .logo { margin-right: 0px; margin-left: 30px; } .lang-ar .intro .bg { width: 60vw !important; left: auto; right: 0; -webkit-border-top-right-radius: 0; border-top-right-radius: 0; -webkit-border-bottom-right-radius: 0; border-bottom-right-radius: 0; -webkit-border-top-left-radius: 50px; border-top-left-radius: 50px; -webkit-border-bottom-left-radius: 50px; border-bottom-left-radius: 50px; } .lang-ar .intro .main-banner { direction: rtl; } .lang-ar header .menu { direction: rtl; } .lang-ar header .menu ul li .submenu ul li a::before { background: url(../images/icon/menu-left.svg) no-repeat center; } .lang-ar header .menu ul li .submenu ul li a::before { left: auto; right: -15px; } .lang-ar header .search { display: none; } .lang-ar header .account .dropdown-menu { left: -15px !important; right: auto !important; direction: rtl; } .lang-ar header .account .dropdown-menu::before { right: auto; left: 30px; } .lang-ar header .donate .dropdown-menu { left: -15px !important; right: 0px !important; } .lang-ar header .donate .dropdown-menu::before { right: auto; left: 30px; } .lang-ar header .donate .dropdown-menu .donate-menu { direction: rtl; } .lang-ar header .account .dropdown-menu .tab-content .account-form .item .show-hide-password { right: auto; left: 15px; } /*.lang-ar header .account .dropdown-menu .tab-content .account-form .item .iti__country-list{ left: 0; }*/ .lang-ar header .account .dropdown-menu .tab-content .account-form .item label.checkbox span.control { left: auto; right: 15px; } .lang-ar header .account .dropdown-menu .tab-content .account-form .item label.checkbox span.name { padding-right: 42px; padding-left: 0; text-align: right; } .lang-ar .iti--allow-dropdown .iti__flag-container, .lang-ar .iti--separate-dial-code .iti__flag-container { right: 0; left: auto; } .lang-ar header .account .dropdown-menu .tab-content .account-form .item .form-control.account-phone { padding-left: 15px !important; padding-right: 90px !important; } .lang-ar .home-category .content-slider .item { direction: rtl; } .lang-ar .home-category .content-slider .item .info { padding-right: 50px; padding-left: 0px; } .lang-ar .home-category .content-slider .item .info .action a.donate { margin-left: 15px; margin-right: 0px; } .lang-ar footer .footer-bottom { direction: rtl; } .lang-ar footer .mail a { direction: rtl; } .lang-ar footer .menu ul { direction: rtl; } .lang-ar .home-projects .right .title { direction: rtl; } .lang-ar .home-projects .right .title a { margin-right: 30px; margin-left: 0px; } .lang-ar .home-projects .left { direction: rtl; } .lang-ar .home-projects .left .category-slider .item a img { margin-right: 0px; margin-left: 10px; } .lang-ar .home-news .title { direction: rtl; } .lang-ar .home-news .title .left { margin-right: 5px; margin-left: 15px; } .lang-ar .home-news .title .right { margin-right: 30px; margin-left: 0px; } .lang-ar .intro .container { direction: rtl; } .lang-ar .bank-account-list .acr-item { direction: rtl; } .lang-ar .intro .page-concept .right .slider .item .caption .action a img { margin-right: 0px; margin-left: 10px; } .lang-ar .bank-account-list .acr-content .account-body .copy { right: auto; left: 15px; } .lang-ar .general-detail { direction: rtl; } .lang-ar .project-detail { direction: rtl; } .lang-ar .calculator-content h2::before { margin-right: 0px; margin-left: 10px; } .lang-ar .calculator-content .type ul li label.radio span.control { margin-right: 0px; margin-left: 10px; } .lang-ar .calculator-content .form-content .item .input { margin-left: 0; margin-right: auto; } .lang-ar .bagis-list-content .form-content .summary h1::before, .lang-ar .calculator-content .form-content .summary h2::before, .lang-ar .calculator-content .form-content .summary h3::before, .lang-ar .calculator-content .form-content .summary h4::before, .lang-ar .calculator-content .form-content .summary h5::before, .lang-ar .calculator-content .form-content .summary h6::before { margin-right: 0px; margin-left: 10px; } .lang-ar .calculator-content .form-content .summary .asset .value { margin-left: 0; margin-right: auto; } .lang-ar .calculator-content .form-content .action { justify-content: flex-start; } .lang-ar .faq-content { direction: rtl; } .lang-ar .calculator-content .type ul li { margin-right: 0; margin-left: 15px; } .lang-ar .general-detail .content .left { padding-right: 0px; padding-left: 50px; } .lang-ar .project-detail .content .left { padding-right: 0px; padding-left: 50px; } .lang-ar .static-content .activity-list ul li img { margin-right: 0px; margin-left: 10px; } .lang-ar .inner-wrapper-sticky { position: relative !important; left: 0 !important; top: 0 !important; right: 0 !important; bottom: 0 !important; transform: none !important; } .lang-ar .branch-list .item .contact .info img { margin-right: 0px; margin-left: 10px; } .lang-ar .project-category { direction: rtl; } .lang-ar .project-item .info .financial .target { text-align: left; } .lang-ar .project-item .donate .button::before { margin-right: 0px; margin-left: 5px; } .lang-ar .category-menu-slider .item { direction: rtl; } .lang-ar .category-menu-slider .item img { margin-right: 0px; margin-left: 5px; } .lang-ar .project-detail .content .donate-box .title img { margin-right: 0px; margin-left: 10px; } .lang-ar .project-detail .content .donate-box .donate .button { margin-left: 0; margin-right: auto; } .lang-ar .project-detail .content .donate-box .donate .button::before { margin-right: 0px; margin-left: 5px; } .lang-ar .project-detail .content .donate-box .links .item img { margin-right: 0px; margin-left: 10px; } .lang-ar .other-projects { direction: rtl; } .lang-ar .project-detail .content .donate-box .financial .target { text-align: left; } .lang-ar .other-projects .title h1, .lang-ar .other-projects .title h2, .lang-ar .other-projects .title h3, .lang-ar .other-projects .title h4, .lang-ar .other-projects .title h5, .lang-ar .other-projects .title h6 { margin-right: 0px; margin-left: 15px; } .lang-ar .contact-form .item .input { margin-left: 0; margin-right: auto; } .lang-ar .contact-form .item .input .form-control.payment-phone { padding-left: 10px !important; padding-right: 100px !important; } .lang-ar .contact-form .item { padding: 15px 30px 15px 15px; } .lang-ar .contact-form .action { justify-content: flex-start; } .lang-ar .intro .page-concept .right .slider .item .caption .action .date .day { margin-right: 0px; margin-left: 5px; } .lang-ar .intro .page-concept .right .slider .item .caption .action .date { margin-right: 0px; } .lang-ar .general-detail .content .side-menu ul li a::before { background: url(../images/icon/menu-left.svg) no-repeat center; left: auto; right: -25px; } .lang-ar .general-detail .content .side-menu ul li a.active::before { left: auto; right: -25px; } .lang-ar .general-detail .content .side-menu ul li a:hover::before { left: auto; right: -25px; } .lang-ar .donor-content .title .search { margin-left: 0; margin-right: auto; } .lang-ar .news-title h1, .lang-ar .news-title h2, .lang-ar .news-title h3, .lang-ar .news-title h4, .lang-ar .news-title h5, .lang-ar .news-title h6 { margin-right: 0px; margin-left: 10px; } .lang-ar .news-share .social ul li:last-child { margin-right: 15px; } .lang-ar .news-share .social { margin-right: 0px; margin-left: 10px; } .lang-ar .home-news .slider .news-item { direction: rtl; } .lang-ar .news-title .date .day { margin-right: 0px; margin-left: 5px; } .lang-ar .checkout-step .item .number { margin-left: 15px; margin-right: 0px; } .lang-ar .payment-content .left { padding-right: 0px; padding-left: 50px; } .lang-ar .bagis-list-content .type ul li label.radio span.control { margin-right: 0px; margin-left: 10px; } .lang-ar .payment-content .form .item { padding: 15px 30px 15px 15px; } .lang-ar .payment-content .form .item .input { margin-left: 0; margin-right: auto; } .lang-ar .payment-content .form .item .input .form-control.payment-phone { padding-left: 10px !important; padding-right: 100px !important; } .lang-ar .payment-content .form .info { text-align: right; } .lang-ar .form-select { padding-right: 30px !important; } .lang-ar .payment-content .form .item .input.input-cvv span { padding-left: 0px; padding-right: 10px; } .lang-ar .account-content .left { padding-right: 0px; padding-left: 50px; } .lang-ar .account-content .account-form .item { margin-right: 0%; margin-left: 4%; } .lang-ar .account-content .account-form .item:nth-child(2n+0) { margin-right: 0%; margin-left: 0%; } .lang-ar .account-content .account-form .item .form-control.account-phone { padding-left: 10px !important; padding-right: 100px !important; } .lang-ar .account-content .account-menu ul li a::before { background: url(../images/icon/menu-left.svg) no-repeat center; left: auto; right: -25px; } .lang-ar .account-content .account-menu ul li a.active::before { left: auto; right: -25px; } .lang-ar .account-content .account-menu ul li a:hover::before { left: auto; right: -25px; } .text-uppercase { text-transform: uppercase !important; } .alert-info { color: #164B3F; background-color: transparent; border-color: #164B3F; border-radius: 50px; font-weight: 500; border-top-left-radius: 0px; padding-top: 25px; padding-bottom: 25px; } ul.header-currency { display: flex; margin-top: 14px; justify-content: space-between; margin-bottom: 20px; } ul.header-currency li { margin: 0px 10px; width: 30px; height: 30px; text-align: center; background: #E8F1EB; border-radius: 30px; border-top-left-radius: 0px; line-height: 30px; border: 1px solid #E8F1EB !important; } ul.header-currency li span { font-weight: 400; color: #164B3F; font-size: 16px; line-height: normal; } ul.header-currency li:last-child {/* margin-right: 0; */ } .intro .main-banner .slider .slick-track { display: flex !important; } .intro .main-banner .slider .slick-slide { height: inherit !important; } .intro .main-banner .slider .item .info .action a { backface-visibility: hidden; -webkit-backface-visibility: hidden; } .intro .main-banner .slider .item .info .action a svg{ opacity: 1!important;backface-visibility: hidden; -webkit-backface-visibility: hidden; width: 20px; height: 20px; } .clearfix{ clear: both; } .custom__link1{-moz-transition: all 0.1s ease-in; -webkit-transition: all 0.1s ease-in; transition: all 0.1s ease-in; text-decoration: none!important; color: #164B3F; font-weight: 500; } .custom__link1:hover{ color: #263B35; } .custom_link_category{ display: -webkit-inline-box; display: -ms-inline-flexbox; display: -webkit-inline-flex; display: inline-flex; align-items: center; height: 20px; padding-right: 30px; color: #164B3F; text-decoration: none; font-size: 13px; font-weight: 600; background: url(../images/icon/right-blue.svg) no-repeat right 5px center; -moz-transition: all 0.1s ease-in; -webkit-transition: all 0.1s ease-in; transition: all 0.1s ease-in; margin-top: 15px;} .custom_link_category:hover{ background: url(../images/icon/right-blue.svg) no-repeat right center; color: #263B35; } .zekat-btn { display: -webkit-inline-box; display: -ms-inline-flexbox; display: -webkit-inline-flex; display: inline-flex; align-items: center; height: 50px; padding: 0px 30px 0px 20px; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; background: #164B3F; font-size: 13px; font-weight: 600; color: #fff !important; text-decoration: none; position: relative; cursor: pointer; line-height: 100%; -moz-transition: all 0.1s ease-in; -webkit-transition: all 0.1s ease-in; transition: all 0.1s ease-in; } .zekat-btn:hover { opacity: 0.9; filter: alpha(opacity=90); } .zekat-btn .icon { display: block; width: 24px; height: 24px; background: url(../images/icon/donate-white.svg) no-repeat center center; background-size: 24px 24px; margin-right: 5px; } /* Umut Isigi: fixed theme accents; slider settings remain managed by the panel. */ body { background-color: #FAF8F2; } header .menu ul li a.more, .mobile-navigation .menu .item.more .acr-title { color: #F2C14E; } header .donate > a, header.fixed .donate > a, header.menu-active .donate > a { background-color: #F2C14E; color: #164B3F !important; } header .donate > a:hover, header.fixed .donate > a:hover, header.menu-active .donate > a:hover { background-color: #E7B43C; opacity: 1; } header .donate > a .icon, header.fixed .donate > a .icon, header.menu-active .donate > a .icon { filter: brightness(0) saturate(100%); } /* Footer payment mobile fix */ @media (max-width: 991px) { footer.umut-footer .footer-bottom { flex-direction: column; align-items: flex-start; gap: 18px; } footer.umut-footer .footer-payment { display: none !important; width: 0 !important; max-width: 0 !important; flex: 0 0 auto !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; } footer.umut-footer .footer-payment img { display: none !important; } footer.umut-footer .copyright, footer.umut-footer .other-menu { width: 100%; } } @media (max-width: 600px) { footer.umut-footer .content { overflow: hidden; } footer.umut-footer .footer-bottom { padding-top: 22px; padding-bottom: 0; } footer.umut-footer .other-menu { margin-bottom: 0; } }