@charset "UTF-8";
/* - - Goal is maximum flexability with legacy technology: Flexbox will be used later. - - 
 * Main CSS file by Darren Davenport - this file needs to be refactored for new advances
 * This file aggregates the best thinking related to normalizing HTML styles.
 * Normalize.css enhanced
 * Primary contributor:
 * http://nicolasgallagher.com/about-normalize-css/
 * normalize.css v1.1.3 | MIT License | git.io/normalize
 * Copyright (c) Nicolas Gallagher and Jonathan Neal

 * Other contributors include:
 * HTML5 ✰ Boilerplate - http://html5boilerplate.com/
 * Sleleton - Frameworks used for most compatiable grid over flexbox
 * Logan Jaeren added tidbits, helper classes and support for touchscreen

 * Last Updated: December 16, 2018
*/
 

/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */

/*
 * Correct `block` display not defined in IE 6/7/8/9 and Firefox 3.
 */
 
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
	display: block;
}

/*
 * Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
 */

audio,
canvas,
video {
    display: inline-block;
    *display: inline;
    *zoom: 1;
}

/*
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

audio:not([controls]) {
    display: none;
    height: 0;
}

/*
 * Address styling not present in IE 7/8/9, Firefox 3, and Safari 4.
 * Known issue: no IE 6 support.
 */

/*[hidden] {
    display: none;
}*/


/* ==========================================================================
   Base
   ========================================================================== */

/*
 * 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using
 *    `em` units.
 * 2. Normalize 'font-family'
 * 3. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 * 4. Force WekKit browsers to apply antialiased font rendering, overriding the
 *    default subpixel-antialiased rendering that tends to make fonts appear heavy.
 * 5. Override default font rendering in Mozilla to smooth font rendering
 * 6. The text-rendering CSS property provides information to the rendering 
      engine about what to optimize for when rendering text. The browser makes 
	  trade-offs among speed, legibility, and geometric precision.
	  optimizeLegibility - The browser emphasizes legibility over rendering 
	  speed and geometric precision. This enables the use of special kerning 
	  and optional ligature information that may be contained in the font file 
	  for certain fonts.
	  http://css-tricks.com/almanac/properties/t/text-rendering/
 * 7. Standardize CSS box model to include border and padding in the calculation 
      of width and height of elements. Margins are not included in the calculations.
 */

html {
    font-size: 100%; /* 1 */
	font-family: sans-serif; /* 2*/
    -moz-text-size-adjust: 100%; /* 3 */
    -ms-text-size-adjust: 100%; /* 3 */
    -webkit-text-size-adjust: 100%; /* 3 */
	-webkit-font-smoothing: antialiased; /* 4 */
	-moz-osx-font-smoothing: grayscale; /* 5 */
	text-rendering: optimizeLegibility; /* 6 */
}

/* hides tap highlighting, and improves CSS3 animation using Android/WebKit browsers */
html {
	-webkit-tap-highlight-color:rgba(0,0,0,0);
}

*, *:after, *:before {
	-webkit-box-sizing: border-box; /* 7 */
	-moz-box-sizing: border-box; /* 7 */
	box-sizing: border-box; /* 7 */
}

/*
 * 1. Address margins handled incorrectly in IE 6/7.
 * 2. Apply the Yahoo! YUI method to normalize typography. Setting the base
 *    font size (14px), line-height (16px) and font type. Use percent value to set
 *    font size and line height. Use of percent values will achieve the most
 *    consistent results across browsers.
 * 3. #444 provides good color contrast without the issues associated with black
 *    text on a white background. 
 */

body {
    margin: 0; /* 1 */
	font: 87.5%/1.143 sans-serif; /* 2 */
	color: #444; /* 3 */
}

/*
 * 1. Address `font-family` inconsistency between `textarea` and other form elements.
 * 2. Normalize font size and alignment across form inputs
 */

button,
input,
select,
textarea {
	font-family: sans-serif; /* 1 */
	font-size: 100%; /* 2 */
	vertical-align: baseline; /* 2 */
}


/* ==========================================================================
   Font size
   ========================================================================== */

