/* ###
# COMMON
### */

body { 
	background-color: #f5f1f0;
	font-size: 18px;
	line-height: 1.65;
}

p, ul, ol { margin: 0 0 1.6em 0; }
h1, h2, h3 { margin: 0 0 .5em; line-height: 1.4; }
h1 { font-size: 1.5em; }
h2 { font-size: 1.3em; }
h3 { font-size: 1em; }
h1 { font-size: 1.6em; line-height: 1.4; }
ol, ul { padding: 0 0 0 .5em; }
ol { list-style: decimal inside; }
ul { list-style: inside; }
ol li, ul li { margin-bottom: 8px; }
img { opacity: 1; transition: opacity 0.3s; }
img[data-src] { opacity: 0; }
iframe { border: none !important; }
p.slim { margin: 0 0 15px 0; }

.brand {
	display: flex;
	align-items: center;
	white-space: nowrap;
}

.status {
	background: #fc836e;
	background: linear-gradient(165deg, #fc836e 0%, #f2565b 100%);
	color: #fff;
	padding: 4px 2px;
	border-radius: 8px;
	width: 160px;
	text-align: center;
	font-size: .7em;
}

@media (min-width: 45rem) {
	.status { width: 240px; font-size: 1em; }
}



.topbar {
	margin: 0 auto;
	max-width: 740px;
	padding: 0 1rem;
	position: relative;
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	z-index: 10;
	gap: 20px;
}

@media (min-width: 45rem) {
	.topbar {
		padding: 0;
		flex-direction: row;
	}

	.topbar .info:first-child {
		flex-grow: 1;
		width: 68%;
	}
}

.info {
	background-color: #fff;
	border-radius: 20px;
	padding: 20px;
}

.info p:last-child {
	margin: 0;
}

.info ul {
	margin: 0;
}

.info ul li i {
	background-image: linear-gradient(45deg,#ff7200,#f62052);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
}

@media (min-width: 45rem) {
	.info { width: 360px; margin: 0; }
}

.map {
	height: 60px;
	margin: 10px 0;
	z-index: 5;
	display: flex;
	justify-content: center;
	align-items: center;
}

ul.check {
	list-style: none;
	padding: 0;
}

ul.check li {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none'%3E%3Cpath fill='%2328B463' fill-rule='evenodd' d='M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.7-9.3a1 1 0 0 0-1.4-1.4L9 10.58l-1.3-1.3a1 1 0 0 0-1.4 1.42l2 2a1 1 0 0 0 1.4 0l4-4Z' clip-rule='evenodd'/%3E%3C/svg%3E");
	background-size: 18px 18px;
	background-repeat: no-repeat;
	background-position: left 6px;
	padding-left: 24px;
}

/* ###
# ISP list
### */

ul.isp {
	margin: 0;
	list-style: none;
	padding-left: 0;
}

ul.isp li {
	position: relative;
	padding-left: 15px;
}

ul.isp li::before {
	content: "•";
	position: absolute;
	left: 0;
	top: 0;
	padding-right: 10px;
	color: #1494e3;
}

/* ###
# OFFERS
### */

ul.offers {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
	margin: 20px 0;
}

ul.offers > li {
	box-shadow: rgba(100, 100, 111, 0.2) 0px 6px 10px 0px;
	background-color: #fff;
	flex-basis: 220px;
	text-align: center;
	padding: 1em;
	font-size: .8em;
	position: relative;
}

ul.offers > li > ul {
	margin: 1em 0;
}

ul.offers > li > ul li {
	background-position: left 2px;
}

ul.offers a.olink {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	opacity: 0;
}

ul.offers .cta {
	background: #fc836e;
	background: linear-gradient(165deg,#fc836e 0,#f2565b 100%);
	color: #fff;
	padding: 4px 16px;
	border-radius: 8px;
	text-decoration: none;
	white-space: nowrap;
}


/* ###
# ANIMATION
### */

.waiting {
	animation: spinner 1s linear infinite;
}

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

/* ###
# CONTAINER
### */
.container {
	margin: 0 auto;
	max-width: 740px;
	padding: 0 1.6rem;
	position: relative;
	width: 100%;
}

.container.white {
	background-color: #fff;
	padding: 20px;
	border-radius: 20px;
}

.container.white p:last-child {
	margin: 0;
}

/* ###
# IMAGES
### */
.img {
	display: block;
	max-width: 100%;
	margin: 0 auto 2rem auto;
}

@media (min-width: 45rem) {
	.img.left {
		float: left;
		margin: 0 1.6em 1.6em 0;
		max-width: 400px;
	}

	.img.right {
		float: right;
		margin: 0 0 1.6em 1.6em;
		max-width: 400px;
	}
}

/* ###
# BUTTON
### */
button {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-color: #33c3f0;
	border-radius: 4px;
	border: none;
	color: #fff;
	padding: 11px 18px;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	font-weight: bold;
	font-size: .9em;
}

button:hover {
	background-color: #1eaedb;
}

/* ###
# HEADER
### */

header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 6px;
	margin: 0 0 10px 0;
}

header .brand {
	text-decoration: none;
	font-size: 1.2em;
	font-weight: bold;
}

header a {
	color: #262626
}

@media (min-width: 45rem) {
	header { padding: 12px; }
}

/* ###
# FOOTER
### */
footer {
	background-color: rgb(247, 247, 247);
	overflow: hidden;
	margin: 40px 0 0 0;
	padding: 6px 10px 0 10px;
	color: #444;
	font-size: .8em;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0 20px;
}

footer a {
	color: #444;
}

footer ul, footer ol {
	list-style: none;
	margin: 0;
}

footer .guides ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0 .8em;
}

footer .guides li {
	margin: 0;
}

/* breadcrumb */
.breadcrumb {
	list-style: none;
	display: inline-block;
	margin: 0;
	padding: 0;
}

.breadcrumb li {
	float: left;
	margin: 0;
}

.breadcrumb li::after {
	content: "› ";
	white-space: pre;
}

.breadcrumb li:last-child:after {
	content: "";
}

/* ###
# NOWRAP
### */
.nowrap, .nowrap li {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ###
# FLYER
### */

.flyer {
	margin: 0 auto 2em auto;
	padding: 10px 0;
	min-height: 300px;
	text-align: center;
	width: 100%;
	background: repeating-linear-gradient(45deg, transparent 0 10px, #faf3ed 10px 20px);
}

/* ###
# RIO
### */

.rio {
	display: none;
}

@media (min-width: 1280px) {
	.rio {
		position: absolute;
		display: inline-block;
		width: 160px;
		height: 600px;
		text-align: center;
		background: repeating-linear-gradient(45deg, transparent 0 10px, #e8d5d114 10px 20px);
	}

	.rio::before {
		content: 'Advertisement';
		color: #999;
		text-transform: uppercase;
		font-size: .7em;
		display: block;
	}

	.rio.left {
		top: 75px;
		left: calc(50% - 560px);
	}

	.rio.right {
		top: 75px;
		right: calc(50% - 560px);
	}
}