@import 'https://fonts.googleapis.com/css?family=Roboto:400,700,900&display=swap';
* {
	margin: 0;
	padding: 0;
	outline: 0;
	box-sizing: border-box;
}

html {
	font-size: 62.5%;
}

body {
	font-family: 'Roboto', sans-serif, Arial;
	margin: 0 auto;
	min-height: 100%;
	background-color: #fff;
}

.wrapper {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	height: 100%;
	min-height: 375px;
}

.content-block {
	height: 100%;
	width: 54rem;
	padding: 10vh 10px 10px 5rem;
}

.question-item {
	margin-bottom: 8vh;
	opacity: 0.1;
	transition: opacity 0.5s linear;
}

body.skin2 .question-item,
body.skin3 .question-item,
body.skin4 .question-item,
body.skin5 .question-item {
	opacity: 0.5;
	transition: opacity 0.5s linear;
}

[data-step='1'] .question-item:nth-child(1) {
	opacity: 1;
}

[data-step='2'] .question-item:nth-child(2) {
	opacity: 1;
}

[data-step='3'] .question-item:nth-child(3) {
	opacity: 1;
}

.question-item:last-child {
	margin-bottom: 5vh;
}

.question-title {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	margin-bottom: 1rem;
}

.question-title.title-1 .question-text {
	font-size: 5rem;
}

.question-number {
	height: 7rem;
	width: 7rem;
	margin-right: 1rem;
	background-color: #251a35;
	color: #fff;
	font-size: 6rem;
	font-weight: 900;
	line-height: 7rem;
	text-align: center;
	border-radius: 50%;
}

.question-text {
	flex: 1;
	color: #251a35;
	font-size: 4rem;
	font-weight: 900;
	text-transform: uppercase;
	line-height: 1;
}

.question-description {
	display: none;
	margin-left: 8rem;
	color: #251a35;
	font-size: 2.8rem;
	line-height: 1;
}

[data-step='3'] .question-description {
	display: block;
}

.btn-block {
	display: none;
	position: relative;
	text-align: center;
	display: none;
}

[data-step='3'] .btn-block {
	display: block;
}

.btn {
	display: inline-block;
	padding: 2rem 6rem;
	background-color: #251a35;
	color: #fff;
	font-size: 5rem;
	font-weight: 900;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 2rem;
}

.photo-block {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	flex: 1;
	position: relative;
	height: 75vh;
	padding: 10px;
	overflow: hidden;
}

.photo-block:before {
	content: '';
	display: block;
	position: absolute;
	height: 100vw;
	width: 100vw;
	top: 50%;
	left: 10vh;
	background-color: #1a2343;
	background-size: auto 100vh;
	background-position: 9vw center;
	background-repeat: no-repeat;
	border-radius: 50%;
	transform: translateY(-50%);
	transition: background 0.5s linear;
}

[data-step='1'] .photo-block:before,
body.skin1 [data-step='1'] .photo-block:before {
	background-image: url(604fb92ff2d58.html);
}

[data-step='2'] .photo-block:before,
body.skin1 [data-step='2'] .photo-block:before {
	background-image: url(604fb92ff2d82.html);
}

[data-step='3'] .photo-block:before,
body.skin1 [data-step='3'] .photo-block:before {
	background-image: url(604fb92ff2db5.html);
}

body.skin2 [data-step='1'] .photo-block:before {
	background-image: url(604fb92ff2ddb.html);
}

body.skin2 [data-step='2'] .photo-block:before {
	background-image: url(604fb92ff2dfc.html);
}

body.skin2 [data-step='3'] .photo-block:before {
	background-image: url(604fb92ff2e26.html);
}

body.skin3 [data-step='1'] .photo-block:before {
	background-image: url(604fb92ff2e4d.jpg);
}

body.skin3 [data-step='2'] .photo-block:before {
	background-image: url(604fb92ff2e65.jpg);
}

body.skin3 [data-step='3'] .photo-block:before {
	background-image: url(604fb92ff2e7c.jpg);
}

body.skin4 [data-step='1'] .photo-block:before {
	background-image: url(604fb92ff2e92.html);
}

body.skin4 [data-step='2'] .photo-block:before {
	background-image: url(604fb92ff2eaf.html);
}

body.skin4 [data-step='3'] .photo-block:before {
	background-image: url(604fb92ff2ec7.html);
}

body.skin5 [data-step='1'] .photo-block:before {
	background-image: url(604fb92ff2edd.html);
}

