/* Homepage styles.

   @file            homepage.en.css
   @author          marionm
   @dependencies    none
   ========================================================================== */

/* ==========================================================================
   setup the environment
   ========================================================================== */

*,
*:after,
*:before {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px; /* set base font size */
    min-height: 100%; /* set viewport height as the minimum page height */
    line-height: 100%; /* scale line height to the base font size */
    min-width: 320px;
    width: 100%; /* set viewport width as the minimum page width */
}

/* ".global body" is needed to override colorbox's body { font-size: 0; } style triggered when the lightbox is open */
body,
.global body {
    -moz-text-size-adjust: 100%; /* preserve font size on orientation change */
    -ms-text-size-adjust: 100%; /* ^ */
    -webkit-text-size-adjust: 100%; /* ^ */
    background: #fff;
    color: #000;
    font-family: Arial, Helvetica, sans-serif;
    font-size: inherit; /* scale text to the base font size */
    font-weight: 400;
    line-height: 125%; /* scale line height to any font size */
    min-height: 100%; /* set viewport height as the minimum page height */
    text-align: left;
    white-space: normal;
    width: 100%; /* set viewport width as the minimum page width */
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.li,
.p,
.span,
.ul,
h1,
h2,
h3,
h4,
h5,
h6,
li,
p,
span,
ul {
    color: inherit; /* enable link style inheritance */
    font-size: 100%; /* scale text to the base font size */
    font-weight: inherit; /* enable link style inheritance */
    line-height: 125%; /* scale line height to any font size */
    margin: 0; /* override normalize, if present */
    padding: 0; /* ^ */
}

.ul,
ul { /*font-size: 0;  remove spacing between list items */ }

.li,
li { /*font-size: 1rem;  scale line height to any font size */ }

.b,
.strong,
b,
strong {
    color: inherit; /* enable link style inheritance */
    font-weight: 600;
}

.em,
.i,
em,
i {
    color: inherit; /* enable link style inheritance */
    font-style: italic;
}

img { border: none; /* remove border from images inside anchor tags in IE */ }

.a,
a {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* remove highlight triggered on tap on some mobile devices */
    -webkit-tap-highlight-color: transparent; /* ^ */
    background: transparent; /* remove gray background from active links in IE 10 */
    cursor: pointer;
    outline: 0;
    text-decoration: none;
}

caption,
col,
colgroup,
table,
tbody,
td,
tfoot,
thead,
tr {
    border-collapse: collapse; /* remove excess spacing around all table-related elements */
    border-spacing: 0; /* ^ */
}

video { -webkit-transform-style: preserve-3d; /* attempt to preserve z-index on videos */ }

/* ==========================================================================
   utility styles & snowflake management
   ========================================================================== */

/* clearfix
   ========================================================================== */

.cf:before,
.cf:after {
    clear: both;
    content: '';
    display: table;
}

/* global page attributes
   ========================================================================== */

.page-wrapper {
    padding: 0 1rem;
    width: 100%;
}

.page-width {
    margin: 0 auto;
    max-width: 1200px;
    width: 100%;
}
/* flexbox
   ========================================================================== */

.flex,
.inline-flex {
    -ms-flex-direction: row;
    -ms-flex-wrap: wrap;
    -webkit-flex-direction: row;
    -webkit-flex-wrap: wrap;
    /*display: -moz-box;*/
    /*display: -webkit-box;*/
    display: -ms-flexbox; /* IE10 */
    display: -webkit-flex; /* Safari */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.inline-flex {
    display: -ms-inline-flexbox;
    display: -webkit-inline-flex;
    display: inline-flex;
}

.flex > *,
.inline-flex > * {
    display: inline-block; /* IE10-11 won't apply flexbox layouts to inline elements, so use any non-inline display */
    margin: 0 !important; /* flexbox uses margins for calculations, so disable them */
}

/* direction
   ================================== */

.direction-c { -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; }
.direction-cr { -ms-flex-direction: column-reverse; -webkit-flex-direction: column-reverse; flex-direction: column-reverse; }
.direction-r { -ms-flex-direction: row; -webkit-flex-direction: row; flex-direction: row; }
.direction-rr { -ms-flex-direction: row-reverse; -webkit-flex-direction: row-reverse; flex-direction: row-reverse; }

/* wrapping
   ================================== */

.wrap-nw { -ms-flex-wrap: nowrap; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; }
.wrap-w { -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
.wrap-wr { -ms-flex-wrap: wrap-reverse; -webkit-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; }

/* horizontal distribution
   ================================== */

.justify-around-h { -ms-flex-pack: distribute; -webkit-justify-content: space-around; justify-content: space-around; }
.justify-between-h { -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; }
.justify-center-h { -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; }
.justify-left-h { -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; }
.justify-right-h { -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; }

/* vertical distribution
   ================================== */

.justify-around-v { -ms-flex-line-pack: distribute; -webkit-align-content: space-around; align-content: space-around; }
.justify-between-v { -ms-flex-line-pack: justify; -webkit-align-content: space-between; align-content: space-between; }
.justify-bottom-v { -ms-flex-line-pack: end; -webkit-align-content: flex-end; align-content: flex-end; }
.justify-middle-v { -ms-flex-line-pack: center; -webkit-align-content: center; align-content: center; }
.justify-stretch-v { -ms-flex-line-pack: stretch; -webkit-align-content: stretch; align-content: stretch; }
.justify-top-v { -ms-flex-line-pack: start; -webkit-align-content: flex-start; align-content: flex-start; }

/* row vertical alignment
   ================================== */

.valign-row-auto { -ms-flex-align: auto; -webkit-align-items: auto; align-items: auto; }
.valign-row-baseline { -ms-flex-align: baseline; -webkit-align-items: baseline; align-items: baseline; }
.valign-row-bottom { -ms-flex-align: end; -webkit-align-items: flex-end; align-items: flex-end; }
.valign-row-middle { -ms-flex-align: center; -webkit-align-items: center; align-items: center; }
.valign-row-stretch { -ms-flex-align: stretch; -webkit-align-items: stretch; align-items: stretch; }
.valign-row-top { -ms-flex-align: start; -webkit-align-items: flex-start; align-items: flex-start; }

/* item vertical alignment
   ================================== */

.valign-self-auto { -ms-flex-item-align: auto; -webkit-align-self: auto; align-self: auto; }
.valign-self-baseline { -ms-flex-item-align: baseline; -webkit-align-self: baseline; align-self: baseline; }
.valign-self-bottom { -ms-flex-item-align: end; -webkit-align-self: flex-end; align-self: flex-end; }
.valign-self-middle { -ms-flex-item-align: center; -webkit-align-self: center; align-self: center; }
.valign-self-stretch { -ms-flex-item-align: stretch; -webkit-align-self: stretch; align-self: stretch; }
.valign-self-top { -ms-flex-item-align: start; -webkit-align-self: flex-start; align-self: flex-start; }

/* misc
   ================================== */

.microflex {
    -ms-flex-align: center;
    -webkit-justify: center;
    /*display: -moz-box;*/
    /*display: -webkit-box;*/
    justify: center;
    display: -ms-flexbox; /* IE10 */
    display: -webkit-flex; /* Safari */
    display: flex;
}

.microflex > * {
    display: inline-block; /* IE10-11 won't apply flexbox layouts to inline elements, so use any non-inline display */
    max-width: 100%;
}

.fill-and-center {
    display: block;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}

/* column widths
   ================================== */

.flex.auto-columns > * { width: auto; }
.flex.one-column > * { width: 100%; }
.flex.two-column > * { width: 50%; }
.flex.three-column > * { width: 33.333%; }
.flex.four-column > * { width: 25%; }
.flex.five-column > * { width: 20%; }

/* cues & other pointers
   ========================================================================== */

.chevron-after:after {
    content: '»';
    display: inline;
    margin-left: .25rem;
}

/* border colors
   ========================================================================== */

.light-gray-border { border: 1px solid #ccc !important; }

/* display
   ========================================================================== */

.display-block,
.show { display: block !important; }
.display-inline { display: inline !important; }
.display-inline-block { display: inline-block !important; }
.display-none,
.hide { display: none !important; }
.display-table { display: table !important; }
.display-table-cell { display: table-cell !important; }
.display-table-row { display: table-row !important; }

.opacity-0 { opacity: 0 !important; }
.opacity-1 { opacity: 1 !important; }

.visibility-hidden { visibility: hidden !important; }
.visibility-visible { visibility: visible !important; }

/* positioning
   ========================================================================== */

.clear-both { clear: both !important; }
.clear-left { clear: left !important; }
.clear-right { clear: right !important; }

.float-left { float: left !important; }
.float-none { float: none !important; }
.float-right { float: right !important; }

.position-absolute { position: absolute !important; }
.position-fixed { position: fixed !important; }
.position-relative { position: relative !important; }
.position-static { position: static !important; }

/* dimensions
   ========================================================================== */

.height-0 { height: 0 !important; }
.height-auto { height: auto !important; }
.height-full { height: 100% !important; }
.height-inherit { height: inherit !important; }

.width-0 { width: 0 !important; }
.width-auto { width: auto !important; }
.width-full { width: 100% !important; }
.width-inherit { width: inherit !important; }

.width-large { width: 1240px !important; }
.width-medium { width: 900px !important; }
.width-small { width: 600px !important; }

/* box styles
   ========================================================================== */

.background-none { background: none !important; }

.border-none { border: none !important; }

.border-bottom-none { border-bottom: none !important; }
.border-left-none { border-left: none !important; }
.border-right-none { border-right: none !important; }
.border-top-none { border-top: none !important; }

.box-sizing-border-box { box-sizing: border-box !important; }
.box-sizing-content-box { box-sizing: content-box !important; }

.vertical-align-baseline { vertical-align: baseline !important; }
.vertical-align-bottom { vertical-align: bottom !important; }
.vertical-align-middle { vertical-align: middle !important; }
.vertical-align-sub { vertical-align: sub !important; }
.vertical-align-super { vertical-align: super !important; }
.vertical-align-text-bottom { vertical-align: text-bottom !important; }
.vertical-align-text-top { vertical-align: text-top !important; }
.vertical-align-top { vertical-align: top !important; }

/* text
   ========================================================================== */

.text-align-center { text-align: center !important; }
.text-align-justify { text-align: justify !important; }
.text-align-left { text-align: left !important; }
.text-align-right { text-align: right !important; }

.font-weight-bold,
.font-weight-600 { font-weight: 600 !important; }

.font-weight-light,
.font-weight-300 { font-weight: 300 !important; }

.font-weight-normal,
.font-weight-400 { font-weight: 400 !important; }

.font-style-italic { font-style: italic !important; }
.font-style-normal { font-style: normal !important; }

.line-height-0 { line-height: 0 !important; }
.line-height-1 { line-height: 1 !important; }
.line-height-default { line-height: 125% !important; }

.large { font-size: 1.125rem !important; }
.larger { font-size: 1.625rem !important; }
.largest { font-size: 2rem !important; }
.medium { font-size: 1rem !important; }
.small { font-size: .875rem !important; }
.smaller { font-size: .75rem !important; }
.smallest { font-size: .625rem !important; }

/* margin
   ========================================================================== */

.center {
    margin-left: auto !important;
    margin-right: auto !important;
}

.margin-0 { margin: 0 !important; }
.margin-auto { margin: auto !important; }
.margin-inherit { margin: inherit !important; }

/* padding
   ========================================================================== */

.padding-0 { padding: 0 !important; }
.padding-inherit { padding: inherit !important; }

/* shared base styles
   ========================================================================== */

body,
.global body {
    color: #393939;
    font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;
    min-width: 1400px;
}

/* shared specific styles
   ========================================================================== */

#content a,
#features a,
#news a {
    color: #393939;
    transition: all .125s ease-in-out;
   -webkit-transition: all .125s ease-in-out;
}

#content a:hover,
#features a:hover { color: #f57300; }

#news a:hover { color: #ffbb5c; }

/* word cloud
   ========================================================================== */

#cloud-outer {
    background: #3c3c3c;
    font-weight: 600;
    line-height: 1.125;
    padding: 2rem 1rem;
}

#cloud-inner {
    height: 414px;
    margin: 0 auto;
    position: relative;
    text-align: center;
    width: 1400px;
}

/* immediate access section
   ========================================================================== */

#immediate { padding: 4rem 0; }

#immediate .width {
    margin: 0 auto;
    padding-right: 1rem;
    width: 100%;
}

