/* Global Styles */

html,
body {
  height: 100%;
  width: 100%;
font-family: 'Roboto', sans-serif;
	background-repeat: repeat-x;
	background-attachment: scroll;
}

.vert-text {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}




/* Full Page Image Header Area */

.header {
 display: table;
 height: 100%;
 width: 100%;
 position: relative;
 color: #ffffff;
}

.parallax{
	overflow: hidden;
}


/* Footer */

footer {
  padding: 100px 0;
}

.top-scroll {
  margin-top: 50px;
}

.top-scroll a {
  text-decoration: none;
  color: inherit;
}

i.scroll {
  color: #333333;
}

i.scroll:hover {
  color: #0a5175;
}

.footernote{
	color: #9a9a9a;
}




/* Responsive */

.down{
	color: #ffffff;
}

.explore{
	color: #ffffff;
	font-family: 'Roboto', sans-serif;
	font-weight: 200;
}

.date{
color: #ffffff;
	font: 1em 'Roboto', sans-serif;
	font-weight: 400;
	margin-bottom: -20px;
}

h2{
	font-family: 'Roboto Slab', sans-serif;
	font-weight: 400;
	text-align: left;
	margin-bottom: 20px;
	margin-top: 0;
}

h1{
	margin-right: 10%;
	margin-left: 10%;
	font-family: 'Roboto Slab', sans-serif;
	font-weight: 300;
}

.container{
}

img.hello{
	width: 90%;
	max-width: 400px;
}




/* Cloud Gradients */

