@charset "utf-8";

@font-face {
	font-family: 'cera_ocean';
	src: url('../fonts/ceraocean-semibold-webfont.woff2') format('woff2'),
		url('../fonts/ceraocean-semibold-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

/* ====== DEFAULT ====== */
a,
button {
	text-decoration: none;
	transition: all 0.2s linear;
}

a:hover,
button:hover {
	text-decoration: none;
	transition: all 0.2s linear;
}

a:focus {
	outline: 0;
}

a img {
	border: none;
}

body {
	width: 100%;
	height: 100%;
	font-family: 'Poppins', sans-serif;
	font-size: 100%;
	font-weight: 400;
	margin: 0;
}

.cera-ocean {
	font-family: 'cera_ocean', sans-serif;
}

.max-w {
	width: 100%;
	max-width: 1920px;
	margin-left: auto;
	margin-right: auto;
}

.topo {
	background: url(../images/bg-topo.jpg) no-repeat center top;
	background-size: cover;
	padding: 90px 0 100px;
	margin-bottom: 80px;
	text-align: center;
}

.topo:after {
	content: " ";
	display: block;
	position: absolute;
	z-index: 20;
	left: 0;
	bottom: 0;
	right: 0;
	height: 82px;
	background: url(../images/mask-topo.png) no-repeat center top;
}

.topo .logos img {
	margin: 0 auto 40px;
}

.topo h1 {
	font-size: 36px;
	color: #DFFF03;
	line-height: 46px;
	margin-bottom: 15px
}

.topo p {
	font-size: 18px;
	font-weight: 500;
	color: #FFF;
	line-height: 32px;
}

.rota {
	margin-bottom: 80px;
}

.rota .title,
.cronograma .title,
.curiosidades .title,
.conteudos .title,
.instagram .title {
	margin-bottom: 40px;
}

.rota h2,
.cronograma h2 {
	font-size: 40px;
	color: #000;
	line-height: 50px;
	margin-bottom: 15px
}

.rota p,
.curiosidades .title p,
.conteudos .title p,
.instagram p {
	font-size: 18px;
	font-weight: 500;
	color: #003B48;
	line-height: 32px;
}

.rota img {
	margin: 0 auto 40px;
}

.cronograma {
	background: url(../images/bg-cronograma.jpg) no-repeat center top;
	background-size: cover;
	padding: 55px 0 70px;
	text-align: center;
}

.cronograma h3 {
	font-size: 30px;
	font-weight: 700;
	color: #003B48;
	margin-bottom: 40px;
}

.cronograma p {
	font-size: 26px;
	color: #0C4998;
	margin-bottom: 25px;
}

.cronograma p strong {
	font-size: 18px;
	font-weight: 700;
	color: #000;
	display: block;
}

.cronograma img {
	margin: 30px auto 0;
}

.curiosidades {
	background: url(../images/bg-curiosidades.jpg) no-repeat center top;
	padding-top: 90px;
}

.curiosidades h2,
.conteudos h2,
.instagram h2 {
	font-size: 48px;
	color: #003B48;
	line-height: 60px;
	margin-bottom: 15px
}

#slideCuriosidades .slick-list {
	padding: 10px 0 30px;
}

#slideCuriosidades .slick-track {
	display: flex;
}

#slideCuriosidades .item {
	height: auto;
	background: #FFF;
	border-radius: 16px;
	box-shadow: 0 10px 20px 0 rgba(93, 93, 93, 0.07);
	margin: 0 10px;
	overflow: hidden;
}

#slideCuriosidades .lkImg{
    position: relative;
    height: 0;
    padding-bottom: 30%;
}

#slideCuriosidades .lkImg img {
	position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#slideCuriosidades .resumo {
	padding: 20px;
}

#slideCuriosidades h3 {
	font-size: 24px;
	font-weight: 600;
	color: #003B48;
	margin-bottom: 5px;
}

#slideCuriosidades h3 a {
	text-decoration: none;
	color: #003B48;
}

#slideCuriosidades h3 a:hover {
	color: #0C4998;
}

#slideCuriosidades p {
	font-size: 16px;
	color: #838383;
	line-height: 28px;
}

#slideCuriosidades .slick-dots {
	text-align: center;
	margin-top: 20px;
}

#slideCuriosidades .slick-dots li {
	display: inline-block;
	margin: 0 6px;
	width: 14px;
	height: 14px;
}

