/*
Copyright 19-Mar-2018 - Little Fire Digital Ltd
-----------------------------------------------------------------------
Reuse and modification by permission only
*/
/* 
	Created on : 19-Mar-2018, 13:27:55
	Author     : simon
	Compyright     : Little Fire Digital Ltd  19-Mar-2018
*/

#ssmap {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	display: block;
	width: 100%;
	height: 100%;
	box-shadow: 1px 1px 5px rgba(0,0,0,0.5);

	.cls-2 {
		fill: #cfcfcf;
		transition: fill 0.3s ease;

		&:hover,
		&.hover,
		&.active {
			cursor: pointer;
			fill: #b1b1b1;
		}
	}

}


#ss_continent_summits {
	width: 100%;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	padding: 0;

	& > li {
		position: absolute;
		text-indent: 0;
		display: flex;
		flex-direction: row;
		margin: -13px 0 0 -13px;
		line-height: 26px;
		white-space: nowrap;
		/*width: min-content;*/
		padding: 5px;
		background-color: rgba(255, 255, 255, 0.5);
		border-radius: 20px; /* Just needs to be more than 50% height for pill */
		list-style: none;
		transform: scale(1);
		transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;

		&:hover,
		&.hover,
		&.active {
			transform: scale(1.15);
			background-color: #fff;
			box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
			cursor: pointer;
		}


		.summit_marker {
			width: 20px;
			min-width: 20px;
			height: 20px;
			min-height: 20px;
			background-color: #f90;
			border: 3px solid #666;
			border-radius: 50%;
			margin-right: 3px;
			float: left;
		}

		.summit_name {
			font-size: 16px;
			white-space: break-spaces;
		}
	}
}


#ss_summit_overlays {
	display: flex;
	align-items: center;
	width: 30%;
	height: 100%;
	max-height: 100%;
	position: absolute;
	left: 20px;
	top: 0;
	padding: 20px;
	margin: 0;
	box-sizing: border-box;
	z-index: 10;
	/*opacity: 1;*/
	/*transition: opacity 0.3s ease;*/

	@media (max-width: 1200px ) {
		width: 50%;
	}

	&.shift-right {
		left: unset;
		right: 20px;
	}

	.summit_card{
		position: relative;
		display: block;
		max-width: 100%;
		width: 100%;
		z-index: 20;
		opacity: 0;
		left: 0;
		box-shadow: 0 0 25px 2px rgba( 0,0,0, 0.75 );
		transition: opacity 1s ease, left 1s ease;

		.ss_image_div {
			padding-bottom: 65%;

			@media (max-width: 1200px ) {
				padding-bottom: 45%;
			}
		}

		&.hidden {
			left: 100%;
			max-width: 0;
			opacity: 0;
		}

		&.selected {
			opacity: 1;
		}

		& > div{
			position: relative;
			padding: 10px;
			background: rgba( 255, 255, 255, 1);
			line-height: 20px;
		}
	}

	&.hidden {
		max-width: 0;
	}
}


#trips {
	padding: 10px;
}

#intro {
	padding: 20px 0;

	@media (max-width: 640px ) {
		padding: 20px 10px;
	}

	& > *:not(.nophone) {
		display: block;
		max-width: 1024px;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 1rem;
	}

	& > h2 {
		margin-top: 3rem;
	}

	.intro_inner {
		max-width: 768px;
		margin: 0 auto;

	}

	/* Map */
	.nophone {
		width: 100%;
		margin-bottom: 40px;
	}

}























#ss_continents {
	position: relative;
	padding: 0 0 50% 0;
	width: 100%;
	background-color: #fff;
	line-height: 0;
}

#ss_continents > * {
	position: absolute;
}

#continent_map_wrapper {
	width: 100%;
}

/*#ss_continents > ol {*/
/*	position: absolute;*/
/*	list-style: none;*/
/*	margin: 0;*/
/*	padding: 0;*/
/*	text-indent: 0;*/
/*}*/

