@charset "UTF-8";
/* CSS Document */

* {
	margin: 0;
	padding: 0;
	box-sizing: inherit;
	font-family: 'Nocturne-Light';
/*	cursor: none;*/
}
html {
	font-size: 62.5%;
	scroll-behavior: smooth;
	background-color: #191919;
	/* height: 2000px; */
}

/* ------------------------------- Nav Bar ----------------------- */
@media (min-width: 500px) {
	h1 {
	  font-size: 60px;
	  line-height: 80px;
	}
  }
  
  h3 {
	font-size: 24px;
	font-weight: normal;
	text-align: center;
	margin-bottom: 60px;
  }
  
  ul {
	list-style: none;
	margin: 0;
	padding: 0;
  }
  .menu {
	  cursor: pointer;
	  padding: 6px 20px;
	  font-size: 45px;
	  letter-spacing: 7px;
  }
  
  a {
	  text-decoration: none;
	  color: inherit;
  }
  
  #button_menu {
	opacity: 1;
	background-color: transparent;
	position: fixed;
	z-index: 2;
	top: 50%;
	left: 24px;
	border: none;
	width: 30px;
	height: 25px;
	outline: none;
	-webkit-transition: opacity 0.2s ease-out;
	transition: opacity 0.2s ease-out;
	
  }
  #button_menu:before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	/* border-radius: 3px; */
	margin: auto;
	width: 100%;
	background: -webkit-gradient(linear, left top, left bottom, from(#98B296), color-stop(20%, #98B296), color-stop(20%, transparent), color-stop(40%, transparent), color-stop(40%, #98B296), color-stop(60%, #98B296), color-stop(60%, transparent), color-stop(80%, transparent), color-stop(80%, #98B296), to(#98B296));
	background: linear-gradient(to bottom, white, white 20%, transparent 20%, transparent 40%, white 40%, white 60%, transparent 60%, transparent 80%, white 80%, white 100%);
	-webkit-transition: opacity 0.2s ease-out, width 0.2s 0.2s ease-out;
	transition: opacity 0.2s ease-out, width 0.2s 0.2s ease-out;
  }
  #button_menu:after {
	opacity: 0;
	content: '×';
	color: black;
	position: absolute;
	top: 16px;
	left: -4px;
	font-size: 55px;
	line-height: 0;
	-webkit-transition: opacity 0.4s ease-out;
	transition: opacity 0.4s ease-out;
  }
  #button_menu:active {
	-webkit-transform: translateY(2px);
			transform: translateY(2px);
  }
  #button_menu:hover {
	opacity: 0.7;
  }
  .open #button_menu {
	opacity: 1;
  }
  .open #button_menu:before {
	opacity: 0;
	width: 0;
  }
  .open #button_menu:after {
	opacity: 1;
	-webkit-transform: translate3d(0, 0, 0) rotate(360deg);
			transform: translate3d(0, 0, 0) rotate(360deg);
	-webkit-transition: opacity 0.4s 1s ease-out, -webkit-transform 0.4s 1s ease-out;
	transition: opacity 0.4s 1s ease-out, -webkit-transform 0.4s 1s ease-out;
	transition: transform 0.4s 1s ease-out, opacity 0.4s 1s ease-out;
	transition: transform 0.4s 1s ease-out, opacity 0.4s 1s ease-out, -webkit-transform 0.4s 1s ease-out;
  }
  
  nav {
	z-index: 1;
	position: fixed;
	top: -100%;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
	-webkit-backface-visibility: hidden;
			backface-visibility: hidden;
	overflow: hidden;
  }
  nav:before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	background: #efebe0;
	  opacity: 0.9;
	width: 100%;
	height: 0;
	padding-bottom: 100%;
	border-radius: 100%;
	-webkit-transform: scale(0.04), translateY(9999px);
			transform: scale(0.04), translateY(9999px);
	overflow: hidden;
  }
  .open nav {
	top: 0;
  }
  .open nav:before {
	-webkit-animation: menu-animation 0.8s ease-out forwards;
			animation: menu-animation 0.8s ease-out forwards;
  }
  
  ul.menu {
	position: fixed;
	top: 50%;
	left: 50%;
	-webkit-transform: translate3d(-50%, -50%, 0);
			transform: translate3d(-50%, -50%, 0);
	-webkit-backface-visibility: hidden;
			backface-visibility: hidden;
	-webkit-perspective: 1000;
			perspective: 1000;
	color: black;
	  width: 60%;
  }
  ul.menu li {
	opacity: 0;
	text-align: center;
	-webkit-transform: translate3d(0, 36px, 0);
			transform: translate3d(0, 36px, 0);
  }
  ul.menu li:before {
	content: '';
	position: absolute;
	top: 10px;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
  border-radius: 10px;
	background-color: #efebe0;
	  opacity: 1;
	height: 30%;
	width: 0;
	overflow: hidden;
	-webkit-transition: width 0.5s ease-out;
	transition: width 0.5s ease-out;
  }
  ul.menu li:after {
	opacity: 0;
	content: attr(data-text);
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	color: black;
	overflow: hidden;
	-webkit-transform: translate(-24px, 6px);
			transform: translate(-24px, 6px);
	-webkit-transition: opacity 0.1s ease-out, -webkit-transform 0.1s ease-out;
	transition: opacity 0.1s ease-out, -webkit-transform 0.1s ease-out;
	transition: transform 0.1s ease-out, opacity 0.1s ease-out;
	transition: transform 0.1s ease-out, opacity 0.1s ease-out, -webkit-transform 0.1s ease-out;
  }
  ul.menu li:hover:before {
	left: 0;
	right: auto;
	width: 100%;
  }
  ul.menu li:hover:after {
	opacity: 1;
	padding: 0 20px;
	-webkit-transform: translate(0px, 6px);
			transform: translate(0px, 6px);
	-webkit-transition: opacity 0.2s 0.14s ease-out, -webkit-transform 0.2s 0.14s ease-out;
	transition: opacity 0.2s 0.14s ease-out, -webkit-transform 0.2s 0.14s ease-out;
	transition: transform 0.2s 0.14s ease-out, opacity 0.2s 0.14s ease-out;
	transition: transform 0.2s 0.14s ease-out, opacity 0.2s 0.14s ease-out, -webkit-transform 0.2s 0.14s ease-out;
  }
  .open ul.menu li {
	opacity: 1;
	-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
	-webkit-transition: opacity 0.2s ease-out, -webkit-transform 0.2s ease-out;
	transition: opacity 0.2s ease-out, -webkit-transform 0.2s ease-out;
	transition: transform 0.2s ease-out, opacity 0.2s ease-out;
	transition: transform 0.2s ease-out, opacity 0.2s ease-out, -webkit-transform 0.2s ease-out;
  }
  .open ul.menu li:nth-child(1) {
	-webkit-transition-delay: 0.75s;
			transition-delay: 0.75s;
  }
  .open ul.menu li:nth-child(2) {
	-webkit-transition-delay: 0.85s;
			transition-delay: 0.85s;
  }
  .open ul.menu li:nth-child(3) {
	-webkit-transition-delay: 0.95s;
			transition-delay: 0.95s;
  }
  .open ul.menu li:nth-child(4) {
	-webkit-transition-delay: 1.05s;
			transition-delay: 1.05s;
  }
  .open ul.menu li:nth-child(5) {
	-webkit-transition-delay: 1.15s;
			transition-delay: 1.15s;
  }
  .open ul.menu li:nth-child(6) {
	-webkit-transition-delay: 1.25s;
			transition-delay: 1.25s;
  }
  .open ul.menu li:nth-child(7) {
	-webkit-transition-delay: 1.35s;
			transition-delay: 1.35s;
  }
  
  article {
	padding: 24px;
	max-width: 600px;
	margin: 60px auto;
	-webkit-transition: 0.2s ease-out;
	transition: 0.2s ease-out;
  }
  .open article {
	-webkit-transform: scale(0.92);
			transform: scale(0.92);
	-webkit-transition: -webkit-transform 0.2s 0.41s ease-out;
	transition: -webkit-transform 0.2s 0.41s ease-out;
	transition: transform 0.2s 0.41s ease-out;
	transition: transform 0.2s 0.41s ease-out, -webkit-transform 0.2s 0.41s ease-out;
  }
  
  @keyframes menu-animation {
	0% {
	  opacity: 0;
	  -webkit-transform: scale(0.04) translateY(300%);
			  transform: scale(0.04) translateY(300%);
	}
	40% {
	  -webkit-transform: scale(0.04) translateY(0);
			  transform: scale(0.04) translateY(0);
	  -webkit-transition: ease-out;
	  transition: ease-out;
	}
	40% {
	  -webkit-transform: scale(0.04) translateY(0);
			  transform: scale(0.04) translateY(0);
	}
	60% {
	  opacity: 1;
	  -webkit-transform: scale(0.02) translateY(0px);
			  transform: scale(0.02) translateY(0px);
	}
	61% {
	  -webkit-transform: scale(0.04);
			  transform: scale(0.04);
	}
	99.9% {
	  height: 0;
	  padding-bottom: 100%;
	  border-radius: 100%;
	}
	100% {
	  -webkit-transform: scale(2);
			  transform: scale(2);
	  height: 100%;
	  padding-bottom: 0;
	  border-radius: 0;
	}
  }
  /* ------------- overlay screen ----------------*/
  .overlay_warning {
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: white;
	z-index: 5;
	display: none;
	opacity: 0.5;
	}
	.warning_text {
	position: fixed;
	height: 400px;
	top: 25%;
	left: 25%;
	z-index: 6;
	font-size: 30px;
	letter-spacing: 7px;
	line-height: 25px;
	color: white;
	text-align: center;
	display: none;
	margin-left: auto;
	margin-right: auto;
	width: 50%;
	}
	/*--------- WARNING OVERLAY --------*/
	@media (max-width: 1000px) {
	.overlay_warning {
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: black;
	z-index: 5;
	display: block;
	opacity: 0.8;
	}
	.warning_text {
	position: fixed;
	z-index: 6;
	display: block;
	font-size: 30px;
	letter-spacing: 5px;
	line-height: 35px;
	text-align: center;
	color: white;
	}
	}