#slideCuriosidades .slick-dots li button {
	display: block;
	width: 14px;
	height: 14px;
	background: #003B48;
	border: none;
	outline: none;
	cursor: pointer;
	text-indent: -5000em;
	border-radius: 50%;
	padding: 0;
}

#slideCuriosidades .slick-dots li.slick-active button {
	background: #DFFF03;
}

.conteudos {
	padding-top: 130px;
}

.conteudos .baseLista:before {
	content: " ";
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
	right: 0;
	top: 55px;
	z-index: 0;
	background: #fb542e;
}

.conteudos.tv .baseLista:before {
	background: #003C48;
}

.baseLista {
	padding-bottom: 45px;
}

.baseLista ul li {
	background: #FFF;
	overflow: hidden;
	width: 100%;
	max-width: 340px;
	margin: 0 auto 30px;
	padding-bottom: 70px;
	border-radius: 15px;
	box-shadow: 0 25px 50px 0 rgba(93, 93, 93, 0.07);
}

.baseLista ul li .linkImg{
    position: relative;
    height: 0;
    padding-bottom: 100%;
    width: 100%;
    display: block;
}

.baseLista ul li .linkImg img{
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.baseLista ul li .data {
	font-size: 16px;
	font-weight: 300;
	color: #388FFF;
	margin: 30px 25px 10px;
}

.baseLista ul li h3 {
	font-size: 20px;
	color: #003B48;
	line-height: 30px;
	margin: 0 25px;
}

.baseLista ul li h3 a {
	text-decoration: none;
	color: #003B48;
}

.baseLista ul li h3 a:hover {
	text-decoration: none;
	color: #0C4998;
}

.baseLista ul li a.lkMore {
	left: 25px;
	bottom: 30px;
}

.baseLista ul li a.lkMore:hover {
	left: 35px;
}

a.lkLoad,
.site-button a.lkLoad {
	width: 56px;
    min-width: 56px;
	height: 56px;
	margin: 0 auto;
	overflow: hidden;
    background-image: url('../images/icon-mais-conteudos.png');
}

.tv .site-button a.lkLoad {
    background-image: url('../images/icon-mais-conteudos-tv.png');
}

a.lkLoad:hover {
	opacity: 0.8;
}

.instagram {
	padding-top: 130px;
}

.instagram ul {
	margin-bottom: 40px;
}

.instagram ul li {
	width: 46%;
    transition: opacity 0.3s, visibility 0.3s;
    padding: 10px;
}

.instagram ul li.hidden{
    height: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
}

.instagram ul li img {
	border-radius: 15px;
	box-shadow: 0 25px 50px 0 rgba(93, 93, 93, 0.07);
    object-fit: cover;
}

#the-ocean-race-2023 footer {
	padding: 130px 0 120px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(181, 204, 220, 0.2) 48.91%, rgba(255, 255, 255, 0.2) 100%);
}

#the-ocean-race-2023 footer .container {
	background: #003C48;
	padding-top: 35px;
	padding-bottom: 35px;
}

#the-ocean-race-2023 footer .logos,
#the-ocean-race-2023 footer .social {
	text-align: center;
}

#the-ocean-race-2023 footer .logos img {
	filter: brightness(0) invert(1);
	margin-bottom: 35px;
}

#the-ocean-race-2023 footer .social a {
	margin: 0 10px;
}

#the-ocean-race-2023 footer .social a:hover {
	opacity: 0.7;
}

@media only screen and (min-width : 576px) {
	.topo h1 {
		font-size: 40px;
		line-height: 50px;
	}

	#slideCuriosidades .item {
		margin: 0 20px;
	}
}

@media only screen and (min-width : 768px) {
	.topo {
		text-align: left;
		padding: 120px 0 0;
		min-height: 739px;
	}

	.topo .logos img {
		margin: 0 0 40px;
	}

	.topo .logos img:first-child {
		margin-right: 40px;
	}

	.topo h1 {
		font-size: 40px;
		line-height: 50px;
	}

	#slideCuriosidades .resumo {
		padding: 10px 20px;
		width: 60%;
	}

	#slideCuriosidades .lkImg {
		width: 40%;
	}

	#slideCuriosidades .lkImg img {
		height: 100%;
		object-fit: cover
	}

	.baseLista ul li {
		width: 45%;
		margin: 0 15px 30px;
	}

	.instagram ul li {
		width: 30%;
	}

	#the-ocean-race-2023 footer .logos {
		text-align: left;
	}
}