/*
   Apply the following percent values when adjusting font size
   Font-size chart based on 14px (87.5%) base font:
   9px  = 64.3%
   10px = 71.4%
   11px = 78.6%
   12px = 85.7%
   13px = 92.9%
   14px = 100%
   15px = 107.1%
   16px = 114.3%
   17px = 121.4%
   18px = 128.6%
   19px = 135.7%
   20px = 142.9%
   21px = 150%
   22px = 157.1%
   23px = 164.3%
   24px = 171.4%
   25px = 178.6%
   26px = 185.7%
 */


/* ==========================================================================
   Links
   ========================================================================== */

/*
 * Make anchor tags more elegant
 */
 
a,
a:link,
a:active{
	color: #5189E7;
	text-decoration:none;
	cursor:pointer;
   }
a:hover {
  color: #1D5FCF;
  }
  
  
a:visited {
  color: #1D5FCF;
  }

object{
    pointer-events: none;     /* FireFox hack */
    z-index: 1; z-index: -1;  /* IE hack */
}

.clickMe a{
    display: block;
}
/*
 * Address `outline` inconsistency between Chrome and other browsers.
 */

a:focus {
    outline: thin dotted;
}

/*
 * Improve readability when focused and also mouse hovered in all browsers.
 */

a:active,
a:hover {
    outline: 0;
}
.fa-amazon:before{content:"\f270"}

a:hover {
	text-decoration:underline;
}


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

/**
 * Address font sizes and margins set differently in IE 6/7.
 * Address font sizes within `section` and `article` in Firefox 4+, Safari 5,
 * and Chrome.
 */

h1 {
    font-size: 185.7%; /* 26px */
    margin: 0.61538461538462em 0; /* 16px 0 */
}

h2 {
    font-size: 157.1%; /* 22px */
    margin: 0.72727272727273em 0; /* 16px 0 */
}

h3 {
    font-size: 142.9%; /* 20px */
    margin: 0.8em 0; /* 16px 0 */
}

h4 {
    font-size: 128.6%; /* 18px */
    margin: 0.88888888888889em 0; /* 16px 0 */
}

h5 {
    font-size: 114.3%; /* 16px */
    margin: 1em 0; /* 16px 0 */
}

h6 {
    font-size: 107.1%; /* 15px */
    margin: 1.06666666666667em 0; /* 16px 0 */
}

/*
 * Address styling not present in IE 7/8/9, Safari 5, and Chrome.
 */

abbr[title] {
    border-bottom: 1px dotted;
	cursor: help;
}

/*
 * Address style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome.
 */

b,
strong {
    font-weight: bold;
}

blockquote {
	quotes: none;
    margin: 1em 3em;
}

/*
 * Address `quotes` property not supported in Safari 4.
 */

blockquote:before,
blockquote:after {
	content: '';
	content: none;
}

/*
 * Address styling not present in Safari 5 and Chrome.
 */

dfn {
    font-style: italic;
}

dfn[title] {
    border-bottom: 1px dotted;
	cursor: help;
}

/*
 * Address differences between Firefox and other browsers.
 * Known issue: no IE 6/7 normalization.
 */

hr {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
}

/*
 * Alternative styling for horizontal rule
 */
 
hr.single {
    height: 1px;
    border: 0;   
    border-top: 1px solid;
    margin: 1em 0;
    padding: 0;
}

hr.double {
	height: 4px;
	border-style: solid;
	border-width: 1px 0;
}

hr.single,
hr.double {
	border-color: #888;
}

/*
 * Address styling not present in IE 6/7/8/9.
 */

mark {
    background: #ff0;
    color: rgb(34, 34, 34);
}

/*
 * Address margins set differently in IE 6/7.
 */

p,
pre {
    margin: 1em 0;
}

/*
 * Correct font family set oddly in IE 6, Safari 4/5, and Chrome.
 */

code,
kbd,
pre,
samp {
    font-family: monospace, serif;
    _font-family: 'courier new', monospace;
    font-size: 100%;
}

/*
 * Improve readability of pre-formatted text in all browsers.
 */

pre {
    white-space: pre; /* CSS2 */
    white-space: pre-wrap; /* CSS 2.1 */
	white-space: pre-line /* CSS 2.1 & 3 */
    word-wrap: break-word; /* IE */
}