@media (max-height: 500px) {
	.overlay_warning {
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: black;
	z-index: 5;
	display: block;
	opacity: 0.8;
	}
	.warning_text {
	position: fixed;
	z-index: 6;
	display: block;
	font-size: 30px;
	letter-spacing: 5px;
	line-height: 35px;
	text-align: center;
	color: white;
	}
	}
/* ------------------------------- Header----------------------- *//* ------------------------------- Header----------------------- */

.header_page{
	height: 1080px;
	width: 100%;
}

.elimanate_header {
	position: absolute;
    top: 30%;
    left: 33%;
    width: 35%;
    height: auto;
	opacity: 100%;
	transition: 0.5s;
}
/* .elimanate_header:hover {
	position: absolute;
    top: 40%;
    left: 35%;
    width: 30%;
    height: auto;
	opacity: 0;
} */
.scroll_icon {
	position: absolute;
	top: 93%;
	width: 5%;
	left: 47.5%;
	height: auto;
}
.red_ball1 {
	position: absolute;
	top: 20%;
	width: 3%;
	right: 30%;
	height: auto;
}
.blue_ball1 {
	position: absolute;
	top: 35%;
	width: 3%;
	right: 22%;
	height: auto;
}
.yellow_ball1 {
	position: absolute;
	top: 30%;
	width: 2%;
	right: 45%;
	height: auto;
}
.green_ball1 {
	position: absolute;
	top: 55%;
	width: 3%;
	left: 28%;
	height: auto;
}
.orange_ball1 {
	position: absolute;
	top: 43%;
	width: 1.5%;
	left: 28%;
	height: auto;
}
.contacts_icon {
	position: fixed;
	top: 35%;
	right: 2%;
	width: 21px;
	height: auto;
	opacity: 1;
	transition: 0.7s;
	z-index: 50;
}
.contacts_icon:hover {
	position: fixed;
	top: 35%;
	right: 2%;
	width: 21px;
	height: auto;
	opacity: 0.6;
	z-index: 50;
}
.involved_icon {
	position: fixed;
	top: 55%;
	right: 2%;
	width: 20px;
	height: auto;
	opacity: 1;
	transition: 0.7s;
	z-index: 50;
}
.involved_icon:hover {
	position: fixed;
	top: 55%;
	right: 2%;
	width: 20px;
	height: auto;
	opacity: 0.6;
	z-index: 50;
}