#immediate h1 {
    color: #777;
    font-size: 1.7rem;
    font-weight: 300;
    margin-bottom: 2rem;
    text-align: center;
}

#immediate a {
    font-weight: 600;
    padding: 0 .5rem;
    text-align: center;
}

#immediate img { margin-bottom: .5rem; }

/* quick links section
   ========================================================================== */

#quick { padding: 4rem 0; }

#quick .flex:first-child {
    border-left: 1px solid #ccc;
    padding-left: 1rem;
}

#quick .width {
    margin: -.5rem auto 0 auto;
    width: 100%;
}

#quick h1 {
    color: #777;
    font-size: 1.7rem;
    font-weight: 300;
    margin-bottom: 2rem;
    text-align: center;
}

#quick a {
    font-weight: 600;
    padding: .5rem 1rem;
}

#quick .microflex > *:last-child { padding-left: .5rem; }
#quick .microflex > *:last-child div { widows: 2; }

#quick .more {
    font-weight: 400;
    padding-left: 3.125rem;
}

/* features section
   ========================================================================== */

#features { padding-bottom: 2rem; }

#features .width {
    margin: 0 auto;
    max-width: 1200px;
    width: 100%;
}

#features .flex > * { padding: .5rem .5rem 2rem .5rem; }

#features img {
    display: block;
    margin: 0 auto .5rem auto;
}

#features h1 {
    font-weight: 600;
    margin: 0 auto;
    max-width: 275px;
}

#features p {
    margin-bottom: 2rem;
    margin: 0 auto;
    max-width: 275px;
}

/* news section
   ========================================================================== */

#news { background: #818181; }

#news .width {
    margin: 0 auto;
    max-width: 900px;
    padding: 2rem 0;
    width: 100%;
}

#news h1 {
    color: #eee;
    font-size: 1.7rem;
    font-weight: 300;
    margin-bottom: 2rem;
    text-align: center;
}

#news a {
    color: #fff;
    padding: 1rem 0;
}

#news a:nth-child(odd) { padding-right: 2rem; }

#news a:nth-child(even) { padding-left: 2rem; }

#news .microflex > * {
    -webkit-align-self: center;
    align-self: center;
}

#news .microflex > img { min-width: 52px; }

#news .microflex > *:last-child { padding-left: 1rem; }