/*** NORMALIZE ***/
@import url('normalize.css');

.cf:before,
.cf:after {
  content: " ";
  display: table; 
}

.cf:after {
  clear: both;
}

.cf {
  *zoom: 1;
}

/*** FONTS ***/

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/DXI1ORHCpsQm3Vp6mXoaTeY5mlVXtdNkpsMpKkrDXP4.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/u-WUoqrET9fUeobQW7jkRbO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/k3k702ZOKiLJc3WVjuplzOY5mlVXtdNkpsMpKkrDXP4.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300;
  src: local('Open Sans Light Italic'), local('OpenSansLight-Italic'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/PRmiXeptR36kaC0GEAetxnZ4362_PV5aPD5jU0S2ELI.woff) format('woff');
}

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: local('Open Sans Italic'), local('OpenSans-Italic'), url(http://fonts.gstatic.com/s/opensans/v9/xjAJXh38I15wypJXxuGMBogt8zh49GR1Df_uPwTXpxw.woff2) format('woff2'), url(http://fonts.gstatic.com/s/opensans/v9/xjAJXh38I15wypJXxuGMBqfTCPadK0KLfdEfFtGWCYw.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 700;
  src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'), url(http://fonts.gstatic.com/s/opensans/v9/PRmiXeptR36kaC0GEAetxpNqtRD8o2krntaMXKqEhp0.woff2) format('woff2'), url(http://fonts.gstatic.com/s/opensans/v9/PRmiXeptR36kaC0GEAetxhLE7eCesZRIBkkq27EgTqg.woff) format('woff');
}




/*** GLOBAL ***/

::selection { color: #fff; background: #1e85d4; }
::-moz-selection { color: #fff; background: #1e85d4; }


body, html {
  margin: 0;
  padding: 0;
}

body {
  background-color: #638dad;
  font: 18px "Open Sans", "Helvetica Neue", sans-serif;
  line-height: 0;
  color: #202122;
}

strong {
  color: #393c3e;
}

p a {
  color: #0162ac;
  position: relative;
}

p a:active {
  top: 1px;
}

p {
  width: 100%;
}

li {
  margin-bottom: 15px;
}

blockquote {
	margin: 2em 1em;
	font-size: 24px;
	text-align: center;
  font-weight: 300;
}

#action {
  font-size: 24px;
  font-weight: 300;
  text-align: center;
  display:block;
  width:100%;
  margin-left:0;
  margin-top:20px;
  background-color:#fff7d9;
  padding:10px;
}

#signature {
	font-size:20px;
	margin-top:40px;
}

.grey {
 font-size: 14px;
 color: #515960;
}

.grey a {
	color: #515960;
}
/*** header ***/

.header {
  max-width: 100%;
  height: 440px;
  background: #638dad;
  margin: 0 auto 30px;
  text-align: center;
  line-height: 1.4;
  padding-top: 60px;
}

.header h1 {
  font-size: 54px;
  font-weight: 700;
  text-align: center;
  color: #fff;
  margin-bottom: 0;
  line-height:1.25em;
}

.header h2 {
  font-size: 18px;
  font-weight: normal;
  font-style: italic;
  color: #fff;
  margin-top:1.7em;
}

.header p {
  width: 540px;
  color: #60666c;
  padding: 15px 10px;
  margin: 10px auto 0;
  text-align: center;
  font-size: 16px;
  line-height: 1.6;
}

.header p a {
  color: #1e85d4;
}

/*** CONTENT ***/

.page {
  margin-top: -32px;
}

.content {
  max-width: 640px;
  margin: 0 auto;
  padding: 10px 100px;
  background: white;
  position: relative;
  line-height: 1.4;
  text-align: justify;
}

.content:first-child {
  padding-top: 40px;
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
}

.content:last-child {
  padding-bottom: 30px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
  margin-bottom: 60px;
}

.fullwidth {
  max-width: 840px;
  margin: 0 auto;
  padding: 0;
}

.content h2 {
  color: #393c3e;
  border-bottom: 1px dashed #ccc;
  padding-bottom: 5px;
  display: block;
  margin-top: .6em;
}

.content h3 {
  color: #62707a;
  margin-top: 1.8em;
  margin-bottom:-0.3em;
}

.img-desc {
  margin-top: 5px;
  margin-bottom: 2em;
  text-align: center;
  font-size: 14px;
  color: #515960;
}

.graph-desc {
  margin-top: 1em;
  margin-bottom: 0.2em;
  text-align: center;
  font-size: 18px;
  color: #515960;
}

.subh {
  font-size: 14px;
  color: #515960;
  margin-top: 0;
  position: relative;
  top: -10px;
}

.center {
  text-align: center;
}

.warning {
  font-size: 14px;
  background: #fff7d9;
  padding: 10px;
  border-radius: 8px;
}

.content:last-child p {
  font-size: 14px;
  text-align: center;
}

