/*
font-family: 'Bitter', serif;
300,400,500,700
font-family: jaf-bernina-sans, sans-serif;
400,700
   */


html,
body {
  margin: 0;
  height: 100%;
  color:#414042;
  font-weight: 300;
  font-family: jaf-bernina-sans, sans-serif;

}
#scroller{width:13325px;}
#notice {
	position:relative;
	text-align: center;
	width:100vw;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	background-color: rgba(0,125,185,1);
	z-index:150;
	overflow-x: hidden;
  }
  #notice p{
	  padding:10% 5% 5% 5%;
	  color:#ffffff;
  }
  #notice img{
	  text-align:center;
	  max-width:300px;
  }

.right-arrow{ width: 30px; height: 100%; background-color: red; display: block; position: fixed; bottom: 0; z-index: 99; right:0;}
.left-arrow { width: 30px; height: 100%; background-color: red; display: block; position: fixed; bottom: 0; z-index: 99; left: 0;}
.loop p{
	margin-bottom:0;
}
#backer{
	position:relative;
	width:100%;
	height:100vh;
	z-index:-1;
}
/* fixed menu */
header {
	position: fixed;
	top: 0px;
	right: 0px;
	padding: 6px 25px 10px 25px;
	border-bottom-left-radius: 26px;
	z-index: 100;
	background-color: rgba(0,0,0,0.5);
	will-change: transform;
  }
header a{
	display:-block;
	margin-left:30px;
  }
  nav a:after {
	content: '';
	display: inline-block;
	position: absolute;
	height: 20px;
	width: 2px;
	background: #ffffff;
	margin-left:15px;
	margin-right:15px;
  }
  nav a:last-child::after {
	display: none;
  }
  /* HEADINGS */
  .header-section {
	padding: 0 15px;
	text-align: center;
	margin: 40vh auto 50vh;
  }



html,
body {
  margin: 0;
  height: 100%;
  color:#414042;
  font-weight: 300;
  
}
h1, h2, h3, h4, h5, h6 p{
	font-family: 'jaf-bernina-sans', sans-serif;
}
#landing{
	background: url(../img/landing.jpg) no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
#net-zero{
	background: url(../img/adaptive-about-us.jpg) no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
#economic{
	background: url(../img/economic.jpg) no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
#environment{
	background: url(../img/environment.jpg) no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
#rgi{
	background: url(../img/rng.jpg) no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
.sidebar-content{
	position:absolute;
	top:0;
	left:0;
	width:30%;
	background-color: rgba(0,0,0,0.7);
	padding:40px;
	height:100%;
}
.wide{
	width:37vw;
}
.sidebar-content h3{
	color:#B2D235;
	font-size:2vw;
}
.sidebar-content p{
	color:#ffffff;
	font-size:1.2vw;
}
.centering {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  resize: vertical;

}
.home-nav{
	position:absolute;
	top:0;
	right:0;
	background-color:red;
	padding:10px 20px;
	font-weight:700;
	color:#ffffff;
	
}
.home-logo{
	display:block;
	max-width:220px;
	padding:40px;
	margin-left:40px;
}
.home-text{
	margin:50px 0 40px 0;
	text-align:center;
	font-size:1.7em;
	font-weight:700;
	float:left;
	color:#007DB9;
	opacity:0;
}
a {
  color: white;
  transition: color 1s ease-out;
}

.rng-link a:hover {
  color:#cccccc;
}
a:visited {
  color: white;
}
a:hover {
  color: white;
}

h1,
h2 {
  text-align: center;
}

