.contact-f {
    padding-top: 25vh;padding-bottom: 25vh;
}
.contact-globe {
    position:absolute;bottom:0;left:0;width: 100%;
    opacity:0.5;
}
.contact-fgrid {
    grid-template-columns: 20% 70%;gap: 10%;
    margin-top:14vh;z-index:100;
}
.ex-top {margin-top: 4vh;}

.step {
    position:relative;padding: 1vh 1.5vh 0.75vh 1.5vh;vertical-align: middle;
    display:inline-block;margin-right: 0.5vh;background-color: var(--c-blue);
    border-radius: 0.5vh;margin-top: -4px;
}
.interests-grid {
    grid-template-columns: repeat(3, 1fr);gap: 4vh;margin: 4vh 0 12vh 0;
}
.checkbox {
    height: 5vh;width:5vh;border-radius:1vh;border: solid 1px rgba(255, 255, 255, 0.1);
    margin-right: 1vw;
}
.checkbox::before {
    position:absolute;top:0.75vh;left:0.8vh;content:"";
    width:3.5vh;height:3.5vh;z-index:10;
}
.interests-grid h5 {margin-top: 4px;}
.interest-in {
    padding: 3vh 2vh;cursor: pointer;border: solid 1px rgba(255, 255, 255, 0.1);
    display:flex;position:relative;border-radius: 0.75vh;
    transition: all 0.2s ease-in-out;align-items: center;
}
.active-interest {border-color: var(--c-blue);}
.active-interest h5 {color: var(--c-white) !important;}
.active-interest .checkbox {border: none;}
.active-interest .checkbox::before {
    background-image: url(../assets/icon/checked.png?v=1);background-size: 3.5vh 3.5vh;
}

.alternatives {
    margin-top: 20vh;
    position:relative;display:block;text-align:center;
    padding: 6vh;background-color: var(--c-blue);border-radius:1vh;
}
.other-options {position:relative;text-align: left;}
.other-options:first-child {margin-right: 20vh;}
.opt-ico {height:4vh;width:4vh;margin-right: 1vh;margin-left: -0.25vh;}

.input-grid {
    grid-template-columns: repeat(4, 1fr);gap: 6vh;
    margin-top: 4vh;
}
.in-1 {grid-column-start: 1;grid-column-end: 3;}
.in-2 {grid-column-start: 3;grid-column-end: 5;}
.in-3 {grid-column-start: 1;grid-column-end: 3;grid-row-start: 2;}
.in-4 {grid-column-start: 3;grid-column-end: 5;grid-row-start: 2;}
.in-5 {grid-column-start: 1;grid-column-end: 5;grid-row-start: 4;}
.in-6 {grid-column-start: 1;grid-column-end: 3;grid-row-start: 3;}
.in-7 {grid-column-start: 3;grid-column-end: 5;grid-row-start: 3;}

.input-box {
    position:relative;border-bottom: solid 1px rgba(255, 255, 255, 0.1);
    background-color: var(--c-black);
}
input, textarea {
    display:inline-block;border: none;outline: none;
    background-color: rgba(0, 0, 0, 0);color: var(--c-white);
    font-family: 'Roboto', sans-serif;font-size: 20px;
    padding: 2vh 0 2vh 3.5vh;width: 100%;line-height:1;
}
.input-ico {
    height: 2.5vh;width: 2.5vh;display: inline-block;
    position:absolute;left:0;top:2vh;opacity: 0.5;
}
.input-ico img {
    width: 100%;height: 100%;filter: brightness(0) invert(1);
}
label {
    position:absolute;top:2vh;left:3.5vh;color: var(--c-white);
    font-family: 'Roboto';font-size: 20px;
    transition: all 0.2s ease-in-out;
}
input:not(:placeholder-shown) ~ label,
.input-box:hover label,
input:focus ~ label,
input:hover ~ label,
label:hover,
textarea:not(:placeholder-shown) ~ label,
textarea:focus ~ label,
textarea:hover ~ label {
    top: -5px;transform: scale(0.75);transform-origin: left;
    color: var(--c-white);opacity:0.5;
}

.input-val {
    position:absolute;bottom:-1px;left:0;width:0;height:1px;display:block;
    background-color: var(--c-white);transition: all 0.2s ease-in-out;
}
.active-val {width:100%;}
/*
input:valid:not(:focus) ~ .active-val {background-color: #37b937 !important;}
input:invalid:not(:focus) ~ .active-val {background-color: #b93737 !important;}*/


.submit-wrap {text-align: center;}
.submit-box {
    position:relative;margin-top: 10vh;cursor: pointer;
    display: inline-block;padding: 2vh;transition: all 0.35s ease-in-out;
}
.submit-box::before {
    position:absolute;top:calc(50% - 3vh);left:calc(50% - 3vh);content:"";
    height: 6vh;width:6vh;border-radius:100%;transition: all 0.35s ease-in-out;
    border: solid 1px rgba(255, 255, 255, 0.1);
}
.submit-ico {
    position:absolute;top:50%;left:calc(50% - 4vh);width: 4vh;height:4vh;
    opacity:0;transition: all 0.35s ease-in-out;
}
.submit-box h4 {transition: all 0.35s ease-in-out;}
.submit-box:hover h4 {margin-right: 10vh;}
.submit-box:hover::before {left: calc(100% - 7vh);}
.submit-box:hover .submit-ico {left: calc(100% - 5.98vh);top: 1.35vh;opacity:1;}

.else-w {margin-top: 12vh;}

@media (max-width: 980px) {
    .contact-fgrid {grid-template-columns: 100%;gap: 6vh;}
    .other-options {display: inline-block;vertical-align: middle;margin-right: 1vh;}
    .interests-grid {grid-template-columns: 100%;gap:3vh;}
    .checkbox {margin-right: 2vh;}
    .interest-in {padding: 2vh 2vh;}

    .other-options {display:block;width:100%;text-align: center;}
    .other-options:first-child {margin-bottom: 6vh;}
    .other-options h4 {margin-bottom: 2vh;opacity: 0.8;}
    .other-options h3 {font-size: 1.1rem;}
    .opt-ico {margin-left: 0;}
    .alternatives {padding: 8vh 4vh;}

    .input-grid {grid-template-columns: repeat(2, 1fr);}
    .in-1 {grid-column-start: 1;grid-column-end: 2;grid-row-start: 1;}
    .in-2 {grid-column-start: 2;grid-column-end: 3;grid-row-start: 1;}
    .in-3 {grid-column-start: 1;grid-column-end: 2;grid-row-start: 2;}
    .in-4 {grid-column-start: 2;grid-column-end: 3;grid-row-start: 2;}
    .in-5 {grid-column-start: 1;grid-column-end: 3;grid-row-start: 5;}
    .in-6 {grid-column-start: 1;grid-column-end: 3;grid-row-start: 3;}
    .in-7 {grid-column-start: 1;grid-column-end: 3;grid-row-start: 4;}

    /* Prevent iOS auto-zoom on input focus */
    input, textarea {
        font-size: 16px !important;
    }
    label {
        font-size: 16px !important;
    }
}
@media (min-width:980px) and (max-width: 1400px) {
    .contact-fgrid {grid-template-columns: 100%;gap: 12vh;}
    .other-options {display: inline-block;vertical-align: middle;margin-right: 4vh;}
    .interests-grid {grid-template-columns: repeat(2, 1fr);}
    .other-options:first-child {margin-right: 16vh;}
}
@media (min-width:1400px) and (max-width: 1650px) {
    .interests-grid {grid-template-columns: repeat(2, 1fr);}
}