/* -----------------------------------*/
/* ------->>> MASTER STYLES <<<-------*/
/* -----------------------------------*/

body {
    font-family: 'Fabrik', Arial, sans-serif;
    font-weight: bold;
    font-size: 14px;
    color: #fff;
}

.row { display: block; width: 100%; float: left; }
.container { margin: 0 auto; }
.tile { display: block; float: left; margin-top: 20px; margin-right: 20px; }
img { max-width: 100%; }
a { text-decoration: none; }
.clear { clear: both; }
.void { display: none; }

.question .answer-icons-wrapper { position: relative; }
.question .answer-wrapper img.answer-check { position: absolute; right: 10px; bottom: 0; }



/* -----------------------------------*/
/* -------->>> START PAGE <<<---------*/
/* -----------------------------------*/
.start {
    text-align: center;
    color: #fff;
}

.intro .title {
    text-transform: uppercase;
    text-shadow: 2px 2px 2px #b55d3e;
    margin: 0;
}

.intro .start-btn {
    display: block;
    color: #fc4613;
    text-transform: uppercase;
}



/* -----------------------------------*/
/* ------->>> QUESTION PAGE <<<-------*/
/* -----------------------------------*/

/* ------->>> IMAGES FOR ANSWERS TO QUESTIONS <<<-------*/

/* ------->>> Question 1 <<<-------*/
.q01-a01 { background-image: url("../images/answers/q01_a01.png"); }
.q01-a02 { background-image: url("../images/answers/q01_a02.png"); }

/* ------->>> Question 2 <<<-------*/
.q02-a01 { background-image: url("../images/answers/q02_a01.png"); }
.q02-a02 { background-image: url("../images/answers/q02_a02.png"); }
.q02-a03 { background-image: url("../images/answers/q02_a03.png"); }
.q02-a04 { background-image: url("../images/answers/q02_a04.png"); }

/* ------->>> Question 3 <<<-------*/
.q03-a01 { background-image: url("../images/answers/q03_a01.png"); }
.q03-a02 { background-image: url("../images/answers/q03_a02.png"); }
.q03-a03 { background-image: url("../images/answers/q03_a03.png"); }
.q03-a04 { background-image: url("../images/answers/q03_a04.png"); }

/* ------->>> Question 4 <<<-------*/
.q04-a01 { background-image: url("../images/answers/q04_a01.png"); }
.q04-a02 { background-image: url("../images/answers/q04_a02.png"); }
.q04-a03 { background-image: url("../images/answers/q04_a03.png"); }
.q04-a04 { background-image: url("../images/answers/q04_a04.png"); }

/* ------->>> Question 5 <<<-------*/
.q05-a01 { background-image: url("../images/answers/q05_a01.png"); }
.q05-a02 { background-image: url("../images/answers/q05_a02.png"); }
.q05-a03 { background-image: url("../images/answers/q05_a03.png"); }
.q05-a04 { background-image: url("../images/answers/q05_a04.png"); }

/* ------->>> Question 6 <<<-------*/
.q06-a01 { background-image: url("../images/answers/q06_a01.png"); }
.q06-a02 { background-image: url("../images/answers/q06_a02.png"); }

/* ------->>> Question 7 <<<-------*/
.q07-a01 { background-image: url("../images/answers/q07_a01.png"); }
.q07-a02 { background-image: url("../images/answers/q07_a02.png"); }
.q07-a03 { background-image: url("../images/answers/q07_a03.png"); }
.q07-a04 { background-image: url("../images/answers/q07_a04.png"); }

/* ------->>> Question 8 <<<-------*/
.q08-a01 { background-image: url("../images/answers/q08_a01.png"); }
.q08-a02 { background-image: url("../images/answers/q08_a02.png"); }
.q08-a03 { background-image: url("../images/answers/q08_a03.png"); }
.q08-a04 { background-image: url("../images/answers/q08_a04.png"); }

/* ------->>> Question 9 <<<-------*/
.q09-a01 { background-image: url("../images/answers/q09_a01.png"); }
.q09-a02 { background-image: url("../images/answers/q09_a02.png"); }
.q09-a03 { background-image: url("../images/answers/q09_a03.png"); }
.q09-a04 { background-image: url("../images/answers/q09_a04.png"); }

/* ------->>> Question Bonus <<<-------*/
.bonus-a01 { background-image: url("../images/answers/bonus_a01.png"); }
.bonus-a02 { background-image: url("../images/answers/bonus_a02.png"); }
.bonus-a03 { background-image: url("../images/answers/bonus_a03.png"); }
.bonus-a04 { background-image: url("../images/answers/bonus_a04.png"); }

.question {
    text-align: center;
}

.question .question-header .back-nav-top {
    text-align: left;
    position: relative;
    top: 38px;
    left: 14px;
}

.question .question-header .back-nav-top .arrow-back-btn {
    background: url("../images/arrow.png") no-repeat;
    float: left;
    width: 25px;
    height: 17px; 
}

.question .question-header .back-nav-top .back-btn,
.question .back-nav-bottom .back-btn {
    color: #fff;
}

.question .question-header .question-number {
    float: right;
    width: 100%;
}

.question .question-header .progress-label {
    float: right;
    position: relative;
}

.question .question-header .question-number .number-symbol {
    color: #fc4513;
    position: relative;
}

.question .answers {
    margin: 0 5% 0 5%;
}

.question .answers div {
    display: inline-block;
}

.question .answer-wrapper {
    float: left;
}

.question .answer-wrapper .answer-text {
    color: #fffefe;
    margin-left: auto;
    margin-right: auto;
}

