@charset "utf-8";

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.95;
  }
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.95;
  }
}
@keyframes slideIn {
  0% {
  transform: translateY(30%) scaleX(0.05);
  }
  100% {
 transform: translateY(0%) scaleX(1);
  }
}
@-webkit-keyframes slideIn {
  0% {
  transform: translateY(30%) scaleX(0.05);
  }
  100% {
  transform: translateY(0%) scaleX(1);
  }
}
input::-moz-focus-inner
{ 
    border: 0;
    padding: 0;
}
html{
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}
body{
  font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
  background-image: url("pics/back.png");
  color: black;
  font-size: 12px;
  margin: 0;
  padding: 0;
  height:100%;
  /*animation: fadeIn 0.25s 1 forwards;*/
}
table{
  font-size: 12px;
}
.header{
  width: 100%;
  height: auto;
  margin:0px;
  margin-left: auto;
  margin-right: auto;
  text-align:center;
  background-color: none;
  opacity: 1.0;
  box-shadow: 10px 10px 5px grey;
}
.header img{
  width: 100%;
  height: auto;
}
.outside{
  width: 100%;
  margin: 0 auto;
  background-image: linear-gradient(to top, rgba(97, 158, 243, 0.65) 0%, rgba(33, 33, 33, 0.65) 100%);
  opacity: 1.0;
  overflow: hidden;
  
  /*border-bottom-left-radius:8px;
  border-bottom-right-radius:8px;*/
}
.inside{
  float:left;
  width: 100%;
  padding:0;
  margin: 0;
  opacity: 1.0;
  /*animation: slideIn 0.25s 1 forwards;*/
 }
.footer{
  color: #FFF;
  clear: both;
  float: right;
  margin-top: 20px;
  width: 100%;
  opacity: 0.95;
}
.footer p, .footer a:link{
	color: #FFF;
  	font-size: 0.8em;
}

.tableFront{
  width:770;
}
.tableFront td{
  line-height: 24px;
  padding: 5px;
}
h1,h2,p{
  padding-left: 15px;
  padding-right: 15px;
  margin-top: 5px;
  margin-bottom: 5px;
  color: #000;
}
.text p{
  font-size:10px;
}

ul, ol, dl { 
  padding: 0;
  margin: 0;
}
h1{
  font-weight:bold;
}
h3{
  margin: 10px 0px;
  padding-left: 15px;
  padding-top: 0px;
  font-family:Verdana, Arial, sans-serif;
  font-size:12px;
  font-weight:bold;
  
}
.tableFront ul{
  list-style:disc;
  margin-left: 20px;
}
.tabelFront li{
  margin-left:5px;
}
ul.noBullets{
  list-style:none;
  margin-left: 15px;
  line-height: 30px;
}
.normalList{
  list-style:disc;
  margin-left: 40px;
  line-height: 24px;
}
.noList{
  list-style:none;
  margin-left: 15px;
  line-height: 30px;
}

a img { 
  border: none;
}

