/*-----------------------------------------
    Created on : 5 Dec 2015, 6:30:12 PM
    Author     : Aaron Pulley
    Updated on : 2 Mar 2017
-----------------------------------------*/

@import url('https://fonts.googleapis.com/css?family=BenchNine:300|Palanquin:500');

/*----------------------
Document defaults
----------------------*/
/*
Colors:
#0f0603  background off-black
#e5d8cf  text off-white
#ff791a  bright orange
#803d0d  dark orange
#404040  dark gray
#1a1a1a  darkest gray
*/

*
{
    box-sizing: border-box;
}

html
{
    margin: 0%;
    padding: 0%;
}

body
{
    background-color: #0f0603;
    width: 90%;
    min-width: 802px;
    margin: 0% auto;
    padding: 0%;
}

img
{
    width: 100%
}

.half-img-right
{
    float: right;
    width: 48%;
    margin-left: 4%;
}

a:link
{
    color: #e5d8cf;
}

a:visited
{
    color: #e5d8cf;
}

a:hover
{
    color: #ff791a;
}

a:active
{
    color: #803d0d;
}

.clearfix:after
{
	content: " ";
	display: table;
	clear: both;
}

.orange-button
{
    display: block;
    margin-bottom: 32px;
    padding: 10px 0px;
    background: linear-gradient(#ff791a, #803d0d);
    text-align: center;
    font: normal 18px 'BenchNine', sans-serif;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #0f0603;
}

.orange-button:visited
{
    color: #0f0603;
}

.orange-button:hover
{
    background: linear-gradient(#803d0d, #ff791a);
}

.orange-button:active
{
    color: #e5d8cf;
}

.sidebar-item h2
{
    display: block;
    padding: 10px 0px;
    background: linear-gradient(#404040, #1a1a1a);
    border-top: 2px solid #ff791a;
    text-align: center;
    font: normal 18px 'BenchNine', sans-serif;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #e5d8cf;
}

/*----------------------
Typography
----------------------*/

body
{
    font: normal 14px 'Palanquin', sans-serif;
    color: #e5d8cf;
}

p
{
    line-height: 1.4em;
}

h1, h2, h3, h4, h5, h6
{
    font-family: 'BenchNine', sans-serif;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

h1
{
    margin: 20px auto;
    padding: 0px;
    font-size: 32px;
    line-height: 32px;
    text-align: center;
}

h2
{
    margin: 0px;
    padding: 0px;
    font-size: 18px;
    line-height: 18px;
}

/*----------------------
Header
----------------------*/

header
{
    margin: 22px auto 0px;
    padding: 20px;
    width: 58%;
    min-width: 464px; /* 58% of 800px */
    background: linear-gradient(#404040, #1a1a1a);
    border-top: 2px solid #ff791a;
}

header h1
{
    margin: 0%;
    padding: 0%;
    font-size: 32px;
    line-height: 32px;
}

header > a
{
    display: inline-block;
    color: #ff791a;
    text-decoration: none;
}

header > a:visited
{
    color: #ff791a;
}

header > a:hover
{
    color: #803d0d;
}

header > a:active
{
    color: #e5d8cf;
}

/*----------------------
Nav
----------------------*/

nav
{
    float: right;
    margin: 7px 0px 0px;
    font: normal 20px 'BenchNine', sans-serif;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

nav ul
{
    list-style: none;
    margin: 0%;
    padding: 0%;
}

nav li
{
    display: inline-block;
    margin: 0em;
    padding: 0em;
}

nav a
{
    display: block;
    color: #ff791a;
    margin: 0px 0px 0px 20px;
    padding: 0%;
    font-size: 1em;
    text-decoration: none;
}

nav a:visited
{
    color: #ff791a;
}

nav a:hover
{
    color: #803d0d;
}

nav a:active
{
    color: #e5d8cf;
}

/*----------------------
Main
----------------------*/
main
{
    display: inline-block;
    float: left;
    width: 58%;
    min-width: 464px; /* 58% of 800px */
    margin: 0% 1%;
    padding: 0px 0px 20px;
}

.error-message
{
    color: red;
}

.card-container
{
    width: 60%;
    min-width: 480px; /* 60% of 800px */
    margin: 0%;
    padding: 0%;
}

.card
{
    display: inline-block;
    float: left;
    width: 30%;
    height: 200px;
    margin: 0% 1.6% 3.2%;
    padding: 0px;
    overflow: hidden;
    color: #e5d8cf;
    text-decoration: none;
}

.card > img
{
    display: block;
    width: 100%;
    height: 88px;
    object-fit: cover
}

.card > div
{
    display: block;
    height: 112px;
    padding: 8px;
    background: linear-gradient(#404040, #1a1a1a);
    border-top: 2px solid #ff791a;
}

.card h2, .card p
{
    margin: 0px;
    padding: 0px;
}

.card h2
{
    line-height: 1em;
}

.card .skills
{
    margin-bottom: 2px;
    font-size: 11px;
    color: #ff791a;
}

/*----------------------
Forms
----------------------*/

#filter
{
    margin-top: 15px;
}

#filter input[type=checkbox]
{
    margin-left: 8.3%;
}

button.orange-button
{
    width: 100%;
    border: none;
}

#filter button
{
    margin-top: 15px;
}

.contact-form
{
	text-align: center;
}

.contact-form form
{
	display: inline-block;
	margin: 0px auto;
	text-align: left;
}

.contact-form input
{
	width: 400px;
	margin: 10px;
	padding: 10px;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 16px;
}

.contact-form textarea
{
	width: 402px;
	resize: none;
	margin: 10px;
	padding: 10px;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 16px;
}

.contact-form input[type=submit]
{
	width: 100px;
}

.requirement-alert
{
    margin: 0px 10px;
    color: red;
}

/*----------------------
Sidebars
----------------------*/

.sidebar
{
    display: inline-block;
    float: left;
    width: 18%;
    margin: 72px 1% 0%;
    padding: 0px;
}

#about-me
{
    border-top: 2px solid #ff791a;
}

#about-me img
{
    float: left;
    margin: 0px 10px 0px 0px;
    width: 50%;
}

#about-me .orange-button
{
    text-decoration: none;
}

#social
{
    border-bottom: 2px solid #ff791a;
}

/*----------------------
Footer
----------------------*/

footer {
    clear: both;
    width: 58%;
    margin: 0px auto 12px;
    padding: 20px 0%;
    border-top: 2px solid #ff791a;
    
    font-size: 10px;
}

footer > div
{
    display: inline-block;
    float: left;
    width: 31%;
    margin: 0px;
    padding: 0px;
}

footer > div + div
{
    margin-left: 3.4%;
}

footer p:first-child
{
    margin-top: 0px;
}

footer .list-head
{
    margin: 0px;
}

footer ul
{
    margin: 0px;
    padding-left: 18px;
    list-style-type: none;
}