/*
* Protobone Framework | v1.0.0 | MIT | July 4th, 2017
* Copyright 2017, Selwyn Orren @ Linuxweb
* Adapted from Skeleton Grid by Dave Gamache
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 04/07/2017
*/

/* Overides
–––––––––––––––––––––––––––––––––––––––––––––––––– */
input, textarea, label, p {
    margin-bottom: 0;
}
label {
    font-size: 0.75rem;
}

/* Layout Structure
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#wrapper {
    height: 100vh;
}
#mainContainer {
    position: relative;
    top: 50%;
    -webkit-transform: perspective(1px) translateY(-50%);
            transform: perspective(1px) translateY(-50%);
}
#mainContainer a {
    border: 1px solid #C8C8C8;
    padding: 0.75rem;
    border-radius: 4px;
    cursor: pointer;
}
#mainContainer img {
    max-width: 250px;
}
#mainContainer h5 {
    margin-bottom: 2rem;
}
#myform {
    margin-top: 2rem;
}

/* Navigation Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */


/* Sub Navigation Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */


/* Responsive Navigation Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */


/* Contact Form
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* .name-field:invalid {
  border-color: red;
}
.email-field:invalid {
  border-color: red;
}
.message-field:invalid {
  border-color: red;
} */
.error {
    background: #FCD8DC;
    padding: 0px 10px 0px 10px;
    display: none;
    color: #C03;
    /*font-size: 10px;*/
    margin-bottom: 10px;
}

.success {
    display: none;
    padding: 5px 0px 5px 10px;
    background: #B0FFB0;
    color: #555;
    /*font-size: 12px;*/
    margin-bottom: 20px;
}


/* Gallery
–––––––––––––––––––––––––––––––––––––––––––––––––– */


/* Image Sliders
–––––––––––––––––––––––––––––––––––––––––––––––––– */


/* Carousels
–––––––––––––––––––––––––––––––––––––––––––––––––– */


/* Back to Top
–––––––––––––––––––––––––––––––––––––––––––––––––– */


/* Cookie Cutter
–––––––––––––––––––––––––––––––––––––––––––––––––– */


/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/

/*
The following media queries are calculated using the universal em measurement
and are geared toward the base grid as setup in the skeleton.css file. As a base its using 16px
Example
=============
30em = 480px
75em = 1200px
So we are targeting all three core viewpoints for each typical device.
*/

/* Mobile Devices */
@media screen and (max-width: 30em) {
    #mainContainer {
        position: relative;
        top: initial;
        -webkit-transform: initial;
            -ms-transform: initial;
                transform: initial;
    }
    .g-recaptcha {
        float: left;
    }
}

/* Phablet Devices */
@media screen and (min-width: 30.0625em) and (max-width: 47.9375em) {
    #mainContainer {
        position: relative;
        top: initial;
        -webkit-transform: initial;
            -ms-transform: initial;
                transform: initial;
    }
}

/* Desktop to HD Desktop */
@media screen and (min-width: 75em) {}