html{
	position:relative;
	min-height:100%;
}
body {
  font-family: Courier New;
  text-align: center;
  height: auto;
  background-color:#f2f2f2;
  margin: auto 0;
}
footer{
	padding-bottom:10px;
	height:20px;
	position:absolute;
    bottom:0;
	width:99%;
}
h1{
  margin:auto 0;
  color: white;
  font-size: 60px;
  vertical-align:middle;
}
h2{
	color:white;
	font-style:italic;
	padding-left:10px;
	padding-right:10px;
	margin:20px;
}
h3 {
	color: white;
	margin:0px;
	font-size:28px
}
h4{
	font-weight:bold;
	color:white;
	font-size:23px;
	margin:0px;
	
}
h6{
	color:#31394d;;
}
h5{
	color:white;
	font-size:39px;
	font-weight:bold;
	margin:20px;
}
p {
  color: white;
}
div{
	padding-left:20px;
	padding-right:20px;
	display:inline-block;
	border-radius:20px;
}
.full{
	padding:0px;
}
.image-cropper {
  width: 50px;
  height: 50px;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
  padding:0px;
}

.image-cropper-lorge {
	width: 500px;
  height: 500px;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
  padding:0px;
}

img {
  display: inline;
  margin: 0 auto;
  position:center;
}
.imgcrop {
	height: 100%;
	display: inline;
	margin: 0 auto;
	width: auto;
}
a:link{
	color: #31394d;
}
a:visited{
	color: #31394d;
}
a.nounderline {
	text-decoration: none; 
	color:white;
}
.para{
	width:950px;
	background-image:linear-gradient(#101319 0%,#31394d 5%);
	margin:10px;
	border-radius:7px;
	padding:0px;
	overflow-y:hidden;
	overflow-x:hidden;
}
.playlist{
	padding:0px;
}
.paraSlideCont{
	width:950px;
	height:90px;
	background-image:transparent;
	padding:0px;
	overflow-y:hidden;
	overflow-x:hidden;
	vertical-align:middle;
}
.paraslide{
	width:950px;
	height:90px;
	position:relative;
	background-image:transparent;
	margin:10px;
	border-radius:7px;
	padding:0px;
	overflow-y:visible;
	animation-duration:20s;
	animation-name:headScroll;
	animation-direction:alternate;
	animation-iteration-count: infinite;
	animation-timing-function:linear;
}
.headdiv{
	background-image:linear-gradient(#101319 0%,#31394d 5%);
	padding:0px;
	display:flex;
	justify-content:space-around;
	border-radius:0px;
	height:150px;
	position:sticky;
	top:0;
	margin-bottom:0px;
	z-index: 100;
}
.tickdiv{
	background-color:#009384;
	padding:0px;
	display:flex;
	justify-content:space-around;
	border-radius:0px;
	height:50px;
	position:sticky;
	top:150px;
	margin-bottom:0px;
}
.tickdivspecial{
	background-color:#e8b903;
	padding:0px;
	display:flex;
	justify-content:space-around;
	border-radius:0px;
	height:50px;
	position:sticky;
	top:150px;
	margin-bottom:0px;
}
.paraparent{
	width:950px;
	background-color:transparent;
	margin:auto 0;
	padding:0px;
	overflow-x:hidden;
	border-radius:0px;
	
}
.regdiv{
	width:950px;
	margin:auto;
	padding:0px;
}
.aboutdiv{
	max-width:1200px;
	margin:auto;
	padding:0px;
}
.film{
	width:850px;
	background-image:linear-gradient(#101319 0%,#31394d 10%);
	margin:10px;
	border-radius:20px;
	padding:0px;

}
.flex-container-950{
	width:950px;
	display:flex;
	flex-wrap: wrap;
	background-color:transparent;
	justify-content:space-between;
	padding:0px;
}
.flex-container{
	width:100%;
	display:flex;
	flex-wrap: wrap;
	background-color:transparent;
	justify-content:center;
	padding:0px;
}
.flex-text{
	width:100%;
	height:100%;
	display:flex;
	flex-wrap: wrap;
	background-color:transparent;
	justify-content:center;
	padding:0px;
}
.flex-menu{
	width:100%;
	display:flex;
	flex-wrap: wrap;
	background-color:transparent;
	justify-content:space-between;
	padding:0px;
	margin:0px;
}
.paratext{
	width:95%;
	max-width:950px;
	margin:auto;
	background-image:linear-gradient(#101319 0%,#31394d 5%);
	padding:20px;
}
.paraspecial{
	display: inline-block;
	width: 99%;
	background-color:#e8b903;
	margin:10px;
	border-radius:0px;
	padding:0px;
	overflow-y:hidden;
	overflow-x:hidden;
}
.paratextspecial{
	width:100%;
	max-width:950px;
	margin:auto;
	background-color:#e8b903;
	padding:10px;
}
.companyman{
	border-radius:10px;
	width:270px;
	margin-left:5px;
	margin-right:5px;
	margin-bottom:10px;
	background-image:linear-gradient(#101319 0%,#31394d 5%);}
.spacer{
	width:40px;
	margin:0px;
	padding:0px;
}
.menubutton{
	display:inline-block;
	border-radius:0px !important;
	background-color:transparent;
	justify-content:center;
	padding-left:0px;
	padding-right:0px;
	margin-top:5px;
}
.homebutton{
	width:220px;
	margin-bottom:20px;
	display:inline-block;
	background-color:transparent;
	border-radius:10px;
}

.tech-slideshow {
  width:950px;
  height: 286px;
  margin: 0 auto;
  margin-top:5px;
  position: relative;
  border-radius:20px !important;
  overflow: hidden;
  padding:0px;
  font-size:0; /* THIS IS A HACK TO REMOVE THE "WHITESPACE" BETWEEN IMAGES.
                  YOU COULD ALSO PUT ALL OF THE IMAGES ON THE SAME LINE
                  (eg: <img src=""><img src=""><img src=""> 
                  with no spaces or line-breaks),
                  BUT THAT MAKES THE CODE LESS READABLE SO I'M DOING THIS
                  FOR THE SAKE OF CREATING THIS EXAMPLE FOR YOU */
}
.splash {
	position:relative;
	width:99%;
	height:900px;
	max-width:1200px;
}
.bkg-splash {
	position:absolute;
	z-index:1;
	top:20px;
	left:24%;
	width:1200px;
	max-width:1200px;
}
.fg-splash {
	width:99%;
	max-width:950px;
	position:absolute;
	left:114px;
	z-index:2;
}

.mover-1 {
  height: 286px;
  width: max-content;
  position: absolute;
  overflow-x:hidden;
  top: 0;
  left: 0;
  animation: moveSlideshow 20s linear infinite;
}
.mover-1-offsite {
  height: 286px;
  width: max-content;
  position: absolute;
  overflow-x:hidden;
  top: 0;
  left: 0;
  animation: moveSlideshowOffsite 10s linear infinite;
}

.mover-1 img {
  display:inline-block;
  vertical-align:middle;
  width:200px;
  margin:0;
}

@keyframes moveSlideshow {
  100% { 
    transform: translateX(-3200px);  
  }
}
@keyframes moveSlideshowOffsite {
  100% { 
    transform: translateX(-1000px);  
  }
}

@keyframes headScroll {
	0%{top:0px;}
	100%{top:-700px;}
}
.ticker-tape {
  display: flex;
  width: 100%;
  overflow: hidden;
  height: 50px;
  padding-left: 50px;
}

.ticker-tape .ticker {
  height: 50px;
  line-height: var(--height);
  white-space: nowrap;
  padding-right: 100%;
  
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -webkit-animation-name: ticker;
  -webkit-animation-duration: var(--speed);
  
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-name: ticker;
  animation-duration: var(--speed);
  
}

.ticker-tape .ticker__item {
  display: inline-block;
  padding: 0 2rem;
  font-size: 30px;
  font-weight:bold;
  color: white;
  font-style:italic;
  margin-top:15px;
}

@-webkit-keyframes ticker {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}

@keyframes ticker {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}

#main-holder {
  width: 50%;
  height: 70%;
  display: grid;
  justify-items: center;
  align-items: center;
  background-color: white;
  border-radius: 7px;
  box-shadow: 0px 0px 5px 2px black;
}

#login-error-msg-holder {
  width: 100%;
  height: 100%;
  display: grid;
  justify-items: center;
  align-items: center;
}

#login-error-msg {
  width: 23%;
  text-align: center;
  margin: 0;
  padding: 5px;
  font-size: 12px;
  font-weight: bold;
  color: #8a0000;
  border: 1px solid #8a0000;
  background-color: #e58f8f;
  opacity: 0;
}

#error-msg-second-line {
  display: block;
}

#login-form {
  align-self: flex-start;
  display: grid;
  justify-items: center;
  align-items: center;
}

.login-form-field::placeholder {
  color: #3a3a3a;
}

.login-form-field {
  border: none;
  border-bottom: 1px solid #3a3a3a;
  margin-bottom: 10px;
  border-radius: 3px;
  outline: none;
  padding: 0px 0px 5px 5px;
}

#login-form-submit {
  width: 100%;
  padding: 7px;
  border: none;
  border-radius: 5px;
  color: white;
  font-weight: bold;
  background-color: #3a3a3a;
  cursor: pointer;
  outline: none;
}

.gallery {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
     gap: 5px;
     padding: 5px;
 }
 .gallery-item {
     overflow: hidden;
	 
 }
 .gallery-item img {
     width: 100%;
     height: auto;
     display: block;
	 border-radius: 20px;

 }
 .modal {
     display: none;
     position: fixed;
     z-index: 1;
     padding-top: 100px;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     overflow: auto;
     background-color: rgba(0, 0, 0, 0.9);
 }
 .modal-content {
     margin: auto;
     display: block;
     max-width: 90%;
     max-height: 90%;
 }

 .close {
     position: absolute;
     top: 15px;
     right: 35px;
     color: #f1f1f1;
     font-size: 40px;
     font-weight: bold;
     transition: 0.3s;
 }

 .close:hover,
 .close:focus {
     color: #bbb;
     text-decoration: none;
     cursor: pointer;
 }

:root {
  --height: 20px;
  --speed: 120s;
}