.question .answer-wrapper > input {
    visibility: hidden;
    position: absolute;
}

/*
.question .answer-icons-wrapper .bg-answer:active + img {
    display: inline-block;
}
*/

.question .answer-wrapper img.answer-check { display: none; }

.question .answer-wrapper:active img.answer-check,
.question .answer-wrapper.active img.answer-check { display: block; }



/* -----------------------------------*/
/* ------->>> RESULTS PAGE <<<--------*/
/* -----------------------------------*/

.results {
    text-align: center;
    padding-top: 30px;
}

.results .results-header .results-image .results-title {
    color: #fc4513;
    text-transform: uppercase;
    position: relative;
    top: 19px;
    right: -1px;
}

.results .results-header .quiz-title {
    font-size: 18px;
    
}

.results .separator {
    background: url("../images/separator.png") no-repeat;
    height: 5px;
}


/* ------->>> Beyonder type <<<-------*/
.results .type {
    background-color: #fff;
    color: #3b3c44;
}

.results .type .type-header {
    position: relative;
}

.results .type .type-header .badge-image-wrapper {
    position: absolute;
    top: -22px;
    left: -25px; 
    height: 165px;
    width: 275px;
}

.results .type .type-header .badge-image-wrapper.adventure-maker {
    background: url("../images/badges/adventure_maker_badge.png") no-repeat;
    background-size: 55%;
}

.results .type .type-header .badge-image-wrapper.inspired-inventor {
    background: url("../images/badges/inspired_inventor_badge.png") no-repeat ;
    background-size: 55%;
}

.results .type .type-header .badge-image-wrapper.skilled-strategist {
    background: url("../images/badges/skilled_strategist_badge.png") no-repeat;
    background-size: 55%;
}

.results .type .type-header .badge-image-wrapper.conected-creator-badge {
    background: url("../images/badges/conected_creator_badge.png") no-repeat;
    background-size: 55%;
}

.results .type .type-header .type-title {
    background-color: #f7f0df;
    text-align: left;
    line-height: 33px;
    padding: 20px 0 25px 140px;
}

.results .type .type-header .type-title .type-title-1 {
	font-size: 30px;
    display: block;
    color: #fc4613;
}

.results .type .type-header .type-title .type-title-2 {
	font-size: 40px;
    text-transform: uppercase;
}

.results .type .type-content {
    padding: 40px 30px 20px 25px;
}

.results .type .type-desc,
.results .type .type-desc-more {
    text-align: left;
}

.results .type .type-desc-more-link,
.results .type .retake-quiz-link {
    color: #c2c2c4;
}

.results .type .type-footer {
    margin-top: 20px;
    border-top: 2px solid #fec8b8;
}

.results .type .save-results-text,
.results .type .get-badge-btn {
    font-size: 15px;
    text-transform: uppercase;
    text-align: left;
}

.results .type .save-results-text {
    color: #fc4513;
    text-align: left;
    margin: 15px 0 15px 0;
}

.results .type .get-badge-btn {
    background: url("../images/get_badge_btn.png") no-repeat;
    color: #fff;
    height: 25px;
    line-height: 26px;
    margin-top: 10px;
    padding: 10px;
    float: right;
}
.results .type .badge-plus {
    background: url("../images/plus_icon.png") no-repeat;
    position: relative;
    top: -2px;
    padding-left: 22px;
    padding-bottom: 10px;
    margin-left: 15px; 
}

.results .type .retake-quiz {
    float: right;
}

.results .type .retake-quiz-link {
    font-weight: normal;
}



/* ------->>> Builder profile <<<-------*/

.results .builder-profile {
    background-color: #f7f0df;
    color: #3b3c44;
}

.results .builder-profile .profile-title {
    text-transform: uppercase;
    text-align: left;
    padding: 25px 0 0 25px;
}

.results .builder-profile .separator {
	background-size: 100%;
    margin: 15px 25px 0 25px;
}

.results .builder-profile .profile-matrix {
    margin-top: 50px;
}

.results .builder-profile .profile-matrix img {
    display: block;
    margin: 0 auto;
}


/* ------->>> Builder challenge <<<-------*/

.builder-challenge-wrapper {
    background-color: #FFF;
    color: #3b3c44;
}

.results .builder-challenge {
    float: left;
    padding: 15px 20px 0 20px;
}

.results .builder-challenge-number {
    float: left;
    width: 110px;
}

.results .builder-challenge-number img {
    height: 260px;
}

.results .builder-challenge .bc-header {
    text-align: left;
    padding-left: 10px;
    height: 32px;
}

.results .builder-challenge .bc-header .bc-title {
    text-transform: uppercase;
    padding-left: 3%;
    position: relative;
    bottom: 23px;
    left: 30px;
}

.results .builder-challenge .bc-text {
	font-size: 18px;
    text-align: left;
}


/* ------->>> Content 01 <<<-------*/

.results .image-icon {
    position: relative;
    padding: 30px;
    top: 211px;
    right: 90px;
}
.results .skull-icon {
    background: url("../images/results/skull_icon.png") no-repeat center center;
}
.results .gamepad-icon {
    background: url("../images/results/gamepad_icon.png") no-repeat center center;
}
.results .avatar-icon {
    background: url("../images/results/avatar_icon.png") no-repeat center center;
}
.results .content-label {
    font-size: 24px;
    color: #fff;
    position: relative;
}
.results .content01 {
    background: url("../images/results/brand_pad_default.png") no-repeat center center;
}
.results .content01.kubros-core {
    background: url("../images/results/kubros_core.png") no-repeat center center;
}
.results .content01.halo-core {
    background: url("../images/results/halo_core.png") no-repeat center center;
}
.results .content01.monster-high {
    background: url("../images/results/monster_high.png") no-repeat center center;
}
.results .content01.despicable-me {
    background: url("../images/results/despicable_me.png") no-repeat center center;
}
.results .content01.tmnt-animated-series {
    background: url("../images/results/tmnt_animated_series.png") no-repeat center center;
}


