* {	
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	text-decoration: none;
	font-family: "Roboto";
	outline: none;
	border: none;
}

div.submit-recaptcha {
	/* display: flex; */
    /* justify-content: center; */
    /* padding-top: 40px; */
}

html, body {
	height: 100%;
	background: white;
	padding-top: 50px;
}

span, button {
	display: block;
	background: none;
}

img {
	user-drag: none; 
	user-select: none;
	-moz-user-select: none;
	-webkit-user-drag: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	flex-shrink: 0;
}

.clayer {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.1);
	z-index: 3;
}

.ad-holder {
	padding-bottom: 12px;
	padding-top: 12px;
	margin: 0 auto auto auto;
	position: relative;
}

.ad-holder.auto {
	max-width: 1100px;
}

.ad-holder.leaderboard {
	max-width: 720px;
}


.signin {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255,255,255,0.9);
	z-index: 10;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.signin .hide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


.cb.vid {
	cursor: pointer !important;
}

div.reportcheat.no-padding > span.desc {
	margin-bottom: 0 !important;
}

body.show-signin {
	overflow: hidden;
}

body.show-signin .signin {
	display: flex;
}

body.show-signin .fmenu, body.show-signin .header, body.show-signin .content {
	filter: blur(16px);
}

div.feedback.btns-disabled > button {
	color: gray;
	pointer-events: none;
	cursor: not-allowed;
}

.signin .modal {
	width: 394px;
	height: 472px;
	background: white;
	border: 1px solid rgb(222,222,222);
	border-radius: 12px;
	margin-bottom: 24px;
	position: relative;
	z-index: 1;
}

.signin .logo {
	margin-bottom: 38px;
	width: 138px;
}

.signin .logo img {
	width: 138px;
}

.signin .top {
	height: 70px;
	display: flex;
	justify-content: space-between;
	padding: 0 32px;
}

.signin .top span {
	height: 100%;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	color: rgb(135,135,135);
	position: relative;
	cursor: default;
}

.signin .top span:after {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: 40px;
	height: 6px;
	background: black;
	border-radius: 0 0 99px 99px;
}

.signin .top span:nth-child(1) {
	font-weight: 700;
	color: black;
	cursor: default;
}

.signin .top span:nth-child(2) {
	cursor: pointer;
}

.signin.reg .top span:nth-child(2) {
	font-weight: 700;
	color: black;
	cursor: default;
}

.signin.reg .top span:nth-child(1) {
	font-weight: 400;
	color: rgb(135,135,135);
	cursor: pointer;
}

.signin .top span:after {
	content: "";
}

.signin .top span:nth-child(2):after {
	content: none;
}

.signin.reg .top span:nth-child(1):after {
	content: none;
}

.signin.reg .top span:nth-child(2):after {
	content: "";
}

.signin.reg .top span:nth-child(2) {
	cursor: default;
}

.signin .main {
	height: calc(100% -  70px);
}

.signin .main > div:nth-child(2) {
	display: none;
}

.signin.reg .main > div {
	display: none;
}

.signin.reg .main > div:nth-child(2) {
	display: flex;
	padding: 18px 40px 32px 40px;
}

.signin .main > div:nth-child(2) .input:first-child, .signin .main > div:nth-child(2) .input:last-child {
	animation: fadeIn;
	animation-duration: 0.17s;
	animation-fill-mode: forwards;
}

.signin .main > div {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	padding: 86px 40px 32px 40px;
	height: 100%;
}

.signin .main > div > div {
	width: 100%;
}

.signin .input {
	margin-bottom: 18px;
	height: 50px;
	width: 100%;
	position: relative;
}

.signin .input img {
	position: absolute;
	top: 16px;
	left: 26px;
	width: 17px;
	pointer-events: none;
}

.signin .input img.l {
	width: 25px;
	top: 12px;
	left: 23px;
}

.signin .input img.m {
	width: 19px;
	top: 17px;
	left: 26px;
}

.signin .input input {
	display: block;
	width: 100%;
	height: 100%;
	border: 1px solid rgb(222,222,222);
	border-radius: 13px;
	padding-left: 65px;
	font-size: 17px;
}

.signin .main button {
	cursor: pointer;
	box-shadow: 1px;
	padding: 0 38px;
	border-radius: 14px;
	background: black;
	color: white;
	font-size: 15px;
	text-transform: uppercase;
	font-weight: 700;
	height: 50px;
	display: flex;
	align-items: center;
	box-shadow: 0px 1px 2px rgba(0,0,0,0.15)
}

.signin.reg .main button {
	padding: 0 30px;
}

.signin .main button img {
	width: 17px;
	margin-right: 10px;
}

.imageoverlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.8);
	z-index: 10;
	display: none;
	align-content: center;
	justify-content: center;
	padding: 60px 0;
	animation-name: fadeIn;
	animation-duration: 0.2s;
	animation-fill-mode: forwards;
	cursor: zoom-out;
}

.imageoverlay > div {
	width: 100%;
	max-height: 100%;
	padding: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
}

@keyframes popIn {
	0% {
		transform: scale(0.35);
	}
	50% {
		transform: scale(1.025);
	}
	100% {
		transform: initial;
	}
}

.imageoverlay > div img, .imageoverlay > div iframe {
	width: 100%;
	max-width: 920px;
	border-radius: 11px;
	box-shadow: 0px 6px 10px -2px rgba(0,0,0,0.3);
	animation-name: popIn;
	animation-duration: 0.2s;
	animation-fill-mode: forwards;
}

.imageoverlay .vid {
	
}

.imageoverlay > div iframe {
	width: 820px;
	height: 500px;
}

.loading {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(255,255,255,0.8);
	z-index: 6;
	display: none;
	align-items: center;
	justify-content: center;
}

@keyframes spin {
	0% {
		transform: initial;
	}
	100% {
		transform: rotateZ(360deg);
	}
}