body.skin5 [data-step='2'] .photo-block:before {
	background-image: url(604fb92ff2ef3.html);
}

body.skin5 [data-step='3'] .photo-block:before {
	background-image: url(604fb92ff2f0b.html);
}

.choice-block {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	position: relative;
	height: 100%;
	width: 25vh;
}

.choice-item {
	display: none;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	position: relative;
	height: 22vh;
	width: 22vh;
	margin: 2.5vh 0;
	background: #fff no-repeat center center;
	background-size: 102% auto;
	background-clip: content-box;
	border-radius: 50%;
	color: #fff;
	font-size: 2.8rem;
	text-shadow: 0 0.3rem rgba(26, 35, 67, 0.52);
	cursor: pointer;
	border: 1rem solid transparent;
	transition: all 0.5s linear;
}

.choice-item-1,
.choice-item-3 {
	margin-left: 4vh;
}

.choice-item.is-active {
	border-color: #fff;
	box-shadow: 0 0 1rem rgba(26, 35, 67, 0.3);
}

.choice-item span {
	position: relative;
	-ms-flex-item-align: center;
}

.choice-item-boobs.choice-item-1 {
	background-image: url(604fb92ff2f20.jpg);
}

.choice-item-boobs.choice-item-2 {
	background-image: url(604fb92ff2f36.jpg);
}

.choice-item-boobs.choice-item-3 {
	background-image: url(604fb92ff2f4e.jpg);
}

.choice-item-ass.choice-item-1 {
	background-image: url(604fb92ff2f63.jpg);
}

.choice-item-ass.choice-item-2 {
	background-image: url(604fb92ff2f79.jpg);
}

.choice-item-ass.choice-item-3 {
	background-image: url(604fb92ff2f9d.jpg);
}

[data-step='1'] .choice-item-boobs {
	display: flex;
}

[data-step='2'] .choice-item-ass {
	display: flex;
}

[data-step='3'] .choice-item {
	display: none;
}

.choice-block.is-selected .choice-item:not(.is-active):before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(37, 26, 53, 0.5);
	border-radius: 50%;
}

.slogan-block {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	flex: 1;
	position: relative;
	color: #fff;
	font-size: 5rem;
	font-weight: 600;
	text-transform: uppercase;
	text-align: center;
}

@media screen and (min-width: 1060px) {
	html,
	body {
		height: 100%;
	}
	.photo-block {
		height: 100vh;
	}
}

@media screen and (max-width: 1360px) {
	html {
		font-size: 50%;
	}
}

@media screen and (max-width: 1060px) {
	html {
		font-size: 40%;
	}
}

@media screen and (max-width: 900px) {
	html {
		font-size: 22%;
	}
}

@media screen and (max-height: 560px) {
	.slogan-block {
		font-size: 4rem;
	}
}

@media screen and (max-height: 400px) {
	.question-item {
		margin-bottom: 2vh;
	}
}

@media screen and (orientation: portrait) {
	.wrapper {
		flex-direction: column-reverse;
	}
	.content-block {
		height: auto;
		width: auto;
		padding: 1rem 20px 10px 20px;
	}
	.photo-block {
		flex-direction: column-reverse;
		align-items: stretch;
	}
	[data-step='3'] .photo-block {
		height: 65vh;
	}
	.photo-block:before {
		height: 160vh;
		width: 160vh;
		top: auto;
		bottom: 10vh;
		left: -40vh;
		transform: translateY(0);
	}
	[data-step='3'] .photo-block:before {
		bottom: 0;
	}
	.choice-block {
		flex-direction: row;
		height: 25vh;
		width: auto;
	}
	[data-step='3'] .choice-block {
		height: 0rem;
	}
	.choice-item {
		height: 31vw;
		width: 31vw;
		margin: 5vh auto 0;
		font-size: 5rem;
	}
	.choice-item:first-child {
		margin: 0 auto;
	}
	.choice-item:nth-child(2) {
		transform: translateX(-2%);
	}
	.choice-item:last-child {
		margin: auto auto 0;
	}
	.question-item {
		margin-bottom: 2rem;
	}
	.question-item:last-child {
		margin-bottom: 3rem;
	}
	.question-text {
		font-size: 3.5rem;
	}
	.question-title.title-1 .question-text {
		font-size: 3.7em;
	}
	[data-step='3'] .question-title.title-3 .question-text {
		display: none;
	}
	.question-description {
		margin-top: -8rem;
		font-weight: 600;
		font-size: 3.6rem;
	}
	.photo-block:before {
		background-position: 22vh bottom;
	}
}

