/* CSS Document */

html {
	box-sizing: border-box;
}
*, *:before, *:after {
	box-sizing: inherit;
}
body { background-color: #181C25; font-family: arboria, sans-serif }
.nobottom { margin-bottom: 0 }
.container { width: 800px; max-width: 100% }
.container-full { width: 100% }

/* HEADER */

.header {
	background: #181C25;
	padding: 15px; 
	color: #FFF; 
	position: fixed; 
	overflow: auto;
	width: 100%;
	left: 0;
}
.logo { height: 30px }
.title-logo { width: 100%; margin: 50px 0 50px 0 }

.center { text-align: center; margin: 0 auto }
.right { text-align: right; float: right }
.left { text-align: left }
.no-ul { text-decoration: none }
.half { width: 50%; float: left }
.padding30 { padding:30px 0 30px 0 }
.padding30box { padding: 30px }
.padding90 { padding: 90px 0 170px 0 }
.desktop-hide { display: none }

.signupbox {
	width: 100%;
	padding: 20px;
	background-color: #FFF;
	font-size: 1.2em;
	font-weight: 700;
	color: #181C25;
	position: fixed;
	bottom: 0;
	text-align: center;
}
.summary {
	background-color: #FFBC42;
	width: 100%;
	color: #181C25;
	font-size: 1em;
	font-weight: 700;
	padding: 15px;
	margin-top: 30px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px; /* future proofing */
	-khtml-border-radius: 4px; /* for old Konqueror browsers */
}

/* TRPOGRAPHY */

h1 {
	font-family: arboria, sans-serif;
	font-size: 2.3em;
	font-weight: 400;
	line-height: 1.2em;
	color: #FFF;
	margin-top: 0;
}
h2 {
	font-family: arboria, sans-serif;
	font-size: 1.8em;
	font-weight: 400;
	line-height: 1.2em;
	color: #FFF;
}
a { color: #E93A5E; transition: all 0.3s ease; }
a:hover { color: #ed5373 }

.section-number {
	letter-spacing: -0.05em;
	font-family: arboria, sans-serif;
	font-weight: 700;
	font-size: 8em;
	color: #21252F;
	display: block;
	margin: -45px 0 20px -10px;
}
.commentary {
	font-family: arboria, sans-serif;
	font-size: 1.1em;
	font-weight: 300;
	line-height: 1.6em;
	letter-spacing: 0.05em;
	color: #A9B5CA;
}
.microcopy { font-size: 0.9em; margin-top: 40px; opacity: 0.7 }
.light { color: #FFF }
.title-link { 
	color: #786991; 
	transition: all 0.3s ease; 
	padding-bottom: 5px; 
	border-bottom: 3px solid #786991; 
}
.title-link:hover { color: #A792CD; padding-bottom: 5px; border-bottom: 3px solid #A792CD }

.checklist {
	background-image: url("../img/tick.png");
	background-color: #21252F;
	background-repeat: no-repeat;
	background-size: 40px;
	background-position: 15px 15px;
	padding: 20px 15px 20px 70px;
	font-family: arboria, sans-serif;
	font-size: 1.2em;
	color: #FFF;
	line-height: 1.5em;
	margin-top: 20px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px; /* future proofing */
	-khtml-border-radius: 8px; /* for old Konqueror browsers */
}
.cta-button {
	background-color: #E93A5E;
	padding: 10px 10px 12px 10px;
	font-family: arboria, sans-serif;
	font-size: 0.9em;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #FFF;
	width: 200px;
	display: inline-block;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px; /* future proofing */
	-khtml-border-radius: 4px; /* for old Konqueror browsers */
	margin: 0 auto;
	margin-left: 20px;
	transition: all 0.3s ease;
}
.cta-button:hover { background-color: #ed5373 }
.cta-button:active { background-color: #F1758F }

.cta-button-big {
	background-color: #FFF;
	padding: 15px 30px 17px 30px;
	font-family: arboria, sans-serif;
	text-align: center;
	font-size: 1.3em;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #E93A5E;
	width: 300px;
	display: inline-block;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px; /* future proofing */
	-khtml-border-radius: 4px; /* for old Konqueror browsers */
	margin-top: 20px;
	transition: all 0.3s ease;
	opacity: 0.8
}
.cta-button-big:hover { opacity: 1 }
.cta-button-big:active { opacity: 0.3 }


/* SOCIAL TAB */

.socialtab {
	background: #FFF;
	border: 1px solid #EEE;
	border-left: none;
	padding: 15px;
	left: 0;
	top: 250px;
	position: fixed;
	-moz-border-radius-topleft: 0px;
	-moz-border-radius-topright: 8px;
	-moz-border-radius-bottomright: 8px;
	-moz-border-radius-bottomleft: 0;
	-webkit-border-top-left-radius: 0px;
	-webkit-border-top-right-radius: 8px;
	-webkit-border-bottom-right-radius: 8px;
	-webkit-border-bottom-left-radius: 0;
	opacity: 0.3;
	transition: all 0.3s ease;
}
.socialtab:hover { opacity: 1 }



/* IMAGES */

.img-report { width: 90% }
.img-report.left { float: left }
.img-report.right { float: right }

.img-report.one { margin-top: 140px }
.img-report.two { margin-top: 140px }
.img-report.three { margin-top: 140px }
.img-report.four { margin-top: 140px }
.img-report.five { margin-top: 140px }
.img-report.six { margin-top: 140px }
.img-report.seven { margin-top: 140px }
.img-report.eight { margin-top: 140px }
.img-report.nine { margin-top: 140px }
.img-report.ten { margin-top: 140px }
.img-report.eleven { margin-top: 140px }
.img-report.twelve { margin-top: 140px }
.img-report.thirteen { margin-top: 140px }
.img-report.fourteen { margin-top: 140px }
.img-report.fifteen { margin-top: 140px }
.img-report.sixteen { margin-top: 140px }


/* PROGRESS */ 

.progress-link {
	font-size: 0.95em;
	color: #FFF;
	line-height: 2.8em;
	opacity: 0.5;
}
.progress-link.active {
	color: #FFF;
	font-weight: bold;
	opacity: 1
}

/* PROGRESS BAR */

progress {
  /* Positioning */
  position: fixed;
  left: 0;
  top: 0;

  /* Dimensions */
  width: 100%;
  height: 8px;

  /* Reset the appearance */
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;

  /* Get rid of the default border in Firefox/Opera. */
  border: none;

  /* Progress bar container for Firefox/IE10+ */
  background-color: transparent;

  /* Progress bar value for IE10+ */
  color: #5ED699;
  z-index:1;
}
progress::-webkit-progress-bar {
  background-color: transparent;
}

progress::-webkit-progress-value {
  background-color: #5ED699;
}

progress::-moz-progress-bar {
  background-color: #5ED699;
}




/* BACKGROUND COLOURS */

.linebreak {
	height: 10px;
	width: 20%;
	margin: 0 0 50px 0;
	display: inline-block;
}

.background {
	min-height: 100vh;
	color: #FFF;
	padding: 170px 0 100px 0;
}

.background.white { background: #FFFFFF; color: #181C25 }
.background.alt { background: #E3E6ED; color: #181C25 }
.background.black { background: #181C25; color: #FFF }

.report-cover {
	background: url(../img/cover.png) no-repeat bottom center; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-color: #E93A5E; 
	color: #FFF;
	height: 100vh;
}


/* Media Queries */

/* iPhone */

@media screen and (max-width: 640px) and (max-width: 1136px) {

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
	width: 100%;
	overflow: auto;
}
.container { width: 90% }
.container-full { width: 100%; margin: 0 auto }
.container-small { width: 100%; min-width: 90%; }
.half { width: 100% }
.background {
	min-height: 100vh;
	padding: 50px 0 50px 0;
}
	
h1 { font-size: 2em}
h2 { font-size: 1.7em}

.section-number { font-size: 8em; margin: 0px 0 20px -10px }
.right { text-align: left }

.img-report { width: 100% }
.img-report.one { margin: 60px 0 100px 0 }
.img-report.two { margin: 60px 0 100px 0 }
.img-report.three { margin: 60px 0 100px 0 }
.img-report.four { margin: 60px 0 100px 0 }
.img-report.five { margin: 60px 0 100px 0 }
.img-report.six { margin: 60px 0 100px 0 }
.img-report.seven { margin: 60px 0 100px 0 }
.img-report.eight { margin: 60px 0 100px 0 }
.img-report.nine { mmargin: 60px 0 100px 0 }
.img-report.ten { margin: 60px 0 100px 0 }
.img-report.eleven { margin: 60px 0 100px 0 }
.img-report.twelve { margin: 60px 0 100px 0 }
.img-report.thirteen { margin: 60px 0 100px 0 }
.img-report.fourteen { margin: 60px 0 100px 0 }
.img-report.fifteen { margin: 60px 0 100px 0 }
.img-report.sixteen { margin: 60px 0 100px 0 }
	
.title-logo { width: 100%; margin: 50px 0 50px 0 }
.linebreak { width: 40%; margin: 0 0 50px 0 }
.investment {
	border: 5px solid #282B30;
	padding: 30px 0 30px 0;
	font-size: 2.5em;
	text-align: center;
	margin-top: 60px;
	width: 100%;
}
.block { margin-top: 30px }
.block-padding { padding: 30px 20px 0px 20px }
.block-pre-headline { letter-spacing: 0.3em; font-size: 1.2em;}

.block.web { transform: scale(1) }
.block.media { transform: scale(1) }
.block.pro { transform: scale(1) }

.checklist-item {
	background-size: 40px;
	padding: 0 0 0 45px;
	font-size: 1em;
	line-height: 1.7em;
	margin-bottom: 30px;
}
.mobile-hide { display: none }
.desktop-hide { display: block }
.title-link { padding-bottom: 2px; line-height: 1.8em }
.signup-box { font-size: 10px } 


}