body {
	background: rgb(18, 10, 32);
	background: linear-gradient(45deg, rgba(18, 10, 32, 1) 0%, rgba(44, 16, 80, 1) 100%);
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}


#appPage {
	min-height: 0px;
}

#appPage .firstText {
	text-align: center;
	display: block;
	width: 100%;
	position: relative;
	margin-top: 50px;
	height: 200px;
}

#appPage .firstText h1 {
	color: #FFF;
	font-weight: 300;
	margin: 0;
	font-size: 44px;
	font-family: var(--geoit);
	margin-bottom: 10px;
}

#appPage .firstText h1 span {
	color: #ffeaa7;
}

#appPage .firstText h2 {
	color: #FFF;
	font-weight: 300;
	font-size: 18px;
	letter-spacing: 2px;
	text-transform: uppercase;
	line-height: 1.5;
	font-family: var(--geolite);
	margin-bottom: 5px;
}

#appPage .functions {
	display: block;
	position: relative;
	margin-top: 200px;
	width: 100%;
	font-size: 0;
	text-align: center;
	margin-bottom: 50px;
}

#appPage .functions .item {
	display: inline-block;
}

.whitePart {
	display: block;
	width: 100%;
	position: relative;
}

.whitePart .shape {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	height: 158px;
}

.whitePart .shape .left {
	width: 159px;
	height: 158px;
	position: absolute;
	left: 0px;
	top: 0px;
	background: url(../img/appShapeLeft.png);
}

.whitePart .shape .right {
	width: 160px;
	height: 159px;
	position: absolute;
	right: 0px;
	top: -158px;
	background: url(../img/appShapeRight.png);
}

.whitePart .shape .center {
	width: calc(100% - 159px);
	left: 159px;
	background: #FFF;
	top: 0;
	position: absolute;
	height: 158px;
}

.whitePart .main {
	top: 158px;
	position: relative;
	background: #FFF;
	height: auto;
}

.whitePart .main .wrapi {
	width: 980px;
	margin: 0px auto;
}

.whitePart footer,
.whitePart footer .tit,
.whitePart footer .item>a,
.whitePart footer .appInfo a,
.whitePart footer .appInfo .subtit,
.whitePart footer .subtit,
.whitePart footer .copyright,
.whitePart footer .afterFooter {
	color: var(--gray);
}

.whitePart #beforeFooter {
	display: none;
}

.whitePart footer .appInfo svg path {
	fill: var(--gray);
}

.gBTitle {
	font-size: 28px;
	color: var(--gray);
	font-family: var(--geoit);
	text-transform: uppercase;
}

.gBSub {
	font-size: 16px;
	color: var(--gray);
	font-family: var(--geolite);
}

.whatIsIt {
	text-align: center;
	position: relative;
	top: -50px;
}

#redes {
	text-align: center;
	margin-bottom: 50px;
}

#redes .item {
	width: 70px;
	height: 70px;
	border-radius: 10px;
	box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.05);
	transition: all .3s ease-in-out;
	position: relative;
	display: inline-block;
	margin: 0px 10px;
}

#redes .item:hover {
	box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.3);
}

#redes .item svg {
	width: 32px;
	height: 32px;
	position: absolute;
	top: 19px;
	left: 19px;
}

#redes .item svg path {
	fill: #FFF;
}

#redes .item.twitter {
	background: rgb(10, 189, 227);
	background: linear-gradient(45deg, rgba(10, 189, 227, 1) 0%, rgba(10, 189, 227, 1) 100%);
}

#redes .item.facebook {
	background: rgb(55, 66, 250);
	background: linear-gradient(45deg, rgba(55, 66, 250, 1) 0%, rgba(83, 82, 237, 1) 100%);
}

#redes .item.whats {
	background: rgb(46, 213, 115);
	background: linear-gradient(45deg, rgba(46, 213, 115, 1) 0%, rgba(123, 237, 159, 1) 100%);
}

#redes .item.instagram {
	background: #d6249f;
	background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}

#comments {
	width: 50%;
	float: left;
}

#outros {
	width: 45%;
	float: right;
}

#outros .preTitss {
	font-size: 16px;
	color: var(--gray);
	font-family: var(--geolite);
	margin-top: 20px;
	margin-bottom: 5px;
}