.loading img, .loadcontainer img {
	width: 54px;
	height: 54px;
	animation-name: spin;
	animation-duration: 1.4s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

.loadcontainer {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.loadcontainer img {
	width: 30px;
	height: 30px;
}

@keyframes menuAppear {
	0% {
		transform: scale(0.1);	
	}
	50% {
		transform: scale(1.06);
	}
	100% {
		transform: initial;
	}
}

.ads {
	padding:10px;
	margin:40px;
}

.fmenu {
	transform-origin: top left;
	display: none;
	padding: 14px 0;
	position: fixed;
	min-width: 240px;
	border-radius: 12px;
	background: white;
	border: 1px solid rgb(210,210,210);
	z-index: 4;
	box-shadow: 0px 1px 4px -1px rgba(0,0,0,0.4), 0px 6px 6px -6px rgba(0,0,0,0.8);
	animation-name: menuAppear;
	animation-duration: 0.185s;
	animation-fill-mode: forwards;
}

.fmenu.show {
	display: block;
}

.fmenu > div {
	display: none;
}

.fmenu > div.curr {
	display: block;
}

@keyframes fmenuFade {
	0% {
		opacity: 0;
	}
	34% {
		opacity: 0;	
	}
	100% {
		opacity: 1;	
	}
}

.fmenu.show > div.curr {
	animation-name: fmenuFade;
	animation-duration: 0.3s;
	animation-fill-mode: forwards;
}

.fmenu > div a, .fmenu > div button {
	display: flex;
	align-items: center;
	padding: 11px 20px 11px 58px;
	width: 100%;
	color: rgb(60,60,60);
	font-size: 15px;
	position: relative;
	cursor: pointer;
}

.fmenu > div:not(.games) a, .fmenu > div:not(.games) button {
	padding: 10px 20px 10px 57px;
	width: 248px;
}

.fmenu > div a:hover, .fmenu > div button:hover {
	background: rgba(0,0,0,0.05);
}

.fmenu > div a img, .fmenu > div button img {
	max-width: 20px;
	margin-right: 14px;
	position: absolute;
	top: 9px;
	left: 18px;
}

.fmenu > div:not(.games) a img, .fmenu > div:not(.games) button img {
	min-width: 14px;
	max-height: 14px;
	min-height: 13px;
	position: absolute;
	top: 12px;
	left: 20px;
}

.fmenu .games a {
	width: 262px;
}

.fmenu .games a span {
	position: absolute;
	top: 10px;
	right: 16px;
	color: black;
	font-size: 12px;
	font-weight: 500;
	padding: 4px 10px;
	border-radius: 99px;
	background: rgb(240,240,240);
}

@keyframes ttAppear {
	0% {
		transform: scale(0.5);
	}
	100% {
		transform: scale(1);
	}
}

.tooltip {
	position: fixed;
	top: 100px;
	left: 200px;
	padding: 6px 12px;
	border: 1px solid rgb(230,230,230);
	background: white;
	border-radius: 9px;
	color: rgb(70,70,70);
	font-size: 12px;
	pointer-events: none;
	animation: ttAppear;
	animation-duration: 0.1s;
	transform-origin: top left;
}

.header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 86px;
	padding: 0 10px;
	background: rgba(255,255,255,0.93);
	z-index: 2;
	backdrop-filter: blur(10px);
}

.header > div {
	max-width: 1110px;
	height: 100%;
	margin: 0 auto;
	padding: 0 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.header > div > div {
	display: flex;
	align-items: center;
}

.header .logo {
	padding: 6px 3px;
	margin-right: 60px;
}

.logo img {
	width: 126px;
}

.select {
	cursor: pointer;
	color: rgb(50,50,50);
	font-weight: 500;
	font-size: 15px;
	padding: 4px 8px;
	position: relative;
	display: flex;
	align-items: center;
}

.link {
	cursor: pointer;
	color: rgb(50,50,50);
	font-weight: 500;
	font-size: 15px;
	padding: 4px 8px;
	position: relative;
	display: flex;
	align-items: center;
}

.select img {
	width: 20px;
	margin-right: 12px;
}

.select:after {
	content: "";
	width: 20px;
	height: 20px;
	background-size: 13px;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url("../img/icons/arrow_down.svg");
	position: absolute;
	top: 4px;
	right: -16px;
}

.input {
	position: relative;
}

.header-icon {
	cursor: pointer;
	margin-right: 12px;
}

.header-icon img {
	height: 24px;
	width: 24px;
}
.header .input {
	margin-right: 16px;
}

.header .input input {
	font-size: 15px;
	padding: 10px 20px;
	border: 1.1px solid rgb(210,210,210);
	border-radius: 14px;
}

.input.search input {
	width: 214px;
	padding-left: 50px;
	position: relative;
}

.input.search:after {
	position: absolute;
	top: 9px;
	left: 18px;
	content: "";
	width: 20px;
	height: 20px;
	background-image: url("../img/icons/search.svg");
	background-size: 15px;
	background-repeat: no-repeat;
	background-position: center;
	pointer-events: none;
}

.input.search input:focus {
	width: 310px;
}

.searchmenu {
	display: none;
	padding: 2px 14px 14px 14px;
	position: fixed;
	max-width: 310px;
	width: 310px;
	height: 100px;
	max-height: 500px;
	overflow: hidden;
	overflow-y: auto;
	border-radius: 0 0 12px 12px;
	background: white;
	border: 1px solid rgb(210,210,210);
	z-index: 4;
	top: 80px;
	right: 100px;
	border-top: 0;

}

.searchmenu::-webkit-scrollbar {
  width: 9px;
  height: 9px;
  padding: 6px;
}
.searchmenu::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
}
.searchmenu::-webkit-scrollbar-thumb {
  background: rgb(200,200,200);
  border: 0px none #ffffff;
  border-radius: 50px;
}

.searchmenu::-webkit-scrollbar-track {
  background: #ffffff;
  border: 0px none #ffffff;
  border-radius: 100px;
  padding: 8px;
}

.searchmenu::-webkit-scrollbar-corner {
  background: transparent;
}


.searchmenu .result, .acp .entry {
	border: 1px solid rgb(220,220,220);
	border-radius: 10px;
	height: 80px;
	display: flex;
	overflow: hidden;
	align-items: center;
	padding: 20px 16px;
}

.acp .entry {
	padding: 28px 16px;
	border: 1px solid rgb(215,215,215);
	cursor: pointer;
}

.searchmenu .result + .result {
	margin-top: 14px;
}

.acp .entry + .entry {
	margin-top: 18px;
}

.searchmenu .result .thumb, .acp .entry .thumb {
	height: 100%;
	width: 42px;
	margin-right: 12px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	border-radius: 4px;
}

.searchmenu .result .thumb img, .acp .entry .thumb img {
	width: 100%;
	border-radius: 4px;
}

.searchmenu .details, .acp .entry .details {
	width: 100%;
}

.searchmenu .details .title, .acp .entry .details .title {
	display: flex;
	font-size: 14px;
	align-items: center;
	margin-bottom: 8px;
	font-weight: 700;
	color: rgb(30,30,30);
}

.searchmenu .details .title img, .acp .entry .details .title img {
	width: 15px;
	flex-shrink: 0;
	margin-right: 9px;
}

.searchmenu .details .title span, .acp .entry .details .title span {
	white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 148px;
}

.searchmenu .details .info,  .acp .entry .details .info {
	font-size: 11px;
	display: flex;
	font-weight: 500;
}

.searchmenu .details .info img, .acp .entry .details .info img {
	width: 10px;
	margin-right: 7px;
}

.searchmenu .details .info span, .acp .entry .details .info span {
	margin-right: 12px;
	    color: rgb(64,64,64);
}

.searchmenu .noresults {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	font-weight: 500;
	color: rgb(100,100,100);
}

.button {
	padding: 12px 28px;
	border-radius: 16px;
	font-size: 14px;
	color: white;
	background: black;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0px 1px 2px rgba(0,0,0,0.2);
}

button.download.disabled {
	background: gray !important;
	cursor: not-allowed !important;
}

.header .button {
	padding: 13px 24px;
	display: flex;
	align-items: center;
	background: white;
	color: rgb(60,60,60);
	box-shadow: 0px 2px 2px -1px rgba(0,0,0,0.04);
	background: rgb(248,248,250);
	border: 1px solid rgb(215,215,215);
	position: relative;
	top: -1px;
}

.button img {
	width: 18px;
	margin-right: 10px;
	position: relative;
	left: -4px;
}

.header button.user {
	cursor: pointer;
	width: 38px;
	height: 38px;
	border-radius: 99px;
	background: rgb(230,230,230);
	overflow: hidden;
	/* border: 1px solid rgb(230,230,230); */
}

.header button.user img {
	width: 100%;
}

.content {
	max-width: 1150px;
	min-height: 400px;
	margin: 0 auto;
	padding: 0px;
	padding-bottom: 48px;
}

.tag {
	display: flex;
	align-items: center;
	margin-top: 32px;
	margin-bottom: 9px;
	font-size: 24px;
	color: rgb(110,110,110);
	font-weight: 700;
	position: relative;
	left: 56px;
	width: calc(100% - 56px);
}

.tag:nth-child(1){
	margin-top: 8px;
}

.tag img {
	display: none;
	height: 20px;
	margin-left: 14px;
}

.cards {
	display: flex;
	flex-wrap: wrap;
	padding-left: 37px;
	position: relative;
}

.cards.compact {
	flex-wrap: nowrap;
	overflow: hidden;
	width: calc(100% - 18px);
}

.cards.compact:after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: 25px;
	background: white;
}

