:root {
	--primary: #282828;
	--brand: #e9aa00;
	--white: #ffffff;

	--minho: #138b73;
	--douro: #2d6cb5;
	--porto: #55b1c5;
	--centro: #776da4;
	--oesteRibatejo: #c71532;
	--grandeLisboa: #5ca9b3;
	--alentejo: #f8b640;
	--algarve: #00aeef;
	--madeira: #4aba76;
	--viagensLiterarias: #14bccc;
}

.wbmkt-roteiro {
	background-color: #FFF;
	padding-top: 16px;

	font-family: 'Roboto', Helvetica, sans-serif;
	color: var(--primary);
}

@media screen and (min-width: 320px) {
	.wbmkt-roteiro {
		font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (2600 - 320)));
		/* if we want the our font size in a range where 16px is the minimum size at the smallest viewport width of 300px and where 26px is the maximum size at the largest viewport width of 1600px, then our equation looks like this */
		line-height: calc(18px + (22 - 18) * ((100vw - 320px) / (2600 - 320)));

		margin-bottom: 16px;
		position: relative;
	}
	.wbmkt-roteiro:before {
		content: "";
		position: absolute;
		top:0;
		right: 0;
		bottom: 0;
		left: 0;

		background-attachment: fixed;
		background-image: url('bgDots.png');
		background-position: center 20px;
		background-repeat: no-repeat;
		background-size: contain;
		display: inline-block;
		max-width: 1400px;
		margin:0 auto;
		width: 100%;

	}
	.wbmkt-roteiro h1 {
		font-size: calc(38px + (46 - 38) * ((100vw - 320px) / (2600 - 320)));
		line-height: calc(42px + (52 - 42) * ((100vw - 320px) / (2600 - 320)));
	}
	.wbmkt-roteiro h2 {
		font-size: calc(24px + (36 - 24) * ((100vw - 320px) / (2600 - 320)));
		line-height: calc(30px + (40 - 30) * ((100vw - 320px) / (2600 - 320)));
	}
	.wbmkt-roteiro h3 {
		font-size: calc(22px + (28 - 22) * ((100vw - 320px) / (2600 - 320)));
		line-height: calc(28px + (34 - 28) * ((100vw - 320px) / (2600 - 320)));
	}
	.wbmkt-roteiro .local {
		font-size: calc(18px + (20 - 18) * ((100vw - 320px) / (2600 - 320)));
		line-height: calc(22px + (24 - 22) * ((100vw - 320px) / (2600 - 320)));
	}
	.wbmkt-roteiro .CTA {
		font-size: calc(14px + (18 - 14) * ((100vw - 320px) / (2600 - 320)));
		line-height: calc(20px + (24 - 20) * ((100vw - 320px) / (2600 - 320)));
	}
}

.wbmkt-roteiro .image {
	overflow: hidden;
	clip-path: polygon(10% 0, 100% 10%, 90% 100%, 0 90%);
}
.wbmkt-roteiro img {
	display: block;
	max-width: 100%;
	width: 100%;
	height: auto;
	-webkit-transform: scale(1,05);
	-ms-transform: scale(1,05);
	transform: scale(1,05);
	transition: all .2s linear;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform: translateZ(0);
	-ms-transform: translateZ(0);
	transform: translateZ(0);
}
.wbmkt-roteiro strong {
	font-weight: 700;
}
.wbmkt-roteiro .wbmkt-row {
	display:flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 8px 16px;
	align-items: flex-start;
	justify-content: flex-start;
	align-content: flex-start;
	max-width: 1034px;
	padding: 0 16px 32px;
	margin:0 auto;
}
.wbmkt-roteiro .wbmkt-row [class*="wbmkt-blk"] .wbmkt-row {
	padding-top: 0;
}
.wbmkt-roteiro [class*="wbmkt-blk"] {
	overflow: hidden;
	position: relative;
}
.wbmkt-roteiro .wbmkt-blk,
.wbmkt-roteiro header {
	width:100%;
	display: block;
}
.wbmkt-roteiro h1,
.wbmkt-roteiro h2,
.wbmkt-roteiro h3,
.wbmkt-roteiro h4 {
	margin: .67em 0;

	font-weight: 700;
	text-transform: uppercase;
}
.wbmkt-roteiro h3.title {
	margin: 0;
	padding: 8px;
	
	color: var(--white);
	text-align: center;
}

