@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css'); @import url('https://fonts.googleapis.com/css2?family=Metal+Mania&family=Montserrat:wght@400;700&family=Roboto:wght@100;300;400;700;900&display=swap'); body { color: #6f727d; } html .bg-image { background-size: cover; background-position: center 55%; background-repeat: no-repeat; } html .bg-gray-light { background-color: #f2f3f8; } .section-sm, .section-md, .section-lg, .section-xl { padding: 60px 0; } .section { position: relative; } .spacing-55 { transform: translate3d(0, -55px, 0); margin-bottom: -55px; pointer-events: none; } .spacing-55 > * { margin-top: 55px; pointer-events: auto; } .spacing-55 > *::before { content: ''; display: table; width: 0; } h3, .h3 { font-size: 26px; line-height: 1.45; text-align: center; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { margin-top: 0; margin-bottom: 0; font-family: inherit; font-weight: 100; letter-spacing: -.025em; color: #242731; } .heading-3 { font-size: 26px; line-height: 1.45; font-weight: 400; letter-spacing: -.025em; } .box-wrap-content-interactive { pointer-events: auto; } .box-contacts { display: inline-block; padding: 30px 40px; background: #fff; text-align: left; } .box-contacts h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; } h4, .h4 { font-size: 22px; line-height: 1.35; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { margin-top: 0; margin-bottom: 0; font-family: inherit; font-weight: 100; letter-spacing: -.025em; color: #242731; } .box-contacts h4 + *, .box-contacts .h4 + * { margin-top: 7px; } .box-contacts address { max-width: 145px; } address { margin-top: 0; margin-bottom: 0; } p { margin: 0; } .box-contacts * + h4, .box-contacts * + .h4 { margin-top: 30px; } .box-contacts h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; } .list-0 { line-height: 1.25; } .box-contacts h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; } ul, ol { list-style: none; padding: 0; margin: 0; } ul li, ol li { display: block; } a[href*='callto'], a[href*='mailto'] { white-space: nowrap; } .link-gray-darker, .link-gray-darker:active, .link-gray-darker:focus { color: #242731; } .link-sm { font-size: 16px; line-height: 1.2; } .link { display: inline-block; } a, a:active, a:focus { color: #5798ef; } a { display: inline-block; text-decoration: none; transition: 0.33s all ease-in; } .link-gray, .link-gray:active, .link-gray:focus { color: #6f727d; } .rd-mailform { text-align: left; } .rd-mailform { position: relative; } .text-left { text-align: left; } .text-left { text-align: left !important; } form { margin-bottom: 0; } .rd-mailform .row { margin-left: -5px; margin-right: -5px; } .spacing-20 { transform: translate3d(0, -20px, 0); margin-bottom: -20px; pointer-events: none; } .rd-mailform .row > [class*='col-'] { padding-left: 5px; padding-right: 5px; } .spacing-20 > * { margin-top: 20px; pointer-events: auto; } .form-group { position: relative; margin-bottom: 0; } .bg-gray-light .form-label { color: #242731; } .form-label { position: absolute; top: 25px; left: 19px; font-size: 14px; color: #999; line-height: 1.2; pointer-events: none; letter-spacing: .05em; z-index: 9; transition: .3s; transform: translateY(-50%); will-change: transform; opacity: .6; } .form-label, .form-label-outside, .form-control { font-size: 12px; font-weight: 400; letter-spacing: 0; } label { margin-bottom: 0; } .bg-gray-light .form-control { background: #fff; } .form-control { min-height: 50px; height: auto; padding: 15.2px 19px; border-radius: 6px; -webkit-appearance: none; line-height: 19.6px; background: #f5f5f5; border: 0; } .input-sm, .input-sm:focus, .input-lg, .input-lg:focus, .form-control, .form-control:focus { box-shadow: none; } .form-label, .form-label-outside, .form-control { font-size: 12px; font-weight: 400; letter-spacing: 0; } .form-validation { position: absolute; right: 6px; top: 4px; font-size: 10px; line-height: 12px; letter-spacing: 0; font-weight: 400; color: rgba(227, 84, 117, 0.9); transition: .3s; } .bg-gray-light .form-label { color: #242731; } .form-label { position: absolute; top: 25px; left: 19px; font-size: 14px; color: #999; line-height: 1.2; pointer-events: none; letter-spacing: .05em; z-index: 9; transition: .3s; transform: translateY(-50%); will-change: transform; opacity: .6; } .form-label, .form-label-outside, .form-control { font-size: 12px; font-weight: 400; letter-spacing: 0; } label { margin-bottom: 0; } .has-error .form-control:not(.form-control-impressed), .has-error .form-control:not(.form-control-impressed):focus { border-color: rgba(227, 84, 117, 0.6); box-shadow: none; } .bg-gray-light .form-control { background: #fff; } textarea.form-control { height: 135px; min-height: 50px; max-height: 229.5px; resize: vertical; } .form-control { min-height: 50px; height: auto; padding: 15.2px 19px; border-radius: 6px; -webkit-appearance: none; line-height: 19.6px; background: #f5f5f5; border: 0; } .input-sm, .input-sm:focus, .input-lg, .input-lg:focus, .form-control, .form-control:focus { box-shadow: none; } .rd-mailform .btn { padding-left: 20px; padding-right: 20px; min-height: 50px; } .btn.btn-effect-ujarak, .btn.btn-effect-ujarak:before { transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); } .btn.btn-effect-ujarak { position: relative; z-index: 0; transition: background 0.4s, border-color 0.4s, color 0.4s; } .page .btn-primary, .page .btn-primary:active, .page .btn-primary:focus { color: #fff; background: #5798ef; border-color: #5798ef; } .btn { font-family: "Montserrat", sans-serif; font-size: 12px; font-weight: 400; line-height: 2; transition: 0.33s all ease-in; border-radius: 6px; border: 1px solid; text-transform: uppercase; letter-spacing: 0; white-space: normal; max-width: 100%; cursor: pointer; } .btn.btn-effect-ujarak.btn-primary::before, .btn.btn-effect-ujarak.btn-primary-outline::before { background: #5acea4; } .btn.btn-effect-ujarak, .btn.btn-effect-ujarak:before { transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); } .btn.btn-effect-ujarak::before { content: ''; position: absolute; top: -1px; left: -1px; width: calc(100% + 2px); height: calc(100% + 2px); background: #5798ef; z-index: -1; opacity: 0; border-radius: 6px; transform: scale3d(0.7, 1, 1); transition: transform 0.4s, opacity 0.4s; transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); } .btn-primary.focus, .btn-primary:focus { box-shadow: none!important; } .btn-primary:hover { color: #fff; background: #5acea4; border-color: #5acea4; } /*********** Sam Custom Styling *************/ .rd-mailform [class*='group'] .select2-container--bootstrap .select2-selection { min-width: 100% !important; border-radius: 6px; } .dropdown .select2-selection { background: #f5f5f5; } .bg-gray-light .dropdown .select2-selection { background: #FFFFFF; } .bg-gray-darken .dropdown .select2-selection { background: #3f4f6e !important; border: 0; border-radius: 6px !important; } .bg-gray-dark .dropdown .select2-selection { background: rgba(255, 255, 255, 0.47) !important; border-color: transparent; } .bg-gray-dark label.kt-radio>input, .bg-gray-dark label.kt-checkbox>input { background: rgba(255, 255, 255, 0.47); border-color: rgba(255,255,255,0.47); } .bg-gray-dark .dropdown .select2-selection .select2-selection__rendered { color: rgba(255,255,255, 0.6) !important; font-weight: 500 !important; } .bg-gray-darken .dropdown .select2-selection .select2-selection__rendered { color: #acb3c0 !important; font-weight: 500; font-size: 14px; } .form-bordered .dropdown .select2-selection .select2-selection__rendered { padding-top: 13.2px; padding-bottom: 13.2px; border: 2px solid #ededed; background: rgba(255, 255, 255, 0.47); } .dropdown .select2-selection .select2-selection__rendered { font-size: 14px; text-transform: capitalize; } .radio-group, .checkbox-group { position: relative; margin-top: 30px; } .radio-group>label.form-label, .checkbox-group>label.form-label { position: relative; display: block; top: auto; left: auto; font-size: 14px; } label.kt-radio, label.kt-checkbox { margin-right: 20px; font-size: 14px; font-weight: 400; text-transform: capitalize; vertical-align: middle; cursor: pointer; } .kt-radio>input, .kt-checkbox>input { width: 1.5rem; height: 1.5rem; vertical-align: middle; margin-right: 5px; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: #F5F5F5; border: 2px solid #F5F5F5; } .bg-gray-light .kt-radio>input, .bg-gray-light .kt-checkbox>input { background-color: #FFFFFF; border: 2px solid #FFFFFF; } .bg-gray-darken .kt-radio>input, .bg-gray-darken .kt-checkbox>input { background: #3f4f6e ; border: 2px solid #3f4f6e; } .form-bordered .kt-radio>input, .form-bordered .kt-checkbox>input { border: 2px solid #ededed; background: rgba(255, 255, 255, 0.47); } .kt-radio>input:checked, .kt-checkbox>input:checked { background: #5798ef !important; border-color: #5798ef !important; } .kt-radio>input {border-radius: 50%;} input.form-control:focus+label.form-label, textarea.form-control:focus+label.form-label { opacity: 0; transition: 1s ease all; } .pl-10 {padding-left: 10px !important;} .pl-20 {padding-left: 20px !important;} .pl-30 {padding-left: 30px !important;} .pr-10 {padding-right: 10px !important;} .pr-20 {padding-right: 20px !important;} .pr-30 {padding-right: 30px !important;} .pt-10 {padding-top: 10px !important;} .pt-20 {padding-top: 20px !important;} .pt-30 {padding-top: 30px !important;} .pb-10 {padding-bottom: 10px !important;} .pb-20 {padding-bottom: 20px !important;} .pb-30 {padding-bottom: 30px !important;} .ml-10 {margin-left: 10px !important;} .ml-20 {margin-left: 20px !important;} .ml-30 {margin-left: 30px !important;} .mr-10 {margin-right: 10px !important;} .mr-20 {margin-right: 20px !important;} .mr-30 {margin-right: 30px !important;} .mt-10 {margin-top: 10px !important;} .mt-20 {margin-top: 20px !important;} .mt-30 {margin-top: 30px !important;} .mb-10 {margin-bottom: 10px !important;} .mb-20 {margin-bottom: 20px !important;} .mb-30 {margin-bottom: 30px !important;} /*********** End Sam Custom Styling *************/ /************** add css ****************/ textarea.form-control { height: 130px; } /************** add css ****************/ @media (min-width: 480px){ .box-wrap-content-interactive { display: inline-block; } } @media (min-width: 768px){ .section-md { padding: 70px 0; } h3, .h3 { font-size: 34px; } .heading-3 { font-size: 34px; } .box-contacts { padding: 50px 60px; } h4, .h4 { font-size: 30px; line-height: 1.33333; } .form-label, .form-label-outside, .form-control { font-size: 14px; } } @media (min-width: 992px){ .section-md { padding: 95px 0; } .box-contacts { padding: 50px 100px; } } @media (min-width: 1200px){ h3, .h3 { font-size: 42px; line-height: 1.19048; text-align: center; } .heading-3 { font-size: 42px; line-height: 1.19048; } }