/* FONTS */
@import 'https://fonts.googleapis.com/css?family=Abel';
@import url('https://fonts.googleapis.com/css?family=Karla:400,700');
@import 'https://fonts.googleapis.com/css?family=Bungee';

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}
.login-logo {
    z-index:2;
    max-height:100px;
    margin-left:1.5em;
    margin-top:1em;
}
.container-fluid {
    bottom:0px;
    position:absolute;
    padding:0;
}
.form-group {
    padding-right:3.5em;
}
div.form-box {
    padding:0;
}
input.form-control {
    height:100%;
}
.form-box:before {
  /*background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/80625/tree.jpg) 0 / cover;*/
  /*background: url(https://static.pexels.com/photos/28993/pexels-photo.jpg) 0 / cover;*/
  /*background: url(/Areas/TransChem/Content/Images/slide1.jpg) 0 / cover;*/
}
.account-wrapper {
    height:100%;
}
.psi-container-fluid {
    background: hsla(0,0%,100%,.3);
    box-shadow: 5px 3px 30px black;
    overflow: hidden;
    z-index:0;
    height:100%;
    width:100%;
}
.form-box:before {
    content: '';
    margin: -35px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    filter: blur(20px);
    z-index: -1;
}
.box {
    display:flex;
    flex-flow:column;
    height:100%;
}
.psi-sign-in {
    /*background:none;*/
    /*background:#345e82;*/
    background:#547490;
    background:-webkit-linear-gradient(top, #345e82, #76a6d0);
    background: -o-linear-gradient(top, #345e82, #76a6d0);
    background: -moz-linear-gradient(top, #345e82, #76a6d0);
    background: linear-gradient(#345e82, #76a6d0);
    /*background-image: url(/Areas/TransChem/Content/Images/TranschemGroup-03.png);*/
}

.carousel {
    padding:0;
    flex: 1 1 auto;
    height:60%;
}
@media(max-width:768px) {
    .carousel {
        height:40%;
    }
}
@media(max-height:600px) {
    .carousel {
        /*height:60%;*/
    }
}
.carousel-inner {
    height:100%;
}
.slide1 {
    background: url(../../Images/pexels-water-droplets.jpeg) no-repeat;
    background-position: center;
    /*background: url(http://turtlewaxpro.com/assets/img/aboutus-banner.jpg) no-repeat;*/
}
.slide2 {
    background: url(../../Images/car-wash.jpg) no-repeat;
    background-position: center;
    /*background: url(/Areas/TransChem/Content/Images/slide2.jpg) no-repeat;*/
    /*background: url(https://static.pexels.com/photos/28993/pexels-photo.jpg) no-repeat;*/
}
.slide3 {
    background: url(../../Images/pexels-blue-car.jpg) no-repeat;
    background-position: center;
    /*background: url(/Areas/TransChem/Content/Images/slide3.jpg) no-repeat;*/
    /*background: url(https://static.pexels.com/photos/190537/pexels-photo-190537.jpeg) no-repeat;*/
}
.slide1, .slide2, .slide3 {
    background-size:cover;
    /*background-position: right;*/
    height:100%;
}
.slide-text {
    margin: 0 auto;
    margin-top:5%;
    /*margin-top:2em;*/
    padding: 0 3.5em;
    max-width:950px;
    font-family:'abel',sans-serif;
    color:#fff;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
}
.slide-text h2:first-child {
    font-size: 3.5em;
    font-size: 10vmin;
    border-bottom: 2px solid white;
    padding-bottom: 0.15em;
}
.slide-text h2 + h2 {
    text-transform: uppercase;
    font-size: 5vmin;
    margin-bottom:0;
}
.slide-text h2:last-child {
    padding-bottom:0.5rem;
}
.brand-row {
    max-width:950px;
    margin: 0 auto;
    padding: 1em 3.5em 0;
}
.tw-brand {
    /*height: 60%;*/
    max-height:75px;
    max-width: 65%;
    /*min-height:50px;*/
    /*margin-left:7.5%;*/
}

#formContent {
    max-width:950px;
    margin:0 auto;
}
.form-box {
    flex: 0 1 auto;
}
.input-group-addon {
    background:none;
    border:none;
    color: rgba(255, 255, 255, 0.5);
    text-shadow: 1px 2px rgba(0,0,0,0.15);
}
.form-control::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: rgba(255,255,255,0.65);
    /*color:rgba(0,0,0,0.5);*/
}
.form-control::-moz-placeholder { /* Firefox 19+ */
    color: rgba(255,255,255,0.65);
  /*color:rgba(0,0,0,0.5);*/
}
.form-control:-ms-input-placeholder { /* IE 10+ */
    color: rgba(255,255,255,0.65);
  /*color:rgba(0,0,0,0.5);*/
}
.form-control:-moz-placeholder { /* Firefox 18- */
    color: rgba(255,255,255,0.65);
  /*color:rgba(0,0,0,0.5);*/
}
.form-control {
    background: rgba(255,255,255,0.05);
    color:rgba(255,255,255,0.75);
    border: 0;
    /*border-bottom: 1px solid rgba(153, 153, 153, 0.41);*/
    border-radius: 0;
    box-shadow: none;
    font-family:'abel',sans-serif;
}
.form-control:focus{
    background:rgba(255,255,255,0.1);
    border: 0;
    /*border-bottom: 1px solid rgba(153, 153, 153, 0.41);*/
    box-shadow: none;
    border-radius:0;
    color: #fff;
    border-color:#2d6ba0;
}
.form-control:focus + .fa-user {
    border: 0;
    border-bottom: 1px solid rgba(153, 153, 153, 0.41);
    box-shadow: none;
    border-radius:0;
    color: #989;
}
input.psi-feedback.ng-dirty.ng-invalid {
    border-color:transparent;
}
input.psi-feedback.ng-dirty.ng-valid {
    border-color:transparent;
}

.login-button {
    padding:0 3.5em;
}
button.sign-in {
    padding: 6px 0;
    width: 100%;
    color: #fff;
    /*background: #3ba5ff;*/
    background: #74a33c;
    border: 1px solid #668e36;
    border-bottom: 5px solid #668e36;
    border-radius: 3px;
    font-family: 'Abel', sans-serif;
    font-size: 1.25em;
    text-shadow: 1px 2px rgba(0,0,0,0.15);
    -webkit-transition: background .3s ease-in-out;
    transition: background .3s ease-in-out;
}
button.sign-in:hover, button.sign-in:focus {
    background: #668e36;
    border-color: #668e36;
}
button.sign-in[disabled] {
    background: #74a33c;
    border-color: #668e36;
    opacity: 0.35;
}
button.sign-in[disabled]:hover, button.sign-in[disabled]:focus {
    background: #74a33c;
    border-color: #668e36;
    opacity: 0.35;
}
.psi-copy {
    color:rgba(255,255,255,0.5);
}
.footer-row {
    text-align: center;
    max-width: 950px;
    margin: 0 auto;
    padding: 0 2.5em;
}
.footer-brands {
    display: inline-block;
    width: 32%;
    vertical-align: top;
}
.transchem-logo {
    /*width: 250px;*/
    max-width: 100%;
    max-height: 15vh;
    vertical-align: top;
    /*mix-blend-mode: normal;*/
}

@media(max-width:500px) {
    .form-group {
        padding-right: 1em !important;
        padding-left: 1em !important;
        margin-bottom: 0.5em;
    }
    .form-group-header {
        padding: 0 0.25em !important;
    }
    .input-group-addon {
        background: rgba(255, 255, 255, 0.1);
    }
    .login-button {
        padding: 0 1em !important;
    }
    .footer-row {
        padding: 0;
    }
}


/* PASSWORD RESET */
.form-group-header {
    padding: 0 2.6em;
    color: rgba(255,255,255,0.75);
}
.form-group-pw {
    padding: 0 3.5em;
}
.input-group-pw {
    background: rgba(255, 255, 255, 0.1);
}