a:link {
  color: blue;
  text-decoration: underline; 
}
a:visited {
  color: blue;
  text-decoration: underline;
}
a:hover, a:active, a:focus { 
  text-decoration: none;
}
ul.nav {
  list-style: none; 
  border-top: 0; 
  margin-bottom: 15px; 
  margin-top:1px;
}
ul.nav li {
  border-bottom:0; 
  margin-bottom: 1px;
}
ul.nav a, ul.nav a:visited { 
  padding: 8px 5px 8px 15px;
  display: block;
  width: 160px;
  max-width: 100%;
  text-decoration: none;
  background: #619EF3;
  color: #FFF;
  border-bottom-right-radius:8px;
  border-top-right-radius:8px;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { 
  background: #619EE3;
  color: #FFF;
  font-weight: bold;
}
table.noBorders{
  border: none;
  padding-left: 10px;
}
table.noBorders th, td{
  border: none;
}
input:not([type=checkbox]), selection{
  margin-left:5px;
  margin-right: 10px;
  margin-top: 5px;
  width: 200px;
  max-width:100%;
}
fieldset{
  padding-left: 10px;
  margin: 10px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
}
fieldset.game{
  width: 500px;  
  max-width: 100%;
}
input[type="submit"]{
  -webkit-appearance: none;
  border: none;
  margin-left: 20px;
  padding: 10px 20px 10px 20px;
  border-radius: 2px;
  background: #FF9D58;
  font-size: 12px;
  color: white;
  font-weight: bold;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  -webkit-transition: all .25s ease-in-out;
  -moz-transition: all .25s ease-in-out;
  -ms-transition: all .25s ease-in-out;
  -o-transition: all .25s ease-in-out;
  transition: all .25s ease-in-out;
}
input[type="submit"]:disabled{
  -webkit-opacity: 0.25 !important;
  -moz-opacity: 0.25 !important;
  opacity: 0.25 !important;
}
input[type="submit"]:hover, a.buttonlink:hover{
  -webkit-opacity: 0.75;
  -moz-opacity: 0.75;
  opacity: 0.75;
  -webkit-transition: all .25s ease-in-out;
  -moz-transition: all .25s ease-in-out;
  -ms-transition: all .25s ease-in-out;
  -o-transition: all .25s ease-in-out;
  transition: all .25s ease-in-out;
}
input:not([type=submit]):not([type=checkbox]):not([type=range]),select,textarea{
  -webkit-border-radius: 2px; 
  -moz-border-radius: 2px; 
  border-radius: 2px; 
  border: 2px solid grey; 
  outline:0; 
  width: calc(100% - 40px);
  padding: 5px;
}
textarea{
  margin: 10px 5px;
}
.box{
  width: calc(100% - 40px);   
  box-shadow:inset 0 2px 4px #aaa;
  background:white;
  /*margin:0 1rem 1rem;*/
  border-radius:3px;
  animation:fly-in-from-left .5s 1s ease both;
  transform-origin:top left;
  position:relative;
  padding:10px; 
  margin: 10px;
  /*background:#fff;*/
  display: flex;
  justify-content:center;
  align-content:stretch;
  flex-direction:column;
  opacity: 0.95;
}
a.buttonlink, a.buttonlink:active, a.buttonlink:focus{
  padding: 9px 14px;
  margin-right: 5px;
  background: #ff6919;
  color: #FFF;
  text-decoration:none;
  font-weight: bold;
  border-radius: 2px;
  display: inline;
  -webkit-transition: all .25s ease-in-out;
  -moz-transition: all .25s ease-in-out;
  -ms-transition: all .25s ease-in-out;
  -o-transition: all .25s ease-in-out;
  transition: all .25s ease-in-out;
}
#para1{
  width: 350px;
  max-width: 100%;
  margin-bottom: 20px;
  margin-left: 20px;
  float: left;
}
.buttonlink{
  padding: 9px 14px;
  margin: 10px 0 0;
  background: red;
  color: #FFF;
  text-decoration:none;
  font-weight: bold;
  border-radius: 2px;
}
.buttonlinkB{
  padding: 9px 14px;
  margin: 5px 1px;
  width: 6%;
  min-width: 70px;
  max-width: 100%;
  background: #ecf0f1;
  text-align: center;
  border-radius: 2px;
  color: #FFF;
  text-decoration:none;
  font-weight: bold;
  float: left;
}
.spaced{
  margin: 10px;
  width: calc(100% - 20px);
}
table.spaced td{
  height: 24px;
}
.spacedL{
  margin: 10px;
  width: calc(100% - 20px);
}
table.spacedL td{
  height: 24px;
}
table.spaced tr{
  height: 24px;
}
table.spaced td:first-child{
  width: 40%;
}
table.spaced td:nth-child(2){
  width: 60%;
}
.boxH{
  width: calc(100% - 20px);   
 box-shadow: inset 0 0 4px 2px #aaa;
  background:white;
  /*margin:0 1rem 1rem;*/
  border-radius:3px;
  animation:fly-in-from-left 1s 2s ease both;
  transform-origin:top left;
  padding: 10px 0 0 0 ; 
  margin: 10px 10px 0 10px;
  /*background:#fff;*/
  opacity: 0.95;
}
.accent{
  width: 100%;
  height:15px; margin: 5px 0 0 0; padding:0px;
  opacity: 1.0;
  border-radius: 3px;
  /*border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;*/
}
.b{
  /*background: #AA3939 !important;*/
  background: #619EF3 !important;
}
.d{
  background: #619EF3 !important;
}
.e{
  /*background: #ff6919 !important;*/
  background: #619EF3 !important;
}
.p{
  /*background: #009340 !important;*/
  background: #619EF3 !important;
}
.k{
  /*background: #7C68F4 !important;*/
  background: #619EF3 !important;
}
.c{
  /*background: #041F43 !important;*/
  background: #619EF3 !important;
}
canvas{
  margin-top:10px;
}
.u{
  text-decoration: underline; 
}
.showMobile{
  display: none;
}
.boxA{
  width: calc(50% + 5px);
  float: left;
  margin: 0 -10px 0 0;
  min-width: 400px;
  opacity: 1.0;
}
img.closed{
  width: 8px; 
  height: 8px;
  margin: 13px 15px 15px 12px;
  -ms-transform: rotate(90deg); /* IE 9 */
  -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
  transform: rotate(90deg);
  float: left;
  -webkit-transition: -webkit-transform .2s;
  transition: transform .2s;
}
img.opened{
  width: 8px; 
  height: 8px;
  margin: 13px 15px 15px 12px;
  -ms-transform: rotate(180deg); /* IE 9 */
  -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
  transform: rotate(180deg);
  float: left;
  -webkit-transition: -webkit-transform .2s;
  transition: transform .2s;
}
.controlExpand{
  cursor: pointer;
}
div.opened{
  transition: opacity .2s ease-in;
  opacity: 1; 
  margin-left: 20px;
}
div.closed{
  transition: opacity .2s ease-out;
  opacity: 0; 
  height: 0; margin: 0; padding: 0;
  overflow: hidden;
}
.rowBox{
  width: 35%; 
  float: left;
  margin: 5px 5px 5px 15px;
}
.rowBoxX{
  float: left;
  margin: 5px 5px 5px 15px;
}
.rowBoxX > form > input{
  margin: 10px 2px 0 2px !important;
}
.rowBoxX > form{
  margin: 0px;
}
.rowBoxL{ 
  width: 50%; 
  float: left;
  margin: 5px 5px 5px 15px;
}
.rowBoxM{
  width: 30%;
  float: left;
  margin: 5px 5px 5px 15px;
}
.rowBoxS{
  width: 10%; 
  float: left;
  margin: 5px 5px 5px 15px;
}
.rowBoxSm{
  width: 15%; 
  float: left;
  margin: 5px 5px 5px 15px;
}
.rowBoxSS{
  width: 8%; 
  float: left;
  margin: 5px 5px 5px 15px;
}
.rowBoxF{
  width: 90%; 
  float: left;
  margin: 5px 5px 5px 15px;
}
.row{
  width: 50%;
  float: left;
  min-width: 400px;
}
.left{
  float: left;
}
.left > form > input{
  margin: 10px 2px 0 2px !important;
}
a.left{
  margin: 10px 2px 0 2px !important;
}
.left > p.buttonlink{
  max-width: 200px;
}
.half{
  width: calc(50% - 40px);
  padding: 10px;
  float: left; 
  height: auto;
}
li.separate > a{
  border-top: 1px solid white;
}
.bold{
  font-weight: bold;
  }