.cards.compact:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 44px;
	background: white;
	z-index: 1;
}

.showmore {
	position: relative;
	left: 44px;
	width: calc(100% - 85px);
	height: 44px;
	cursor: pointer;
	border-bottom: 0px solid rgb(224,224,224);
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: 0px;
	font-size: 14px;
	font-weight: 700;
	color: rgb(100,100,100);
	border-radius: 12px;
}

.showmore:hover {
	background: rgb(240,240,240);
}

.showmore img {
	width: 15px;
	opacity: 0.7;
	margin-right: 10px;
}

.navigate {
	position: absolute;
	top: 144px;
	left: 24px;
	display: flex;
	justify-content: space-between;
	width: calc(100% - 28px);
	pointer-events: none;
}

.gallery .navigate {
	width: calc(100% + 44px); 
	left: -22px;
}

.navigate button {
	width: 44px;
	height: 44px;
	border-radius: 99px;
	background: white;
	border: 1px solid rgb(220,220,220);
	z-index: 1;
	cursor: pointer;
	pointer-events: all;
	box-shadow: 0px 2px 4px -2px rgba(0,0,0,0.46);
	transition: background 0.1s, box-shadow 0.1s;
}

.navigate button:active {
	background: rgb(230,230,230);
	box-shadow: none;
}

.navigate button img {
	width: 14px;
	opacity: 0.8;
}

.navigate button:nth-child(1) img {
	transform: rotateZ(90deg);
	position: relative;
	left: -1px;
}

.navigate button:nth-child(2) img {
	transform: rotateZ(-90deg);
}

.cards .c {
	display: block;
	width: 250px;
	height: 324px;
	border: 1px solid rgb(220,220,220);
	border-radius: 16px;
	background: white;
	margin: 10px;
	overflow: hidden;
	cursor: pointer;
	flex-shrink: 0;
	position: relative;
	right: 0;
	transition: right 0.3s;
}

.scroll {
	display: flex;
	overflow: hidden;
}

.morecontent {
	display: none;
	visibility: hidden;
}

.cards .scroll:after {
	content: "";
	width: 18px;
	height: 100%;
	display: block;
	flex-shrink: 0;
}

.cards .c .body a {
	margin-top: 16px;
	box-shadow: 0px 1.6px 4px -2px rgba(0,0,0,0.58);
	border-bottom: none;
}

.cards .head {
	height: 133px;
	overflow: hidden;
	position: relative;
}

.cards .head .author {
	position: absolute;
	top: 16px;
	right: 12px;
	padding: 4px 10px;
	background: rgba(0,0,0,0);
	border-radius: 99px;
	display: flex;
	align-items: center;
	color: white;
	font-size: 12px;
	overflow: hidden;
	max-width: 40px;
	z-index: 1;
}

.cards .head .author img {
	border-radius: 99px;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	margin-right: 6px;
	transition: all 0.2s;
	box-shadow: 0px 2px 3px -1px rgba(0,0,0,0.8) !important;
}

.cards .head .author span {
	max-width: 0px;
	opacity: 0;
	transition: max-width 0.3s;
	height: 14px;
	white-space: nowrap;
}

.cards .c:hover .head .author {
	max-width: none;
	background: rgba(0,0,0,0.7);
}

.cards .c:hover .head .author span {
	max-width: 200px;
	opacity: 1;
}