/*
 * Address CSS quotes not supported in IE 6/7.
 */

q {
    quotes: none;
}

/*
 * Address `quotes` property not supported in Safari 4.
 */

q:before,
q:after {
    content: '';
    content: none;
}

/*
 * Address inconsistent and variable font size in all browsers.
 */

small {
    font-size: 85.7%;
}

/*
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */

sub,
sup {
    font-size: 71.4%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.3em;
}


/* ==========================================================================
   Lists
   ========================================================================== */

/*
 * Address margins set differently in IE 6/7.
 */

dl,
menu,
ol,
ul {
    margin: 1em 0;
}

dd {
    margin: 0 0 0 2em;
}

/*
 * Address paddings set differently in IE 6/7.
 */

menu,
ol,
ul {
    padding: 0 0 0 3em;
}

/*
 * Correct list styles handled incorrectly in IE 7.
 * Apply 'modernizr' to add support for <nav> in IE 8.
 */

nav ul,
nav ol {
    list-style: none;
    list-style-image: none;
}

/*
 * Apply clearfix to navigation lists
 */
 
nav ul:before,
nav ul:after,
nav ol:before,
nav ol:after {
	content: "\0020";
	display: block;
	height: 0;
	visibility: hidden;
} 

nav ul:after,
nav ol:after {
	clear: both;
}

/*
 * Normalize navigation type lists
 * Apply 'modernizr' to add support for <nav> in IE 8.
 */

nav ul,
nav ol,
nav ul li,
nav ol li {
	margin: 0;
	padding: 0;
}

/*
 * Reset the left/right gaps (created by the previous and next rules) on nested elements.
 * Apply 'modernizr' to add support for <nav> in IE 8.
 */
 
nav li ul,
nav li ol {
	padding-right:0;
	padding-left:0;
}


/* ==========================================================================
   Embedded content
   ========================================================================== */

/*
 * 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3.
 * 2. Override global box-sizing rule
 */

img {
    border: 0; /* 1 */
	box-sizing: content-box; /* 2 */
}

/*
 * Correct overflow displayed oddly in IE 9.
 */

svg:not(:root) {
    overflow: hidden;
}


/* ==========================================================================
   Figures
   ========================================================================== */

/*
 * Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
 */

figure {
    margin: 0;
}


/* ==========================================================================
   Forms
   ========================================================================== */

/*
 * Correct margin displayed oddly in IE 6/7.
 */

form {
    margin: 0;
}

/*
 * Define consistent border, margin, and padding.
 */

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 0.14285714285714em; /* 2px */
    padding: 0.35714285714286em 0.71428571428571em 0.85714285714286em; /* 5px 10px 12px */
}

/*
 * 1. Correct color not being inherited in IE 6/7/8/9.
 * 2. Correct text not wrapping in Firefox 3.
 * 3. Correct alignment displayed oddly in IE 6/7.
 */

legend {
    border: 0; /* 1 */
    padding: 0;
	white-space: normal; /* 2 */
    *margin-left: -7px; /* 3 */
}

/*
 * 1. Correct font size not being inherited in all browsers.
 * 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5,
 *    and Chrome.
 * 3. Improve appearance and consistency in all browsers.
 */

button,
input,
select,
textarea {
    font-size: 100%; /* 1 */
    margin: 0; /* 2 */
    vertical-align: baseline; /* 3 */
    *vertical-align: middle; /* 3 */
}

/*
 * Correct font size and font family for Chrome (Mac)
 */

select {
	font-family: inherit;
	-webkit-appearance: menulist-button;
}

/*
 * Address Firefox 3+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

button,
input {
    line-height: normal;
}

/*
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+.
 * Correct `select` style inheritance in Firefox 4+ and Opera.
 */

button,
select {
    text-transform: none;
}

/*
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 * 4. Remove inner spacing in IE 7 without affecting normal text inputs.
 *    Known issue: inner spacing remains in IE 6.
 */

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button; /* 2 */
    cursor: pointer; /* 3 */
    *overflow: visible; /* 4 */
}

/*
 * Re-set default cursor for disabled elements.
 */

button[disabled],
html input[disabled] {
    cursor: default;
}

