@import "https://fonts.googleapis.com/css?family=Playfair+Display:400,700|Roboto:300,400,500,700"; @font-face { font-family: goldman-regular; src: url(../fonts/Goldman-Regular.woff)format("woff"); font-style: normal; font-display: swap } html { background-color: #000 } body { line-height: 1.2; font-family: roboto, sans-serif; -webkit-font-smoothing: antialiased; font-size: 15px; color: #4c4c4c } p { font-weight: 400; color: #4c4c4c; font-size: 15px; line-height: 1.8; font-family: roboto, sans-serif; } h1, h2, h3, h4, h5, h6 { color: #000; font-family: playfair display, serif; line-height: 1.2 } h1, .h1 { font-size: 80px } @media(max-width:991px) { h1, .h1 { font-size: 65px } } h2, .h2 { font-size: 60px } @media(max-width:991px) { h2, .h2 { font-size: 50px } } h3, .h3 { font-size: 40px } @media(max-width:991px) { h3, .h3 { font-size: 32px } } h4, .h4 { font-size: 22px } @media(max-width:991px) { h4, .h4 { font-size: 20px } } h5, .h5 { font-size: 18px } h6, .h6 { font-size: 14px } .btn { font-size: 22px; font-family: playfair display, serif; text-transform: capitalize; padding: 16px 44px; border-radius: 5px; font-weight: 600; border: 0; position: relative; z-index: 1; transition: .2s ease } .btn:focus { outline: 0; box-shadow: none !important } .btn:active { box-shadow: none } .btn-sm { font-size: 15px; padding: 10px 30px } .btn-xs { padding: 5px 10px; font-size: 15px } .btn-primary { background: var(--primary-color); color: #fff } .btn-primary.active { opacity: .8 } .btn-primary:active { background: var(--primary-color) !important } .btn-primary:hover { background: var(--primary-color) } .btn-primary.focus, .btn-primary.active { background: var(--primary-color) !important; box-shadow: none !important } .btn-transparent { background: 0 0; color: var(--primary-color); font-weight: 700 } .btn-transparent:active, .btn-transparent:hover { color: var(--primary-color) } body { background-color: #fff; overflow-x: hidden } ::selection { background: var(--primary-color); color: #fff } .preloader { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: #fff; z-index: 999999; display: flex; align-items: center; justify-content: center } ol, /* ul { list-style-type: none; margin: 0 } */ ul { line-height: 1.8; } img { vertical-align: middle; border: 0 } a, a:hover, a:focus { text-decoration: none } a, button, select { cursor: pointer; transition: .2s ease } a:focus, button:focus, select:focus { outline: 0 } a.text-dark:hover { color: var(--primary-color) !important } a:hover { color: var(--primary-color) } .section { padding-top: 75px; padding-bottom: 75px } .section-title { padding-top: 80px; padding-bottom: 30px; font-family: goldman-regular } .training-title { padding-top: 60px; padding-bottom: 20px; } .bg-cover { background-size: cover; background-position: 50%; background-repeat: no-repeat } .overlay { position: relative } .overlay::before { position: absolute; content: ''; height: 100%; width: 100%; top: 0; left: 0; background: #000; opacity: .5 } .outline-0 { outline: 0 !important } .d-unset { display: unset !important } .bg-primary { background: var(--primary-color) !important } .bg-gray { background: #eaeaea !important } .text-primary { color: var(--primary-color) !important } .text-color { color: #4c4c4c } .text-dark { color: #000 !important } .text-light { color: #999 !important } .mb-10 { margin-bottom: 10px !important } .mb-20 { margin-bottom: 20px !important } .mb-30 { margin-bottom: 30px !important } .mb-40 { margin-bottom: 40px !important } .mb-50 { margin-bottom: 50px !important } .mb-60 { margin-bottom: 60px !important } .mb-70 { margin-bottom: 70px !important } .mb-80 { margin-bottom: 80px !important } .mb-90 { margin-bottom: 90px !important } .mb-100 { margin-bottom: 100px !important } .zindex-1 { z-index: 1 } .rounded-lg { border-radius: 15px } .overflow-hidden { overflow: hidden } .font-primary { font-family: roboto, serif !important } .font-secondary { font-family: playfair display, serif !important } .font-tertiary { font-family: goldman-regular !important } .shadow { box-shadow: 0 18px 39.1px 6.9px rgba(224, 241, 255, .34) !important } .bg-dark { background-color: #222 !important } .icon { font-size: 45px } .icon-bg { height: 100px; width: 100px; line-height: 100px; text-align: center } .icon-light { color: #c8d5ef } .form-control { border: 0; border-radius: 0; border-bottom: 1px solid #c7c7c7; height: 60px } .form-control:focus { border-color: var(--primary-color); outline: 0; box-shadow: none !important } textarea.form-control { height: 120px } .card { border: 0 } .card-header { border: 0 } .card-footer { border: 0 } .navigation { padding: 40px 18%; transition: .3s ease } .navigation.nav-bg { background-color: #000; padding-top: 5px; padding-bottom: 5px; padding-left: auto; padding-right: auto } @media(max-width:991px) { .navigation.nav-bg { padding: 5px 20px } } @media(max-width:991px) { .navigation { padding: 20px; background: var(--primary-color) } } .navbar .nav-item .nav-link { font-family: goldman-regular; font-weight: 700; text-transform: uppercase; padding: 7px; margin: 6px } .navbar .nav-item.active .nav-link { color: #000; background: #fff } .navbar-dark .navbar-nav .nav-link { color: #fff } .hero-area { padding: 250px 0 150px; position: relative; } @media(max-width:767px) { .hero-area { padding: 200px 0 150px; overflow: hidden } } .hero-area h1 { position: relative; z-index: 2 } .layer { position: absolute; z-index: 1 } #l1 { bottom: 0; left: 0 } #l2 { top: 190px; left: -250px } #l3 { top: 200px; left: 40% } #l4 { top: 200px; right: 40% } #l5 { top: 100px; right: -150px } #l6 { bottom: -20px; left: 10% } #l7 { bottom: 100px; left: 20% } #l8 { bottom: 160px; right: 45% } #l9 { bottom: 100px; right: -10px } .layer-bg { position: absolute; bottom: 0; left: 0 } .progress-wrapper { height: 130px; overflow: hidden } .wave { position: absolute; width: 100%; height: 100% } .wave::before, .wave::after { content: ""; position: absolute; width: 800px; height: 800px; bottom: 0; left: 50%; background-color: rgba(255, 255, 255, .4); border-radius: 45%; transform: translateX(-50%)rotate(0); animation: rotate 6s linear infinite; z-index: 10 } .wave::after { border-radius: 47%; background-color: rgba(255, 255, 255, .9); transform: translateX(-50%)rotate(0); animation: rotate 10s linear -5s infinite; z-index: 20 } @keyframes rotate { 50% { transform: translateX(-50%)rotate(180deg) } 100% { transform: translateX(-50%)rotate(360deg) } } .edu-bg-image { position: absolute; left: 0; top: -250px } .hover-bg-primary { transition: .3s ease } .hover-bg-primary:hover { background: var(--primary-color) } .hover-bg-primary:hover * { color: #fff } .active-bg-primary { transition: .3s ease; background: var(--primary-color) } .active-bg-primary * { color: #fff } .hover-shadow { transition: .2s ease } .hover-shadow:hover { box-shadow: 0 18px 40px 8px rgba(224, 241, 255, .54) !important } .hover-wrapper { overflow: hidden } .hover-wrapper img { transition: .3s ease; transform: scale(1.1) } .hover-wrapper:hover img { transform: scale(1) } .hover-wrapper:hover .hover-overlay { opacity: 1; visibility: visible } .hover-overlay { position: absolute; height: 100%; width: 100%; border-radius: inherit; top: 0; left: 0; background: rgba(0, 0, 0, .3); opacity: 0; visibility: hidden; transition: .3s ease } .hover-content { position: absolute; top: 50%; transform: translateY(-50%); left: 0; right: 0; text-align: center } .testimonial-content strong { color: #2bfdff; font-weight: 400 } .testimonial-bg-shapes .container { position: relative; z-index: 1 } .testimonial-bg-shapes .bg-map { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) } .testimonial-bg-shapes .bg-shape-1 { position: absolute; left: 100px; top: -50px } .testimonial-bg-shapes .bg-shape-2 { position: absolute; right: 150px; top: 50px } .testimonial-bg-shapes .bg-shape-3 { position: absolute; right: 50px; top: 200px } .testimonial-bg-shapes .bg-shape-4 { position: absolute; left: 100px; bottom: 200px } .testimonial-bg-shapes .bg-shape-5 { position: absolute; right: 200px; bottom: -50px } .footer-section { padding-top: 10px; padding-bottom: 10px; background: #000 } .footer-section a { color: #fff } .footer-bottom a { color: #999; text-decoration: underline } .footer-section a:hover { color: #fff; text-decoration: underline } .section-on-footer { margin-bottom: -250px } .shadow-down { position: relative } .shadow-down::before { position: absolute; content: ""; box-shadow: 0 0 80.75px 14.25px rgba(224, 241, 255, .34); height: 100%; width: 100%; left: 0; top: 0; z-index: -1 } .card-lg { flex-direction: row-reverse; align-items: center } @media(max-width:991px) { .card-lg { flex-direction: column } } blockquote { display: inline-block; padding: 10px 20px; background: #eaeaea; border-left: 2px solid var(--primary-color); font-style: italic; font-size: 22px } .content * { margin-bottom: 20px } .content strong { font-family: playfair display, serif; font-size: 22px; font-weight: 400; color: #000; display: inherit; line-height: 1.5 } .page-title-alt { padding: 250px 0 25px } .border-thick { border: 10px solid } .drag-lg-top { margin-top: -230px } @media(max-width:991px) { .drag-lg-top { margin-top: 0 } } .page-title-alt .container { position: relative; z-index: 1 } .page-title-alt .bg-shape-1 { position: absolute; left: 0; top: 0; height: 100% } .page-title-alt .bg-shape-2 { position: absolute; left: 70px; top: 100px } .page-title-alt .bg-shape-3 { position: absolute; left: 30%; top: 50px; transform: rotate(180deg) } .page-title-alt .bg-shape-4 { position: absolute; left: 100px; bottom: 100px } .page-title-alt .bg-shape-5 { position: absolute; left: 40%; bottom: -25px } .page-title-alt .bg-shape-6 { position: absolute; bottom: 100px; right: -100px } .page-title { padding: 150px 0 25px } .page-title .container { position: relative; z-index: 1 } .page-title .bg-shape-1 { position: absolute; left: 0; bottom: 0; width: 100% } .page-title .bg-shape-2 { position: absolute; left: -20px; top: -10px } .page-title .bg-shape-3 { position: absolute; left: 10%; top: 100px } .page-title .bg-shape-4 { position: absolute; left: 50%; top: -20px } .page-title .bg-shape-5 { position: absolute; left: 90px; bottom: -50px; transform: rotate(180deg) } .page-title .bg-shape-6 { position: absolute; right: 20%; bottom: -20px } .page-title .bg-shape-7 { position: absolute; right: -220px; bottom: -100px } .filter-controls li { cursor: pointer } .filter-controls li.active { font-weight: 700 } .social-icons a { height: 100px; width: 100px; line-height: 102px; border-radius: 50%; display: block; box-shadow: 0 18px 39.1px 6.9px rgba(224, 241, 255, .34); color: #fff; background-color: var(--primary-color); font-size: 20px; text-align: center } .project-meta { display: flex; align-items: center } .project-meta i { height: 100px; min-width: 100px; line-height: 100px; background-color: #fff; color: var(--primary-color); border-radius: 50%; text-align: center; display: block; box-shadow: 0 18px 39.1px 6.9px rgba(224, 241, 255, .34); font-size: 30px } .project-meta h4 { font-weight: 700; font-size: 24px } .project-meta p { margin-bottom: 0 } .sticky-offset { top: 56px } .bottom-banner { padding-top: 30px; padding-bottom: 40px; } .post-header { padding-top: 80px; } .post-container { display: flex; width: 100%; height: 100%; flex-direction: column; overflow: hidden; } .post { flex-grow: 1; border: 0; margin: 0px; padding: 0px; height: 10000px; } .circles{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; } .circles li{ position: absolute; display: block; list-style: none; width: 20px; height: 20px; background: rgba(255, 255, 255, 0.2); animation: animate 25s linear infinite; bottom: -150px; } .circles li:nth-child(1){ left: 25%; width: 80px; height: 80px; animation-delay: 0s; } .circles li:nth-child(2){ left: 10%; width: 20px; height: 20px; animation-delay: 2s; animation-duration: 12s; } .circles li:nth-child(3){ left: 70%; width: 20px; height: 20px; animation-delay: 4s; } .circles li:nth-child(4){ left: 40%; width: 60px; height: 60px; animation-delay: 0s; animation-duration: 18s; } .circles li:nth-child(5){ left: 65%; width: 20px; height: 20px; animation-delay: 0s; } .circles li:nth-child(6){ left: 75%; width: 110px; height: 110px; animation-delay: 3s; } .circles li:nth-child(7){ left: 35%; width: 150px; height: 150px; animation-delay: 7s; } .circles li:nth-child(8){ left: 50%; width: 25px; height: 25px; animation-delay: 15s; animation-duration: 45s; } .circles li:nth-child(9){ left: 20%; width: 15px; height: 15px; animation-delay: 2s; animation-duration: 35s; } .circles li:nth-child(10){ left: 85%; width: 150px; height: 150px; animation-delay: 0s; animation-duration: 11s; } @keyframes animate { 0%{ transform: translateY(0) rotate(0deg); opacity: 1; border-radius: 0; } 100%{ transform: translateY(-1000px) rotate(720deg); opacity: 0; border-radius: 100%; } } .subscribe { background-color : #dc3545; color: white; padding: 15px 15px; border-radius: 50%; border: 1px solid #dc3545; } #subbutton { position: fixed; bottom: 10px; right: 10px; /* z-index: 999999; */ } html { width: 100%; }