.cards > .c .head .author img {
	box-shadow: none;
}

.cards .head img {
	width: 100%;
	transition: all 1s;
}

.cards .c:hover .head > img {
	transform: scale(1.15);
}

.cards .head .details {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 25px;
	padding-top: 10px;
}

.cards .head .details:before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	height: 50px;
	width: 100%;
	background: linear-gradient(0deg, rgba(255,255,255,1) 28%, rgba(255,255,255,0.9) 40%, rgba(255,255,255,0.1) 90%, rgba(255,255,255,0) 100%);
}

.cards .head .details > div {
	display: flex;
	align-items: center;
}

.cards .head .details span {
	color: #404040;
	display: flex;
	align-items: center;
	font-size: 11px;
	color: rgb(64,64,64);
	font-weight: 500;
	position: relative;
}

.cards .head .details span img {
	width: 10px;
	max-height: 14px;
	margin-right: 6px;
	position: relative;
	left: -1px;
}

.cards .body {
	height: calc(100% - 133px);
	padding: 14px 25px 18px 25px;
}

.cards .body .title {
	display: flex;
	align-items: center;
	font-size: 15px;
	font-weight: 700;
	color: rgb(30,30,30);
	margin-bottom: 15px;
}

.cards .body .title span {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.cards .body .title img {
	width: 18px;
	margin-right: 15px;
}

.cards .body p {
	position: relative;
	font-size: 14px;
	color: rgb(120,120,120);
	line-height: 1.5;
	height: 63px;
	margin-bottom: 12px;
	overflow: hidden;
}

.cards .body p:after {
	content: "";
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 100%;
	height: 22px;
	background: linear-gradient(0deg, rgba(255,255,255,1) 27%, rgba(255,255,255,0) 80%);
}

.cards .body a {
	display: flex;
	align-items: center;
	background: rgb(242,242,242);
	justify-content: center;
	width: 130px;
	margin: 0 auto;
	padding: 12px 18px;
    border-radius: 10px;
    font-size: 12.1px;
    color: black;
    text-transform: uppercase;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0px 1.6px 4px -2px rgba(0,0,0,0.58);
}

.cards .body a img {
	width: 11px;
	margin-right: 10px;
}

.content.align {
	display: flex;
	justify-content: center;
	margin-top: 6px;
}

.content > .main {
	width: 720px;
	margin-bottom: 50px;
}

div.bcard.pending-notificaton {
	padding: 20px !important;
    margin-bottom: 20px !important;
    background: orange !important;
	color: white !important;
	display: flex;
	align-items: center;
}

div.bcard.pending-notificaton > .alert {
	height: 20px;
	width: 20px;
	margin-right: 6px;
    background-color: white;
    -webkit-mask: url(/img/icons/alert.svg) no-repeat center;
    mask: url(/img/icons/alert.svg) no-repeat center;
}

.content > .main .bcard, .content > .app .bcard {
	width: 100%;
	border-radius: 16px;
	border: 1px solid rgb(215,215,215);
	padding: 40px 44px;
	background: white;
	margin-bottom: 20px;
}

.bcard .top, .bcard .bottom {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 44px;
}

.bcard .top > div {
	display: flex;
	align-items: center;
}

.bcard .top .author {
	font-size: 14px;
	color: rgb(60,60,60);
	font-weight: 500;
	display: flex;
	align-items: center;
}

.bcard .top .author img {
	width: 24px;
	height: 24px;
	border-radius: 99px;
	margin-right: 13px;
	border: 1px solid rgb(220,220,220);
}

.bcard .top .details span {
	display: flex;
	align-items: center;
	margin-left: 44px;
	font-size: 13px;
	color: rgb(50,50,50);
}

.bcard .top .details span img {
	height: 14px;
	margin-right: 8px;
	position: relative;
	top: 0.5px;
}

.bcard .top .details button {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	margin-left: 28px;
}

.bcard .top .details button img {
	height: 16px;
	transform: rotateZ(90deg);
}

.bcard .title {
	display: flex;
	align-items: center;
	font-size: 20px;
	font-weight: 500;
	color: rgb(60,60,60);
	margin-bottom: 36px;
}

.bcard .title img {
	margin-right: 20px;
	width: 22px;
}

.bcard .gallery {
	margin-bottom: 32px;
	display: flex;
	height: 134px;
}

.bcard .gallery .cb {
	flex-shrink: 0;
	height: 134px;
	max-width: 240px;
	border-radius: 12px;
	background: rgb(230,230,230);
	margin-right: 22px;
	overflow: hidden;
	cursor: zoom-in;
}

.bcard .gallery .cb img, .bcard .gallery .cb iframe {
	height: 100%;
	pointer-events: none;
}

.bcard .gallery .cb iframe {
	width: 100%;
}

.needs_scroll {
	position: relative;
}

.bcard p.desc {
	font-size: 16px;
	line-height: 1.6;
	color: rgb(110,110,110);
	max-height: 75px;
	overflow: hidden;
}
/* .troubleshoot > span img {
	width: 17px;
	margin-right: 15px;
} */

.bcard p.desc.tags > img {
	width: 15px;
}

.bcard p.desc.credits {
	padding-top: 15px;
}

.bcard p.desc.credits > img {
	width: 15px;
}

.bcard p.desc.more {
	max-height: 999999px;
}

.bcard button.rm {
	padding: 10px 8px;
	position: relative;
	left: -8px;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 12px;
	color: rgb(163,163,163);
	cursor: pointer;
	display: none;
}

.bcard .bottom {
	margin: 58px 0 4px 0;
}

.bcard .feedback {
	display: flex;
	flex-direction: row-reverse;
}

.bcard .feedback button {
	display: flex;
	align-items: center;
	cursor: pointer;
	min-width: 80px;
	font-size: 13px;
	font-weight: 500;
	color: rgb(50,50,50);
	height: 40px;
}

@keyframes tUp {
	0% {
		transform: none;
	}
	51% {
		transform: rotateZ(-12deg) translateY(-7px) scale(1.2);
	}
	100% {
		transform: none;
	}
}

@keyframes tDown {
	0% {
		transform: none;
	}
	51% {
		transform: rotateZ(-12deg) translateY(7px) scale(1.2);
	}
	100% {
		transform: none;
	}
}

.bcard .feedback button img {
	width: 20px;
	margin-right: 10px;
	animation-duration: 0.28s;
}

.bcard .feedback button img:nth-child(2) {
	display: none;
}

.feedback.like button:nth-child(2) img:nth-child(1) {
	display: none;
}

.feedback.like button:nth-child(2) img:nth-child(2) {
	display: block;
}

.feedback.like button:nth-child(2) {
	color: #00A6EB;
	font-weight: 700;
}

.feedback.dislike button:nth-child(1) img:nth-child(1) {
	display: none;
}

.feedback.dislike button:nth-child(1) img:nth-child(2) {
	display: block;
}

.feedback.dislike button:nth-child(1) {
	color: #00A6EB;
	font-weight: 700;
}

.bcard .feedback button:nth-child(1) img {
	position: relative;
	top: 4px;
} 

.feedback button > span {
	overflow: hidden;
	max-height: 16px;
}

.feedback button > span span {
	position: relative;
	top: -14px;
	transition: top 0.3s;
}

.bcard .download {
	padding: 18px 32px;
	background: black;
	color: white;
	border-radius: 16px;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 14px;
	display: flex;
	align-items: center;
	box-shadow: 0px 3px 4px -2px rgba(0,0,0,0.38);
	cursor: pointer;
}

.bcard .download img {
	width: 12px;
	margin-right: 9px;
}

@keyframes dFadeIn {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}	
}

