/* Contact Us Page */
.cms-contact-us .breadcrumbs {
    position: absolute !important;
    top: 178px !important;
    z-index: 3 !important;
    left: 0 !important;
    right: 0 !important;
    padding: 0 !important;
    max-width: 1280px !important;
    width: 96% !important;
}

.cms-contact-us .breadcrumbs li,
.cms-contact-us .breadcrumbs li a {
    color: white !important;
    text-decoration: none !important;
    font-size: 14px !important;
}

.cms-contact-us .hero-inner .inner-content {
    max-width: 1280px !important;
    width: 96% !important;
}

.cms-contact-us .hero-row {
    left: 0 !important;
    width: 100vw !important;
    background-image: url(https://boltfast.co.za/fishgate/images/shop_banner.png) !important;
    background-size: cover !important;
    padding: 75px 0 40px !important;
}

.cms-contact-us .hero-row h1 {
    color: white !important;
    font-size: 42px !important;
    line-height: 45px !important;
    max-width: 360px !important;
    text-shadow: 0px 3px 6px #0000003E !important;
    padding-top: 17px !important;
}

.cms-contact-us .hero-row h1 span {
    color: #FFD600 !important;
}

.cms-contact-us .hero-column .mgz-element-inner {
    padding: 0 !important;
}

.cms-contact-us .contact-row {
    padding: 70px 0 50px 0;
    min-height: 600px;
}

.cms-contact-us .contact-row form {
    max-width: 100% !important;
    margin: 0 !important;
}

.cms-contact-us .contact-row form .fields {
    display: block !important;
}

body.cms-contact-us .contact-row form .field {
    height: auto !important;
}

.cms-contact-us .contact-row form .field {
    margin-right: 0 !important;
    max-width: 48% !important;
    border-bottom: 1px solid black !important;
    padding: 10px 0 !important;
    height: 45px !important;
    margin-bottom: 10px !important;
    position: relative !important;
    padding-bottom: 1px !important;
}

.cms-contact-us .contact-row form .field.field-formtype { 
    padding-top: 20px !important;
    border-bottom: none !important; 
    margin-bottom: 0 !important;
}

.cms-contact-us .contact-row form .field-branch {
    position: absolute !important;
    right: 0;
    top: 8px;
}

.cms-contact-us .contact-row form .field-branch label,
.cms-contact-us .contact-row form .field-vacancy label {
    display: none !important;
}

.cms-contact-us .contact-row form input,
.cms-contact-us .contact-row form select,
.cms-contact-us .contact-row form textarea {
    border: 0 !important;
    z-index: 2 !important;
    position: relative !important;
    background-color: transparent !important;
    font-size: 16px !important;
    color: black !important;
    font-weight: 500 !important;
    padding: 20px 10px !important;
}

.cms-contact-us .contact-row form select {
    padding: 0 10px !important;
}

.cms-contact-us .contact-row form input:focus,
.cms-contact-us .contact-row form select:focus,
.cms-contact-us .contact-row form textarea:focus {
    box-shadow: none !important;
}

body.cms-contact-us .contact-row form textarea { padding: 10px !important; }

.cms-contact-us form label {
    position: absolute !important;
    margin: 0 !important;
    color: black !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    transition-duration: 0.3s !important;
    z-index: 1 !important;
    top: 16px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
}

.cms-contact-us .contact-row form .required {
    opacity: 0 !important;
}

.cms-contact-us .contact-row form select {
    color: black !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background: white !important;
}

.cms-contact-us .contact-row form .field-branch .control::after {
    content: '';
    height: 20px;
    width: 20px;
    background-image: url(/fishgate/icons/blue_chevron_down.svg);
    display: block;
    background-repeat: no-repeat;
    float: right;
    margin-top: -20px;
    z-index: 5;
    position: relative;
}

body.cms-contact-us .contact-row form .field.-active label,
body.cms-contact-us .contact-row form .field.-has-content label {
    font-size: 11px !important;
    color: #00ADEF !important;
    font-weight: 500 !important;
    top: 3px !important;
}

body.cms-contact-us form .field-message label {
    top: 43px !important;
}

.cms-contact-us form .amcform-toolbar {
    width: fit-content !important;
    right: 0 !important;
    position: absolute !important;
    top: 500px !important;
}

.cms-contact-us form .amcform-toolbar button {
    background-color: #FFD600 !important;
    border-radius: 0 !important;
    border: 0 !important;
    color: black !important;
    font-size: 18px !important;
    font-weight: 700 !important;
}

.cms-contact-us form .amcform-toolbar button:hover {
    background-color: #00ADEF !important;
    color: white !important;
}

.cms-contact-us form div.mage-error {
    width: fit-content !important;
    position: absolute !important;
    bottom: 7px !important;
    right: 0 !important;
}

.cms-contact-us form .fb-select div.mage-error {
    right: 25px !important;
}

/* Branches */
.cms-contact-us .branches .branch {
    max-width: 595px;
    position: absolute;
    top: 78px;
    right: 0;
    transition-duration: 0.3s;
    opacity: 0;
}

.cms-contact-us .contact-row .branch .map {
    height: 400px !important;
}

.cms-contact-us .branches .branch .info {
    background-color: #ffd600eb;
    padding: 18px 30px;
    position: absolute;
    max-width: 600px;
    width: 100%;
    bottom: 20px;
    left: 0px;
}

.cms-contact-us .branches .branch .office {
    font-size: 24px;
    line-height: 30px;
    margin-top: 0;
    color: black;
    font-weight: 900;
}

.cms-contact-us .branches .branch .location {
    text-transform: uppercase;
    font-weight: 600;
    color: black;
}

.cms-contact-us .branches .branch .phone {
    font-weight: 700 !important;
    color: black !important;
    text-decoration: none !important;
    font-size: 16px;
}

.cms-contact-us .branches .branch.first {
    z-index: 3;
    opacity: 1;
}

.cms-contact-us .branches .branch.second {
    z-index: 2;
}

.cms-contact-us .branches .branch.third {
    z-index: 2;
}

.cms-contact-us .branches .branch.fourth {
    z-index: 2;
}

.cms-contact-us .branches .branch.fifth {
    z-index: 2;
}

body.cms-contact-us .branches .branch.reveal {
    z-index: 4 !important;
    opacity: 1 !important;
}

/* Notificaton */
.cms-contact-us .message.success {
    max-width: 1260px !important;
    width: 100% !important;
    margin: auto !important;
    position: absolute !important;
    top: 401px !important;
    left: 0 !important;
    right: 0 !important;
    background-color: #f1f1f1 !important;
    color: black !important;
    font-weight: 600 !important;
}

.cms-contact-us .message.success>*:first-child:before {
    color: black !important;
}

@media (min-width: 1260px) {
    .cms-contact-us .hero-inner .inner-content {
        max-width: 1280px !important;
        width: 96% !important;
    }
}

@media (max-width: 1299px) {
    body.cms-contact-us .message.success {
        max-width: 1130px !important;
    }

    .cms-contact-us .contact-row {
        max-width: 1130px !important;
        margin: auto !important;
    }

    .cms-contact-us .contact-row .branch .map {
        width: 532px !important;
    }
}

@media (max-width: 1180px) {
    body.cms-contact-us .message.success {
        max-width: 1030px !important;
    }

    .cms-contact-us .contact-row {
        max-width: 1030px !important;
    }

    .cms-contact-us .contact-row .branch .map {
        width: 485px !important;
    }
}

@media (max-width: 980px) {
    .cms-contact-us .breadcrumbs {
        width: 100% !important;
        padding: 0 50px !important;
    }

    .cms-contact-us .hero-inner .inner-content {
        width: 100% !important;
        padding: 0 50px !important;
    }

    .cms-contact-us .contact-row {
        max-width: 100% !important;
        padding: 30px 0 0 0 !important;
    }

    .cms-contact-us .contact-row form {
        padding: 0 50px !important;
    }

    .cms-contact-us .contact-row form .fields {
        display: flex !important;
        flex-direction: column !important;
    }

    .cms-contact-us .contact-row form .field {
        max-width: 100% !important;
    }

    .cms-contact-us .contact-row form .field-branch {
        position: relative !important;
        top: 0 !important;
    }

    body.cms-contact-us .branches {
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 50px !important;
    }

    body.cms-contact-us .branches .branch {
        max-width: 100%;
        position: unset !important;
        top: 0 !important;
        right: 0 !important;
        opacity: 1 !important;
        margin-bottom: 20px !important;
    }

    .cms-contact-us .contact-row .branch .map {
        width: 100% !important;
    }

    .cms-contact-us .branches .branch .info {
        position: unset !important;
        width: 100% !important;
        max-width: 100% !important;
        z-index: 5 !important;
        position: relative !important;
        margin-top: -130px !important;
    }

    .cms-contact-us form .amcform-toolbar {
        position: unset !important;
        max-width: 100% !important;
        display: block !important;
        margin: 30px 0 !important;
        width: 100% !important;
    }

    .cms-contact-us form .amcform-toolbar button {
        width: 100% !important;
    }

    body.cms-contact-us .message.success {
        max-width: 100% !important;
        z-index: 5 !important;
        top: 355px !important;
    }
}

@media (max-width: 768px) {
    .cms-contact-us .breadcrumbs {
        display: block !important;
        top: 168px !important;
    }

    .cms-contact-us .hero-row h1 {
        padding-top: 8px !important;
    }

    body.cms-contact-us .message.success {
        top: 325px !important;
    }

    .cms-contact-us .contact-row .branch .map {
        height: 325px !important;
    }
}

@media (max-width: 580px) {

    .cms-contact-us .breadcrumbs,
    .cms-contact-us .hero-inner .inner-content,
    .cms-contact-us .contact-row form,
    body.cms-contact-us .branches {
        padding: 0 30px !important;
    }

    .cms-contact-us .mgz-element-column>.mgz-element-inner {
        padding: 0px !important;
    }
}

@media (max-width: 480px) {
    .cms-contact-us .breadcrumbs { top: 140px !important; }

    .cms-contact-us .contact-row { padding: 30px 25px 0 !important;}

    .cms-contact-us .contact-row form, body.cms-contact-us .branches { padding: 0 !important; }

    .cms-contact-us .contact-row form .field-branch { margin-bottom: 370px !important; }

    body.cms-contact-us .branches .branch {
        position: absolute !important;
        width: 100% !important;
        height: 340px !important;
        top: 375px !important;
        margin-bottom: 0 !important;
        overflow: hidden !important;
    }
    
    .cms-contact-us .branches .branch .info { 
        margin-top: -145px !important;
        height: 150px !important;
        padding: 18px !important; 
    }

    .cms-contact-us .contact-row .branch .map {
        height: 340px !important;
    }

    .cms-contact-us .branches .branch .office { font-size: 20px !important; }

    .cms-contact-us form .amcform-toolbar button { max-width: 100px !important; }
}

@media (max-width: 435px) {

    .cms-contact-us .breadcrumbs,
    .cms-contact-us .hero-inner .inner-content {
        padding: 0 25px !important;
    }

    .cms-contact-us .hero-row {
        padding: 45px 0 35px !important;
    }

    .cms-contact-us .breadcrumbs {
        top: 125px !important;
    }

    .cms-contact-us .hero-row h1 {
        font-size: 38px !important;
        line-height: 43px !important;
        padding-top: 20px !important;
    }

    body.cms-contact-us .message.success {
        top: 285px !important;
    }
}

@media (max-width: 390px) {

    .cms-contact-us .breadcrumbs,
    .cms-contact-us .hero-inner .inner-content {
        padding: 0 20px !important;
    }
}

/*---New Checkbox Field---*/

.cms-contact-us div.fb-checkbox.field-formtype {
    padding-top: 0 !important;
}

.cms-contact-us .field-formtype .control {
    position: relative !important;
    top: -5px !important;
}

.cms-contact-us .fb-checkbox .checkbox-group label {
    position: relative !important;
    top: 0 !important;
    display: block !important;
}

.cms-contact-us .field-formtype label.fb-checkbox-group-label {
    position: relative !important;
    top: 0 !important;
    margin-bottom: 20px !important;
}

.cms-contact-us .fb-checkbox .checkbox-group {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: start !important;
    padding: 0 10px !important;
    position: relative !important;
    top: -4px !important;
}

.cms-contact-us .fb-checkbox .checkbox-group input.formtype-checkbox {
    -webkit-appearance: none;
    appearance: none;
    height: 24px !important;
    width: 24px !important;
    border-radius: 24px !important;
    border: 1px solid #000000 !important;
    padding: 0 !important;
    position: relative !important;
    top: -2px !important;
}

.cms-contact-us .fb-checkbox .checkbox-group input.formtype-checkbox:checked:before {
    display: block !important;
    content: '' !important;
    height: 18px !important;
    width: 18px !important;
    background-color: #000 !important;
    border-radius: 20px !important;
    padding: 0 !important;
    position: absolute !important;
    top: 2px !important;
    left: 2px !important;
}