.one{
	background: -webkit-linear-gradient(#2e98db, #2eaedb); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(#2e98db, #2eaedb); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(#2e98db, #2eaedb); /* For Firefox 3.6 to 15 */
	background: linear-gradient(#2e98db, #2eaedb); /* Standard syntax */
}

.two{
	background: -webkit-linear-gradient(#2eaedb, #2ec1dc); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(#2eaedb, #2ec1dc); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(#2eaedb, #2ec1dc); /* For Firefox 3.6 to 15 */
	background: linear-gradient(#2eaedb, #2ec1dc); /* Standard syntax */	
}

.three{
	background: -webkit-linear-gradient(#2ec1dc, #2ed6dc); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(#2ec1dc, #2ed6dc); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(#2ec1dc, #2ed6dc); /* For Firefox 3.6 to 15 */
	background: linear-gradient(#2ec1dc, #2ed6dc); /* Standard syntax */
}

.four{
	background: -webkit-linear-gradient(#2ed6dc, #2fe8dd); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(#2ed6dc, #2fe8dd); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(#2ed6dc, #2fe8dd); /* For Firefox 3.6 to 15 */
	background: linear-gradient(#2ed6dc, #2fe8dd); /* Standard syntax */
}

.five{
	background: -webkit-linear-gradient(#2fe8dd, #31fcde); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(#2fe8dd, #31fcde); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(#2fe8dd, #31fcde); /* For Firefox 3.6 to 15 */
	background: linear-gradient(#2fe8dd, #31fcde); /* Standard syntax */
}

.six{
	background: -webkit-linear-gradient(#31fcde, #30fbbb); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(#31fcde, #30fbbb); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(#31fcde, #30fbbb); /* For Firefox 3.6 to 15 */
	background: linear-gradient(#31fcde, #30fbbb); /* Standard syntax */
}

.seven{
	background: -webkit-linear-gradient(#30fbbb, #2ee79b); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(#30fbbb, #2ee79b); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(#30fbbb, #2ee79b); /* For Firefox 3.6 to 15 */
	background: linear-gradient(#30fbbb, #2ee79b); /* Standard syntax */
}

.eight{	
	background: -webkit-linear-gradient(#2ee79b, #1fcf8b); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(#2ee79b, #1fcf8b); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(#2ee79b, #1fcf8b); /* For Firefox 3.6 to 15 */
	background: linear-gradient(#2ee79b, #1fcf8b); /* Standard syntax */
}

.nine{
	background: -webkit-linear-gradient(#1fcf8b, #1fa48b); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(#1fcf8b, #1fa48b); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(#1fcf8b, #1fa48b); /* For Firefox 3.6 to 15 */
	background: linear-gradient(#1fcf8b, #1fa48b); /* Standard syntax */
}

.ten{
	background: -webkit-linear-gradient(#1fa48b, #11a48b); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(#1fa48b, #11a48b); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(#1fa48b, #11a48b); /* For Firefox 3.6 to 15 */
	background: linear-gradient(#1fa48b, #11a48b); /* Standard syntax */
}

.eleven{
	background: -webkit-linear-gradient(#11a48b, #11968b); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(#11a48b, #11968b); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(#11a48b, #11968b); /* For Firefox 3.6 to 15 */
	background: linear-gradient(#11a48b, #11968b); /* Standard syntax */
}

.twelve{
	background: -webkit-linear-gradient(#11968b, #117466); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(#11968b, #117466); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(#11968b, #117466); /* For Firefox 3.6 to 15 */
	background: linear-gradient(#11968b, #117466); /* Standard syntax */
}


img.logo{
	width: 59%;
	max-width: 300px;
}

.text{
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	display: block;
	text-align: left;
}

.cloud{
	width: 90%;
}

.description{
	line-height: 1.2em;
	font-size: 1.2em;
	font-family: 'Roboto', sans-serif;
	font-weight: 200;
}


.container{
	width: 100%;
}

a{
	color: #d3d3d3;
	text-decoration: none;
}

a:hover{
	color: #d1d1d1;
	text-decoration: none;
}

.icons{
	width: 59%;
	margin-left: auto;
	margin-right: auto;
	max-width: 300px;
	text-align: center;
	width: 100%;
	display: block;
	padding-left: 38px;
}

img.cloudicon{
	width: 84px;
}

.title{
	text-align: center;
}

.scene{
	margin: 0;
	padding: 0;
}

.scene2{
	overflow: none;
	margin-right: 280px;
}

.bg1{
	margin-left: 80px;
	opacity: 0.20;
	position: absolute;
	width: 100px;
	margin-top: -310px;
	filter: blur(2.5px);
	-webkit-filter: blur(2.5px);
	-moz-filter: blur(2.5px);
	-o-filter: blur(2.5px);
	-ms-filter: blur(2.5px);
		pointer-events: none;
}

.bg2{
	opacity: 0.44;
	position: absolute;
	margin-top: 20px;
	width: 200px;
	margin-left: -90px;
	filter: blur(2.5px);
	-webkit-filter: blur(2.5px);
	-moz-filter: blur(2.5px);
	-o-filter: blur(2.5px);
	-ms-filter: blur(2.5px);
		pointer-events: none;
}

.bg3{
	opacity: 0.60;
	position: absolute;
	margin-top: -10px;
	margin-left: 340px;
	width: 800px;
	filter: blur(1px);
	-webkit-filter: blur(1px);
	-moz-filter: blur(1px);
	-o-filter: blur(1px);
	-ms-filter: blur(1px);
	z-index: 1000;
		pointer-events: none;
		overflow: hidden;
}

.bg4{
	opacity: 0.80;
	position: absolute;
	margin-top: -420px;
	width: 500px;
	margin-left: -90px;
	pointer-events: none;

}

.explore{
	z-index: 1001;
	font-size: 2em;
}

.flavour{
	text-align: center;
}

.c1{
	margin-top: 200px;
	margin-left: 200px;
}

.c2{
	margin-top: 280px;
	margin-left: -230px;
}
.c3{
	margin-top: -90px;
}

.c4{
	margin-top: 120px;
	margin-left: 350px;
}
.c5{
	margin-top: 120px;
	margin-left: -320px;
}
.c6{
	margin-top: 170px;
	margin-left: 140px;
}
.c7{
	margin-top: 20px;
	margin-left: 140px;
}

.c8{
	margin-top: 150px;
	margin-left: -60px;
}

.c9{
	margin-top: 350px;
	margin-left: 50px;
}

.three{
	overflow: none;
}


.layer1{
	width: 60px;
}




/*  SECTIONS  ============================================================================= */

.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  GROUPING  ============================================================================= */


.group:before,
.group:after {
    content:"";
    display:table;
}
.group:after {
    clear:both;
}
.group {
    zoom:1; /* For IE 6/7 (trigger hasLayout) */
}

/*  GRID COLUMN SETUP   ==================================================================== */

.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}

.col:first-child { margin-left: 0; } /* all browsers except IE6 and lower */


/*  REMOVE MARGINS AS ALL GO FULL WIDTH AT 480 PIXELS */

@media only screen and (max-width: 480px) {
	.col { 
		margin: 1% 0 1% 0%;
	}
}


/*  GRID OF THREE   ============================================================================= */

	
.span_3_of_3 {
	width: 100%; 
}

.span_2_of_3 {
	width: 66.13%; 
}

.span_1_of_3 {
	width: 32.26%; 
}


/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
	.span_3_of_3 {
		width: 100%; 
	}
	.span_2_of_3 {
		width: 100%; 
	}
	.span_1_of_3 {
		width: 100%;
	}
}

/*  GRID OF FIVE   ============================================================================= */

	
.span_5_of_5 {
	width: 100%;
}

.span_4_of_5 {
  	width: 79.68%; 
}

.span_3_of_5 {
  	width: 59.36%; 
}

.span_2_of_5 {
  	width: 39.04%;
}

.span_1_of_5 {
  	width: 18.72%;
}


/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
	.span_5_of_5 {
		width: 100%; 
	}
	.span_4_of_5 {
		width: 100%; 
	}
	.span_3_of_5 {
		width: 100%; 
	}
	.span_2_of_5 {
		width: 100%; 
	}
	.span_1_of_5 {
		width: 100%; 
	}
}


@media (max-width: 768px) {	



.bg1{
	margin-left: 50px;
	opacity: 0.20;
	position: absolute;
	width: 80px;
	margin-top: -220px;
}

.bg2{
	opacity: 0.44;
	position: absolute;
	margin-top: 90px;
	width: 120px;
	margin-left: -30px;
}

.bg3{
	opacity: 0.60;
	position: absolute;
	margin-top: -80px;
	margin-left: 320px;
	width: 200px;
filter: blur(1px);
-webkit-filter: blur(1px);
-moz-filter: blur(1px);
-o-filter: blur(1px);
-ms-filter: blur(1px);
	z-index: 1000;
	overflow: hidden;
}

.bg4{
	opacity: 0.80;
	position: absolute;
	margin-top: -220px;
	width: 200px;
	margin-left: -100px;
}

  h1{
  	margin-right: 20px;
  	margin-left: 20px;
  	padding: 0;
  	margin: 0;
  	font-size: 1 em;
  	font-weight: 300;
  	
  }
  
  img.cloud{
  	width: 90%;
  	margin-bottom: 20px;
  	margin-top: 8px;
  }
  
  .explanation{
  	font-size: 2em;
  }
  
  .description{
  	font-size: 1em;
  }
  
  
.c1{
	margin-top: -220px;
	margin-left: 20px;
	margin-right: -160px;
}

.c2{
	margin-top: 180px;
	margin-left: -30px;
}
.c3{
	margin-top: 60px;
}

.c4{
	margin-top: -120px;
	margin-left: -60px;
}
.c5{
	margin-top: -240px;
	margin-left: 30px;
}
.c6{
	margin-top: 210px;
	margin-left: 140px;
}
.c7{
	margin-top: 20px;
	margin-left: 140px;
}

.c8{
	margin-top: 150px;
	margin-left: 60px;
}

.c9{
	margin-top: 110px;
	margin-left: 170px;
}

img.cloudicon{
	width: 54px;
}
  
  
}

@media (max-width: 480px) {	
img.cloud{
	width: 40%;
	margin-bottom: 20px;
	margin-top: 20px;
}
}