/* ------->>> Content 02 <<<-------*/

.results .content02.american-girl {
    background: url("../images/results/american_girl.jpg") no-repeat center center;
}
.results .content02.despicable-me-find-the-minion {
    background: url("../images/results/despicable_me_find_the_minion.jpg") no-repeat center center;
}
.results .content02.destiny-core {
    background: url("../images/results/destiny_core.jpg") no-repeat center center;
}
.results .content02.monster-high-graveyard-party {
    background: url("../images/results/monster_high_graveyard_party.jpg") no-repeat center center;
}
.results .content02.monster-high-watch-videos {
    background: url("../images/results/monster_high_watch_videos.jpg") no-repeat center center;
}
.results .content02.tmnt-animated-series-battle-builder {
    background: url("../images/results/tmnt_animated_series_battle_builder.jpg") no-repeat center center;
}
.results .content02.tmnt-animated-series-wallpaper-maker {
    background: url("../images/results/tmnt_animated_series_wallpaper_maker.jpg") no-repeat center center;
}
.results .content02.ugc-gallery-halo {
    background: url("../images/results/ugc_gallery_halo.jpg") no-repeat center center;
}
.results .content02.ugc-gallery-mini-cooper {
    background: url("../images/results/ugc_gallery_mini_cooper.jpg") no-repeat center center;
}
.results .content02 .content02-with-icon {
    left: -43px;
}
.results .content02 .content02-without-icon {
    left: -97px;
}
.results .content02 .content02-label {
    bottom: -218px;
}



/* ------->>> World <<<-------*/


.results .world.american-girl {
    background: url("../images/results/american_girl.jpg") no-repeat center center;
}
.results .world.despicable-me-find-the-minion {
    background: url("../images/results/despicable_me_find_the_minion.jpg") no-repeat center center;
}
.results .world.destiny-core {
    background: url("../images/results/destiny_core.jpg") no-repeat center center;
}
.results .world.monster-high-graveyard-party {
    background: url("../images/results/monster_high_graveyard_party.jpg") no-repeat center center;
}
.results .world.monster-high-watch-videos {
    background: url("../images/results/monster_high_watch_videos.jpg") no-repeat center center;
}
.results .world.tmnt-animated-series-battle-builder {
    background: url("../images/results/tmnt_animated_series_battle_builder.jpg") no-repeat center center;
}
.results .world.tmnt-animated-series-wallpaper-maker {
    background: url("../images/results/tmnt_animated_series_wallpaper_maker.jpg") no-repeat center center;
}
.results .world.ugc-gallery-halo {
    background: url("../images/results/ugc_gallery_halo.jpg") no-repeat center center;
}
.results .world.ugc-gallery-mini-cooper {
    background: url("../images/results/ugc_gallery_mini_cooper.jpg") no-repeat center center;
}
.results .world .world-with-icon {
    left: -83px;
}
.results .world .world-without-icon {
    left: -106px;
}
.results .world .world-label {
    top: 217px;
}


/* ------->>> App <<<-------*/

.results .app {
    background: url("../images/app.png") no-repeat;
}

.results .app .app-label {
    text-align: left;
    width: 60%;
    display: block;
    top: 30px;
    left: 22px;
}




/*************************************************/
/*************************************************/
/*------- MEDIA QUERIES / Ascending Order ------*/
/*************************************************/
/*************************************************/

/*++++++++++++++++++++++++++++*/
/* --- Phone Full Range ---- */