.wbmkt-roteiro.minho h1,
.wbmkt-roteiro.minho h2,
.wbmkt-roteiro.minho h3:not(.title),
.wbmkt-roteiro.minho h4,
.wbmkt-roteiro.minho a,
.wbmkt-roteiro.minho .local {
	color: var(--minho);
}
.wbmkt-roteiro.minho h3.title {
	background-color: var(--minho);
	color: var(--white);
}

.wbmkt-roteiro.douro h1,
.wbmkt-roteiro.douro h2,
.wbmkt-roteiro.douro h3:not(.title),
.wbmkt-roteiro.douro h4,
.wbmkt-roteiro.douro a,
.wbmkt-roteiro.douro .local {
	color: var(--douro);
}
.wbmkt-roteiro.douro h3.title {
	background-color: var(--douro);
	color: var(--white);
}

.wbmkt-roteiro.porto h1,
.wbmkt-roteiro.porto h2,
.wbmkt-roteiro.porto h3:not(.title),
.wbmkt-roteiro.porto h4,
.wbmkt-roteiro.porto a,
.wbmkt-roteiro.porto .local {
	color: var(--porto);
}
.wbmkt-roteiro.porto h3.title {
	background-color: var(--porto);
	color: var(--white);
}

.wbmkt-roteiro.centro h1,
.wbmkt-roteiro.centro h2,
.wbmkt-roteiro.centro h3:not(.title),
.wbmkt-roteiro.centro h4,
.wbmkt-roteiro.centro a,
.wbmkt-roteiro.centro .local {
	color: var(--centro);
}
.wbmkt-roteiro.centro h3.title {
	background-color: var(--centro);
	color: var(--white);
}

.wbmkt-roteiro.oesteRibatejo h1,
.wbmkt-roteiro.oesteRibatejo h2,
.wbmkt-roteiro.oesteRibatejo h3:not(.title),
.wbmkt-roteiro.oesteRibatejo h4,
.wbmkt-roteiro.oesteRibatejo a,
.wbmkt-roteiro.oesteRibatejo .local {
	color: var(--oesteRibatejo);
}
.wbmkt-roteiro.oesteRibatejo h3.title {
	background-color: var(--oesteRibatejo);
	color: var(--white);
}

.wbmkt-roteiro.grandeLisboa h1,
.wbmkt-roteiro.grandeLisboa h2,
.wbmkt-roteiro.grandeLisboa h3:not(.title),
.wbmkt-roteiro.grandeLisboa h4,
.wbmkt-roteiro.grandeLisboa a,
.wbmkt-roteiro.grandeLisboa .local {
	color: var(--grandeLisboa);
}
.wbmkt-roteiro.grandeLisboa h3.title {
	background-color: var(--grandeLisboa);
	color: var(--white);
}

.wbmkt-roteiro.alentejo h1,
.wbmkt-roteiro.alentejo h2,
.wbmkt-roteiro.alentejo h3:not(.title),
.wbmkt-roteiro.alentejo h4,
.wbmkt-roteiro.alentejo a,
.wbmkt-roteiro.alentejo .local {
	color: var(--alentejo);
}
.wbmkt-roteiro.alentejo h3.title {
	background-color: var(--alentejo);
	color: var(--white);
}

.wbmkt-roteiro.algarve h1,
.wbmkt-roteiro.algarve h2,
.wbmkt-roteiro.algarve h3:not(.title),
.wbmkt-roteiro.algarve h4,
.wbmkt-roteiro.algarve a,
.wbmkt-roteiro.algarve .local {
	color: var(--algarve);
}
.wbmkt-roteiro.algarve h3.title {
	background-color: var(--algarve);
	color: var(--white);
}

.wbmkt-roteiro.madeira h1,
.wbmkt-roteiro.madeira h2,
.wbmkt-roteiro.madeira h3:not(.title),
.wbmkt-roteiro.madeira h4,
.wbmkt-roteiro.madeira a,
.wbmkt-roteiro.madeira .local {
	color: var(--madeira);
}
.wbmkt-roteiro.madeira h3.title {
	background-color: var(--madeira);
	color: var(--white);
}

.wbmkt-roteiro.viagensLiterarias h1,
.wbmkt-roteiro.viagensLiterarias h2,
.wbmkt-roteiro.viagensLiterarias h3:not(.title),
.wbmkt-roteiro.viagensLiterarias h4,
.wbmkt-roteiro.viagensLiterarias a,
.wbmkt-roteiro.viagensLiterarias .local {
	color: var(--viagensLiterarias);
}
.wbmkt-roteiro.viagensLiterarias h3.title {
	background-color: var(--viagensLiterarias);
	color: var(--white);
}