/* ------------------------------- Elimanate Hello ----------------------- */
.weareelimanate_page {
	position: relative;
	height: 900px;
	width: 100%;
	background-color: #191919;
}

.hello_about {
	position: absolute;
	top: 10%;
	left: 25%;
	width: 200px;
	font-family: Nocturne-Light;
	font-size: 25px;
	letter-spacing: 1px;
	line-height: 25px;
	color: white;
}

.weareelimanate_logo {
	position: absolute;
	top: 15%;
	left: 30%;
	width: 40%;
}

.portfolio2020 {
	position: absolute;
	top: 55%;
	left: 45%;
	width: 10%;
	height: auto;
	
	animation: rotation 9s infinite linear;
}
@keyframes rotation {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(-359deg);
	}
}


/* ------------------------------- BUBBlES ----------------------- */ 

#background-wrap {
    bottom: 50px;
	left: 10%;
	position: relative;
	right: 0;
	top: 0;
	z-index: 1;
	width: 80%;
	height: auto;
	/* overflow: hidden; */
}

.bubble_man {
 width: 100%;
 height: auto;

}

/* KEYFRAMES */

@-webkit-keyframes animateBubble {
    0% {
        margin-top: 1000px;
    }
    100% {
        margin-top: -100%;
    }
}

@-moz-keyframes animateBubble {
    0% {
        margin-top: 1000px;
    }
    100% {
        margin-top: -100%;
    }
}

@keyframes animateBubble {
    0% {
        margin-top: 1000px;
    }
    100% {
        margin-top: -100%;
    }
}

@-webkit-keyframes sideWays { 
    0% { 
        margin-left:0px;
    }
    100% { 
        margin-left:50px;
    }
}

@-moz-keyframes sideWays { 
    0% { 
        margin-left:0px;
    }
    100% { 
        margin-left:50px;
    }
}

@keyframes sideWays { 
    0% { 
        margin-left:0px;
    }
    100% { 
        margin-left:50px;
    }
}