@media (max-width: 750px) {
        
    /* --- Background images for each page of quiz --- */ 
    
    body.start-bg { background: url("../images/bg/mobile/bg_01_mobile.jpg") fixed no-repeat top center; }
    body.question01-bg { background: url("../images/bg/mobile/bg_01_mobile.jpg") fixed no-repeat top center; }
    body.question02-bg { background: url("../images/bg/mobile/bg_02_mobile.jpg") fixed no-repeat top center; }
    body.question03-bg { background: url("../images/bg/mobile/bg_03_mobile.jpg") fixed no-repeat top center; }
    body.question04-bg { background: url("../images/bg/mobile/bg_04_mobile.jpg") fixed no-repeat top center; }
    body.question05-bg { background: url("../images/bg/mobile/bg_05_mobile.jpg") fixed no-repeat top center; }
    body.question06-bg { background: url("../images/bg/mobile/bg_06_mobile.jpg") fixed no-repeat top center; }
    body.question07-bg { background: url("../images/bg/mobile/bg_07_mobile.jpg") fixed no-repeat top center; }
    body.question08-bg { background: url("../images/bg/mobile/bg_08_mobile.jpg") fixed no-repeat top center; }
    body.question09-bg { background: url("../images/bg/mobile/bg_09_mobile.jpg") fixed no-repeat top center; }
    body.bonus-bg { background: url("../images/bg/mobile/bg_09_mobile.jpg") fixed no-repeat top center; }
    body.results-bg { background: url("../images/bg/mobile/bg_10_mobile.jpg") fixed no-repeat top center; }
    
    /* ------->>> IMAGES FOR ANSWERS TO QUESTIONS <<<-------*/

    /* ------->>> Question 1 <<<-------*/
    .q01-a01 { background-image: url("../images/answers/q01_a01.png"); }
    .q01-a02 { background-image: url("../images/answers/q01_a02.png"); }

    /* ------->>> Question 2 <<<-------*/
    .q02-a01 { background-image: url("../images/answers/mobile/q02_a01_m.png"); }
    .q02-a02 { background-image: url("../images/answers/mobile/q02_a02_m.png"); }
    .q02-a03 { background-image: url("../images/answers/mobile/q02_a03_m.png"); }
    .q02-a04 { background-image: url("../images/answers/mobile/q02_a04_m.png"); }

    /* ------->>> Question 3 <<<-------*/
    .q03-a01 { background-image: url("../images/answers/mobile/q03_a01_m.png"); }
    .q03-a02 { background-image: url("../images/answers/mobile/q03_a02_m.png"); }
    .q03-a03 { background-image: url("../images/answers/mobile/q03_a03_m.png"); }
    .q03-a04 { background-image: url("../images/answers/mobile/q03_a04_m.png"); }

    /* ------->>> Question 4 <<<-------*/
    .q04-a01 { background-image: url("../images/answers/mobile/q04_a01_m.png"); }
    .q04-a02 { background-image: url("../images/answers/mobile/q04_a02_m.png"); }
    .q04-a03 { background-image: url("../images/answers/mobile/q04_a03_m.png"); }
    .q04-a04 { background-image: url("../images/answers/mobile/q04_a04_m.png"); }

    /* ------->>> Question 5 <<<-------*/
    .q05-a01 { background-image: url("../images/answers/mobile/q05_a01_m.png"); }
    .q05-a02 { background-image: url("../images/answers/mobile/q05_a02_m.png"); }
    .q05-a03 { background-image: url("../images/answers/mobile/q05_a03_m.png"); }
    .q05-a04 { background-image: url("../images/answers/mobile/q05_a04_m.png"); }

    /* ------->>> Question 6 <<<-------*/
    .q06-a01 { background-image: url("../images/answers/mobile/q06_a01_m.png"); }
    .q06-a02 { background-image: url("../images/answers/mobile/q06_a02_m.png"); }

    /* ------->>> Question 7 <<<-------*/
    .q07-a01 { background-image: url("../images/answers/mobile/q07_a01_m.png"); }
    .q07-a02 { background-image: url("../images/answers/mobile/q07_a02_m.png"); }
    .q07-a03 { background-image: url("../images/answers/mobile/q07_a03_m.png"); }
    .q07-a04 { background-image: url("../images/answers/mobile/q07_a04_m.png"); }

    /* ------->>> Question 8 <<<-------*/
    .q08-a01 { background-image: url("../images/answers/mobile/q08_a01_m.png"); }
    .q08-a02 { background-image: url("../images/answers/mobile/q08_a02_m.png"); }
    .q08-a03 { background-image: url("../images/answers/mobile/q08_a03_m.png"); }
    .q08-a04 { background-image: url("../images/answers/mobile/q08_a04_m.png"); }

    /* ------->>> Question 9 <<<-------*/
    .q09-a01 { background-image: url("../images/answers/mobile/q09_a01_m.png"); }
    .q09-a02 { background-image: url("../images/answers/mobile/q09_a02_m.png"); }
    .q09-a03 { background-image: url("../images/answers/mobile/q09_a03_m.png"); }
    .q09-a04 { background-image: url("../images/answers/mobile/q09_a04_m.png"); }

    /* ------->>> Question Bonus <<<-------*/
    .bonus-a01 { background-image: url("../images/answers/mobile/bonus_a01_m.png"); }
    .bonus-a02 { background-image: url("../images/answers/mobile/bonus_a02_m.png"); }
    .bonus-a03 { background-image: url("../images/answers/mobile/bonus_a03_m.png"); }
    .bonus-a04 { background-image: url("../images/answers/mobile/bonus_a04_m.png"); }

    
    .container { min-width: 310px; max-width: 700px; }
    
    .tile { clear: both; float: none; margin: 0 auto; margin-top: 20px; }
    
    .results { text-align: center; padding: 0; }

    
/* --- Specific tile sizes --- */    
.results .type { width: 300px; padding-bottom: 65px; }
.results .builder-profile { width: 300px; height: 290px; }   

.results .builder-challenge-wrapper, 
.results .content02 { 
    width: 300px; height: 200px; 
} 
.results .content01 { width: 150px; height: 175px; }

.results .world,
.results .app { 
	width: 140px; height: 200px; 
}  
    
    
/* --- Quiz start page --- */
    .start {
        min-width: 320px;
        padding-top: 30%;
        padding-bottom: 50%;
    }
    .intro .description {
        padding: 3% 0 4% 0;
        margin: 0 10% 0 10%;
    }
    .intro .start-btn {
        background: url("../images/bg_circle_btn_sm.png") no-repeat;
        width: 100px;
        margin: 0 auto;
        line-height: 100px;
    }
    
    
/* --- Quiz question page --- */
    .question {
        min-width: 320px;
        padding-top: 5%;
    }
    .question .question-header .back-nav-top {
        display: none;
    }
    .question .question-header .quiz-title,
    .results .results-header .quiz-title {
        display: none;
    }
    .question .question-header .question-number {
        background: url("../images/number_mobile.png") no-repeat;
        background-size: 100%;
        height: 35px;
        float: none;
    }
    .question .question-header .question-number .number-symbol {
        top: 4px;
        left: -1px;
    }
    
    .circleGraphic1.progress-circle {
        display: none;
    }
    .question .question-header .progress-label {
         display: none;
    }
    
    .question-content {
        margin-top: 1%;
    }
    .question-content .question-text {
        float: none;
        font-size: 18px;
        padding: 0 25px 10px 25px;
    }
    .question .answer-icons-wrapper {
        width: 100px;
    }
    .question .answer-icons-wrapper .bg-answer {
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 85%;
        display: block;
        width: 80px;
        height: 80px;
        margin: 0 auto;
    }
    .question .answer-icons-wrapper .bg-answer:hover {
        background-size: cover;
    }
    .question .answer-wrapper img.answer-check {
        width: 30px;
    }
    .question .answer-wrapper .answer-text {
        display: block;
        width: 120px;
    }
    .question .back-nav-bottom {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 50px;
    }
    
    
/* --- Quiz results page --- */
    
    .results .results-header .quiz-title {
        display: none;
    }
    .results .type .type-desc-more {
        display: none;
    }
    .results .builder-challenge-number {
        display: none;
    }
    .results .type #retake-quiz-link {
	    display: none;
	}
    .results .results-header .results-image {
        background: url("../images/results_header_mobile.png") no-repeat center center;
        height: 50px;
    }

	/* ------->>> Beyonder type <<<-------*/

	.results .type .type-header .badge-image-wrapper {
	    position: absolute;
	    top: -20px;
	    left: 10px;
	}
    .results .type .type-header .badge-image-wrapper.adventure-maker { background-size: 37%; }
    .results .type .type-header .badge-image-wrapper.inspired-inventor { background-size: 37%; }
    .results .type .type-header .badge-image-wrapper.skilled-strategist { background-size: 37%; }
    .results .type .type-header .badge-image-wrapper.conected-creator-badge { background-size: 37%; }
    
    
	.results .type .type-header .type-title {
	    line-height: 23px;
	    padding: 15px 0 15px 65px;
	    margin-left: 60px;
	}
	.results .type .type-header .type-title .type-title-1 {
		font-size: 20px;
	}
	.results .type .type-header .type-title .type-title-2 {
		font-size: 26px;
	}
	.results .type .type-content {
		font-size: 13px;
    	padding: 15px 20px 20px 20px;
	}
	.results .type .type-desc {
	    padding-bottom: 10px;
	}
	.results .type .type-desc-more {
	    padding-top: 10px;
	}
	.results .type .type-desc-more-link {
	    float: left;
	    text-align: left;
	}
    .results .type .type-footer {
        margin-top: 15px;
    }
	.results .type .save-results {
	    margin-top: 10px;
	}

	.results .type .save-results-text,
	.results .type .get-badge-btn {
		font-size: 15px;
	    text-transform: uppercase;
	    text-align: left;
	}

	.results .type .save-results-text {
	    color: #fc4513;
	    padding-right: 8px;
	}
	.results .type .get-badge-btn {
        width: 100%;
	    height: 25px;
	    line-height: 26px;
        margin-top: 0px;
        padding: 10px;
	    float: left;
	}
    .results .type .retake-quiz {
        margin: 10px 0 15px 190px;
        float: left;
        clear: both;
    }
	.results .type #retake-quiz-link-mobile {
	    font-weight: normal;
	   	float: right;
	}

	/* ------->>> Builder profile <<<-------*/

    .results .builder-profile {
	    margin-bottom: 20px;
	}
    .results .builder-profile .profile-matrix {
	    margin-top: 30px;
	}
    .results .builder-profile .profile-matrix img {
	    width: 60%;
	}
	.results .builder-profile .profile-matrix .quality-top {
        position: relative;
        bottom: 206px;
        left: 68px;
    }
    .results .builder-profile .profile-matrix .quality-left {
        position: relative;
        bottom: 52px;
        left: -104px;

    }
    .results .builder-profile .profile-matrix .quality-right {
        position: relative;
        bottom: 52px;
        left: 17px;
    }

    .results .builder-challenge .bc-text {
		font-size: 14px;
	}

    /* ------->>> Content 01 & Content 02 & World & App <<<-------*/
    
    .results .image-icon {
        display: none;
    }
    
    .results .content-label {
        font-size: 18px;
    }
    .results .content01 {
        background-size: 100%;
    }
    .results .content02 .content02-label {
        bottom: -170px;
        left: -60px;
    }
    .results #world {
    	float: left;
        margin-left: 10px;
    }
    .results .world .world-label {
        text-align: left;
        width: 65%;
        display: block;
        top: 150px;
        left: 15px;
    }
    .results .app .phone-image-wrapper { display: none; }
    .results .app {
        clear: none;
        float: right;
        margin-right: 10px;
        margin-bottom: 45px;
    }

    .results .app .app-label {
        width: 70%;
        top: 150px;
        left: 15px;
    }
    
    
} /*MQ ends*/