/*
 * 1. Address box sizing set to content-box in IE 8/9.
 * 2. Remove excess padding in IE 8/9.
 * 3. Remove excess padding in IE 7.
 *    Known issue: excess padding remains in IE 6.
 */

input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
    *height: 13px; /* 3 */
    *width: 13px; /* 3 */
	
}

/*
 * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
 *    (include `-moz` to future-proof).
 */

input[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box; /* 2 */
    box-sizing: content-box;
}

/*
 * Remove inner padding and search cancel button in Safari 5 and Chrome
 * on OS X.
 */

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/*
 * Remove inner padding and border in Firefox 3+.
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/*
 * 1. Remove default vertical scrollbar in IE 6/7/8/9.
 * 2. Improve readability and alignment in all browsers.
 */

textarea {
    overflow: auto; /* 1 */
    vertical-align: top; /* 2 */
}

/*
 * Improve visual cue for form labels
 */

label {
	cursor: pointer;
}

label:hover {
	color: #1D5FCF;
}

/* ==========================================================================
   Tables
   ========================================================================== */

/*
 * Remove most spacing between table cells.
 * Still need cellspacing="0" in the markup
 */

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/*
 * Normalize formatting
 */

td {
	vertical-align: top;
}


/* ==========================================================================
   Extras
   ========================================================================== */

/*
 * Prevent margin collapsing on container with floating child elements
 */

.clearFix:before,
.clearFix:after {
	content:"\0020";
	display:block;
	height:0;
	visibility:hidden;
} 

.clearFix:after {
	clear:both;
}

/*
 * Visually hide 
 */

.hide,
.remove {
	display: none !important;
}

.show {
    display: block !important;
}

/*
 * Visually hide, but maintain layout
 */

.invisible {
	visibility: hidden !important;
}

.visible {
	visibility: visible !important;
}

/*
 * Make element transparent
 */

.transparent {
	opacity: 0 !important;
}

/*
 * Alignment helper classes
 */

.clearBoth { clear:both; }

.clearLeft { clear:left; }

.clearRight { clear:right; }

.floatLeft { float:left; }

.floatRight { float:right; }

.alignLeft { text-align:left; }

.alignRight { text-align:right; }

.alignCenter { text-align:center; }

/*
 * Miscellaneous helper classes
 */

.red {
	color: #ff0000;
}

/*
 * Enable dynamic scaling of media elements inside a container
 */

img.scale,
object.scale,
embed.scale { 
	max-width: 100%;
	height: auto;
  margin: 0 auto;
}

/*
 * Enable support for dynamic scaling in IE 8 (yep, this is a hack).
 */
media \0screen {
	img.scale,
	object.scale,
	embed.scale { 
    width: auto;
  	}
}

/* ==========================================================================
   Touch
   ========================================================================== */

/*
 * Enable any element to trigger a click event on a touchscreen device.
 * Apply 'modernizr' to enable support.
 */

.touch body {
	cursor: pointer;
}



/*
* Base level style for Dev version of site - add Brintrax.css and minify for production -- not done yet
* Armature Development Framework  --  by Darren Davenport  --  www.brintrax.com  --  12/16/2015
* Base CSS from Skeleton V2.0.4  --  Copyright 2014, Dave Gamache  --  www.getskeleton.com  --   12/29/2014 Utilized for older browsers
* Flexbox modifications by Logan Jearen  --  Human Domain  --  Used by permission  --  03/24/2015
*/


/* Index
––––––––––––––––––––––––––––––––––––––––––––––––––
- Grid
- Base Styles
- Typography
- Links
- Buttons
- Forms
- Lists
- Code
- Tables
- Spacing
- Utilities
- Clearing
- Media Queries
- Site Chrome
*/


/* Skeleton Grid - Fallback for not using flexbox
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
  position: relative;
  width: 100%;
  margin: 0 auto; 
  box-sizing: border-box; } 
  
.column,
.columns {
  width: 100%;
  float: left;
  padding-left: 6%;
  padding-right: 6%;
  box-sizing: border-box; }
  
  .concept,
  .goals,
  article.business,
  article.client,
  article.solution {
    display: none; }  
  

/* For devices larger than 400px */
@media (min-width: 400px) {
  .container {
    padding: 0; }
    }