@keyframes pulse {
  0% { box-shadow:0 0 28px #0053f9, inset 0 0 28px #0053f9; }
  50% { box-shadow:0 0 76px #0053f9, inset 0 0 76px #0053f9; }
  100% { box-shadow:0 0 28px #0053f9, inset 0 0 28px #0053f9; }
}

.big-button{
	display: flex;
	justify-content: center;
	align-items: center;
}
.rng-link {
	background: -moz-radial-gradient(center, ellipse cover,  rgba(122,226,255,1) 0%, rgba(54,170,216,1) 44%, rgba(0,125,185,1) 100%);
	background: -webkit-radial-gradient(center, ellipse cover,  rgba(122,226,255,1) 0%,rgba(54,170,216,1) 44%,rgba(0,125,185,1) 100%);
	background: radial-gradient(ellipse at center,  rgba(122,226,255,1) 0%,rgba(54,170,216,1) 44%,rgba(0,125,185,1) 100%); 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#0053f9',GradientType=1 );
	padding:20px;
	width:300px;
	height:300px;
	border:5px solid #ffffff;
	border-radius:150px;
	box-shadow: 0 0 28px #0053f9, inset 0 0 28px #0053f9;
	animation: pulse 2s linear 1s infinite;
}
.rng-link h2 {
	display:block;
	margin-top:67px;
	text-align: center;
	text-justify: inter-word;
	text-transform:uppercase;
	font-size:1.8em;
	line-height:1em;
	font-weight:700;
	color: #ffffff;
}
.home-lower{
	margin-top:90px;
	color:#ffffff;
}
.three-col-lower{
	min-height:120px;
	text-align:center;
	padding:15px;
	background: rgba(0,125,185,.6);
	border-radius:10px;
	text-transform:uppercase;
	font-weight:600;
	transition: background 1s ease-out;
	transition: box-shadow 1s ease-out;
}
.three-col-lower:hover{
	background: rgba(0,125,185,.9);
	box-shadow: 0 0 20px #B2D235;
}

.three-col-lower img{
	max-height:50px;
}

.lower-text{
	padding-top:15px;
}
.loop{
	width:100%;
}
.shadow{
	box-shadow:0 0 10px rgba(0,0,0,0.5);
}
.intro-text-section{
	position:absolute;
	top:20%;
	left:500px;
	width:44vw;
	padding:25px;
	border-radius:20px;
	text-align:center;
}
.intro-text-bubble{
	background:rgba(255,255,255,0.8);
	padding:25px;
	border-radius:20px;
	text-align:center;
	font-weight:700;
}
.intro-text-bubble h3{
	color:#007DB9;
	font-weight:400;
}

.intro-text-section h5{
	margin-top:25px;
	color:#003A5D;
	font-weight:400;
}
/* Scene one */
.scene-1-text-intro{
	position:absolute;
	padding:20px;
	top:-190px;
	left:1800px;
	width: 400px;
	height: auto;
	text-align:left;
	line-height: 80px;
	background-color:rgba(255,255,255,0.2);
	border-radius: 8px;
	color: rgba(77,77,77,1);
	font-weight: 500;
	margin-left: 20px;
	will-change: transform;
	box-shadow:0 0 10px rgba(0,0,0,0.5);
}
.scene-1-text-intro-2{
	position:absolute;
	padding:20px;
	top:-90px;
	left:2650px;
	width: 400px;
	height: auto;
	line-height: 80px;
	background-color:rgba(255,255,255,0.2);
	border-radius: 8px;
	color: rgba(77,77,77,1);
	font-weight: 500;
	margin-left: 20px;
	will-change: transform;
	box-shadow:0 0 10px rgba(0,0,0,0.5);
}
.scene-1-text-intro-2 h4{
	color:#007DB9;text-align:center!important;
}
.heavy{text-transform:uppercase;font-weight:700;}
.scene-1-text{
	position:absolute;
	padding:20px;
	top:-190px;
	left:3900px;
	width: 400px;
	height: auto;
	text-align:left;
	line-height: 80px;
	background-color:rgba(255,255,255,0.2);
	border-radius: 8px;
	color: rgba(77,77,77,1);
	font-weight: 500;
	margin-left: 20px;
	will-change: transform;
	box-shadow:0 0 10px rgba(0,0,0,0.5);;
}
.first-truck{
	position:absolute;
	bottom:100px;
	left:2800px;
	width:400px;
}

/* Scene two */
.scene-2-text{
	position:absolute;
	padding:20px;
	bottom:0px;
	left:5200px;
	width: 400px;
	height: auto;
	text-align:left;
	line-height: 80px;
	background-color:rgba(255,255,255,0.1);
	border-radius: 8px;
	color:rgba(77,77,77,.1);
	font-weight: 500;
	margin-left: 20px;
	will-change: transform;
	box-shadow:0 0 10px rgba(0,0,0,0.5);
}
.scene-2-text-2{
	position:absolute;
	padding:20px;
	top:-80px;
	left:6500px;
	width: 400px;
	height: auto;
	text-align:left;
	line-height: 80px;
	background-color:rgba(255,255,255,0.0);
	border-radius: 8px;
	color:rgba(77,77,77,.1);
	font-weight: 500;
	margin-left: 20px;
	will-change: transform;
	box-shadow:0 0 10px rgba(0,0,0,0.5);
}
.digestor{
	position:absolute;
	left:5950px;
	width:800px;
	height:80%;
	bottom:150px;
}
#scroll{
	position: fixed;
	top: 0;
	left: 20px;
	visibility:hidden;
  }
.bubble-left{
	position:absolute;
	bottom:0px;
	width:55px;
	height:55px;
	background-color:rgba(255,255,255,0.6);
	border-radius:50%;
	animation: floating-left 6s infinite ease-in-out;
}
.bubble-left:nth-child(1){
	left:10%;
	width:50px;
	height:50px;
	animation-duration:8s;
	animation-delay:1s;
}
.bubble-left:nth-child(2){
	left:20%;
	width:60px;
	height:60px;
	animation-duration:7s;
	animation-delay:.5s;
}
.bubble-left:nth-child(3){
	left:44%;
	width:50px;
	height:50px;
	animation-duration:7.5s;
	animation-delay:.25s;
}
.bubble-left:nth-child(4){
	left:64%;
	width:40px;
	height:40px;
	animation-duration:6s;
	animation-delay:.35s;
}
.bubble-left:nth-child(5){
	left:54%;
	width:50px;
	height:50px;
	animation-duration:6.5s;
	animation-delay:.15s;
}
.bubble-left:nth-child(6){
	left:31%;
	width:60px;
	height:60px;
	animation-duration:7s;
	animation-delay:.45s;
}
.bubble-left:nth-child(7){
	left:22%;
	width:48px;
	height:48px;
	animation-duration:6.25s;
	animation-delay:.17s;
}
.bubble-left:nth-child(8){
	left:56%;
	width:60px;
	height:60px;
	animation-duration:6.8s;
	animation-delay:.08s;
}
@keyframes floating-left{
	0%{bottom:50px;transform:translateX(0);opacity:0;}
	10%{opacity:.6;}
	50%{transform:translateX(100px);}
	100%{bottom:1000px;transform:translateX(-100px);}
}
.bubble-right{
	position:absolute;
	bottom:0px;
	width:55px;
	height:55px;
	background-color:rgba(255,255,255,0.6);
	border-radius:50%;
	animation: floating-right 6s infinite ease-in-out;
}
.bubble-right:nth-child(1){
	left:40%;
	width:50px;
	height:50px;
	animation-duration:7s;
	animation-delay:.5s;
}
.bubble-right:nth-child(2){
	left:20%;
	width:50px;
	height:50px;
	animation-duration:5s;
	animation-delay:.5s;
}
.bubble-right:nth-child(3){
	left:44%;
	width:50px;
	height:50px;
	animation-duration:7.5s;
	animation-delay:.25s;
}
.bubble-right:nth-child(4){
	left:64%;
	width:40px;
	height:40px;
	animation-duration:8s;
	animation-delay:.35s;
}
.bubble-right:nth-child(5){
	left:54%;
	width:50px;
	height:50px;
	animation-duration:8.5s;
	animation-delay:.15s;
}
.bubble-right:nth-child(6){
	left:31%;
	width:60px;
	height:60px;
	animation-duration:7.7s;
	animation-delay:.45s;
}
.bubble-right:nth-child(7){
	left:22%;
	width:48px;
	height:48px;
	animation-duration:8.9s;
	animation-delay:.17s;
}
.bubble-right:nth-child(8){
	left:56%;
	width:60px;
	height:60px;
	animation-duration:6.8s;
	animation-delay:.08s;
}
@keyframes floating-right{
	0%{bottom:50px;transform:translateX(0);opacity:0;}
	10%{opacity:.6;}
	50%{transform:translateX(-110px);}
	100%{bottom:1000px;transform:translateX(120px);}
}
/* Scene three */
.scene-3-text-1{
	position:absolute;
	padding:20px;
	bottom:80px;
	left:7400px;
	width: 400px;
	height:auto;
	text-align:left;
	line-height: 80px;
	background-color:rgba(255,255,255,1);
	border-radius: 8px;
	color:rgba(77,77,77,1);
	font-weight: 500;
	margin-left: 20px;
	will-change: transform;
	box-shadow:0 0 10px rgba(0,0,0,0.5);
}
.zoom-one{
	position:absolute;
	top:50px;
	left:7200px;
	width:50vw;
}
.zoom-two{
	position:absolute;
	top:50px;
	left:8350px;
	width:50vw;
}
.scene-3-text-3{
	position:absolute;
	padding:20px;
	bottom:-80px;
	left:8490px;
	width: 300px;
	height: auto;
	text-align:center;
	line-height: 80px;
	background-color:rgba(255,255,255,.1);
	border-radius: 8px;
	color:#222;
	font-weight: 500;
	margin-left: 20px;
	will-change: transform;
	box-shadow:0 0 10px rgba(0,0,0,0.5);
}
.zoom-three{
	position:absolute;
	top:50px;
	left:9800px;
	width:50vw;
}
/* Scene four */
.sun-down{
	position:absolute;
	top:60vh;
	left:12300px;
	width:250px;
	opacity:0;
}
.sun {
	position:absolute;
	top:60vh;
	left:12300px;
	width:350px;
	height:350px;
	opacity:0;
	margin: 3rem auto;
	background: radial-gradient(transparent 50%, white), radial-gradient(yellow, transparent 70%);
	-webkit-mask-image: radial-gradient(black 40%, transparent 65%);
	mask-image: radial-gradient(black 40%, transparent 65%);
	border-radius: 50%;
  }
  .sun::after, .sun::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transform-origin: center;
	border-radius: 50%;
	-webkit-mask-image: radial-gradient(black 40%, transparent 65%);
	mask-image: radial-gradient(black 40%, transparent 85%);
  }
  .sun::before {
	background: repeating-conic-gradient(from 0deg, yellow 0deg 20deg, transparent 20deg 40deg);
	animation: rotate 720s linear, scale 43s linear infinite;
  }
  .sun::after {
	background: radial-gradient(yellow, orange 27%, transparent calc(27% + 3px) 100%), radial-gradient(gold, transparent 70%), repeating-conic-gradient(from 0deg, gold 0deg 5deg, transparent 5deg 10deg);
	transform: rotate(15deg);
	animation: rotate 160s linear infinite;
  }
  
  @keyframes rotate {
	100% {
	  transform: rotate(360deg);
	}
  }
  @keyframes scale {
	0% {
	  transform: scale(1);
	}
	20% {
	  transform: scale(1.5);
	}
	40% {
	  transform: scale(0.6);
	}
	60% {
	  transform: scale(1.31);
	}
	70% {
	  transform: scale(0.89);
	}
	100% {
	  transform: scale(1);
	}
  }



.second-truck{
	position:absolute;
	bottom:100px;
	left:11000px;
	width:550px;
}
.nicor-outro{
	position:absolute;
	bottom:50px;
	left:13100px;
	width:150px;
}
.outro-text-bubble{
	position:absolute;
	top:-200px;
	left:11400px;
	width:45vw;
	color:#007DB9;
	background:rgba(255,255,255,.8);
	padding:25px;
	border-radius:20px;
	text-align:center;
	font-weight:bold;
	box-shadow:0 0 10px rgba(0,0,0,0.0);
}
.outro-text-bubble h5{color: #003A5D;font-weight:400;}
.bold{font-weight:700;}
.button-sm{
	-webkit-appearance: none;
    -moz-appearance: none;
    border-radius: 10px;;
    border-style: solid;
    border-width: 0;
    cursor: pointer;
        font-family: 'Open Sans', sans-serif;
    font-weight: normal;
    line-height: normal;
    margin: 1rem;
    position: relative;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    padding: .8rem 1.8rem .8rem 1.8rem;
    font-size: 1em;
    background-color: #007DB9;
    border-color: #007095;
    color: #FFFFFF;
    transition: background-color 300ms ease-out;
}
.button-sm:hover{
	color:#ffffff;
	background-color: #00BCF1;
}
.arrow-right {
	border: solid #003A5D;
	border-width: 0 3px 3px 0;
	display: inline-block;
	padding: 3px;
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
  }
  .loop-text{
	position:absolute;
	top:30%;
	left:13000px;
	width:15vw;
	background:rgba(255,255,255,0.8);
	padding:20px;
	border-radius:20px;
  }
  .loop-text a{
	color: #003A5D;
	font-weight:700;
  }
  .right {
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
  }
@media (min-height: 500px) and (min-width: 580px) {
    /* height settings*/
}
/*  //////////////////////////
Large screens 1800px and above
///////////////////////////////  */
@media screen and (min-width: 1800px) {
	.home-lower{
	margin-top:185px;
	color:#ffffff;
}
.home-text{
	margin:80px 0 130px 0;
	text-align:center;
	font-size:1.7em;
	font-weight:700;
	float:left;
	opacity:0;
}
}

/*  //////////////////////////
Laptops 1377px width and below
///////////////////////////////  */

/* Laptops Landing and interior pages */
@media screen and (max-width: 1377px) {
	.home-lower{
		margin-top:55px;
		color:#ffffff;
	}
		.home-text{
		margin-left:40px;
		}
		.rng-link {
			width:200px;
			height:200px;
	}
	.rng-link h2 {
		display:block;
		margin-top:27px;
		text-align: center;
		text-justify: inter-word;
		text-transform:uppercase;
		font-size:1.3em;
		line-height:1em;
		font-weight:700;
		color: #ffffff;
	}.sidebar-content p{
	font-size:1.1vw;
	}
	.home-logo{
		margin-left:130px;
	}
	.three-col-lower{
	min-height:90px;
	text-align:center;
	padding:15px;
	background: rgba(0,125,185,.6);
	border-radius:10px;
	text-transform:uppercase;
	font-weight:600;
	transition: background 1s ease-out;
	transition: box-shadow 1s ease-out;
}
	.lower-text p{
		margin-bottom:.25em;
	}
}
/*Laptops Scene one */
@media screen and (max-width: 1377px) {
	.scene-1-text-intro{
	top:-190px;
	left:1670px;
	}
	.scene-1-text-intro-2{
	top:-200px;
	left:2450px;
	}
	.scene-1-text{
	top:-220px;
	left:3700px;
	}
	.first-truck{
		bottom:75px;
		left:2650px;
	}
}
/* Laptops scene two */
@media screen and (max-width: 1377px) {
	.scene-2-text{
	bottom:-40px;
	left:5100px;
}
	.digestor{
	left:5750px;
	bottom:50px;
}
}
/* Laptops Scene three */
@media screen and (max-width: 1377px) {
	.scene-3-text-1{
	bottom:60px;
	left:7290px;
	}
	.zoom-two{
	position:absolute;
	top:50px;
	left:8050px;
	width:45vw;
	}
	.zoom-one{
	width:45vw;
	left:7170px;
	}
	.zoom-three{
	left:9700px;
	width:45vw;
	}
}
/* Laptops Scene four */
@media screen and (max-width: 1377px) {
	.second-truck{
	bottom:80px;
	left:10800px;
	width:450px;
}	
}
/* ////////////////////////////
Moble 900px width and below
///////////////////////////// */

@media screen and (max-width: 900px) {
	#scroller{width:9000px;overflow-y:hidden;}
	p{font-size:90%;}
	.three-col-lower{
	margin-bottom:35px;
	background: rgba(0,125,185,.7);
	}
.three-col-lower:hover{
	background: rgba(0,125,185,.9);
	}
	.home-logo{
		margin-left:auto;
		margin-right:auto;
	}
	.home-text{
		margin:40px 0px 40px 0px;
		font-size:1.4em;
	}
	.medium-9 br{
		display:none;
	}
	.rng-link h2 br{
		display:visible;
	}
	.sidebar-content{
		width:100%;
		background-color: rgba(0,0,0,0.7);
		padding:40px;
	}
	.sidebar-content h3{
		color:#B2D235;
		font-size:1.5em;
	}
	.sidebar-content p{
		color:#ffffff;
		font-size:1em;
	}
	#net-zero p{
		line-height:1.2em;
	}


	.intro-text-section{
		position:absolute;
		top:10%;
		left:250px;
		width:64vw;
		padding:25px;
		border-radius:20px;
		text-align:center;
	}
	.intro-text-bubble{
		background:rgba(255,255,255,0.8);
		padding:25px;
		border-radius:20px;
		text-align:center;
		font-weight:700;
	}
	.intro-text-bubble h3{
		font-size:1.4em;
	}
	.intro-text-bubble h5{
		font-size:1.1em;
	}
	.scene-1-text-intro {
		top: 10px;
		left: 1070px;
	}
	.first-truck{
		bottom:15px;
		left:2160px;
		width:250px;
	}
	.scene-1-text{
		top:10px;
		left:2700px;
		}
	.scene-1-text-intro-2{
		top:0px;
		left:1830px;
		}
	.scene-2-text{
		left:3530px;
		bottom:10px;
	}
	.digestor{
		left:3700px;
	}
	.scene-2-text-2{
		width:300px;
		left:4250px;
		top:10px;
	}
	.scene-3-text-1{
		padding:15px;
		bottom:120px;
		width: 350px;
		left:5950px;
	}
	.zoom-one{
		width:55vw;
		top:40px;
		left:4890px;
		}
	.zoom-two{
		width:55vw;
		top:40px;
		left:5450px;
		}
	.zoom-three{
		top:40px;
		left:6600px;
		width:55vw;
	}
	.second-truck{
		width:250px;
		bottom:15px;
		left:7450px;
	}
	.outro-text-bubble{
		position:absolute;
		top:10px;
		left:7900px;
		width:65vw;
		color:#007DB9;
		background:rgba(255,255,255,.8);
		padding:15px;
		border-radius:15px;
		text-align:center;
		font-weight:bold;
		box-shadow:0 0 10px rgba(0,0,0,0.0);
	}
	.outro-text-bubble h3{
		font-size:1.2em;
	}
	.outro-text-bubble h5{
		font-size:1em;
	}
	.button-sm{
		padding:0.5rem;
	}
	.sun {
		left:8400px;
		top:100px;
	  }
	.loop-text{
		position:absolute;
		top:20%;
		left:8700px;
		width:28vw;
		background:rgba(255,255,255,0.8);
		padding:15px;
		border-radius:20px;
	  }
	  .nicor-outro{
		position:absolute;
		bottom:50px;
		left:8800px;
		width:150px;
	}
	/* fixed menu */
	header {
		position: fixed;
		top: 0px;
		right: 0px;
		padding: 3px 15px 3px 15px;
		border-bottom-left-radius: 16px;
		z-index: 100;
		background-color: rgba(0,0,0,0.5);
		will-change: transform;
	}
  .anchor-nav a{
	  font-size:.9em;
  }
}
@media screen and (max-width: 900px) and (orientation:landscape) {
	#scroller{width:9000px; max-height:100vh; overflow-y:hidden;background-color:#4F7229;}
}
@media screen and (min-width: 900px) {
	.hide-over-900 {
	  display: none !important; } }
  
  @media screen and (max-width: 900px) {
	.show-over-900 {
	  display: none !important; } }