/*! HTML5 Boilerplate v5.3.0 | MIT License | https://html5boilerplate.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

span.lorem { display:none; text-decoration:line-through; color:#f00; }

/* page */
html, body { height:100%; }
body { background-color:#fff; }
a { color:#220000; text-decoration:none; }
a:hover { text-decoration:underline; }
p { line-height:200%; }
h1 {}
h2 { font-size:18px; font-weight:normal; font-style:italic; opacity:0.8; }

/* wrap: horizontal margins */
.wrap { max-width:960px; margin:0 auto; }
@media only screen and (max-width:960px) { .wrap { max-width:768px; } }
@media only screen and (max-width:768px) { .wrap { max-width:700px; } }
.wrap:after { clear:both; content:" "; display:table; }

/* nav */
nav { text-align:center; }
nav:after { clear:both; content:" "; display:table; }
nav .case { padding:20px 0; }
nav .case:after { clear:both; content:" "; display:table; }
nav .logo { float:left; }
nav .title { display:none; }
@media only screen and (max-width:960px) { nav .logo { float:none; } }
nav .logo img { max-width:300px; height:auto; }
nav .logo a { }
nav .menu { float:right; }
@media only screen and (max-width:960px) { nav .menu { float:none; } }
nav .contact { text-align:right; }
@media only screen and (max-width:960px) { nav .contact { text-align:center; padding:20px 0; } }
nav .contact a { display:inline-block; padding:5px 20px; }
nav .contact a:hover { background-color:#220000; color:#fff;}
nav ul { list-style:none; margin:30px 0 0; padding:0; }
@media only screen and (max-width:960px) { nav ul { margin:0; } }
nav li { display:inline-block; margin:0; padding:0; background-color:#fafafa; border:5px solid transparent; }
nav li.active { border:5px solid #ddd; }
nav li a { display:block; padding:10px 20px; }
nav li a:hover { background-color:#220000; color:#fff; }
nav a.quote { background-color:#660000; color:#fff; }
nav a.reviews { }
nav a.reviews img { vertical-align:-5px; }

/* main wraps */
/*
<section class="full || fifty && fiftyleft | fiftyleft">
	<div class="photo" style="background-image:url('/img/background.jpg');"></div>
	<div class="wrap">
		<div class="case">
			<article>
				<h1>
				<p>
*/
section { position:relative; min-height:400px; }
section.full { min-height:500px; }
section.fifty {}
section.no-minimum { min-height:0; }
@media only screen and (max-width:767px) { section.full { min-height:0; } }

/* photo */
.photo { position:absolute; top:0; right:0; bottom:0; left:0; background-size:cover; background-repeat:no-repeat; background-position:center center; }
.photo > img { display:none; }
.fiftyleft .photo { right:0; left:50%; } /* content on left, photo on right */
.fiftyright .photo { right:50%; left:0; } /* content on right, photo on left */
@media only screen and (max-width:767px) {
	.photo { position:relative; top:auto; right:auto; bottom:auto; left:auto; }
	.fiftyleft .photo { right:auto; left:auto; }
	.fiftyright .photo { right:auto; left:auto; }
	.photo > img { display:inline-block; width:100%; height:auto; }
}

/* case: padding within margins */
.fiftyleft .case { width:50%; }
.fiftyright .case { width:50%; float:right; }
@media only screen and (max-width:767px) {
	.fiftyleft .case { width:100%; }
	.fiftyright .case { width:100%; float:none; }
}

/* article */
article { position:relative; padding:40px 0; }
.fiftyleft article { padding-right:40px; } /* content on left, photo on right */
.fiftyright article { padding-left:40px; } /* content on right, photo on left */
article.autoscroll { overflow-x:scroll; }
@media only screen and (max-width:767px) {
	article,
	.fiftyleft article,
	.fiftyright article { padding:20px; }
}

/* full coloring */
section.full { background-color:#220000; color:#fff; }
section.full a { color:#eee; }
section.full a:hover { color:#fff; }
section.full.white { background-color:#ddd; color:#220000; }
section.full.white a { color:#330000; }

/* coloring */
section.fiftyright { background-color:#220000; color:#fff; }
section.fiftyright a { color:#220000; }
section.fiftyleft { background-color:#ddd; color:#222; }

/* full insets: section > div.wrap > article.inset */
article.inset { position:absolute; bottom:0; left:0; right:0; padding:20px 0 30px; text-align:center; background-color:rgba(0, 0, 0, 0.5); background-image:linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); }
article.inset h1,
article.inset p { text-shadow:0px 0px 15px #000; }
article.inset.success { background-image:linear-gradient(rgba(0,150,0,0) 0%, rgba(0,150,0,1) 100%); }
article.inset.failure { background-image:linear-gradient(rgba(150,0,0,0) 0%, rgba(150,0,0,1) 100%); }
section.no-minimum article.inset { position:relative; bottom:auto; left:auto; right:auto; padding:20px; }
@media only screen and (max-width:767px) {
	article.inset { position:relative; bottom:auto; left:auto; right:auto; padding:20px; background-color:#220000; background-image:none; }
	article.inset h1,
	article.inset p { text-shadow:none; }
	article.inset.success { background-color:green; background-image:none; }
	article.inset.failure { background-color:red; background-image:none; }
}

/* more */
a.more { display:inline-block; padding:10px 20px; color:#220000; background-color:#fff; text-decoration:none; border:5px solid transparent; transition:0.3s ease-in-out; }
a.more:hover { padding:10px 30px; color:#fff; background-color:#220000; border:5px solid #fff; }

/* left / right */
article .left { float:left; width:50%; }
article .left p { padding:0 20px 0 0; }
article .right { float:right; width:50%; }
article .right p { padding:0 0 0 20px; }
article .left .case { padding:0 40px 0 0; }
article .right .case { padding:0 0 0 40px; }
article .left img,
article .right img { max-width:100%; height:auto; }
@media only screen and (max-width:767px) {
	article .left { float:none; width:100%; }
	article .right { float:none; width:100%; }
	article .left .case,
	article .right .case { padding:0; }
}

/* comparisons */
article.comparison { padding-bottom:0; }
ul.comparison { list-style:none; margin:0; padding:40px; clear:both; }
ul.comparison li { display:inline-block; margin:0; padding:0; width:50%; }
ul.comparison li img { width:100%; height:auto; margin:0; padding:0; }
@media only screen and (max-width:767px) {
	ul.comparison li { display:block; width:100%; }
}

/* process */
div.process { padding:40px; }
div.process img { width:100%; height:auto; }

/* text list */
ul.textlist { list-style:none; padding:0 0 10px 20px; margin:0 0 0 20px; }
ul.textlist li { position:relative; padding:5px 0 30px 0; margin:0; }
ul.textlist li:before { position:absolute; top:3px; left:-35px; width:20px; height:20px; background-color:#200; border:2px solid #fff; border-radius:100px; content:" "; }

/* ordered list */
ol { list-style:none; padding:0 0 0 60px; }
ol li { position:relative; padding:5px 0 30px 0; margin:0; }
/* custom numbering: https://css-tricks.com/numbering-in-style/ */
ol { counter-reset:sheffield-counter; }
ol li:before { position:absolute; top:-7px; left:-60px; text-align:center; width:40px; height:30px; padding:10px 0 0 0; content:counter(sheffield-counter); counter-increment:sheffield-counter; border:2px solid #fff; border-radius:100px; }

/* packages */
table.packages { border-collapse:collapse; cursor:default; }
table.packages tr:nth-child(1) { background-color:rgba(0, 0, 0, 0.1); }
table.packages tr:hover { background-color:rgba(0, 0, 0, 0.1); }
table.packages th,
table.packages td { padding:10px; text-align:center; border-bottom:1px solid #eee; vertical-align:top; }
table.packages th { font-weight:bold; }
table.packages th:nth-child(1) { text-align:left; }
table.packages td:nth-child(2) { background-color:#bebebe; }
table.packages td:nth-child(3) { background-color:#ffb700; }
table.packages td:nth-child(4) { background-color:#84a2a9; }
table.packages tr.transparent { background-color:transparent; }
table.packages tr.transparent td { background-color:transparent; border-bottom:0; }
a.reference { color:#888; font-size:50%; vertical-align:top; }
ul.reference { list-style:none; padding:0; margin:0; }
ul.reference li { padding:0; margin:0; font-size:50%; color:#888; text-align:left; }

/* package sections */
section.silver { background-image:url('/img/sheffield-package-silver-bg.jpg'); background-repeat:no-repeat; background-position:center center; background-size:cover; }
section.silver { color:#333; background-color:#858585; }
section.gold { background-image:url('/img/sheffield-package-gold-bg.jpg'); background-repeat:no-repeat; background-position:center center; background-size:cover; }
section.gold { color:#333; background-color:#ffb700; }
section.platinum { background-image:url('/img/sheffield-package-platinum-bg.jpg'); background-repeat:no-repeat; background-position:center center; background-size:cover; }
section.platinum { color:#ccc; background-color:#95a2a5; }

/* call to action */
form { padding:30px 0 50px; }
form label { display:block; padding:10px 0; }
form label > div { font-weight:bold; color:#ccc; }
form input,
form textarea { border:0; padding:10px 20px; font-size:24px; background-color:#eee; color:#222; transition:border-radius 0.5s ease-in-out; }
form input:focus,
form textarea:focus { border-radius:25px; outline:none; }
form input.input-name { width:75%; }
form input.input-email { width:100%; }
form input.input-phone { width:50%; }
form textarea.input-message { width:99%; height:100px; font-size:18px; }
form input[type=submit] { margin:10px 0 0 0; font-size:100%; padding:10px 20px; border:5px solid #fff; background-color:#fff; color:#200; transition:0.3s ease-in-out; }
form input[type=submit]:hover { padding:10px 30px; background-color:#200; color:#fff; }
/* honeypot */
form label.location,
form label.location * { display:none; padding:0; margin:0; max-height:0; overflow:hidden; }
@media only screen and (max-width:767px) {
	form input.input-name,
	form input.input-email,
	form input.input-phone,
	form textarea.input-message { width:80%; }
}


section.white form label > div { color:#200; }
/* div.big { text-align:center; } */
div.big a { font-size:48px; }
@media only screen and (max-width:767px) {
	div.big a { font-size:36px; }
}


/* footer */
section.footer { background-color:#222; color:#ddd; min-height:0; text-align:center; }
div.slogan { font-size:30px; font-weight:bold; }
div.areas { font-size:80%; opacity:0.65; padding-bottom:15px; }
div.areas div.cities { }
ul.sitemap { list-style:none; margin:0; padding:20px 0;}
ul.sitemap li { display:inline-block; margin:0; padding:5px 20px; }
div.lastline { display:inline-block; font-size:80%; border-top:1px solid #666; }
div.lastline > div { display:inline-block; padding:10px 20px 0; }
div.copyright { opacity:0.5; }
div.credits { opacity:0.5; transition:0.2s ease-in-out; }
div.credits:hover { opacity:1; }
div.credits a { display:block; }
div.credits img { vertical-align:-8px; }



/* ----- patch 2018 03 23 ----- */

/* content layout via blocks */
.block { position:relative; display:block; text-align:center; }
.block h1 { font-size:200%; margin:10px; }
.block h2 { font-size:150%; margin:10px; }
.block p { padding:30px; font-size:110%; font-weight:600; line-height:1.5; }

.headerblock { margin: 30px auto; }

.leftblock,
.rightblock { display:inline-block; width:49.75%; height:500px; vertical-align:middle; text-align:center; background-size:cover; background-position:center center; }
.leftblock { margin-right:0.25%; }
.rightblock { margin-left:0.25%; }
.leftblock h2,
.rightblock h2{ background-color: rgba(0,0,0,0.9); color: white; font-size: 180%; font-weight: 600; padding: 8px; margin: 0 auto; }
.dividerblock { display:inline-block; width:0px; vertical-align:middle; }
.blockcaption { position:absolute; left:0; right:0; bottom:0; padding:20px; background-color:rgba(0,0,0,0.6); color:#fff; }
.arrow{ background-image: url('/img/201805-landing/arrow.png'); width: 174px; height: 158px; position: relative; left: -120px; }
@media only screen and (max-width: 768px)
{
	.leftblock,
	.rightblock { width: 100%; }
	.arrow{ transform: rotate(90deg); left: -85px; top: -146px; z-index: 1; }
	.dividerblock{ height: 0; }
}
/* block customizations */
.smallblock div{ height: auto; }
.ctabar{ background-color: #660000; padding: 80px; color: white; }
.contactbtn{ border-radius: 6px; background-color: white; text-indent:0; border:1px solid #dcdcdc; display:inline-block; color: black;  font-size:15px; font-weight:bold; font-style:normal; height:50px; line-height:50px; width:100px; text-decoration:none; text-align:center; }
.contactbtn:hover { background-color: black; text-decoration: none; color: white; }

/* 4 column card display */
/*
.quadblock { padding:30px 0; }
.quadblock p { line-height:1.5; font-size:120%; font-weight:600; }
.quadblock .fa { font-size:75px; color:#999; }
.quaddivider { display:inline-block; width:0.25%; height:220px; margin-top:20px; background-color:rgba(0,0,0,0.1); }
.quad1,
.quad2,
.quad3,
.quad4 { display:inline-block; box-sizing:border-box; width:24.75%; margin:30px auto; padding:0 30px; vertical-align:top; text-align:center; }
@media only screen and (max-width: 768px)
{
	.quad1,
	.quad2,
	.quad3,
	.quad4 { width: 100%; margin: 0px auto; }
	.quaddivider{ height:0; }
}
*/

/* flex list (replacement for quadblock) */
/* h2 */.section-title { text-align:center; font-size:150%; color:#999; padding:30px 0; }
/* div */.flex-list { display:flex; flex-wrap:wrap; justify-content:center; text-align:center; padding-bottom:30px; }
/* div */.flex-list > div { flex:1; padding:20px; border-left:1px solid #eee; border-right:1px solid #eee; }
/* div */.flex-list > div:first-child { border-left:2px solid #eee; }
/* div */.flex-list > div:last-child {  border-right:2px solid #eee; }
/* div */.flex-list /* i */.fa { font-size:75px; color:#999; }
/* div */.flex-list /* div */.quote-avatar { max-width:100px; max-height:100px; margin:0 auto 20px; }
/* div */.flex-list /* div */.quote-avatar img { max-width:100%; height:auto; border-radius:50%; border:3px solid #660000; box-shadow:0px 0px 10px rgba(0, 0, 0, 0.5); }
/* div */.flex-list p { line-height:1.5; font-size:120%; font-weight:600; }
/* div */.flex-list /* div */.quote-author { color:#999; }
/* div */.flex-list /* div */.quote-author:before { content:"~ "; }
/* div */.flex-long > div { flex:none; flex-basis:30%; }
@media only screen and (max-width: 768px)
{
/* div */.flex-list { flex-direction:column; }
/* div */.flex-list > div { padding:20px 40px; }
}

/* social proof */
/*
.socialproof { margin:30px 0; }
.socialproof p { font-style:italic; }
.socialproof .leftblock,
.socialproof .rightblock { height:auto; vertical-align:top; }
.socialproof .leftblock p,
.socialproof .rightblock p { margin:0; }
.socialproof img { border-radius:50%; width:auto; height:280px; border:3px solid #660000; box-shadow:0px 0px 10px rgba(0, 0, 0, 0.5); }
.socialproof blockquote { font-style:italic; }
*/





/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden {
    display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 1.25dppx),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   http://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after,
    *:first-letter,
    *:first-line {
        background: transparent !important;
        color: #000 !important; /* Black prints faster:
                                   http://www.sanbeiji.com/archives/953 */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}


.update { border-left:5px solid red; padding-left:20px; }