.troubleshoot {
	animation-name: dFadeIn;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}

.troubleshoot > span {
	display: flex;
	align-items: center;
	margin-left: 26px;
	font-size: 16px;
	font-weight: 500;
	color: #4A4A4A;
	margin-bottom: 22px;
}

.troubleshoot > span img {
	width: 17px;
	margin-right: 15px;
}

.troubleshoot .questions {
	border-radius: 16px;
}

.troubleshoot .questions > div {
	padding: 14px 22px;
	color: rgb(70,70,70);
	position: relative;
	cursor: pointer;
	border-bottom: 1.4px solid rgb(215,215,215);
	margin-bottom: 14px;
}

.troubleshoot .questions > div:after {
	opacity: 0.8;
	content: "";
    width: 24px;
    height: 24px;
    background-size: 15px;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(../img/icons/arrow_down.svg);
    transition: transform 0.2s;
    position: absolute;
    top: 12px;
    right: 30px;
}

.troubleshoot .questions span {
	font-size: 16px;
	padding-right: 50px;
	user-select: none;
	-webkit-user-select: none;
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.troubleshoot .questions p {
	display: none;
	font-size: 15px;
	color: rgb(140,140,140);
	margin-top: 8px;
	line-height: 1.6;
	padding-right: 50px;
	animation-name: fadeIn;
	animation-duration: 0.4s;
	animation-fill-mode: forwards;
}

.questions > div.show > p {
	display: block;
}

.questions > div.show:after {
	top: 14px;
	transform: rotateZ(-90deg);
}

.recommend .cards {
	flex-direction: column;
	padding-left: 24px;
	margin-top: -8px;
}

.profile {
	margin: 32px 0 34px 0;
	display: flex;
	align-items: center;
	padding: 0 30px;
}

.profile .avatar {
	width: 120px;
	height: 120px;
	border-radius: 999px;
	overflow: hidden;
	margin-right: 28px;
	border: 1px solid rgb(220,220,220);
}

.profile .avatar img {
	width: 100%;
}

.profile span {
	font-weight: 500;
	font-size: 20px;
	margin-bottom: 10px;
}

.profile p {
	font-size: 15px;
	max-width: 500px;
	line-height: 1.5;
	color: rgb(100,100,100);
}

.stitle {
	margin: 14px auto 30px auto;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
    color: rgb(110,110,110);
	font-weight: 700;
}

.stitle img {
	display: none;
	width: 16px;
	position: relative;
	top: -1px;
	margin-right: 18px;
	opacity: 0.9;
}

.mirrorY {
	transform: scaleY(-1);
}

.main.m {
	width: 770px;
	margin-bottom: 30px;
}

.bcard.submit .category {
	display: flex;
	align-items: center;
	font-weight: 500;
	color: #535353;
	margin-bottom: 26px;
}

.bcard.submit .category img {
	height: 14px;
	margin-right: 14px;
	flex-shrink: 0;
}

.bcard.submit .category:not(:first-child){
	margin-top: 32px;
}

.bcard.submit .category:nth-of-type(3) img {
	height: 15px;
	margin-left: 3px;
	margin-right: 17px
}

#creasons {
	margin-bottom: 10px;
}

.bcard input, .bcard textarea, .bcard select, .report-area {
	width: 100%;
	border-radius: 12px;
	border: 1px solid rgb(210,210,210);
	padding: 14px 20px;
	font-size: 15px;
	margin-bottom: 13px;
	resize: vertical;
}

#cdesc {
	margin-bottom: 11px;
}

input.err, textarea.err {
	border: 1.4px solid rgb(250,100,100) !important;
	background: rgba(250,100,100,0.05);
}

.bcard .aligninputs {
	display: flex;
}

.bcard .aligninputs select:nth-child(1), .bcard .aligninputs select:nth-child(2)  {
	width: 158px;
	margin-right: 13px;
	flex-shrink: 0;
}

.bcard.submit .media {
	display: flex;
	padding-bottom: 2px;
	flex-wrap: wrap;
	width: calc(100% + 10px);
}

.media > button, button.file {
	color: #626262;
	font-size: 14px;
	cursor: pointer;
	width: 156px;
	height: 85px;
	border: 1px solid rgb(220,220,220);
	background: rgb(246,246,246);
	border-radius: 10px;
	margin-right: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
}

@keyframes moveFromRight {
	0% {
		transform: translateX(168px);
	}
	100% {
		transform: translateX(0px);
	}
}

@keyframes moveFromLeft {
	0% {
		transform: translateX(-168px);
	}
	100% {
		transform: translateX(0px);
	}
}

.anim-mr {
	animation-name: moveFromRight;
}

.anim-ml {
	animation-name: moveFromLeft;
}

.media .prv, .media .vid {
	width: 156px;
	height: 86px;
	border-radius: 10px;
	border: 1px solid rgb(220,220,220);
	background: rgb(200,200,200);
	margin-right: 13px;
	margin-bottom: 14px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	position: relative;
	overflow: hidden;
	animation-duration: 0.3s;
	animation-fill-mode: forwards;
}