/* ANIMATIONS */

.x1 {
    -webkit-animation: animateBubble 25s linear infinite, sideWays 2s ease-in-out infinite alternate;
	-moz-animation: animateBubble 25s linear infinite, sideWays 2s ease-in-out infinite alternate;
	animation: animateBubble 25s linear infinite, sideWays 2s ease-in-out infinite alternate;
	
	left: -5%;
	top: 5%;
	
	-webkit-transform: scale(0.6);
	-moz-transform: scale(0.6);
	transform: scale(0.6);

	overflow: hidden;
}

.x2 {
    -webkit-animation: animateBubble 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
	-moz-animation: animateBubble 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
	animation: animateBubble 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
	
	left: 5%;
	top: 80%;
	
	-webkit-transform: scale(0.4);
	-moz-transform: scale(0.4);
	transform: scale(0.4);
	overflow: hidden;
}

.x3 {
    -webkit-animation: animateBubble 28s linear infinite, sideWays 1.5s ease-in-out infinite alternate;
	-moz-animation: animateBubble 28s linear infinite, sideWays 1.5s ease-in-out infinite alternate;
	animation: animateBubble 28s linear infinite, sideWays 1.5s ease-in-out infinite alternate;
	
	left: 10%;
	top: 40%;
	
	-webkit-transform: scale(0.7);
	-moz-transform: scale(0.7);
	transform: scale(0.7);
	overflow: hidden;
}

.x4 {
    -webkit-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
	-moz-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
	animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
	
	left: 20%;
	top: 0;
	
	-webkit-transform: scale(0.3);
	-moz-transform: scale(0.3);
	transform: scale(0.3);
	overflow: hidden;
}

.x5 {
    -webkit-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
	-moz-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
	animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
	
	left: 30%;
	top: 50%;
	
	-webkit-transform: scale(0.5);
	-moz-transform: scale(0.5);
	transform: scale(0.5);
	overflow: hidden;
}

.x6 {
    -webkit-animation: animateBubble 21s linear infinite, sideWays 2s ease-in-out infinite alternate;
	-moz-animation: animateBubble 21s linear infinite, sideWays 2s ease-in-out infinite alternate;
	animation: animateBubble 21s linear infinite, sideWays 2s ease-in-out infinite alternate;
	
	left: 50%;
	top: 0;
	
	-webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	transform: scale(0.8);
	overflow: hidden;
}

.x7 {
    -webkit-animation: animateBubble 20s linear infinite, sideWays 2s ease-in-out infinite alternate;
	-moz-animation: animateBubble 20s linear infinite, sideWays 2s ease-in-out infinite alternate;
	animation: animateBubble 20s linear infinite, sideWays 2s ease-in-out infinite alternate;
	
	left: 65%;
	top: 70%;
	
	-webkit-transform: scale(0.5);
	-moz-transform: scale(0.5);
	transform: scale(0.5);
	overflow: hidden;
}

.x8 {
    -webkit-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
	-moz-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
	animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
	
	left: 80%;
	top: 10%;
	
	-webkit-transform: scale(0.3);
	-moz-transform: scale(0.3);
	transform: scale(0.3);
	overflow: hidden;
}

.x9 {
    -webkit-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
	-moz-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
	animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
	
	left: 90%;
	top: 50%;
	
	-webkit-transform: scale(0.6);
	-moz-transform: scale(0.6);
	transform: scale(0.6);
	overflow: hidden;
}

.x10 {
    -webkit-animation: animateBubble 26s linear infinite, sideWays 5s ease-in-out infinite alternate;
	-moz-animation: animateBubble 26s linear infinite, sideWays 5s ease-in-out infinite alternate;
	animation: animateBubble 26s linear infinite, sideWays 5s ease-in-out infinite alternate;
	
	left: 80%;
	top: 80%;
	
	-webkit-transform: scale(0.3);
	-moz-transform: scale(0.3);
	transform: scale(0.3);
	overflow: hidden;
}

