/* Media queries for low resolution screen forms */

@media(max-height: 800px) {
	.test-form-box h2 {
		display: none;
	}

	.test-form-box form {
		margin: 30px auto 0 auto;	
	}

	.form-row {
		margin-bottom: 25px;
	}

	.form-group-checkbox label {
		font-size: 12px; line-height: 1.5em;
	}

	.form-group-checkbox {
		margin-bottom: 15px;
	}

}


/* Media queries */

@media(min-width: 1500px) and (max-width: 1699px) {
	.site-header .slogan {
		margin-top: 65px;
		color: #fff;
	}

	.site-header .slogan .text-large {
		margin-left: 15px;
		font-size: 75px;
	}

	.site-header .slogan .text-medium {
		margin-top: 20px; margin-left: 15px; 
		font-size: 55px;
	}

	.site-header .slogan .button-holder {
		margin-top: 40px;
	}
}

@media(min-width: 1350px) and (max-width: 1499px) {
	.site-header .slogan {
		margin-top: 45px;
		color: #fff;
	}

	.site-header .slogan .text-large {
		margin-left: 15px;		
		font-size: 68px;
	}

	.site-header .slogan .text-medium {
		margin-top: 10px; margin-left: 15px;
		font-size: 50px;
	}

	.site-header .slogan .button-holder {
		margin-top: 30px;
	}
}

@media(min-width: 1230px) and (max-width: 1349px) {
	.site-header .slogan {
		margin-top: 45px;
		color: #fff;
	}

	.site-header .slogan .text-large {
		margin-left: 15px;		
		font-size: 68px;
	}

	.site-header .slogan .text-medium {
		margin-top: 10px; margin-left: 15px;
		font-size: 50px;
	}

	.site-header .slogan .text-medium span {
		display: inline-block;
		margin-right: 12px;
	}

	.site-header .slogan .button-holder {
		margin-top: 30px;
	}

	.site-header .elements {
		display: none;
	}
}

@media(min-width: 990px) and (max-width: 1229px) {
	.wrapper {
		width: 970px;
	}

	.site-header .slogan {
		margin-top: 30px;
		color: #fff;
	}

	.site-header .slogan .text-large {
		margin-left: 15px;		
		font-size: 65px;
	}

	.site-header .slogan .text-medium {
		margin-top: 5px; margin-left: 15px;
		font-size: 48px;
	}

	.site-header .slogan .text-medium span {
		display: inline-block;
		margin-right: 12px;
	}

	.site-header .slogan .button-holder {
		margin-top: 20px;
	}

	.site-header .elements {
		display: none;
	}

	.intro-section .illustration {
		right: calc(50% + 120px);
	}

	.test-slider-section .slider-buttons  {
		padding: 15px 0;
	}

	.test-slider-section .slider-buttons .wrapper {
		padding: 0 150px;
	}

	.test-slider-section .slider-buttons li {
		margin: 6px 8px;
	}

	.test-slider-section .slide-image {
		width: calc(100% - 450px);
		padding-left: 0;
	}

	.test-slider-section .slide-image img {
		margin-top: 50px;
	}

	.test-slider-section .slide-text {
		width: 400px;
	}

	.test-slider-section .slide-text .job-list {
		width: calc(100% - 20px);
		margin-left: 20px;
	}

	.test-slider-section .slide-text .job-list li {
		padding: 12px 0 12px 35px;
		font-size: 16px; line-height: 1.25em; font-weight: 700;
	}

	.career-section-intro .text {
		max-width: 520px;
	}

	.career-section-intro .illustration {
		width: calc(50% - 60px);
	}

	.activity-chart {
		width: 750px;
	}

	.find-out-boxes .illustration {
		right: -200px;
	}

	.ending-section-intro .text {
		max-width: 520px;
	}

	.ending-section-intro .illustration {
		width: calc(50% - 60px);
	}
}

