/*
 * 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: #fff;
}

body {
	color: #fff;
	font-family: 'Dosis', sans-serif;
	font-size:16px;
	font-weight:500;
    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
   ========================================================================== */

/*
 * Header
 */
header#top-bar { background-color:#0d0d0d; padding-bottom:1.875em; padding-top:1.875em; }
header#top-bar h1 { float:left; height:46px; margin:0; width:160px; }
header#top-bar h1 a { background:url(../img/lifeline-logo-white.svg) no-repeat 0 0; display:block; height:100%; width:100%; }
header#top-bar a.btn { float:right; padding:1em; }

/*
 * Featured Area
 */
section#featured-area { background:#959595 url(../img/featured-background.png) no-repeat center; background-size:cover; }
section#featured-area,
section#featured-area > .row { position:relative; }
section#featured-area .column { position:relative; z-index:10; }
section#featured-area .chart-container { padding-bottom:3%; bottom:0; }
section#featured-area .chart-container .step { border-bottom-color:#0d0d0d; }
/*section#featured-area .chart-container .step:first-child { display:none; }*/
section#featured-area .chart-container .step.title-container .step-title { color:#0d0d0d; }

/*
 * Content Area
 */
section#content-area { background-color:#0d0d0d; }
section#content-area,
section#content-area > .row { position:relative; }
section#content-area .column { position:relative; z-index:10; }
section#content-area .chart-container { padding-top:4.95%; top:0; }
section#content-area .chart-container .step { border-bottom-color:#fff; }
section#content-area .chart-container .step.dark { border-bottom-color:#0d0d0d; }
section#content-area .chart-container .step.title-container .step-title { color:#fff; }

section#content-area header { padding-bottom:1.875em; padding-top:12.5%; }
section#content-area header h1 { font-size:2.500em; font-weight:500; line-height:1; margin:0 0 0 -0.35em; padding-left:0.35em; text-transform:uppercase; }
section#content-area header h1 span.black-background { background-color:#0d0d0d; display:inline-block; padding-left:0.35em; padding-right:0.35em; margin-left:-0.35em; }
section#content-area header h1 span.blue-text { color:#45b8dd; }

section#content-area .text-box { background-color:#0d0d0d; padding:0.9375em 0; }