#outros .answer {
	font-size: 14px;
	color: var(--gray);
	font-family: var(--geolite);
}

#comments .gBSub {
	font-size: 13px;
}

#comments .plsregister,
#comments .banned {
	font-size: 14px;
	color: #000;
	display: block;
	font-family: var(--geolite);
	text-align: center;
	border: 1px solid #f2f2f2;
	padding: 10px;
	margin: 20px 0px;
	border-radius: 10px;
}

#comments .commentBox {
	background: #F2f2f2;
	border-radius: 10px;
	display: block;
	height: 100px;

	position: relative;
}

#comments .commentBox textarea {
	position: absolute;
	background: #FFF;
	color: #000;
	font-size: 14px;
	top: 0px;
	left: 0px;
	border: none;
	padding: 15px 20px;
	background: transparent;
	width: 100%;
	height: 100%;
	resize: none;
}

#comments #sendComment {
	display: block;
	position: absolute;
	bottom: -50px;
	right: 0px;
	width: 120px;
	height: 40px;
	border-radius: 10px;
	text-align: center;
	color: #FFF;
	font-size: 12px;
	font-family: var(--geoit);
	line-height: 40px;
	background: rgb(55, 66, 250);
	background: linear-gradient(45deg, rgba(55, 66, 250, 1) 0%, rgba(83, 82, 237, 1) 100%);
	cursor: pointer;
	transition: all .3s ease-in-out;
	box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.1);
}

#comments #sendComment:hover {
	box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.3);
}

#comments .aviso {
	position: absolute;
	bottom: -47px;
	font-size: 12px;
	color: #000;
	font-family: var(--geolite);
	left: 0;
	width: calc(100% - 130px);
}

#commentList {
	margin-top: 80px;
	position: relative;
	display: block;
}

#commentList .item {
	display: block;
	position: relative;
	width: 100%;
	height: auto;
	background: transparent;
	border: 1px solid #f2f2f2;
	border-radius: 10px;
	padding: 20px;
	margin-bottom: 20px;
}

#commentList .item .user {
	height: 50px;
	width: 100%;
	position: relative;
}

#commentList .item .user .image {
	float: left;
	width: 50px;
	height: 50px;
	border: 2px solid #f2f2f2;
	background-size: cover;
	display: inline-block;
	border-radius: 25px;
	margin-right: 20px;
	box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
}

#commentList .item .user .username {
	color: #000;
	font-size: 16px;
	font-family: var(--geoit);
	display: inline-block;
	float: left;
	line-height: 50px;
	text-transform: uppercase;
	text-decoration: none;
}

#commentList .item .user .date {
	color: var(--gray);
	font-size: 12px;
	font-family: var(--geolite);
	display: inline-block;
	float: right;
	line-height: 50px;
}

#commentList .item .comment {
	display: block;
	padding: 10px;
	font-size: 16px;
	color: var(--gray);
	font-family: var(--geolite);
}

#commentList .item .delButton {
	position: absolute;
	top: -15px;
	right: -15px;
	background: #000;
	color: #FFF;
	text-align: center;
	width: 30px;
	height: 30px;
	border-radius: 15px;
	cursor: pointer;
	line-height: 30px;
}

@media only screen and (max-width:980px) {
	.wrapi {
		max-width: 90%;
		width: 90%;
	}

	#comments {
		width: 100%;
		float: right;
	}

	#outros {
		width: 100%;
		margin-bottom: 50px;
		float: left;
	}

}

@media only screen and (max-width:580px) {

	#appPage .firstText {
		margin-top: 50px;
	}

	#appPage .functions {
		margin-top: 100px;
	}

	#appPage .firstText h1 {
		font-size: 32px;
	}

	#appPage .firstText h2 {
		font-size: 12px;
	}

	#appPage .functions .item {
		display: block;
	}


	#redes .item {
		margin: 0px 5px;
	}


}

@media only screen and (max-width:460px) {

	#comments .aviso {
		bottom: -60px;
		font-size: 11px;
	}

}

@media only screen and (max-width:360px) {

	#comments .aviso {
		display: none;
	}

}