body{
	background-color:#00323c;
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover;
	height:100vh;
	width:auto;
	font-family:verdana;
}

p{
    color:#ffffff;
}

h1,h2,h3,h4,h5,h6{
    color:#ffffff;
}

#main-header{
	text-align:center;
	background-color:#00323c;
	height:12.5vw;
	max-height:17.5vh;
	width:auto;
	border:2px solid #ffffff;
	border-radius:90px;
	
}

#UZIG{
    height:100%;
    display:block;
    width:auto;
    opacity:1;
    margin:auto;
    
}

#logomain1,#logomain2{
	height: 100%;
	opacity:1;
	-webkit-animation:spin 8s linear infinite;
	-moz-animation:spin 8s linear infinite;
	animation:spin 8s linear infinite;
}

@-moz-keyframes spin {100%{-moz-transform:rotate(360deg);}}
@-webkit-keyframes spin {100%{-webkit-transform:rotate(360deg);}}
@keyframes spin {100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}

.tagline{
    width:100%;
	text-align:center;
	font-family:lato;
	font-size:2vw;
	color:#ffffff;
	text-shadow: #000000 .5px .5px;
	margin-top:-7px;
	margin-bottom:-7px;
}

#mainlogin{
	display: block;
	align-items:center;
    background-color:#00000055;
	width:50%;
	height:15%;
	font-size:5vw;
	font-family:verdana;
	color:#ffffff;
	border-color:#ffffff;
	margin-top: 5%;
	margin-bottom:5%;
	text-align:center;
	border-radius:90px;
}

button:hover {
  opacity: 0.8;
}

input[type=text], input[type=password] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

.cancelbtn {
  width: auto;
  padding: 10px 18px;
  background-color: #f44336;
}

.imgcontainer {
  text-align: center;
  margin: 24px 0 12px 0;
  position: relative;
}

.avatar {
  width: 50%;
  opacity:.7;
}

.container {
  padding: 16px;
}

span.psw {
  float: right;
  padding-top: 16px;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color:#000000;
  background-color:#000000bb;
  padding-top: 25px;
}

.modal-content {
  background-color: #323639;
  margin: 1% auto 15% auto;
  border: 2px solid #ffffff;
  width: 100vh;
  max-width:80vw;
  min-width:55vw;
  border-radius:25px;
  padding:5%;
}

.usrlabel{
    color:#ffffff;
}

.usrinput{
    color:#ffffff;
    background-color:#00000055;
}

.pswdlabel{
    color:#ffffff;
}

.pswdinput{
    color:#ffffff;
    background-color:#00000055;
}

#login2{
    width:auto;
    min-width:28%;
    height:7vw;
    max-height:10vh;
    margin:10%;
    color:#ffffff;
    background-color:#00000055;
    border-radius:90px;
    border-color:#ffffff;
    font-size:3.5vw;
}

.rememberme{
    color:#ffffff;
    font-size:3vw;
}

.register{
    width:auto;
    min-width:28%;
    height:7vw;
    max-height:10vh;
    margin:10%;
    color:#ffffff;
    background-color:#00000055;
    border-radius:90px;
    border-color:#ffffff;
    font-size:3.5vw;
}

.psw{
    color:#ffffff;
}

.close {
  position: absolute;
  right: 25px;
  top: 0;
  color: #ff0000;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: red;
  cursor: pointer;
}

#REG-content{
	background-color: #323639;
  margin: 1% auto 15% auto;
  border: 2px solid #ffffff;
  width: 100vh;
	max-width: 80vw;
	min-width: 50vw;
  border-radius:25px;
}

#reg-button{
	width:33%;
	margin-left:33%;
	color:#ffffff;
	background-color:#00000055;
	border-radius:90px;
	border-color:#ffffff;
}

.animate {
  -webkit-animation: animatezoom 0.6s;
  -moz-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
  from {-webkit-transform: scale(0)}
  to {-webkit-transform: scale(1)}
}

@keyframes animatezoom {
  from {transform: scale(0)}
  to {transform: scale(1)}
}

@media screen and (max-width: 300px) {
span.psw {
    display: block;
    float: none;
    }
.cancelbtn {
    width: 100%;
    }
}

.cancelbtn{
    border-radius:90px;
}

.winnercontainer{
    background-color:#ffffff;
    margin:17.5%;
    margin-top:1%;
    margin-bottom:1%;
    align-items:center;
    padding-top:.2%;
    padding-bottom:.2%;
}

#winnerbg{
    background-image:url("../images/gold.jpg");
    background-position:center center;
	background-repeat:no-repeat;
	background-size:cover;
    padding-top:2.5%;
    padding-bottom:2.5%;
    text-align:center;
    width:95%;
    height:95%;
    margin:2.5%;
    margin-top:1.25%;
    margin-bottom:1.25%;
    
}

.winnertitle{
    width:95%;
    opacity:.9;
    
}

.winner{
    width:95%;
}

.picscontainer{
    background-color:#ffffff;
    margin:17.5%;
    margin-top:0;
    margin-bottom:0;
    padding-top:1.25%;
    padding-bottom:1.25%;
}

.pics{
    width:95%;
    margin-left:2.5%;
    margin-right:2.5%;

}

.codecontainer{
    background-color:#ffffff;
    margin:17.5%;
    margin-top:0;
    margin-bottom:0;
    padding-top:1.25%;
    padding-bottom:1.25%;
    word-wrap:break-word;
}

footer{
    text-align:center;
	position:absolute;
	bottom: 1vh;
	height: 3vh;
	width:100%;
	font-family: verdana;
	font-size: 2vw;
	color:#ffffff;
	text-shadow: #000000 .5px .5px;
	margin-bottom:0px;
	padding-top:2vh;
}

#page-container{
	position: relative;
	min-height: 100vh;
	width:auto;
}

#content-wrap{
	padding-bottom: 5vh;
}

a:link{
	color:#0090ff;
	background-color:transparent;
	text-decoration:none;
}

a:visited{
	color:#0090ff;
	background-color:transparent;
	text-decoration:none;
}

a:hover{
	color:#4caf50;
	background-color:transparent;
	text-decoration:underline;
}

a:active{
	color:yellow;
	background-color:transparent;
	text-decoration:underline;
}

.b:link{
	color:#fff;
	background-color:transparent;
	text-decoration:none;

}
.b:visited{
	color:#fff;
	background-color:transparent;
	text-decoration:none;
}

.b:hover{
	color:#fff;
	background-color:transparent;
	text-decoration:none;
}

.b:active{
	color:#fff;
	background-color:transparent;
	text-decoration:none;
}