.x11 {
    -webkit-animation: animateBubble 18s linear infinite, sideWays 5s ease-in-out infinite alternate;
	-moz-animation: animateBubble 18s linear infinite, sideWays 5s ease-in-out infinite alternate;
	animation: animateBubble 18s linear infinite, sideWays 5s ease-in-out infinite alternate;
	
	left: 60%;
	top: 20%;
	
	-webkit-transform: scale(0.5);
	-moz-transform: scale(0.5);
	transform: scale(0.5);
	overflow: hidden;
}
.x12 {
    -webkit-animation: animateBubble 23s linear infinite, sideWays 2s ease-in-out infinite alternate;
	-moz-animation: animateBubble 23s linear infinite, sideWays 2s ease-in-out infinite alternate;
	animation: animateBubble 23s linear infinite, sideWays 2s ease-in-out infinite alternate;
	
	left: 40%;
	top: 0%;
	
	-webkit-transform: scale(0.7);
	-moz-transform: scale(0.7);
	transform: scale(0.7);
	overflow: hidden;
}
.x13 {
    -webkit-animation: animateBubble 34s linear infinite, sideWays 4s ease-in-out infinite alternate;
	-moz-animation: animateBubble 34s linear infinite, sideWays 4s ease-in-out infinite alternate;
	animation: animateBubble 34s linear infinite, sideWays 4s ease-in-out infinite alternate;
	
	left: 15%;
	top: 25%;
	
	-webkit-transform: scale(0.4);
	-moz-transform: scale(0.4);
	transform: scale(0.4);
	overflow: hidden;
}
.x14 {
    -webkit-animation: animateBubble 26s linear infinite, sideWays 2s ease-in-out infinite alternate;
	-moz-animation: animateBubble 26s linear infinite, sideWays 2s ease-in-out infinite alternate;
	animation: animateBubble 26s linear infinite, sideWays 2s ease-in-out infinite alternate;
	
	left: 50%;
	top: 80%;
	
	-webkit-transform: scale(0.3);
	-moz-transform: scale(0.3);
	transform: scale(0.3);
	overflow: hidden;
}
.x15 {
    -webkit-animation: animateBubble 27s linear infinite, sideWays 3s ease-in-out infinite alternate;
	-moz-animation: animateBubble 27s linear infinite, sideWays 3s ease-in-out infinite alternate;
	animation: animateBubble 27s linear infinite, sideWays 3s ease-in-out infinite alternate;
	
	left: 35%;
	top: 40%;
	
	-webkit-transform: scale(0.6);
	-moz-transform: scale(0.6);
	transform: scale(0.6);
	overflow: hidden;
}
/* OBJECTS */

.bubble {
    -webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	
    -webkit-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1);
	-moz-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1);
	box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1);
	
    height: 200px;
	position: absolute;
	width: 200px;
}

.bubble:after {
    background: -moz-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 70%); /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.5)), color-stop(70%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 70%); /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 70%); /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 70%); /* IE10+ */
    background: radial-gradient(ellipse at center,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 70%); W3C
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	
    /* -webkit-box-shadow: inset 0 20px 30px rgba(255, 255, 255, 0.3);
	-moz-box-shadow: inset 0 20px 30px rgba(255, 255, 255, 0.3);
	box-shadow: inset 0 20px 30px rgba(255, 255, 255, 0.3); */
	
	content: "";
    height: 180px;
	left: 10px;
	position: absolute;
	width: 180px;
}



/* ------------------------------- What we do ----------------------- */
.whatwedo_page {
	position: relative;
	height: 900px;
	width: 100%;
	background-color:#191919;
}

.whatwedo_logo {
	position: absolute;
	top: 200px;
	right: 10%;
	width: 600px;
}

.oval_box_1 {
	position: relative;
	top: 0;
	left: 0;
	width: 450px;
	overflow: hidden;
}
.oval_shape_1 {
	width: 100%;
	height: auto;
	right: 200px;
	overflow: hidden;
}

.red_ball2 {
	position: absolute;
	top: 10%;
	width: 1.5%;
	right: 20%;
	height: auto;
}
.blue_ball2 {
	position: absolute;
	top: 24%;
	width: 3%;
	right: 11%;
	height: auto;
}
.yellow_ball2 {
	position: absolute;
	top: 20%;
	width: 2%;
	right: 30%;
	height: auto;
}
.green_ball2 {
	position: absolute;
	top: 55%;
	width: 3%;
	right: 45%;
	height: auto;
}
.orange_ball2 {
	position: absolute;
	top: 40%;
	width: 1.5%;
	left: 45%;
	height: auto;
}

.whatwedo_title {
	position: absolute;
	top: 600px;
	left: 15%;
	width: 550px;
	height: auto;
}

.whatwedo_title_normal {
	font-family: Heroic-Book;
	font-size: 45px;
	letter-spacing: 1px;
	line-height: 25px;
	color: white;
}

.whatwedo_title_bold {
	font-family: Heroic-Bold;
	font-size: 45px;
	letter-spacing: 1px;
	line-height: 25px;
	color: white;
}

.whatwedo_text {
	font-family: Nocturne-Light;
	font-size: 13px;
	letter-spacing: 1px;
	line-height: 25px;
	color: white;
}
.more_1 {
	position: absolute;
	top: 825px;
	left: 45%;
	width: 100px;
	height: auto;
}
.more_btn_1 {
	width: auto;
	height: auto;
}

/* ------------------------------- More About----------------------- */
.moreabout_page {
	position: relative;
	height: 900px;
	width: 100%;
	background-color:#191919;
}