/* For devices larger than 680px */
@media (min-width: 680px) {
  .container {
    width: 100%; }
  .column,
  .columns {
    padding: 0;
 }
 
  .one.column,
  .one.columns                    { width: 4.66666666667%; }
  .two.columns                    { width: 13.3333333333%; }
  .three.columns                  { width: 20%;            }
  .four.columns                   { width: 29.6666666667%; margin-left: 2%; margin-bottom: 3%;}
  .five.columns                   { width: 39.3333333333%; margin-right: 2%; margin-bottom: 3%;}
  .six.columns                    { width: 46%; margin-left: 2%;}
  .seven.columns                  { width: 56.6666666667%; margin-left: 2%;}
  .eight.columns                  { width: 65.3333333333%; }
  .nine.columns                   { width: 74.0%;          }
  .ten.columns                    { width: 82.6666666667%; }
  .eleven.columns                 { width: 91.3333333333%; }
  .twelve.columns                 { width: 100%;}

  .one-third.column               { width: 30.6666666667%; }
  .two-thirds.column              { width: 65.3333333333%; }

  .one-half.column                { width: 48%; }

  /* Offsets */
  .offset-by-one.column,
  .offset-by-one.columns          { margin-left: 8.66666666667%; }
  .offset-by-two.column,
  .offset-by-two.columns          { margin-left: 17.3333333333%; }
  .offset-by-three.column,
  .offset-by-three.columns        { margin-left: 26%;            }
  .offset-by-four.column,
  .offset-by-four.columns         { margin-left: 34.6666666667%; }
  .offset-by-five.column,
  .offset-by-five.columns         { margin-left: 43.3333333333%; }
  .offset-by-six.column,
  .offset-by-six.columns          { margin-left: 52%;            }
  .offset-by-seven.column,
  .offset-by-seven.columns        { margin-left: 60.6666666667%; }
  .offset-by-eight.column,
  .offset-by-eight.columns        { margin-left: 69.3333333333%; }
  .offset-by-nine.column,
  .offset-by-nine.columns         { margin-left: 78.0%;          }
  .offset-by-ten.column,
  .offset-by-ten.columns          { margin-left: 86.6666666667%; }
  .offset-by-eleven.column,
  .offset-by-eleven.columns       { margin-left: 95.3333333333%; }

  .offset-by-one-third.column,
  .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
  .offset-by-two-thirds.column,
  .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }

  .offset-by-one-half.column,
  .offset-by-one-half.columns     { margin-left: 52%; }

}


/* Begin Base Site Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */
html {
  font-size: 62.5%; }
body {
  font-size: 1.25rem; /* currently ems cause chrome bug misinterpreting rems on body element */
  line-height: 1.6;
  font-weight: 400;
  font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #222; 
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1{
  margin-top: 0;
  margin-bottom: .75rem;
  font-weight: 400; 
}


h2, h3, h4 {
  margin-top: 0;
  margin-bottom: 2rem;
  font-weight: 300; 
}
  
h5, h6 {
  margin-top: 0;
  margin-bottom: .5rem;
  font-weight: 300; }
  
  
h1 { font-size: 2.95rem; line-height: 1.2;  letter-spacing: -.1rem;}
h2 { font-size: 1.80rem; line-height: 1.25; letter-spacing: -.1rem; }
h3 { font-size: 1.90rem; line-height: 1.3;  letter-spacing: -.1rem; }
h4 { font-size: 1.65rem; line-height: 1.35; letter-spacing: -.08rem; }
h5 { font-size: 1.55rem; line-height: 1.5;  letter-spacing: -.05rem; }
h6 { font-size: 1.30rem; line-height: 1.6;  letter-spacing: 0; }
p {margin-top: 0; }

section#three h3,
section#TWO h2{
  margin-bottom: 0%;
}
section#three a{
  margin-bottom: 10%;
}
section#three p{
  color: #9F9C9B;
  margin-bottom: 2%;
  {font-size: 1.05rem;}
}
  #mainbox1 p,
  #mainbox2 p,
  #mainbox3 p,
  p.exp_content {
    padding-left: 2.3rem;
  }

 p.readers {
    float: right;
    color: #9F9C9B;
    margin: -5% 1% 15px 0 !important;
 }
 p.readers { font-size: 1.05rem;}

 .four.columns article.mainbox{
    display: block;  }
   
  section#Detail_lg,
  nav,
  img.five.columns{
    display: none;  }
    
 .emphasis{
     font-weight: bold;
 }
 .ref h3 img{
  float: left;
  padding-bottom: 30px;
 }