#ss_continents > ol > li {
	z-index: 10;
}


#ss_continents > ol > li.align_right {
	right: 0;
}


#ss_continent_slices > li {
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;	
}



.close_x,
.close_x:visited {
	position: absolute;
	transition: opacity .5s ease;
	opacity: .3;
	width: 14px;
	height: 14px;
	right: 10px;
	top: 10px;
	z-index: 10;
	background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQwIDc5LjE2MDQ1MSwgMjAxNy8wNS8wNi0wMTowODoyMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkNFNEZDQUZDMjNCNzExRThCNUI5QTZGNDYyNzEwMTlBIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkNFNEZDQUZEMjNCNzExRThCNUI5QTZGNDYyNzEwMTlBIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDdBMkE5MDkyMzk1MTFFOEI1QjlBNkY0NjI3MTAxOUEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDdBMkE5MEEyMzk1MTFFOEI1QjlBNkY0NjI3MTAxOUEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4EQeKrAAAAbElEQVR42mJggABeIBZhIAxAanhgHBDjMBBfAWJRPJpEoWoOwzTDBP7j0YxTjRgezeiaxNBNxaaZoCZcphOlCZtmnJqYGIgD/0mx7QoRoY0zyAlGlSgJ0SFKjCa8anjJSHK8DGQkcrAmgAADAMLiOPkbzVO4AAAAAElFTkSuQmCC');
}

.close_x:hover {
	opacity: 1;
}

.summit_div .cboxElement {
	position: relative;
	float: right;
}

.summit_div .cboxElement +.summit_description {
	margin-right: 400px;
}

.ss_image_div {
	width: 100%;
	padding: 0 0 65% 0;
	background-size: cover;
	background-position: center center;
	margin-bottom: 10px;
}


#ss_summit_overlays .button_row {
	padding: 0;
}
#ss_summit_overlays .button,
#ss_summit_overlays .button.primary{
	width: 48%;
	padding: 0;
	margin: 0;
}

#ss_summit_overlays .small {
	line-height: 16px;
}

#ss_summit_overlays .button + .button {	
	margin-right: 4%;
}

.button.singleton {
	width: 100%;
}


#ss_summit_overlays > li > div h2 {
	padding-right: 20px;
	margin-top: 0;
	font-size: 24px;
}

#ss_summit_overlays > li > div img {
	width: 100%;
}

#ss_continent_slices > li {
	transition: opacity 1s ease;
	opacity: .2;
}

#ss_continent_slices > li.selected {
	opacity: .5;	
}



.ss_summit_africa {
	left: 57.5%;
	top: 52%;
}

.ss_summit_europe {
	left: 59%;
	top: 25%;
}

.ss_summit_australasia {
	left: 85%;
	top: 53%;
}

.ss_summit_america_south {
	left: 28%;
	top: 65%;
}

.ss_summit_america_north {
	left: 4%;
	top: 13%;
}

.ss_summit_asia {
	left: 70%;
	top: 33.5%;
}


.ss_summit_antarctica {
	left: 28.5%;
	top: 93%;
}

/* Volcanic overwrites */

.volcanic .ss_summit_america_south {
	left: 30%;
	top: 66%;
}

.volcanic .ss_summit_america_north {
	left: 20.5%;
	top: 39%;
}

.volcanic .ss_summit_antarctica {
	left: 14.5%;
	top: 95%;
}

.volcanic .ss_summit_australasia {
	left: 86%;
	top: 53%;
}

.volcanic .ss_summit_asia {
	left: 62%;
	top: 29.5%;
}

@media screen and (max-width: 660px) {

	.summit_div .cboxElement {
		position: relative;
		float: none;
	}
	
	.summit_div .cboxElement img {
		min-width: 100%;
		max-width: 100%;
		height: auto;
	}

	.summit_div .cboxElement +.summit_description {
		top: 20px;
		margin-right: 0;
	}

}