@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css'); @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.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'); *, *::before, *::after { box-sizing: border-box; } body{ -webkit-text-size-adjust: none; -webkit-font-smoothing: subpixel-antialiased; font-family: "Roboto", sans-serif; font-weight: 300; letter-spacing: .05em; } html .bg-image { background-size: cover; background-position: center 55%; background-repeat: no-repeat; } html .bg-gray-light { background-color: #fff; } .section-sm, .section-md, .section-lg, .section-xl { padding: 60px 0; } .section { position: relative; } .spacing-30 { transform: translate3d(0, -30px, 0); margin-bottom: -30px; pointer-events: none; } .justify-content-center { justify-content: center !important; } .spacing-30 > * { margin-top: 30px; pointer-events: auto; } .spacing-30 > *::before { content: ''; display: table; width: 0; } h2, .h2 { font-size: 28px; line-height: 1.3; } 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; } * + p, * + .p { margin-top: 20px; } p + p, p + img, p + .marked-list { margin-top: 24px; } * + .marked-list, * + .ordered-list { margin-top: 12px; } ul, ol { list-style: none; padding: 0; margin: 0; } .marked-list__marker-1 > li { padding-left: 30px; } .marked-list > li { position: relative; padding-left: 25px; font: 400 14px/24px "Roboto", sans-serif; color: #242731; text-align: left; } ul li, ol li { display: block; } .marked-list__marker-1 > li:before { color: #5acea4; content: '\e005'; font: 400 13px/24px "fl-flat-icons-set-2"; } .marked-list > li:before { position: absolute; top: -1px; left: 0; content: "\f00c"; font: 100 24px/24px "FontAwesome" !important; color: #5acea4; } .rd-mailform { text-align: left; } .rd-mailform { position: relative; } 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; } .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; } .form-control:focus { outline: 0; background: #f5f5f5; } .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; } .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 { display: inline-block; margin-bottom: 0.5rem; } label { margin-bottom: 0; } textarea.form-control { height: 135px; min-height: 50px; max-height: 229.5px; resize: vertical; } .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-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: 768px){ .form-label, .form-label-outside, .form-control { font-size: 14px; } h2, .h2 { font-size: 40px; line-height: 1; } .list-collumn-2 { columns: 2; column-gap: 30px; } .section-lg { padding: 80px 0; } } @media (min-width: 992px){ .section-lg { padding: 100px 0!important } } @media (min-width: 1200px){ h2, .h2 { font-size: 48px!important; } }