/*...............................*/
/*_____________HEADER____________*/
/*...............................*/
.header {
	margin-top: 20px;
	margin-bottom: 40px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
    cursor: default;
}

.introduction {
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #eee;
}

.introduction i {
	display: block;
	font-size: 20px;
    color: #888888;
}

.introduction h1 {
    margin-top: 5px;
    font-size: 9px;
    letter-spacing: 6px;
    color: #ebeae8;
    text-transform: uppercase;
}

.introduction p {
    margin-left: auto;
    margin-right: auto;
    max-width: 500px;
    padding-top: 12px;
    font-size: 14px;
    color: #bbb;
    border-top: 1px dashed #e27f00;
    letter-spacing: 3px;
}

/*..............................*/
/*_______STATISTICS USERS_______*/
/*..............................*/
.pieAllUsers {
	display: flex;
	justify-content: center;
	align-items: center;
}

.usersInfo {
	color: #ccc;
	margin-right: 50px;
	text-align: center;
}

.usersInfo h1 {
	letter-spacing: 20px;
	padding-left: 20px;
	border-bottom: 1px solid #8f4d00;
}

.usersInfo p {
	color: #b59e83;
}

#legendUsers {
	display: flex;
	flex-direction: column;
	width: 300px;
	margin-left: 100px;
	color: #ccc;
}

#legendUsers > div {
	display: flex;
	justify-content: space-between;
	margin-bottom: 10px;
}

#legendUsers > div > div {
	position: relative;
	top: 0;
	left: 0;
}

#legendUsers > div > div > span {
	position: absolute;
	top: 0;
	left: -30px;
	width: 20px;
	height: 20px;
	border-radius: 5px;
}

.womanColor {
	background-color: #89006a;
}

.manColor {
	background-color: #313131;
}

.pairColor {
	background-color: #008433;
}

.transgenderColor {
	background-color: #47126a;
}

.lesbiansColor {
	background-color: #e004c7;
}

.gaysColor {
	background-color: #960c0c;
}

.bandequalColor {
	background-color: #d97600;
}

.bandmorewomansColor {
	background-color: #949b00;
}

.bandmoremansColor {
	background-color: #865445;
}

.neuterColor {
	background-color: #007a89;
}

/*..............................*/
/*_______STATISTICS BDSM________*/
/*..............................*/
.pieBdsm {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 100px;
	margin-bottom: 50px;
}

.bdsmInfo {
	color: #ccc;
	margin-right: 50px;
	text-align: center;
}

.bdsmInfo h1 {
	letter-spacing: 20px;
	padding-left: 20px;
	border-bottom: 1px solid #8f4d00;
}

.bdsmInfo p {
	color: #b59e83;
}

#legendBdsm {
	display: flex;
	flex-direction: column;
	width: 300px;
	margin-left: 100px;
	color: #ccc;
}

#legendBdsm > div {
	display: flex;
	justify-content: space-between;
	margin-bottom: 10px;
}

#legendBdsm > div > div {
	position: relative;
	top: 0;
	left: 0;
}

#legendBdsm > div > div > span {
	position: absolute;
	top: 0;
	left: -30px;
	width: 20px;
	height: 20px;
	border-radius: 5px;
}

.straightColor {
	background-color: #ba6500;
}

.whateverColor {
	background-color: #59126a;
}

.switchColor {
	background-color: #005965;
}

.dominantColor {
	background-color: #957e00;
}

.submissiveColor {
	background-color: #95005c;
}

/*..............................*/
/*__________RESPONSIVE__________*/
/*..............................*/

@media(max-width: 930px) {

	.pieAllUsers,
	.pieBdsm {
		flex-direction: column;
	}

	.usersInfo,
	.bdsmInfo {
		margin-right: 0;
		margin-bottom: 20px;
	}

	#legendUsers,
	#legendBdsm {

		margin-left: 0;

	}

}