/*++++++++++++++++++++++++++++*/
/*---- PHONE EXCEPTIONS ----*/

/* --- iPhone 6 --- */ 
@media (min-width: 375px) and (max-width: 667px)  {
    .question .question-header .question-number .number-symbol {
        top: 7px;
    }
    .results .results-header .results-image {
       background-position: center center; 
    }
    .results #world {
        margin-left: 35px;
    }
    .results #app {
        margin-right: 35px;
    }
}
/* --- iPhone 6 Plus --- */ 
@media (min-width: 414px) and (max-width: 736px)  {
    .results #world {
        margin-left: 55px;
    }
    .results #app {
        margin-right: 55px;
    }
}
    
    
/*++++++++++++++++++++++++++++*/
/*-- Tablet Portrait ONLY ---*/
@media (min-width: 751px) and (max-width: 992px) {
    
    .circleGraphic1.progress-circle {
        position: absolute;
        right: 17px;
        top: 84px;
        width: 75px;
    }
    #percent-circle { display: none; }
    
    .container {
        width: 715px;
    }
     

/* --- Specific tile sizes --- */      
.results .type { clear: both; width: 714px; height: 490px; margin-right: 0; }
.results .builder-profile { clear: both; width: 714px; height: 330px; margin-right: 0; }  
    
.results .builder-challenge-wrapper,  
.results .world { 
	width: 469px; height: 260px;
} 
.results .builder-challenge { width: 319px; }
    
.results .content01, 
.results .content02, 
.results .app { 
	width: 225px; height: 260px 
}
    
 
    
    
/* --- Quiz start page --- */
    .start {
        min-width: 715px;
        padding-top: 30%;
    }
    .intro .title {
        font-size: 32px;
        padding-top: 145px;
    }
    .intro .description {
        padding: 1% 0 2% 0;
        margin: 0 20% 0 20%;
    }
    .intro .start-btn {
        background: url("../images/bg_circle_btn.png") no-repeat;
        width: 170px;
        margin: 0 auto;
        line-height: 166px;
    }
    
    
/* --- Quiz question page --- */
    .question {
        min-width: 715px;
    }
    .question .question-header .back-nav-top {
        position: relative;
        top: 35px;
    }
    .question .question-header .back-nav-top .arrow-back-btn {
        margin-right: 5px;
    }
    .question .question-header .back-nav-top .back-btn-wrapper {
        position: relative;
        top: 2px;
    }
    .question .question-header .question-number {
        background: url("../images/number_desktop.png") no-repeat 58px center;
        background-size: 100%;
        margin: 0 100px 25px 60px;
        height: 60px;
    }
    .question .question-header .question-number .number-symbol {
        font-size: 20px;
        top: 17px;
        left: 98px;
    }
    .question .question-header .progress-label {
        top: 22px;
        right: 104px;
    }
    .question-content {
        margin-top: 1%;
    }
    .question-content .question-text {
        font-size: 32px;
        padding: 0 150px 48px 150px;
    }
    .question .answer-icons-wrapper {
        width: 224px;
    }
    .question .answer-wrapper img.answer-check {
        width: 40px;
    }
    .question .answer-wrapper .answer-text {
        font-size: 18px;
        display: block;
        width: 160px;
    }
    
   
/* --- Quiz results page --- */
    .results {
        min-width: 715px;
    }

    /* ------->>> Beyonder type <<<-------*/

    .results .type .type-desc-more {
        padding-bottom: 75px;
    }
    .results .type .save-results {
        width: 60%;
    }
    
    /* ------->>> Builder profile <<<-------*/
    
 	.results .builder-profile .profile-matrix {
   		margin-top: 30px;
	}
	.results .builder-profile .profile-matrix .quality-top {
        position: relative;
        bottom: 250px;
	    left: 68px;
    }
    .results .builder-profile .profile-matrix .quality-left {
        position: relative;
        bottom: 63px;
        left: -128px;

    }
    .results .builder-profile .profile-matrix .quality-right {
        position: relative;
        bottom: 63px;
        left: 41px;
    }
    .results .app .phone-image-wrapper {
        width: 265px;
        position: relative;
        top: 12px;
        left: 6px;
    }
    
    
    /* Removing edge margins Tablet Portrait */
    .container > .tile:nth-child(odd),
    .container > .tile:last-child { margin-right: 0; }      
    
    
    
} /*MQ ends*/