.moreabout_logo {
	position: absolute;
	top: 200px;
	left: 10%;
	width: 600px;
}
.red_ball3 {
	position: absolute;
	top: 50%;
	width: 1.5%;
	left: 7%;
	height: auto;
}
.blue_ball3 {
	position: absolute;
	top: 35%;
	width: 3%;
	left: 6%;
	height: auto;
}
.yellow_ball3 {
	position: absolute;
	top: 20%;
	width: 2%;
	left: 30%;
	height: auto;
}
.green_ball3 {
	position: absolute;
	top: 42%;
	width: 3%;
	left: 45%;
	height: auto;
}
.orange_ball3 {
	position: absolute;
	top: 28%;
	width: 1.5%;
	left: 50%;
	height: auto;
}

.moreabout_title {
	position: absolute;
	top: 600px;
	right: 5%;
	width: 550px;
	height: auto;
}

.moreabout_title_normal {
	font-family: Heroic-Book;
	font-size: 45px;
	letter-spacing: 1px;
	line-height: 25px;
	color: white;
}

.moreabout_title_bold {
	font-family: Heroic-Bold;
	font-size: 45px;
	letter-spacing: 1px;
	line-height: 25px;
	color: white;
}

.moreabout_text {
	font-family: Nocturne-Light;
	font-size: 13px;
	letter-spacing: 1px;
	line-height: 25px;
	color: white;
}
.more_2 {
	position: absolute;
	top: 775px;
	right: 5%;
	width: 100px;
	height: auto;
}
.more_btn_2 {
	width: auto;
	height: auto;
}

/* ------------------------------- Pledge ----------------------- */
.pledge_page {
	position: relative;
	height: 900px;
	width: 100%;
	background-color:#191919;
}
.man_1 {
	position: absolute;
	width: 50%;
	right: 0px;
	top: 15%;
}
.man_1_photo {
	width: 100%;
	height: auto;
	filter: grayscale(100%);
}
.pledge_logo {
	position: absolute;
	top: 200px;
	left: 10%;
	width: 500px;
}
.red_ball4 {
	position: absolute;
	top: 50%;
	width: 1.5%;
	left: 15%;
	height: auto;
}
.blue_ball4 {
	position: absolute;
	top: 20%;
	width: 3%;
	left: 35%;
	height: auto;
}
.yellow_ball4 {
	position: absolute;
	top: 20%;
	width: 1.5%;
	left: 40%;
	height: auto;
}
.green_ball4 {
	position: absolute;
	top: 30%;
	width: 3%;
	left: 40%;
	height: auto;
}
.orange_ball4 {
	position: absolute;
	top: 28%;
	width: 1.5%;
	left: 7%;
	height: auto;
}
.pledge_title {
	position: absolute;
	top: 600px;
	left: 15%;
	width: 550px;
	height: auto;
}

.pledge_title_normal {
	font-family: Heroic-Book;
	font-size: 45px;
	letter-spacing: 1px;
	line-height: 25px;
	color: white;
}

.pledge_title_bold {
	font-family: Heroic-Bold;
	font-size: 45px;
	letter-spacing: 1px;
	line-height: 25px;
	color: white;
}

.pledge_text {
	font-family: Nocturne-Light;
	font-size: 13px;
	letter-spacing: 1px;
	line-height: 25px;
	color: white;
}
.more_3 {
	position: absolute;
	top: 775px;
	left: 45%;
	width: 100px;
	height: auto;
}
.more_btn_3 {
	width: auto;
	height: auto;
}

/* ------------------------------- campaign ----------------------- */
.campaigns_page {
	position: relative;
	height: 900px;
	width: 100%;
	background-color: #191919;
}
.campaign_logo {
	position: absolute;
	top: 300px;
	left: 10%;
	width: 80%;
}
.campaign_shapes {
	position: absolute;
	top: 550px;
	left: 5%;
	width: 90%;
}
.red_ball5 {
	position: absolute;
	top: 15%;
	width: 1.5%;
	right: 35%;
	height: auto;
}
.blue_ball5 {
	position: absolute;
	top: 25%;
	width: 3%;
	right: 15%;
	height: auto;
}
.yellow_ball5 {
	position: absolute;
	top: 20%;
	width: 1.5%;
	right: 45%;
	height: auto;
}
.green_ball5 {
	position: absolute;
	top: 55%;
	width: 3%;
	left: 35%;
	height: auto;
}
.orange_ball5 {
	position: absolute;
	top: 28%;
	width: 1.5%;
	left: 7%;
	height: auto;
}
.campaign_title {
	position: absolute;
	bottom: 5%;
	left: 41%;
	width: 550px;
	height: auto;
}

.campaign_text {
	font-family: Nocturne-light;
	font-size: 13px;
	letter-spacing: 1px;
	line-height: 25px;
	color: white;
}

.scroll_icon2 {
	position: absolute;
	top: 95%;
	width: 5%;
	left: 47.5%;
	height: auto;
}

/* ------------------------------- callout ----------------------- */
.callout_page {
	position: relative;
	height: 900px;
	width: 100%;
	background-color:#191919;
}

