/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */
/*
* 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:#222;}
html{font-size:1em;line-height:1.4;}
/*
* Remove text-shadow in selection highlight:h5bp.com/i
* These selection rule sets 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,videos,audio and canvas and the bottom of
* their containers:h5bp.com/i/440
*/
audio,
canvas,
img,
video{vertical-align:middle;}
/*
* Remove default fieldset styles.
*/
fieldset{border:0;margin:0;padding:0;}
/*
* Allow only vertical resizing of textareas.
*/
textarea{resize:vertical;}

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}



/* ==========================================================================
   Author's custom styles
   ========================================================================== */
body{
  margin: 0px;
  padding: 0px;
  font-family: 'Lato', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size:18px;
}
header{
  margin: 0;
  padding: 115px 0 0;
  background-color: #EDEDED;
  text-align:center;
  overflow:auto;
}

header h1 {
  font-size: 50px;
  padding:0;
  margin:10px 0 90px;
  color: #000;
}

h1, h2, h3, h4{
  font-family: 'Lato', sans-serif;
  font-style: normal;
  font-weight: 700;
  color:#000;
}

h4 {
  font-size: 14px;
  color: #C7C7C6;
  font-weight: 500;
  margin: 0;
}

div.container{
    padding: 0px;
    margin:0;
}

div#repeating_graph_wrappper{
	background-image: url('../img/stats.png');
	background-position:center;
	background-repeat:no-repeat;
	height:816px;
  min-width:769px;
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
    only screen and (-o-min-device-pixel-ratio: 3/2),
    only screen and (min--moz-device-pixel-ratio: 1.5),
    only screen and (min-device-pixel-ratio: 1.5) {
	div#repeating_graph_wrappper{
		background-image: url('../img/stats@2x.png');
		background-size: 1600px 816px;
	}
}


div#repeating_graph_inner{
	position: relative; width: 100%; margin: 0 auto; padding: 0; max-width:940px;
}

div#download-button-top{
    float:right; 
    margin-top:16px
}

div#repeat_text_wrap{
	width: 410px;
	padding-top:13%;
    margin-left:80px;
}

div#repeat_text_wrap h3{
    font-style: normal;
    font-weight: 700;
    font-size:20px;
}

div#repeat_text_wrap p{
    font-size:16px;
    line-height: 1.6;
}

div#info{
  width:820px;
  margin:0 auto 80px;
  text-align:center;
}

div#info p{
  width:635px; 
  margin:80px auto 50px;
  padding:0;
}

div#info a{
  display: block;
  margin-bottom:115px;
}

div.tout{
	height:280px;
  width:820px;
  margin:0 auto 20px;
}

div#stats-tout{
	height:817px;
}

div.tout-img{
	width:280px;
	float:left;
}

div.right-tout div.tout-img{
	float:right;
}

div.right-tout div.tout-text-wrap{
    padding-left:20px;
}

div.left-tout div.tout-text-wrap{
    padding-right:20px;
    float:right;
}

div.tout-text-wrap{
	width:470px;
	height:280px;
	float:left;
	position:relative;
}

div.tout-text-inner{
	display: table-cell;
  vertical-align: middle;
	height:280px;
}

div.tout-text-inner h3{
  font-style: normal;
  font-weight: 700;
  font-size:20px;
}

div.tout-text-inner p{
  font-size:16px;
  line-height: 1.6;
}

footer{
  margin-top: 95px;
	text-align:center;
  background-color: #EDEDED;
  padding-top: 95px;
  padding-bottom:85px;
}

footer h2{
	margin: 28px 0 40px;
  font-size:30px;
  font-style: normal;
  font-weight: 400;
  color:#000;
}

footer ul{
	margin: 0;
  padding: 125px 0 0 0px;
}

footer li{
	display: inline;
	list-style-type: none;
  padding-right: 20px;
  font-style: normal;
  font-weight: 700;
  font-size:20px;
}

footer li:last-of-type{
  padding-right: 0px;
}

footer li a{
	text-decoration:none;
	color:#4D5051;
    
}

footer li a:hover{
	text-decoration:underline;
}

#alt-stats {
  display:none;
}

div.right-tout div.tout-img-alt{
  display:none;
}

/* ==========================================================================
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;}
/*
* Clearfix:contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* `contenteditable` attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.clearfix:before,
.clearfix:after{content:" ";/* 1 */
display:table;/* 2 */}
.clearfix:after{clear:both;}
/*
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.clearfix{*zoom:1;}
/* ==========================================================================
EXAMPLE Media Queries for Responsive Design.
These examples override the primary ('mobile first') styles.
Modify as content requires.
========================================================================== */
@media only screen and (max-width: 769px){
  header{
    padding: 15px 20px 0;
  }
  
  header h1 {
    font-size: 30px;
    margin: 10px 0 40px;
  }
  
  #hero_img {
    width:100%;
    height:auto;
  }
   div#info {
     width:100%;
   }
   div#info p{
     width:100%;
     margin: 30px auto 30px;
   }
   
   div#info a {
     margin-bottom: 35px;
   }
   
   div.tout {
     width:90%;
     height:auto;
     margin: 0 auto 60px;
   }
   #repeating_graph_wrappper {
     display:none;
   }
   #featured_image {
     width:90%;
     height:auto;
   }
   div.tout-text-wrap {
     width:100%;
     height: auto;
   }
   
   div.tout-img {
     float:none;
     margin: 0 auto;
     width: 100%;
     text-align:center;
   }
   
   div.right-tout div.tout-img {
     float:none;
     display:none;
   }
   
   div.left-tout div.tout-text-wrap{
     padding-right:0px;
     float:none;
     width: 100%;
     margin: 0 auto;
   }
   
   div.right-tout div.tout-text-wrap {
     padding-left: 0px;
     width: 100%;
     margin: 0 auto;
   }
   
   div.tout img {
     width: 250px !important;
     height: auto !important;
   }
   
   div.right-tout div.tout-img-alt {
     float:none;
     display:block !important;
   }
   
   #alt-stats {
     display:block !important;
   }
   
   div.tout-text-inner{
   	display: block;
     vertical-align: middle;
   	height:auto;
   }
   
   footer{
     margin-top: 35px;
     padding-top: 35px;
     padding-bottom:25px;
   }
   
   footer h2{
   	 margin: 28px 0 40px;
     font-size:30px;
   }
   
   footer ul{
     padding: 45px 0 0 0px;
   }
   
   div.tout-text-inner h3{
     text-align:center;
   }
   
   div.tout-text-inner p{
     text-align:center;
   }
}
/* ==========================================================================
Print styles.
Inlined to avoid required HTTP connection:h5bp.com/r
========================================================================== */
@media print{*{background:transparent !important;color:#000 !important;/* Black prints faster:h5bp.com/s */
box-shadow:none !important;text-shadow:none !important;}
a,
a:visited{text-decoration:underline;}
a[href]:after{content:" (" attr(href) ")";}
abbr[title]:after{content:" (" attr(title) ")";}
/*
* Don't show links for images,or javascript/internal links
*/
.ir a:after,
a[href^="javascript:"]:after,
a[href^="#"]:after{content:"";}
pre,
blockquote{border:1px solid #999;page-break-inside:avoid;}
thead{display:table-header-group;/* h5bp.com/t */}
tr,
img{page-break-inside:avoid;}
img{max-width:100% !important;}
@page{margin:0.5cm;}
p,
h2,
h3{orphans:3;widows:3;}
h2,
h3{page-break-after:avoid;}
}