@charset "UTF-8";
/* CSS Document */

.reverse {
    color: #ffffff;
}

button, .button {
	border-width: 1px;
	font-family: 'Roboto', sans-serif;
	font-style: normal;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 0.95rem;
	background-color: transparent;
	border-color: #222222;
	color: #222222;
}

button:hover, button:focus, .button:hover, .button:focus {
	background-color: transparent;
	font-family: 'Roboto', sans-serif;
	font-style: normal;
	font-weight: 500;
	color: #222222; 
}

p {
	font-family: 'Merriweather', serif;
	font-style: normal;
	font-weight: 400;
	line-height: 1.7;
}

.serif-italic {
	font-family: 'Merriweather', serif;
	font-style: oblique;
	font-weight: 400;
}


h1 {
	font-family: 'Roboto Condensed', sans-serif;
	font-style: normal;
	font-weight: 400;
	text-transform: uppercase;
	font-size: 1.8rem;
	margin-top: 3rem;
	margin-bottom: 2rem;
}

.underline {
	padding-bottom:  0.6rem;
	border-bottom: 2px solid #ddc0a6;
}

h1.hero-text {
	font-family: 'Merriweather', serif;
	font-style: normal;
	font-weight: 300;
	text-transform: none;
	line-height: 1.7;
	margin-top: 3rem;
	margin-bottom: 2rem;
}

h2 {
	font-family: 'Roboto', sans-serif;
	font-style: normal;
	font-weight: 700;
	font-size: 1.4rem;	
}

h3 {
	font-family: 'Roboto', sans-serif;
	font-style: normal;
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 1.2rem;
	margin-top: 0rem;
	margin-bottom: 0rem;
}

ul,
ol,
dl {
	font-family: 'Merriweather', serif;
	font-style: normal;
	font-weight: 400;
	line-height: 1.7;
}

ul {
	margin-left: 2.3rem; 
}

.utility-text {
	font-family: 'Roboto', sans-serif;
	font-style: normal;
	font-weight: 300;
    font-size: 0.9rem;
	line-height: 1.7;
	color: #ddc0a6;
	margin-bottom: 0;
}

.testimonial-text {
	font-family: 'Merriweather', serif;
	font-style: italic;
	font-weight: 400;
	line-height: 1.7;
    font-size: 1.2rem;
    text-align: left;
    color: #ffffff;
}

.author {
	font-family: 'Merriweather', serif;
	font-style: normal;
	font-weight: 400;
	line-height: 1.7;
    font-size: 0.85rem;
    text-align: right;
	text-transform: uppercase;
    color: #ffffff;
}

.cta-text {
	font-family: 'Merriweather', serif;
	font-style: normal;
	font-weight: 300;
    font-size: 1.4rem;
	line-height: 1.7;
	text-align: center;
	color: #222222;
	margin-bottom: 2rem;
}

.footer-text {
	font-family: 'Roboto', sans-serif;
	font-style: normal;
	font-weight: 300;
    font-size: 1rem;
	line-height: 1.7;
	color: #ddc0a6;
	text-align: center;
}

.copyright-text {
	font-family: 'Roboto', sans-serif;
	font-style: normal;
	font-weight: 300;
    font-size: 0.8rem;
	line-height: 1.7;
	color: #ddc0a6;
	text-align: center;
	letter-spacing: 0.5px;
	margin-top: 2rem;
}

.bold-text {
	font-family: 'Merriweather', serif;
	font-style: normal;
	font-weight: 700;
}

.small-text {
    font-size: 0.8rem;
	font-family: 'Roboto', sans-serif;
	font-style: normal;
	font-weight: 400;
}

blockquote {
	margin: 3rem 10% 3.25rem 4rem;
	padding: 0.4rem 1.25rem 0 1.1875rem;
	border-left: 2px solid #ddc0a6; 
}

blockquote,
blockquote p {
    font-size: 1.3rem;
	line-height: 1.7;
	font-family: 'Roboto Condensed', sans-serif;
	font-style: normal;
	font-weight: 300;
	color: #222222;
}


/* Panels */
#utility {
	background-color: #222222;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

#header {
	margin-bottom: 2rem;
}

.hero {
	height: 400px;
	background-position: 50% 50%;
}

#customer-service {
	padding-top: 3.2rem;
	padding-bottom: 1.6rem;
}

#about {
	background-color: rgba(221,192,166,0.25);
}

#formats-clients {
	padding-bottom: 2.8rem;
}

#testimonial {
	background-color: #ddc0a6;
	padding-top: 3rem;
	padding-bottom: 2.9rem;
}

#feature {
	background-position: 50% 50%; 
	padding-top: 3.5rem; 
	padding-bottom: 2.9rem;
}

#cta {
	padding-top: 3rem;
	padding-bottom: 2rem;
}

#footer {
	background-color: #222222;
	padding-top: 3rem;
	padding-bottom: 3.5rem;
}

#contact {
	padding-bottom: 3.3rem;
}

#shadow-rule {
	margin-top: 1rem;
	padding-bottom: 3.3rem;
	-webkit-box-shadow: 3px 3px 5px 2px rgba(0,0,0,0.3);
	-moz-box-shadow: 3px 3px 5px 2px rgba(0,0,0,0.3);
	box-shadow: 3px 3px 5px 2px rgba(0,0,0,0.3);
}

.background-white {
	background-color: #ffffff;
	padding-bottom: 2.7rem;
}

.background-light {
	background-color: rgba(221,192,166,0.25);
	padding-top: 3.2rem;
	padding-bottom: 4rem;
}

