.grecaptcha-badge { 
    visibility: hidden !important;
}

html,body {
    margin:0;
    padding:0;
}

html {
    cursor:crosshair;
    background: linear-gradient(180deg,rgb(99 156 169) 0%,#796653 100%);
}
body {
    background-image:url(coffee_contrast.webp);
    background-position: bottom left;
    background-size: cover;
    background-repeat: no-repeat;
    opacity:0;
}

.gowun-batang-regular {
    font-family: "Gowun Batang", serif;
    font-weight: 400;
    font-style: normal;
}

.gowun-batang-bold {
    font-family: "Gowun Batang", serif;
    font-weight: 700;
    font-style: normal;
}

/* FONTS <uniquifier> Use a unique and descriptive class name
<weight>: Use a value from 100 to 900 */
.montserrat-g {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
}

.staatliches-regular {
    font-family: "Staatliches", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
  

/* ELEMENTS */
p,input,textarea {
    font-size: 2cqw;
    font-family: "Gowun Batang", serif !important;
    font-weight: 400;
    font-style: normal;
}



h1,h2,h3,h4,h5,h6,p,input,textarea,label {
    line-height: 1;
    margin:0;
}

a {
    color:#aeccd1;
    text-decoration: none;
    /* text-shadow: 4px,4px,0px,#3b4c4f; */
    text-shadow: #3b4c4f 3px 3px 3px;
    /* font-family: "Gowun Batang", serif !important; */
    
}
a:hover {
    color:rgb(99 156 169);
}

p {
    color:#ffffff;
    font-size: 1.6cqw;
    font-weight: 400;
    margin-bottom: 3vh;
    text-shadow: none;
}

/* WHITE BRICK */
h1 {
    color:#3b4c4f;
    font-size: 14cqw;
    text-align: right;
    letter-spacing: 1.15vw;
    font-family: "Gowun Batang", serif !important;
    font-weight: 400;
    font-style: normal;
    text-shadow: none;
}

/* SECTIONS */
h2 {
    color:#fff;
    font-size: 7.5cqw;
    font-family: "Gowun Batang", serif !important;
    font-weight: 400;
    font-style: normal;
    margin-top:-1.75vh;
    text-shadow: 0 1px #2b1e19;
}

/* SERVICES */
h3,label {
    color:#e5be67;
    font-size: 2.5cqw;
    font-family: "Staatliches", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    text-shadow: 0 1px #332925;
}
label {
    color:#ffffff;
    display: flex;
    align-items: center;
}

/* ENDURING ... */
h4 {
    font-size: 2.5cqw;
    text-align: center;
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 100;
    font-style: normal;
    display: inline-block;
    color:#ffffff;
}

/* WEB & MARKETING */
h5 {
    font-size: 4cqw;
    text-align: right;
    letter-spacing: 3.75vw;
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
    color:#ffffff;
    text-shadow: 0 1px #4f7e87;
}

/* LAYOUT */
.titles {
    container-type: inline-size;
}

.row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    
}

.col {
    margin:0 4vw;
    flex-shrink: 0;
    flex-grow: 1;
}

.allure {
    margin-top:4vh;
    text-align: center;
    align-items: center;
}

#brick {
    margin: 0 -18vw;
}

canvas {
    display: inline !important;
}

.services,.connect,.about,.work {
    margin-top:10vh;
}
.services .col:last-of-type {
    background: linear-gradient(220deg,#351c23 0%,#473c3c 100%);
    padding:2vh;
    border-radius: 5px;
    box-shadow: 0 2px #3a3030;
}
.services .col p{
    color:#c7c1b4;
}
.services .col p:last-of-type {
    margin-bottom: 0;
}

.work h4 {
    font-family: "Staatliches", sans-serif;
    font-size:3.5cqw;
}

.work p {
    margin-bottom:4.5vh;
}

.about p{
    text-shadow: 0 1px #976f60;
    font-weight: 200;
    line-height: 1.1;
}

.about p:last-of-type{
    margin-bottom: 0;
}


.services .col:first-of-type,.connect .col:first-of-type,.about .col:first-of-type,.work .col:first-of-type {
    flex: 1 1 10vw;
    text-align: right;
}
.services .col:last-of-type,.connect .col:last-of-type,.about .col:last-of-type,.work .col:last-of-type {
    flex: 1 1 10vw;
}

input,textarea,button{
    width:50%;
    border:none;
    resize: none;
    border-radius: .5cqb;
    padding:10px;
    box-sizing: border-box;
    background-color: #252321;
    color:#fff;
}
input{
    /* height:8cqh; */
    margin-bottom: 2cqh;
}
textarea {
    /* height:20cqh; */
    margin-bottom: 2cqh;
}

button[type="submit"] {
    font-size: 2.5cqw;
    font-family: "Staatliches", sans-serif;
    /* height:10cqh; */
    cursor: pointer;
    padding:2px;
    background-color: #3b4c4f;
    border:1px dotted #596c6f;
    box-shadow: 0 3px #2d3839;
}

.no-hover {
    background-color: #839784 !important;
    border:1px dotted #678068 !important;
    box-shadow: 0 3px #678068;
}
button[type="submit"]:not(.no-hover):hover {
    background-color:#2b393c;
}

.messageRecieved {
    color:#d3ffe5;
}


footer {
    height:20vh;
}

.sketchbrick,.phone{
    margin-top:10vh;
}

.phone {
    transform: rotate(3deg);
    opacity: .6;
    width:20cqw;
}
.sketchbrick {
    width:33cqw;
    margin-top:2vh;
}


.filter-green {
    filter: brightness(0) saturate(100%) invert(93%) sepia(12%) saturate(10%) hue-rotate(30deg) brightness(89%) contrast(91%);
}

span {
    color:#c7dceb;
    text-shadow: 0 1px #9faf6d;
    margin-left:.5vw;
}

/* autofill */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
}
input:-webkit-autofill{
    -webkit-text-fill-color: #ffffff !important;
}

::placeholder {
    color: rgb(255, 255, 255);
    opacity: .5; /* Firefox */
  }


/* Save contact info effects */
.fade-in {
    transition: opacity 150ms ease-in-out;
    opacity: 1;
}
.fade-out {
    transition: opacity 150ms ease-in-out;
    opacity: 0;
}

.hide {
    opacity: 0;
}

/* Media queries */
@media (max-width: 992px) {
    body {
        background-position: top left !important;
    }
    .row{
        flex-direction: column;
    }
    .allure{
        margin-top: 6vh;
    }
    .allure col:last-of-type{
        padding-top:-200px !important;
    }
    .services,.connect,.about,.work{
        margin-top:14vh;
    }
    .sketchbrick,.phone{
        display: none;
    }

    a {
        font-size:8cqw;
    }

    h2{
        font-size:10cqw;
    }
    h3,label{
        font-size:6cqw;
    }
    h4{
        font-size:6cqw;
    }
    h5{
        text-shadow:none;
    }
    h5,h6{
        font-size:4cqw;
    }
    p {
        font-size:5.2cqw;
        line-height: 1.2;
    }
    input,textarea,button{
        width:100%;
        font-size:8cqw !important;
        min-height: 1cqh;
    }
    input{
        /* height:8cqh; */
    }
    textarea {
        /* height:20cqh; */
    }
    footer {
        height:5vh;
    }
}