/*** PHOTOS ***/

.photogrid {
  margin: 0 auto;
  padding: 0;
  background: #fff;
}

.photogrid a img {
  margin: 0 8px 0 0;
  width: 154px;
}

.photogrid a:last-child img {
  margin: 0;
}



.magic {
  width: 640px;
  height: 398px;
  position: relative;
}

.magic img {
  display: none;
  position: absolute;
  width: 640px;
  height: 398px;
  left: 0;
  top: 0;
}

.magic img.currentimg {
  display: block;
}

.magicdesc {
  position: relative;
  margin-bottom: 3em;
}

.magicdesc p {
  position: absolute;
  top: 0; left: 0;

}

.hiddendesc {
  background: #fff;
  display: none;
  z-index: 1000;
}

/*** BTN ***/

.btn {
  width: 360px;
  height: 60px;
  text-align: center;
  margin: 0 auto;
  line-height: 60px;
  background: #1e85d4;
  border-radius: 4px;
  font-weight: 700px;
  font-size: 16px;
}

.btn a {
  color: #fff;
  text-decoration: none;
  display: block;
  height: 100%;
  width: 100%;
}

.btn:hover {
  background: #3094e0;
}

.books {
  display:inline-block;
  position: relative;
}

/* magnifying glass icon */
.books:after {
  content:'';
  display:block; 
  width:33px; 
  height:33px; 
  position:absolute; 
  top:0;
  right:0;
  background:url('img/zoom.png');
}

.books img {
  display: block;
}

.makke {
  background: #cef260;
  display: none;
}

.nodesktop {
  display: none;
}

.nomobile {
  display: block;
}

.graph {
  margin: 2em 0 3em;
}

.tables {
  margin: 2em 0;
}

.table {
  margin-bottom: 2em;
}

.tables thead, .table thead {
  background: #edf0f2;
  font-weight: bold;
  text-align: center;
}


.tables td, .table td {
  border: 1px solid #edf0f2;
  padding: 4px 10px;
}

td.tables-graph {
  padding: 20px 10px;
  text-align: center;
}

.tables table {
  width: 49%;
  float: left;
}

.tables table:last-child {
  margin-left: 2%;
}

.client-says {
  padding: 1em;
  margin: 1em 0;
  border-radius: 6px;
  background: #e6f7d6;

}

.client-says p {
  margin: 0 0 1em;
  font-style: italic;
  color: #3e413a;
}

.client-says p strong {
  font-weight: bold;
  color: #5a5e55;
}

.client-sign  p {
  margin-top: 1em !important;
  font-size: .8em;
  color: #3e413a;
  font-style: normal;
}

.client-sign strong {
  color: #5a5e55;

}

.client-sign img {
  width: 60px;
  height: 60px;
  float: left;
  margin-right: .6em;
}

.client-sign p {
  padding-top: 10px;
}

.notice {
  max-width: 640px;
  padding: 10px 100px;
  text-align: center;
  background-color: #fff77a;
  border: 3px solid #fff;
  margin: 10px auto;
}

.notice p {

  line-height: 1.5;
}

/*** RESPONSIVE STUFF ***/

@media (max-width: 810px) {
  .header h1 {
    font-size: 42px;
  } 

  .header h2 {
    font-size: 24px;
  }

}


@media (max-width: 630px) {
  .header {
    height: auto;
  } 

  .page {
    margin: auto;
  }

  .header p {
    width: auto;
  }

}

@media (max-width: 400px) {

  .header, .page {
    width: 95%;
    margin: auto;
  }

  .header {
    height: auto;
    padding-bottom: 30px;
    margin-top: 10px;
  }

  .content:first-child {
    padding-top: 0;
  }

  .content, .header p, .fullwidth, iframe, .photogrid a img, img, .btn, .warning {
    width: 100%;
    margin: auto;
    padding: 0;
  }

  .warning {
    width: 92%;
    padding: 4%;
  }

  body {
    background: #fff;
  }

  .headerimg {
    width: 90%;
  }

  .nomobile {
    display: none;
  }

  .header h1 {
    font-size: 36px;
  }

  .header h2 {
    font-size: 20px;
  }

  .header p {
    font-size: 14px;
    margin-bottom: 20px;
  }

  .content, #signature {
    font-size: 16px;
  }

  #signature {
    margin-top: 2em;
  }

  .content h2 {
    font-size: 22px;
    margin-top: 1.5em;
  }

  .magic {
    display: none;
  }

  .nodesktop {
    display: block;
  }

  #action {
    font-size: 18px;
    width: 95%;
    padding: 2%;
    margin: 1.5em 0 0;
  }

  .content:last-child {
    margin-bottom: 0;
  }

  .tables table {
    width: 100%;
    margin: 0;
    float: none;
  }

  .tables table:last-child {
    margin-left: 0;
    margin-top: 1em;
  }

}