/* custom styles for fourcad.com */

/* table of contents

    -. copyrights
    1. global
    2. header
    3. main-top: standards
        3.1 shared properties
        3.2 individual properties
    4. main-bottom: contact form
    5. footer-top: contact info
    6. media querries
        6.1 logo extension past 1500px
        
*/


/* -. copyrights

    fourcad inc © 2021 | all rights reserved
    [https://www.fourcad.com]

    author: clara fourcade
    last update: 7.27.21
    questions/concerns? email clara@cxfdesign.com 

*/


/* start 1. global */

    :root {
        --black: rgb(20,20,20);
        --blue: rgb(21,53,91);
        --orange: #f05a25;
        --bright-blue: rgb(19, 72, 177);
        --dark-gray: rgb(73, 77, 85);
        font-size: 16px;
        font-family: 'Helvetica Neue', sans-serif;
    }

    html, body {
        width: 100%;
        height: 100%;
        margin: 0px;
        padding: 0px;
        overflow-x: hidden; 
    }

    .blue {
        background: var(--blue);
        box-shadow: 0 0 100px 0 rgba(43, 74, 110, .5), 0 0 30px 0 rgba(21, 56, 95, .5);
    }

    .max {
        max-width: 1500px;
        margin: 0 auto;
    }

    .padded-section {
        margin-top: 30px;
        margin-bottom: 30px;
        padding-top: 30px;
        padding-bottom: 30px;
    }

/* end 1. global */


/* start 2. header */

    header {
        position: relative;
    }

    #logo { 
        max-width: 300px;
        min-width: 160px;
        max-height: 96px;
        padding-left: 0;
        margin-left: 0;
    }

    h1 {
        font-size: 130%;
    }

    h2, h5 {
        font-size: 150%;
        line-height: 1.3;
    }

    h2.a {
        font-size: 200%;
        line-height: 1.2;
    }

/* end 2. header */


/* start 3. main-top: standards */

    /* start 3.1 shared properties */

        .ipc {
            min-width: 200px;
            padding: 0 5px;
        }

        .ipc-description {
            padding: 10px 5px;
            justify-content: flex-start;
        }

        .ipc-name, .ipc-description {
            color: white;
            font-size: 18px;
            text-align: center;
            display: flex;
            flex-direction: column;
        }

        .ipc-name {
            z-index: 3;
            font-weight: bold;
            padding-bottom: 30px;
            min-height: 100px;
            width: 100%;
            justify-content: flex-end;
            align-items: center;
            border: none;
            position: relative;
        }

        .ipc-name:after {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            opacity: 0;
            transition: all .5s ease-in-out;
            z-index: -1;
        }

        .ipc-name:hover:after,
        .ipc-name[aria-expanded="true"]:after {
            opacity: 1;
        }

    /* end 3.1 shared properties */


    /* start 3.2 individual properties */

        .highlight:before {
            content: "";
            background: linear-gradient(to right, rgba(255,255,255,0) 63%, rgba(255,255,255,.16) 63%);
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            position: absolute;
            z-index: 1;
        }

        .yellow {
            background: linear-gradient(to top, #fbb03b 12%, #fbd23b 79%, #fcee21 94%);
        }

        .yellow:after {
            background: linear-gradient(to top, #ff9f04 12%, #fac70d 79%, #fcee21 94%);
        }

        .blues {
            background: linear-gradient(to top, #15375f 0%, #0071bc 52%, #29abe2 100%);
        }

        .blues:after {    
            background: linear-gradient(to top, #042e5f 0%, #025b97 52%, #079fe0 100%);
        }

        .purple {
            background: linear-gradient(to top, #833abb 0%, #7a1fbe 15%, #802379 74%, #72156c 100%);
        }

        .purple:after {
            background: linear-gradient(to top, #7514c0 0%, #6d05bd 15%, #790e70 74%, #6b0764 100%);
        }

        .brown {
            background: linear-gradient(to top, #42210b 0%, #42210b 10%, #8c6239 87%, #8c6239 100%);
        }

        .brown:after {
            background: linear-gradient(to top, #3f1b03 0%, #2c1303 10%, #7e4f1f 87%, #7a5026 100%);
        }

        .orange {
            background: linear-gradient(to top, #f05a25 0%, #f9ae38 100%);
        }

        .orange:after {
            background: linear-gradient(to top, #ec4407 0%, #f59a07 100%);
        }

    /* end 3.2 individual properties */

/* end 3. main top: standards */


/* start 4. main-bottom: contact form */

    #contact-form {
        max-width: 700px;
    }

    textarea {
        height: 200px !important;
    }

    #contact-form-toggle, 
    #contact-form-submit {
        z-index: 0;
        position: relative;
        border-color: var(--orange);
        border-width: 2px;
        background-color: transparent;
        color: white;
    }

    #contact-form-toggle:after,
    #contact-form-submit:after {
        z-index: -1;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        content: "";
        background: linear-gradient(to top, #ec4407 0%, #f59a07 100%);
        opacity: 0;
        transition: all .5s ease-in-out;
    }

    #contact-form-toggle:hover:after,
    #contact-form-toggle[aria-expanded="true"]:after,
    #contact-form-submit:hover:after {
        opacity: 1;
    }

    .divider {
        margin: auto 10px;
    }

/* end 4. main-bottom: contact form */


/* start 5. footer-top: contact info */

    #contact .row .col-2 {
        font-weight: 700;
        color: var(--bright-blue)
    }

    #footer-img img {
        width: 100%;
        height: 100%;
        max-width: 100%;
        object-fit: cover;
        object-position: 0% 50%;
    }

/* end 5. footer-top: contact info */


/* start 6. media querries */

    /* start 6.1 logo extension past 1500px */

        @media only screen and (min-width: 1500px) {
            header:before {
                content: "";
                background: var(--blue);
                position: absolute;
                height: 95px;
                width: 18%;
                z-index: -1;
            }
        }

        @media only screen and (min-width: 2310px) {
            header:before {
                width: 30%;
            }
        }

        @media only screen and (min-width: 3730px) {
            header:before {
                width: 37%;
            }
        }

        @media only screen and (min-width: 5720px) {
            header:before {
                width: 42%;
            }
        }

        @media only screen and (min-width: 9200px) {
            header:before {
                width: 0%;
                display: none;
            }
        }

    /* end 6.1 logo extension past 1500px */

/* end 6. media querries */