/* CSS Document */

html {
	box-sizing: border-box;
}
*, *:before, *:after {
	box-sizing: inherit;
}
.nobottom { margin-bottom: 0 }


/* HEADER */

.header {
	background: #FFF;
	border-bottom: 1px solid #CCC;
	padding: 15px 0 15px 0; 
	color: #000; 
	position: fixed; 
	overflow: auto;
	height: 70px;
}
.logo {
	height: 40px;
}
.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 }

.padding30 { padding:30px 0 30px 0 }
.padding30box { padding: 30px }

/* TRPOGRAPHY */

h1 {
	font-family: "franklin-gothic-urw-comp",sans-serif;
	font-size: 5em;
	text-transform: uppercase;
	line-height: 0.9em;
	color: #282B30;
}
h2 {
	font-family: "franklin-gothic-urw-comp",sans-serif;
	font-size: 4em;
	text-transform: uppercase;
	line-height: 0.8em;
	color: #282B30;
}
.pre-headline {
	text-transform: uppercase;
	letter-spacing: 0.7em;
	font-family: "franklin-gothic-urw-comp",sans-serif;
	font-weight: 100;
	font-size: 1.8em;
	opacity: 0.3;
	display: block;
}
.commentary {
	font-family: "omnes-pro",sans-serif;
	font-size: 1.4em;
	font-weight: 300;
	letter-spacing: 0.03em;
	opacity: 0.7;
	clear: both;
}
.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 }