/*++++++++++++++++++++++++++++*/
/*-- Tablet Landscape ONLY --*/

@media (min-width: 993px) and (max-width: 1024px) {
    
    .circleGraphic1.progress-circle {
        position: absolute;
        right: 17px;
        top: 92px;
        width: 75px;
    }
    #percent-circle { display: none; }
    
    
/* --- Specific tile sizes --- */    
.results .type { width: 515px; height: 525px; }
    
.results .builder-profile { width: 424px; height: 414px; margin-right: 0px; margin-top: 130px; }   

.results .builder-challenge-wrapper, 
.results .world { 
	width: 469px; height: 260px; 
 } 
.results .builder-challenge { width: 319px; }
.results .content01,
.results .content02,
.results .app { 
	width: 225px; height: 260px; 
}       
    
   
/* --- Quiz question page --- */
    .question .question-header .question-number {
        background: url("../images/number_desktop.png") no-repeat 48px center;
        background-size: 100%;
        margin: 0 100px 25px 60px;
        height: 60px;
    }
    .question .question-header .question-number .number-symbol {
        font-size: 20px;
        top: 17px;
        left: 98px;
    }
    .question .question-header .progress-label {
        top: 22px;
        right: 104px;
    }
    .question-content .question-text {
        font-size: 40px;
        padding: 0 150px 48px 150px;
    }
    .question .answer-icons-wrapper .bg-answer {
        background-size: 75%;
        width: 130px;
        height: 130px;
    }

/* --- Quiz results page --- */
    .results .type .type-desc-more {
        padding-bottom: 25px;
    }
    .results .builder-profile .profile-matrix .quality-top {
        position: relative;
        bottom: 263px;
        left: 68px;
    }
    .results .builder-profile .profile-matrix .quality-left {
        position: relative;
        bottom: 54px;
        left: -128px;

    }
    .results .builder-profile .profile-matrix .quality-right {
        position: relative;
        bottom: 54px;
        left: 41px;
    }
    .results .app .phone-image-wrapper {
        width: 265px;
        position: relative;
        top: 12px;
        left: 6px;
    }
    
    
    /* Removing edge margins Tablet Landscape */
    #world,
    .container > .tile:nth-child(4),
    .container > .tile:last-child { margin-right: 0; }    
    
    

} /*MQ ends*/



