*
{  
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Poppins', sans-serif;
	scroll-behavior: smooth;
}
body{
	min-height: 100vh !important;
	background: linear-gradient(#9ACDE0 40%, white 80%, grey 90%);
      background-repeat: no-repeat;


}
header{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	padding: 30px 100px;
	justify-content: space-between ;
	align-items: center;
	z-index: 10000;
}

nav {
      width: 100%;
      height: 70px;
      position: static;
      z-index: 1;
}

nav #brand {
      float: left;
      display: block;
      margin-left: 84px;
      font-size: 30px;
      line-height: 70px;
      font-weight: bold;
}

nav #brand a {
      color: #fff;
      transition: all 0.3s ease-out;
      font-weight: 300;
      color: green
}
nav #brand a img:hover{
	transform: scale(.9);
}

nav #menu {
      float: left;
      left: 60%;
      position: relative;
      margin-right:-1500px;
}

nav #menu li {
      display: inline-block;
      padding: 0px 30px;
      cursor: pointer;
      line-height: 70px;
      position: relative;
      transition: all 0.3s ease-out;
}

nav #menu li a {
      color: #fff;
      font-weight: 200;
}
nav #menu li a img:hover{
	transform: scale(.9);
	color: green
}

#toggle {
      position: absolute;
      right: 20px;
      top: 14px;
      z-index: 999;
      width: 40px;
      height: 40px;
      cursor: pointer;
      float: right;
      transition: all 0.3s ease-out;
      visibility: hidden;
      opacity: 0;
}

#toggle .span {
      height: 3px;
      background: #fff;
      transition: all 0.3s ease-out;
      backface-visibility: hidden;
      margin: 5px auto;
      z-index: 999;
}

#toggle.on #one {
      transform: rotate(45deg) translateX(2px) translateY(4px);
      
}

#toggle.on #two {
      opacity: 0;
      
}

#toggle.on #three {
      transform: rotate(-45deg) translateX(8px) translateY(-10px);
      
}
#resize {
      z-index: 1;
      top: -20px;/**/
       position: absolute;
      background: none;
      left: 0;
      width: 100%;
      height: 100%;
      visibility: hidden;
      opacity: 0;
      transition: all 1s ease-out;
      display: table;
}

#resize #menu {
      height: 90px;
      display: table-cell;
      vertical-align: center;
      color: green
}

#resize #menu li {
      display: block;
      text-align: center;
      padding: 20px 0;
      font-size: 50px;
      min-height: 50px;
      font-weight: bold;
      cursor: pointer;
      transition: all 0.3s ease-out;
      color: green
}
#resize #menu li:hover{
	transform: scale(.9);
}
#resize li:nth-child(1) {
      margin-top:140px;
      color: green;
}

#resize #menu li a {
      color: #fff;

}


#resize.active {
      visibility: visible;
      opacity: 0.99;
 
}


@media(max-width: 1088px) {
      #toggle {
            visibility: visible;
            opacity: 1;
            margin-top: 6px;
            z-index: 100 !important;
      }

      nav #brand {
            margin-left: 18px;
      }

      #menu a {
            font-family: "Poppins";
            font-weight: 200;
            font-size: 20px;
      }

      nav #menu {
            display: none;
      }
}

@media(min-width: 1088px) {
      #resize {
            visibility: hidden !important;
      }
}
.bigTitle{
      max-width: 50%; position: absolute; z-index: -1; top:200px; left: 25%; 
}
section{
	position: relative;
	width: 100%;
	height: 100vh;
	padding: 100px;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow:  hidden !important;
      margin-bottom: -205px;
}
#sec{
      position: sticky !important;
      width: 500px !important !important;
      height: 60px !important;
      padding: 30%!important;
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
      overflow-y: hidden !important;
      
}
section::before{
	content: '';
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 100px;
	
	z-index: 1000;
}
section img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
section img#sun{
	mix-blend-mode: screen;
}
section img#mountains-front{
	z-index: 10;*/
}
#text{
	position: absolute;
	right: -350px;
	height: 30%;
	width: 30%;
	white-space: nowrap;
	
	z-index: -1 !important;
}
.sec{/*
	position: relative;
	padding: 100px;
	background: #1c0522;*/
}
.sec h2{
	font-size: 3.5 rem;
	margin-bottom: 10px;
	color: #fff;
}
.sec p{
	font-size: 1 em;
	color: #fff;
}
@-webkit-keyframes rotating {
    from{
        -webkit-transform: rotate(0deg);
    }
    to{
        -webkit-transform: rotate(360deg);
    }
}

.rotating {
    -webkit-animation: rotating 24s linear infinite;
}
#sun{
	width: 90%;
	left: 67%;
	position: absolute;
	
	z-index: -1;
}
#sunlayer2{
	width: 38%;
	left: 95%;
	position: absolute;
	margin-top: 30%;
	z-index: -1;

}/*
#mountains-behind{
	position: absolute;
	top: 0;
	left: 0;
	width: 50%;
	height: 100%;
	object-fit: cover;
}*/

.sun{
	width: 25%;
	left: 50%;
	position: absolute;
	top: 0;
	z-index: -1;
}
.svg {
  width: 200px;
  position: absolute;
  top: -50px;
  left: 120px;
  pointer-events: none;
  z-index: 9999;
}

