/*
colors 
brown: #4f47f0
orange: #e40, #d30
blue: #29d
gray: #7f7770
*/

body {background: #4f4740 url(/images/header_background.png) fixed; font-family: 'Roboto Condensed'; padding: 4rem 0; color: #fff;}
.card {color: #4f4640; border-radius: .2rem; box-shadow: 0 .2em .2em rgba(0,0,0,0.3); padding: 2rem 4rem; margin-bottom: 1rem; background: #fff; opacity: .9; transition: opacity .5s;}
.card .section {border-top: 1px solid #e7e7e7; padding: 1.5rem 0;}
.card:hover {opacity: 1;}
.button {color: #d30; border-color: #d30; margin-bottom: 0;}
.button:hover {background: #d30; color: #fff; border-color: #d30}
p.buttons {text-align: right;}
.thumbnail {background: #eee; border-radius: .2rem;}

nav {text-align: center; font-size: 1.2em; font-weight: 400;}
nav ul {margin: 0; padding: 0;}
nav li {margin: 0; padding: 0; list-style: none; display: inline-flex;}
nav a {display: inline-flex; margin: 0; padding: 1em; text-decoration: none; color: #fff; opacity: .7;}
nav a:hover {color: #fff; opacity: 1;}

#intro {background: #e40 url(/images/background_plus.png); color: #eee7e0; padding: 1.5em; opacity: 1;}
#intro .button {color: #fff; border-color: #fff; opacity: .8;}
#intro .button:focus, #intro .button:hover {opacity: 1;}

.work {margin-bottom: 2em;}
.work img {display: block; width: 100%; height: auto; object-fit: contain;}

#card404 {font-size: 2rem; text-align: center;}

#process .columns {text-align: center;}
#process h3 {font-size: 2.5rem;}
#process ul {list-style: none; padding: 0;}
.border-right {border-right: 1px solid #e7e7e7;}
.bignumber {display: block; color: #e40;}
.bignumber i {font-size: 6rem;}

.alert {padding: 1em; color: #900; text-align: center;}
.alert i {vertical-align: middle; display: block;}
/*
span.bignumber {display: block; font-size: 4rem; border-radius: 4rem; width: 8rem; height: 8rem; margin: auto; vertical-align: center; text-align: center; background: #e40; color: #fff;}
*/

h1 {font-weight: 300;}
h2, h3 {color: #7f7770;}
h2 {font-size: 2rem; text-transform: uppercase; letter-spacing: .4rem; /*padding-bottom: 2rem;*/}
h3 {font-size: 1.8rem; font-weight: 600;}
ul {list-style: square; padding-left: 4rem;}
footer {font-size: 1.2rem; text-align: center; opacity: .8; padding: 3rem 0;}