html,body 
{
  height:100%;
  margin:0;
}

#header
{
    background: rgba(59,56,56,255);
    position: fixed;
    width: 100%;
    z-index: 10;
}

#slogan
{
    display:block;
    margin:auto;
    width:100%;
    height:auto;
    margin-top: 5%;
    margin-bottom: 5%;
}

#learn-more
{
    float: right;
    background: rgba(87, 113, 136,0.9);
    border: none;
    border-radius: 10px;
    outline: none;
    height: 50px;
    width: 200px;
    font-size: 18px;
    color: white;
    cursor: pointer;
}

#Corona
{
    float: left;
    background: rgba(188, 0, 1,1);
    border: none;
    border-radius: 10px;
    outline: none;
    height: 50px;
    width: 200px;
    font-size: 18px;
    color: white;
    cursor: pointer;
}

#COVID
{
    float: centre;
    background: rgba(255, 255, 255,1);
    border: none;
    border-radius: 10px;
    outline: none;
    font-size: 18px;
    color: rgba(188, 0, 1,1);
    cursor: pointer;
}


.fullpage 
{
    position: absolute;
    width: 100%;
    height: 100%;
}
.section 
{
    position: relative;
    width: 100%;
    height: 100%;
    float: left;
}
#section-0
{
	background-image:url("../images/background4.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#section-1
{
	height:auto;
	margin:0;
	padding:0;
	font-family:"arial",heletica,sans-serif;
	font-size:12px;
    background-color: white;
}
 
@-webkit-keyframes animate {
	from {background-position:0 0;}
	to {background-position: 500px 0;}
}
 
@-moz-keyframes animate {
	from {background-position:0 0;}
	to {background-position: 500px 0;}
}
 
@-ms-keyframes animate {
	from {background-position:0 0;}
	to {background-position: 500px 0;}
}
 
@-o-keyframes animate {
	from {background-position:0 0;}
	to {background-position: 500px 0;}
}
 
@keyframes animate {
	from {background-position:0 0;}
	to {background-position: 500px 0;}
}

#section-2
{
	background-color:rgba(87, 113, 136,1);
	height:auto;
}

#section-2 h1
{
	color: white;
}

#section-2 p
{
	color: white;
}

#section-6
{
	height:auto;
	margin:0;
	padding:0;
	font-family:"arial",heletica,sans-serif;
	font-size:12px;
    background:white;
}

h1
{
	text-align: center;
  font-family: 'Cairo', sans-serif;
	color: rgba(59,56,56,1);
	font-size:28px;
}

h2
{
	font-family: 'Cairo', sans-serif;
	font-size:20px;
}

hr
{
	margin-left:10%;
	margin-right:10%;
	border-color:rgba(87, 113, 136,1);
}

p
{
	text-align: justify;
	font-family: 'Cairo', sans-serif;
	color: rgba(59,56,56,1);
	font-size:20px;
}

#section-3
{
	background-color:rgba(255, 255, 255,1);
	height:auto;
}

#section-3 h1
{
	color: #231f20;
}

#section-3 p
{
	color: #231f20;
}

#section-4
{
	background-color:rgba(87, 113, 136,1);
	height:auto;
}

#section-4 h1
{
	color: white;
}

#section-4 p
{
	color: white;
}

#section-5
{
	background-color:rgba(255, 255, 255,1);
	height:auto;
}

#section-5 h1
{
	color: #231f20;
}

#section-5 p
{
	color: #231f20;
}


#section-7
{
	background-color:rgba(87, 113, 136,1);
	height:auto;
}

#section-7 h1
{
	color: white;
}

#section-7 p
{
  color: white;
  text-justify: auto;
}


#section-1 p
{
	text-align: center;
	font-family: 'Cairo', sans-serif;
	color: rgba(59,56,56,1);
	font-size:20px;
	margin-left:15%;
	margin-right:15%;
}

#section-1 a
{
	text-decoration:none;
}

#section-2 a
{
	text-decoration:none;
}


#section-6 input
{
	text-align:center;
	height:35px;
	width:300px;
	border: solid 1px #333333;
	color:black;
    outline: none;
}

#section-6 textarea
{
	text-align:center;
	width:300px;
	border: solid 1px #333333;
	background-color:white;
	color:black;
    outline:none;
}

#section-6 button
{
	background-color:rgba(87, 113, 136,1);
	border-radius:20px;
	height:35px;
	width:150px;
	border:none;
	color:white;
}

/*INPUT PLACEHOLDER COLOR CHANGE*/

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #565656;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #565656;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #565656;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #565656;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:    #565656;
}

#wrapper
{
	text-align:center;
	height:100%;
	margin-top:2%;
}

/* SIDE NAVIGATION MENU */
#mySidenav
{
	background:rgba(59,56,56,0.8);
	background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.sidenav {
    height: 100%; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 11; /* Stay on top */
    top: 0;
    left: 0;
    background-color: rgba(59,56,56,0.8); /* Black*/
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 60px; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

/* The navigation menu links */
.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 20px;
    color: white;
    display: block;
    transition: 0.3s;
    font-family: 'Cairo', sans-serif;
}

.sidenav p{
	font-size:25px;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover, .offcanvas a:focus{
    color: #3995d1;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
    transition: margin-left .5s;
    padding: 20px;
    position: relative;
  	top: 35%;
  	transform: translateY(-50%);
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
}

/* RESPONSIVE GRID SYSTEM */

.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.row {
  position: relative;
  width: 100%;
}

.row [class^="col"] {
  float: left;
  margin: 0.5rem 2%;
  min-height: 0.125rem;
}

.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
  width: 96%;
  padding-bottom: 20px;
  padding-top: 20px;
}

.col-1-sm {
  width: 4.33%;
}

.col-2-sm {
  width: 12.66%;
}

.col-3-sm {
  width: 21%;
}

.col-4-sm {
  width: 29.33%;
}

.col-5-sm {
  width: 37.66%;
}

.col-6-sm {
  width: 46%;
}

.col-7-sm {
  width: 54.33%;
}

.col-8-sm {
  width: 62.66%;
}

.col-9-sm {
  width: 71%;
}

.col-10-sm {
  width: 79.33%;
}

.col-11-sm {
  width: 87.66%;
}

.col-12-sm {
  width: 96%;
}

.row::after {
	content: "";
	display: table;
	clear: both;
}

.hidden-sm {
  display: none;
}

@media only screen and (min-width: 33.75em) {  /* 540px */
  .container {
    width: 80%;
  }
}

@media only screen and (min-width: 45em) {  /* 720px */
  .col-1 {
    width: 4.33%;
  }

  .col-2 {
    width: 12.66%;
  }

  .col-3 {
    width: 21%;
  }

  .col-4 {
    width: 29.33%;
  }

  .col-5 {
    width: 37.66%;
  }

  .col-6 {
    width: 46%;
  }

  .col-7 {
    width: 54.33%;
  }

  .col-8 {
    width: 62.66%;
  }

  .col-9 {
    width: 71%;
  }

  .col-10 {
    width: 79.33%;
  }

  .col-11 {
    width: 87.66%;
  }

  .col-12 {
    width: 96%;
  }

  .hidden-sm {
    display: block;
  }
}

@media only screen and (min-width: 60em) { /* 960px */
  .container {
    width: 75%;
    max-width: 60rem;
  }
}

#send-button
{
    outline:none;
    background-color: rgb(87, 113, 136);
    cursor: pointer;
}

#footer
{
    width: 100%;
    text-align: center;
    z-index: 1;
    position: fixed;
    bottom:0;
    height: 30px;
    background-color: rgba(87, 113, 136,1);
    font-family:"arial",heletica,sans-serif;
    color: white
}

#footer p
{
    font-size: 18px;
    color: white;
    margin:0;
}

.mapouter
{
  text-align:center;
  height:350px;
  width:100%;
}

.gmap_canvas 
{
  text-align:center;
  overflow:hidden;
  background:none!important;
  height:350px;
  width:400px;
  display: block;
    margin: auto;
}