body {min-width:375px; /* Suppose you want minimum width of 1000px */width: auto !important; /* Firefox will set width as auto */font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;font-size: 14px;line-height: 1.42857143;color:#333;background-color:#101058}

.navbar-brand {padding-top: 0px;padding-left: 0px;padding-bottom: 0px;}
.footer-text {text-align: center;color: white;font-size: 10px;line-height: .9em;background-color: rgba(0, 0, 0, 0);}
/* Remove the navbar's default margin-bottom and rounded borders */
.navbar {margin-bottom: 0;border-radius: 0;}
/* Set height of the grid so .sidenav can be 100% (adjust as needed) */
.row.content {height: 450px}
/* Set gray background color and 100% height */
.sidenav {padding-top: 20px;background-color: #f1f1f1;height: 100%;}
/* Set black background color, white text and some padding */
footer {background-color: #555;color: white;}
/* On small screens, set height to 'auto' for sidenav and grid */
@media screen and (max-width: 767px) {.sidenav {height: auto;padding: 15px;}.row.content {height:auto;}}

.fullscreen-bg {position: fixed;top: 0;right: 0;bottom: 0;left: 0;overflow: hidden;z-index: -100;}
.fullscreen-bg__video {position: absolute;top: 50%;left: 50%;width: auto;height: auto;min-width: 100%;min-height: 100%;-webkit-transform: translate(-50%, -50%);-moz-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);opacity:0.1;}
@media (max-width: 767px) {.fullscreen-bg {background: url('') center center / cover no-repeat;}.fullscreen-bg__video {display: none;}}

label {display: inline-block;max-width: 100%;margin-bottom: 0px;font-size: 11px;font-weight: 700;}

.progress-bar {float: left;width: 0;height: 100%;font-size: 11px;line-height: 12px;color: #fff;text-align: center;background-color: #001ABCDC;-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);-webkit-transition: width .6s ease;-o-transition: width .6s ease;transition: width .6s ease;}
.progress {height: 14px;margin-bottom: 0px;overflow: hidden;background-color: #ececec;border-radius: 7px;-webkit-box-shadow: inset 0 1px 2px rgba(0,0,5px);box-shadow: #333333 0px 0px 5px;}

.bg-success {background-color: #aae5aa;}
.bg-warning {background-color: #ffc56d;}
.bg-danger {background-color: #ff8181;}

.reg-input-holder {width: 280px;margin: auto;}

.reg-passvis-holder {display: inline-flex;width: -webkit-fill-available;}
.reg-passvis-passholder {width: 234px;}
.reg-passvis-password {-webkit-border-radius: 15px 0 0 15px;-moz-border-radius: 15px 0 0 15px;border-radius: 15px 0 0 15px;margin-right: unset;border-right: unset;}
.reg-passvis-button {border-bottom-right-radius: 15px;border-top-right-radius: 15px;height: 32px;margin-top: 2px;border-width: 2px;border-style: inset;border-color: initial;border-image: initial;box-shadow: #333333 0px 0px 8px;border: none;}

button:focus {outline:0;}
button[disabled] {background-color: #b3b2b2;}

.popup-register-popup {width: 350px;margin: auto;margin-top: 10px;font-size: 16px;text-align: center;border: 2px;border-color: rgb(2, 2, 2);border-radius: 20px;background-color: #ddd;padding: 5px;box-shadow: 0 0 35px rgba(0, 0, 0, 1), #333333 0px 0px 5px inset;}

.popup-sn-dash {font-size: 29px;padding-top: 2px;}

.popup-button {background-color: #4CAF50;border: 3px;border-radius: 30px;color: white;padding: 15px 32px;text-align: center;text-decoration: none;display: inline-block;font-size: 16px;font-weight: 600;margin-top: 20px;margin-bottom: 20px;box-shadow: 0 0 15px 2px #0000005e, #333333 0px 0px 15px inset;}

.popup-header {font-size: 29px;font-weight: 600;padding: 10px;text-shadow: -1px 0 #757575, 0 1px #757575, 1px 0 #757575, 0 -1px #757575, 2px 2px 5px #00000070;}

.popup-title {font-size: 18px;font-weight: 600;color: #5d5d5d;}

.popup-input {border-radius: 15px;margin-top: 1px;width:inherit;font-weight: 900;color: black;}

.flip-signin-pad {margin-left: -19px;}

.flip-reset-pad {margin-left: 19px;}

.popup-sn {text-transform: uppercase;font-size: 25px;}
.popup-sn-left {width: 170px;}
.popup-sn-right {width: 99px;}

.popup-emailresp {min-height: 35px;}

.popup-packer {min-height: 50px;}

.popup-reg-response {height:32px;}

.popup-name {text-transform: capitalize;}

.popup-flip-button {font-weight: 600;background:none!important;color:blue;border:none;padding:0!important;cursor: pointer;text-shadow: -1px 0 #757575, 0 1px #757575, 1px 0 #757575, 0 -1px #757575, 2px 2px 5px #00000070}

input {padding: 5px;-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */-moz-box-sizing: border-box;/* Firefox, other Gecko */box-sizing: border-box;/* Opera/IE 8+ */text-align: center;box-shadow: #333333 0px 0px 5px;border: 1px solid #989898;outline: none;}
input:disabled {opacity: 0.6;background-color: rgb(199, 199, 199);}

.wheretosend, .wheretosend:hover, .wheretosend:visited, .wheretosend:link{text-decoration: none;color: black;}

.linkson, .linkson:hover, .linkson:visited, .linkson:link{text-decoration: none;color: black;}
.linksoff, .linksoff:hover, .linksoff:visited, .linksoff:link{text-decoration: none;color: #989898;}

a, a:link, a:hover, a:visited, a:active{text-decoration: none;}

.muted {text-align:center;color: white;font-size: 10px;}

select:disabled {opacity: 0.6;background-color: rgb(199, 199, 199);}

.warp {text-align:center;width:inherit;font-size:23px;font-weight:bold;color:#f00;text-shadow: -1px 0 #757575, 0 1px #757575, 1px 0 #757575, 0 -1px #757575, 2px 2px 5px #00000070;animation: warpthis 0.6s 4;}
@keyframes warpthis {0%  {transform: scale( 1 );}50% {transform: scale( 2 );}100% {transform: scale( 1 );}}

.card {perspective: 1000px;-webkit-perspective: 1000px;-moz-perspective: 1000px;-o-perspective: 1000px;-ms-perspective: 1000px;width: 350px;height: 350px;vertical-align:top;display:block;font-size:25px;font-weight:bold;position: relative;margin: 50px auto;}
.card .content{transition: 0.5s ease-out;-webkit-transition: 0.5s ease-out;-moz-transition: 0.5s ease-out;-o-transition: 0.5s ease-out;-ms-transition: 0.5s ease-out;transform-style: preserve-3d;-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;-o-transform-style: preserve-3d;-ms-transform-style: preserve-3d;/* content backface is visible so that static content still appears */backface-visibility: visible;-webkit-backface-visibility: visible;-moz-backface-visibility: visible;-o-backface-visibility: visible;-ms-backface-visibility: visible;border: 1px solid grey;border-radius: 15px;position:relative;width: 100%;height: 100%;text-align: center;border: 2px;border-color: rgb(2, 2, 2);border-radius: 20px;background-color: #ddd;box-shadow: 0 0 35px rgba(0, 0, 0, 1), #333333 0px 0px 5px inset;}
.card.applyflip .content{transform: rotateY(180deg);-webkit-transform: rotateY(180deg);-moz-transform: rotateY(180deg);-o-transform: rotateY(180deg);-ms-transform: rotateY(180deg);}
.card .content .cardFront{}
.card .content .cardBack{}
.card .content .cardFront, .card .content .cardBack {/* Backface visibility works great for all but IE. As such, we mark the backface visible in IE and manage visibility ourselves */backface-visibility: hidden;-webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;-o-backface-visibility: hidden;-ms-backface-visibility: visible;position: absolute;top: 0;left: 0;height: 100%;width: 100%;text-align: center;border-radius: 14px;font-size: 16px;}
.card .content .cardFront, .card.applyflip .content .cardFront {transform: rotateY(0deg);-webkit-transform: rotateY(0deg);-moz-transform: rotateY(0deg);-o-transform: rotateY(0deg);-ms-transform: rotateY(0deg);}
.card .content .cardBack, .card.applyflip .content .cardBack {transform: rotateY(-180deg);-webkit-transform: rotateY(-180deg);-moz-transform: rotateY(-180deg);-o-transform: rotateY(-180deg);-ms-transform: rotateY(-180deg);}
.card .content .cardFront, .card.applyflip .content .cardBack {/* IE Hack. Halfway through the card flip, set visibility. Keep other browsers visible throughout the card flip. */animation: stayvisible 0.5s both;-webkit-animation: stayvisible 0.5s both;-moz-animation: stayvisible 0.5s both;-o-animation: stayvisible 0.5s both;-ms-animation: donothing 0.5s;-ms-transition: visibility 0s linear 0.17s;visibility: visible;}
.card.applyflip .content .cardFront, .card .content .cardBack {/* IE Hack. Halfway through the card flip, set visibility. Keep other browsers visible throughout the card flip. */animation: stayvisible 0.5s both;-webkit-animation: stayvisible 0.5s both;-moz-animation: stayvisible 0.5s both;-o-animation: stayvisible 0.5s both;-ms-animation: donothing 0.5s;-ms-transition: visibility 0s linear 0.17s;visibility: hidden;}
@keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
@-webkit-keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
@-moz-keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
@-o-keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
@-ms-keyframes donothing { 0% { } 100% { } }

.beta-text {width: 100%;font-size: 48px;font-weight: 900;color: rgb(146 255 134);text-shadow: -1px 0 #757575, 0 1px #757575, 1px 0 #757575, 0 -1px #757575, 2px 2px 5px #00000070;/*padding-top: 30px;*/}

.flip-cont-holder {height: 305px;}

.signin-email {text-transform: lowercase;margin: unset;width: 282px;}



@media only screen and (min-width:280px){       /* galaxy fold portrait */
  .beta-text {font-size: 40px;}
}
@media only screen and (min-width:320px){       /* iphone 5,4 portrait */
  .beta-text {font-size: 35px;}
  .card {width: 345px;}
  .popup-register-popup {width: 373px;}
}
@media only screen and (min-width:360px){       /* Galaxy S5 */
  .beta-text {font-size: 36px;}
}
@media only screen and (min-width:375px){       /* iphone 6,7,8,x portrait */
  .beta-text {font-size: 42px;}
}
@media only screen and (min-width:411px){       /* Pixel 2 */
  .beta-text {font-size: 44px;}
  .card {width: 381px;}
  .popup-register-popup {width: 411px;}
}
@media only screen and (min-width:414px){       /* iphone 6+ portrait */
  .beta-text {font-size: 45px;}
  .card {width: 384px;}
  .popup-register-popup {width: 414px;}
}
@media only screen and (min-width:480px){       /* iphone 4 landscape */
  .card {width: 350px;}
  .popup-register-popup {width: 480px;}
}
@media only screen and (min-width:568px){       /* iphone 5 landscape */
  .beta-text {font-size: 47px;}
  .popup-register-popup {width: 500px;}
}
@media only screen and (min-width:600px){       /*  */
  .popup-register-popup {width: 580px;}
}
@media only screen and (min-width:640px){       /* Galaxy S5 */
}
@media only screen and (min-width:667px){       /* iphone 6,7,8 landscape */
  .beta-text {font-size: 50px;}
  .popup-register-popup {width: 650px;}
}
@media only screen and (min-width:731px){       /* Pixel 2 */
}
@media only screen and (min-width:736px){       /* iphone 6+ landscape */
}
@media only screen and (min-width:768px){       /* ipad portrait */
  .card {width: 500px;}
  .popup-register-popup {width: 635px;}
}
@media only screen and (min-width:812px){       /* iphone x landscape */
  .beta-text {font-size: 50px;}
  .card {width: 350px;}
}
@media only screen and (min-width:823px){       /* pixel 2 XL */
  .beta-text {font-size: 50px;}
}
@media only screen and (min-width:961px){       /*  */
  .beta-text {font-size: 40px;}
}
@media only screen and (min-width:1024px){      /* ipad pro portrait/ipad landscape */
  .beta-text {font-size: 70px;}
  .card {width: 500px;}
}
@media only screen and (min-width:1281px){      /*  */
  .beta-text {font-size: 76px;}
}
@media only screen and (min-width:1366px){      /* ipad pro landscape */
}



@media only screen and (min-height:320px){       /* iphone 5,4 landscape */
  .card {margin: 0px auto 0 auto;height: 267px;}
  .popup-header {font-size: 22px;}
  .flip-cont-holder {height: 196px;}
  .popup-flip-button {font-size: 18px;}
  .popup-title {font-size: 16px;}
  .warp {font-size: 28px;}
  .popup-button {margin-top: 8px;margin-bottom: 0px;}
}
@media only screen and (min-height:360px){       /* Galaxy S5 */
  .card {height: 307px;}
  .popup-header {font-size: 33px;}
  .flip-cont-holder {height: 236px;}
  .warp {font-size: 28px;}
}
@media only screen and (min-height:375px){       /* iphone 6,7,8,x landscape */
  .card {height: 322px;}
  .popup-header {font-size: 32px;}
  .flip-cont-holder {height: 246px;}
  .warp {font-size: 28px;}
  .popup-button {margin-top: 10px;margin-bottom: 0px;}
}
@media only screen and (min-height:411px){       /* Pixel 2 */
  .card {height: 357px;}
  .popup-header {font-size: 39px;}
  .flip-cont-holder {height: 284px;}
  .popup-flip-button {font-size: 19px;}
  .popup-title {font-size: 26px;}
  .warp {font-size: 28px;}
}
@media only screen and (min-height:414px){       /* iphone 6+ landscape */
  .card {height: 361px;}
  .popup-header {font-size: 40px;}
  .flip-cont-holder {height: 289px;}
  .warp {font-size: 28px;}
}
@media only screen and (min-height:480px){       /* iphone 4 portrait */
  .card {margin: 50px auto 0 auto;height: 380px;} /*400px;}*/
  .popup-header {font-size: 41px;}
  .flip-cont-holder {height: 298px;} /*324px;}*/
  .popup-flip-button {font-size: 21px;}
  .popup-title {font-size: 26px;}
  .warp {font-size: 29px;}
  .popup-button {margin-top: 17px;margin-bottom: 0px;}
}
@media only screen and (min-height:568px){       /* iphone 5 portrait */
}
@media only screen and (min-height:600px){       /*  */
}
@media only screen and (min-height:640px){       /* Galaxy S5 */
}
@media only screen and (min-height:667px){       /* iphone 6,7,8 portrait */
}
@media only screen and (min-height:731px){       /* Pixel 2 */
}
@media only screen and (min-height:736px){       /* iphone 6+ portrait */
}
@media only screen and (min-height:768px){       /* ipad landscape */
  .card {height: 385px;} /*500px;}*/
  .popup-header {font-size: 45px;}
  .flip-cont-holder {height: 300px;}/*421px;}*/
  .popup-flip-button {font-size: 23px;}
  .popup-title {font-size: 26px;}
  .warp {font-size: 28px;}
}
@media only screen and (min-height:812px){       /* iphone x portrait */
  .card {height: 384px;}
  .popup-header {font-size: 42px;}
  .flip-cont-holder {height: 300px;}
  .popup-title {font-size: 27px;}
  .warp {font-size: 28px;}
}
@media only screen and (min-height:823px){       /* pixel 2 XL */
}
@media only screen and (min-height:961px){       /*  */
  .card {height: 400px;}
  .popup-header {font-size: 38px;}
  .flip-cont-holder {height: 267px;}
  .popup-title {font-size: 28px;}
  .warp {font-size: 34px;}
}
@media only screen and (min-height:1024px){      /* ipad pro landscape/ipad portrait */
  .card {height: 410px;} /*500px;}*/
  .popup-header {font-size: 50px;}
  .flip-cont-holder {height: 323px;} /*418px;}*/
  .popup-title {font-size: 29px;}
  .warp {font-size: 35px;}
}
@media only screen and (min-height:1281px){      /*  */
}
@media only screen and (min-height:1366px){      /* ipad pro portrait */
}