@charset "utf-8";
/* CSS Document */

/*
* CONTACT COMMON
******************************************************/
.contact {
    padding: 103px 0 230px 0;
    background: var(--color-lightgreen);
}
@media screen and (max-width:710px) {
    .contact {
        background: var(--color-lightgreen);
    }   
}

/*
* FORM PARTS
******************************************************/
.contact-field input[type=text],
.contact-field input[type=tel],
.contact-field input[type=email],
.contact-field textarea {
    border: var(--form-border);
    background: transparent;
    width: calc(100% - 2em);
    padding: 7px 1em;
}
.contact-field textarea {
    height:140px;
}
::placeholder {
    color: var(--color-form);
}
fieldset {
    border: none;
    margin: 0 0 0 1em;
    padding: 0;
}
label {
    display: inline-block;
    margin-right: 1em;
    margin-bottom: 0.4em;
    cursor:pointer;
}
.field-list label {
    display: block;
}
/* RADIO BUTTON DESIGN */
input[type="radio"] ,
input[type="checkbox"] {
  -moz-opacity:0;
  opacity:0;
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
}
input[type=radio] + .radio-icon {
    position: relative;
    vertical-align: middle;
    display: inline-block;
    box-sizing: border-box;
    width: 1.5rem;
    height: 1.5rem;
    margin-top: -0.2em;
    margin-right: 0.5em;
    border-radius: 50%;
    border: 1px solid var(--color-form);
    background: var(--color-default);
    box-shadow: none;
    transition: var(--transition-base);
}
input[type=radio]:focus + .radio-icon {
    border: 1px solid var(--color-theme-primary);
    background: var(--color-theme-primary);
    box-shadow: 0 0 1px 2px var(--color-theme-primary);
}
input[type=radio]:checked + .radio-icon {
    background: var(--color-theme-primary);
    border: 3px solid var(--color-default);
}
label:hover .radio-icon {
    border: 1px solid var(--color-theme-primary);
    background: var(--color-mintgreen);
}
/* CHECKBOX DESIGN */
input[type=checkbox] + .check-icon {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    box-sizing: border-box;
    width:  1.5rem;
    height: 1.5rem;
    margin-top: -0.25em;
    margin-right: 0.5em;
    transition: all 0.2s ease-out;
}
input[type=checkbox] + .check-icon:after {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    display: inline-block;
    box-sizing: border-box;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 4px;
    border: 1px solid var(--color-form);
    background: var(--color-defauult);
    box-shadow: none;
    transition: var(--transition-base);
}
input[type=checkbox]:checked + .check-icon:after {
    position: absolute;
    content: "";
    top: -0.1em;
    left: 0.4em;
    width: 60%;
    height: 90%;
    transform: rotate(45deg);
    border: solid 2px transparent;
    border-bottom: 3px solid var(--color-theme-primary);
    border-right: 3px solid var(--color-theme-primary);
    background: transparent;
    box-shadow: none;
}
input[type=checkbox]:focus + .check-icon {
    border-radius: 4px;
    box-shadow:var(--box-shadow);
}
input[type=checkbox]:focus + .check-icon:after {
    border-radius: 4px;
    box-shadow: none;
}
input[type=checkbox]:focus:not(:cheked) + .check-icon:after {
    border-color: var(--color-theme-primary);
}
  
label:hover input[type=checkbox]:not(:checked):not(:disabled) + .check-icon:after {
    border-color: var(--color-theme-primary);
    border-radius: 4px;
}
/* SP FOCUS FIX */
@media screen and (max-width:640px) {
    input,
    textarea {
        font-size: 16px;
    }
}
/* SWEET ALERT */
.swal-button {
    background-color:var(--color-theme-primary);
}
.swal-button:hover {
    background-color: var(--color-menu-hover);
}