* {
  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;
}

.container {
width:100%;
background-color:#fff;
margin-top:30px;
}

video
 {
  width:100%;
 }

#overlay
 {
  width:100%;
  position:absolute;
  top:calc(40px + 4vh);
  padding-bottom:56.25%;
  background-color:transparent;
  background-image: linear-gradient(290deg, #2F174B 37%, #4B28E1BF 86%);
    opacity: 0.79;
    transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
  z-index:4;
 }

 .slider
  {
  width:100%;
  height:100%;
  display:none;
  font-size:calc(12px + 0.5vw)
  }

 .slider img
   {
   height:100%;
   width:auto;
   float:left;
   }

 #loginpanel, #selectpanel
  {
  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;
  }

 #selectpanel
  {
   height:100px;
  }

#selectpanel button
  {
   width:100px;
   height:30px;
   background-color:#fff;

   background-color:#fff;

  border:solid 3px #0331dc;
  border-radius: 5px;

  font-family: 'Roboto', sans-serif;
  font-size:16px;

  font-weight:bold;

  margin-left:11px;

  cursor:pointer;
  }

#paneltitle, #selecttitle
    {
    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;
  }

#centre_panel
 {
  position:absolute;
  top:40vh;
  z-index:8;
  width:70%;
  margin-left:15%;
  height:120px;
  color:#fff;
  display:block;
  background-color:transparent;
 }

 @media only screen and (max-width: 900px) {
  #centre_panel {
    top: 20vh;
  }
}

#centre_panel h4
  {
  font-family: 'Roboto', sans-serif;
  font-weight:bold;
  font-size:calc(10px + 0.25vw);
  }

 #centre_panel h2, #centre_panel h1
  {
   font-family: 'Merriweather', serif;
   font-weight:bold;
   font-size:calc(2vw);
   text-align:center;
  }

#centre_panel h1
  {
   font-size:calc(2.5vw);
  }