.sans {
	font-family: 'Roboto', sans-serif;
	font-style: normal;
	font-weight: 300;
}

.sans-italic {
	font-family: 'Roboto', sans-serif;
	font-style: oblique;
	font-weight: 300;
}

ul.sans {
	margin-bottom: 0;
}

ul.sans li {
	padding-top: 0.5rem;
}

/* end panels */


/* place flexible image */
.frow {
    height: auto;
    display: flex;
    display: -ms-flex;
    display: -webkit-flex;
    flex-flow: row column;
}

.fcol {
    flex: 1 1 100%;
    -ms-flex: 1 1 100%;
    -webkit-flex: 1 1 100%;
}

.place-image {
    height: 100%;
    background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-position: center;
}
/* end place flexible image */


/* top-bar */

.contain-to-grid {
	width: 100%;
	background: #ffffff;
}

nav.top-bar {
text-align: center;
}

section.top-bar-section {
	display: inline-block;
    background-color: #ffffff;
    background: #ffffff;
}

.top-bar {
	background: #ffffff;
}

.top-bar .button, .top-bar button {
	font-size: 1rem;
}
	
.top-bar .toggle-topbar a {
	color: #222222;
	font-family: 'Roboto', sans-serif;
	font-style: normal;
	font-weight: 700;
	font-size: 0.8125rem;
	text-transform: uppercase; 
}
	  
.top-bar .toggle-topbar.menu-icon a {
	color: #222222;
}

.top-bar .toggle-topbar.menu-icon a span::after {
	box-shadow: 0 0 0 1px #222222, 0 7px 0 1px #222222, 0 14px 0 1px #222222;
}

.top-bar .toggle-topbar.menu-icon a span:hover:after {
	box-shadow: 0 0 0 1px "", 0 7px 0 1px "", 0 14px 0 1px ""; 
}

.top-bar.expanded {
	background: #ffffff;
 }

.top-bar.expanded .title-area {
	background: #ffffff;
}

.top-bar.expanded .toggle-topbar a {
	color: #222222;
}

.top-bar.expanded .toggle-topbar a span::after {
	box-shadow: 0 0 0 1px #222222, 0 7px 0 1px #222222, 0 14px 0 1px #222222; 
}

.top-bar-section ul li {
	background: #ffffff;
}

.top-bar-section ul li > a {
	color: #222222;
	font-family: 'Roboto', sans-serif;
	font-size: 1.1rem;
	font-weight: 500;
	padding-left: 0.9375rem;
	padding: 12px 0 12px 0.9375rem;
	text-transform: uppercase;
}

.top-bar-section ul li:hover:not(.has-form) > a {
	background-color: #ffffff;
	color: #222222;
	background: #ffffff;
}

.top-bar-section ul li.active > a {
	background: #ffffff;
	color: #222222;
}

.top-bar-section ul li.active > a:hover {
	background: #ffffff;
	color: #222222;
}

@media only screen and (min-width: 40.0625em) {
.top-bar {
	background: #ffffff;
}

.top-bar.expanded {
      background: #ffffff;
}

.top-bar-section li.hover > a:not(.button) {
      background-color: #ffffff;
      background: #ffffff;
      color: #222222;
}

.top-bar-section li:not(.has-form) a:not(.button) {
	background: #ffffff;
	padding: 0 2rem; 
}

.top-bar-section li:not(.has-form) a:not(.button):hover {
	background-color: #ffffff;
	background: #ffffff;
	font-family: 'Roboto', sans-serif;
	font-style: normal;
	font-weight: 700;
	border-bottom: 2px solid #ffffff;
}

.top-bar-section li.active:not(.has-form) a:not(.button) {
	background: #ffffff;
	color: #222222;
}

.top-bar-section li.active:not(.has-form) a:not(.button):hover {
	background: #ffffff;
	color: #222222;
}

.no-js .top-bar-section ul li:hover > a {
    background-color: #ffffff;
    background: #ffffff;
    color: #222222; 
}

.no-js .top-bar-section ul li:active > a {
	background: #ffffff;
    color: #222222;
}

ul.right li.current a { 
	border-bottom: 2px solid #ddc0a6;
	cursor: default;
}

}

/* end top-bar */

label {
	font-size: 0.875rem;
	font-family: 'Roboto', sans-serif;
	font-style: normal;
	font-weight: 400;
	line-height: 1.5;
	text-transform: uppercase;
	display: inline;
}

input {
	display: inline;
}

table tr.even, table tr.alt, table tr:nth-of-type(even) {
    background: #ffffff;
}

.required {
	color: #4d4d4d;
	font-size: 0.875rem;
	font-family: 'Roboto', sans-serif;
	font-style: normal;
	font-weight: 400;
	line-height: 1.5;
	text-transform: uppercase;	
	padding-bottom: 0rem;
	margin-bottom: 0.5rem;
}

.cover-thumbnail {
	border: 1px solid #c8c8c8; 
	box-shadow: #c8c8c8 2px 2px 4px; 
	margin-left: 1rem;
}


@media only screen {
	h1.hero-text {
		font-size: 1.25rem;
	}

	.feature-text {
		font-size: 1rem;
		font-family: 'Merriweather', serif;
		font-style: normal;
		font-weight: 300;
	}
}

@media only screen and (min-width: 40.0625em) {
	h1.hero-text {
		font-size: 1.7rem;
	}
	
	.feature-text {
		font-size: 1.3rem;
		font-family: 'Merriweather', serif;
		font-style: normal;
		font-weight: 300;
	}
}