@media(min-width: 768px) and (max-width: 989px) {
	.wrapper {
		width: 100%;
	}

	h1 {
		font-size: 65px;
	}

	.site-header {
		height: auto !important;
		padding: 0 15px 65px 15px;
		background: url("../images/header-mobile-bgd.jpg") right top no-repeat;
		background-size: cover;
	}

	.site-header::before {
		display: none;
	}

	.site-header.site-header-results {
		padding-bottom: 60px;
	}

	.videobg-holder {
		display: none;
	}

	.site-header .slogan {
		margin-top: 55px;
		color: #fff;
	}

	.site-header .slogan .text-large {
		margin-left: 15px;		
		font-size: 65px;
	}

	.site-header .slogan .text-medium {
		margin-top: 5px; margin-left: 15px;
		font-size: 48px;
	}

	.site-header .slogan .text-medium span {
		display: inline-block;
		margin-right: 12px;
	}

	.site-header .slogan .button-holder {
		margin-top: 35px;
	}

	.site-header .elements {
		display: none;
	}

	.intro-section {
		padding: 45px 20px;
	}

	.intro-section-inside {
		padding: 0;
	}

	.intro-section .illustration {
		max-height: 100%;
		right: calc(50% - 170px); bottom: -45px;
		opacity: 0.175;
	}

	.test-intro-section {
		padding: 45px 20px;
	}

	.test-slider-section .slider-buttons {
		padding: 15px 0;
	}

	.test-slider-section .slider-buttons li {
		margin: 6px 8px;
	}

	.test-slider-section .slide-image {
		width: 100%; float: none;
		padding-left: 0; margin-top: 0;
		text-align: center;
	}

	.test-slider-section .slide-image img {
		max-width: 75%; margin-top: 0;
	}

	.test-slider-section .slide-text {
		width: 100%; float: none;
		padding: 0 20px; margin-top: 50px;
	}

	.test-slider-section .slide-text .job-list {
		width: calc(100% - 20px);
		margin-left: 20px;
	}

	.test-slider-section .slide-text .job-list li {
		padding: 12px 0 12px 35px;
		font-size: 16px; line-height: 1.25em; font-weight: 700;
	}

	.career-section-intro {
		padding: 45px 20px;
	}

	.career-section-intro .text {
		max-width: 55%;
	}

	.career-section-intro .illustration {
		width: 43%; 
	}

	.career-section-boxes .boxes {
		padding: 0 20px;
	}

	.career-section-boxes .box {
		width: 100%; float: none;
		padding: 20px; margin: 0 0 15px 0;
	}

	.salary-chart-section .wrapper {
		padding-left: 20px; padding-right: 20px;
	}

	.activity-chart-section .wrapper {
		padding-left: 20px; padding-right: 20px;
	}

	.activity-chart {
		width: 100%; float: none;
	}

	.activity-chart h2 {
		margin-bottom: 35px;
	}

	.activity-chart-section .illustration {
		display: none;
	}

	.find-out-intro {
		padding-left: 20px; padding-right: 20px;
	}

	.find-out-boxes {
		padding: 45px 20px;
	}

	.find-out-boxes .boxes {
		width: 550px;
	}

	.find-out-boxes .illustration {
		left: 580px; right: auto;
	}

	.ending-section-intro {
		padding: 45px 20px;
	}

	.ending-section-intro .text {
		max-width: 55%;
	}

	.ending-section-intro .illustration {
		width: 43%; 
	}

	.test-section .wrapper {
		padding-left: 20px; padding-right: 20px;
	}

	.results-intro-section {
		padding-top: 40px; margin-top: 0; 
	}

	.results-intro-section .wrapper {
		padding-left: 20px; padding-right: 20px;
	}

	.results-general-section .wrapper::before {
		display: none;
	}

	.results-general-chart-wrapper {
		width: 100%; display: block; float: none;
		padding-top: 0;
	}

	.results-general-stats-wrapper {
		width: 100%; display: block; float: none;
		padding: 35px; margin-top: 30px;
		background-color: #1865a7;
	}

	.results-personality-section .wrapper {
		padding-left: 20px; padding-right: 20px;
	}

	.results-jobs-section .wrapper {
		padding-left: 20px; padding-right: 20px;
	}

	.results-jobs-listing .item {
		width: 100%; float: none;
		margin-right: 0;
	}

	.site-footer .wrapper {
		padding-left: 20px; padding-right: 20px;
	}

	.site-footer-partner {
		text-align: center;
	}

	.site-footer-partner img {
		display: inline-block;
	}

	.site-footer-notes .copyright {
		width: 100%;
		text-align: center;
	}

	.site-footer-notes .created {
		width: 100%;
		margin-top: 10px;
		text-align: center;
	}
}

