/* Hero
*****************************************************************/
.hero_container {
    width: 100%;
    height: auto;

    margin-bottom: 50px;

    background-color: rgba(139, 31, 66, 1.0); /* Bupl Bordeaux */

    display: none; /* iframe setting */
}

.hero_wrapper {
    width: 1440px;
    height: auto;

    margin: 0 auto;

    padding: 75px;

    color: rgba(255, 255, 255, 1.0); /* White */
}

.hero_text, .hero_image {
    float: left;

    width: 50%;
    height: auto;
}

.hero_image {
    text-align: center;
}

.hero_image img {
    width: 60%;
    height: auto;
}

/* Questionare
*****************************************************************/
.job_input {
    width: 225px;
}

.job_radio {
    width: auto;
    margin-right: 5px;
}

.job_radio_padding {
    margin-right: 5px;
    margin-left: 35px;
}

.radio_box {
    float: left;
}

/* Questionare
*****************************************************************/
.question_header, .question_input, .question_help {
    position: relative;
    float: left;

    width: 100%;
    height: auto;
}

.question_header {
    width: 100%;
    height: auto;

    margin-bottom: 5px;
}

.question_input {
    width: 66%;
    height: 50px;

    margin-bottom: 25px;
}

.question_help {
    width: 65px;
    height: 50px;

    text-align: right;

    margin-bottom: 20px;
}

.question_help img {
    width: 25px;
}

.question_input_first, .question_help_first {
    margin-bottom: 0px;
}

#section_salarybudget, #section_leaders {
    width: 100%;
    height: auto;

    display: none;
}

/* Result - profile and choice
*****************************************************************/
.result_profile_image {
    float: left;

    width: calc(35% - 15px);
    height: auto;

    margin-right: 15px;
}

.result_profile_text {
    float: left;

    width: 65%;
    height: auto;
}

.result_row {
    float: left;

    width: 100%;
    height: auto;

    font-size: 0.90em;
}

.result_header {
    float: left;

    width: 175px;
    height: auto;

    font-family: "quatro-slab", serif;
    font-weight: 600;
}

.result_input {
    float: left;

    width: calc(100% - 175px);
    height: auto;

    min-height: 25px;
}

/* Result: Text
   ========================================================================== */
.result_headline {
    display: table;
    margin: 0 auto;

    color: rgba(139, 31, 66, 1.0); /* Bupl Bordeaux */
    font-weight: 800;
    font-style: normal;
    font-size: 2.5em;
    text-align: center;
    line-height: 1.0; /* Remove unwanted top/bottom spacing */

    margin-bottom: 10px;
}

.result_subheadline {
    display: table;

    font-size: 1.0em;
    text-align: center;
    /*line-height: 0.8; /* Remove unwanted top/bottom spacing */

    margin: 0 auto;
    margin-bottom: 15px;
}

.result_subheadline:nth-child(2) {
    line-height: 1.2; /* Increase gab when two */
}

/* Result - Barometer
   ========================================================================== */
.result_container {
    position: relative;

    width: 100%;
    height: auto;

    /*margin-top: 20px;*/
}

.result_percentages {
    position: relative;

    display: none;
}

.result_texts {
    z-index: 15;
    position: relative;

    height: 200px;
}

.result_10_text, .result_25_text, .result_50_text, .result_75_text, .result_90_text {
    position: absolute;

    width: 140px;
    height: 200px;

    font-size: 0.8em;
    text-align: center;
    line-height: 1.2;
}

.result_10_text {
    left: calc(10% - 70px); 
    padding-top: 102px;

    background-image: url("/images/percent_10.png");
    background-repeat: no-repeat;
    background-position: center;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
}

.result_25_text {
    left: calc(25% - 70px); 
    padding-top: 70px;

    background-image: url("/images/percent_25.png");
    background-repeat: no-repeat;
    background-position: center;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
}

.result_50_text {
    left: calc(50% - 70px);
    padding-top: 70px;

    background-image: url("/images/percent_50.png");
    background-repeat: no-repeat;
    background-position: center;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
}

.result_75_text {
    left: calc(75% - 70px);
    padding-top: 70px;

    background-image: url("/images/percent_75.png");
    background-repeat: no-repeat;
    background-position: center;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
}

.result_90_text {
    left: calc(90% - 70px);
    padding-top: 102px;

    background-image: url("/images/percent_90.png");
    background-repeat: no-repeat;
    background-position: center;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
}

.result_25_text b, .result_50_text b, .result_75_text b {
    font-size: 1.20em;

    color: rgba(139, 31, 66, 1.0); /* Bupl Bordeaux */
}

.result_10_text b, .result_90_text b {
    font-size: 1.20em;

    color: rgba(139, 31, 66, 0.75); /* Bupl Bordeaux */
}

.result_boxes {
    position: relative;

    margin-top: -22px;
}

.result_boxes img {
    display: none;
}

.result_0_10, .result_10_25, .result_25_50, .result_50_75, .result_75_90, .result_90_100 {
    float: left;

    width: auto;
    height: 60px;

    background-color: rgba(139, 31, 66, 1.0); /* Bupl Bordeaux */
}

.result_0_10 {
    width: 10%;

    background-color: rgba(139, 31, 66, 0.75); /* Bupl Bordeaux */

    border-style: solid;
    border-width: 0px 1px 0px 0px;
    border-color: rgba(255, 255, 255, 1.0); /* White */
}

.result_10_25 {
    width: 15%;

    border-style: solid;
    border-width: 0px 1px;
    border-color: rgba(255, 255, 255, 1.0); /* White */
}

.result_25_50 {
    width: 25%;

    border-style: solid;
    border-width: 0px 1px;
    border-color: rgba(255, 255, 255, 1.0); /* White */
}

.result_50_75 {
    width: 25%;

    border-style: solid;
    border-width: 0px 1px;
    border-color: rgba(255, 255, 255, 1.0); /* White */
}

.result_75_90 {
    width: 15%;

    border-style: solid;
    border-width: 0px 1px;
    border-color: rgba(255, 255, 255, 1.0); /* White */
}

.result_90_100 {
    width: 10%;

    background-color: rgba(139, 31, 66, 0.75); /* Bupl Bordeaux */

    border-style: solid;
    border-width: 0px 0px 0px 1px;
    border-color: rgba(255, 255, 255, 1.0); /* White */
}

.disclaimer {
    font-size: 0.9em;

    padding: 15px;
    margin-top: 50px;

    border-style: solid;
    border-width: 2px;
    border-color: rgba(139, 31, 66, 0.75); /* Bupl Bordeaux */

    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
}

/* Help icon and box
*****************************************************************/
.helpicon {
    position: relative;
    top: -2px;

    display: inline-block;

    width: 20px;
    height: 20px;

    margin-left: 5px;
}

.helpicon:hover {
    cursor: pointer;
}

.helpbox {
	z-index: 25;
	position: absolute;
	top: 25px;
	left: 25px;

	width: calc(100% - 50px);
	height: auto;
	padding: 25px;

    background-color: rgba(255, 255, 255, 1.0); /* White */
    text-align: left;

	-webkit-box-shadow: 1px 1px 3px 0px rgba(50, 50, 50, 0.35);
	-moz-box-shadow: 1px 1px 3px 0px rgba(50, 50, 50, 0.35);
	-o-box-shadow: 1px 1px 3px 0px rgba(50, 50, 50, 0.35);
	box-shadow: 1px 1px 3px 0px rgba(50, 50, 50, 0.35);
    border: 1px solid;
	border-color: rgba(227, 227, 226, 1.0); /* 20% black */

	display: none;
}