html,body {
  margin:0;
  background-color:#093a70;
  font-family: 'Quicksand', sans-serif;
}

.header {
  height:150px;
  background-color:rgba(0,0,0,.1);
  text-align:center;
}

.header img {
  height:92%;
}

.header .awards {
  height:50%;
  margin-bottom:24px;
  margin-left:24px;
}

.intro {
  width:75%;
  text-align:center;
  margin:0 auto;
  margin-bottom: 150px;
}

.cat {
  margin:0 auto;
  width:75%;
  padding-top:32px;
}

.intro img {
  width:300px;
}

.login label {
  color:#fff;
  margin-top:24px;
  display:block;
}

.login .pw {
  border:2px solid #fff;
  background:transparent;
  font-size:18px;
  color:#fff;
  padding:4px 4px 2px;
  border-radius:2px;
}

.login button {
  display:inline-block;
  background-color:#eac44e;
  color:#093a70;
  border:0;
  border-radius:4px;
  font-size:20px;
  padding:12px 24px 10px;
  width:200px;
  margin-top:24px;
  font-weight:bold;
  cursor:pointer;
}

.login button:hover {
  background-color:#fff;
}

h1,h2,h3,h4,h5 {
  font-family: 'Playfair Display', serif;
  color:#eac44e;
}

p {
  color:#fff;
}

a.nxt {
  border:2px solid #fff;
  color:#fff;
  font-family: 'Quicksand', sans-serif;
  display:inline-block;
  text-decoration:none;
  font-size:20px;
  padding:8px 16px;
  margin-top:24px;
}

a.nxt:hover {
  background-color:#fff;
  color:#093a70;

}

.catlist {
  width:33%;
  float:left;
  padding:24px 24px;
  box-sizing:border-box;
}
.catlist img {
  width:100%;
}

.catvote {
  position:relative;
  width:100%;
  padding-top: 100%;
  display:block;
  background-size:100%;
  background-repeat:no-repeat;
  cursor:pointer !important;
  z-index:1;
  transform: scale(0.9);
  transition: transform .2s;
}
.catvote span.votecopy {
  position:absolute;
  top:45%;
  left:50%;

  width:240px;
  color:#fff;
  padding:16px 24px;
  border:2px solid #eac44e;
  display:none;
  text-align:center;
  margin-left:-120px;
  box-sizing:border-box;
  font-size:20px;
  cursor:pointer !important;
  z-index:1;
  background-color:#eac44e;
  color:#093a70;
  font-weight:bold;
  -webkit-box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.46);
  -moz-box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.46);
  box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.46);
}

.catvote span.voted {
  position:absolute;
  top:45%;
  left:50%;
font-weight:bold;
  width:200px;
  color:#fff;
  padding:16px 24px;
  border:2px solid #fff;
  display:none;
  text-align:center;
  margin-left:-100px;
  box-sizing:border-box;
  font-size:20px;
  cursor:pointer !important;
  z-index:1;

}

.voted span.voted {
  display:block;
  border:0;
}

.voted .overlayer {
  display:block !important;
}



.catvote .overlayer {
  background-color:rgba(0,0,0,0.5);
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  display:none;
  border-radius:8px;
  cursor:pointer !important;
  z-index:1;
}

.catvote:hover {
cursor:pointer !important;
transform: scale(1.0);
}

.catvote:hover span.votecopy {
  display:block;
  cursor:pointer !important;
}

.catvote:hover span.overlayer {
  display:none;
  cursor:pointer !important;
}

.footer {
  position:fixed;
  height:55px;
  background-color:#fff;
  width:100%;
  bottom:0;
  z-index:9999;
  padding:12px;
  box-sizing: border-box;
  color:#093a70;
  text-align:center;
}

.sponsors {
  height:130px !important;
}

.footer a {
  width:25%;
  border:0;
  display:inline-block;
  height:100px;
  text-align:center;
}

.footer a img {
  height:100px;
  width:auto;
  border:0;
}

.barout {
  width:200px;
  border:2px solid #093a70;
  display:inline-block;
  height:15px;
  padding:1px;
  margin-top:4px;
  text-align:left;
}
.barin {
  background-color:#093a70;
  height:100%;
  display:inline-block;

}

.cat {

}

.breaker {
  clear:both;
  height:200px;
}

.basiclink {
  color:#ff3d3d;
}

.basiclink:hover {
  text-decoration:none;
}

a[onclick] { cursor: pointer }

h2 {
  color:#fff;
  margin-bottom:50px;
}

