/* Common styles for all sites */

/* ======================================================================== */
/* Reset styles (Eric Meyer) */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video { 
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* ======================================================================== */
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { 
display: block;
}

/* ======================================================================== */
/* Default link color and hover behaviour */
a {
  color: #eb5914;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ======================================================================== */
/* Default font, color and line space */
body { 
  line-height: 1;
  /* suppress iPhone's own text size adjustment */
  -webkit-text-size-adjust: none !important;
  /* the font as used by google */
  font-family: 'Roboto', Verdana, Arial, sans-serif;
  line-height: 1.4;
  font-size: 100%;
  /* default font weight is 400 */
  /* font-weight: 100; */
  font-weight: 400;
  color: #444;
}

/* ======================================================================== */
/* Default font sizes for the heading tags */
h1 { font-size: 200%; }
h2 { font-size: 150%; }
h3 { font-size: 117%; }
h4 { font-size: 100%; }
h5 { font-size: 83%; }
h6 { font-size: 75%; }

ol, ul { 
  list-style: none;
}

.main h1 {
  font-weight: 100;
  color: #3472ae;
  text-align: center;
  padding: 0.1em;
}

.main h1.darkgrey {
  background-color: #474444;
  color: white;
}

.main h1.orange {
  background-color: #dd4814 !important;
  color: white;
}

.main h2 {
  color: #3472ae;
  padding: 0.2em 0 0.2em 0;
}

.font-icon-fallback {
  display: none;
}

.font-icon-fallback img {
  width: 1em !important;
}

/* ======================================================================== */
/* Defines a quote as used in the testimonials and analyzer page */
p.quote {
  font-style: italic !important;
  font-weight: 100;
  text-align: center;
  margin-left: auto !important;
  margin-right: auto !important;
  line-height: 140%;
  padding: 0.5em 0;
}

p.quote:before {
  content: open-quote;
  font-size: 150%;
  vertical-align: -20%;
}

p.quote:after {
  content: close-quote;
  font-size: 150%;
  vertical-align: -20%;
}

/* ======================================================================== */
/* Default is: table with single border and no border spacing */
table { 
  border-collapse: collapse;
  border-spacing: 0;
}

/* ======================================================================== */
/* A class to disable underlines in a div inside a link <a...> */
.noDecoration {
  text-decoration: none !important;
}

/* ======================================================================== */
/* A class to avoid line breaks at white spaces */
.nowrap {
  white-space: nowrap;
}

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

.vertical-space
{
  height: 2em;
}

.vertical-space:after {
  content: "";
  clear: both;
  display: block;
}

.page {
  width: 100%;
}

/* ======================================================================== */
/* Defines a fixed goto top button, faded in automatically when scroll down */
#scroll-top {
  display: inline;
}

#scroll-top a { 
  padding: 4px 8px 6px;
  border: 1px solid white;
  border-radius: 4px;
  background: #818c90;
  position: fixed;
  bottom: 48px;
  right: 24px;
  display: none;
  opacity: 0.89;
  filter: alpha(opacity=89);
  z-index: 999999;
  color: white;
}

#scroll-top a:hover {
  text-decoration: none;
  background-color: #5492be;
  cursor: pointer;
}

/* ======================================================================== */
/* This class centers the div according to the screen width resolution */
.centered {
  width: 90%;
  margin: 5% auto;
  margin-top: 0;
  margin-bottom: 0;
  /* border: 1px solid #fcc; */
}

/* Asure that the next div is correctly positioned */
.centered:after {
  content: "";
  clear: both;
  display: block;
}

@media screen and (max-width: 599px) {
  .main h1.fit {
    /* vw is 1% of the browser window width (viewport window width) */
    font-size: 110%; font-size: 4.5vw;
  }
}

@media screen and (min-width: 600px) {
  p.quote {
    font-size: 160%;
    width: 90%;
  }
}

@media screen and (min-width: 1024px) {
  .centered {
    width: 90%;
    margin: 5% auto;
    /* remove the 5% from the top */
    margin-top: 0;
    margin-bottom: 0;
  }
}

@media screen and (min-width: 1200px){
  body {
    line-height: 1.6;
    font-size: 110%;
  }
  .centered {
    width: 82%;
    margin: 9% auto;
    /* remove the 5% from the top */
    margin-top: 0;
    margin-bottom: 0;
  }
}

@media screen and (min-width: 1400px){
  body {
    font-size: 120% !important;
  }
  .centered {
    width: 74%;
    margin: 13% auto;
    /* remove the 5% from the top */
    margin-top: 0;
    margin-bottom: 0;
  }
}

@media screen and (min-width: 1600px){
  .centered {
    width: 66%;
    margin: 17% auto;
    /* remove the 5% from the top */
    margin-top: 0;
    margin-bottom: 0;
  }
}

/* .best-fit { */
/*   font-size: calc( 16px + (24 - 16) * ( (100vw - 400px) / ( 800 - 400) )); */
/* } */
/* @media all and (min-width: 100px) { .best-fit { font-size:0.6em; } } */
/* @media all and (min-width: 150px) { .best-fit { font-size:0.8em; } } */
/* @media all and (min-width: 200px) { .best-fit { font-size:0.9em; } } */
/* @media all and (min-width: 300px) { .best-fit { font-size: 1em; } } */
/* @media all and (min-width: 360px) { .best-fit { font-size: 1.2em; } } */
/* @media all and (min-width: 400px) { .best-fit { font-size: 1.4em; } } */
/* @media all and (min-width: 500px) { .best-fit { font-size:1.6em; } } */
/* @media all and (min-width: 600px) { .best-fit { font-size:1.8em; } } */
/* @media all and (min-width: 700px) { .best-fit { font-size:2.0em; } } */