.wbmkt-roteiro h4 {
	font-size: 20px;
	line-height: 24px;
}
.wbmkt-roteiro h1 small,
.wbmkt-roteiro h2 small {
	display: block;
}
.wbmkt-roteiro p {
	margin-top: 0;
}
.wbmkt-roteiro p:only-child {
	margin: 0;
}
.wbmkt-roteiro p:not(:last-child) {
	margin-bottom: 16px;
}

.wbmkt-roteiro [class*="wbmkt-blk"] ol {
	font-weight: 700;
}
.wbmkt-roteiro [class*="wbmkt-blk"]:not(.wbmkt-blk) {
	-webkit-transition: width 0.5s, -webkit-transform 0.2s;
	transition: width 0.5s, transform 0.2s;
}
@media only screen and (max-width:320px) {
	.wbmkt-roteiro .wbmkt-blk2,
	.wbmkt-roteiro .wbmkt-blk2.bigger,
	.wbmkt-roteiro .wbmkt-blk3,
	.wbmkt-roteiro .wbmkt-blk4 {
		width: 100%;
	}
	.wbmkt-roteiro .wbmkt-blk2 .wbmkt-blk2 {
		width: 100%!important;
	}
	.wbmkt-roteiro .desktop {
		display: none;
	}
}
@media only  screen and (min-width:320px) and (max-width:420px) {
	.wbmkt-roteiro .wbmkt-blk2 {
		width: 100%;
	}
	.wbmkt-roteiro .wbmkt-blk2 .wbmkt-blk2 {
		width: 100%!important;
	}
	.wbmkt-roteiro .wbmkt-blk3,
	.wbmkt-roteiro .wbmkt-blk4 {
		width: calc((100% / 2) - 8px);
	}
	.wbmkt-roteiro .desktop {
		display: none;
	}
}
@media only screen and (min-width:420px) and (max-width:767px) {
	.wbmkt-roteiro .wbmkt-blk2
	.wbmkt-roteiro .wbmkt-blk3,
	.wbmkt-roteiro .wbmkt-blk4 {
		width: calc((100% / 2) - 8px);
		margin-bottom: 16px;
	}
	.wbmkt-roteiro .desktop {
		display: none;
	}
}
@media only screen and (max-width:600px) {
	.wbmkt-roteiro .wbmkt-blk2.bigger,
	.wbmkt-roteiro .wbmkt-blk2.smaller {
		width: 100%;
	}
	.wbmkt-roteiro .wbmkt-blk2.smaller > img {
		max-width: 200px;
	}
}
@media only screen and (min-width:600px) {
	.wbmkt-roteiro .wbmkt-blk2.bigger {
		width: calc(67% - 10px);
	}
	.wbmkt-roteiro .wbmkt-blk2.smaller {
		width: calc(33% - 22px);
	}
}
@media only screen and (max-width:767px) {
	.wbmkt-roteiro .wbmkt-row {
		padding: 0 8px 16px ;
	}
	.wbmkt-roteiro .wbmkt-blk2 .wbmkt-blk2  {
		width: calc((100% / 2) - 8px);
	}
}
@media only screen and (min-width:767px){
	.wbmkt-roteiro .wbmkt-row {
		padding: 0 16px 16px;
	}
	.wbmkt-roteiro .wbmkt-blk h2 {
		text-align: center;
	}
	.wbmkt-roteiro .wbmkt-blk2 {
		width: calc(50% - 8px);
	}
	.wbmkt-roteiro .mobile {
		display: none;
	}
	.wbmkt-roteiro .wbmkt-blk3 {
		width: calc((100% / 3) - 12px);
	}
	.wbmkt-roteiro .wbmkt-blk4 {
		width: calc((100% / 4) - 12px);
	}
}

/* CTA Icon Drop */
@-webkit-keyframes hvr-icon-righty {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 0;
		-webkit-transform: translateX(-100%);
		transform: translateX(-100%);
	}
	51%,
	100% {
		opacity: 1;
	}
}
@-moz-keyframes hvr-icon-righty {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 0;
		-webkit-transform: translateX(-100%);
		transform: translateX(-100%);
	}
	51%,
	100% {
		opacity: 1;
	}
}
@-o-keyframes hvr-icon-righty {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 0;
		-webkit-transform: translateX(-100%);
		transform: translateX(-100%);
	}
	51%,
	100% {
		opacity: 1;
	}
}
@keyframes hvr-icon-righty {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 0;
		-webkit-transform: translateX(-100%);
		transform: translateX(-100%);
	}
	51%,
	100% {
		opacity: 1;
	}
}