/** Sponsors **/
.sponsors { border-top:4px solid #fff; padding-bottom:40px; padding-top:40px; }
.sponsors h2,
.sponsors .sponsor-logos,
.sponsors .sponsor-logos a { display:block; vertical-align:middle; }

.sponsors h2 { text-align:center; }
.sponsors .sponsor-logos { text-align:center;}
.sponsors .sponsor-logos a { display:block; margin:0.9375em auto; }

.sponsors .sponsor-logos a.service-one { background:url(../img/service-one-logo.svg) no-repeat 0 0; height:79px; width:273px; }
.sponsors .sponsor-logos a.coordinate { background:url(../img/coordinate-logo.svg) no-repeat 0 0; height:28px; width:167px; }
.sponsors .sponsor-logos a.mix-106 { background:url(../img/mix-106-logo.svg) no-repeat 0 0; height:78px; width:205px; }
.sponsors .sponsor-logos a.hit-104 { background:url(../img/hit-104-logo.svg) no-repeat 0 0; height:80px; width:86px; }

/*
 * Footer
 */
#bottom-bar { background-color:#0d0d0d; }

#bottom-bar .social-links a { display:inline-block; vertical-align:middle; }
#bottom-bar .social-links h3 { font-size:1.313em; text-transform:uppercase; }
#bottom-bar .social-links a { border:2px solid #fff; border-radius:50%; color:#fff; font-size:1.125em; height:38px; line-height:32px; margin-right:0.5em; text-align:center; width:38px; }
#bottom-bar .social-links a:hover { background-color:#fff; color:#000; }

#bottom-bar .legality { color:#e8ebef; padding-bottom:1.875em; padding-top:1.875em; }
#bottom-bar .legality a.author-link { color:#e8ebef; font-weight:500; letter-spacing:0.05em; text-transform:uppercase; }
#bottom-bar .legality a.author-link:hover { color:#fff; }
#bottom-bar .legality .columns:last-child { margin-top:0.5em; }

/*
 * Global Styles
 */

.break_white { border-bottom:4px solid #fff; clear:both; height:4px; margin:0 62px; }

/** Chart **/
.chart-container { position:absolute; bottom:0; left:62px; right:62px; z-index:5; }
.chart-container .step { border-bottom:2px solid; height:2px; margin-top:8.75%; position:relative; }
.chart-container .step:first-child { margin-top:0; }
.chart-container .step.title-container { border-bottom-width:4px; height:4px; }
.chart-container .step.title-container .step-title { font-size:1.5em; font-weight:700; height:32px; line-height:32px; margin-top:-16px; position:absolute; width:47px; }
.chart-container .step.title-container .step-title.left { left:-47px; text-align:left; }
.chart-container .step.title-container .step-title.right { right:-47px; text-align:right; }

/** Dividers **/
.divider_top_sm,
.divider_top { margin-top:1.875em; }

.push_down { padding-bottom:25px; }

/* ==========================================================================
   Typography
   ========================================================================== */

h2 { color:#45b8dd; font-size:1.625em; font-weight:700; line-height:1; text-transform:uppercase; }
p { margin:0.5em 0; }

h1:first-child, h2:first-child, h3:first-child, h4:first-child, p:first-child, .btn:first-child { margin-top:0; }
h1:last-child, h2:last-child, h3:last-child, h4:last-child, p:last-child, .btn:last-child { margin-bottom:0; }   

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

a.btn { background-color:transparent; border:2px solid #45b8dd; border-radius:30px; color:#45b8dd; display:inline-block; font-size:0.813em; font-weight:600; letter-spacing:0.05em; line-height:1; padding:1.385em 2.308em; text-align:center; text-transform:uppercase; }
a.btn:hover { background-color:#45b8dd; color:#000; }

p + a.btn { margin-top:0.75em; }

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

@media only screen and (max-width: 40em) {
	
} /* max-width 640px, mobile-only styles, use when QAing mobile issues */

/* Medium screens - min-width 640px */
@media only screen and (min-width: 40em) {
	
	header#top-bar { background-color:transparent; padding-top:1.875em; position:absolute; top:0; left:0; right:0; z-index:15; }
	header#top-bar h1 { height:60px; width:211px; }
	header#top-bar h1 a { background-image:url(../img/lifeline-logo.svg); }
	header#top-bar a.btn { color:#000; padding:1.385em 2.308em; }
	
	section#content-area header h1 { font-size:4.500em; }
	
	section#content-area .text-box { margin-left:-1.875em; margin-right:-1.875em; padding:1.875em; }
	
	.sponsors { padding-bottom:60px; padding-top:60px; }
	.sponsors .sponsor-logos a { display:inline-block; margin:0.9375em 1.875em; }
	
	.divider_top_sm { margin-top:0; }
	.push_down { padding-bottom:45px; }
	
	p { font-size:1.125em; }

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

/* Large screens - min-width 1024px */
@media only screen and (min-width: 64em) {
	
	header#top-bar h1 { height:76px; width:266px; }
	header#top-bar a.btn { font-size:0.938em; }
	
	section#content-area header h1 { font-size:5.500em; }
	
	.sponsors { padding-bottom:80px; padding-top:80px; }
	.sponsors .sponsor-logos a { margin:0 0.875em; }
	.sponsors .sponsor-logos a:first-child { margin-left:0; }
	.sponsors .sponsor-logos a:last-child { margin-right:0; }
	
	.sponsors .sponsor-logos a.service-one { background:url(../img/service-one-logo.svg) no-repeat 0 0; height:79px; margin-top:-30px; width:273px; }
	.sponsors .sponsor-logos a.coordinate { background:url(../img/coordinate-logo.svg) no-repeat 0 0; height:28px; width:167px; }
	.sponsors .sponsor-logos a.mix-106 { background:url(../img/mix-106-logo.svg) no-repeat 0 0; height:78px; width:205px; }
	.sponsors .sponsor-logos a.hit-104 { background:url(../img/hit-104-logo.svg) no-repeat 0 0; height:80px; width:86px; }
	
	#bottom-bar .social-links h3 { display:inline-block; margin:0 0.5em 0 0; vertical-align:middle; }
	bottom-bar .social-links a { margin-left:0.5em; margin-right:0; }
	#bottom-bar .legality .columns:last-child { margin-top:0; }
	
	/*section#featured-area .chart-container .step:first-child { display:block; }*/
	
	.break_white { margin:0 100px; }
	
	.chart-container { left:100px; right:100px; }
	.chart-container .step { margin-top:9.1%; }
	.chart-container .step.title-container .step-title { font-size:2.375em; width:85px; }
	.chart-container .step.title-container .step-title.left { left:-85px; }
	.chart-container .step.title-container .step-title.right { right:-85px; }
	
	.divider_top_lg { margin-top:1.875em; }
	.push_down { padding-bottom:50px; }

} @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) {
	
	section#content-area header { padding-bottom:0; }
	
	.sponsors h2,
	.sponsors .sponsor-logos,
	.sponsors .sponsor-logos a { display:inline-block; vertical-align:middle; }
	.sponsors h2 { line-height:80px; margin:0; }
	.sponsors .sponsor-logos { float:right; }
	
	.sponsors { border-top:none; }
	
	.divider_top_lg { margin-top:0; }
	
} @media only screen and (min-width: 90em) and (max-width: 120em) { } /* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */

/* XXLarge screens - min-width 1920px */
@media screen and (min-width: 120em) {
	
	.break_white { margin:0; }
	
	/** Chart **/
	.chart-container { left:0; right:0; }
	.chart-container .step { margin-top:8%; }
}


/* ==========================================================================
   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;
}