<style type="text/css">



/***** Top content *****/

.top-content { padding: 40px 0 170px 0; }

.top-content .text { color: #fff; }
.top-content .text h1 { color: #fff; }
.top-content .description { margin: 20px 0 10px 0; }
.top-content .description p { opacity: 0.8; }
.top-content .description a { color: #fff; }
.top-content .description a:hover, 
.top-content .description a:focus { border-bottom: 1px dotted #fff; }

.form-box { padding-top: 40px; }

.f1 {
    /* padding: 0px; */
    background: #fff;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}
.f1 h3 { margin-top: 0; margin-bottom: 5px; text-transform: uppercase; }

.f1-steps { overflow: hidden; position: relative; margin-top: 20px; }

.f1-progress {position: absolute;top: 24px;left: 0;width: 100%;height: 1px;background: #ddd;}
.f1-progress-line { position: absolute; top: 0; left: 0; height: 1px; background: #f35b3f; }

.f1-step {position: relative;float: left;width: 10%;padding: 0 5px;}

.f1-step-icon {
    display: inline-block;
    width: 48px;
    height: 48px;
    margin-top: 0px;
    background: #ddd;
    font-size: 22px;
    color: #fff;
    line-height: 48px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    text-align: center;
}

.f1-step.activated .f1-step-icon {
    background: #188eb1;
    border: 1px solid #ffffff;
    color: #ffffff;
    /* line-height: 38px; */
}
.f1-step.active .f1-step-icon {
    width: 48px;
    height: 48px;
    margin-top: 0;
    background: #f35b3f;
    font-size: 22px;
    line-height: 48px;
    text-align: center;
    /* color: #fff; */
}

.f1-step p { color: #ccc; }
.f1-step.activated p {color: #188eb1;}
.f1-step.active p {color: #f35b3f;}

.f1 fieldset { display: none; text-align: left; }

.f1-buttons {text-align: right;margin-top: 10px;margin-left: 2%;margin-bottom: 8px;}

.f1 .input-error { border-color: #f35b3f; }



/***** Media queries *****/

button.Wzard {
    margin: 4px;
    min-width: 105px;
    height: 40px;
    /* margin: 0; */
    padding: 0 20px;
    vertical-align: middle;
    border: 0;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 40px;
    color: #fff;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    text-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    -o-transition: all .3s;
    -moz-transition: all .3s;
    -webkit-transition: all .3s;
    -ms-transition: all .3s;
    transition: all .3s;
}

button.Wzard:hover { opacity: 0.6; color: #fff; }
button.Wzard:active { outline: 0; opacity: 0.6; color: #fff; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; }
button.Wzard:focus,
button.Wzard:active:focus,
button.Wzard.active:focus { outline: 0; opacity: 0.6; color: #fff; }

button.Wzard.btn-next,
button.Wzard.btn-next:focus,
button.Wzard.btn-next:active:focus, button.Wzard.btn-next.active:focus { background: #f35b3f; }

button.Wzard.btn-submit,
button.Wzard.btn-submit:focus,
button.Wzard.btn-submit:active:focus, button.Wzard.btn-submit.active:focus { background: #f35b3f; }

button.Wzard.btn-previous,
button.Wzard.btn-previous:focus,
button.Wzard.btn-previous:active:focus, button.Wzard.btn-previous.active:focus {background: #bbb;/* margin: 4px; */}
 
.step-title  {
    padding: 9px !important;
    border-top: 2px solid #188eb1!important;
    color: #f35b3f!important;
}
.wizard-title-row {
    border-bottom: 2px solid #188eb1;
    margin-bottom: 1%;
    padding-left: 1%;
}
.wizard-row{
    padding-left: 3%;
}

.wizard-btns-row{
    padding-left: 1%;
    border-top: 2px solid #188eb1;
    margin-top: 1%;
}
.wizard-btn{float: right;/* margin-right: 13px; */}
.f1-step {
    position: relative;
    width: 9%;
    padding: 0 5px;
}

@media (min-width:320px)  { /* smartphones, iPhone, portrait 480x320 phones */ 
    .f1-step {
    position: relative;
    width: 9%;
    padding: 0 15px;
    }
    .wizard-btn{
        float: left;
    }
}
@media (min-width:481px)  { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ 
    .f1-step {
    position: relative;
    width: 9%;
    padding: 0 15px;
    }
    .wizard-btn{
    float: right;
    }
    
}
@media (min-width:641px)  { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
    .f1-step {
    position: relative;
    width: 9%;
    padding: 0 4px;
    }
 }

 </style>