.media .vid iframe {
	width: 100%;
	height: 100%;
}

.media .prv > div, .media .vid > div {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.6);
	opacity: 0;
	padding: 0 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.media .vid > div {
	justify-content: center;
}

.media .prv > div > button, .media .vid > div > button  {
	padding: 10px;
	cursor: pointer;
}

.media .prv > div > button img, .media .vid > div > button img {
	height: 15px;
}

.media .prv > div > button:nth-child(1) img {
	transform: scaleX(-1);
}

.media .prv > div:hover, .media .vid > div:hover  {
	opacity: 1;
	transition: opacity 0.2s;
}

.media > button:hover, button.file:hover {
	opacity: 0.7;
}

button.file {
	width: 188px;
	height: 72px;
	margin-bottom: 12px;
}

.media > button img, button.file img {
	width: 16px;
	margin-right: 10px;
}

button.file img {
	width: 15px;
}

.fprv {
	display: none;
	width: 270px;
	height: 150px;
	border: 1px solid rgb(220,220,220);
	border-radius: 10px;
	padding: 28px 32px;
	box-shadow: 0px 1px 1px rgba(0,0,0,0.05);
}

.fprv .name {
	display: flex;
	align-items: center;
	font-size: 15.3px;
	font-weight: 700;
	color: #535353;
	margin-bottom: 20px;
	position: relative;
	width: 100%;
}

.fprv .name button {
	position: absolute;
	top: -1px;
	right: -6px;
	width: 20px;
	height: 20px;
	display: flex;
	align-self: center;
	justify-content: center;
	opacity: 0;
	transition: all 0.3s;
	cursor: pointer;
}

.fprv:hover .name button {
	opacity: 1;
}

.fprv .name button img { 
	width: 13px;
}

.fprv .fname {
	white-space: nowrap;
	max-width: 150px;
	text-overflow: ellipsis;
	overflow: hidden;
}

.fprv .name img {
	width: 15px;
	margin-right: 12px;
}

.fprv .details {
	font-size: 13px;
	color: #6C6C6C;
}

.fprv .details > span {
	width: 100%;
	display: flex;
	margin-bottom: 5px;
}

.fprv .details > span > span:nth-child(1) {
	width: 100px;
	font-weight: 500;
}

.bcard .formsubmit {
	cursor: pointer;
	margin: 56px auto 0 auto;
	background: black;
	border-radius: 14px;
	padding: 18px 35px;
	color: white;
	font-size: 14px;
	text-transform: uppercase;
	font-weight: 700;
	box-shadow: 0px 2px 3px -0.5px rgba(0,0,0,0.12);
}

span.error {
	margin-top: 2px;
	margin-bottom: 16px;
	display: none;
	align-items: center;
	color: rgb(250,100,100);
	font-weight: 500;
	font-size: 14px;
}

span.error:before {
	content: "";
	height: 20px;
	width: 20px;
	background-image: url("/img/icons/alert_red.svg");
	background-size: 16px;
	background-repeat: no-repeat;
	background-position: center;
	margin-right: 8px;
}

.modals {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.64);
	z-index: 4;
	display: none;
	align-items: center;
	justify-content: center;
}

.modals select, .modals input {
	border-radius: 12px;
	width: 100%;
    border: 1px solid rgb(210,210,210);
    padding: 14px 20px;
    font-size: 15px;
    margin-bottom: 2px;
}

.modals.visible {
	display: flex;
}

.modals .bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

@keyframes cardAppear {
	0% {
		transform: translateY(20px) scale(0.95);
		opacity: 0;
	}
	20% {
		opacity: 0;
	}
	51% {
		opacity: 1;
	}
	100% {
		transform: initial;
	}
}

.modals .card {
	min-width: 445px;
	background: white;
	border-radius: 13px;
	box-shadow: 0px 8px 12px -1px rgba(0,0,0,0.46);
	padding: 40px;
	animation-name: cardAppear;
	animation-duration: 0.3s;
	position: relative;
	z-index: 1;
}

.modals .card > div {
	display: none;
}

.modals .card > div.curr {
	display: block;
}

.modals .card .head {
	display: flex;
	align-items: center;
	font-size: 18px;
	font-weight: 700;
	color: rgb(60,60,60);
	margin-bottom: 20px;
}

.modals .card .head img {
	height: 18px;
	margin-right: 18px;
}

.modals .card .desc {
	font-size: 15px;
	color: rgb(100,100,100);
	margin-bottom: 28px;
}

.modals .card input {
	width: calc(100% + 5px);
	padding: 14px 18px;
	position: relative;
	left: -5px;
	border: 1.3px solid rgb(210,210,210);
	border-radius: 14px;
	font-size: 15px;
}

.modals .card button.main {
	margin: 32px auto 0 auto;
	background: black;
	color: white;
	font-size: 14px;
	font-weight: 700;
	border-radius: 16px;
	padding: 16px 26px;
	text-transform: uppercase;
	box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.25);
	cursor: pointer;
}

div.profile > div:nth-child(2) > span {
	display: flex;
	flex-direction: row;
	align-items: center;
}

img.verified {
	border: 0 !important;
	border-color: transparent !important;
	margin-left: 6px;
}

img.verified:not(.profile) {
	height: 13px !important;
	width: 13px !important;
}

img.verified.profile {
	height: 20px;
	margin: 0 0 0 6px;
	padding: 0;
}

/* Google button */
button#gbtn {
	display: flex;
	flex-direction: row;
	align-items: center;
	background-color: #4285f4;
	color: #fff;
	padding: 1px;
	height: calc(100% - 2px);

	cursor: pointer;
    outline: none;
    overflow: hidden;
    position: relative;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    width: auto;

	-webkit-border-radius: 1px;
    border-radius: 1px;
    -webkit-box-shadow: 0 2px 4px 0px rgba(0,0,0,.25);
    box-shadow: 0 2px 4px 0 rgba(0,0,0,.25);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: background-color .218s,border-color .218s,box-shadow .218s;
    transition: background-color .218s,border-color .218s,box-shadow .218s;
}



button#gbtn:hover {
	-webkit-box-shadow: 0 0 3px 3px rgba(66, 133, 244, .3);
	box-shadow: 0 0 3px 3px rgba(66, 133, 244, .3)
}