/*++++++++++++++++++++++++++++*/
/*---- Tablet FULL Range -----*/
@media (min-width: 751px) and (max-width: 1024px) {
    
    .container {
        min-width: 715px;
        max-width: 960px;      
    }
    
    .container > .tile:last-child { margin-bottom: 70px; }
    
    /* --- Background images for each page of quiz --- */ 
    
    body.start-bg { background: url("../images/bg/bg_01.jpg") fixed no-repeat top center; }
    body.question01-bg { background: url("../images/bg/bg_01.jpg") fixed no-repeat top center; }
    body.question02-bg { background: url("../images/bg/bg_02.jpg") fixed no-repeat top center; }
    body.question03-bg { background: url("../images/bg/bg_03.jpg") fixed no-repeat top center; }
    body.question04-bg { background: url("../images/bg/bg_04.jpg") fixed no-repeat top center; }
    body.question05-bg { background: url("../images/bg/bg_05.jpg") fixed no-repeat top center; }
    body.question06-bg { background: url("../images/bg/bg_06.jpg") fixed no-repeat top center; }
    body.question07-bg { background: url("../images/bg/bg_07.jpg") fixed no-repeat top center; }
    body.question08-bg { background: url("../images/bg/bg_08.jpg") fixed no-repeat top center; }
    body.question09-bg { background: url("../images/bg/bg_09.jpg") fixed no-repeat top center; }
    body.bonus-bg { background: url("../images/bg/bg_09.jpg") fixed no-repeat top center; }
    body.results-bg { background: url("../images/bg/bg_10.jpg") fixed no-repeat top center; }
    
/* --- Quiz start page --- */
    .start {
        padding-top: 20%;
        font-size: 18px;
    }
    .intro .title {
        font-size: 32px;
    }
    .intro .description {
        padding: 1% 0 2% 0;
        margin: 0 30% 0 30%;
    }
    .intro .start-btn {
        background: url("../images/bg_circle_btn.png") no-repeat;
        width: 170px;
        margin: 0 auto;
        line-height: 166px;
    }
    
/* --- Quiz question page --- */
    .question {
        min-width: 715px;
        padding-top: 3%;
    }
    .question .question-header .quiz-title {
        font-size: 16px;
    }
    .question-content {
        margin-top: 1%;
         clear: both;
    }
    .question .answer-icons-wrapper {
        width: 224px;
    }
    .question .answer-wrapper img.answer-check {
        width: 45px;
        right: 55px;
    }
    .question .answer-wrapper .answer-text {
        display: block;
        width: 160px;
    }
    .question .answer-icons-wrapper .bg-answer {
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 85%;
        display: block;
        width: 150px;
        height: 150px;
        margin: 0 auto;
    }
    .question .answer-icons-wrapper .bg-answer:hover {
        background-size: cover;
    }
    .question .back-nav-bottom {
        display: none;
    }
   

/* --- Quiz results page --- */
    
    .results {
        min-width: 715px;
    }
    .results .results-header .results-image {
        background: url("../images/results_header_desktop.png") no-repeat center center;
        height: 78px;
        margin: 25px 0 30px 0;
    }
    .results .results-header .quiz-title {
        font-size: 18px;
    }
    .results .type .type-desc-more-link {
        display: none;
    }
    .results .type #retake-quiz-link-mobile {
	    display: none;
	}
    .results .type .save-results {
        float: left;
        width: 50%;
    }
    .results .content02 .content02-with-icon {
        bottom: -209px;
        left: 72px;
    }
    .results .content02 .content02-without-icon {
        bottom: -200px;
        left: 20px;
    }
    .results .content02 .content02-label {
        display: block;
        width: 60%;
        text-align: left;
        line-height: 21px;
    }
    

    
    
} /*MQ ends*/




