%PDF-
%PDF-
Mini Shell
Mini Shell
/*slider style*/
.slidewrap{
border: 1px solid #fff;
border-radius:5px;
margin-top:30px;
max-width:500px;
}
.slidewrap input{
background:#fff;
border:none;
width:100%;
color:#000;
text-align:center;
height:60px;
}
.ui-widget-header{
background:#4353ff;
}
.ui-widget.ui-widget-content{
background:#e8eef6;
border:none;
height:5px;
margin:50px;
}
.ui-slider .ui-slider-handle{
width:80px;
height:40px;
top:-19px;
border-radius:20px;
outline:none;
border:1px solid #b7bfd7;
background:#fff url(../images/dragbg.png)center no-repeat;
margin-left:-40px;
cursor:pointer;
}
.ui-slider .ui-slider-handle.ui-state-active{
opacity:.8;
}
/*
rating style */
/* Rating Star Widgets Style */
.rating-stars ul {
list-style-type:none;
padding:0;
text-align:left;
-moz-user-select:none;
-webkit-user-select:none;
}
.rating-stars ul > li.star {
display:inline-block;
}
/* Idle State of the stars */
.rating-stars ul > li.star > i.fa {
font-size:2.5em; /* Change the size of the stars */
color:#ccc; /* Color on idle state */
}
/* Hover state of the stars */
.rating-stars ul > li.star.hover > i.fa {
color:rgba(255,255,255,0.5);
}
/* Selected state of the stars */
.rating-stars ul > li.star.selected > i.fa {
color:rgba(255,255,255,0.9);
}
body{
background-color: #e57f2c;
font-size:18px;
}
.main {
width: 100%;
height:100vh;
display: -webkit-flex; /* Safari */
-webkit-align-items: center; /* Safari 7.0+ */
display: flex;
align-items: center;
text-align:center;
color:#fff;
}
.main .btn{
height:60px;
font-size:25px;
color: rgb(128, 128, 128);
margin-top:15px;
}
.main div {
-webkit-flex: 1; /* Safari 6.1+ */
flex: 1;
}
.heading{
margin:80px 0 55px;
color:#fff;
line-height:1;
}
.formwrap{
color:#fff;
padding-top:100px;
padding-bottom:200px;
display:none;
}
.formwrap .active label{
color:#fff;
}
.formwrap label{
font-size:22px;
font-family: 'SFUIDisplay-Medium';
display:block;
color:#fff;
}
.form-group.active,.form-group.active:hover{
opacity:1;
}
.form-group:hover{
opacity:.9;
}
.form-group{
padding-top:70px;
transition:.5s;
width:100%;
opacity:.7;
float:left;
}
.form-group>div{
width:100%;
}
.form-group.active>div{
}
.form-group button {
height: 50px;
border: 0;
border-radius: 4px;
margin-top:30px;
font-size: 14px;
outline: none;
}
button.continue{
background:#fff;
color:#f44336;
}
.form-group .btn-group{
display:block;
margin-top:28px;
}
.formwrap .btn-group label.btn{
width:auto;
padding-left:20px;
height:60px;
color:#fff;
font-size:18px;
border:1px solid #fff;
line-height:48px;
text-align:left;
box-shadow:none;
font-weight:100;
text-align:center;
}
.formwrap .btn-group.fl label.btn{
display: -webkit-flex; /* Safari */
-webkit-flex-wrap: nowrap; /* Safari 6.1+ */
display: flex;
flex-wrap: nowrap;
}
.formwrap .btn-group.btnbig label.btn{
width: 180px;
border:none;
padding: 0;
margin: 0px 11px 20px!important;
display: inline-block;
float: none;
height:155px;
}
.formwrap .btn-group.btnbig label.btn.active{
border:none;
}
.btnbig .radiobtn {
width: 100%;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
color: #fff;
font-size: 16px;
background: rgba(255,255,255,0);
border:1px solid #fff;
font-family: 'Gibson';
transition: .2s;
height:100%;
display:table;
letter-spacing:1.1px;
-webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.3);
box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.3);
}
.btnbig .radiobtn span{
display:table-cell;
width:100%;
vertical-align:middle;
padding:0 10px;
}
.btnbig .radiobtn.active,.btnbig .radiobtn:hover{
color: #fff;
background: rgba(255,255,255,0.1);
}
.formwrap .btn-group label.btn.active{
color:#fff;
background: rgba(255,255,255,0.1);
border:1px solid #fff;
}
.form-group .form-control{
width:100%;
padding-left:20px;
height:60px;
color:#fff;
font-size:18px;
border:none;
border-bottom:1px solid #fff;
margin-top:28px;
background:none;
box-shadow:none!important;
-webkit-box-shadow:none!important;
border-radius:0px!important;
}
@media (max-width: 767px)
{
body{
overflow:hidden;
}
.main h1{
font-size:18px;
}
.main .btn {
height: 40px;
font-size: 15px;
}
.formwrap{
padding-top:0px;
height:100vh;
overflow:hidden;
position:relative;
}
.form-group{
padding:30px 15px 0;
left:0;
position:absolute;
transition:top .3s;
top:500%;
}
.form-group.active{
top:0;
height:100%;
width:100%;
}
.form-group.prevq{
top:-500%;
}
.form-group>div{
overflow:auto;
}
.formwrap label{
font-size:18px;
}
.form-group .btn-group{
margin-top:22px;
}
.form-group .btn-group label.btn{
font-size:14px;
height:42px;
line-height:30px;
}
.form-group .form-control{
height:42px;
font-size:14px;
margin-top:22px;
}
.form-group.active{
//margin-bottom:60px;
}
.form-group button{
width:48%;
float:left;
height:40px;
font-size:12px;
margin-top:25px;
}
.form-group button.back{
margin-right:4%;
}
.ui-slider .ui-slider-handle{
width:52px;
height:30px;
top:-14px;
margin-left:-26px;
}
.ui-widget.ui-widget-content{
margin:40px;
}
.formwrap .btn-group:not(.fl) label.btn {
margin: 10px auto 10px!important;
display: block;
float:none;
border-radius:4px!important;
}
.formwrap .btn-group.btnbig label.btn {
width: 140px;
margin: 20px 0 20px!important;
display: block;
height: 100px;
}
}
@media (max-width: 374px)
{
}
.form-control::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: rgba(255,255,255,0.8);
}
.form-control::-moz-placeholder { /* Firefox 19+ */
color: rgba(255,255,255,0.8);
}
.form-control:-ms-input-placeholder { /* IE 10+ */
color: rgba(255,255,255,0.8);
}
.form-control:-moz-placeholder { /* Firefox 18- */
color: rgba(255,255,255,0.8);
}
.flicker {
-webkit-animation: mymove .15s 2; /* Safari 4.0 - 8.0 */
animation: mymove .15s 2;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove {
from {opacity: 1;}
to {opacity: 0;}
}
@keyframes mymove {
from {opacity: 1;}
to {opacity: 0;}
}
Zerion Mini Shell 1.0