/*custom font*/
@import url(https://fonts.googleapis.com/css?family=Montserrat);

.steps {
    width               : 400px;
    float               : right;
    left                : 708px;
    position            : absolute;
    top                 : 12px;
}

.progressbar li{
    cursor              : pointer;
}

/*basic reset*/
* {
    margin              : 0;
    padding             : 0;
}

/*form styles*/
#msform {
    width               : 400px;
    margin              : 50px auto;
    text-align          : center;
    position            : relative;
}

#msform fieldset {
    background          : white;
    border              : 0 none;
    border-radius       : 3px;
    box-shadow          : 0 0 15px 1px rgba(0, 0, 0, 0.4);
    padding             : 20px 30px;

    box-sizing          : border-box;
    width               : 80%;
    margin              : 0 10%;

    /*stacking fieldsets above each other*/
    position            : absolute;
}

/*Hide all except first fieldset*/
#msform fieldset:not(:first-of-type) {
    display             : none;
}

/*inputs*/
#msform input, #msform textarea {
    padding             : 15px;
    border              : 1px solid #ccc;
    border-radius       : 3px;
    margin-bottom       : 10px;
    width               : 100%;
    box-sizing          : border-box;
    *font-family         : montserrat;
    color               : #2C3E50;
    font-size           : 13px;
}

/*buttons*/
#msform .action-button {
    width               : 100px;
    background          : #27AE60;
    font-weight         : bold;
    color               : white;
    border              : 0 none;
    border-radius       : 1px;
    cursor              : pointer;
    padding             : 10px 5px;
    margin              : 10px 5px;
}

#msform .action-button:hover, #msform .action-button:focus {
    box-shadow          : 0 0 0 2px white, 0 0 0 3px #27AE60;
}

/*headings*/
.fs-title {
    font-size           : 15px;
    text-transform      : uppercase;
    color               : #2C3E50;
    margin-bottom       : 10px;
}

.fs-subtitle {
    font-weight         : normal;
    font-size           : 13px;
    color               : #666;
    margin-bottom       : 20px;
}

/*progressbar*/
.progressbar {
    margin-bottom       : 30px;
    overflow            : hidden;
    /*CSS counters to number the steps*/
    counter-reset       : step;
}

.progressbar li {
    list-style-type     : none;
    text-transform      : uppercase;
    font-size           : 9px;
    width               : 24.33%;
    float               : left;
    position            : relative;
    text-align          : center;
    line-height         : 11px;
    color: #1172C1;
    text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}

.progressbar li:before {
    content             : counter(step);
    counter-increment   : step;
    width               : 35px;
    line-height         : 36px;
    display             : block;
    font-size           : 10px;
    color               : #333;
    background          : white;
    border-radius       : 3px;
    margin              : 0 auto 5px auto;
    height              : 35px;
    font-size           : 18px;
    box-shadow          : 2px 3px 2px #c4c4c4;
    *font-family: "PT Sans", Arial, Helvetica, sans-serif !important;
    font-weight: 600;
}

/*progressbar connectors*/
.progressbar li:after {
    content             : '';
    width               : 64%;
    height              : 2px;
    background          : #00c6ff !important;
    position            : absolute;
    left                : -32%;
    top                 : 19px;
}

.progressbar li:first-child:after {
    /*connector not needed before the first step*/
    content             : none;
}

/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
.progressbar li.active:before, .progressbar li.active:after {
    background          : -webkit-linear-gradient(bottom, #AAD75D, #D1E990);
    color               : rgb(17, 114, 193);;
}

.progressbar li.inactive:before, .progressbar li.inactive:after {
    background: -webkit-linear-gradient(top, #b5e0f7 0%, #76c7f1 100%);
    color: rgb(17, 114, 193);
}


/*********************************************************************/
.card {
    position            : relative;
    float               : left;
    padding-bottom      : 25%;
    width               : 100%;
    text-align          : center;
}

.card__front,
.card__back {
    position            : absolute;
    top                 : 0;
    left                : 0;
    width               : 100%;
    *height              : 100%;
    font-size           : 13px !important;
    background          : rgba(44, 130, 177, 0.83);
    *background          : #0078FF;
    padding             : 0 8px 4px 8px !important;
}

.card__front,
.card__back {
    -webkit-backface-visibility: hidden;
    backface-visibility : hidden;
    -webkit-transition  : -webkit-transform 1.5s;
    transition          : transform 1.5s;
}

.card__front {
    *background-color    : #ff5078;
}

.card__back {
    *background-color    : #1e1e1e;
    -webkit-transform   : rotateX(-180deg);
    transform           : rotateX(-180deg);
}

.card.effect__random.flipped .card__front {
    -webkit-transform   : rotateX(-180deg);
    transform           : rotateX(-180deg);
}

.card.effect__random.flipped .card__back {
    -webkit-transform   : rotateX(0);
    transform           : rotateX(0);
}