.mousePointer{
  cursor: default;
  color: grey;
  }
.flex{
	align-self: center;
}
.flexParent{
  display: flex; 
  justify-content: flex-start;
  width: 100%;
}
.hide{
  display: none !important;
}
@media (max-width: 1024px) {
  .boxA{
    width: calc(100% - 40px);
  min-width: 100px;
  float: left;
  margin: 10px 2px 0 2px;
}
.half{
  width: 100%;
  }
.inside {
  width: 100%;
  padding: 0;
}
.box{
  overflow: hidden;
  width: calc(100% - 40px);
  min-width: 200px;  
}
.boxA .box{
  width: calc(100%);
}
.boxA{
  margin-top: -10px;
}
.hide{
  display: none !important;
}
.show{
  display: block !important;
  text-decoration: none !important;
}

textarea{
  width: calc(100% - 40px);
}
.hideMobile{
  display: none !important;
}
.showMobile{
  display: block !important;
}
h1{
  font-size: 14px;
}
.mobile-sign-up-btn{
  padding-bottom: 10px;
  margin-bottom: 10px;
  background-color: #FF9D58;
  text-decoration: none !important;
}
.mobile-sign-up-btn > h1{
  color: white;
}
}
.rowBoxML{
  width: 65%;
  float: left;
  margin: 5px 5px 5px 15px;
}


  /*.rowBox* where * is the number that will fit across the parent element*/
  
.rowBox1{
  width: 100%; 
  float: left;
  padding: 5px 5px 5px 15px;
}
  
.rowBox2{
  width: 50%; 
  float: left;
  padding: 5px 5px 5px 15px;
}
  
.rowBox3{
  width: 33.333333%; 
  float: left;
  padding: 5px 5px 5px 15px;
}
  
.rowBox4{
  width: 25%; 
  float: left;
  padding: 5px 5px 5px 15px;
}
  
.rowBox5{
  width: 20%; 
  float: left;
  padding: 5px 5px 5px 15px;
}
  
.rowBox6{
  width: 16.6666667%; 
  float: left;
  padding: 5px 5px 5px 15px;
}

.rowBox7{
  width: 14.2857142857%; 
  float: left;
  padding: 5px 5px 5px 15px;
}
  
.rowBox8{
  width: 12.5%; 
  float: left;
  padding: 5px 5px 5px 15px;
}
  
.rowBox9{
  width: 11.1111111%; 
  float: left;
  padding: 5px 5px 5px 15px;
}
  
.rowBox10{
  width: 10%; 
  float: left;
  padding: 5px 5px 5px 15px;
}
  
.rowBox11{
  width: 9.1%; 
  float: left;
  padding: 5px 5px 5px 15px;
}
  
.rowBox12{
  width: 8.333333%; 
  float: left;
  padding: 5px 5px 5px 15px;
}