/*++++++++++++++++++++++++++++*/
/*---- Desktop FULL Range ----*/
@media  (min-width: 1025px) {
    
    .circleGraphic1.progress-circle {
        position: absolute;
        right: 32px;
        top: 97px;
        width: 75px;
    }
    #percent-circle { display: none; }
    
    
    .container {
        min-width: 1000px;
        max-width: 1201px;      
    }
    
    .container > .tile:last-child { margin-bottom: 170px; }  
    
    
/* --- Specific tile sizes --- */    
.results .type { width: 712px; height: 525px; }
.results .builder-profile { width: 469px; height: 414px; margin-right: 0px; margin-top: 130px; }
    
.results .builder-challenge-wrapper, 
.results .content02,
.results .world { 
	/*width: 440px;*/ width: 469px; height: 260px; 
 } 
.results .builder-challenge { width: 319px; }
    
.results .content01,
.results .app { 
	width: 223px; height: 260px; 
} 
    
/* --- Background images for each page of quiz --- */   
    body.start-bg { background: url("../images/bg/bg_01.jpg") fixed no-repeat top center; }
    body.question01-bg { background: url("../images/bg/bg_01.jpg") fixed no-repeat top center; }
    body.question02-bg { background: url("../images/bg/bg_02.jpg") fixed no-repeat top center; }
    body.question03-bg { background: url("../images/bg/bg_03.jpg") fixed no-repeat top center; }
    body.question04-bg { background: url("../images/bg/bg_04.jpg") fixed no-repeat top center; }
    body.question05-bg { background: url("../images/bg/bg_05.jpg") fixed no-repeat top center; }
    body.question06-bg { background: url("../images/bg/bg_06.jpg") fixed no-repeat top center; }
    body.question07-bg { background: url("../images/bg/bg_07.jpg") fixed no-repeat top center; }
    body.question08-bg { background: url("../images/bg/bg_08.jpg") fixed no-repeat top center; }
    body.question09-bg { background: url("../images/bg/bg_09.jpg") fixed no-repeat top center; }
    body.bonus-bg { background: url("../images/bg/bg_09.jpg") fixed no-repeat top center; }
    body.results-bg { background: url("../images/bg/bg_10.jpg") fixed no-repeat top center; }
    
    
/* --- Quiz start page --- */
    .start {
        min-width: 1024px;
        padding-top: 20%;
        font-size: 18px;
    }
    .intro .title {
        font-size: 50px;
    }
    .intro .description {
        padding: 1% 0 2% 0;
        margin: 0 30% 0 30%;
    }
    .intro .start-btn {
        background: url("../images/bg_circle_btn.png") no-repeat;
        width: 170px;
        margin: 0 auto;
        line-height: 166px;
    }
    
    
/* --- Quiz question page --- */
    .question {
        min-width: 1024px;
        padding-top: 3%;
    }
    .question .question-header .quiz-title {
        font-size: 18px;
    }
    .question .question-header .back-nav-top {
        position: relative;
        top: 28px;
    }
    .question .question-header .back-nav-top .arrow-back-btn {
        margin-right: 5px;
    }
    .question .question-header .back-nav-top .back-btn-wrapper {
        position: relative;
        top: 2px;
    }
    .question .question-header .question-number {
        background: url("../images/number_desktop.png") no-repeat -10px center;
        background-size: 100%;
        float: none;
        width: 92%;
        height: 75px;
    }
    .question .question-header .question-number .number-symbol {
        font-size: 20px;
        top: 22px;
        left: 55px;
    }
    .question .question-header .progress-label {
        top: 12px;
        right: 119px;
    }
    .question-content {
        margin-top: 1%;
    }
    .question-content .question-text {
        font-size: 50px;
        padding: 0 200px 60px 200px;
    }
    .question .answer-icons-wrapper {
        width: 224px;
    }
    .question .answer-icons-wrapper .bg-answer {
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 85%;
        display: block;
        width: 200px;
        height: 200px;
        margin: 0 auto;
    }
    .question .answer-icons-wrapper .bg-answer:hover {
        background-size: cover;
    }

    .question .answer-wrapper img.answer-check {
        bottom: 10px;
        right: 35px;
        width: 45px;
    }
    .question .answer-wrapper .answer-text {
        font-size: 18px;
        display: block;
        width: 160px;
    }
    .question .back-nav-bottom {
        display: none;
    }
    
    
/* --- Quiz results page --- */
    
    
    .results {
        min-width: 1024px;
    }
    .results .results-header .results-image {
        background: url("../images/results_header_desktop.png") no-repeat center center;
        height: 78px;
        margin: 40px 0 45px 0;
    }
    .results .type .type-desc-more-link {
        display: none;
    }
    .results .type #retake-quiz-link-mobile {
	    display: none;
	}
    .results .type .type-desc-more {
        padding-bottom: 65px;
    }
    .results .type .save-results {
        float: left;
        width: 55%;
    }
    .results .builder-profile .profile-matrix .quality-top {
        position: relative;
        bottom: 263px;
        left: 68px;
    }
    .results .builder-profile .profile-matrix .quality-left {
        position: relative;
        bottom: 54px;
        left: -128px;

    }
    .results .builder-profile .profile-matrix .quality-right {
        position: relative;
        bottom: 54px;
        left: 41px;
    }
    .results .content01 {
        background-size: 90%;
    }
    .results .content01:hover {
        background-size: 100%;
    }
    .results .content02,
    .results .world {
        background-size: 106%;
    }
    .results .content02:hover,
    .results .world:hover {
        background-size: 120%;
    }
    .results .app .phone-image-wrapper {
        width: 265px;
        position: relative;
        top: 12px;
        left: 6px;
    }
    
    
    /* Removing edge margins Desktop */
    .container > .tile:nth-child(4),
    .container > .tile:last-child { margin-right: 0; }
    
    
    
} /*MQ ends*/


/*++++++++++++++++++++++++++++*/
/*---- Desktop EXCEPTIONS ----*/
@media  (min-width: 1920px) and (max-width: 2500px) {
    
/* --- Quiz question page --- */
    .question .question-header .back-nav-top {
        position: relative;
        top: 33px;
        left: 116px;
    }
    .question .question-header .question-number {
        background: url("../images/number_desktop.png") no-repeat -10px center;
        background-size: 100%;
        float: none;
        width: 92%;
        height: 100px;
    }
    .question .question-header .question-number .number-symbol {
        font-size: 24px;
        top: 32px;
        left: 86px;
    }
    .question .question-header .progress-label {
        top: 20px;
        right: 180px;
    }
    .circleGraphic1.progress-circle {
        position: absolute;
        right: 90px;
        top: 133px;
        width: 75px;
    }
    #percent-circle { display: none; }
    
    
} /*MQ ends*/