.investment {
	background: -moz-linear-gradient(45deg,  #FF7474 0%, #F74CA0 100%);
	background: -webkit-linear-gradient(45deg,  #FF7474 0%,#F74CA0 100%);
	background: linear-gradient(45deg,  #FF7474 0%,#F74CA0 100%); 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF7474', endColorstr='#F74CA0',GradientType=1 );
	border: 10px solid #282B30;
	color: #FFF;
	font-weight: bolder;
	padding: 30px;
	font-family: "franklin-gothic-urw-comp",sans-serif;
	font-size: 4em;
	letter-spacing: 0.05em;
	margin: 0 auto;
	margin-top: 60px;
	width: 400px;
}
.checklist-item {
	background-image: url(../img/checklist.png);
	background-repeat: no-repeat;
	background-size: 40px;
	background-position: 0px 0px;
	padding: 0 0 0 45px;
	font-family: "omnes-pro",sans-serif;
	font-size: 1.2em;
	line-height: 1.5em;
	margin-bottom: 30px;
}
.cta-button {
	background-color: #5ED699;
	padding: 20px;
	font-family: "franklin-gothic-urw-comp",sans-serif;
	font-size: 2em;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #FFF;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px; /* future proofing */
	-khtml-border-radius: 8px; /* for old Konqueror browsers */
	margin: 50px 0 50px 0;
	transition: all 0.3s ease;
}
.cta-button:hover { background-color: #66E9A8 }
.cta-button:active { opacity: 0.7; margin-top: 52px }


/* 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-covers { width: 80%; float: right; margin-top: 50px }
.img-video { width: 80%; float: left; margin-top: 50px }
.img-livechat { width: 80%; float: right; margin-top: 50px }
.img-printing { width: 80%; float: left; margin-top: 50px }
.img-pages { width: 80%; float: right; margin-top: 50px }
.img-chart-left { width: 90%; float: left; margin-top: 100px }
.img-chart-right { width: 90%; float: right; margin-top: 100px }


/* 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;
}
progress::-webkit-progress-bar {
  background-color: transparent;
}

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

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



/* PRICING AVERAGES */

.block {
	color: #FFF;
	margin-top: 100px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px; /* future proofing */
	-khtml-border-radius: 20px; /* for old Konqueror browsers */
	background-color: #FFF;
}
.block-padding { padding: 50px 30px 0px 30px }

.block-pre-headline {
	text-transform: uppercase;
	letter-spacing: 0.7em;
	font-family: "franklin-gothic-urw-comp",sans-serif;
	font-weight: 100;
	font-size: 1.4em;
	opacity: 0.6;
}


.block.web {
	transform: scale(0.9);
	background: -moz-linear-gradient(45deg,  #00E9DB 0%, #5B79ED 100%);
	background: -webkit-linear-gradient(45deg,  #00E9DB 0%,#5B79ED 100%);
	background: linear-gradient(45deg,  #00E9DB 0%,#5B79ED 100%); 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00E9DB', endColorstr='#5B79ED',GradientType=1 );
}
.block.media {
	transform: scale(0.9);
	background: -moz-linear-gradient(45deg,  #FF7474 0%, #F74CA0 100%);
	background: -webkit-linear-gradient(45deg,  #FF7474 0%,#F74CA0 100%);
	background: linear-gradient(45deg,  #FF7474 0%,#F74CA0 100%); 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF7474', endColorstr='#F74CA0',GradientType=1 );
}
.block.pro {
	transform: scale(0.9);
	background: -moz-linear-gradient(45deg,  #36DE9A 0%, #25B0B3 100%);
	background: -webkit-linear-gradient(45deg,  #36DE9A 0%,#25B0B3 100%);
	background: linear-gradient(45deg,  #36DE9A 0%,#25B0B3 100%); 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#36DE9A', endColorstr='#25B0B3',GradientType=1 );
}





/* 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: #282B30 }
.background.alt { background: #EEEEEE; color: #282B30 }
.background.black { background: #282B30; color: #FFF }

.linebreak.one { 
	background: -moz-linear-gradient(45deg,  #00E9DB 0%, #5B79ED 100%);
	background: -webkit-linear-gradient(45deg,  #00E9DB 0%,#5B79ED 100%);
	background: linear-gradient(45deg,  #00E9DB 0%,#5B79ED 100%); 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00E9DB', endColorstr='#5B79ED',GradientType=1 );
}
.linebreak.two { 
	background: -moz-linear-gradient(45deg,  #FF7474 0%, #F74CA0 100%);
	background: -webkit-linear-gradient(45deg,  #FF7474 0%,#F74CA0 100%);
	background: linear-gradient(45deg,  #FF7474 0%,#F74CA0 100%); 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF7474', endColorstr='#F74CA0',GradientType=1 );
}
.linebreak.three { 
	background: -moz-linear-gradient(45deg,  #592880 0%, #15B1CF 100%);
	background: -webkit-linear-gradient(45deg,  #592880 0%,#15B1CF 100%);
	background: linear-gradient(45deg,  #592880 0%,#15B1CF 100%); 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#592880', endColorstr='#15B1CF',GradientType=1 );
}
.linebreak.four { 
	background: -moz-linear-gradient(45deg,  #36DE9A 0%, #25B0B3 100%);
	background: -webkit-linear-gradient(45deg,  #36DE9A 0%,#25B0B3 100%);
	background: linear-gradient(45deg,  #36DE9A 0%,#25B0B3 100%); 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#36DE9A', endColorstr='#25B0B3',GradientType=1 );
}
.linebreak.five { 
	background: -moz-linear-gradient(45deg,  #ED29C5 0%, #6191ED 100%);
	background: -webkit-linear-gradient(45deg,  #ED29C5 0%,#6191ED 100%);
	background: linear-gradient(45deg,  #ED29C5 0%,#6191ED 100%); 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ED29C5', endColorstr='#6191ED',GradientType=1 );
}
.linebreak.six { 
	background: -moz-linear-gradient(45deg,  #FBD383 0%, #F5837F 100%);
	background: -webkit-linear-gradient(45deg,  #FBD383 0%,#F5837F 100%);
	background: linear-gradient(45deg,  #FBD383 0%,#F5837F 100%); 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBD383', endColorstr='#F5837F',GradientType=1 );
}





.background.seven { 
	background: -moz-linear-gradient(45deg,  #732766 0%, #462462 100%);
	background: -webkit-linear-gradient(45deg,  #732766 0%,#462462 100%);
	background: linear-gradient(45deg,  #732766 0%,#462462 100%); 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#732766', endColorstr='#462462',GradientType=1 );
}
.background.eight { 
	background: -moz-linear-gradient(45deg,  #422463 0%, #222361 100%);
	background: -webkit-linear-gradient(45deg,  #422463 0%,#222361 100%);
	background: linear-gradient(45deg,  #422463 0%,#222361 100%); 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#422463', endColorstr='#222361',GradientType=1 );
}
.background.nine { 
	background: -moz-linear-gradient(45deg,  #102360 0%, #225674 100%);
	background: -webkit-linear-gradient(45deg,  #102360 0%,#225674 100%);
	background: linear-gradient(45deg,  #102360 0%,#225674 100%); 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#102360', endColorstr='#225674',GradientType=1 );
}
.background.ten { 
	background: -moz-linear-gradient(45deg,  #245B76 0%, #368B89 100%);
	background: -webkit-linear-gradient(45deg,  #245B76 0%,#368B89 100%);
	background: linear-gradient(45deg,  #245B76 0%,#368B89 100%); 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#245B76', endColorstr='#368B89',GradientType=1 );
}
.background.eleven { 
	background: -moz-linear-gradient(45deg,  #38918B 0%, #4AC19E 100%);
	background: -webkit-linear-gradient(45deg,  #38918B 0%,#4AC19E 100%);
	background: linear-gradient(45deg,  #38918B 0%,#4AC19E 100%); 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#38918B', endColorstr='#4AC19E',GradientType=1 );
}
.background.twelve { 
	background: -moz-linear-gradient(45deg,  #4CC7A1 0%, #5EF9B4 100%);
	background: -webkit-linear-gradient(45deg,  #4CC7A1 0%,#5EF9B4 100%);
	background: linear-gradient(45deg,  #4CC7A1 0%,#5EF9B4 100%); 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4CC7A1', endColorstr='#5EF9B4',GradientType=1 );
}


/* 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: 100% }
.container-small { width: 100%; min-width: 90%; }
	
.background {
	padding: 100px 0 100px 0;
}	
	
	
h1 { font-size: 2.8em}
h2 { font-size: 2em}

.pre-headline { font-size: 1.2em }
.right { text-align: left }
.img-covers { width: 100%; margin-top: 50px; margin-bottom: 0px }
.img-video { width: 100%; margin-top: 0px; margin-bottom: 50px }
.img-livechat { width: 100%; margin-top: 50px }
.img-printing { width: 100%; margin-top: 0px; margin-bottom: 50px }
.img-pages { width: 100%; margin-top: 50px }
.img-chart-left { width: 100%; margin-top: 50px }
.img-chart-right { width: 100%; margin-top: 50px }	
	
.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-family: "omnes-pro",sans-serif;
	font-size: 1em;
	line-height: 1.7em;
	margin-bottom: 30px;
}
.mobile-hide { display: none }
}
.title-link { 
	padding-bottom: 2px; 
	line-height: 1.8em;
}