* {
  box-sizing: border-box;
  }

#topbar
  {
  position:relative;
  margin-left:auto;
  width:100vw;
  height: 40px;
  background: linear-gradient(#3d226d,#7315c3);
  color: #fff;
  text-align: center;
  font-weight: 400;
  }

#topbar_container
  {
  position:relative;
  margin-left:auto;
  margin-right:auto;
  height:100%;
  line-height:40px;
  max-width:1200px;
  background-color:transparent;
  overflow:hidden;
  }

#topbar_centre
  {
  position:relative;
  margin-left:auto;
  margin-right:auto;
  height:100%;
  max-width:600px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: center;
  font-family: 'Roboto', sans-serif;
  font-weight:bold;
  font-size:calc(10px + 0.45vw);
  }

#topbar_right
  {
  float:right;
  height:32px;
  margin-right:30px;
  margin-left:0px;
  }

 @media only screen and (max-width: 600px) {
  #topbar_right {
    height: 20px;
  }
}

#topbar_right:hover
  {
  cursor:pointer;
  }

#wrapper
  {
  position:relative;
  margin-left:auto;
  margin-right:auto;
  text-align:left;
  width:100vw;
  max-width:1200px;
  height:100vh;
  background-color:white;
  overflow:hidden;
  }

#banner
 {
  height:5vh;
  margin-bottom:5px;
 }

ul {
  list-style-type: none;
  padding: 0;
  overflow: hidden;
  float:left;
  z-index:2;
}

ul li {
  float: right;
  padding-left:calc(8px + 1.5vw);
  font-weight:bold;
  text-decoration:none !important;
}

ul li a{
  text-decoration:none !important;
  font-size:20px;
  line-height:32px;
  font-weight:bold;
  font-family: 'Roboto', sans-serif;
}

li a:hover{
 text-decoration:underline;
}

#banner img{
 margin:10px 0px 0px 5px;
 height:110%;
 float:left;
}

 #loginpanel
  {
  position: absolute;
  margin-top:10px;
  margin-left:calc(100% - 300px);
  z-index:6;

  width:250px !important;
  height:140px;

  padding:5px;

  background-color:#fff;

  border:solid 3px #0331dc;
  border-radius: 5px;

  font-family: 'Roboto', sans-serif;
  font-size:16px;

  font-weight:bold;
  line-height:25px;

  display:none;
  }


#paneltitle
    {
    width:100%;
    text-align:center;
    color:#a64499;
    margin-bottom:10px;
    font-size:18px;
    color:#0331dc;
    }

#loginpanel label
    {
    left:5px;
    font-size:14px;
    }

.left
    {
    float:left;
    }

#loginpanel input
    {
    float:right;
    width:150px;
    border:solid 1px #0331dc;
    border-radius: 5px;
    font-weight:bold;
    padding-left:2px;
    font-size:14px;
    }

#loginpanel select
    {
    width:220px;
    margin-top:0px;
    height:22px;
    }

#loginpanelclose
	{
	float:right;
	cursor:pointer;
	}

#loginpanel button
    {
    width:70px;
    height:25px;
    margin-top:10px;
    color:#fff;
    background-color:#0331dc;
    font-size:14px;
    font-weight:bold;
    cursor:pointer;
    border-radius: 5px;

    float:left;
    margin-left:37px;
    }

#loginpanel button:hover
  {
  background-color:#63a3f9;
  cursor:pointer;
  color:#000;
  font-weight:bold;
  }

#reset
  {
   margin-left:140px !important;
  }

#reset, #oops, #who
  {
  display:none;
  }

.row {
  width: 100%;
  margin-top:30px;
}

.column {
  width:100%;
  height:600px;
}

@media (min-width: 800px) {
  .column {
    width: 50%;
    float:left;
  }
  .row {
    content: "";
    display: table;
    clear: both;
  }
}

#map
 {
  background-color:red;
 }

#form, #map
 {
  background-color:#fff;
 }

#form h2
{
 width:100%;
 text-align: center;
 font-family: 'Merriweather', serif;
 font-weight:bold;
 font-size:calc(16px + 1vw);
 text-align:center;
}

#form label
{
 font-family: 'Roboto', sans-serif;
 font-weight:bold;
 font-size:calc(12px + 0.25vw);

 float:left;
 margin-left:5%;
 margin-bottom:20px;
 width:95%;
}

#form input, #form textarea, #success
  {
  float:right;
  width:70%;
  font-size:calc(12px + 0.25vw);
  color:#7116bf;
  padding:2px;
  font-weight:bold;
  }

  #form textarea
   {
   resize: none;
   }

::placeholder
  {
  color: #7116bf;
  opacity: 0.5;
  }

 #form button
    {
    width:100px;
    height:30px;
    margin-top:10px;
    color:#fff;
    background-color:#7116bf;
    font-size:18px;
    font-weight:bold;
    cursor:pointer;
    border-radius: 5px;
    float:right;
    margin-right:calc(35% - 35px);
    }
    
  #success
    {
     margin-top:20px;
     border:solid 2px #7116bf;
     display:none;
    }
    
   #success h4
   {
    font-family: 'Roboto', sans-serif;
    font-weight:bold;
    font-size:calc(12px + 0.25vw);
    width:100%;
    text-align:center;
   }