.ref p {
  margin-top: -3%;
}


/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 680px) {
    
  h1,h2 {padding: 2%;}
  section#three h2,
  section#three h1,
  section#two h2,
  section#two h1,
  section#four h1,
  section#four h2{
    padding: 0 2%;
  }
  h1 { font-size: 3.35rem; }
  h2 { font-size: 2.00rem; }
  h3 { font-size: 1.95rem; }
  h4 { font-size: 1.85rem; }
  h5 { font-size: 1.65rem; }
  h6 { font-size: 1.5rem; }
  p { font-size: 1.35rem;}
  p.readers { font-size: 1.15rem; width:60%}
  
  section#Detail_lg {display: block;}
  .twelve.columns h3,
  .twelve.columns p {padding: 0 2.1%;}
  img.five.columns{display: block !important;}

 .four.columns article.mainbox{
    display: none;}

  .ref h3 img{
    padding-bottom: 160px;
  }
  }


/* Larger than tablet */
@media (min-width: 750px) {
  h1 { font-size: 3.55rem; }
  h2 { font-size: 2.20rem; }
  h3 { font-size: 2.10rem; }
  h4 { font-size: 2.05rem; }
  h5 { font-size: 1.95rem; }
  h6 { font-size: 1.7rem; }
  p { font-size: 1.55rem;}
  p.readers { font-size: 1.25rem;}
  
  #mainbox1 p,
  #mainbox2 p,
  #mainbox3 p,
  p.exp_content {
    padding-left: 3.2rem;
  }
  .ref h3 img{
    
  }
}

/* Larger than desktop */
@media (min-width: 1000px) {
  h1 { font-size: 3.75rem; }
  h2 { font-size: 2.40rem; }
  h3 { font-size: 2.30rem; }
  h4 { font-size: 2.25rem; }
  h5 { font-size: 2.20rem; }
  h6 { font-size: 1.9rem; }
  p { font-size: 1.75rem;}
  p.readers { font-size: 1.35rem;}
  
  #mainbox1 p,
  #mainbox2 p,
  #mainbox3 p,
  p.exp_content {
    padding-left: 3.4rem;
  }

  .ref h3 img{
    
  }
}

/* Larger than Desktop HD */
@media (min-width: 1200px) {
  h1 { font-size: 4.25rem; }
  h2 { font-size: 2.90rem; }
  h3 { font-size: 2.60rem; }
  h4 { font-size: 2.45rem; }
  h5 { font-size: 2.40rem; }
  h6 { font-size: 2.10rem; }
  p { font-size: 1.95rem;}
  p.readers { font-size: 1.45rem;}
}


/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */

#Detail_lg a:hover {
    text-decoration: none;
}

/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
button,
.button,
.slicknav_btn,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  display: inline-block;
  height: 35px;
  padding: 0 28px;
  margin: 0 1%;
  color: #5189E7;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  line-height: 35px;
  letter-spacing: .1rem;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border-radius: 4px;
  border: 2px solid #5189E7;
  cursor: pointer;
  box-sizing: border-box; }
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
  color: #FFFFFF;
  border-color: #1D5FCF;
  text-decoration: none;
  outline: 0; }
.slicknav_btn,
.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
  color: #FFF;
  background-color: #5189E7;
  border-color: #5189E7; }
  .slicknav_btn:hover,
