.banner
{
	
	position: relative;
	width: 80%;
	height: 135vh;
	background: url("../img/earth.jpg");
	background-size:  cover;
	background-position: bottom;
	background-attachment: fixed;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin:auto;
	align-items: center;

}

.banner #text
{
	
	position: relative;
	font-size: 7em;
	color: #fff;
	text-align: center;
	mix-blend-mode: overlay;
	text-shadow: 0 5px 10px rgba(0,0,0,1);
	animation: pulse 3s infinite;
	
	margin-top: 50px;
	margin-left: 30px;
}

.banner .clouds
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	pointer-events : none;
}



.banner .clouds img
{
	position: absolute;
	bottom: 0;
	max-width: 100%;
	animation : cloudary calc(3s * var(--i)) linear infinite ;
}

@keyframes cloudary
{
	0% { opacity: 0; transform: scale(1); }
	25%, 75% 
	{
		opacity: 1;
	}
	100%
	{
		opacity: 0;
		transform: scale(3);
	}
}

/* section
{
	position: relative;
	padding: 75px 100px;
} */

body {
	 height: 2000px;
}

.container {
  width: 100%;
  margin: 0 auto;
}
path {fill: lightgray; stroke: white;}
path:hover {fill: gray;}

 .bottomMenu {
	 bottom: 0;
	 color: black;
	 width: 100%;
	 /* height: 600px; */
	 
	 z-index: 1;
	 transition: all 0.8s;
	 
}
 .hide {
	 opacity: 0;
	 padding: 100px;
}
 .show {
	 opacity: 1;
	 padding: 0px;
	 animation-name: anima2;
	 animation-duration: 1.7s;
	 animation-timing-function: ease-out;
}
 svg {
	 width: 70px;
	 height: 70px;
}
 svg:hover {
	 fill: red;
}
 
 .map-container {
	 padding: 3.2rem 0.8rem;
	 position: relative;
	 display: inline-block;
	 margin: auto;
	 width: 100%;
	 min-width: 75;
}
 .map-container img {
	 width: 100%;
	 transform: translate(0%, 0%);
}
 .map-container .point {
	 cursor: pointer;
	 position: absolute;
	 width: 1.6rem;
	 height: 1.6rem;
	 background-color: #00acc1;
	 border-radius: 50%;
	 transition: all 0.3s ease;
	 will-change: transform, box-shadow;
	 transform: translate(-50%, -50%);
	 box-shadow: 0 0 0 rgba(0, 172, 193, 0.4);
	 animation: pulse 3s infinite;
}

.map-container .project {
	 
	 background-color: #c299ff;
	 
}

.map-container .hq {
	 
	background-color: #39aa22;
	
}

.map-container .trials {
	 
	background-color: #bdeb40;
	
}
.map-container .labs {
	 
	 background-color: 	 #80ffd4;
	 
}

 .map-container .point:hover {
	 animation: none;
	 transform: translate(-50%, -50%) scale3D(1.35, 1.35, 1);
	 box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
 .map-container .venezuela {
	 top: 54%;
	 left: 24%;
}
 .map-container .brasil {
	 top: 64%;
	 left: 28%;
}
 .map-container .argentina {
	 top: 77%;
	 left: 27%;
}
 .map-container .colombia {
	 top: 55%;
	 left: 21%;
}
 .map-container .pakistan {
	top: 42%;
	left: 67%;
}
 .map-container .indo{
	 top: 58%;
	 left: 79%;
}
 .map-container .usa {
	 top: 26%;
	 left: 17%;
}
 .map-container .arabia {
	 top: 43%;
	 left: 71%;
}
 .map-container .turquia {
	 top: 42%;
	 left: 74%;
}

 .map-container .philipines {
	 top: 47%;
	 left: 82%;
}


 .map-container .rusia {
	 top: 40%;
	 left: 62%;
}
 .map-container .india {
	 top: 40%;
	 left: 72%;
}

.map-container .uk {
	 top: 22%;
	 left: 49%;
}

.map-container .europe {
	 top: 22%;
	 left: 51%;
}


.map-container .asia {
	 top: 47%;
	 left: 78%;
}

 
 @keyframes pulse {
	 0% {
		 box-shadow: 0 0 0 0 rgba(0, 172, 193, 0.5);
	}
	 70% {
		 box-shadow: 0 0 0 25px rgba(0, 172, 193, 0);
	}
	 100% {
		 box-shadow: 0 0 0 0 rgba(0, 172, 193, 0);
	}
}
 @keyframes anima2 {
	 0% {
		 left: 50%;
		 top: 0%;
		 opacity: 0;
	}
	 100% {
		 left: 5%;
		 top: 100%;
		 opacity: 1;
	}
}

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
	.banner
	{
		height: 50vh;
		width: 100%;
	}

	.map-container .point {
	 cursor: pointer;
	 position: absolute;
	 width: 1rem;
	 height: 1rem;
	 background-color: #00acc1;
	 border-radius: 50%;
	 transition: all 0.3s ease;
	 will-change: transform, box-shadow;
	 transform: translate(-50%, -50%);
	 box-shadow: 0 0 0 rgba(0, 172, 220, 0.4);
	 animation: pulse 3s infinite;

}

 .map-container {
	 padding: 3.2rem 0.8rem;
	 position: relative;
	 display: inline-block;
	 margin: auto;
	 width: 100%;
	 min-width: 75;
}




.banner #text
{
	
	
	font-size: 0em;
	
	
}
/* Styles */
}