:root { --color-primary: #00368C; --color-secondary: #1A4450; --color-white: #FFF; --color-light: #F5F5F5; --color-gray: #ccc; --color-dark: #999; --color-black: #000; --header-height: 3.75rem; --font-weight: 400; --font-weight-light: 300; --font-weight-normal: 400; --font-weight-bold: 700; --border-radius: 1.25rem; --box-shadow: 0 0 2.5rem #0001; --transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1); } html { scroll-behavior: smooth; } body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; min-height: 100vh; background-color: var(--color-light); } body > main { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; } @media (min-width: 1400px) { .container { max-width: 1320px; } } .video-mask { position: relative; padding-top: 56.25%; height: 0; } .video { position: absolute; top: 0; width: 100%; height: 100%; } body { font-family: Ubuntu, sans-serif; font-weight: var(--font-weight); } h1, h2, h3 { font-weight: var(--font-weight-normal); color: var(--color-primary); } a:hover, a:active, a:focus { text-decoration: none; } .header .bg-dark { background-color: #0009 !important; -webkit-backdrop-filter: blur(0.75rem); backdrop-filter: blur(0.75rem); } .header .navbar-toggler { border: none; outline: none; } .header .nav-item.active .nav-link::after { background-color: var(--color-white); -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } .header .nav-link { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: var(--header-height); padding: 0 1.25rem !important; font-weight: 600; font-size: 0.875rem; color: var(--color-white); text-transform: uppercase; white-space: nowrap; } .header .nav-link::after { position: absolute; left: 0; bottom: 0; width: 100%; height: 0.125rem; background-color: var(--color-white); -webkit-transition: var(--transition); transition: var(--transition); -webkit-transform: scale3d(0, 1, 1); transform: scale3d(0, 1, 1); content: ''; } .header .nav-link:hover, .header .nav-link:focus, .header .nav-link:active { color: var(--color-primary); } .header .nav-link:hover::after, .header .nav-link:focus::after, .header .nav-link:active::after { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } .dropdown-toggle::after { border: none; } .dropdown-menu { padding: 0px; margin: 0px; border-radius: 15px; overflow: hidden; } .dropdown-item { padding: 10px 20px; color: #999999; } .dropdown-item:hover { color: #000000; } .nav-submenu-item { background-color: var(--color-white) !important; color: var(--color-dark); } .footer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 2.5rem 0; background-color: var(--color-black); color: var(--color-white); } .footer-logo { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media (min-width: 992px) { .footer-logo { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } } .footer-logo img { display: inline-block; } .footer-nav { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .footer-menu, .footer-social { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 0; margin: 0; list-style: none; } @media (min-width: 992px) { .footer-menu, .footer-social { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } } .footer-menu a, .footer-social a { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 0.75rem 0.5rem; color: var(--color-white); white-space: nowrap; } .footer-menu a:hover, .footer-menu a:focus, .footer-menu a:active, .footer-social a:hover, .footer-social a:focus, .footer-social a:active { text-decoration: underline; text-underline-position: under; } .footer-copyright { display: block; font-size: 0.875rem; text-align: center; } @media (min-width: 992px) { .footer-copyright { text-align: left; } } .btn { border-radius: calc(var(--border-radius) / 2); padding: 0.5rem 2.5rem; font-size: 0.875rem; font-weight: var(--font-weight-bold); text-transform: uppercase; white-space: nowrap; } .btn-lg { padding: 1.25rem 3.75rem; } .btn.disabled, .btn:disabled { border: var(--color-gray); background-color: var(--color-light); color: var(--color-gray); pointer-events: none; } .btn-primary { background-color: var(--color-primary); border-color: var(--color-primary); } .btn-primary:hover, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active { border-color: var(--color-primary); background-color: var(--color-white); color: var(--color-primary); } .btn-primary:hover:focus, .btn-primary:focus:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus { -webkit-box-shadow: none; box-shadow: none; } .btn-secondary { background-color: var(--color-white); border-color: var(--color-white); color: var(--color-primary); } .btn-secondary:hover, .btn-secondary:focus, .btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active { border-color: var(--color-white); background-color: transparent; color: var(--color-white); } .btn-secondary:hover:focus, .btn-secondary:focus:focus, .btn-secondary:not(:disabled):not(.disabled):active:focus, .btn-secondary:not(:disabled):not(.disabled).active:focus { -webkit-box-shadow: none; box-shadow: none; } .btn-secondary2 { background-color: transparent; border-color: var(--color-white); color: var(--color-white); } .btn-secondary2:hover, .btn-secondary2:focus, .btn-secondary2:not(:disabled):not(.disabled):active, .btn-secondary2:not(:disabled):not(.disabled).active { border-color: var(--color-white); background-color: var(--color-white); color: var(--color-primary); } .btn-secondary2:hover:focus, .btn-secondary2:focus:focus, .btn-secondary2:not(:disabled):not(.disabled):active:focus, .btn-secondary2:not(:disabled):not(.disabled).active:focus { -webkit-box-shadow: none; box-shadow: none; } .btn-outline { border-color: var(--color-white); color: var(--color-white); } .btn-outline:hover, .btn-outline:focus, .btn-outline:not(:disabled):not(.disabled):active, .btn-outline:not(:disabled):not(.disabled).active { border-color: var(--color-white); background-color: var(--color-white); color: var(--color-black); } .btn-outline:hover:focus, .btn-outline:focus:focus, .btn-outline:not(:disabled):not(.disabled):active:focus, .btn-outline:not(:disabled):not(.disabled).active:focus { -webkit-box-shadow: none; box-shadow: none; } .btn-outline-primary { border-color: var(--color-primary); color: var(--color-primary); } .btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active { border-color: var(--color-primary); background-color: var(--color-primary); } .btn-outline-primary:hover:focus, .btn-outline-primary:focus:focus, .btn-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:not(:disabled):not(.disabled).active:focus { -webkit-box-shadow: none; box-shadow: none; } .form-control { border-color: var(--color-light); background-color: var(--color-light); } .form-control:focus { -webkit-box-shadow: none; box-shadow: none; background-color: var(--color-light); } .custom-select { border-color: var(--color-light); } .custom-select:focus { -webkit-box-shadow: none; box-shadow: none; } .custom-control-input:checked ~ .custom-control-label::before { border-color: var(--color-primary); background-color: var(--color-primary); } .input-group > .form-control { border-radius: calc(var(--border-radius) / 2); } .input-group-text { border: none; background-color: var(--color-light); } .custom-select { background-color: var(--color-light); } .modal { cursor: pointer; } .modal-dialog { cursor: auto; } .modal-content { padding: 1.25rem; border-radius: var(--border-radius); } .page-item { margin: 0 0.5rem; } .page-item:first-child .page-link, .page-item:last-child .page-link { border-radius: calc(var(--border-radius) / 2); } .page-link { border: none; border-radius: calc(var(--border-radius) / 2); background-color: transparent; color: var(--color-black); } .page-item.disabled .page-link { background-color: transparent; color: var(--color-gray); } .page-item.active .page-link { background-color: var(--color-primary); } .page-link:hover { background-color: var(--color-white); color: var(--color-primary); } .page-link:focus { -webkit-box-shadow: none; box-shadow: none; } .progress { height: 0.5rem; } .progress-bar { background-color: var(--color-primary); border-radius: 0.5rem; } .owl-nav { position: absolute; top: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 100%; width: 100%; font-size: 2.5rem; color: var(--color-white); pointer-events: none; } .owl-nav .owl-prev { margin-right: auto; } .owl-nav .owl-next { right: 0; } .owl-nav .owl-prev, .owl-nav .owl-next { display: block; outline: none; pointer-events: auto; } .owl-nav .owl-prev span, .owl-nav .owl-next span { display: block; padding: 1.25rem; } .owl-dots { position: absolute; z-index: 1; bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; color: var(--color-white); padding: 1.25rem; pointer-events: none; } .owl-dots .owl-dot { display: block; width: 0.75rem; height: 0.75rem; border: 0.125rem solid var(--color-white) !important; border-radius: 50%; outline: none; pointer-events: auto; } .owl-dots .owl-dot:not(:last-child) { margin-right: 0.5rem; } .owl-dots .owl-dot.active { background-color: var(--color-white); } .owl-carousel .owl-stage { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; } .hero-item { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; min-height: 70vh; } .hero-heading { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; min-height: 30vh; } .hero-full { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; min-height: 90vh; } .hero-image { position: absolute; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .hero-content { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 5rem 1.25rem; padding-top: calc(var(--header-height) + 5rem); text-align: center; color: var(--color-white); -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .hero-title { color: var(--color-white); } .hero-half { width: 50%; margin: 0 auto; } @media (max-width: 991px) { .hero-half { width: 100%; } } .hero-menu { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; list-style: none; margin: 0; padding: 0; } .hero-menu li { margin: 0.75rem 0.75rem; } .blog-hero { position: relative; background-color: var(--color-black); } .blog-hero-item { position: relative; } .blog-hero-item::before { position: absolute; z-index: 10; top: 0; width: 100%; height: 100%; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(70%, transparent), to(#081529)); background-image: linear-gradient(to bottom, transparent 70%, #081529); content: ''; pointer-events: none; } @media (min-width: 992px) { .blog-hero-item::before { background-image: -webkit-gradient(linear, left top, right top, color-stop(30%, #081529), to(transparent)); background-image: linear-gradient(to right, #081529 30%, transparent); } } .blog-hero-image { width: 100%; height: auto; max-height: 50vh; padding-top: var(--header-height); -o-object-fit: cover; object-fit: cover; -o-object-position: right; object-position: right; } @media (min-width: 992px) { .blog-hero-image { padding-top: 0; } } .blog-hero-content { padding: 2.5rem 1.25rem; color: var(--color-white); background-color: #081529; } @media (min-width: 992px) { .blog-hero-content { position: absolute; bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; height: 100%; z-index: 50; background-color: transparent; } } .blog-hero-title { color: var(--color-white); } .search, .streams, .certificates, .instructors, .contributors, .static-content { padding: 2rem 0; } .search, .streams { background-color: var(--color-white); } .streams { padding-top: 0; } .stream { overflow: hidden; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; border: none; border-radius: var(--border-radius); margin: 1.25rem 0; -webkit-box-shadow: var(--box-shadow); box-shadow: var(--box-shadow); background-color: var(--color-white); text-align: center; } .stream .card-title { color: var(--color-primary); } .stream .card-footer { border: none; background-color: var(--color-white); padding-bottom: 2.5rem; } .stream .card-img-top { aspect-ratio: 380/200; -o-object-fit: cover; object-fit: cover; } .certificate { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 1.25rem 0; padding: 2.5rem; border-radius: var(--border-radius); -webkit-box-shadow: var(--box-shadow); box-shadow: var(--box-shadow); background-color: var(--color-white); text-align: center; } @media (min-width: 992px) { .certificate { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; text-align: left; } } .certificate-content { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .certificate-image { border-radius: 50%; margin: 2.5rem 0; margin-right: 2.5rem; -o-object-fit: cover; object-fit: cover; } .certificate-summary { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-wrap: wrap; flex-wrap: wrap; } @media (min-width: 992px) { .certificate-summary { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } } .certificate-summary-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 0.5rem 0; margin-right: 0.5rem; white-space: nowrap; } .certificate-summary-item .icon { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 2.5rem; height: 2.5rem; margin-right: 0.25rem; padding: 0.25rem; border: 0.125rem solid var(--color-primary); border-radius: 50%; -webkit-box-shadow: var(--box-shadow); box-shadow: var(--box-shadow); background-color: var(--color-white); color: var(--color-primary); } .certificate-courses { display: grid; gap: 0.75rem; margin: 1.25rem 0; } @media (min-width: 992px) { .certificate-courses { grid-template-columns: repeat(2, minmax(auto, 1fr)); } .certificate-related .certificate-courses { grid-template-columns: 1fr; } } .certificate-course { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0.5rem; border: 0.125rem solid var(--color-light); border-radius: calc(var(--border-radius) / 2); background-color: var(--color-white); color: var(--color-black); text-align: left; } .certificate-course span { margin-right: auto; } .certificate-course-image { border-radius: 50%; margin-right: 0.5rem; width: 1.875rem; height: 1.875rem; -o-object-fit: fill; object-fit: fill; } .instructors { background-color: var(--color-primary); color: var(--color-white); text-align: center; } .instructors-heading { color: var(--color-white); } .instructor { padding: 1.25rem 0; color: var(--color-white); -webkit-transition: var(--transition); transition: var(--transition); } .instructor:hover { opacity: 50%; color: var(--color-white); cursor: pointer; } .instructor-image { border-radius: 50%; } .instructor-title { margin: 0.5rem 0; font-size: 1.25rem; color: var(--color-white); } .contributor { display: block; padding: 1.25rem 0; text-align: center; color: var(--color-black); -webkit-transition: var(--transition); transition: var(--transition); } .contributor:hover { color: var(--color-black); opacity: 50%; } .contributor-image { border-radius: 50%; } .contributor-title { font-size: 1.25rem; margin: 0.5rem 0; } .forgot-password { background-color: var(--color-white); color: var(--color-black); border-radius: var(--border-radius); padding: 2.5rem; } code.code-block { background: #ECEDF0; padding: 3px; border-radius: 3px; color: #000000; } .static-title { font-size: 2.5rem; margin-bottom: 2.5rem; } figcaption { display: none; } figcaption.active { display: block !important; } .authorDetails .image { position: relative; width: 100%; height: 0; margin: 0 auto; padding-top: 100%; } .authorDetails .image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 100%; background-size: cover; } .authorDetails .name { font-size: 1.5rem; font-weight: 600; color: var(--color-black); } .authorDetails .position { font-size: 1rem; } .authorDetails .content { margin-top: 1.25rem; padding-right: 1.25rem; font-size: 0.875rem; max-height: 25vh; overflow-y: scroll; } .courses { padding: 2rem 0; background-color: var(--color-light); } .courses .custom-select { background-color: var(--color-white); border-radius: calc(var(--border-radius) / 2); } .course { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 1.25rem 0; padding: 2.5rem; border-radius: var(--border-radius); -webkit-box-shadow: var(--box-shadow); box-shadow: var(--box-shadow); background-color: var(--color-white); text-align: center; } @media (min-width: 992px) { .course { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; text-align: left; } } .course-page { padding: 5rem 0; background-color: var(--color-white); } .course-content { word-break: break-word; } .course-content h2, .course-content p { margin: 1.25rem 0; } .course-content img { max-width: 100%; } .course-content img.featured { width: 100%; border-radius: var(--border-radius); } .course-related { margin-top: 2.5rem; } .course-image { width: 10rem; height: 10rem; border-radius: 50%; -o-object-fit: cover; object-fit: cover; } @media (min-width: 992px) { .course-image { margin: 2.5rem 0; margin-right: 2.5rem; } } @media (min-width: 992px) { .course-details { display: -webkit-box; display: -ms-flexbox; display: flex; } } .course-summary { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; min-width: 10rem; margin: 1.25rem 0; } @media (min-width: 992px) { .course-summary { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: start; } } .course-summary-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-right: 0.5rem; margin-bottom: 0.5rem; white-space: nowrap; } .course-summary-item .icon { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 2.5rem; height: 2.5rem; margin-right: 0.25rem; padding: 0.25rem; border: 0.125rem solid var(--color-gray); border-radius: 50%; -webkit-box-shadow: var(--box-shadow); box-shadow: var(--box-shadow); background-color: var(--color-white); color: var(--color-primary); } .lessons { border: 0.125rem solid var(--color-light); border-bottom: none; } .lessons .mandatory { font-weight: bold; } .lesson-section { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; padding: 0.75rem; background-color: var(--color-white); border: none; border-bottom: 0.125rem solid var(--color-light); color: var(--color-secondary); } .lesson-section:focus { outline: none; } .lesson-section[aria-expanded="true"] { background-color: var(--color-primary) !important; color: var(--color-white); } .lesson-section svg { margin-right: 0.75rem; } .lesson-content { padding: 0; margin: 0; list-style: none; } .lesson-content a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0.75rem; border: none; border-bottom: 0.125rem solid var(--color-light); background-color: var(--color-light); color: var(--color-black); } .lesson-content a:hover, .lesson-content a:active, .lesson-content a:focus { color: var(--color-primary); } .lesson-content a.disabled { color: var(--color-gray); cursor: auto; pointer-events: none; } .lesson-content a.active { color: #0056b3; } .lesson-content a svg { margin-right: 0.75rem; } .question-answer-item .custom-control-label { width: 100%; } .question-answer-item img { max-width: 100%; height: auto !important; } .question-answer-item .videoEmbed { position: relative; overflow: hidden; width: 100%; padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */ } .question-answer-item .videoEmbed iframe { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; } .question-answer-item .answer-not-choose { color: #6c757d; } .vimeo-wrap { position: relative; overflow: hidden; width: 100%; padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */ } .vimeo-wrap .responsive-iframe { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; } .popup-text { text-decoration: underline; text-underline-position: under; color: #1A4550; } .popover { border: none; border-radius: calc(var(--border-radius) / 2); -webkit-box-shadow: 0 0.25rem 0.5rem #0003, 0 0 1.25rem #0003; box-shadow: 0 0.25rem 0.5rem #0003, 0 0 1.25rem #0003; padding: 0.5rem; } @media (min-width: 1400px) { .popover { max-width: 40rem; } } .popover img { display: block; width: 7.5rem; height: 7.5rem; -o-object-fit: cover; object-fit: cover; margin: 0 auto; margin-bottom: 0.75rem; } @media (min-width: 1400px) { .popover img { margin-right: 1.25rem; margin-bottom: 0; } } @media (min-width: 1400px) { .popover .popover-body { display: -webkit-box; display: -ms-flexbox; display: flex; } } .arrow { -webkit-box-shadow: 0 0 2.5rem #0003; box-shadow: 0 0 2.5rem #0003; } .bs-popover-top .arrow::before, .bs-popover-top .arrow::after { border-top-color: #fff; } .bs-popover-bottom .arrow::before, .bs-popover-bottom .arrow::after { border-bottom-color: #fff; } .bs-popover-left .arrow::before, .bs-popover-left .arrow::after { border-left-color: #fff; } .bs-popover-right .arrow::before, .bs-popover-right .arrow::after { border-right-color: #fff; } code[class*="language-"], pre[class*="language-"] { white-space: break-spaces; word-break: break-word; } .course-content td { word-break: break-word; vertical-align: middle; } .course-act-button { padding: 0.5rem 1.5rem; } #course-completed-notify-modal img { width: 150px; } #course-completed-notify-modal .close-modal { position: absolute; top: -8px; right: -10px; width: 20px; height: 20px; padding: 0; line-height: 0px; border: none; color: #fff; background: #00368C; font-weight: bold; } .stream-award-icon { color: var(--color-primary); } .stream-certificate-notify { color: var(--color-black); } .account { padding-top: calc(var(--header-height) + 2.5rem); padding-bottom: 2.5rem; } .account-menu { overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 0; margin: 0; margin-bottom: 1.25rem; list-style: none; border: 0.125rem solid var(--color-light); border-radius: calc(var(--border-radius) / 2); background-color: var(--color-white); } .account-menu li:last-child a { border-bottom: none; } .account-menu a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0.75rem; border: none; border-bottom: 0.125rem solid var(--color-light); background-color: var(--color-white); color: var(--color-black); } .account-menu a:hover, .account-menu a:active, .account-menu a:focus { color: var(--color-secondary); } .account-menu a.active { background-color: var(--color-primary); border-color: var(--color-primary); color: var(--color-white); } .account-menu a.active .icon { color: var(--color-white); } .account-menu a .icon { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 2.5rem; height: 2.5rem; margin-right: 0.25rem; padding: 0.25rem; border: 0.125rem solid var(--color-gray); border-radius: 50%; color: var(--color-primary); } .account-content { padding: 2.5rem; border: 0.125rem solid var(--color-light); border-radius: calc(var(--border-radius) / 2); background-color: var(--color-white); text-align: center; } .account-content .btn { width: 100%; } @media (min-width: 992px) { .account-content { text-align: left; } .account-content .btn { width: auto; } } .account-course { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 1.25rem; padding: 1.25rem; margin-bottom: 1.25rem; border-radius: var(--border-radius); -webkit-box-shadow: var(--box-shadow); box-shadow: var(--box-shadow); background-color: var(--color-white); -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } @media (min-width: 992px) { .account-course { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } } .account-course-image { border-radius: 50%; width: 3.75rem; height: 3.75rem; -o-object-fit: fill; object-fit: fill; } .account-course-content { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .account-course-summary { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media (min-width: 992px) { .account-course-summary { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } } .account-course-summary-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-right: 1.25rem; margin-bottom: 0.5rem; white-space: nowrap; } .account-course-summary-item .icon { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 2.5rem; height: 2.5rem; margin-right: 0.25rem; padding: 0.25rem; border: 0.125rem solid var(--color-gray); border-radius: 50%; -webkit-box-shadow: var(--box-shadow); box-shadow: var(--box-shadow); background-color: var(--color-white); color: var(--color-primary); } .account-course-button { -ms-flex-item-align: stretch; align-self: stretch; min-width: 11.25rem; } .account-certificate { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 1.25rem; border: 0.125rem solid var(--color-gray); border-radius: var(--border-radius); margin-bottom: 1.25rem; } .account-certificate-title { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 1.25rem 0; font-size: 1rem; font-weight: var(--font-weight); color: var(--color-secondary); } .account-certificate-image { overflow: hidden; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: calc(var(--border-radius) / 2); } .account-certificate-fg { position: relative; z-index: 10; max-width: 10rem; padding: 1.25rem; } .account-certificate-bg { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .account-certificate-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media (min-width: 567px) { .account-certificate-content { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } } .account-certificate-content .btn { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; padding: 0.5rem 1.25rem; } .account-certificate-popup { position: absolute; z-index: 10; bottom: 100%; display: none; padding: 1.25rem; border: 0.125rem solid var(--color-gray); border-radius: calc(var(--border-radius) / 2); background-color: var(--color-white); -webkit-transform: translate(-50%, -1.25rem); transform: translate(-50%, -1.25rem); } .account-certificate-popup-title { font-size: 1rem; } .account-certificate-popup-links { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .account-certificate-popup-links a { -webkit-appearance: none; -moz-appearance: none; appearance: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 0 0.25rem; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 2.5rem; width: 2.5rem; background: none; border-radius: var(--border-radius); border: 0.125rem solid var(--color-gray); } .account-certificate-popup-links a img { width: 1.25rem; height: 1.25rem; } .account-certificate-actions { display: -webkit-box; display: -ms-flexbox; display: flex; margin-left: 1.25rem; } .account-certificate-actions .btn { padding: 0.5rem; width: auto; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; color: var(--color-primary); } .account-certificate-actions .btn-social { position: relative; } .account-certificate-courses { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 0.5rem; } .account-certificate-course { color: var(--color-black); } .account-certificate-course:hover { color: var(--color-primary); } .account-certificate-course.disabled { color: var(--color-gray); cursor: default; pointer-events: none; } .account-certificate-course span { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; text-align: left; } .account-certificate-course i { color: var(--color-primary); -ms-flex-item-align: center; align-self: center; } .account-certificate-course { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 0.5rem; padding: 0.75rem; border: solid 0.125rem var(--color-light); border-radius: 1.25rem; } .certificate-card { position: relative; text-align: center; background-size: cover; max-width: 36rem; margin: 0 auto; aspect-ratio: 550/700; border-radius: var(--border-radius); } .certificate-card-dismiss { position: absolute; top: 0; right: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 2.5rem; height: 3.75rem; border: none; background-color: transparent; z-index: 9999; } @media (min-width: 992px) { .certificate-card-dismiss { width: 3.75rem; } } .certificate-card-dismiss:hover, .certificate-card-dismiss:active, .certificate-card-dismiss:focus { color: var(--color-primary); } .certificate-card .loading { position: absolute; top: calc(50% - 10px); } .certificate-card-content { font-size: 1.25rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-top: 80%; } @media (min-width: 992px) { .certificate-card-content { padding-top: 60%; } } .certificate-card-content h2 { font-weight: 600; color: var(--color-balck); } .certificate-card-content h3 { color: #32788C; color: var(--color-black); } .certificate-card-content h3.bold { font-weight: 600; } .certificate-card-content .sample-qr { width: 5rem; height: 5rem; min-width: 5rem; min-height: 5rem; position: relative; } .certificate-card-content .sample-qr svg { width: 100%; height: 100%; } @media (min-width: 540px) { .certificate-card-content .sample-qr { width: 7.5rem; height: 7.5rem; } } .certificate-card-content .qr { background-color: var(--color-white); } .certificate-card-actions { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 0.5rem; margin-top: 0.75rem; -ms-flex-wrap: wrap; flex-wrap: wrap; } @media (min-width: 540px) { .certificate-card-actions { -ms-flex-wrap: wrap; flex-wrap: wrap; } } .certificate-card-actions .btn { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: auto; } .certificate-card-actions .btn span { display: none; margin-left: 0.25rem; } @media (min-width: 540px) { .certificate-card-actions .btn span { display: inline; } } @media (max-width: 539px) { .certificate-card-actions .btn { padding: 0.3rem 1.5rem; } } .certificate-card.noborder { border: none; } .blog { position: relative; background-color: var(--color-white); } .blog-nav { position: absolute; width: 100%; z-index: 10; top: calc(var(--header-height) + 1.25rem); } .blog-nav-alt { padding: 1.25rem 0; padding-top: calc(var(--header-height) + 1.25rem); } .blog-nav-alt li.active a { color: var(--color-black) !important; } .blog-nav-alt a { color: var(--color-gray); } .blog-nav-alt a:hover, .blog-nav-alt a:active, .blog-nav-alt a:focus { color: var(--color-primary) !important; } .blog-menu { display: -webkit-box; display: -ms-flexbox; display: flex; list-style: none; margin: 0; padding: 0; } .blog-menu li.active a { color: var(--color-white); } .blog-menu li:not(:last-child) { margin-right: 1.25rem; } .blog-menu a { color: var(--color-gray); } .blog-menu a:hover, .blog-menu a:active, .blog-menu a:focus { color: var(--color-white); } .blog-featured { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; padding: 1.25rem 0; padding-top: calc(var(--header-height) + 2.5rem); background-color: var(--color-secondary); } .blog-featured-background { position: absolute; top: 0; bottom: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .blog-featured-item { padding: 1.25rem 0; } .blog-featured-item .post-image { height: auto; border-radius: var(--border-radius); margin-bottom: 1.25rem; } .blog-featured-item .post-image:hover, .blog-featured-item .post-image:active, .blog-featured-item .post-image:focus { -webkit-transform: none; transform: none; } .blog-featured-item .post-title { font-size: 2rem; color: var(--color-white); } .blog-featured-item .post-content { color: var(--color-white); } .blog-featured-item .post-divider { border-top: 0.0625rem solid var(--color-white); } .blog-featured-item .author-name, .blog-featured-item .author-position { color: var(--color-white); } .blog-featured-item .tag { font-size: 0.75rem; padding: 0.25rem 0.75rem; } .blog-menu { display: -webkit-box; display: -ms-flexbox; display: flex; list-style: none; margin: 0; padding: 0; } .blog-menu li.active a { color: var(--color-white); } .blog-menu li:not(:last-child) { margin-right: 1.25rem; } .blog-menu a { color: var(--color-gray); } .blog-menu a:hover, .blog-menu a:active, .blog-menu a:focus { color: var(--color-white); } .blog-posts { margin: 2.5rem 0; } .blog-post-content { word-break: break-word; } .blog-post-content img { margin: 1.25rem 0; border-radius: 0; max-width: 100% !important; height: auto !important; } .blog-static-content { background-color: var(--color-light); } .blog-static-content .tag-area { margin-top: 30px; } .blog-static-content .tag-area h5 { font-weight: var(--font-weight-normal); color: var(--color-primary); font-size: 18px; } .blog-static-content .tag-area hr { margin-top: 0px; margin-bottom: 1.5rem; } .blog-sidebar { position: sticky; top: 5rem; } .post { overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 100%; border-radius: var(--border-radius); background-color: var(--color-white); -webkit-box-shadow: var(--box-shadow); box-shadow: var(--box-shadow); } .post-header { overflow: hidden; position: relative; width: 100%; height: 0; padding-top: 56.25%; background-color: var(--color-black); } .post-header img { position: absolute; top: 0; bottom: 0; } .post-body { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; padding: 1.25rem; padding-bottom: 0; } .post-body:last-of-type { padding-bottom: 1.25rem; } .post-footer { padding: 1.25rem; padding-top: 0; } .post-title { font-size: 1.5rem; margin: 0.75rem 0; word-break: break-word; } a:hover .post-title, a:active .post-title, a:focus .post-title { color: var(--color-primary); } .post-image { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -webkit-transition: var(--transition); transition: var(--transition); } .post-image:hover, .post-image:active, .post-image:focus { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } .author { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .author-image { width: 3.75rem; height: 3.75rem; margin-right: 0.75rem; border-radius: 100%; } .author-position { font-size: 0.875rem; font-weight: var(--font-weight-light); } .author-box { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .author-box > div { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .author-box .author-image { width: 5.625rem; height: 5.625rem; border-radius: 50%; } .author-box .author-name { font-size: 1.25rem; } .author-box .author-divider { border-top: 0.0625rem solid var(--color-gray); margin: 0.5rem 0; } .tag { display: inline-block; border-radius: var(--border-radius); background-color: var(--color-primary); font-size: 10px; padding: 5px 20px; font-weight: var(--font-weight-bold); text-transform: uppercase; color: var(--color-white); margin-bottom: 10px; } .tag.sm { padding: 0.25rem 0.75rem; font-size: 0.5rem; margin-bottom: 0px; } .playlist { display: block; height: 100%; padding: 2.5rem 1.25rem; border-radius: var(--border-radius); background-image: url("/images/static-blog-item-background.png"); background-size: cover; color: var(--color-white); } .playlist-featured { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; padding: 1.25rem 0; padding-top: calc(var(--header-height) + 2.5rem); background-color: var(--color-secondary); color: var(--color-white); } .playlist-featured-background { position: absolute; top: 0; bottom: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .playlist-featured .author { padding: 2.5rem 0; } .playlist-featured .author-image { width: 7.5rem; height: 7.5rem; } .playlist-featured .author-name { font-size: 2rem; } .playlist-featured .author-position { font-size: 1.25rem; } .playlist:hover, .playlist:active, .playlist:focus { color: var(--color-white); opacity: 0.8; -webkit-transition: var(--transition); transition: var(--transition); } .playlist-title { margin-top: 1.25rem; font-size: 1.25rem; color: var(--color-white); } .playlist .author-image { width: 5.625rem; height: 5.625rem; } .topic { display: block; height: 100%; padding: 2.5rem 1.25rem; border-radius: var(--border-radius); background-image: url("/images/static-blog-item-background.png"); background-size: cover; color: var(--color-white); } .topic-title { font-size: 1.5rem; color: var(--color-white); } .topic:hover, .topic:active, .topic:focus { opacity: 0.8; -webkit-transition: var(--transition); transition: var(--transition); } .social-share { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .social-icon { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 2.5rem; height: 2.5rem; margin-left: 0.75rem; border-radius: 100%; border: 0.0625rem solid var(--color-black); background: none; -webkit-transition: var(--transition); transition: var(--transition); } .social-icon:hover, .social-icon:active, .social-icon:focus { background-color: var(--color-black); color: var(--color-white); } .book-section { padding: 5rem 0; background-color: #222; color: var(--color-white); } .book-section h1, .book-section h2, .book-section h3, .book-section h4, .book-section h5, .book-section h6 { color: var(--color-white); } .book-section img { max-width: 100%; } #search { scroll-margin-top: calc(var(--header-height) + 2.5rem); } .meta-box { padding: 1.25rem; margin-bottom: 1.25rem; border: 0.0625rem solid var(--color-gray); border-radius: var(--border-radius); background-color: var(--color-white); } .meta-box .tag { font-size: 0.75rem; margin-bottom: 0.5rem; } .input-search { -ms-flex-wrap: wrap; flex-wrap: wrap; } @media (max-width: 992px) { .input-search .form-control { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; -ms-flex-preferred-size: 100%; flex-basis: 100%; margin-bottom: 1.25rem; border-radius: calc(var(--border-radius) / 2) !important; } } @media (max-width: 992px) { .input-search .input-group-append:first-of-type { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } } @media (max-width: 992px) { .input-search .input-group-append:first-of-type .custom-select { border-radius: calc(var(--border-radius) / 2); border-top-right-radius: none; border-bottom-right-radius: none; } } .topic-article-item:nth-child(odd) .article-thumbnail-wrapper { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } @media (max-width: 992px) { .topic-article-item:nth-child(odd) .article-thumbnail-wrapper { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } } .bitcoin-essentials { padding: 2rem 0; background-color: var(--color-white); } .bitcoin-essential { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 100%; padding: 1.25rem; border-radius: var(--border-radius); background-color: var(--color-white); -webkit-box-shadow: var(--box-shadow); box-shadow: var(--box-shadow); } .bitcoin-essential.inactive { color: var(--color-gray); } .bitcoin-essential.inactive .title, .bitcoin-essential.inactive .icon { color: var(--color-gray); } .bitcoin-essential.inactive .image { -webkit-filter: grayscale(1); filter: grayscale(1); opacity: 0.2; } .bitcoin-essential.inactive .notice { font-size: 0.75rem; padding: 0.5rem 0; color: var(--color-black); text-transform: uppercase; } .bitcoin-essential-header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .bitcoin-essential-header .title { margin: 0; font-size: 1.5rem; } .bitcoin-essential-header .image { width: 5rem; height: 5rem; -o-object-fit: cover; object-fit: cover; margin-right: 0.5rem; border-radius: 100%; } .bitcoin-essential-body { margin: 1.25rem 0; } .bitcoin-essential-summary { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 0.5rem 0; margin-bottom: 1.25rem; border-width: 0.0625rem 0; border-color: var(--color-gray); border-style: solid; } .bitcoin-essential-summary-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .bitcoin-essential-summary-item .icon { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 2.5rem; height: 2.5rem; margin-right: 0.25rem; padding: 0.25rem; border: 0.125rem solid var(--color-gray); border-radius: 50%; -webkit-box-shadow: var(--box-shadow); box-shadow: var(--box-shadow); background-color: var(--color-white); color: var(--color-secondary); } .course-related-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 1.25rem; margin-bottom: 1.25rem; border-radius: var(--border-radius); background-color: var(--color-white); -webkit-box-shadow: var(--box-shadow); box-shadow: var(--box-shadow); } @media (min-width: 1200px) { .course-related-item { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } } .course-related-item .image { width: 7.5rem; height: 7.5rem; border-radius: 100%; } .course-related-item .title { font-size: 1.5rem; } .course-related-header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; } @media (min-width: 768px) { .course-related-header { text-align: left; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } } .course-related-content { padding: 1.25rem; } .course-related-summary-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media (min-width: 768px) { .course-related-summary-item { -webkit-box-pack: left; -ms-flex-pack: left; justify-content: left; } } .course-related-summary .icon { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 2.5rem; height: 2.5rem; margin-right: 0.25rem; padding: 0.25rem; border: 0.125rem solid var(--color-gray); border-radius: 50%; -webkit-box-shadow: var(--box-shadow); box-shadow: var(--box-shadow); background-color: var(--color-white); color: var(--color-secondary); } #slider { position: relative; width: 30rem; height: 30rem; margin: 0 auto; -webkit-perspective: 40rem; perspective: 40rem; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } input[type=radio] { position: relative; z-index: 1; } #slider label { position: absolute; left: 0; top: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; height: 100%; -webkit-transition: -webkit-transform 400ms ease; transition: -webkit-transform 400ms ease; transition: transform 400ms ease; transition: transform 400ms ease, -webkit-transform 400ms ease; cursor: pointer; } #slider label img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } /* Slider Functionality */ /* Active Slide */ #s1:checked ~ #slide1, #s2:checked ~ #slide2, #s3:checked ~ #slide3 { -webkit-transform: translate3d(0%, 0, 0px); transform: translate3d(0%, 0, 0px); pointer-events: none; } /* Next Slide */ #s1:checked ~ #slide2, #s2:checked ~ #slide3, #s3:checked ~ #slide1 { -webkit-transform: translate3d(50%, 0, -10rem); transform: translate3d(50%, 0, -10rem); } /* Previous Slide */ #s1:checked ~ #slide3, #s2:checked ~ #slide1, #s3:checked ~ #slide2 { -webkit-transform: translate3d(-50%, 0, -10rem); transform: translate3d(-50%, 0, -10rem); } .regions .hero-title, .regions .hero-content { text-align: left; } .regions .course-icon { width: 4.5rem; height: 4.5rem; -o-object-fit: cover; object-fit: cover; margin: 0.5rem; aspect-ratio: 1; } .regions .course-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 100%; padding: 1.25rem; -webkit-box-shadow: var(--box-shadow); box-shadow: var(--box-shadow); border-radius: calc(var(--border-radius) / 2); background-color: var(--color-white); } .regions .course-item-alt { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .regions .course-item-alt .course-icon { width: 7.5rem; height: 7.5rem; } .regions .course-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .regions .course-title { font-size: 1.5rem; margin: 0.25rem 0; } .regions .course-tags { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 0.5rem; } .regions .course-tag { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; border: 0.125rem solid var(--color-dark); padding: 0.25rem 1.25rem; border-radius: var(--border-radius); white-space: nowrap; font-size: 0.75rem; } .regions .certificates { background-color: var(--color-light); } .regions .testimonials { background-color: var(--color-white); padding: 5rem 0; } .regions .testimonial-slider { background-color: var(--color-white); -webkit-box-shadow: var(--box-shadow); box-shadow: var(--box-shadow); border-radius: var(--border-radius); margin-bottom: -15rem; } .regions .testimonial-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 2.5rem; text-align: center; } .regions .testimonial-image { overflow: hidden; width: 15rem !important; height: 15rem !important; margin-bottom: 1.25rem; border-radius: 7.5rem; aspect-ratio: 1; -o-object-fit: cover; object-fit: cover; } .regions .testimonial-content { position: relative; margin-top: 1.25rem; padding-bottom: 1.25rem; } @media (min-width: 992px) { .regions .testimonial-content { width: 70%; } } .regions .testimonial-content::before, .regions .testimonial-content::after { position: absolute; content: ''; top: -1rem; right: 2rem; border-left: 1.25rem solid transparent; border-right: 1.25rem solid transparent; border-bottom: 1.25rem solid var(--color-primary); } .regions .testimonial-content::after { z-index: 1; top: -0.825rem; right: 2.25rem; width: 0; height: 0; border-left: 1rem solid transparent; border-right: 1rem solid transparent; border-bottom: 1rem solid var(--color-white); } .regions .testimonial-content blockquote { position: relative; z-index: 1; padding: 2.5rem; margin-bottom: 0; font-size: 1.25rem; border: 0.125rem solid var(--color-primary); border-radius: var(--border-radius); background-color: var(--color-white); } .regions .testimonial-icon { position: absolute; z-index: 1; top: -1.25rem; left: 2.5rem; font-size: 1.5rem; color: var(--color-primary); } .regions .contact { padding-top: 15rem; padding-bottom: 5rem; background-color: var(--color-primary); color: var(--color-white); } .regions .owl-dot { border-color: var(--color-primary) !important; } .regions .owl-dot.active { background-color: var(--color-primary) !important; } .newsletter { position: relative; color: var(--color-white); background-color: var(--color-white); background-size: cover; background-position: center center; background-repeat: no-repeat; word-break: break-word; } .newsletter-posts { margin: 4.5rem 0; } .newsletter-posts-content { font-weight: 100; } .newsletter-posts-title { color: var(--color-white); margin-bottom: 20px; margin-top: 10px; } @media (max-width: 991px) { .newsletter-posts-title { font-size: 25px; } } .newsletter-posts-top { margin-top: 150px; } .newsletter-posts-top-n-logo { width: 300px; max-width: 100%; } @media (max-width: 991px) { .newsletter-posts-top-n-logo { width: 200px; } } .newsletter-posts-top .icon { max-width: 100%; margin-right: 20px; } @media (max-width: 991px) { .newsletter-posts-top .icon { display: none; } } @media (max-width: 991px) { .newsletter-posts-top-left .icon-wrapper { width: 0px; padding: 0px; margin: 0px; } } @media (max-width: 991px) { .newsletter-posts-top-left .content-wrapper { padding-left: 0px; } } .newsletter-posts-bottom { border-radius: 30px; overflow: hidden; background: var(--color-white); color: var(--color-black); max-width: 100%; margin: 0 auto; margin-top: 50px; } .newsletter-posts-bottom .featured-img { position: relative; } .newsletter-posts-bottom .featured-img img { max-width: 100%; -o-object-fit: cover; object-fit: cover; } .newsletter-posts-bottom .featured-img-title { position: absolute; left: 25%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .newsletter-posts-bottom .featured-img-title h3 { color: var(--color-white); } @media (max-width: 576px) { .newsletter-posts-bottom .featured-img-title h3 { font-size: 20px; } } .newsletter-items-post { border-bottom: 1px solid var(--color-gray); margin: 20px 40px; padding: 20px 0px; } .newsletter-items-post:last-child { border-bottom: none; } .newsletter-items-post-title { color: var(--color-primary); } .newsletter-items-post-title a { color: var(--color-primary) !important; text-decoration: none !important; } .newsletter a { color: var(--color-white); text-decoration: underline; text-underline-offset: 5px; } .readmore { text-decoration: none !important; color: var(--color-primary) !important; } .readmore:before { content: "..."; color: var(--color-black); } .hbspt-form { height: 100%; } .hbspt-form .hs-form .hs-firstname { width: 50%; display: inline-block; padding-right: 10px; } @media (max-width: 767px) { .hbspt-form .hs-form .hs-firstname { width: 100%; padding-right: 0px; display: block; } } .hbspt-form .hs-form .hs-lastname { width: 50%; display: inline-block; padding-left: 10px; } @media (max-width: 767px) { .hbspt-form .hs-form .hs-lastname { width: 100%; padding-left: 0px; display: block; } } .hbspt-form .hs-form .hs-form-field { margin-bottom: 20px; } .hbspt-form .hs-form ul.inputs-list { list-style: none; padding: 0px; } .hbspt-form .hs-form .hs-input:not([type="checkbox"]) { display: block; width: 100%; height: calc(1.5em + 0.75rem + 2px); padding: 0.375rem 0.75rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #495057; background-clip: padding-box; border: 1px solid var(--color-light); border-radius: 0.25rem; -webkit-transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out; transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out; transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out; } .hbspt-form .hs-form .hs-input[type=checkbox] { margin-top: 5px; } .hbspt-form .hs-form .hs-error-msg { color: var(--danger); } .hbspt-form .hs-form .hs_error_rollup { display: none; } .hbspt-form .submitted-message { height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; color: var(--color-white); font-size: 30px; }