@media(min-width: 480px) and (max-width: 767px) {
	body, td, p, ul, ol {
		font-size: 17px; line-height: 1.6em;
	}
 
	h1 {
		font-size: 52px;
	}

 	.wrapper {
		width: 100%;
	}

	.main-button {
		min-height: 0; padding: 25px 20px;
		text-align: center;
	}

	.main-button:hover,
	.main-button:active {
		padding: 25px 20px;
	}

	.main-button::before,
	.main-button::after {
		display: none;
	}

	.test-button {
		width: 100%;
		margin: 5px 0;
		padding: 18px 25px;
	}

	.test-button span {
		font-size: 24px;
	}

	.site-header {
		height: auto !important;
		padding: 0 15px 55px 15px;
		background: url("../images/header-mobile-bgd.jpg") right top no-repeat;
		background-size: cover;
	}

	.site-header::before {
		display: none;
	}

	.site-header.site-header-results {
		padding-bottom: 60px;
	}

	.videobg-holder {
		display: none;
	}

	.site-header .navigation .logo-holder {
		width: 100%;
		text-align: center;
	}

	.site-header .navigation .button-holder {
		display: none;
	}

	.site-header .slogan {
		margin-top: 45px;
		color: #fff;
	}

	.site-header .slogan .text-large {
		margin-left: 15px;		
		font-size: 65px; text-align: center;
	}

	.site-header .slogan .text-medium {
		margin-top: 5px; margin-left: 15px;
		font-size: 48px; text-align: center;
	}

	.site-header .slogan .text-medium span {
		display: inline-block;
		margin-right: 12px;
	}

	.site-header .slogan .button-holder {
		margin-top: 20px;
		text-align: center;
	}

	.site-header .elements {
		display: none;
	}

	.intro-section {
		padding: 35px 15px;
	}

	.intro-section-inside {
		padding: 0;
	}

	.intro-section .illustration {
		max-height: 100%;
		right: calc(50% - 190px); bottom: -35px;
		opacity: 0.175;
	}

	.test-intro-section {
		padding: 35px 15px;
	}

	.test-slider-section .slider-buttons {
		padding: 15px 0;
	}

	.test-slider-section .slider-buttons li {
		margin: 6px 8px;
	}

	.test-slider-section .slide-image {
		width: 100%; float: none;
		padding-left: 0; margin-top: 0;
		text-align: center;
	}

	.test-slider-section .slide-image img {
		max-width: 90%; margin-top: 0;
	}

	.test-slider-section .slide-text {
		width: 100%; float: none;
		padding: 0 20px; margin-top: 50px;
	}

	.test-slider-section .slide-text .job-list {
		width: calc(100% - 20px);
		margin-left: 20px;
	}

	.test-slider-section .slide-text .job-list li {
		padding: 12px 0 12px 35px;
		font-size: 16px; line-height: 1.25em; font-weight: 700;
	}

	.career-section-heading {
		padding: 45px 20px;
	}

	.career-section-intro {
		padding: 35px 20px 235px 20px;
	}

	.career-section-intro .text {
		max-width: 100%;
	}

	.career-section-intro .illustration {
		width: 100%; height: 200px;
	}

	.career-section-boxes .boxes {
		padding: 0 20px;
	}

	.career-section-boxes .box {
		width: 100%; float: none;
		padding: 20px; margin: 0 0 15px 0;
	}

	.salary-chart-section .wrapper {
		padding-left: 20px; padding-right: 20px;
	}

	.salary-chart-section .canvas-wrapper {
		display: none;
	}

	.salary-chart-section .chart-mobile-wrapper {
		display: block;
	}

	.activity-chart-section .wrapper {
		padding-left: 20px; padding-right: 20px;
	}

	.activity-chart-section .canvas-wrapper {
		display: none;
	}

	.activity-chart-section .chart-mobile-wrapper {
		display: block;
	}

	.activity-chart {
		width: 100%; float: none;
	}

	.activity-chart h2 {
		margin-bottom: 35px;
	}

	.activity-chart-section .illustration {
		display: none;
	}

	.find-out-intro {
		padding-left: 20px; padding-right: 20px;
	}

	.find-out-boxes {
		padding: 45px 20px;
	}

	.find-out-boxes .boxes {
		width: 100%;
	}

	.find-out-boxes .illustration {
		display: none;
	}

	.ending-section-heading {
		padding: 45px 20px;
	}

	.ending-section-intro {
		padding: 35px 20px 235px 20px;
	}

	.ending-section-intro .text {
		max-width: 100%;
	}

	.ending-section-intro .illustration {
		width: 100%; height: 200px;
	}

	.ending-section-text {
		padding: 45px 20px;
		background: #fff;
	}

	.test-section .wrapper {
		padding-left: 15px; padding-right: 15px;
	}

	.test-intro-box {
		padding: 30px;
	}

	.test-box-question {
		padding: 60px 25px;
		font-size: 23px;
	}

	.test-box-buttons {
		padding: 15px;
	}

	.test-box-buttons > a {
		margin: 0 0 12px 0;
	}

	.test-box-buttons > a:last-child {
		margin: 0;
	}

	.form-row {
		margin-bottom: 0;
	}

	.form-column {
		width: 100%; display: block; float: none;
		margin-right: 0; margin-bottom: 30px;
	}

	.results-intro-section {
		padding-top: 40px; margin-top: 0; 
	}

	.results-intro-section .wrapper {
		padding-left: 20px; padding-right: 20px;
	}

	.results-general-section .wrapper::before {
		display: none;
	}

	.results-general-chart-wrapper {
		width: 100%; display: block; float: none;
		padding-top: 0;
	}

	.results-general-stats-wrapper {
		width: 100%; display: block; float: none;
		padding: 35px; margin-top: 30px;
		background-color: #1865a7;
	}

	.results-personality-section .wrapper {
		padding-left: 20px; padding-right: 20px;
	}

	.results-jobs-section .wrapper {
		padding-left: 20px; padding-right: 20px;
	}

	.results-jobs-listing .item {
		width: 100%; float: none;
		margin-right: 0;
	}

	.site-footer .wrapper {
		padding-left: 15px; padding-right: 15px;
	}

	.site-footer-partner {
		text-align: center;
	}

	.site-footer-partner img {
		display: inline-block;
	}

	.site-footer-notes .copyright {
		width: 100%;
		text-align: center;
	}

	.site-footer-notes .created {
		width: 100%;
		margin-top: 10px;
		text-align: center;
	}

	.site-footer-notes .created .intro {
		width: 100%;
		margin-bottom: 4px;
	}

}

