html {
    box-sizing: border-box;
}

html, body {
    min-height: 100%;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Source Sans Pro', sans-serif;
    background-image: url(./images/bg.png);
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: cover;
    font-weight: 100;
    overflow: auto;
}

.sprite {
    background-image: url('./images/spritesheet.png');
    background-repeat: no-repeat;
}

.sprite-Logo {
    width: 219px;
    height: 62px;
    background-position: -1px -52px;
    background-size: 220px;
    display: inline-block;
    margin-top: 25px;
}

.logo-text {
    color: rgb(247, 155, 69);
    font-size: 22px;
}

.info-text {
    color: rgb(10, 9, 9);
    font-size: 16px;
    white-space: pre-line;
}

.app-container {
    display: table;
    margin-top: 50px;
}

.sprite-App-Store {
    width: 154px;
    height: 50px;
    background-position: -2px -2px;
    background-size: 232px;
    display: table-cell;
}

.sprite-Play-Store {
    width: 154px;
    height: 50px;
    background-position: 5px -121px;
    background-size: 232px;
    display: table-cell;
}

.container {
    margin: 0 auto;
    margin-top: 5%;
    display: table;
    width: 100%;
    text-align: -webkit-center;
}

.left {
    display: inline-block;
    margin: 25px 0;
    text-align: left;
}

.right.mobile-banner {
    background-image: url(./images/ph.png);
    background-repeat: no-repeat;
    background-size: contain;
    height: 32vw;
    width: 25%;
    margin: -25px 0 0 10%;
    display: inline-block;
    vertical-align: top;
}

.form-content {
    margin: 15px auto 60px;
    width: 380px;
    max-width: 80%;
    text-align: center;
}

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

.form-heading {
    font-family: SourceSansPro;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.4px;
}

input[type=password] {
    width: 100%;
    padding: 5px 0px;
    margin: 44px 0 0 0;
    display: inline-block;
    border: 0;
    border-bottom: solid 1px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    font-family: SourceSansPro;
    font-size: 14px;
    letter-spacing: -0.3px;
    outline: none;
}

input[type=password]:focus {
    border-bottom: solid 1px rgba(0, 0, 0, 0.5);
}

::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: rgba(0, 0, 0, 0.3);
}

::-moz-placeholder {
    /* Firefox 19+ */
    color: rgba(0, 0, 0, 0.3);
}

:-ms-input-placeholder {
    /* IE 10+ */
    color: rgba(0, 0, 0, 0.3);
}

:-moz-placeholder {
    /* Firefox 18- */
    color: rgba(0, 0, 0, 0.3);
}


/* Set a style for all buttons */

button {
    border-radius: 5px;
    background-color: #f79946;
    border: solid 1px #ee872d;
    color: white;
    padding: 14px 0;
    margin-top: 100px;
    cursor: pointer;
    font-family: SourceSansPro;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.4px;
    bottom: 40px;
    width: 100%;
}

button:hover {
    opacity: 0.8;
}

button:disabled {
  cursor: progress;
  opacity: 0.8;
}

.main-container {
    border-radius: 5px;
    background-color: #ffffff;
    box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.1);
    border: solid 1px #ededed;
    padding: 40px;
    position: relative;
    margin-top: 40px;
}

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

#displaySuccess{
  display: none;
  font-family: SourceSansPro;
  font-size: 18px;
  letter-spacing: -0.2px;
  text-align: center;
  color: rgba(0, 0, 0, 0.50);
  padding: 115px 0;
  position: relative;
}

.checkmark {
  display:inline-block;
  width: 22px;
  height:22px;
  -ms-transform: rotate(45deg); /* IE 9 */
  -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
  transform: rotate(45deg);
  position: absolute;
  top: 40px;
  left: 0;
  right: 0;
  margin: auto;
}

.checkmark_circle {
  position: absolute;
  width: 36px;
  height: 36px;
  background-color: #18ba3d;
  border-radius: 100%;
  left: 0;
  top: 0;
}

.checkmark_stem {
  position: absolute;
  width: 2px;
  height: 18px;
  background-color: #fff;
  left: 20px;
  top: 7px;
}

.checkmark_kick {
  position: absolute;
  width: 8px;
  height: 2px;
  background-color: #fff;
  left: 12px;
  top: 23px;
}

#displayError{
  display: none;
  font-family: SourceSansPro;
  font-size: 18px;
  letter-spacing: -0.2px;
  text-align: center;
  color: rgba(0, 0, 0, 0.50);
  padding: 115px 0;
  position: relative;
  word-wrap: break-word;
}

.crossmark {
  display:inline-block;
  width: 22px;
  height:22px;
  -ms-transform: rotate(45deg); /* IE 9 */
  -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
  transform: rotate(45deg);
  position: absolute;
  top: 40px;
  left: 0;
  right: 0;
  margin: auto;
}

.crossmark_circle {
  position: absolute;
  width: 36px;
  height: 36px;
  background-color: #e20a0a;
  border-radius: 100%;
  left: 0;
  top: 0;
}

.crossmark_stem {
  position: absolute;
  width: 2px;
  height: 24px;
  background-color: #fff;
  left: 17px;
  top: 6px;
}

.crossmark_kick {
  position: absolute;
  width: 24px;
  height: 2px;
  background-color: #fff;
  left: 6px;
  top: 17px;
}

#errorField{
  text-align: left;
  color: red;
  font-size: 12px;
  margin: 15px 0 -52px;
  height: 40px;
}


/* The Modal (background) */

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

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


/* Change styles for span and cancel button on extra small screens */

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