/* ---------- Recipe Map ---------- */

.interactive-recipe-map {
	background-image: url('/assets/frontend/img/map-bg.svg');
	background-size: 70%;
	background-repeat: no-repeat;
	background-position: 80% 130px;
	max-width: 95%;
	font-family: 'Montserrat', sans-serif;
	-webkit-font-smoothing: antialiased;
	color: #9B7C53;
}

.interactive-recipe-map .primary-col {
	width: 60%;
}

.interactive-recipe-map .secondary-col {
	width: 40%;
}

.interactive-recipe-map h1, 
.interactive-recipe-map h2, 
.interactive-recipe-map h3 {
	font-family: 'Montserrat', sans-serif;
}

.interactive-recipe-map h1 {
	-moz-osx-font-smoothing: grayscale;
	text-transform: uppercase;
	color: #9B7C53;
	font-size: 28px;
	font-weight: bold;
}

.interactive-recipe-map h1 span {
	color: #ffffff;
}

.interactive-recipe-map p.lead {
	margin-bottom: 3rem;
	font-size: 22px;
	font-weight: bold;
	line-height: 1.5rem;
}

.interactive-recipe-map p.lead span {
	color: #D34709;
}

.page-content--yellow {
	background-color: #F5C354;
}

.modal--transparent {
	background-color: rgba(255,255,255,0.90);
	outline: 3px solid rgba(0,0,0,0.10);
}

.recipe-map-modal {
	position: relative;
	padding: 1rem;
}

.recipe-map-modal .v-modal-close {
	background-color: #4BCFCF;
	position: absolute;
	top: 0;
	right: 0;
	width: 40px;
	height: 40px;
	display: flex;
	border-radius: 50%;
	color: #ffffff;
	transform: translate(35%, -35%);
	border: 2px solid #ffffff;
	text-align: center;
	box-shadow: 0 2px 4px rgba(0,0,0,0.15);
	cursor: pointer;
	transition: .2s linear;
}

.recipe-map-modal .v-modal-close:hover {
	box-shadow: 0 2px 4px rgba(0,0,0,0.25);
}

.recipe-map-modal .v-modal-close .fa {
	margin: auto;
}

.recipe-map-modal .modal-header .half-right {
	text-align: right;
}


.recipe-map-modal .recipe-card {
	padding:  1rem 1rem 0 1rem;
}

.recipe-map-modal .recipe-card .recipe-image {
	border-radius: 20px;
}

.recipe-map-modal .recipe-card .recipe-name {
	font-size: 18px;
	line-height: 1.2rem;
	font-weight: bold;
}

.recipe-map-modal .recipe-card .recipe-name a {
	font-weight: 500;
	color: #9B7C53;
}

.interactive-recipe-map svg circle {
	fill: #0A3B6A !important;
	cursor: pointer;
	transition: .25s linear;
}

.interactive-country-map svg circle:hover {
	fill: #fff !important;
	transform: translateY(-1px);
	stroke: #0A3B6A;
	stroke-width: 2px;
	cursor: pointer;
}

.recipe-map-modal .recipe-card .recipe-excerpt {
	color: #A09C99;
}

.interactive-recipe-map .country-name-trigger {
	display: block;
	color: #974514;
	font-size: 16px;
	text-transform: uppercase;
	font-weight: bold;
}

.interactive-recipe-map .country-name-trigger:hover {
	color: #ffffff;
}

.target-country strong {
	display: inline-block;
	background-color: #fff;
	padding: .25rem 1rem;
	border-radius: 20px;
	color: #974514;
}

.vue-overlay {
	background-color: rgba(0,0,0,0.75);
	display: -ms-flexbox;
  	display: flex;
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
	padding: 2rem 0;
	overflow-y: scroll;
	z-index: 2247483639;
}

.vue-modal {
	background-color: #fff;
	margin: auto;
	width: 800px;
	max-width: 90%;
}

.animated-loader {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-100%);
	color: #fff;
}

[v-cloak] {
  display:none;
}

.country-text-list {
	justify-content: center;
}

@media screen and (max-width: 1024px){
	.interactive-recipe-map .primary-col {
		width: 60%;
	}

	.interactive-recipe-map .secondary-col {
		width: 40%;
	}

	.interactive-recipe-map .country-name-trigger {
		font-size: 14px;
	}
}

@media screen and (max-width: 800px){
	.country-text-list {
		text-align: center;
	}

	.country-text-list .half {
		width: 100%;
	}

	.interactive-recipe-map .country-name-trigger {
		font-size: 16px;
	}
}

@media screen and (max-width: 767px){
	.interactive-recipe-map {
		max-width: 100%;
	}

	.interactive-recipe-map .primary-col,
	.interactive-recipe-map .secondary-col {
		width: 100%;
	}

	.country-text-list .half {
		text-align: center;
	}

	.vue-overlay {
		padding: 4rem 0 3rem;
	}

	.recipe-map-modal .flex {
		flex-direction: row;
	}

	.recipe-map-modal .v-modal-close {
		transform: translate(25%, -25%);
	}

	.recipe-map-modal .recipe-card {
		width: 50%;
	}
}

@media screen and (max-width: 480px){
	.interactive-recipe-map h1 {
		line-height: 1.8rem;
	}

	.interactive-recipe-map p.lead {
		margin-bottom: 2rem;
		line-height: 1.8rem;
	}

	.interactive-recipe-map .primary-col {
		text-align: center;
	}

	.recipe-map-modal .recipe-card {
		width: 100%;
	}

	.recipe-map-modal .modal-header {
		flex-direction: column;
		padding-bottom: 1rem;
	}

	.recipe-map-modal .modal-header .half {
		width: 100%;
		text-align: center;
	}

	.recipe-map-modal .modal-footer {
		text-align: center;
	}
}

@media only screen and (max-width: 320px) {
	.interactive-recipe-map h1 {
		font-size: 24px;
	}

	.interactive-recipe-map p.lead {
		font-size: 18px;
	}
}