@media(max-width: 479px) {
	body, td, p, ul, ol {
		font-size: 17px; line-height: 1.6em;
	}
	
	h1 {
		font-size: 44px;
	}

	.wrapper {
		width: 100%;
	}

	.main-button {
		min-height: 0; padding: 20px 15px;
		border-radius: 30px;
		text-align: center;
	}

	.main-button:hover,
	.main-button:active {
		padding: 25px 20px;
	}

	.main-button::before,
	.main-button::after {
		display: none;
	}

	.test-button {
		width: 100%;
		margin: 5px 0;
		padding: 18px 25px;
	}

	.test-button span {
		font-size: 24px;
	}

	.site-header {
		height: auto !important;
		padding: 0 15px 55px 15px;
		background: url("../images/header-mobile-bgd.jpg") right top no-repeat;
		background-size: cover;
	}

	.site-header::before {
		display: none;
	}

	.videobg-holder {
		display: none;
	}

	.site-header.site-header-results {
		padding-bottom: 60px;
	}

	.site-header .navigation .logo-holder {
		width: 100%;
		text-align: center;
	}

	.site-header .navigation .button-holder {
		display: none;
	}

	.site-header .slogan {
		margin-top: 45px;
		color: #fff;
	}

	.site-header .slogan .text-large {
		margin-left: 15px;		
		font-size: 50px; text-align: center;
	}

	.site-header .slogan .text-medium {
		margin-top: 5px; margin-left: 15px;
		font-size: 42px; text-align: center;
	}

	.site-header .slogan .text-medium span {
		display: inline;
		margin-right: 12px;
	}

	.site-header .slogan .button-holder {
		margin-top: 20px;
		text-align: center;
	}

	.site-header .elements {
		display: none;
	}

	.intro-section {
		padding: 35px 15px;
	}

	.intro-section-inside {
		padding: 0;
	}

	.intro-section .illustration {
		max-width: 100%; max-height: 100%;
		right: calc(50% - 200px); bottom: -35px;
		opacity: 0.175;
	}

	.test-intro-section {
		padding: 35px 15px;
	}

	.test-slider-section .slider-buttons {
		padding: 15px 0;
	}

	.test-slider-section .slider-buttons li {
		margin: 6px 8px;
	}

	.test-slider-section .slide-image {
		width: 100%; float: none;
		padding-left: 0; margin-top: 0;
		text-align: center;
	}

	.test-slider-section .slide-image img {
		max-width: 95%; margin-top: 0;
	}

	.test-slider-section .slide-text {
		width: 100%; float: none;
		padding: 0 20px; margin-top: 50px;
	}

	.test-slider-section .slide-text .job-list {
		width: calc(100% - 20px);
		margin-left: 20px;
	}

	.test-slider-section .slide-text .job-list li {
		padding: 12px 0 12px 35px;
		font-size: 16px; line-height: 1.25em; font-weight: 700;
	}

	.career-section-heading {
		padding: 35px 15px;
	}

	.career-section-intro {
		padding: 35px 20px 235px 20px;
	}

	.career-section-intro .text {
		max-width: 100%;
	}

	.career-section-intro .illustration {
		width: 100%; height: 200px;
	}

	.career-section-boxes .boxes {
		padding: 0 20px;
	}

	.career-section-boxes .box {
		width: 100%; float: none;
		padding: 20px; margin: 0 0 15px 0;
	}

	.salary-chart-section .wrapper {
		padding-left: 15px; padding-right: 15px;
	}

	.salary-chart-section .canvas-wrapper {
		display: none;
	}

	.salary-chart-section .chart-mobile-wrapper {
		display: block;
	}

	.activity-chart-section .wrapper {
		padding-left: 20px; padding-right: 20px;
	}

	.activity-chart {
		width: 100%; float: none;
	}

	.activity-chart h2 {
		margin-bottom: 35px;
	}

	.activity-chart-section .canvas-wrapper {
		display: none;
	}

	.activity-chart-section .chart-mobile-wrapper {
		display: block;
	}

	.activity-chart-section .illustration {
		display: none;
	}

	.find-out-intro {
		padding-left: 20px; padding-right: 20px;
	}

	.find-out-boxes {
		padding: 45px 20px;
	}

	.find-out-boxes .boxes {
		width: 100%;
	}

	.find-out-boxes .illustration {
		display: none;
	}

	.ending-section-heading {
		padding: 35px 15px;
	}

	.ending-section-intro {
		padding: 35px 20px 235px 20px;
	}

	.ending-section-intro .text {
		max-width: 100%;
	}

	.ending-section-intro .illustration {
		width: 100%; height: 200px;
	}

	.ending-section-text {
		padding: 35px 15px;
		background: #fff;
	}

	.test-section .wrapper {
		padding-left: 15px; padding-right: 15px;
	}

	.test-intro-box {
		padding: 20px;
	}

	.test-box-question {
		padding: 60px 25px;
		font-size: 23px;
	}

	.test-box-buttons {
		padding: 15px;
	}

	.test-box-buttons > a {
		margin: 0 0 12px 0;
	}

	.test-box-buttons > a:last-child {
		margin: 0;
	}

	.form-row {
		margin-bottom: 0;
	}

	.form-column {
		width: 100%; display: block; float: none;
		margin-right: 0; margin-bottom: 30px;
	}

	.results-intro-section {
		padding-top: 40px; margin-top: 0; 
	}

	.results-intro-section .wrapper {
		padding-left: 20px; padding-right: 20px;
	}

	.results-general-section .wrapper::before {
		display: none;
	}

	.results-general-chart-wrapper {
		width: 100%; display: block; float: none;
		padding-top: 0;
	}

	.results-general-stats-wrapper {
		width: 100%; display: block; float: none;
		padding: 35px; margin-top: 30px;
		background-color: #1865a7;
	}

	.results-general-stats-wrapper .main-stats-table .row .label {
		font-size: 20px; line-height: 30px;
	}

	.results-general-stats-wrapper .main-stats-table .row .value {
		font-size: 32px; line-height: 30px;
	}

	.results-personality-section .wrapper {
		padding-left: 15px; padding-right: 15px;
	}

	.results-personality-section .description .text {
		width: 100%;
		padding: 0;margin-top: 20px;
	}

	.results-jobs-section .wrapper {
		padding-left: 20px; padding-right: 20px;
	}

	.results-jobs-listing .item {
		width: 100%; float: none;
		margin-right: 0;
	}

	.results-jobs-listing .item .illustration {
		width: 100%; height: 150px; display: block; float: none;
	}

	.results-jobs-listing .item .text {
		width: 100%; display: block; float: none;s
	}

	.site-footer .wrapper {
		padding-left: 15px; padding-right: 15px;
	}

	.site-footer-partner {
		text-align: center;
	}

	.site-footer-partner img {
		display: inline-block;
	}

	.site-footer-notes .copyright {
		width: 100%;
		text-align: center;
	}

	.site-footer-notes .created {
		width: 100%;
		margin-top: 10px;
		text-align: center;
	}

	.site-footer-notes .created .intro {
		width: 100%;
		margin-bottom: 4px;
	}

}