.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover,
.slicknav_btn:focus,
.button.button-primary:focus,
button.button-primary:focus,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus {
  color: #FFF;
  background-color: #1D5FCF;
  border-color: #1D5FCF;}


/* For devices larger than 400px */
@media (min-width: 400px) {
  .button-primary,
  .button.secondary,
  input[type="button"], {
  height: 42px;
  padding: 0 32px;
  font-size: 14px;
  line-height: 42px;
  letter-spacing: .14rem;
  border-radius: 4px;
  }
}
  

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 680px) {
  .button-primary,
  .button.secondary,
  input[type="button"] {
  height: 48px;
  padding: 0 32px;
  margin: 0 .75%
  font-size: 16px;
  line-height: 48px;
  letter-spacing: .25rem;
  border-radius: 4px;
  }

}

/* Larger than tablet */
@media (min-width: 750px) {}

/* Larger than desktop */
@media (min-width: 1000px) {
  .button-primary,
  .button.secondary,
  input[type="button"] {
  height: 54px;
  padding: 0 25px;
  font-size: 20px;
  line-height: 54px;
  letter-spacing: .31rem;
  border-radius: 4px;
  }
}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}


/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
  height: 38px;
  width: 95%;
  padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
  background-color: #fff;
  border: 1px solid #D1D1D1;
  border-radius: 4px;
  box-shadow: none;
  box-sizing: border-box; }
/* Removes awkward default styles on some inputs for iOS */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; }
textarea {
  min-height: 95px;
  padding-top: 6px;
  padding-bottom: 6px; }
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border: 1px solid #1D5FCF;
  outline: 0; }
label,
legend {
  display: block;
  margin-bottom: .5rem;
  font-weight: 600;
  font-size: 1.75rem; }
fieldset {
  padding: 0;
  border-width: 0; }
input[type="checkbox"],
input[type="radio"] {
  display: inline; }
label > .label-body {
  display: inline-block;
  margin-left: .5rem;
  font-weight: normal; }


/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */
ul {
  list-style: circle inside; }
ol {
  list-style: decimal inside; }
ol, ul {
  padding-left: 0;
  margin-top: 0; }
ul ul,
ul ol,
ol ol,
ol ul {
  margin: 1.5rem 0 1.5rem 3rem;
  font-size: 90%; }
li {
  margin-bottom: 1rem; }

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 680px) {}

/* Larger than tablet */
@media (min-width: 750px) {}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}

/* Code
–––––––––––––––––––––––––––––––––––––––––––––––––– */
code {
  padding: .2rem .5rem;
  margin: 0 .2rem;
  font-size: 90%;
  white-space: nowrap;
  background: #F1F1F1;
  border: 1px solid #E1E1E1;
  border-radius: 4px; }
pre > code {
  display: block;
  padding: 1rem 1.5rem;
  white-space: pre; }


/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
th,
td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #E1E1E1; }
th:first-child,
td:first-child {
  padding-left: 0; }
th:last-child,
td:last-child {
  padding-right: 0; }


/* Spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
button,
.button {
  margin-bottom: 1rem; }
input,
textarea,
select,
fieldset {
  margin-bottom: 1.5rem; }
pre,
blockquote,
dl,
figure,
table,
p,
ul,
ol,
form {
  margin-bottom: 2.5rem; }
  
  /* Larger than phablet (also point when grid becomes active) */
@media (min-width: 680px) {

}

/* Larger than tablet */
@media (min-width: 750px) {}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}


/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.u-full-width {
  width: 100%;
  box-sizing: border-box; }
.u-max-full-width {
  max-width: 100%;
  box-sizing: border-box; }
.u-pull-right {
  float: right; }
.u-pull-left {
  float: left; }
.center{
  margin: auto;
}