@media screen and (orientation: portrait) and (min-height: 701px) {
	.photo-block:before {
		background-size: auto 73vh;
		background-position: 30vh bottom;
	}
}

@media screen and (orientation: portrait) and (min-height: 901px) {
	.photo-block:before {
		background-position: 46vh bottom;
	}
}

@media screen and (orientation: portrait) and (min-height: 1024px) {
	.photo-block:before {
		background-size: auto 80vh;
		background-position: 31vh bottom;
	}
}

@media screen and (orientation: portrait) and (max-height: 700px) {
	.photo-block:before {
		background-size: auto 66vh;
		background-position: 37vh bottom;
	}
}

@media screen and (orientation: portrait) and (max-height: 600px) {
	.question-number {
		height: 5rem;
		width: 5rem;
		line-height: 5rem;
	}
	.question-description {
		margin-top: -6rem;
	}
}

@media screen and (orientation: landscape) and (max-height: 325px) {
	.wrapper {
		min-height: 320px;
	}
}

@media screen and (orientation: landscape) and (max-width: 900px) {
	.content-block {
		width: 43rem;
	}
	.photo-block {
		height: 100vh;
	}
	.photo-block:before {
		background-position: left center;
	}
}

@media screen and (orientation: landscape) and (max-width: 900px) {
	.content-block {
		width: 38rem;
	}
}

/* SKIN2 */

body.skin2 .question-text {
	color: #ed2b4b;
}

body.skin2 .question-number {
	background-color: #ed2b4b;
	color: #fff;
}

body.skin2 [data-step='1'] .title-1 .question-text {
	color: #ed2b4b;
}

body.skin2 [data-step='1'] .title-1 .question-number {
	background-color: #ed2b4b;
}

body.skin2 [data-step='2'] .title-2 .question-text {
	color: #ed2b4b;
}

body.skin2 [data-step='2'] .title-2 .question-number {
	background-color: #ed2b4b;
}

body.skin2 [data-step='3'] .title-3 .question-text {
	color: #ed2b4b;
}

body.skin2 [data-step='3'] .title-3 .question-number {
	background-color: #ed2b4b;
}

body.skin2 [data-step='1'] .title-2 .question-text,
body.skin2 .title-3 .question-text {
	color: #d5baba;
}

body.skin2 [data-step='1'] .title-2 .question-number,
body.skin2 .title-3 .question-number {
	background-color: #d5baba;
}

body.skin2 [data-step='2'] .title-1 .question-text,
body.skin2 .title-3 .question-text {
	color: #d5baba;
}

body.skin2 [data-step='2'] .title-1 .question-number,
body.skin2 .title-3 .question-number {
	background-color: #d5baba;
}

body.skin2 [data-step='3'] .title-1 .question-text,
body.skin2 .title-2 .question-text {
	color: #d5baba;
}

body.skin2 [data-step='3'] .title-1 .question-number,
body.skin2 .title-2 .question-number {
	background-color: #d5baba;
}

body.skin2 .question-description {
	color: #ed2b4b;
}

body.skin2 .photo-block:before {
	background-color: #ed2b4b;
}

body.skin2 .btn {
	background-color: #ed2b4b;
	color: #fff;
}

/* SKIN3 */

body.skin3 .question-text {
	color: #89273d;
}

body.skin3 .question-number {
	background-color: #89273d;
	color: #fff;
}

body.skin3 [data-step='1'] .title-1 .question-text {
	color: #89273d;
}

body.skin3 [data-step='1'] .title-1 .question-number {
	background-color: #89273d;
}

body.skin3 [data-step='2'] .title-2 .question-text {
	color: #89273d;
}

body.skin3 [data-step='2'] .title-2 .question-number {
	background-color: #89273d;
}

body.skin3 [data-step='3'] .title-3 .question-text {
	color: #89273d;
}

body.skin3 [data-step='3'] .title-3 .question-number {
	background-color: #89273d;
}

body.skin3 [data-step='1'] .title-2 .question-text,
body.skin3 .title-3 .question-text {
	color: #c5b488;
}

body.skin3 [data-step='1'] .title-2 .question-number,
body.skin3 .title-3 .question-number {
	background-color: #c5b488;
}

