/*@import url("https://fonts.googleapis.com/css2?family=Comfortaa&display=swap");*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
body {
	color: #a1a1a1;
	/*font-family: 'Comfortaa', Lucida Sans Unicode, Verdana, sans-serif;*/
	font-family: 'Montserrat', Lucida Sans Unicode, Verdana, sans-serif;
	margin: 0;
}

input[type=text],[type=password],[name=EMAIL]{border:1px solid #006699; border-radius: 3px; color:#666666; font-size:1em; margin-bottom:5px; margin-top:15px; padding:10px 0 0 5px; width:22%;}
input[type=button] {border:1px solid #E5E5E5; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; color:#333; display:block; float:left; font-size:1em; margin-bottom:5px; margin-top:15px; width:50%;}
input[type=submit] {
	background: #fff; border: 1px solid #003399; border-radius: 5px; text-transform:lowercase; -moz-border-radius: 5px; -webkit-border-radius: 5px; cursor:pointer; padding:5px 5px 5px 5px; font-size:1.5em; margin-top:15px; margin-right:2px; color:#333; width:20%;}
input[type=button]:hover, [type=submit]:hover {color:#333; opacity: 0.6; transform: scale(1.01, 1.01);}
select{border:1px solid #006699; color:#666666; font-size:1em; margin-bottom:5px; margin-top:0px; padding:10px 0 0 5px;}
label{font-size:1em;}

/* Hack to remove Safari's extra padding. Remove if you don't care about pixel-perfection. */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .input input, .input textarea, .input select { padding: 4px; }
}

a {
	color: inherit;
	text-decoration: none;
}

a:hover,a:focus{ outline: none; text-decoration:none; }

a:hover { transform: scale(1.01, 1.01); }

img { border-radius: 8px; }

/*-----------------------------------------------*/
/* For mobile phones: */
[class*="cols-"] {
    width: 100%;
}

.topbar {
	width:100%;
	min-height:60px;
	background:white;
	overflow: hidden;
	position: absolute;
	top: 0;
	z-index:10;
}

.navbar-fixed {
	border-bottom: 1px solid #ccc;
    top: 0;
    z-index: 100;
  	position: fixed;
}

#left {
	float: left;
	height:100%;
	overflow: hidden;
	width: 40%;
}

#company { 
	display: none;
	float:left; 
	margin:12px;
    	height: 50px;
	text-shadow: -1px 1px 2px #333;
	font-size: 30px;
	color: hsl(51, 100%, 50%) ;
}

#right {
	float: left;
	height:100%;
	margin: 0 0 0 5px;
	overflow: hidden;
	text-align: center;
	width: 58%;
}

.tpright {
	float: right;
}

.tpright > li {
	display: none;
	color: #111111;
	cursor: pointer;
	float: left;
	list-style: none;
	margin: 5px 5px 5px 15px;
}

.tpright > li:hover {
	color: #330066;
}

.tpright .micon {
	color: #111111;
	cursor: pointer;
	display: block;
	font-size: 36px;
	margin: 5px 5px 5px 15px;
}

.tpright > li.alfa { background: url(../img/home.png) left no-repeat; background-size: 30px; display: none; height: 30px; padding: 10px 0 0 40px; }

.tpright.responsive > li {
	display: block;
	text-align: left;
	width: 100%;
}

.tpright > li.seen { display: block; }

.solarp{
	display: none;
}

.story {
	display: inline-block;
  height:260px;
  background:#fff;
  border-radius:20px;
  -webkit-border-radius:20px;
  -moz-border-radius:20px;
  opacity:1;
  text-align: center;
  margin: 80px auto;
  width: 100%;
  z-index: 2;
}

.title {
	font-size: 30px;
}

.prodbtn {
	background: #330066;
	border-radius:10px;
	display: inline-block;
	color: hsl(51, 100%, 50%) ;
	cursor: pointer;
	font-size: 20px;
	height: 30px;
	margin:15px;
	overflow: hidden;
	text-shadow: -1px 1px 1px #333;
	width: 85%;
	-webkit-border-radius:10px;
  	-moz-border-radius:10px;
}

.prodbtn:hover {
	background: hsla(51, 100%, 50%, 1);
	color: hsl(120, 20%, 0%) ;
}

.break { background: #fff; color: #330066; font-size: 20px; height: 100px; letter-spacing: .1em; margin: 20px auto; overflow: hidden; padding-top: 20px; text-align: center; width: 100%; }

.clearfix { float: left; height: 150px; overflow: hidden; width: 100%; }

.about { background: #fff; color: #333; font-size:1em; min-height: 500px; letter-spacing: .1em; margin: 10px auto; overflow: hidden; text-align: center; width: 100%; }

.product { background: #fff; color: #333; font-size:1em; min-height: 500px; letter-spacing: .1em; margin: 10px auto; overflow: hidden; text-align: center; width: 100%; }

.innerproduct { font-size:1em; letter-spacing: .1em; margin: 10px auto; overflow: hidden; text-align: center; width: 98%; }

.details { float: left; overflow: hidden; text-align: left; width: 100%; }

.detailsleft { border-bottom: 1px solid #ccc; float: left; overflow: hidden; width: 100%; }

.detailsright { 
	float: left; margin: 0 5px 0 2px; overflow: hidden; text-align: left; width: 100%; 
}

.howleft { overflow: hidden; text-align: center; width: 100%; }

.howright { overflow: hidden; text-align: center; width: 100%; }

.divcampaign { border-top-right-radius: 40px; cursor: pointer; display: inline-block; min-height:170px; margin: 40px 20px 0 0; overflow: hidden; text-align: center; width: 35%;
}

.imgcampaign { background: #328EFD; border-top-right-radius: 40px; float: left; height:58%; margin: 0; overflow: hidden; text-align: center; width: 100%;
}

.imgcampaign:hover { transform: scale(1.01, 1.01); }

.txtcampaign { color: #002300; float: left; font-weight: normal; min-height: 40%; margin: 0; overflow: hidden; text-align: center; width: 100%;
}

.imgcampaign:hover { box-shadow: 3px 3px 5px #333; }
.imgcampaign:hover + .txtcampaign { color: #bbb; }

.txtcampaign:hover { color: #bbb; }

/*-----------------------------------------------*/

.gallery {
	margin-left: -40px;
}

.gallery > li {
	border-radius: 8px;
	color: green;
	cursor: pointer;
	display: inline-block; 
	list-style: none;
	overflow: hidden;
}

.gallery > li:hover {
	color: #111111;
}

.thumbnail {
	height: 150px;
	width: 200px;
}

.contact { background: url(../img/reception.png) left no-repeat; color: #fff; font-size:1em; min-height: 500px; letter-spacing: .1em; margin: 50px auto; overflow: hidden; text-align: center; width: 100%; }
.blinds { background: #330066; color: #fff; font-size:1em; min-height: 500px; letter-spacing: .1em; opacity: 0.8; overflow: hidden; text-align: center; width: 100%; z-index: 2; }

.contactleft { float: left; margin: 20px 0 0 10px; text-align: left; width: 100% }

.contactmid { background: #fff; border-radius: 4px; display: inline-block; height: 0.1%; margin: 60px auto; width: 90% }

.contactright { float: left; width: 85% }

@media only screen and (min-width: 768px) {
	/* For desktop: */	
	.topbar { height:60px; overflow: auto; }
	
	#company { display: block; }
	
	.tpright > li { display: block; }
	
	.tpright .micon { display: none; }
	
	.alfa { background: url(../img/home.png) left no-repeat; background-size: 30px; display: none; height: 30px; padding: 10px 0 0 40px; }
	
	.solarp {
		display: block;
	  width:1000px;
	  height:500px;
	  /*background:url(../img/canopy.png) left no-repeat;*/
	  position:absolute;
	  border-radius:20px;
	  left: 10%;
	  bottom: 0;
	  -webkit-border-radius:20px;
	  -moz-border-radius:20px;
	  opacity:1;
	  text-align: center;
	  margin: 0px auto;
	  z-index: 1;
	}


	.story {
	  position:absolute;
	  border-radius:20px;
	  right: 0%;
	  bottom: 0;
	  margin: 0px auto;
	  width:500px;
	}
	
	.prodbtn { width: 45% }
	
	.break { height: 50px; padding-top: 0px; }

	.about { margin: 50px; width: 90%; }
	
	.product { margin: 50px auto; }
	
	.innerproduct { margin: 20px; width: 98%; }
	
	.detailsleft {  width: 65%; }
	
	.detailsright {  width: 33%; }
	
	.howleft { float: left; overflow: hidden; text-align: center; width: 55%; }

	.howright { float: left; margin: 0 5px 0 2px; overflow: hidden; text-align: center; width: 43%; }
	
	.divcampaign { float: left; height: 150px; margin: 40px 20px 0 0; overflow: hidden; text-align: center; width: 30%;
}
	
	/*-----------------------------------------------*/
	
	.gallery > li {
		float: left;
		margin: 5px 5px 5px 15px;
	}
	
	/*-----------------------------------------------*/
	
	.contactleft { width: 45% }
	
	.contactmid { float: left; height: 260px; margin: 60px 0 0 50px; width: 0.1%  }
	
	.contactright { float: left; margin: 20px 0 0 10px; width: 45% }
}

.otherproducts > li {
	border-bottom: 1px solid #ccc;
	color: green;
	cursor: pointer;
	float: left;
	height: 50px;
	list-style: none;
	width: 90%;
}

.otherproducts > li a {
	display: block;
}

.otherproducts > li:hover {
	border-bottom: 1px solid #FFCC00;
	background: #002300;
	color: #FFCC00;
}

.sdown {
	border: 2px solid #330066;
	cursor: pointer;
	display: none;
	height: 42px;
	margin: 40px;
	padding-top: 22px;
	border-radius: 150px/150px;
	border-top-left-radius: 340px;
	border-top-right-radius: 340px;
	border-bottom-left-radius: 340px;
	border-bottom-right-radius: 340px;
	text-align: center;
	width: 64px;
	
	animation: bounce 2s infinite ease-in-out forwards alternate;
	
}
.sdown:hover {
	background: #ccc;
	border: 2px solid #333;
}

@keyframes bounce {
    0%{
        transform: rotate(0) translateY(0);
    }
    50%{
        transform: rotate(0.1deg) translateY(5px);
    }
	60%{
        transform: rotate(0) translateY(0);
    }
    100%{
        transform: rotate(0.1deg) translateY(10px);
    }
}

.ll {
	background: #330066;
	border-radius: 2px;
	height: 20px;
	left: 39%;
	position: absolute;
	top: 50%;
	transform: rotate(-45deg); 
	width: 4px;
	
}

.ml {
	background: #330066;
	height: 30px;
	left: 49.8%;
	position: absolute;
	top: 24%;
	width: 2px;
	
}

.rl {
	background: #330066;
	border-radius: 2px;
	height: 20px;
	left: 58%;
	position: absolute;
	top: 50%;
	transform: rotate(45deg); 
	width: 4px;
	
}

.top { background: #333; border-radius: 3px; color: #ccc; cursor: pointer; display: none; height: 40px; opacity: 0.8; padding: 1.2em 0 0 0; position: fixed; right: 0; bottom: 0; text-align: center; width: 100px; z-index: 10;}

.animation-element {
	display: inline-block;
	opacity: 0;
	-ms-transform: scale(2, 2); /* IE 9 */
    -webkit-transform: scale(2, 2); /* Safari */
    transform: scale(2, 2);
	
	width: 40%;
}

.in-view {
	opacity: 1;
	
	animation:moveForward 1s linear;
  animation-direction: alternate;
  /* Chrome, Safari, Opera */
  -webkit-animation:moveForward 1s linear; 
  -webkit-animation-delay: 0s;
}

/* Standard syntax */
@keyframes moveForward{
  0% {-ms-transform: scale(1, 1); /* IE 9 */
    -webkit-transform: scale(1, 1); /* Safari */
    transform: scale(1, 1);}
  100% {-ms-transform: scale(2, 2); /* IE 9 */
    -webkit-transform: scale(2, 2); /* Safari */
    transform: scale(2, 2);}
}

/* Chrome, Safari, Opera */
@-webkit-keyframes moveForward{
  0% {-ms-transform: scale(1, 1); /* IE 9 */
    -webkit-transform: scale(1, 1); /* Safari */
    transform: scale(1, 1);}
  100% {-ms-transform: scale(2, 2); /* IE 9 */
    -webkit-transform: scale(2, 2); /* Safari */
    transform: scale(2, 2);}
}

#about { background: url(../img/about.jpeg) left no-repeat; background-size: 30px; height: 30px; padding: 10px 0 0 40px; }
#services { background: url(../img/products.png) left no-repeat; background-size: 30px; height: 30px; padding: 10px 0 0 40px; }
#imgframe { float: left; overflow: hidden; text-align: center; width: 98%; }
#capframe { float: left; overflow: hidden; text-align: center; width: 98%; }
#btnframe { float: left; overflow: hidden; text-align: center; width: 98%; }
#photoform { display: none }
#contacts { background: url(../img/contact.png) left no-repeat; background-size: 30px; height: 30px; padding: 10px 0 0 40px; }

/*-----------------------------------------------*/

.containers {
	background:url(../img/canopy4.png) left no-repeat;
	/*background: #111;*/
	height: 100%;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: relative;
  text-align: center; 
 /* background:#333;
  animation:bgChange 20s infinite;
  animation-direction: alternate;
  /* Chrome, Safari, Opera 
  -webkit-animation:bgChange 20s; 
  -webkit-animation-delay: 0s;*/
}

/* Standard syntax */
@keyframes bgChange{
  0% {background:#a1a1a1;}
  50% {background:skyblue;}
  100% {background:#333;}
}

/* Chrome, Safari, Opera */
@-webkit-keyframes bgChange{
  0% {background:#333;}
  25% {background:skyblue;}
  50% {background:deepskyblue;}
  75% {background:skyblue;}
  100% {background:#333;}
}

#scene{
 position:relative;
}

.theSun {
  width:100px;
  height:100px;
  position:absolute;
  animation:sunRising 20s infinite;
  border-radius:50%;
  -moz-border-radius:50%;
  /* Safari and Chrome */
  -webkit-animation:sunRising 20s;
  background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
	background-image: -webkit-radial-gradient(45px 45px, circle cover, yellow, orange);
	background-image: radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
	opacity:0;
}

@keyframes sunRising
{
  0%   {top:70%;left:0%;opacity:1}
  25%  {top:30%;left:25%;opacity:1}
  50%  {top:5%;left:50%;opacity:1}
  75%  {top:30%;left:80%;opacity:1}
  100% {top:70%;left:90%; opacity:0;}
}

@-webkit-keyframes sunRising /* Safari and Chrome */{
  0%   {top:70%;left:0%;opacity:1}
  25%  {top:30%;left:25%;opacity:1}
  50%  {top:5%;left:50%;opacity:1}
  75%  {top:30%;left:80%;opacity:1}
  100% {top:70%;left:90%; opacity:0;}
}

.cloud{
  width:200px;
  height:60px;
  background:white;
  position:relative;
  border-radius:200px;
  -webkit-border-radius:200px;
  -moz-border-radius:200px;
  opacity:0;
}

.cloud:before, .cloud:after{
  content:'';
  background:white;
  position:absolute;
  width:100px;
  height:80px;
  top:-15px;
  left:10px;
  border-radius: 100px;
	-moz-border-radius: 100px;
	-webkit-border-radius: 100px;
  -webkit-transform: rotate(30deg);
	transform: rotate(30deg);
	-moz-transform: rotate(30deg);
}

.cloud:after {
	width: 120px; height: 120px;
	top: -55px; left: auto; right: 15px;
}

.c1 {
  margin-top:100px;
	-webkit-animation: moveclouds 20s linear infinite;
	-moz-animation: moveclouds 20s linear infinite;
	-o-animation: moveclouds 20s linear infinite;
	opacity:0;
}
.c2 {
  margin-top:30px;
	-webkit-animation: moveclouds 22s linear infinite;
	-moz-animation: moveclouds 22s linear infinite;
	-o-animation: moveclouds 22s linear infinite;
  animation-delay:-2s;
  -webkit-animation-delay:-2s; /* Safari and Chrome */ 
  -moz-animation-delay: -2s /* Firefox */
  opacity:0;
}
@-webkit-keyframes moveclouds {
	0% {left: 80%;opacity:0.8}
  50% {opacity:0.7;}
  75% {opacity:0.6;}
  85% {opacity:0;}
	100% {left: 0%;opacity:0;}
}
@-moz-keyframes moveclouds {
	0% {left: 80%;opacity:0.8}
  50% {opacity:0.7;}
  75% {opacity:0.6;}
  85% {opacity:0;}
	100% {left: 0%;opacity:0;}
}
@-o-keyframes moveclouds {
	0% {left: 80%;opacity:0.8}
  50% {opacity:0.7;}
  75% {opacity:0.6;}
  85% {opacity:0;}
	100% {left: 0%;opacity:0;}
}

.building {
	width: 300px;
	height: 350px;
	  position:absolute;
	  left: 10%;
	  bottom: 0;
}

.drum {
	width:150px;
 	height:46px;
	/*background:url(../img/swh.png) no-repeat;*/
  	position:absolute;
	top: 0;
	/*-ms-transform: rotate3d(0deg, -20deg, -10deg); 
    -webkit-transform: rotate3d(-20deg, -20deg, -10deg); 
    transform: rotateZ(0deg);*/
	
	
	/*animation:Charge 20s infinite;
	animation-direction: alternate;
   Chrome, Safari, Opera 
  -webkit-animation:Charge 20s; 
  -webkit-animation-delay: 0s;*/
  z-index: 1;
}

.panel {
	width:80px;
 	height:10px;
	background:green;
  	position:absolute;
	top: 8%;
	left:10%;
	-webkit-transform: rotate(20deg);
	transform: rotate(20deg);
	-moz-transform: rotate(20deg);
	animation:Charge 20s infinite;
	animation-direction: alternate;
  /* Chrome, Safari, Opera */
  -webkit-animation:Charge 20s; 
  -webkit-animation-delay: 0s;
}

/* Standard syntax */
@keyframes Charge{
  0% {background:red;}
  25% {background:yellow;}
  50% {background:orange;}
  75% {background:yellow;}
  100% {background:green;}
}

/* Chrome, Safari, Opera */
@-webkit-keyframes Charge{
  0% {background:red;}
  25% {background:orange;}
  50% {background:yellow;}
  75% {background:orange;}
  100% {background:green;}
}

.frame {
	width: 300px;
	height: 310px;
	background:white;
	  position:absolute;
	  border-radius:5px;
	  bottom: 0;
	  -webkit-border-radius:5px;
	  -moz-border-radius:5px;
	  opacity:1;
	  z-index: 1;
}

.window {
	width: 50px;
	height: 50px;
	background:yellow;
	  position:absolute;
	  border-radius:5px;
	  -webkit-border-radius:5px;
	  -moz-border-radius:5px;
	  opacity:1;
	  z-index: 1;
}

.w1 {
	background: #a1a1a1;
	left: 10%;
	top: 10%;
}

.w2 {
	left: 40%;
	top: 10%;
	animation:bgLight 31s;
	/* Chrome, Safari, Opera */
  -webkit-animation:bgLight 31s; 
  -webkit-animation-delay: 0s;
}

.w3 {
	left: 70%;
	top: 10%;
	animation:bgLight 30s;
	/* Chrome, Safari, Opera */
  -webkit-animation:bgLight 30s; 
  -webkit-animation-delay: 0s;
}

.w4 {
	left: 10%;
	top: 40%;
	animation:bgLight 28s;
	/* Chrome, Safari, Opera */
  -webkit-animation:bgLight 28s; 
  -webkit-animation-delay: 0s;
}

.w5 {
	left: 40%;
	top: 40%;
	animation:bgLight 25s;
	/* Chrome, Safari, Opera */
  -webkit-animation:bgLight 25s; 
  -webkit-animation-delay: 0s;
}

.w6 {
	left: 70%;
	top: 40%;
	animation:bgLight 23s;
	/* Chrome, Safari, Opera */
  -webkit-animation:bgLight 23s; 
  -webkit-animation-delay: 0s;
}

.w7 {
	background: yellow;
	width:170px;
	height:93px;
	left: 10%;
	top: 70%;
	animation:bgLight 22s;
	/* Chrome, Safari, Opera */
  -webkit-animation:bgLight 22s; 
  -webkit-animation-delay: 0s;
}

.w8 {
	left: 70%;
	height:93px;
	top: 70%;
	animation:bgLight 20s;
	/* Chrome, Safari, Opera */
  -webkit-animation:bgLight 20s; 
  -webkit-animation-delay: 0s;
}

/* Standard syntax */
@keyframes bgLight{
  0% {background:#a1a1a1;}
  50% {background:#cccccc;}
  95% {background:#a1a1a1;}
  98% {background:#a1a1a1;}
  100% { background: yellow;}
}

/* Chrome, Safari, Opera */
@-webkit-keyframes bgLight{
  0% {background:#a1a1a1;}
  25% {background:#bbbbbb;}
  50% {background:#cccccc;}
  95% {background:#a1a1a1;}
  98% {background:#a1a1a1;}
  100% {background: yellow;}
}

/* Standard syntax */
@keyframes bgLight2{
  0% {background:#a1a1a1;}
  50% {background:#cccccc;}
  95% {background:#a1a1a1;}
  98% {background:#a1a1a1;}
  100% { background: yellow;}
}

.text {
	margin: 40px 10px 10px 10px;
	color:#333333;
}

.t1 {
	text-align: left;
}

.t2 {
	color: green;
	cursor: pointer;
}

/*--------Carousel--------------*/

.col {
	min-height: 200px;
	overflow: hidden;
}

	.carousel {
		margin-bottom: 0;
		padding: 0 40px 30px 40px;
	}
	
	.carousel @media { 
		(max-width:800px) {
			display:none !important;
		}
	}
	
	/* The controlsy */
	.carousel-control {
		left: 0px;
		height: 40px;
		width: 40px;
		background: none repeat scroll 0 0 #222222;
		border: 4px solid #FFFFFF;
		border-radius: 23px 23px 23px 23px;
		margin-top: 100px;
	}
	
	.carousel-control.right {
		right: 0px;
	}
	
	/* The indicators */
	.carousel-indicators {
		right: 50%;
		top: auto;
		bottom: -20px;
		margin-right: -19px;
	}
	
	/* The colour of the indicators */
	.carousel-indicators li {
		background: #cecece;
	}
	
	.carousel-indicators .active {
		background: #428bca;
	}
	
	
	 /* The Overlay (background) */
.overlay {
    /* Height & width depends on how you want to reveal the overlay (see JS below) */   
    height: 100%;
    width: 0;
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    left: 0;
    top: 0;
    background-color: rgb(0,0,0); /* Black fallback color */
    background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
    overflow-x: hidden; /* Disable horizontal scroll */
    transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

/* Position the content inside the overlay */
.overlay-content {
    position: relative;
    top: 5%; /* 25% from the top */
    width: 80%; /* 100% width */
    text-align: center; /* Centered text/links */
    margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}

/* The navigation links inside the overlay */
.overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #818181;
    display: block; /* Display block instead of inline */
    transition: 0.3s; /* Transition effects on hover (color) */
}

/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus {
    color: #f1f1f1;
}

/* Position the close button (top right corner) */
.overlay .closebtn {
    position: absolute;
    top: 5px;
    right: 45px;
    font-size: 60px;
}

/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
    .overlay a {font-size: 20px}
    .overlay .closebtn {
        font-size: 40px;
        top: 15px;
        right: 35px;
    }
}

.popup {
    /* Height & width depends on how you want to reveal the overlay (see JS below) */   
    height: 100%;
    width: 0;
    position: fixed; /* Stay in place */
    z-index: 2; /* Sit on top */
    left: 0;
    top: 0;
    text-align: center; /* Centered text/links */
    overflow-x: hidden; /* Disable horizontal scroll */
    transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

/* Position the content inside the overlay */
.popup-content {
	background-color: rgb(0,0,0); /* Black fallback color */
	background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
	border: rgb(0,0,0) 4px solid; /* Black fallback color */
    border: rgba(0,0,0, 0.9) 4px solid; /* Black w/opacity */
	border-radius: 8px;
	display: inline-block;
    position: relative;
	overflow-x: hidden;
    top: 25%; /* 25% from the top */
	height: 150px;
    width: 50%; /* 100% width */
    text-align: center; /* Centered text/links */
    margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}