/* * * ================================================================= * SKIN * ================================================================= * * Populate this file with the CSS of your custom design. * Include this file into the area of your pages, after the style.css and any other css file. * */ @import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700'); /* # COLORS =================================================================== */ /* # CUSTOM CLASSES =================================================================== */ /* # LAYOUT & TYPOGRAPHY =================================================================== */ /* # NAVIGATION MENU =================================================================== */ .dropdown > ul { min-width: 350px !important } /* # HEADERS =================================================================== */ h2.careers_apply_heading { font-size: 28px; color: #FFF; font-weight: 500; } /* # TEXTS =================================================================== */ p.careers_apply_strapline { margin: 45px 0 0; font-size: 18px; color: #FFF; } /* # FOOTER =================================================================== */ /* # COMPONENTS =================================================================== */ /* # FORMS =================================================================== */ .employment-selection-row label.radio, .title-selection-row label.radio { cursor: pointer; } .employment-selection-row label.radio input, .title-selection-row label.radio input { position: absolute; top: 0; left: 0; visibility: hidden; pointer-events: none; } .employment-selection-row label.radio span, .title-selection-row label.radio span { padding: 12px 8px; border: 1px solid #ccc; display: inline-block; color: #1d629f; border-radius: 24px; font-weight: 600; font-size: 14px; text-align: center; background-color: #FFF; box-shadow: 0px 2px 2px rgba(0,0,0,0.1); } .employment-selection-row label.radio span { width: 300px; } .title-selection-row label.radio span { width: 100px; } .employment-selection-row label.radio input:checked+span, .title-selection-row label.radio input:checked+span { position: relative; color: #fff; background-color: #66ac45; } .employment-selection-row label.radio input:checked+span:after, .title-selection-row label.radio input:checked+span:after { position: absolute; right: 10px; top: 13px; content: '\f00c'; font-family: FontAwesome; font-weight: normal; color: #fff; text-shadow: 0px 2px 2px rgba(0,0,0,0.1); } .career-form label.parent-label { margin: 80px 0 40px; padding-bottom: 10px; color: #4b4b4b; font-size: 24px; border-bottom: 2px solid #e6e7e7; } .career-form input[type="text"], .career-form input[type="email"], .career-form select { height: 50px; padding: 10px 12px; font-size: 18px; font-weight: 500; border-radius: 8px; border-width: 2px; border-color: #d9d9d9; width: 100%; } .career-form .gender-selection-row input[type="radio"] { left: 0; top: -2px; height: 20px; width: 20px; background-color: #fff; border: 1px solid #d9d9d9; border-radius: 50%; } .career-form .gender-selection-row label.radio { color: #909292; padding-right: 35px; font-size: 20px; } .career-form label.child-label { font-size: 19px; margin-bottom: 10px; margin: 0 0 22px; color: #909292; font-size: 16px; line-height: 1.7; } .career-form.ajax_form .error { color: rgba(255,0,0,0.2) !important; background-color: rgba(255,0,0,0.2) !important; } /* # BUTTONS =================================================================== */ a.wizard-next { width: 40%; background-color: #66ac45 !important; border-color: #66ac45 !important; box-shadow: 3px 3px 2px 0 rgba(0,0,0,0.15); transition: all 0.2s ease-out; border-radius: 30px; opacity: 1; padding: 10px; } span.btn-text-slide { font-size: 18px; font-weight: 600; } .btn-text-slide:before { content: '\f105'; position: absolute; right: 10px; top: 0px; font-family: FontAwesome; font-weight: normal; color: #fff; text-shadow: 0px 2px 2px rgba(0,0,0,0.1); font-size: 30px !important; } .button-general-form .orange-career-button { transform: translateY(-50%); position: absolute; top: 50%; right: 15px; margin: 0; font-size: 20px; font-weight: 600; box-shadow: 3px 3px 2px 0px rgba(0,0,0,0.15); color: #fff; background-color: #fd8d1d !important; padding: 10px 30px; line-height: 1.42857; border-radius: 30px; transition: all 0.2s ease-out; display: inline-block; text-align: center; vertical-align: middle; white-space: nowrap; text-decoration: none; } .button-general-form a.orange-career-button:hover { color: #fff; background-color: #e57402 !important; } .button-general-form .orange-career-button:before { content: '\f105'; position: absolute; right: 10px; top: 3px; font-family: FontAwesome; font-weight: normal; color: #fff; text-shadow: 0px 2px 2px rgba(0,0,0,0.1); font-size: 30px !important; } /* # CONTAINERS =================================================================== */ .green-section { background-color: #66ac45 !important; } .green-section > .container { padding-top: 70px; padding-bottom: 70px; } /* # IMAGES =================================================================== */ /* # RESPONSIVE =================================================================== Large devices (desktops, less than 1200px) ------------------------------------------------------------------- */ @media (max-width: 1199.98px) { } /* Medium devices (tablets, less than 992px) ------------------------------------------------------------------- */ @media (max-width: 991.98px) { .button-general-form { text-align: center; margin-top: 60px !important; } .button-general-form .orange-career-button { position: relative; padding: 8px 35px; font-size: 16px; } .button-general-form .orange-career-button:before { top: 3px; font-size: 24px !important; } .apply__icon { display: block; margin-left: auto; margin-right: auto; } } @media (min-width: 991.99px) { .apply__icon { -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); position: absolute; top: 50%; left: 20px; width: 88px; height: 88px; } a.language-code { color: #FFF; text-decoration: none; } a.language-code:hover, a.language-code:active { text-decoration: underline; } } /* Small devices (landscape phones, less than 768px) ------------------------------------------------------------------- */ @media (max-width: 767.98px) { } /* Extra small devices (portrait phones, less than 576px) ------------------------------------------------------------------- */ @media (max-width: 575.98px) { }