.calloutcards_logo {
	position: absolute;
	top: 300px;
	left: 15%;
	width: 70%;
}

.red_ball6 {
	position: absolute;
	top: 15%;
	width: 1.5%;
	right: 35%;
	height: auto;
}
.blue_ball6 {
	position: absolute;
	top: 25%;
	width: 3%;
	right: 15%;
	height: auto;
}
.yellow_ball6 {
	position: absolute;
	top: 30%;
	width: 2%;
	right: 45%;
	height: auto;
}
.green_ball6 {
	position: absolute;
	top: 50%;
	width: 3%;
	left: 35%;
	height: auto;
}
.orange_ball6 {
	position: absolute;
	top: 30%;
	width: 1.5%;
	left: 10%;
	height: auto;
}

.callout_title {
	position: absolute;
	top: 600px;
	left: 15%;
	width: 550px;
	height: auto;
}

.callout_title_normal {
	font-family: Heroic-Book;
	font-size: 45px;
	letter-spacing: 1px;
	line-height: 25px;
	color: white;
}

.callout_title_bold {
	font-family: Heroic-Bold;
	font-size: 45px;
	letter-spacing: 1px;
	line-height: 25px;
	color: white;
}

.callout_text {
	font-family: Nocturne-Light;
	font-size: 13px;
	letter-spacing: 1px;
	line-height: 25px;
	color: white;
}
.more_6 {
	position: absolute;
	top: 775px;
	left: 45%;
	width: 100px;
	height: auto;
}
.more_btn_6 {
	width: auto;
	height: auto;
}
/* ------------------------------- MODS ----------------------- */
.mods_page {
	position: relative;
	height: 900px;
	width: 100%;
	background-color:#191919;
}

.mods_logo {
	position: absolute;
	top: 300px;
	left: 23%;
	width: 55%;
}

.red_ball7 {
	position: absolute;
	top: 55%;
	width: 1.5%;
	left: 30%;
	height: auto;
}
.blue_ball7 {
	position: absolute;
	top: 25%;
	width: 3%;
	right: 40%;
	height: auto;
}
.yellow_ball7 {
	position: absolute;
	top: 25%;
	width: 2%;
	right: 30%;
	height: auto;
}
.green_ball7 {
	position: absolute;
	top: 50%;
	width: 3%;
	right: 25%;
	height: auto;
}
.orange_ball7 {
	position: absolute;
	top: 30%;
	width: 1.5%;
	left: 35%;
	height: auto;
}

.mod_title {
	position: absolute;
	top: 600px;
	left: 40%;
	width: 550px;
	height: auto;
}

.mod_title_normal {
	font-family: Heroic-Book;
	font-size: 45px;
	letter-spacing: 1px;
	line-height: 25px;
	color: white;
}

.mod_title_bold {
	font-family: Heroic-Bold;
	font-size: 45px;
	letter-spacing: 1px;
	line-height: 25px;
	color: white;
}

.mod_text {
	font-family: Nocturne-Light;
	font-size: 13px;
	letter-spacing: 1px;
	line-height: 25px;
	color: white;
}
.more_7 {
	position: absolute;
	top: 775px;
	right: 25%;
	width: 100px;
	height: auto;
}
.more_btn_7 {
	width: auto;
	height: auto;
}

/* ------------------------------- Advert ----------------------- */
.advert_page {
	position: relative;
	height: 900px;
	width: 100%;
	background-color:#191919;
}

.advert_logo {
	position: absolute;
	top: 300px;
	left: 22%;
	width: 55%;
}

.red_ball8 {
	position: absolute;
	top: 50%;
	width: 1.5%;
	left: 30%;
	height: auto;
}
.blue_ball8 {
	position: absolute;
	top: 25%;
	width: 3%;
	right: 40%;
	height: auto;
}
.yellow_ball8 {
	position: absolute;
	top: 25%;
	width: 2%;
	right: 30%;
	height: auto;
}
.green_ball8 {
	position: absolute;
	top: 15%;
	width: 3%;
	left: 35%;
	height: auto;
}
.orange_ball8 {
	position: absolute;
	top: 30%;
	width: 1.5%;
	left: 25%;
	height: auto;
}

.advert_title {
	position: absolute;
	top: 600px;
	left: 55%;
	width: 550px;
	height: auto;
}

.advert_title_normal {
	font-family: Heroic-Book;
	font-size: 45px;
	letter-spacing: 1px;
	line-height: 25px;
	color: white;
}

.advert_title_bold {
	font-family: Heroic-Bold;
	font-size: 45px;
	letter-spacing: 1px;
	line-height: 25px;
	color: white;
}

.advert_text {
	font-family: Nocturne-Light;
	font-size: 13px;
	letter-spacing: 1px;
	line-height: 25px;
	color: white
}
.more_8 {
	position: absolute;
	top: 775px;
	right: 10%;
	width: 100px;
	height: auto;
}
.more_btn_8 {
	width: auto;
	height: auto;
}