button#gbtn > img {
	padding: 10px;
	height: 100%;
	background: #fff;
	flex: 0 0 auto;
}

button#gbtn > span {
	display: flex;
	flex: 1 1 100%;
	text-align: center;

	font-family: Roboto,arial,sans-serif;
    letter-spacing: .21px;
    margin-left: 6px;
    margin-right: 6px;
	vertical-align: top;
	
	font-size: 16px;
}


.site-content {
	padding: 48px 28px 22px 28px;
}

.section {
	padding-bottom: 36px;
	border-bottom: 1px solid rgb(220,220,220);
	margin: 0 auto 46px auto;
	position: relative;
	max-width: 1100px;
}

.label {
	font-size: 24px;
	color: rgb(40,40,40);
	margin: 0 0 24px 30px;
	font-weight: 500;
}

.cardview {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0 -8px 24px -8px;
}

.card {
	margin: 8px;
	width: 282px;
	height: 382px;
	border-radius: 8px;
	border: 1px solid rgb(220,220,220);
	overflow: hidden;
}

.card-banner {
	height: 142px;
	background: rgb(240,240,240);
	background-size: cover;
}

.card-content {
	height: calc(100% - 142px);
	padding: 18px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.card-title {
	font-size: 19px;
	font-weight: 700;
	color: rgb(40,40,40);
	margin-bottom: 4px;
}

.card-dev {
	margin-bottom: 13px;
	font-size: 13px;
	color: rgb(130,130,130);
}

.card-description {
	font-size: 14px;
	line-height: 1.6;
	color: rgb(130,130,130);
	height: 85px;
}

.card-details {
	margin-top: 0px;
	display: flex;
	flex-direction: row;
}

.card-details div {
	width: 100%;
	display: flex;
	align-items: center;
	color: rgb(100,100,100);
	font-size: 14px;  
}

.card-details .material-icons {
	font-size: 19px;
	margin-right: 8px;
}

.mirrorY {
	transform: rotateZ(180deg);
}

.card-actions {
	display: flex;
	flex-direction: row-reverse;
}

.card-button {
    color: black;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 14px;
	padding: 4px 8px;
	cursor: pointer;
}

.button-disabled {
	pointer-events: none;
	opacity: 0.4;
}

.creators-container {
	max-width: 540px;
	margin: 0 auto 20px auto;
	position: relative;
}

.creators-card {
	margin-top: 34px;
	width: 100%;
	height: 320px;
	border-radius: 8px;
	border: 1px solid rgb(220,220,220);
	overflow: hidden;
	position: relative;
	z-index: 1;
	background: white;
	display: none;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.creators-card-current {
	display: flex;
}

.creators-mockupcard {
	height: 280px;
	width: calc(100% + 110px);
	position: absolute;
	left: -55px;
	top: 20px;
	border-radius: 8px;
	border: 1px solid rgb(220,220,220);
	padding: 50px 28px 28px 28px;
}

.mockupline {
	height: 10px;
	width: 100%;
	border-radius: 99px;
	background: rgb(200,200,200);
	margin-bottom: 18px;
}

.mockupline:nth-child(2){
	margin-bottom: 38px;
}

.creators-user {
	display: flex;
	align-items: center;
	margin-bottom: 38px;
	border-bottom: 1px solid rgb(220,220,220);
	padding: 0 18px 18px 18px;
}

.creators-avatar {
	height: 55px;
	width: 55px;
	border-radius: 50%;
	overflow: hidden;
	margin-right: 18px;
}

.creators-avatar img {
	width: 100%;
	height: 100%;
}

.creators-name {
	font-size: 20px;
	font-weight: 500;
	margin-bottom: 4px;
}

.creators-subs {
	font-size: 15px;
	color: rgb(100,100,100);
}

.creators-review {
	height: 121px;
	padding: 0px 80px 0 80px;
}

.review {
	text-align: center;
	line-height: 1.6;
	font-size: 17px;
	color: rgb(90,90,90)
}

.creators-navigate {
	position: absolute;
	pointer-events: none;
	top: 0;
	left: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 34px;
	height: 100%;
	width: 100%;
}

.navigate-btn {
	height: 56px;
	width: 56px;
	border-radius: 50%;
	outline: none;
	border: 1px solid rgb(220,220,220);
	background: white;
	box-shadow: 0px 2px 3px -1px rgba(0,0,0,0.11);
	cursor: pointer;
	pointer-events: all;
}

.navigate-btn .material-icons {
	font-size: 30px;
}

.creators-pagination {
	width: 100%;
	display: flex;
	justify-content: center;
	padding: 12px 0 10px 0;
}

.pagination-dot {
	height: 6px;
	width: 6px;
	border-radius: 99px;
	background: rgb(210,210,210);
	margin: 0 7px;
}

.dot-current {
	background: rgb(120,120,120);
}

.errorcard {
	display: flex;
	width: 390px;
	height: 214px;
	margin: 12px;
	padding: 24px;
}

.card-left {
	width: 190px;
}

.card-left .material-icons {
	font-size: 38px;
}

.errorcard:nth-child(1) .material-icons {
	color: #f13162;
}

.errorcard:nth-child(2) .material-icons {
	color: #4dcd92;
}

.errorcard:nth-child(3) .material-icons {
	color: #9c83ff;
}

.errorcard:nth-child(4) .material-icons {
	color: #ff9b5f;
}

.errorcard:nth-child(5) .material-icons {
	color: #3bbefe;
}

.error-title {
	font-size: 21px;
	font-weight: 500;
	margin-bottom: 13px;
	color: rgb(40,40,40);
}

.error-desc {
	font-size: 16px;
	color: rgb(120,120,120);
	line-height: 1.6;
	height: 109px;
}

.fqview {
	padding: 0px 15% 14px 15%;
}

.fq-block {
	padding: 20px 12px 13px 12px;
	border-bottom: 2px solid rgb(220,220,220);
	margin-bottom: 8px;
	cursor: pointer;
	position: relative;
}

.fq-opened .fq-answer {
	display: block;
}

.fq-opened .fq-arrow {
	transform: rotateZ(90deg);
}

.fq-question {
	font-size: 19px;
	font-weight: 500;
	color: rgb(40,40,40);
	padding-right: 32px;
}

.fq-answer {
	margin-top: 8px;
	color: rgb(100,100,100);
	display: none;
	line-height: 1.6;
	font-size: 17px;
}

.fq-arrow {
	position: absolute;
	top: 14px;
	right: 10px;
}

.fq-arrow .material-icons {
	font-size: 32px;
	color: rgb(40,40,40);
}

.site-modals {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.6);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 5;
}

.modals-shown {
	display: flex;
}

.errormodal {
	width: 500px;
	height: auto;
	background: white;
	padding: 36px;
}

.error-help {
	display: none;
}

.error-current {
	display: block;
}

.error-top {
	margin-bottom: 28px;
	padding-bottom: 14px;
}

.error-howto {
	text-align: center;
	font-size: 19px;
	color: rgb(120,120,120);
	margin-bottom: 3px;
}

.error-what {
	text-align: center;
	font-size: 25px;
	color: rgb(40,40,40);
	font-weight: 700;
	color: #f13162;
}

.error-video {
	margin: 12px 0;
}

.error-intro {
	font-size: 18px;
	font-weight: 500;
	margin-bottom: 18px;
}

.error-steps {
	list-style-position: inside;
	margin-bottom: 20px;
}

.error-steps li {
	margin-bottom: 6px;
	font-size: 15px;
	color: rgb(50,50,50);
}

.error-steps ol {
	margin-left: 22px;
}

.error-result {
	font-size: 15px;
	color: rgb(30,30,30);
}

.error-bottom {
	margin-top: 38px;
	display: flex;
	flex-direction: row-reverse;
}

.error-btn {
	position: relative;
	top: 4px;
	padding: 6px 16px;
	color: rgb(10,10,10);
	font-size: 14px;
	text-transform: uppercase;
	font-weight: 700;
	background: none;
	outline: none;
	border: none;
	cursor: pointer;
}

.site-footer {
	padding: 20px 12% 58px 12%;
	display: flex;
	justify-content: space-between;
	max-width: 1660px;
	margin: 20px auto 0 auto;
}

.footer-logo {
	width: 270px;
}

.footer-logo img {
	width: 200px;
	margin-bottom: 16px;
}

.footer-copyright {
	font-size: 14px;
	line-height: 1.5;
	color: rgb(60,60,60);
}

.footer-links {
	margin-top: 15px;
	display: flex;
}

.footer-links a {
	font-size: 14px;
	font-weight: 500;
	margin-right: 14px;
	color: #007bff;
}

.footer-links a:hover {
	text-decoration: underline;
}

.footer-column {
	max-width: 440px;
}

.footer-column + .footer-column {
	margin-left: 18px;
}

.footer-title {
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 12px;
}

.footer-text {
	font-size: 16px;
	line-height: 1.6;
	color: rgb(100,100,100);
}

.releases-navigator {
	height: 44px;
	margin-bottom: 42px;
	display: flex;
	justify-content: center;
}

.navigator-container {
	height: 100%;
	border-radius: 8px;
	border: 1px solid rgb(220,220,220);
	display: flex;
	overflow: hidden;
}

.navigator-item {
	height: 100%;
	display: flex;
	align-items: center;
	padding: 0 20px;
	font-size: 16px;
	cursor: pointer;
	font-weight: 500;
	color: rgb(80,80,80);
}

.navigator-selected {
	background: rgb(239,239,239);
	color: black;
	font-weight: 700;
}

.navigator-item + .navigator-item {
	border-left: 1px solid rgb(220,220,220);
}

@media (max-width: 1350px){
	.site-footer {
		 padding: 0 5% 58px 5%;
	}
}

@media (max-width: 1200px){
	.site-header {
		padding: 0 28px;
	}
}

@media (max-width: 1110px){
	.site-footer {
		margin-top: 0;
		padding: 0 24px 58px 24px;
	}
	.footer-column {
		max-width: 400px;
	}
	.footer-title {
		font-size: 18px;
	}
	.footer-text {
		font-size: 15px;
	}
}

@media (max-width: 1000px){
	.site-footer {
		flex-direction: column;
		align-items: center;
	}
	.footer-logo {
		text-align: center;
		margin-bottom: 32px;
	}
	.footer-links {
		justify-content: center;
		margin-top: 9px;
	}
	.footer-column + .footer-column {
		margin: 26px 0 0 0;	
	}
	.label {
		margin: 0 0 22px 12px;
	}
}

@media (max-width: 800px){
	.creators-mockupcard {
		display: none;
	}
	.creators-navigate {
		padding: 0 20px;
		z-index: 3;
	}
	.fqview {
		padding: 0px 24px 12px 24px;
	}
}

@media (max-width: 620px){
	.creators-navigate {
		padding: 58px 24px;
	}
	.navigate-btn {
		align-self: flex-end;
	}
	.review {
		font-size: 16px;
	}
}

@media (max-width: 550px){
	.releases-navigator {
		height: auto;
	}
	.navigator-container {
		flex-direction: column;
		width: 95%;
		height: auto;
	}
	.navigator-item + .navigator-item {
		border: none;
		border-top: 1px solid rgb(220,220,220);
	}
	.navigator-item {
		align-items: center;
		height: 48px;
		text-align: center;
	}
}

@media (max-width: 500px){
	.creators-user {
		margin-bottom: 22px;
	}
	.creators-card {
		height: auto;
		padding: 42px 0;
	}
	.creators-review {
		height: auto;
		padding: 0px 50px;
	}
	.errorcard {
		height: auto;
		padding: 20px;
	}
	.error-desc {
		height: auto;
		margin-bottom: 16px;
	}
	.fqview {
		padding: 0px 0px 12px 0px;
	}
	.fq-question {
		font-size: 18px;
	}
}


@keyframes answerAppear {
    0% {
        max-height: 0px;
    }
    100% {
        max-height: 240px;
    }
}

@keyframes answerHide {
    0% {
       max-height: 240px;
       opacity: 1;
       margin-top: 8px;
    }
    100% {
        max-height: 0px;
       opacity: 0;
       margin-top: 0px;
    }
}

.fq-answer {
    animation-name: answerAppear;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}

.fq-block {
    overflow: hidden;
}

.fq-hide .fq-answer {
    animation-name: answerHide;
}

@media (max-width: 400px){
	.creators-review {
		padding: 0 30px;
	}
}