/* a little "hack" to display outlines
remove from live version */
*, * *, * * *, * * * * *, * * * * * * { /*box-shadow: inset 0 0 1px white, inset 0 0 2px black;*/ }

@font-face {
    font-family: 'WeissenhofGrotesk';
    src: url('WeissenhofGrotesk-Regular.eot');
    src: url('WeissenhofGrotesk-Regular.eot?#iefix') format('embedded-opentype'),
        url('WeissenhofGrotesk-Regular.woff2') format('woff2'),
        url('WeissenhofGrotesk-Regular.woff') format('woff'),
        url('WeissenhofGrotesk-Regular.svg#WeissenhofGrotesk-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}



html,body {
    outline: none !important;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: #ffffff;
    /*-webkit-overflow-scrolling: touch;*/
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    font-family: Arial, Helvetica, sans-serif;
}


/* Overwrite jq mobile theme style */
.ui-btn.ui-corner-all {
    border-radius: 4px;
}

.ui-page-theme-a .ui-btn {
    background-color: #FAFAFA;
    color: #333333;
}

.ui-page-theme-a .ui-btn:hover {
    background-color: #131644;
}

.ui-page-theme-a .ui-btn:active {
    background-color: #131644;
    color: white;
}

.ui-mobile [data-role=page], .ui-mobile [data-role=dialog], .ui-page {
    position: relative;
    height: 100%;
    overflow-y: auto;
}

body.ui-mobile-viewport, div.ui-mobile-viewport {
    /*overflow-y: auto;*/
}
html.ui-mobile, .ui-mobile body {
    height: 100%;
}

body {
    background-position: top center;
    background-size: cover;
}

/* main content area */
.main {
    width: 780px;
    margin: 0 auto;
    text-align: center;
    outline: none;

    /* this is in place to make the footer appear at the bottom if page content is smaller */
    /*min-height: 88%;*/
}

input[type=radio] {
    display:none;
}

label {
    float: right;
    color: #848484;
    line-height: 2em;
}

input[type=radio] + label>.labelbox {
    display: block;
    width: 10px;
    height: 10px;
    border: 1px solid #7B7E7A;
    background-color: #fff;
    border-radius: 50%;
    margin: 0 auto;
}

input[type=radio]:checked + label>.labelbox {
    background-color: #0088d2;
}

input[type=checkbox] {
    display:none;
}

input[type=checkbox] + label {
    display: inline-block;
    position: relative;
    width: 13px;
    height: 13px;
    border: 1px solid #7B7E7A;
    background-color: #fff;
    margin: 0 auto;
}

input[type=checkbox]:checked + label {
    /*background-color: #0088d2;*/
}

input[type=checkbox]:checked + label:after {
    border-left: 4px solid #0088d2;
    border-bottom: 4px solid #0088d2;
    content: ' ';
    position: absolute;
    width: 12px;
    height: 8px;
    margin-top: 4px;
    margin-left: -1px;
    transform: rotateZ(-45deg);
    transform-origin: 0 100%;
    box-sizing: border-box;
}

.img {
    outline: none;
}

img#banner {
    margin: 5% 0;
    /*background: url(../images/rantandrave_logo.png);*/
    margin: 5% auto;
    width: 275[x];
    height: 20px;
}

.full-width-slider {
    width: 90%;
    left: 5%;
    position: relative;
    margin: 35px 0;

}
.full-width-slider .icon-down {
    width: 63px;
    float: left;
    position: relative;
    top: 4px;
}
.full-width-slider .icon-up {
    width: 63px;
    float: right;
    position: relative;
    top: 4px;
}
.full-width-slider .slider {
    overflow: hidden;
    display: block;
    position:relative;
    top: .8em;
}
.full-width-slider input {
    display: none;
}
.full-width-slider .ui-slider-track {
      margin-left: 15px;
	  background: #FFFFFF;
}

.rr-logo {
    /*background: url(../images/rnr-logo.png);*/
    width: 175px;
    height: 58px;
    margin: 0 auto;
}

.section {
    width: 100%;
    padding: 2.5% 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.section.left {
    text-align: left;
}

.section.last {
    padding-bottom: 0;
}

.section.content {
    background-color: white;
    border-radius: 15px;
    padding: 2.5%;
    margin-bottom: 5%;
}

.section.title {
    border-bottom: 1px solid lightgrey;
}

.section.red {
    color: #bc0101;
}

.red-outline,
input[type="text"].red-outline,
textarea.red-outline,
select.red-outline
{
    border: 2px solid #bc0101;
}

p.title {
    padding: 0;
    margin: 0;
    font-size: 1.9em;
    line-height: 1.5em;
    font-family:UniversLTStd-Ex,Arial, Helvetica, sans-serif;
    color: #000000;
}

p.subtitle {
    margin: 0;
    padding: 0;
    font-size: 1.4em;
    line-height: 1.125em;
    color: #000000;
    text-align: center;
}

input[type="text"],textarea,select {
    -webkit-appearance: none;
    margin: 0;
    min-height: 1em;
    width: 100%;
    border-radius: 10px;
    border: 1px solid #b1b1b1;
    font-size: 13px;
    line-height: 1.75em;
    font-family: Arial, Helvetica, sans-serif;
    padding: 0 .5em;
            box-sizing: border-box;
   -moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}

select {font-size:16px;}

textarea {
    padding: .5em;
    height: auto;
    line-height: 1.25em;
    font-size: 1em;
    resize:none;
    outline: none;

}

input, select, textarea, textarea:focus, input:focus{
    color: #131644;
}

select {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* label {
    float: right;
    color: #848484;
    line-height: 2em;
} */

.rant-and-rave-bar {
    height: 8%;
    width: 100%;
    text-align: center;
    background-color:white;
    position: relative;
    min-height: 91px;
    border-top: 1px solid #d7d7d7;
}

span.small {
    font-size: .8em;
    line-height: 1em;
    color:#848484;
}

span,p.title, p.subtitle {
    -moz-user-select: text;
    -khtml-user-select: text;
    -webkit-user-select: text;
}

/*.slider {
    width: 100%;
    margin: 2.5% 0;
}*/

.slider .rave-face {
    width: 16%;
    height: 100%;
    display: inline-block;
    text-align: center;
}

.slider .slider-main {
    width: 66%;
    height: 100%;
    display: inline-block;
    vertical-align: top;
}

.slider .slider-main .numbers {
    display: inline-block;
    width: 93.5%;
}

.slider .slider-main .numbers div.number {
    width: 20%;
    float: left;
}

.slider .slider-main .numbers div.number div.number-square {
    height: 30px;
    width: 30px;
    border: 2px solid #e1e1e1;
    border-radius: 50%;
    position: relative;
    left: 50%;
    margin-left: -15px;
    line-height: 30px;
    font-family: Arial, Helvetica, sans-serif;
    color: #e1e1e1;
    text-align: center;
    cursor: pointer;
}

span.normal {
    color: #7B7E7A;
}

span.error{
	background: #FF6666;
	color: #FFFFFF;
	display: none;
}

span.normal.red{
    color: #bc0101 !important;
}

.slider .slider-main .numbers div.number div.number-square.active {
    color: #0088d2;
    border-color: #0088d2;
}

.slider img {
    width: 100%;
}

.slider .slider-main .slider-sub {
    position: relative;
    height: 100px;
    width: 100%;
}

.slider .slider-sub .rail {
    background-color: #e7e7e7;
    width: 100%;
    height: 15px;
    border-radius: 8px;
    border: 1px solid #e3e3e3;
    top: 35px;
    position: relative;
    width: 90%;
    left: 5%;
}

.slider .slider-sub .rail .handle {
    width: 63px;
    height: 63px;
    top: -23px;
    left: 0;
    position: absolute;
    background: transparent url(../images/thumb_scores.png);
    cursor: pointer;
    -ms-touch-action: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    outline: none;
    margin-left: -1px;
}

.slider .slider-sub .rail .handle.at1 {
    background-position: -82px;
}

.slider .slider-sub .rail .handle.at2 {
    background-position: -165px;
}

.slider .slider-sub .rail .handle.at3 {
    background-position: -246px;
}

.slider .slider-sub .rail .handle.at4 {
    background-position: -326px;
}

button, .ui-page-theme-a button.ui-btn {
    background-color: #131644;
    color: white;
    padding: 0 5%;
    font-size: 1.5em;
    line-height: 1.6em;
    font-family: UniversLTStd-Ex,Arial, Helvetica, sans-serif;
    border: 1px solid #131644;
    border-radius: 4px;
    margin-top: 2.5%;
    margin-bottom: 1em;
    cursor: pointer;
    width: auto;
    box-sizing: border-box;
    display: inline-block;
}

.rant-and-rave-bar div {
    position: absolute;
    left: 50%;

    top: 50%;
    margin-left:-122px;
    margin-top:-32px;
}

a {
    border: none;
    outline: none;
}

/* rave face needs some adjustments to be aligned with rant */
.rave {
    margin-bottom: -35%;
    max-width: 91px;
    max-height: 124px;
}

.rant {
    max-width: 90px;
    max-height: 123px;
}

/* hide the rest of the pages until we swap them around */
.page {
    display: none;
}

#params {
    display: none;
}

.section.recommend .ui-btn {
   padding: .7em .7em;
}
.section.recommend .ui-btn-icon-left {
    padding-left: 2em;
}



/* go full width at less than 650px (form width) */
@media only screen and (max-width: 650px) {
    .main {
        margin: 0;
        /*width: 100%;*/
        width: 80%;
        margin-left: 10%;
    }
    .ui-mobile [data-role="page"], .ui-mobile [data-role="dialog"], .ui-page {
        height: auto !important;
        overflow-y: hidden !important;
    }
    .section.content {
        border-radius: 0;
    }
}

@media (-webkit-min-device-pixel-ratio: 2) {
    /* .hss-top-logo {
    background: url(../images/rantandrave_logo2x.png);
    background-size: 280px 72.5px;
}
    .rr-logo {
    background: url(../images/rnr-logo2x.png);
    background-size: 243.5px 63px;
}
    .slider .slider-sub .rail .handle {
    background: transparent url(../images/thumb_scores_2x.png);
    background-size: 389px 63px;
}
    */
}

/* at mobile size, make some adjustments */
@media only screen and (max-width: 480px) {
    html, body {
        font-size: 0.8125em;
    }

    span.normal {
        font-size: 1.45em;
        color: #848484;
    }

    label,input[type=text],textarea,select {
        /*float: left;*/
        font-size: 1em;
        float: left;
    }

    .slider .slider-main .numbers {
        width: 87%;
    }
    .slider .slider-main .numbers div.number div.number-square {
        width: 15px;
        height: 15px;
        margin-left: -7.5px;
        line-height: 15px;
        border-width: 1px;
    }
    .slider .slider-main .slider-sub {
        height: 50px;
    }
    .slider .slider-sub .rail {
        height: 8px;
        top: 17px;
    }
    .slider .slider-sub .rail .handle {
        width: 46px;
        height: 45px;
        top: -18px;
        /*background: transparent url(../images/pizza_slices_solid_small.png);*/
        background-size: 278px 45px;
        margin-left: -1px;
    }
    .slider .slider-sub .rail .handle.at1 {
        background-position: -59px;
    }

    .slider .slider-sub .rail .handle.at2 {
        background-position: -118px;
    }

    .slider .slider-sub .rail .handle.at3 {
        background-position: -176px;
    }

    .slider .slider-sub .rail .handle.at4 {
        background-position: -232px;
    }

    button, .ui-page-theme-a button.ui-btn  {
        width: 100%;
        margin-left: 0;
    }

    .section.recommend .ui-btn {
        width: 100%;
        box-sizing: border-box;
    }
}

#topnav {list-style-type: none; margin:auto; border-bottom:1px solid #ccc; height:30px;}
#topnav li {
    /*float:left;*/
    display: inline-block;
    padding: 0px 15px;
    font-size:11px;
    font-weight: bold;
}
#topnav li a {text-decoration: none; color: #000;}
#footertext {font-size:11px; line-height: 1.5em;}


.starsBlock {text-align: left; position: relative; margin:20px auto; width:158px;}
.star1,.star2,.star3,.star4,.star5 {position:absolute; width:29px; height:27px;  display:block; cursor:pointer;}
.star1 {left:0px; top:0px;}
.star2 {left:31px; top:0px;}
.star3 {left:62px; top:0px;}
.star4 {left:93px; top:0px;}
.star5 {left:124px; top:0px;}
#A_3-button {display:none !important;}