.liner {
  width: 100%;
  border-top:3px dashed rgba(255,255,255,.25);
  margin-top:60px;
}

.whitelink {
  color:#fff;
}

.whitelink:hover {

  color:#ff3d3d;
}

.ca {
  text-align:center;
}

.voting-button {
  display:block;
  border: 2px solid #eac44e;
  color:#eac44e;
  border-radius:4px;
  font-size:20px;
  padding:12px 24px 10px;
  width:300px;
  margin-top:24px;
  font-weight:bold;
  margin:12 auto;
  text-decoration:none;
}

.voting-button:hover {
  background-color:#eac44e;
  color:#093a70;
}

.voted:hover span.votecopy, .voted span.votecopy  {

}

.message {
  background-color:#eac44e;
  padding:0px 24px;
  position:fixed;
  bottom:0px;
  width:50%;
  left:25%;
  -webkit-border-top-left-radius: 16px;
  -webkit-border-top-right-radius: 16px;
  -moz-border-radius-topleft: 16px;
  -moz-border-radius-topright: 16px;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
box-sizing: border-box;
z-index:9999;
}

.message p, .message h2 {
  color:#093a70;
}

.message h2 {
  margin-bottom:20px;
}

.backDoor
{
  background-color: #004695;
  position:relative;
  width:300px;
  height:300px;
  cursor:pointer;
  margin-top:50px;
  text-align:center;
  padding-top:138px;
  color:#fff;
  box-sizing:border-box;
  font-weight:bold;
  font-size:20px;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px;
  float:left;
  margin-left:20px;
  margin-right:20px;
  -moz-box-shadow:    inset 0 0 20px #000000;
   -webkit-box-shadow: inset 0 0 20px #000000;
   box-shadow:         inset 0 0 20px #000000;
}

.backDoor .strik-vert {
  background-color:rgba(242,159,0,.8);
  display:inline-block;
  width:100%;
  z-index:1;
  position:relative;
  margin-top:90px;
}

div.strik {
  background-color:rgba(242,159,0,.8);
  width:25px;
  margin-left:38px;
  position:absolute;
  height:100%;
  top:0;
  z-index:0;

}

.door
{
  cursor:pointer;
z-index:9999;
  background-size:100%;
  background-position:center center;
  background-repeat:no-repeat;
  position:absolute;
  top:0px;
  left:0px;
  width:300px;
  height:300px;
/* border:4px dotted #f4a300; */
  transform-origin: left;
  /*Speed of the Door animation*/
  transition: all 0.2s ease;
  -webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
  box-sizing:border-box;
}

.doorOpen
{
  /*prespectiv creates the door open effect*/
  transform: perspective(1800px) translateZ(0px) translateX(0px) translateY(0px) rotateY(-105deg);
  background-image:none !important;
  -webkit-box-shadow: 0px 1px 26px -1px rgba(0,0,0,0.52);
-moz-box-shadow: 0px 1px 26px -1px rgba(0,0,0,0.52);
box-shadow: 0px 1px 26px -1px rgba(0,0,0,0.52);
background: rgb(241,31,31) !important;
background: linear-gradient(270deg, rgba(241,31,31,1) 0%, rgba(135,17,17,1) 100%) !important;
}





.wait {
  background: rgb(214,143,0);
background: linear-gradient(0deg, rgba(214,143,0,1) 0%, rgba(245,164,0,1) 100%);
  border-radius:16px;
  width:25%;
  margin-left:37.5%;
  color: #004695 !important;
  padding:24px;
  top:40vh;
  position:absolute;
  -webkit-box-shadow: 0px 0px 31px 0px rgba(0,0,0,0.3);
  -moz-box-shadow: 0px 0px 31px 0px rgba(0,0,0,0.3);
  box-shadow: 0px 0px 31px 0px rgba(0,0,0,0.3);


}

.wait p {
  color: #4d0000 !important;
  margin-bottom:0;
}

.wait h2 {
  color: #4d0000 !important;
  margin:0;
}

@media all and (max-width:1024px) {
  .container {
    width:100% !important;
  }
  .mobtile {
    display:none;
  }
  .backDoor {
    float:none;
    margin:0 auto;
    margin-bottom:32px;
  }
  .wait {
    background: rgb(214,143,0);
background: linear-gradient(0deg, rgba(214,143,0,1) 0%, rgba(245,164,0,1) 100%);
    border-radius:0;
    width:100%;
    margin-left:0;
    color: #004695 !important;
    padding:24px;
    top:40vh;
    position:absolute;
    box-sizing: border-box;
  }
}