/*------------------ GENERAL --------------------- */
div, section, aside, label, input, form, .column, .columns, .content-column, .title-div {
    box-sizing: border-box;
}
:root {
    font-size: 6vw;
    overflow-x: hidden;
}
section{
    overflow-x: hidden;
}
main{
    max-width: 2400px;
    padding-left: 16%;
    padding-right: 20%;
    font-weight: 400;
}

header {
    max-width: 600px;
    margin: 0 auto 100px auto;
}

hr {
    width: 600px;
    margin: 200px auto;
}

img {
    max-width: 100%;
}
.hidden {
    display: none;
}
.contact-section {
    margin-bottom: 10vh;
}
.space-around {
margin: 10%;
background: lightgray;
}
#ajax-div-answer {    
    clear: both;
    text-align: center;
    padding: 20px;
    visibility: hidden;
}
.ajax-div-wait {
    color: blue;
    visibility: visible!important;
    z-index: 1;
    width: 100%;
    background: rgb(255 255 255 / 95%);
    height: 60%!important;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
}
.ajax-div-yes {
    color: green;
    visibility: visible!important;
    z-index: 1;
    width: 100%;
    background: rgb(255 255 255 / 95%);
    height: 60%!important;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
}
.ajax-div-not {
    color: red;
    visibility: visible!important;
    z-index: 1;
    width: 100%;
    background: rgb(255 255 255 / 95%);
    height: 60%!important;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
}


/*------------------ FORMATTING --------------------- */
p, label, input, textarea, h3 {
    font-family: 'Muli', Verdana, Geneva, Tahoma, sans-serif;
    font-weight: 100;
    line-height: 2;
}
h1, h2, h3 {
    text-align: center;
}
h1 {
    font-size: clamp(20px, 4.8rem, 120px);
}
h2 {
    font-size: 1.5rem;
    margin-top: 150px!important;
}
h3 {
    font-size: 1.2rem;
}
h4 {
    font-weight: bolder;
}
.last-updated {
    text-align: right;
    font-size: 0.6rem;
    font-style: italic;
}
#span-data {
    text-transform: capitalize;
}

strong {
    font-weight: 900;
}

/*------------------ MOBILE FIRST LAYOUTING --------------------- */
aside {
    display: none;
    }
    div, section, aside, label, input, .column {
    min-width: 99%;
}
.columns {
    display: flex;
    flex-direction: column-reverse;
}
.content-column {
    padding: 4%;
}

/*------------------ TITLE SECTION --------------------- */
.title-div {
    background: #000;
    max-width: 2400px;
    width: 100%;
    margin: 0 auto;
    height: 13vh;
}
.big-title {
    font-size: 10rem;
    color: #70809026;
    line-height: 20vh;
    letter-spacing: -1vw;
    margin: 0px -90px 0;
    font-family: serif;
}

/*------------------ FORM --------------------- */
form {
    margin-top: 14vh;
}
form h3 {
    text-align: center;
}
input, textarea {
    margin-top: 1vh;
    margin-bottom: 3vh;
    background:#e8e8e8;
    border-width:0px;
    border:none;
}
input {
    font-size: 85%;
    padding: 2% 3% 2% 2%;
}
textarea {
    font-size: 85%;
    padding: 0.5% 0% 1% 2%;
    color: lightslategray;
    width: 95%
}
label {
    font-size: 80%;
}
::placeholder { 
    color: lightslategray;
    opacity: 1;  
}  
:-ms-input-placeholder {
    color: lightslategray;
}  
::-ms-input-placeholder {
    color: lightslategray;
}
.buttons-div {    
    display: flex;
    justify-content: space-between;
    padding: 0 0.7vw;
}
button {
    padding-top: 1vw;
    padding-bottom: 1vw;
    font-family: sans-serif;
    font-size: 70%;
    text-transform: uppercase;
}
button[type="submit"]{
    padding-left: 4vw;
    padding-right: 4vw;
    background: white;
    border-color: black;
}
button[type="reset"]{
    padding-left: 3vw;
    padding-right: 3vw;
    background: lightgray;
}

/* --------------------- TABLET --------------- ---  */

@media screen and (min-width: 510px) {
    :root {font-size: 5vw;}
    aside {display: block;}
}   

@media screen and (min-width: 650px) {
    :root {font-size: 4vw;}
}
.last-updated {
    text-align: right;
    font-size: 0.8rem;
}


/* --------------------- DESKTOP ------------------  */

@media screen and (min-width: 950px) {

    :root {
        font-size: 2vw;
    }
    div, section, aside, .column {
        min-width: 10px;
     }
    h2 {
    /* font-size: 5rem; */
    margin-block-start: 2.5rem;
    margin-block-end: 2.5rem;
}
    
/* --------------------- DESKTOP TITLE SECTION ------------------  */
    .big-title {
        font-size: 60rem;
    }  

/* --------------------- DESKTOP COLUMNS SECTION ------------------  */
    .columns {
        flex-direction: row;
    }
    .secondary-column {
        width: 48%;
        float: left
    }
    .content-column {
    padding: 0 6%;
    }
/* --------------------- DESKTOP FORM ------------------  */
    form h3 {
       padding-bottom: 2vw;
    }
    .input-column {
        width: 50%;
        float: left;
    }
    .input-column-big {
        width: 75%;
        float: left;
    }
    .input-column-small {
        width: 25%;
        float: left;
    }
    textarea {
        padding: 0.5% 0% 1% 2%;
    }
    .buttons-div {    
        padding: 2.4vw 0.6vw 2.4vw 0.1vw;
        clear: both;
    }

    /* #ajax-div-answer {    
        padding: 2.4vw 0.6vw 2.4vw 0.1vw;
    }
     */
}