$brand-bg: #00A9E0;
.clear {clear:both}
html, body {
padding: 0;
margin: 0;
width: 100%;
background:darken($brand-bg,10%);
height: 100%;
overflow: hidden;
font-family: 'Roboto', Helvetica, Arial, sans-serif;
-webkit-font-smoothing:antialiased;
font-smoothing:antialiased;
font-smooth:always;
}
#password {font-size:1.4rem;font-weight:100}#all-done {
pointer-events: none;
text-indent: -10000px;
width: 100%;
height: 100%;
//background: url('tick-done.svg') center 35% no-repeat;
position: absolute;
opacity: 0;
-webkit-backface-visibility:hidden;
-webkit-transition:-webkit-transform 1200ms cubic-bezier(0.190, 1.000, 0.220, 1.000),opacity 400ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
-moz-transition: -moz-transform 1200ms cubic-bezier(0.190, 1.000, 0.220, 1.000),opacity 400ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
-ms-transition: -ms-transform 1200ms cubic-bezier(0.190, 1.000, 0.220, 1.000),opacity 400ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
-o-transition: -o-transform 1200ms cubic-bezier(0.190, 1.000, 0.220, 1.000),opacity 400ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
transition: transform 1200ms cubic-bezier(0.190, 1.000, 0.220, 1.000),opacity 400ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
-webkit-transform:translateX(20px);
-moz-transform:translateX(20px);
-ms-transform:translateX(20px);
-o-transform:translateX(20px);
transform:translateX(20px);
&:after {
content: 'All done!';
font-weight: 100;
font-size: 40px;
color: rgba(255,255,255,0.70);
text-align: center;
width: 100%;
display: block;
position: absolute;
left: 0;
top: 55%;
text-indent: 0;
}
}
#all-done:after {
content: 'All done!';
font-weight: 100;
font-size: 40px;
color: rgba(255,255,255,0.70);
text-align: center;
width: 100%;
display: block;
position: absolute;
left: 0;
top: 55%;
text-indent: 0;
}
#all-done.visible {
opacity: 1;
-webkit-transform:translateX(0);
-moz-transform:translateX(0);
-ms-transform:translateX(0);
-o-transform:translateX(0);
transform:translateX(0);
}
#container {
width: 100%;
height: 100%;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
-ms-perspective: 1000px;
-o-perspective: 1000px;
perspective: 1000px;
}
.middle {width:100%;height:100%}
#form-container {
width: 100%;
height: 100%;
position: relative;
}
form {
position: absolute;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
opacity: 0;
-webkit-backface-visibility: hidden;
//background-image:-moz-linear-gradient( -89deg, #FFFFFF 0%, #DBDBDB 100%);
//background-image: -ms-linear-gradient( -89deg, #FFFFFF 0%, #DBDBDB 100%);
//background-image: -o-linear-gradient( -89deg, #FFFFFF 0%, #DBDBDB 100%);
//background-image: linear-gradient(-179deg, #FFFFFF 0%, #DBDBDB 100%);
//
// -moz-box-shadow:0px 2px 4px 0px rgba(0,0,0,0.50), inset 0px 1px 7px 0px rgba(255,255,255,0.50);
// box-shadow:0px 2px 4px 0px rgba(0,0,0,0.50), inset 0px 1px 7px 0px rgba(255,255,255,0.50);
//
-webkit-transition: -webkit-transform 1200ms cubic-bezier(0.190, 1.000, 0.220, 1.000),opacity 400ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
-moz-transition: -moz-transform 1200ms cubic-bezier(0.190, 1.000, 0.220, 1.000),opacity 400ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
-ms-transition: -ms-transform 1200ms cubic-bezier(0.190, 1.000, 0.220, 1.000),opacity 400ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
-o-transition: -o-transform 1200ms cubic-bezier(0.190, 1.000, 0.220, 1.000),opacity 400ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
transition: transform 1200ms cubic-bezier(0.190, 1.000, 0.220, 1.000),opacity 400ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
-webkit-transform: translateX(20px);
-moz-transform: translateX(20px);
-ms-transform: translateX(20px);
-o-transform: translateX(20px);
transform: translateX(20px);
}
form.visible {
opacity: 1;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
form.done {
pointer-events: none;
opacity: 0;
-webkit-transform: translateX(-20px);
-moz-transform: translateX(-20px);
-ms-transform: translateX(-20px);
-o-transform: translateX(-20px);
transform: translateX(-20px);
}
label {
//height: 56px;
//background-image: -moz-linear-gradient( -89deg, #FAFAFA 0%, #EEE 100%);
//background-image: -ms-linear-gradient( -89deg, #FAFAFA 0%, #EEE 100%);
//background-image: -o-linear-gradient( -89deg, #FAFAFA 0%, #EEE 100%);
//background-image: linear-gradient(-179deg, #FAFAFA 0%, #EEE 100%);
display: block;
font-weight: 100;
font-size: 3rem;
color: #fff;
text-shadow: 0px 1px 1px $brand-bg;
position: relative;
}
label:after {
content: '';
border-bottom:0;
width: 100%;
height: 1px;
position: absolute;
bottom: -2px;
left: 0;
}
input[type="password"] {
height: 38px;
line-height: 38px;
border-radius: 0;
border: 1px solid #CACACA;
background: #FFFFFF;
font-family: Helvetica;
font-size: 18px;
color: #000;
width: 70%;
float:left;
padding: 0 3% 0 3%;
margin: 6.5% 0 0 0;
}
input[type="submit"] {
display:block;
float: left;
margin: 6.5% 0 0 3%;
background-image: linear-gradient(-179deg, #98C73D 0%, #98C73D 100%);
border: 3px solid #98C73D;
box-shadow: 0 0 0 3px #D0DD2B;
padding: 0 15px;
height: 38px;
font-size: 16px;
color: white;
text-transform:uppercase;
text-shadow: 0px 1px 1px rgba(0,0,0,0.50);
font-weight: 400;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-webkit-transition: background-image 1200ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
-moz-transition: background-image 1200ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
-ms-transition: background-image 1200ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
-o-transition: background-image 1200ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
transition: background-image 1200ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
}
input[type="submit"][disabled] {
border: 3px solid rgba(white,0.3);
box-shadow:none;
text-shadow:none;
color:rgba(white,0.3);
text-transform:uppercase;
background-image:none;
background:transparent;
}
input[type=password] {
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
outline: none;
}
input[type=password]:focus {
box-shadow: 0 0 0 3px #D0DD2B;
border: 1px solid transparent;
}
ul {
padding: 0;
margin:3em 0 0 0;
list-style: none;
}
li {
color:rgba(white,0.5);
font-size: 1.7rem;
height: 20px;
line-height: 20px;
margin: 0 0 0.8em 0;
padding: 0 0 0 40px;
/*background: url(tick-grey.svg) 10px 1px no-repeat;*/
position: relative;
-webkit-transition: color 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
-moz-transition: color 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
-ms-transition: color 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
-o-transition: color 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
transition: color 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
-webkit-backface-visibility: visible;
}
li:before {
opacity: 1;
text-shadow: none;
content: "\e013";
position: absolute;
left: -25px;
width: 20px;
height: 20px;
/*background: url(tick-green.svg) 0 1px no-repeat;*/
position: relative;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: 400;
line-height: 1;
color:darken($brand-bg,15%);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-transition: -webkit-transform 1200ms cubic-bezier(0.190, 1.000, 0.220, 1.000),
opacity 100ms ease-out;
-moz-transition: -moz-transform 1200ms cubic-bezier(0.190, 1.000, 0.220, 1.000),
opacity 100ms ease-out;
-ms-transition: -ms-transform 1200ms cubic-bezier(0.190, 1.000, 0.220, 1.000),
opacity 100ms ease-out;
-o-transition: -o-transform 1200ms cubic-bezier(0.190, 1.000, 0.220, 1.000),
opacity 100ms ease-out;
transition: transform 1200ms cubic-bezier(0.190, 1.000, 0.220, 1.000),
opacity 100ms ease-out;
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3);
-o-transform: scale(1.3);
transform: scale(1.3);
-webkit-backface-visibility: hidden;
}
li.complete {
color: rgba(255,255,255,1);
}
li.complete:before {
opacity: 1;
color:#D0DD2B ;
text-shadow: 0px 0px 2px rgba(0,0,0,0.4);
-webkit-transform: scale(1.6);
-moz-transform: scale(1.6);
-ms-transform: scale(1.6);
-o-transform: scale(1.6);
transform: scale(1.6);
}
#go-back {
border: none;
background: none;
font-size: 13px;
color: #808080;
line-height: 13px;
text-shadow: 0px 1px 1px #FFFFFF;
float: right;
padding: 0 0 3px 0;
margin: 40px 5% 0 0;
border-bottom: 1px solid #808080;
cursor: pointer;
}
@media (min-width: 360px) {
form {
border-radius: 4px;
}
label {
border-radius: 4px 4px 0 0;
}
#container {
width: 100%;
height: 100%;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
}
.top, .left, .right, .bottom {
flex: 1 1 auto;
}
.middle {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
-o-flex-direction: row;
flex-direction: row;
flex: 0 0 auto;
width: auto;
height: auto;
}
#form-container {
width: 330px;
height: 385px;
position: relative;
}
form {
position: absolute;
left: 0;
top: 0;
}
form#verify-new-password {
height: 72%;
top: 14%;
}
}
@-webkit-keyframes back {
0% {
-webkit-transform:
scale(1)
rotateY(180deg);
}
10% {
-webkit-transform:
scale(1.000768)
rotateY(180deg);
}
20% {
-webkit-transform:
scale(1.024576)
rotateY(180deg);
}
30% {
-webkit-transform:
scale(1.125424)
rotateY(180.17135717260666deg);
}
40% {
-webkit-transform:
scale(1.149232)
rotateY(185.48342952341287deg);
}
50% {
-webkit-transform:
scale(1.15)
rotateY(221.6397929434164deg);
}
60% {
-webkit-transform:
scale(1.149232)
rotateY(318.3602070565836deg);
}
70% {
-webkit-transform:
scale(1.125424)
rotateY(354.51657047658716deg);
}
80% {
-webkit-transform:
scale(1.024576)
rotateY(359.8286428273933deg);
}
90% {
-webkit-transform:
scale(1.000768)
rotateY(360deg);
}
100% {
-webkit-transform:
scale(1)
rotateY(360deg);
}
}
@-moz-keyframes back {
0% {
-moz-transform:
scale(1)
rotateY(180deg);
}
10% {
-moz-transform:
scale(1.000768)
rotateY(180deg);
}
20% {
-moz-transform:
scale(1.024576)
rotateY(180deg);
}
30% {
-moz-transform:
scale(1.125424)
rotateY(180.17135717260666deg);
}
40% {
-moz-transform:
scale(1.149232)
rotateY(185.48342952341287deg);
}
50% {
-moz-transform:
scale(1.15)
rotateY(221.6397929434164deg);
}
60% {
-moz-transform:
scale(1.149232)
rotateY(318.3602070565836deg);
}
70% {
-moz-transform:
scale(1.125424)
rotateY(354.51657047658716deg);
}
80% {
-moz-transform:
scale(1.024576)
rotateY(359.8286428273933deg);
}
90% {
-moz-transform:
scale(1.000768)
rotateY(360deg);
}
100% {
-moz-transform:
scale(1)
rotateY(360deg);
}
}
@-ms-keyframes back {
0% {
-ms-transform:
scale(1)
rotateY(180deg);
}
10% {
-ms-transform:
scale(1.000768)
rotateY(180deg);
}
20% {
-ms-transform:
scale(1.024576)
rotateY(180deg);
}
30% {
-ms-transform:
scale(1.125424)
rotateY(180.17135717260666deg);
}
40% {
-ms-transform:
scale(1.149232)
rotateY(185.48342952341287deg);
}
50% {
-ms-transform:
scale(1.15)
rotateY(221.6397929434164deg);
}
60% {
-ms-transform:
scale(1.149232)
rotateY(318.3602070565836deg);
}
70% {
-ms-transform:
scale(1.125424)
rotateY(354.51657047658716deg);
}
80% {
-ms-transform:
scale(1.024576)
rotateY(359.8286428273933deg);
}
90% {
-ms-transform:
scale(1.000768)
rotateY(360deg);
}
100% {
-ms-transform:
scale(1)
rotateY(360deg);
}
}
@-o-keyframes back {
0% {
-o-transform:
scale(1)
rotateY(180deg);
}
10% {
-o-transform:
scale(1.000768)
rotateY(180deg);
}
20% {
-o-transform:
scale(1.024576)
rotateY(180deg);
}
30% {
-o-transform:
scale(1.125424)
rotateY(180.17135717260666deg);
}
40% {
-o-transform:
scale(1.149232)
rotateY(185.48342952341287deg);
}
50% {
-o-transform:
scale(1.15)
rotateY(221.6397929434164deg);
}
60% {
-o-transform:
scale(1.149232)
rotateY(318.3602070565836deg);
}
70% {
-o-transform:
scale(1.125424)
rotateY(354.51657047658716deg);
}
80% {
-o-transform:
scale(1.024576)
rotateY(359.8286428273933deg);
}
90% {
-o-transform:
scale(1.000768)
rotateY(360deg);
}
100% {
-o-transform:
scale(1)
rotateY(360deg);
}
}
@keyframes back {
0% {
transform:
scale(1)
rotateY(180deg);
}
10% {
transform:
scale(1.000768)
rotateY(180deg);
}
20% {
transform:
scale(1.024576)
rotateY(180deg);
}
30% {
transform:
scale(1.125424)
rotateY(180.17135717260666deg);
}
40% {
transform:
scale(1.149232)
rotateY(185.48342952341287deg);
}
50% {
transform:
scale(1.15)
rotateY(221.6397929434164deg);
}
60% {
transform:
scale(1.149232)
rotateY(318.3602070565836deg);
}
70% {
transform:
scale(1.125424)
rotateY(354.51657047658716deg);
}
80% {
transform:
scale(1.024576)
rotateY(359.8286428273933deg);
}
90% {
transform:
scale(1.000768)
rotateY(360deg);
}
100% {
transform:
scale(1)
rotateY(360deg);
}
}
@-webkit-keyframes front {
0% {
-webkit-transform:
scale(1)
rotateY(0deg);
}
10% {
-webkit-transform:
scale(1.000768)
rotateY(0deg);
}
20% {
-webkit-transform:
scale(1.024576)
rotateY(0deg);
}
30% {
-webkit-transform:
scale(1.125424)
rotateY(0.17135717260665195deg);
}
40% {
-webkit-transform:
scale(1.149232)
rotateY(5.4834295234128625deg);
}
50% {
-webkit-transform:
scale(1.15)
rotateY(41.639792943416424deg);
}
60% {
-webkit-transform:
scale(1.149232)
rotateY(138.36020705658356deg);
}
70% {
-webkit-transform:
scale(1.125424)
rotateY(174.51657047658713deg);
}
80% {
-webkit-transform:
scale(1.024576)
rotateY(179.82864282739334deg);
}
90% {
-webkit-transform:
scale(1.000768)
rotateY(180deg);
}
100% {
-webkit-transform:
scale(1)
rotateY(180deg);
}
}
@-moz-keyframes front {
0% {
-moz-transform:
scale(1)
rotateY(0deg);
}
10% {
-moz-transform:
scale(1.000768)
rotateY(0deg);
}
20% {
-moz-transform:
scale(1.024576)
rotateY(0deg);
}
30% {
-moz-transform:
scale(1.125424)
rotateY(0.17135717260665195deg);
}
40% {
-moz-transform:
scale(1.149232)
rotateY(5.4834295234128625deg);
}
50% {
-moz-transform:
scale(1.15)
rotateY(41.639792943416424deg);
}
60% {
-moz-transform:
scale(1.149232)
rotateY(138.36020705658356deg);
}
70% {
-moz-transform:
scale(1.125424)
rotateY(174.51657047658713deg);
}
80% {
-moz-transform:
scale(1.024576)
rotateY(179.82864282739334deg);
}
90% {
-moz-transform:
scale(1.000768)
rotateY(180deg);
}
100% {
-moz-transform:
scale(1)
rotateY(180deg);
}
}
@-ms-keyframes front {
0% {
-ms-transform:
scale(1)
rotateY(0deg);
}
10% {
-ms-transform:
scale(1.000768)
rotateY(0deg);
}
20% {
-ms-transform:
scale(1.024576)
rotateY(0deg);
}
30% {
-ms-transform:
scale(1.125424)
rotateY(0.17135717260665195deg);
}
40% {
-ms-transform:
scale(1.149232)
rotateY(5.4834295234128625deg);
}
50% {
-ms-transform:
scale(1.15)
rotateY(41.639792943416424deg);
}
60% {
-ms-transform:
scale(1.149232)
rotateY(138.36020705658356deg);
}
70% {
-ms-transform:
scale(1.125424)
rotateY(174.51657047658713deg);
}
80% {
-ms-transform:
scale(1.024576)
rotateY(179.82864282739334deg);
}
90% {
-ms-transform:
scale(1.000768)
rotateY(180deg);
}
100% {
-ms-transform:
scale(1)
rotateY(180deg);
}
}
@-o-keyframes front {
0% {
-o-transform:
scale(1)
rotateY(0deg);
}
10% {
-o-transform:
scale(1.000768)
rotateY(0deg);
}
20% {
-o-transform:
scale(1.024576)
rotateY(0deg);
}
30% {
-o-transform:
scale(1.125424)
rotateY(0.17135717260665195deg);
}
40% {
-o-transform:
scale(1.149232)
rotateY(5.4834295234128625deg);
}
50% {
-o-transform:
scale(1.15)
rotateY(41.639792943416424deg);
}
60% {
-o-transform:
scale(1.149232)
rotateY(138.36020705658356deg);
}
70% {
-o-transform:
scale(1.125424)
rotateY(174.51657047658713deg);
}
80% {
-o-transform:
scale(1.024576)
rotateY(179.82864282739334deg);
}
90% {
-o-transform:
scale(1.000768)
rotateY(180deg);
}
100% {
-o-transform:
scale(1)
rotateY(180deg);
}
}
@keyframes front {
0% {
transform:
scale(1)
rotateY(0deg);
}
10% {
transform:
scale(1.000768)
rotateY(0deg);
}
20% {
transform:
scale(1.024576)
rotateY(0deg);
}
30% {
transform:
scale(1.125424)
rotateY(0.17135717260665195deg);
}
40% {
transform:
scale(1.149232)
rotateY(5.4834295234128625deg);
}
50% {
transform:
scale(1.15)
rotateY(41.639792943416424deg);
}
60% {
transform:
scale(1.149232)
rotateY(138.36020705658356deg);
}
70% {
transform:
scale(1.125424)
rotateY(174.51657047658713deg);
}
80% {
transform:
scale(1.024576)
rotateY(179.82864282739334deg);
}
90% {
transform:
scale(1.000768)
rotateY(180deg);
}
100% {
transform:
scale(1)
rotateY(180deg);
}
}