/* ------------------------------- FAQ's ----------------------- */
.faq_page {
	position: relative;
	height: 900px;
	width: 100%;
	background-color:#191919;
}

.faq_logo {
	position: absolute;
	top: 300px;
	left: 40%;
	width: 17%;
}

.red_ball9 {
	position: absolute;
	top: 25%;
	width: 1.5%;
	right: 40%;
	height: auto;
}
.blue_ball9 {
	position: absolute;
	top: 30%;
	width: 3%;
	right: 25%;
	height: auto;
}
.yellow_ball9 {
	position: absolute;
	top: 25%;
	width: 2%;
	left: 35%;
	height: auto;
}
.green_ball9 {
	position: absolute;
	top: 45%;
	width: 3%;
	left: 25%;
	height: auto;
}
.orange_ball9 {
	position: absolute;
	top: 45%;
	width: 1.5%;
	left: 30%;
	height: auto;
}

.faq_title {
	position: absolute;
	top: 600px;
	left: 15%;
	width: 550px;
	height: auto;
}

.faq_title_normal {
	font-family: Heroic-Book;
	font-size: 45px;
	letter-spacing: 1px;
	line-height: 25px;
	color: white;
}

.faq_title_bold {
	font-family: Heroic-Bold;
	font-size: 45px;
	letter-spacing: 1px;
	line-height: 25px;
	color: white;
}

.faq_text {
	font-family: Nocturne-Light;
	font-size: 13px;
	letter-spacing: 1px;
	line-height: 25px;
	color: white;
}
.more_9 {
	position: absolute;
	top: 800px;
	left: 45%;
	width: 100px;
	height: auto;
}
.more_btn_9 {
	width: auto;
	height: auto;
}

/* ------------------------------- Newslettter's ----------------------- */
.newsletter_page {
	position: relative;
	height: 900px;
	width: 100%;
	background-color:#191919;
}

.newsletter_logo {
	position: absolute;
	top: 200px;
	left: 10%;
	width: 50%;
}

.oval_newsletter {
	position: absolute;
	top: 50px;
	right: 0px;
	width: 30%;
}

.red_ball10 {
	position: absolute;
	top: 7%;
	width: 1.5%;
	left: 53%;
	height: auto;
}
.blue_ball10 {
	position: absolute;
	top: 27%;
	width: 3%;
	right: 30%;
	height: auto;
}
.yellow_ball10 {
	position: absolute;
	top: 25%;
	width: 2%;
	left: 51%;
	height: auto;
}
.green_ball10 {
	position: absolute;
	top: 45%;
	width: 3%;
	left: 12%;
	height: auto;
}
.orange_ball10 {
	position: absolute;
	top: 33%;
	width: 1.5%;
	left: 8%;
	height: auto;
}

.newsletter_title {
	position: absolute;
	top: 555px;
	left: 15%;
	width: 575px;
	height: auto;
}

.newsletter_text {
	font-family: Nocturne-Light;
	font-size: 18px;
	letter-spacing: 1px;
	line-height: 25px;
	color: white;
}
.newsletter_bold {
	font-family: Nocturne-Semibold;
	font-size: 18px;
	letter-spacing: 1px;
	line-height: 25px;
	color: white;
}

.name_ring {
	width: auto;
	height: auto;
}
.ring_2 {
	position: absolute;
	top: 705px;
	right: 75px;
	width: 525px;
	height: auto;
}
.email_ring {
	width: auto;
	height: auto;
	opacity: 0;
}
.subscribe_btn_container {
	position: absolute;
	top: 760px;
	right: 75px;
	width: 140px;
	height: auto;
}
.sub_btn {
	width: auto;
	height: auto;
	opacity: 0;
}

/* ------------- Email ----------------*/
.email {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #efebe0;
	font-family: Nocturne-Light;
	border-radius: 25px;
	border: none;
	padding-left: 30px;
}
.button {
	position: absolute;
	top: 0;
	left: 30px;

	font-family: Nocturne-Light;
	color: #191919; 
	border: none;
	width: 100%;
	height: 100%;
	border-radius: 25px;
	background-color: #efebe0;
	
}

/* ------------- Back to top btn ----------------*/

#myBtn {
	display: none; 
	position: fixed;
	bottom: 20px; 
	right: 40px;
	z-index: 1;
	border: none;
	outline: none;
	background-color: white;
	color: black;
	padding-bottom: 4px;
	padding-top: 6px;
	padding-right: 10px;
	padding-left: 10px;
  /*  border-radius: 15px;*/
	font-size: 20px;
	  font-family: 'Heroic-Bold';
	  letter-spacing: 0.2px;
	opacity: 0.7;
	border-radius: 20px;
  }
  
  #myBtn:hover {
	opacity: 1;
	transition: 0.8s;
  }