body.skin3 [data-step='2'] .title-1 .question-text,
body.skin3 .title-3 .question-text {
	color: #c5b488;
}

body.skin3 [data-step='2'] .title-1 .question-number,
body.skin3 .title-3 .question-number {
	background-color: #c5b488;
}

body.skin3 [data-step='3'] .title-1 .question-text,
body.skin3 .title-2 .question-text {
	color: #c5b488;
}

body.skin3 [data-step='3'] .title-1 .question-number,
body.skin3 .title-2 .question-number {
	background-color: #c5b488;
}

body.skin3 .question-description {
	color: #89273d;
}

body.skin3 .photo-block:before {
	background-color: #a79395;
}

body.skin3 .btn {
	background-color: #a73b53;
	color: #fff;
}

/* SKIN4 */

body.skin4 .question-text {
	color: #c4462b;
}

body.skin4 .question-number {
	background-color: #c4462b;
	color: #fff;
}

body.skin4 [data-step='1'] .title-1 .question-text {
	color: #c4462b;
}

body.skin4 [data-step='1'] .title-1 .question-number {
	background-color: #c4462b;
}

body.skin4 [data-step='2'] .title-2 .question-text {
	color: #c4462b;
}

body.skin4 [data-step='2'] .title-2 .question-number {
	background-color: #c4462b;
}

body.skin4 [data-step='3'] .title-3 .question-text {
	color: #c4462b;
}

body.skin4 [data-step='3'] .title-3 .question-number {
	background-color: #c4462b;
}

body.skin4 [data-step='1'] .title-2 .question-text,
body.skin4 .title-3 .question-text {
	color: #c9c4b1;
}

body.skin4 [data-step='1'] .title-2 .question-number,
body.skin4 .title-3 .question-number {
	background-color: #c9c4b1;
}

body.skin4 [data-step='2'] .title-1 .question-text,
body.skin4 .title-3 .question-text {
	color: #c9c4b1;
}

body.skin4 [data-step='2'] .title-1 .question-number,
body.skin4 .title-3 .question-number {
	background-color: #c9c4b1;
}

body.skin4 [data-step='3'] .title-1 .question-text,
body.skin4 .title-2 .question-text {
	color: #c9c4b1;
}

body.skin4 [data-step='3'] .title-1 .question-number,
body.skin4 .title-2 .question-number {
	background-color: #c9c4b1;
}

body.skin4 .question-description {
	color: #c4462b;
}

body.skin4 .photo-block:before {
	background-color: #c4462b;
}

body.skin4 .btn {
	background-color: #c4462b;
	color: #fff;
}

/* SKIN5 */

body.skin5 .question-text {
	color: #ad0015;
}

body.skin5 .question-number {
	background-color: #ad0015;
	color: #fff;
}

body.skin5 [data-step='1'] .title-1 .question-text {
	color: #ad0015;
}

body.skin5 [data-step='1'] .title-1 .question-number {
	background-color: #ad0015;
}

body.skin5 [data-step='2'] .title-2 .question-text {
	color: #ad0015;
}

body.skin5 [data-step='2'] .title-2 .question-number {
	background-color: #ad0015;
}

body.skin5 [data-step='3'] .title-3 .question-text {
	color: #ad0015;
}

body.skin5 [data-step='3'] .title-3 .question-number {
	background-color: #ad0015;
}

body.skin5 [data-step='1'] .title-2 .question-text,
body.skin5 .title-3 .question-text {
	color: #f2d1b5;
}

body.skin5 [data-step='1'] .title-2 .question-number,
body.skin5 .title-3 .question-number {
	background-color: #f2d1b5;
}

body.skin5 [data-step='2'] .title-1 .question-text,
body.skin5 .title-3 .question-text {
	color: #f2d1b5;
}

body.skin5 [data-step='2'] .title-1 .question-number,
body.skin5 .title-3 .question-number {
	background-color: #f2d1b5;
}

body.skin5 [data-step='3'] .title-1 .question-text,
body.skin5 .title-2 .question-text {
	color: #f2d1b5;
}

body.skin5 [data-step='3'] .title-1 .question-number,
body.skin5 .title-2 .question-number {
	background-color: #f2d1b5;
}

body.skin5 .question-description {
	color: #ad0015;
}

body.skin5 .photo-block:before {
	background-color: #e4bea6;
}

body.skin5 .btn {
	background-color: #ad0015;
	color: #fff;
}

body.skin5 .slogan-block {
	color: #ad0015;
}