body{
    font-family: "Roboto", sans-serif;
}
#splash{
    height:100vh;
    width:100vw;
    border:0;
    background-size: contain;
    background-repeat: no-repeat;
    background-color:#060807;
    background-position: center center;
    background-image: url("./splash.jpg");
}
@media only screen and (max-width: 600px){
    #splash{
        background-image: url("./msplash.jpg");
    }
}

h3{
    font-size:2em;
    margin:20px 0;
}

/*-- CONTACT FORM MESSAGE STYLING --*/


#contact {
    position: relative;
    z-index:2;
    width:70%;
    padding:10px 15%;
    text-align:left;  
    background-color:#212121;
    color: #c0bfbf;
}

#contact-form p{
    margin:20px 0 30px;
}

#contact-form .contact_form .input-field {
    margin-bottom: 1.72rem;
}
#contact-form .input-field {
    position: relative;
}
#contact-form input,  #contact-form textarea {
    background-color:#212121;
    color: #c0bfbf;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, .7);
    background-color: transparent;
    outline: none;
    height: 3rem;
    width: 100%;
    font-size: 1rem;
    margin: 0 0 15px 0;
    padding: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    -ms-transition: 0.3s;
    transition: 0.3s;
}

.input-field label.active {
    font-size: 0.8em!important;
    opacity:0.7;
    -webkit-transform: translateY(-260%);
    -moz-transform: translateY(-260%);
    -ms-transform: translateY(-260%);
    -o-transform: translateY(-260%);
    transform: translateY(-260%); 
}
#contact-form .input-field label {
    color:#FFF;
    opacity: 0.7;
    position: absolute;
    top: 0.8rem;
    left: 0rem;
    font-size: 1em;
    cursor: text;
    -webkit-transition: 0.2s ease-out;
    -moz-transition: 0.2s ease-out;
    -o-transition: 0.2s ease-out;
    -ms-transition: 0.2s ease-out;
    transition: 0.2s ease-out;
}

.waves-effect {

    position: relative;
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-transition: all 650ms ease;
    -moz-transition: all 650ms ease;
    -o-transition: all 650ms ease;
    -ms-transition: all 650ms ease;
    transition: all 650ms ease;
}



.btn, .btn-large {
    background-color: #ababab;
    padding:15px;
    border-radius:5px;
    text-transform:uppercase;
    border:0px solid;
    text-decoration: none;
    color: #FFF;
    text-align: center;
    letter-spacing: 0.8px;
    -webkit-transition: 0.2s ease-out;
    -moz-transition: 0.2s ease-out;
    -o-transition: 0.2s ease-out;
    -ms-transition: 0.2s ease-out;
    transition: 0.2s ease-out;
    cursor: pointer;

}


#message.warning {
    color:#FFF;
	background:#F44336;
}

#message.success {
    color:#FFF;
	background:#4CAF50;
}


#message {
    display:none;
    position: absolute;
    top:0;
    left:0;
    z-index:3;
    width:80%;
    margin:0 auto;
    text-align:center;  
}

#alert {
    vertical-align: middle;
    margin:0 auto;
    padding-bottom:2rem;
    padding-top:2rem;
    padding-left:2rem;
    padding-right:2rem;
}

.alert_icon {
	font-size:2rem;
	color:white;
}