/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*         o°        o°        o°                                         °o        °o        °o         */
/*        O         O         O                   CONTACT                   O         O         O        */
/* ><(((°>   ><(((°>   ><(((°>                                               <°)))><   <°)))><   <°)))>< */
/* _-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_ */

/* ¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨ */
/*  o°        o°      o°      o°                   FORM                    °o      °o      °o        °o  */
/* O ><(((°> O . . . O . . . O . . . O . . . O . . . O . . . O . . . O . . . O . . . O . . . O <°)))>< O */

.contactForm{
    padding:0 15px;
    margin:0 auto;
    max-width:644px;
}

    /* label */

    .contactForm-label{
        display:block;
        font:normal 16px / 19px 'Intercolor HN', sans-serif;
        color:#000;
    }

    /* inputs + select + textarea */

    .contactForm-input,
    .contactForm-selectContainer,
    .contactForm-textarea{
        display:block;
        font:normal 16px / 19px 'Intercolor HN', sans-serif;
        color:#000;
        border:solid 1px #b76cc4;
        padding:12px;
        box-sizing:border-box;
        border-radius:2px;
        width:100%;
        margin:5px 0 22px 0;
    }

    /* select */

    .contactForm-selectContainer{
        position:relative;
        height:45px;
    }

        .contactForm-selectContainer span,
        .contactForm-selectContainer select{
            position:absolute; top:50%; left:0;
            width:100%;
            cursor:pointer;
            border:none;
            transform:translateY(-50%);
            box-sizing:border-box;
            padding:0 12px;
        }

        .contactForm-selectContainer span::after{
            content:'';
            position:absolute; top:50%; right:12px;
            transform:translateY(-50%);
            width:0;
            height:0;
            border-style:solid;
            border-width:10px 7px 0 7px;
            border-color:#e8bbaa transparent transparent transparent;
        }

        .contactForm-selectContainer select{
            opacity:0;
            height:100%;
        }

        .contactForm-selectContainer select,
        .contactForm-selectContainer select:focus{
            font-size:16px;
        }


    /* textarea */

    .contactForm-textarea{
        height:195px;
    }

    /* submit */

    .contactForm-submit{
        margin:25px auto 0 auto;
        width:160px;
        border:none;
        display:block;
        font:normal 16px / 16px 'Intercolor HN', sans-serif;
        color:#fff;
        padding:12px 0;
        text-align:center;
        border-radius:9px;
        background:#f7b191;
        cursor:pointer;
    }

    .contactForm-submit:hover{
        background:#b86ec3;
    }

    /* honeypot */

    .contactForm-honeypot{
        display:none;
    }

    /* error / success Message */
    .contactForm-result{
        margin:0 0 22px 0;
        padding:10px;
        text-align:center;
        border:solid 1px transparent;
        border-radius:5px;
        color:#fff;
        display:none;
    }

    /* success */

    .contactForm-result.success{
        background:#68aa25;
        display:block;
    }

    /* error */

    .contactForm-result.error{
        background:#c91035;
        display:block;
    }

    /* text */

    .contactForm-result p{
        font:normal 19px / 23px 'Intercolor HN', sans-serif;
    }

    .contactForm-result ul{
        padding:10px 0 0 0;
    }

    .contactForm-result li{
        font:normal 16px / 19px 'Intercolor HN', sans-serif;
        list-style-type:none;
    }

    .contactForm-result li:before{
        content:'- ';
    }

/* ¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨ */
/*  o°        o°      o°      o°                CONTACT INFO               °o      °o      °o        °o  */
/* O ><(((°> O . . . O . . . O . . . O . . . O . . . O . . . O . . . O . . . O . . . O . . . O <°)))>< O */

.contactInfo{
    margin:60px auto 35px auto;
    max-width:644px;
    text-align:center;
    padding:0 15px;
}

    .contactInfo-container{
        padding:35px 0;
        border-top:solid 1px #494949;
        border-bottom:solid 1px #494949;
    }

        /* text */

        .contactInfo p,
        .contactInfo-title{
            font:normal 16px / 19px 'Intercolor HN', sans-serif;
            color:#494949;
        }

/* ¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨ */
/*  o°        o°      o°      o°                  FACEBOOK                 °o      °o      °o        °o  */
/* O ><(((°> O . . . O . . . O . . . O . . . O . . . O . . . O . . . O . . . O . . . O . . . O <°)))>< O */

.contactFacebook{
    width:500px;
    margin:0 auto;
    padding:35px 15px;
}

/* facebook fallback */

.contactFacebook blockquote a{
    text-align:center;
    font:bold 16px / 19px 'Intercolor HN Bold', sans-serif;
    color:#f46767;
    display:block;
}

@media all and (max-width: 530px){
    .contactFacebook{width:320px; padding:35px 0;}
}
