/*** The new CSS reset - version 1.7.2 (last updated 23.6.2022) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug */ /* *:where(:not(html, iframe, canvas, img, svg, video):not(svg *, symbol *)) { all: unset; display: revert; } */ /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-width: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable="false"])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable="true"]) { -webkit-user-drag: element; } html, body { margin: 0; padding: 0; font-family: 'Assistant', sans-serif; font-weight: normal; font-size: 18px; direction: rtl; transition: 0s; color: #171314; } h1,h2,h3,h4{ line-height: 0.9; margin-top: 0 !important; } .text-center{ text-align: center; } /* FONT-WEIGHT */ .fnt-regular{ font-weight: 400; } .fnt-bold{ font-weight: bold; } /* FONT SIZE */ .fnt-xs{ /* font-size: calc(1.3rem + .45vw); */ font-size: 1.67vw; } .fnt-sm{ /* font-size: calc(1.62rem + .45vw); */ font-size: 1.95vw; } .fnt-md{ /* font-size: calc(2rem + .45vw); */ font-size: 2.45vw; } .fnt-lg{ /* font-size: calc(2.75rem + .45vw); */ font-size: 3.05vw; } .fnt-xlg{ font-size: calc(3.52rem + .45vw); font-size: 3.75vw; } /* COLOR */ .wht-clr{ color: #fff; } .drk-clr{ color: #171314; } .blue-clr{ color: #0085c6; } .blue-bg{ color: #0085c6; } .sald-clr{ color: #90ca3e; } .sald-bg{ color: #90ca3e; } .green-clr{ color: #26a948; } .green-bg{ color: #26a948; } .pos-abs{ position: absolute; } .pos-rel{ position: relative; } .d-block{ display: block; } .entire-container{ padding :1rem 2rem; } .mainbg{ background: url('../images/Drivers_recruit_2022_LP_bg.jpg')no-repeat; background-size: contain; width: 100%; position: relative; z-index: 0; padding-bottom: 50.25%; } .mr-3{ margin-right: 4rem; } h1.main-title{ /* font-size: calc(4rem + .9vw); */ font-weight: bold; margin-bottom: 0.5rem; font-size: 4.7vw; } .title h2{ font-size: 3rem; line-height: 1; } h2{ /* font-size: calc(1.45rem + .5vw); */ font-size: 2.5vw; } .sub-title h2{ font-size: 2vw; } .mb-0{ margin-bottom: 0; } .features{ top: 3vh; text-align: center; border-top: 1px solid #fff; border-bottom: 1px solid #fff; } ul.list-features{ padding: 0; } ul.list-features li{ display: inline-block; font-weight: bold; /* font-size: calc(0.97rem + .4vw); */ font-size: 1.3vw; text-align: center; margin-bottom: 1rem; color: #fff; } ul.list-features li:not(first-child){ padding: 0 15px; border-right: 3px solid #fff; } ul.list-features li:nth-child(5){ border-right: 0px solid #ffff !important; } ul.list-features li:first-child{ border-right: 0px solid #fff; padding-right: 0 !important; } .zm-2{ left: 2.5rem; width: 30%; } .btn-wrap { top: 12vh; } .btn-wrap a{ background-color: #fff; display: inline-block; width: 45%; height: 45px; border-radius: 20px; text-decoration: none; text-align: center; line-height: 45px; color: #000; font-weight: 700; font-size: 1.3rem; /* margin: 0 15px; */ } .btn-wrap span:first-child a{ float: right; } .btn-wrap span:last-child a{ float: left; } /* FORM */ h2.form-title.thankyou{ font-size: 3vw; position: relative; top: 10vw; } #formcontact{ width: 75%; margin: 0 auto; } .form-group{ position: relative; } label.error { position: absolute; /* top: 45px; */ top: 2.5vw; right: 20px; display: none; color: red; font-weight: bold; font-size: 13px; } .form-group-checkbox, .form-group input.form-control{ border-radius: 50px; background: #fff; margin-bottom: 1.32rem; width: 100%; /* height: calc(3.3rem + .5vw); */ height: 3.6vw; outline: none; border: 1px solid #171314; padding: 0 20px; font-weight: bold; font-size: calc(0.8rem + .4vw); } .form-group-checkbox{ border-radius: 35px; padding: 15px 20px; height: calc(5rem + .5vw); } .form-group-checkbox > span { font-weight: bold; font-size: calc(0.85rem + .4vw); } .form-group-checkbox .form-group{ padding: 15px 0; } .form-group-checkbox .form-group input{ opacity: 0; position: absolute; } .form-group-checkbox .form-group label{ border: 1px solid #171314; border-radius: 20px; padding: 0px 10px; cursor: pointer; font-size: calc(0.75rem + .4vw); } .form-group-checkbox .form-group label.checked{ background: #171314; color: #fff; } .form-group input[type="submit"]{ color: #fff; font-size: calc(2.35rem + .4vw); background: #006ba1; line-height: 0.2; cursor: pointer; } .morelnk-wrap{ position: relative; top: 4rem; } .morelnk-wrap > span{ /* font-size: calc(1.442rem + .5vw); */ font-size: 1.82vw; } .morelnk{ text-decoration: none; color: #fff; /* font-size: calc(3.1rem + .5vw); */ font-size: 3.38vw; font-weight: bold; line-height: 0.8; } .form-title{ color: #006ba1; font-weight: 300; position: relative; margin-top: 1.5rem !important; } .drive-lcns-link{ margin-top: 0; } @media screen and (max-width: 1680px) { html, body { font-size: 16px; } .features { top: 4vh; } .btn-wrap { top: 7vh; } } @media only screen and (max-width:1440px), screen and (min-device-width: 1366px) and (max-device-width: 1440px) and (orientation: landscape) { html, body { font-size: 15px; } .features { top: 4vh; } ul.list-features li { font-size: 1.2vw; } } @media only screen and (max-width:1440px) and (max-device-width: 1440px) and (orientation: landscape) and ( min-height: 750px) { } @media only screen and (max-width:1280px), screen and (min-device-width: 1280px) and (max-device-width: 1366px) and (orientation: landscape) { html, body { font-size: 14px; } .form-group-checkbox .form-group label { padding: 0px 7px; } .features { top: 3vh; } ul.list-features li { font-size: 1.2vw; } .morelnk-wrap { top: 1.4rem; } } @media only screen and (max-width: 1024px), screen and (max-device-width: 1024px) and (min-device-width: 992px) and (orientation: landscape) { html, body { font-size: 14px; } .features { top: 10vh; } ul.list-features li { font-size: 1.1vw; } .form-group input.form-control { height: 3vw; margin-bottom: 1.12rem; } .form-group input[type="submit"] { font-size: calc(1.35rem + .4vw); } .form-group-checkbox .form-group label { font-size: calc(0.5rem + .4vw); } } @media only screen and (max-device-width: 768px) and (min-device-width: 480px) and (orientation: portrait) { } @media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation: landscape) { .entire-container img{ max-width: 100%; height: auto; } }