@import url('common.css');
@import url('faq.css');

.seo-anim
{
	font-size: 16pt;
}

.seo-anim H1
{
	padding: 28px 4px;
	font-size: 40pt;
	color: var(--v-smky1-base);
}

.seo-anim H2
{
	padding: 20px 4px;
	color: var(--v-smky1-base);
}

.seo-anim #theList
{
	min-height: 513px;
}

.seo-anim .panel2
{
	max-width: 900px;
	margin: 30px auto 10px;
	background: var(--v-smky1-base);
	border-radius: 30px;
	padding: 0 20px 2px;
	user-select: none;
}

.seo-anim .panel2 .ttl
{
	padding: 18px 4px 8px;
	text-align: center;
	font-weight: 500;
	color: var(--v-smky1fg-base);
}

.seo-anim .panel3 .list
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 30px;
}

.seo-anim .panel3 .item
{
	width: 510px;
	padding: 0 10px 0 60px;
	background: url(../assets/public/immo-ads/green-check.svg) no-repeat left center;
	background-size: 40px;
}
.seo-anim .panel3 .item.i2 { background-image: url(../assets/public/solutions/user/blue-timer.svg) }
.seo-anim .panel3 .item.i3 { background-image: url(../assets/public/immo-ads/users-cog.svg) }
.seo-anim .panel3 .item.i4 { background-image: url(../assets/public/immo-ads/accounts.svg) }

.seo-anim .seo-hlink
{
	width: fit-content;
	margin: 50px auto;
}

.seo-anim .seo-hlink A
{
	padding: 8px 40px;
	text-decoration: none;
	color: var(--v-smky2fg-base);
	background-color: var(--v-smky2-base);
	border-radius: 20px;
}

.seo-anim .panel4 H3
{
	margin: 50px 10px 30px;
	text-align: center;
	color: var(--v-smky1-base);
}

.seo-anim .panel4 .subpane
{
	margin-bottom: 50px;
	padding: 16px 20px;
	background-color: white;
	border-radius: 20px;
}

.seo-anim .panel5 .list
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 50px;
	margin: 40px 10px 50px;
}

.seo-anim .panel5 .item
{
	padding: 10px 10px 10px 60px;
	background: url(../assets/public/immo-ads/rocket.svg) no-repeat left center;
	background-size: 40px;
}
.seo-anim .panel5 .item.i2 { background-image: url(../assets/public/immo-ads/accounts.svg) }
.seo-anim .panel5 .item.i3 { background-image: url(../assets/public/immo-ads/timeline.svg) }

.seo-anim .panel-bottom
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 40px;
	margin: 30px auto;
	padding-bottom: 30px;
}

.seo-anim .panel-bottom .item
{
	width: 450px;
	margin: 0 10px 0 40px;
	padding: 28px 10px 28px 100px;
	background: url(../assets/public/commons/idea.png) no-repeat left center;
	background-size: 76px;
}
.seo-anim .panel-bottom .item.i2 { background-image: url(../assets/public/commons/reviews.png); background-size: 90px }

/* ------------------------------------------------------------------------- */

.root.fullscreen .seo-page
{
	max-width: unset;
	min-height: unset;
}

.root.fullscreen .seo-anim H1,
.root.fullscreen .seo-anim .panel1,
.root.fullscreen .seo-anim .panel2,
.root.fullscreen .seo-anim .panel3,
.root.fullscreen .seo-anim .panel4,
.root.fullscreen .seo-anim .panel5,
.root.fullscreen .seo-anim .panel6,
.root.fullscreen .seo-anim .panel7,
.root.fullscreen .seo-anim .panel-bottom
{
	display: none;
}

@media (max-width: 1294px)
{
	.seo-anim
	{
		padding: 0 10px;
	}
}

@media (max-width: 1000px)
{
	.seo-anim H1
	{
		padding: 20px 4px;
		font-size: 30pt;
	}
}

@media (max-width: 800px)
{
	.seo-anim
	{
		font-size: 15pt;
	}

	.seo-anim H1
	{
		text-align: center;
		font-size: 28pt;
	}
}

@media (max-width: 600px)
{
	.seo-anim .seo-hlink
	{
		font-size: 13pt;
	}

	.seo-anim .panel3 .item,
	.seo-anim .panel5 .item,
	.seo-anim .panel-bottom .item
	{
		width: 90vw;
	}
}