html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, img, ins, kbd, s, samp, small, strike, sub, sup, tt, var, u, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, input, select, textarea { margin: 0; padding: 0; border: 0; font-size: inherit; font: inherit; vertical-align: baseline; list-style: none; box-sizing: border-box; }

table { border-spacing: 0; }

article, aside, figure, footer, header, main, nav, section { display: block; box-sizing: border-box; }

.bg-black { background-color: #231f20 !important; }

.text-black { color: #231f20 !important; }

.bg-blue { background-color: #003e64 !important; }
.bg-blue, .bg-blue a { color: white !important; }

.text-blue { color: #003e64 !important; }

.bg-gray { background-color: #737373 !important; }

.text-gray { color: #737373 !important; }

.bg-white { background-color: white !important; }

.text-white { color: white !important; }

.bg-yellow { background-color: #f8bd44 !important; }

.text-yellow { color: #f8bd44 !important; }

body, html { background-color: white; font-size: 18px; }

body, input, select, textarea { font: 300 1rem/2 Montserrat, Verdana, Geneva, sans-serif; color: black; }

a { text-decoration: none; color: black; padding-bottom: .06rem; border-bottom: 1px solid black; transition: all .3s; }
a:hover { color: white; border-color: white; }
a:active { background-color: transparent; }

big, .big { font-size: 1.25rem; }

button, .button, .checkout-button, input[type=button], input[type=submit], input[type=reset] { cursor: pointer; display: inline-block; background: transparent; border: none; color: black; font-weight: bold; text-transform: uppercase; font-size: 1rem; padding: .5rem 0; -webkit-appearance: none; transition: all .3s; }
button:hover, button:active, button:focus, .button:hover, .button:active, .button:focus, .checkout-button:hover, .checkout-button:active, .checkout-button:focus, input[type=button]:hover, input[type=button]:active, input[type=button]:focus, input[type=submit]:hover, input[type=submit]:active, input[type=submit]:focus, input[type=reset]:hover, input[type=reset]:active, input[type=reset]:focus { transform: scale(1.1, 1.1); color: #003e64; outline: none; }

input[type=radio], input[type=checkbox] { cursor: pointer; }

footer, header, main section { padding: 2rem 25px; border-bottom: 5px solid white; overflow: hidden; }

footer, header { text-align: center; }

footer { background: white; }
footer .boilerplate { margin-top: 3rem; }
footer .logo { width: 194px; height: 74px; margin: 3rem auto 1rem; }
footer p span { display: block; }
footer .small { font-size: .65em; line-height: 1.5; }

h1, h2, h3, h4, h5, h6 { margin-bottom: 1rem; }

h1 { font-size: 1.15rem; font-weight: 300; }

h2 { font-size: 1.5rem; font-weight: 600; }

header { position: relative; background: url(../images/Hero-BG.jpg) no-repeat left top; background-size: cover; }
header, header a { color: #003e64; }
header a { border-bottom-color: #003e64; }
header h1 { line-height: 1.6; }
header h1 span { white-space: nowrap; display: block; }
header .logo { margin: 5rem auto 2rem; }
header nav > ul > li { display: inline-block; margin: 0 .5rem; }

.hidden { display: none; }

img { max-width: 100%; height: auto; display: block; }

.inline { display: inline !important; }

input[type=date], input[type=datetime], input[type=datetime-local], input[type=email], input[type=month], input[type=number], input[type=password], input[type=tel], input[type=text], input[type=time], input[type=url], input[type=week], select, .select-box, textarea { color: black; -webkit-appearance: none; background: rgba(255, 255, 255, 0); transition: background-color .3s; border: 1px solid black; display: block; width: 100%; margin-bottom: 1rem; padding: .25rem; border-radius: 0; }
input[type=date]:active, input[type=date]:focus, input[type=date].valid, input[type=datetime]:active, input[type=datetime]:focus, input[type=datetime].valid, input[type=datetime-local]:active, input[type=datetime-local]:focus, input[type=datetime-local].valid, input[type=email]:active, input[type=email]:focus, input[type=email].valid, input[type=month]:active, input[type=month]:focus, input[type=month].valid, input[type=number]:active, input[type=number]:focus, input[type=number].valid, input[type=password]:active, input[type=password]:focus, input[type=password].valid, input[type=tel]:active, input[type=tel]:focus, input[type=tel].valid, input[type=text]:active, input[type=text]:focus, input[type=text].valid, input[type=time]:active, input[type=time]:focus, input[type=time].valid, input[type=url]:active, input[type=url]:focus, input[type=url].valid, input[type=week]:active, input[type=week]:focus, input[type=week].valid, select:active, select:focus, select.valid, .select-box:active, .select-box:focus, .select-box.valid, textarea:active, textarea:focus, textarea.valid { outline: none; background-color: rgba(255, 255, 255, 0.3); }
input[type=date].error, input[type=datetime].error, input[type=datetime-local].error, input[type=email].error, input[type=month].error, input[type=number].error, input[type=password].error, input[type=tel].error, input[type=text].error, input[type=time].error, input[type=url].error, input[type=week].error, select.error, .select-box.error, textarea.error { background-color: #FFEFEA; border-color: #FF9184; }

label { display: block; }

select { -webkit-appearance: menulist; }

.logo { display: block; overflow: hidden; text-indent: 150%; white-space: nowrap; width: 60vw; height: 23vw; background: url(../images/Cutler-Contracting-Logo.svg) no-repeat; background-size: contain; }

main section { display: flex; flex-wrap: wrap; }
main section > * { flex-basis: 100%; }
main #contact { padding-bottom: 3rem; }
main #contact form { margin-top: 1rem; }
main #contact form .messages { margin-left: 1rem; opacity: 0; transition: opacity .5s; width: calc( 100% - 5rem ); display: inline-block; vertical-align: middle; line-height: 1.3; }
main #contact form .messages img { display: inline; vertical-align: middle; }
main #services { flex-direction: column-reverse; padding-bottom: 0; border-bottom: 0; }
main #services figure { margin: 3rem -30px 0; border-top: 5px solid white; }
main #services ul { font-size: 1.1rem; border-top: 1px solid #4680a3; }
main #services ul li { padding: .35rem 0; border-bottom: 1px solid #4680a3; }

p { margin: 0 0 1rem; }

small, .small { font-size: .875em; }

.social { padding: 0; }
.social a { border: none; display: inline-block; margin-left: .1rem; margin-right: .1rem; opacity: 1; position: relative; width: 64px; height: 64px; overflow: hidden; text-indent: 150%; white-space: nowrap; background: #737373; transition: background-color .3s; }
.social a:after { content: ""; display: block; position: absolute; left: 16px; top: 16px; width: 32px; height: 32px; background: url(../images/Social-Icons.svg) no-repeat left bottom; background-size: 320px 96px; }
.social a[href*="facebook.com"]:hover { background-color: #0d5289; }
.social a[href*="instagram.com"]:after { background-position: 17% bottom; }
.social a[href*="instagram.com"]:hover { background-color: #d02f83; }
.social a[href*="linkedin.com"]:after { background-position: 33.3333% bottom; }
.social a[href*="linkedin.com"]:hover { background-color: #0673af; }
.social a[href*="pinterest.com"]:after { background-position: 50% bottom; }
.social a[href*="pinterest.com"]:hover { background-color: #d40b19; }
.social a[href*="twitter.com"]:after { background-position: 66.6666% bottom; }
.social a[href*="twitter.com"]:hover { background-color: #5bd8f3; }
.social a[href*="youtube.com"]:after { background-position: 83.3333% bottom; }
.social a[href*="youtube.com"]:hover { background-color: #df2c26; }
.social a[href*="mailto:"]:after, .social a[href*="/contact-us/"]:after { background-position: right bottom; }
.social a[href*="mailto:"]:hover, .social a[href*="/contact-us/"]:hover { background-color: #55a51c; }
.social li { list-style: none; display: inline; }

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

.text-left { text-align: left; }

.text-right { text-align: right; }

.text-weight-300 { font-weight: 300; }

.text-weight-400 { font-weight: 400; }

.text-weight-700 { font-weight: 700; }

@media (min-width: 480px) { footer, header, main section { padding-left: 30px; padding-right: 30px; }
  header { background-size: 200%; }
  header h1 span { display: inline; }
  header h1 span:first-child { padding-right: .5rem; border-right: 1px solid #003e64; }
  header h1 span:nth-child(2) { padding: 0 .25rem; }
  header h1 span:last-child { padding-left: .5rem; border-left: 1px solid #003e64; }
  header .logo { width: 290px; height: 110px; } }
@media (min-width: 480px) { footer, header, main section { padding-left: 30px; padding-right: 30px; }
  header h1 span { display: inline; }
  header h1 span:first-child { padding-right: .5rem; border-right: 1px solid #003e64; }
  header h1 span:nth-child(2) { padding: 0 .25rem; }
  header h1 span:last-child { padding-left: .5rem; border-left: 1px solid #003e64; }
  header .logo { width: 290px; height: 110px; } }
@media (min-width: 800px) { footer, header { text-align: left; }
  footer, header, main section { padding-left: 40px; padding-right: 40px; }
  footer { display: flex; flex-wrap: wrap; }
  footer .boilerplate { flex-basis: 100%; padding-left: 0; margin-top: 2rem; }
  footer .boilerplate p { margin-bottom: .5rem; }
  footer > div, footer .social { min-width: 50%; }
  footer > div { padding-left: 40px; }
  footer .logo { margin: 0 0 1.5rem; }
  footer p span { display: inline; }
  footer p span:first-child { margin-right: 1rem; }
  header { height: 50.8vw; background-size: 105%; }
  header > div, header nav { position: absolute; }
  header > div { top: 50%; transform: translateY(-50%); }
  header h1 { margin-left: .4em; }
  header .logo { width: 25vw; height: 9.88vw; min-width: 290px; min-height: 110px; max-width: 468px; max-height: 178px; margin: 0rem 0 3rem 0; }
  header nav { top: 1.5rem; }
  main section { padding-top: 3rem; padding-bottom: 3rem; flex-wrap: nowrap; }
  main section > * { flex-basis: 50%; min-width: 50%; }
  main #contact form { margin-top: 0; padding-left: 40px; }
  main #services { flex-direction: row; padding: 0; }
  main #services article { padding: 2.5rem 40px 3.5rem; }
  main #services figure { border: none; margin: 0; background: url(../images/Bulldozer.jpg) no-repeat center; background-size: cover; }
  main #services figure img { display: none; } }
@media (min-width: 1000px) { footer, header, main section { border-bottom-width: .55vw; }
  header { background-size: cover; } }
@media (min-width: 1200px) { footer, header, main section { padding-left: 50px; padding-right: 50px; }
  footer > div, main #contact form, main #services article { padding-left: 50px; }
  main #services article { padding-right: 50px; }
  header h1 { font-size: 1.7vw; }
  html.desktop footer .transition, html.desktop header .transition, html.desktop main .transition { transition: all 1s .3s; }
  html.desktop footer .transition.delay, html.desktop header .transition.delay, html.desktop main .transition.delay { transition-delay: .8s; }
  html.desktop footer .transition.delay.more, html.desktop header .transition.delay.more, html.desktop main .transition.delay.more { transition-delay: 1.5s; }
  html.desktop footer .transition.enlarge, html.desktop header .transition.enlarge, html.desktop main .transition.enlarge { transform: scale(0.5, 0.5); }
  html.desktop footer .transition.enlarge.complete, html.desktop header .transition.enlarge.complete, html.desktop main .transition.enlarge.complete { transform: scale(1, 1); }
  html.desktop footer .transition.move-left, html.desktop header .transition.move-left, html.desktop main .transition.move-left { transform: translateX(100%); }
  html.desktop footer .transition.move-left.complete, html.desktop header .transition.move-left.complete, html.desktop main .transition.move-left.complete { transform: translateX(0); }
  html.desktop footer .transition.move-right, html.desktop header .transition.move-right, html.desktop main .transition.move-right { transform: translateX(-100%); }
  html.desktop footer .transition.move-right.complete, html.desktop header .transition.move-right.complete, html.desktop main .transition.move-right.complete { transform: translateX(0); }
  html.desktop footer .transition.move-up, html.desktop header .transition.move-up, html.desktop main .transition.move-up { transform: translateY(6rem); }
  html.desktop footer .transition.move-up.complete, html.desktop header .transition.move-up.complete, html.desktop main .transition.move-up.complete { transform: translateY(0); }
  html.desktop footer .transition.move-down, html.desktop header .transition.move-down, html.desktop main .transition.move-down { transform: translateY(-6rem); }
  html.desktop footer .transition.move-down.complete, html.desktop header .transition.move-down.complete, html.desktop main .transition.move-down.complete { transform: translateY(0); }
  html.desktop footer .transition.opacity, html.desktop header .transition.opacity, html.desktop main .transition.opacity { opacity: 0; }
  html.desktop footer .transition.opacity.complete, html.desktop header .transition.opacity.complete, html.desktop main .transition.opacity.complete { opacity: 1; }
  html.desktop footer .transition.reduce, html.desktop header .transition.reduce, html.desktop main .transition.reduce { transform: scale(1.5, 1.5); }
  html.desktop footer .transition.reduce.complete, html.desktop header .transition.reduce.complete, html.desktop main .transition.reduce.complete { transform: scale(1, 1); } }
@media (min-width: 1350px) { footer, header, main section { padding-left: 7vw; padding-right: 7vw; }
  footer > div, main #contact form, main #services article { padding-left: 7vw; }
  main #services article { padding-right: 7vw; }
  footer, main section { padding-top: 4rem; padding-bottom: 4rem; }
  main #services article { padding-top: 3.5rem; padding-bottom: 4.5rem; } }
@media (min-width: 1500px) { html { font-size: 20px; }
  footer, header, main section { padding-left: 10vw; padding-right: 10vw; }
  footer > div, main #contact form, main #services article { padding-left: 10vw; }
  main #services article { padding-right: 10vw; } }
@media (min-width: 1800px) { header h1 { font-size: 1.6rem; } }

/*# sourceMappingURL=style.css.map */