/*
 * HTML5 Boilerplate
 *
 * 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,
button,
input,
select,
textarea {
    color: #081749;
}

body {
	color: #081749;
	font-family: "canada-type-gibson",sans-serif;
	font-size:16px;
	font-weight:400;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations 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 images and the bottom of their containers: h5bp.com/i/440
 */

img {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

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

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

textarea {
    resize: vertical;
}

/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */

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

/* ==========================================================================
   Coordinate Styles
   ========================================================================== */

body { background-color:#0b15e4; color:#fff; min-height:100vh;
	background: linear-gradient(to bottom right, #0b15e4, #05e1cd);
}
article { overflow:hidden; }
article h1 {  height:58px; margin:0; width:235px; }
article h1 a { background:url(../img/svg/arh-logo-white.svg) no-repeat center; background-size:contain; display:block; height:100%; width:100%; }
article h3 { font-size:1.25em; font-weight:300; }
article p { font-size:1.125em; font-weight:300; }

article.home .right-column { position:relative; z-index:5; }
article.home .right-column::after { background:url(../img/svg/pin.svg) no-repeat center; background-size:contain; content:''; display:block; height:100%; position:absolute; top:50%; left:50%; width:90%; z-index:-1;
	transform: translate(-50%,-50%);
}

ul.locations { list-style:none; margin:0; padding:10px 0 0;
    display: flex;
    flex-flow: row wrap;
}
ul.locations > li { padding-top:2.5rem; }
ul.locations > li:nth-child(1) { padding-top:0; }
ul.locations ul { list-style:none; margin:0; padding:0; }
ul.locations ul li { padding-top:1.25rem; }
ul.locations ul li:first-child { padding-top:0; }
ul.locations ul a.btn { font-size:1em; }
ul.locations ul p { font-size:1em; margin:0; padding:0.9375rem 0.9375rem 0; text-align:center; }
ul.locations ul p a { color:#fff; }

ul.locations > li.full-width { width:100% !important; }
ul.locations > li.full-width ul {
    display: flex;
    flex-flow: row wrap;
}
ul.locations > li.full-width ul li {
    width: 100%;
}

article footer { color:#fff; font-size:0.875em; font-weight:400; }
article footer a { color:#fff; }
article footer a:hover { text-decoration:underline; }

/*
 * Layout/Graphic Styles
 */
.content-area { padding-bottom:1.875rem; padding-top:1.875rem; }
.content-area.x2 { padding-bottom:3.75rem; padding-top:3.75rem; }
.content-area.top-x0 { padding-top:0 !important; }
.content-area.bottom-x0 { padding-bottom:0 !important; }

.divider_top_x2 { padding-top:1.875rem; }
.divider_top_small { padding-top:1.875rem; }
.divider_top_medium { padding-top:1.875rem; }
.divider_top_medium_x2 { padding-top:3.75rem; }

.outer-row { padding-left:0.9375rem; padding-right:0.9375rem; }

.clear { clear:both; }

/* ==========================================================================
   Typography
   ========================================================================== */
h1, h2 { font-weight:400; line-height:1.2; }

h1 { font-size:2.5em; }
h2 { color:#081749; font-size:1.875em; }

h3.small  { color:#00add8; font-size:1em; font-weight:400; letter-spacing:0.125em; margin-bottom:1.875rem; max-width:none; padding-left:40px; position:relative; text-transform:uppercase; }
h3.small::before { background-color:#00add8; content:''; display:block; height:1px; position:absolute; top:10px; left:0; width:30px;}
h3.small.white { color:#fff; }
h3.small.white::before { background-color:#fff; }

h1:first-child, h2:first-child, h3:first-child, p:first-child, ul:first-child, ol:first-child { margin-top:0 !important; }
h1:last-child, h2:last-child, h3:last-child, p:last-child, ul:last-child, ol:last-child { margin-bottom:0 !important; }

.no-wrap { white-space:nowrap; }

/* ==========================================================================
   Links
   ========================================================================== */
a { outline:none !important; text-decoration:none;
	transition: color 0.25s ease-out, background-color 0.25s ease-out, border-color 0.25s ease-out;
}
a:hover { text-decoration:none; }

a.read-more { color:#00add8; display:inline-block; font-weight:400; padding-bottom:0.25em; position:relative; text-decoration:none; }
a.read-more::after { background-color:#00add8; content:''; display:block; height:2px; position:absolute; left:0; bottom:0; width:34px;
	transition:width 0.25s ease-out;
}
a.read-more:hover { color:#00add8; text-decoration:none; }
a.read-more:hover::after { width:100%; }

a.btn { background-color:#00add8; border:none; color:#fff; display:inline-block; font-size:1em; line-height:1; padding:1em 0.625rem; text-align:center; text-decoration:none !important; width:100%; }
a.btn.white { background-color:#fff; color:#00add8; }
a.btn.white.red-text { color:#f60443; }
a.btn.white.dark-blue-text { color:#081749; }

a.btn:hover { background-color:#081749; }
a.btn.white:hover { background-color:#081749; color:#fff; }
a.btn.white.to-light-blue:hover { background-color:#00add8; color:#fff; }
a.btn.to-white:hover { background-color:#fff; color:#00add8; }

a.btn.large { font-size:1.125em; }

/* Small screens */
@media only screen { } /* Define mobile styles */

@media only screen and (max-width: 39.99em) {
	
	article.home .left-column > .row,
	article.home .left-column header { padding-bottom:0 !important; }
	
} /* max-width 640px, mobile-only styles, use when QAing mobile issues */

/* Medium screens - min-width 640px */
@media only screen and (min-width: 40em) {
	
	article.home .left-column { background-color:#fff; color:#081749; }
	
	article h1 {  height:90px; margin:0; width:360px; }
	article h1 a { background-image:url(../img/svg/arh-logo.svg) }
	article h3 { font-size:1.75em; }
	article h3.location { font-size:1.5em; }
	
	ul.locations > li:nth-child(1),
	ul.locations > li:nth-child(2) { padding-top:0; }
	ul.locations > li { /*float:left !important; */ width:50%; }
	/*ul.locations > li:nth-child(odd) { clear:left; }*/
	ul.locations > li.full-width ul {
        display: flex;
        flex-flow: row wrap;
        margin-left:-0.9375rem;
        margin-right:-0.9375rem;
    }
    ul.locations > li.full-width ul li {
        padding-left:0.9375rem;
        padding-right:0.9375rem;
        width: 50%;
    }
    ul.locations > li.full-width ul li:nth-child(1),
	ul.locations > li.full-width ul li:nth-child(2) { padding-top:0; }
	
	/*ul.locations ul li { padding-right:1.875rem; }*/
	ul.locations ul a.btn,
	ul.locations ul p { font-size:1em; }
	
	.content-area { padding-bottom:3em; padding-top:3em; }
	.content-area.x2 { padding-bottom:6em; padding-top:6em; }
	
	.divider_top_small { padding-top:0; }
	
	h1 { font-size:3.125em; }
	h2 { font-size:2.5em; }

} @media only screen and (min-width: 40em) and (max-width: 64em) { } /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */

@media only screen and (max-width: 63.99em) {
	article.home .left-column,
	article.home .right-column { padding-bottom:0 !important; padding-top:0 !important; }
}

/* Large screens - min-width 1024px */
@media only screen and (min-width: 64em) {
	
	article.home { display:flex; min-height:100vh; }
	article.home .left-column,
	article.home .right-column { position:relative; width:50%; }
	article.home .left-column { background:#fff url(../img/background-image.jpg) no-repeat bottom right; background-size:contain; color:#081749; }
	article.home .left-column .row,
	article.home .right-column .row { max-width:48.75rem; width:100%; }
	article.home .left-column .row { float:right; }
	article.home .right-column .row { float:left; }
	
	article.home .left-column footer { position:absolute; bottom:0; right:0; left:0; z-index:5; }
	article.home .left-column footer::after {
		background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0.85));
		content: '';
		display: block;
		height: 200%;
		pointer-events: none;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: -1;
		transition: opacity 0.25s ease-out;
	}
	article footer { color:#081749; }
	article footer a { color:#081749; }
	
	ul.locations ul li { padding-right:0; }
	ul.locations ul a.btn,
	ul.locations ul p { font-size:1.125em; }
	
	.white-box { background-color:rgba(255,255,255,0.8); margin:-1.875rem; padding:1.875rem; }
	
	.content-area { padding-bottom:5em; padding-top:5em; }
	.content-area.x2 { padding-bottom:10em; padding-top:10em; }
	.content-area.top-x0-large { padding-top:0 !important; }
	.content-area.bottom-x0-large { padding-bottom:0 !important; }
	
	.divider_top_x2 { padding-top:3.75rem; }
	.divider_top_medium,
	.divider_top_medium_x2 { padding-top:0; }
	
	.large-float-left { float:left !important; }
	.large-float-right { float:right !important; }
	
	h1 { font-size:3.75em; }
	h2 { font-size:3.125em; }

} @media only screen and (min-width: 64em) and (max-width: 90em) { } /* min-width 1025px and max-width 1440px, use when QAing large screen-only issues */

/* XLarge screens - min-width 1440px */
@media only screen and (min-width: 90em) {
	
	/*ul.locations ul li { padding-right:1.875rem; }*/
	ul.locations > li:nth-child(1),
	ul.locations > li:nth-child(2) { padding-top:0; }
	
} @media only screen and (min-width: 90em) and (max-width: 97.500em) { } /* min-width 1441px and max-width 1560px, use when QAing xlarge screen-only issues */

/* XXLarge screens - min-width 1560px */
@media screen and (min-width: 97.500em) {
	
}


/* ==========================================================================
   Plugin Styles
   ========================================================================== */

/*!--------------------------------------------------------------------
STYLES "Outdated Browser"
Version:    1.1.0 - 2014
author:     Burocratik
website:    http://www.burocratik.com
* @preserve
-----------------------------------------------------------------------*/
#outdated{
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 170px;
    text-align: center; text-transform: uppercase; z-index:1500;
    background-color: #f25648; color: #ffffff;
}
* html #outdated{position: absolute;}
#outdated h6{font-size: 25px; line-height: 25px; margin: 30px 0 10px;}
#outdated p{font-size: 12px; line-height: 12px; margin: 0;}
#outdated #btnUpdateBrowser{
    display: block; position: relative; padding: 10px 20px; margin: 30px auto 0; width: 230px; /*need for IE*/
    color: #ffffff; text-decoration: none; border: 2px solid #ffffff; cursor: pointer;
}
#outdated #btnUpdateBrowser:hover{color: #f25648; background-color:#ffffff;}
#outdated .last{position: absolute; top: 10px; right: 25px; width: 20px; height: 20px;}
#outdated #btnCloseUpdateBrowser{ border-bottom:none;
    display: block; position: relative; width: 100%; height: 100%;
    text-decoration: none; color: #ffffff; font-size: 36px; line-height: 36px;
}

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

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.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: h5bp.com/p
 */

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

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}