/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */
hr {
  margin-top: 3rem;
  margin-bottom: 3.5rem;
  border-width: 0;
  border-top: 1px solid #E1E1E1; }
  
div.four.columns header  {
  padding-top: 3.5rem;
}

header, .center{
  text-align: center;
}

.icon2::before{
    display: inline-block;
    margin-right: .55em;
    font: normal normal normal 10px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    color: #f6f8f5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);}
.icon::before {
    display: inline-block;
    font: normal normal normal 10px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    color: #1D5FCF;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
}


/* MailChimp Form Embed Code - Classic - 12/17/2015 v10.7 
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#mc_embed_signup form {display:block; position:relative; text-align:left; padding:10px 0 10px 3%}
#mc_embed_signup h2 {font-weight:bold; padding:0; margin:15px 0; font-size:1.4em;}
#mc_embed_signup input[type=checkbox]{-webkit-appearance:checkbox;}
#mc_embed_signup input[type=radio]{-webkit-appearance:radio;}
#mc_embed_signup input:focus {border-color:#333;}
#mc_embed_signup .small-meta {font-size: 11px;}
#mc_embed_signup .nowrap {white-space:nowrap;}

#mc_embed_signup .mc-field-group {clear:left; position:relative; width:96%; padding-bottom:3%; min-height:50px;}
#mc_embed_signup .size1of2 {clear:none; float:left; display:inline-block; width:46%; margin-right:4%;}
* html #mc_embed_signup .size1of2 {margin-right:2%; /* Fix for IE6 double margins. */}
#mc_embed_signup .mc-field-group label {display:block; margin-bottom:3px;}
#mc_embed_signup .mc-field-group input {display:block; width:100%; padding:8px 0; text-indent:2%;}
#mc_embed_signup .mc-field-group select {display:inline-block; width:99%; padding:5px 0; margin-bottom:2px;}

#mc_embed_signup .datefield, #mc_embed_signup .phonefield-us{padding:5px 0;}
#mc_embed_signup .datefield input, #mc_embed_signup .phonefield-us input{display:inline; width:60px; margin:0 2px; letter-spacing:1px; text-align:center; padding:5px 0 2px 0;}
#mc_embed_signup .phonefield-us .phonearea input, #mc_embed_signup .phonefield-us .phonedetail1 input{width:40px;}
#mc_embed_signup .datefield .monthfield input, #mc_embed_signup .datefield .dayfield input{width:30px;}
#mc_embed_signup .datefield label, #mc_embed_signup .phonefield-us label{display:none;}

#mc_embed_signup .indicates-required {text-align:right; font-size:11px; margin-right:4%;}
#mc_embed_signup .asterisk {color:#e85c41; font-size:150%; font-weight:normal; position:relative; top:5px;}     
#mc_embed_signup .clear {clear:both;}

#mc_embed_signup .mc-field-group.input-group ul {margin:0; padding:5px 0; list-style:none;}
#mc_embed_signup .mc-field-group.input-group ul li {display:block; padding:3px 0; margin:0;}
#mc_embed_signup .mc-field-group.input-group label {display:inline;}
#mc_embed_signup .mc-field-group.input-group input {display:inline; width:auto; border:none;}

#mc_embed_signup div#mce-responses {float:left; top:-1.4em; padding:0em .5em 0em .5em; overflow:hidden; width:90%; margin: 0 5%; clear: both;}
#mc_embed_signup div.response {margin:1em 0; padding:1em .5em .5em 0; font-weight:bold; float:left; top:-1.5em; z-index:1; width:80%;}
#mc_embed_signup #mce-error-response {display:none;}
#mc_embed_signup #mce-success-response {color:#529214; display:none;}
#mc_embed_signup label.error {display:block; float:none; width:auto; margin-left:1.05em; text-align:left; padding:.5em 0;}

#mc-embedded-subscribe {clear:both; width:auto; display:block; margin:1em 0 1em 5%;}
#mc_embed_signup #num-subscribers {font-size:1.1em;}
#mc_embed_signup #num-subscribers span {padding:.5em; border:1px solid #ccc; margin-right:.5em; font-weight:bold;}

#mc_embed_signup #mc-embedded-subscribe-form div.mce_inline_error {display:inline-block; margin:2px 0 1em 0; padding:5px 10px; background-color:rgba(255,255,255,0.85); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; font-size:14px; font-weight:normal; z-index:1; color:#e85c41;}
#mc_embed_signup #mc-embedded-subscribe-form input.mce_inline_error {border:2px solid #e85c41;}

/* Responsive Items 
   To center images which use the .img-responsive class, use .center-block instead of .text-center
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.mc-active .img-responsive{
  max-width: 130%;
}


/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Self Clearing Goodness */
.container:after,
.row:after,
.u-cf {
  content: "";
  display: table;
  clear: both; }


/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/


/* Larger than mobile */
@media (min-width: 400px) {}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 680px) {}

/* Larger than tablet */
@media (min-width: 750px) {}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}