@charset "utf-8";

/* ######################################## CONTACT PHP CSS ################################### */

 * {box-sizing: border-box;}

/* Style the input container */
.input-container {
    display: -ms-flexbox; /* IE10 */
    display: flex;
    width: 100%;
    margin-bottom: 8px;
    font-size: 16.5px;
	}

/* Style the form icons */
.icon { 
    padding: 10px 6px 6px 6px;		/* top|right|bottom|left */
    background: dodgerblue;
    color: white;
    min-width: 35px;
    text-align: center;
    border: none;
    border-radius: 5px 0px 0px 5px;   /* top-left|top-right|bottom-right|bottom-left */
	}

/* Style the input fields */
.input-field {
    font-size: 16.5px;
    width: 100%;
    line-height: 1.5;
    font-family: tahoma,georgia,  arial, Verdana, Segoe, 'Open Sans',helvetica,roboto ,sans-serif;
    padding: 6px;  /* top|bottom|right|left */
    outline: none;
    background: #f6f6f6;
    border: 1px solid lightgray;
    border-radius: 0px 5px 5px 0px;	  /* top-left|top-right|bottom-right|bottom-left */
	}

.input-field:focus {
    border: 2px solid dodgerblue;
	}

/* Resize Message input field only vertically, NOT horizontally */
		textarea[name=message] {
		resize: vertical;
		}

/* Set a style for the submit button */
#submit {
    font-size: 20px;
    color: white;    
    background-color: dodgerblue;
    height: 44px;
	letter-spacing: 2px;
	text-transform: uppercase;
	font-family: 'open_sanscondensed_light', tahoma,georgia,  arial, Verdana, Segoe, 'Open Sans',helvetica,roboto ,sans-serif;
    padding: 6px 0px;	/* top+bottom; right+left */
    cursor: pointer;
    width: 100%;
    opacity: 0.9;
    border: none;
    border-radius: 5px 5px 5px 5px;		/* top-left|top-right|bottom-right|bottom-left */
	}
#submit:hover {
	color: #fff;
	background-color: steelblue;
	opacity: 0.9;
	}

.success {
	padding: 0.5em;
	margin-bottom: 0.75rem;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
	color: #468847;
	background-color: #dff0d8;
	border: 1px solid #d6e9c6;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	}

.error {
	padding: 0.5em;
	margin-bottom: 0.75rem;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
	color: #b94a48;
	background-color: #f2dede;
	border: 1px solid rgba(185, 74, 72, 0.3);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	}

.clear-button {
	font-size: 14px;
	color: #333;	
	background-color: #f0f0f0;
	letter-spacing: 1px;
	/*text-transform: uppercase;*/
	font-family: 'open_sanscondensed_light', tahoma,georgia,  arial, Verdana, Segoe, 'Open Sans',helvetica,roboto ,sans-serif;
	padding: 4px 14px; /* top+bottom; right+left */
	cursor: pointer;
	text-align: center;
	display: inline;
	width: auto;
	margin-top: 20px;
	transition: background-color 0.3s ease;
	border: 0.5px solid steelblue;
	border-radius: 5px 5px 5px 5px;		/* top-left|top-right|bottom-right|bottom-left */
	}
.clear-button:hover {
    color: #000;    
    background-color: #e0e0e0;
    opacity: 0.9;
	}

#form-messages {
	margin: 10px 10px 5px 0;	/* top|right|bottom|left */
	font-size: 18px;
	width: 100%;
	}