@media only screen and (min-width : 992px) {
	.topo {
		padding-top: 140px;
	}

	.topo .logos img {
		margin-bottom: 60px;
	}

	.topo .logos img:first-child {
		margin-right: 50px;
	}

	.topo h1 {
		font-size: 46px;
		line-height: 54px;
	}

	.cronograma {
		text-align: left;
	}

	.cronograma img {
		margin: 0;
		float: right;
	}

	#slideCuriosidades {
		padding: 0 50px;
	}

	#slideCuriosidades .slick-prev {
		display: block;
		position: absolute;
		border: none;
		border-radius: 50%;
		outline: none;
		width: 54px;
		height: 54px;
		cursor: pointer;
		left: 0;
		top: 50%;
		margin-top: -27px;
		z-index: 30;
		background: url(../images/arrow-slide.png) no-repeat 0 0;
		background-color: #DFFF03;
		text-indent: -5000em;
	}

	#slideCuriosidades .slick-next {
		display: block;
		position: absolute;
		border: none;
		border-radius: 50%;
		outline: none;
		width: 54px;
		height: 54px;
		cursor: pointer;
		right: 0;
		top: 50%;
		margin-top: -28.5px;
		z-index: 30;
		background: url(../images/arrow-slide.png) no-repeat -54px 0;
		background-color: #DFFF03;
		text-indent: -5000em;
	}

	#slideCuriosidades .slick-prev:hover,
	#slideCuriosidades .slick-next:hover {
		background-color: #388FFF;
	}

	#slideCuriosidades .resumo {
		padding: 25px 20px;
		width: 55%;
	}

	#slideCuriosidades .lkImg {
		width: 45%;
	}

	#slideCuriosidades h3 {
		font-size: 28px;
	}

	.baseLista ul li {
		width: 30%;
	}

	.instagram ul li {
		width: 22%;
	}

	#the-ocean-race-2023 footer .container {
		padding-left: 30px;
		padding-right: 30px;
	}

	#the-ocean-race-2023 footer .logos img {
		width: auto;
		max-height: 82px;
		margin-bottom: 0;
	}

	#the-ocean-race-2023 footer .social {
		text-align: right;
	}

	#the-ocean-race-2023 footer .social a {
		margin: 0 0 0 20px;
	}
}

@media only screen and (min-width : 1200px) {
	#slideCuriosidades .slick-prev {
		left: -20px;
	}

	#slideCuriosidades .slick-next {
		right: -20px;
	}

	#slideCuriosidades {
		padding: 0 30px;
	}

	.conteudos {
		background: url(../images/bg-conteudos.png) no-repeat right 50px;
	}

	.conteudos.tv {
		background: url(../images/bg-conteudos-tv.png) no-repeat -290px 70px;
	}

	.conteudos .baseLista:after {
		content: " ";
		display: block;
		width: 172px;
		height: 171px;
		position: absolute;
		bottom: -171px;
		right: 0;
		z-index: 0;
		background: url(../images/element-after-conteudos.png) no-repeat 0 0;
	}

	.conteudos.tv .baseLista:after {
		content: " ";
		display: block;
		width: 239px;
		height: 234px;
		position: absolute;
		bottom: -234px;
		left: -120px;
		z-index: 0;
		background: url(../images/element-after-conteudos-tv.png) no-repeat 0 0;
	}

	.instagram ul li {
		width: 15%;
	}

	#the-ocean-race-2023 footer .container {
		padding-left: 40px;
		padding-right: 40px;
	}
}

@media only screen and (min-width : 1300px) {
	#slideCuriosidades .slick-prev {
		left: -70px;
	}

	#slideCuriosidades .slick-next {
		right: -70px;
	}

	#slideCuriosidades {
		padding: 0;
	}

	.conteudos.tv {
		background-position: -220px 70px;
	}

	.conteudos.tv .baseLista:after {
		left: -70px;
	}
}

@media only screen and (min-width : 1360px) {
	

	.conteudos.tv {
		background-position: -170px 70px;
	}

	.conteudos.tv .baseLista:after {
		left: -40px;
	}
}

@media only screen and (min-width : 1440px) {
	.conteudos.tv {
		background-position: -120px 70px;
	}

	.conteudos.tv .baseLista:after {
		left: 0;
	}
}

@media only screen and (min-width : 1600px) {
	.conteudos.tv {
		background-position: -40px 70px;
	}
}

@media only screen and (min-width : 1700px) {
	.conteudos.tv {
		background-position: 0 70px;
	}
}

@media only screen and (min-width : 1870px) {
	.baseLista ul li {
		width: 340px;
	}
}