@import url('https://fonts.googleapis.com/css?family=PT+Serif|Source+Sans+Pro:400,600,700');

/*
font-family: 'PT Serif', serif;
font-family: 'Source Sans Pro', sans-serif;
*/

html {background:#3D5F7D;}

body {font-size:1.125rem;}

section {padding:3rem 0;}

.beige-box, #map .cell:last-of-type {background:#ede8e4;}
#map {padding:0;}

#map .cell:last-of-type {padding:2rem 0;}

header .menu a {font-family:'PT Serif', serif; color:#32537c; letter-spacing:.02em;}
.menu.align-center li {text-align:left;}
.menu.align-center li a {padding:1.25rem 1rem; margin:0;}

.top-bar {flex-direction:column;}
.top-bar-left, .top-bar-right {width:100%; text-align: center;}
.top-bar .menu a {font-size:.98rem; padding:1rem .7rem;}
.top-bar-left img {float:left;}
.top-bar-left a.button {float:right; margin:0; font-size:1.25rem; padding:.75rem 1rem;}

#hero, #internal-hero {background:url('../assets/rockford-cp-hero.jpg') no-repeat center center; background-size:cover;}
#hero h1, #internal-hero h1 {text-shadow: 2px 3px 3px rgba(0,0,0,.75); color:#fff; font-weight:700; text-align:center; padding:2rem 0 4rem 0; font-family:'Source Sans Pro', sans-serif; line-height:1; margin-bottom:0;}
#hero h1 span {display:inline-block;}

#internal-hero {text-align:center;}
#internal-hero h1 {color:#fff; margin:0; padding:3rem; font-weight:700; text-align:center; font-family:'Source Sans Pro', sans-serif; line-height:1;}


.big-link i, .card a {transition:all 0.25s ease; color:#ed7100;}

a.big-link, a.big-link:hover, a.big-link:focus {color:inherit; text-decoration:none; font-weight:700;}
a.big-link:hover .fas, a.big-link:focus .fas {color:#222;}

#map ul.fa-ul li, #map ul.cities li {font-size:1rem; margin:.25rem 0;}
#map ul.fa-ul span {color:#24b401;}
#map ul.cities {list-style:none; columns:2;}
#map p span {display:inline-block;}

#portfolio {font-size:1rem;}
#portfolio .card {margin:1rem 0;}
#portfolio .card p {line-height:1.2;}
#portfolio .card small {line-height:2; display:block; font-size:.85rem; color:#465467;}
#portfolio b {font-weight:600;}
#portfolio a {text-transform:uppercase;}
span.highlight {font-size:.85rem; display:inline-block; padding:0 .5rem; background:#ffee99;}
#portfolio .large-8 p:last-of-type {margin-top:1rem; text-align:center; font-size:.87rem;}
#map img {width:100%; max-width:360px;}

.blue-box, footer {color:#fff; background:#3c5f7f; padding:1rem; border-radius:8px;}
.blue-box h3, .blue-box h4, .blue-box h5, .blue-box small {color:inherit;}
.blue-box p span {display:block;}

.blue-box h4 {font-size:1.45rem;}

#map .blue-box {background:none; padding:3rem 0;}
#contact .blue-box a {color:inherit; font-weight:400; text-decoration:underline;}
#map {background:rgb(70,84,103); background:linear-gradient(0deg,rgba(70,84,103,1) 10%, rgba(60,95,127,1) 80%);}

textarea {padding:.5rem;}

#contact {position:relative;}
#contact a i {transition:all 0.25s ease; color:#3c5f7f; margin:1rem 0; font-size:2rem;}
#contact a:hover i {color:#33516c;}
.back-to-top {position:absolute; bottom:1rem; right:1rem;}

.card a {font-weight:700; text-decoration:none;}
.card a:hover, .card a:focus {color:#c05100;}
.card img {width:100%;}

.accordion .is-active .accordion-title {background:#e4e6e7;}
.accordion-content {text-align:center;}
.accordion-content p {text-align:left;}
.accordion img {max-width:80%; margin-bottom:2rem;}

textarea {resize:none;}

.beige-box div {padding:1.5rem 0;}

footer {padding:1.5rem 0; text-align:center; border-radius:0;}
footer p {margin:0;}

@media print, screen and (min-width: 40em) {
	.blue-box {padding:1.5rem 2.5rem;}
	#map .blue-box {padding:1rem;}
	section#map {background:#ede8e4;}
	#map {padding:1rem 0;}
	.top-bar {padding:1rem 0 0 0;}
	.top-bar-left img {float:none;}
	.menu.align-center li a {padding:1rem .7rem;}
	.menu.align-center li {text-align:center;}
	#map .blue-box {padding:1.5rem; background:rgb(70,84,103); background:linear-gradient(0deg,rgba(70,84,103,1) 10%, rgba(60,95,127,1) 80%);}
	#hero h1 {padding:3rem 0 8rem 0;}
	.blue-box h4 {font-size:1.6rem; line-height:1.25;}
	.blue-box small {margin-top:.6rem;}
	.accordion-content img {display:block; max-width:30%; float:right; margin:0 0 2rem 2rem;}
	.accordion-content {text-align:left;}
}

@media print, screen and (min-width: 64em) {
	#map .blue-box {margin-bottom:0;padding:1.5rem 2.5rem;}
	#contact form {margin-bottom:0;}
	.top-bar {flex-direction:row; padding:.75rem 3rem;}
	.top-bar-left, .top-bar-right {width:auto; text-align:left;}
	.top-bar .menu a {font-size:1.05rem; padding:.7rem 1rem;}
	.beige-box div {padding:3.75rem 1.5rem;}
	#hero h1 {padding:6.5rem 0 12.5rem 0;}
	.extra-padding-right {padding-right:2rem!important;}
}

@media print, screen and (max-width: 40em) {
	#map .blue-box {margin-bottom:0;}
	.menu {margin-top:1rem;}
	.menu a {width:100%; display: block; border-top:1px solid #cacdd0;}
}