.hide {
  display: none;
}
.trash{
      position:absolute; 
      z-index:2; 
      left:0; 
      margin-top: 40%; 
      width:20%;
       margin-left:10px;background-image: url('../images/trash.png');  background-repeat: no-repeat; background-size: 100%; height:100%;border: none; background-color: transparent; position:absolute; z-index:777;
}
.trash:hover {
  animation: shake 0.5s;
  animation-iteration-count: infinite;
}
.home{
      position:sticky; 
      z-index:2; 
      left:5px;
      top: 5px; 
      width:100px;
      background-image: url('../images/home.png');  background-repeat: no-repeat; background-size: 100%; height:10%;border: none; background-color: transparent; position:absolute; z-index:777;
}
.noRoadMap{
      position:sticky; 
      z-index:77777; 
      left:-150px; 
      width:100% !important;
      height: 100%;
      top: -70px;
      background-image: url('../images/roadmap.png');  background-repeat: no-repeat; background-size: 100%; width:170px !important; height:80px !important;border: none; background-color: transparent; position:absolute; z-index:777;
}
.noRoadMap:hover{
  transform: scale(.97);
  cursor: pointer;
}
.home:hover {
  transform: scale(.97);
  cursor: pointer;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}
#message3 {
  visibility: hidden;
  background-color: transparent;
  padding: 0;
  position: absolute;
  z-index: 8888;
  left: 5%;
  top: 10%;

}

#message3.show {
  visibility: visible;
  -webkit-animation: fadein 0.9s, fadeout2 0.5s 2.5s;
  animation: fadein2 0.5s, fadeout2 0.5s 2.5s;
}
#message2 {
  visibility: hidden;
  background-color: transparent;
  padding: 0;
  position: absolute;
  z-index: 8888;
  left: 5%;
  top: 10%;

}
#message2.show {
  visibility: visible;
  -webkit-animation: fadein 0.9s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s !important;
}

#snackbar {
  visibility: hidden;
  background-color: transparent;
  padding: 0;
  position: absolute;
  z-index: 8888;
  left: 10%;

}

#snackbar.show {
  visibility: visible;
  -webkit-animation: fadein 0.9s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
#message {
  visibility: hidden;
  background-color: transparent;
  padding: 0;
  position: absolute;
  z-index: 8888;
  left: 10%;

}

#message.show {
  visibility: visible;
  -webkit-animation: fadein 0.9s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@-webkit-keyframes fadein {
  from {bottom: 0; opacity: 0;} 
  to {bottom: 40%; opacity: 1;}
}

@keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 40%; opacity: 1;}
}
@-webkit-keyframes fadein2 {
  from {top: 0; opacity: 0;} 
  to {top: 10%; opacity: 1;}
}

@keyframes fadein2 {
  from {top: 0; opacity: 0;}
  to {top: 10%; opacity: 1;}
}
@-webkit-keyframes fadeout {
  from {bottom: 30px; opacity: 1;} 
  to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
  from {bottom: 40%; opacity: 1;}
  to {bottom: 0; opacity: 0; z-index: -20 !important;}
}
#sec{
      height: 100px !important;
      margin-top: 150px;
}
#sec img{
      position:absolute; width: 100%; z-index: 666 ; top:10px; margin-bottom: 400px;
}


:root {
  --marquee-width: 100vw;
  --marquee-height: 70vh;
  --marquee-elements-displayed: 4;
  --marquee-element-width: calc(var(--marquee-width) / var(--marquee-elements-displayed));
  --marquee-animation-duration: calc(var(--marquee-elements) * 4s);
}

.marquee {
   top: -10%;
  width: var(--marquee-width);
  height: var(--marquee-height);
  background-color: transparent;
  color: #eee;
  position: relative;
  z-index: -3 !important;
  margin-left: -50%;
  margin-right: -50%;
}
.marquee:before, .marquee:after {
  position: absolute;
  top: 0;
  width: 10rem;
  height: 100%;
  content: "";
  z-index: 1;
}
.marquee:before {
  left: 0;
}
.marquee:after {
  right: 0;
}
.marquee-content {
  list-style: none;
  height: 100%;
  display: flex;
  animation: scrolling var(--marquee-animation-duration) linear infinite;
}
@keyframes scrolling {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-1 * var(--marquee-element-width) * var(--marquee-elements))); }
}
.marquee-content li {
  display: flex;
  justify-content: center;
  align-items: center;
  /* text-align: center; */
  flex-shrink: 0;
  width: var(--marquee-element-width);
  max-height: 100%;
  font-size: calc(var(--marquee-height)*3/4); /* 5rem; */
  white-space: nowrap;
}

.marquee-content li img {
  width: 120%;
  /* height: 100%; */
  position: relative;
}

@media (max-width: 600px) {
  html { font-size: 12px; }
  :root {
    --marquee-width: 100vw;
    --marquee-height: 16vh;
    --marquee-elements-displayed: 3;
  }
  .marquee:before, .marquee:after { width: 5rem; }
}
@media screen and (max-width: 600px) { 

 .vanish { display: none; }  

}
@media screen and (min-width: 600px) {

  /* USE THESE CLASSES TO HIDE CONTENT ON MOBILE */
 .hide {
    display: none !important z-index: -20;
 }
}
@media screen and (max-width: 600px) { 

 .show { display: inline !important; position: absolute; height:150%; width:100%; z-index: -20;}  
 .marquee{top: -12% !important;}

  #sec{
      margin-top: 0;
  }




}