// Subpage styles

// ===================================
// HERO
// ===================================
#subpage-head {
	color: $white;
	height: 60vh;
	text-align: center;

	> .row, > .row > .container {
		height: 100%;
	}
	.align-v {
		margin-top: 32px;
	}
	h1 {
		text-shadow: 0 0px 12px rgba(0,0,0,0.4);
	}
	p {
		text-shadow: 0 0px 8px rgba(0,0,0,0.5);
	}
}


// ===================================
// BODY
// ===================================
.main-section {

	img {
		max-width: 100%;
	}
	h1, h2 {
		font-weight: $light;
	}
	h1 {
		color: $red;

		&:after {
			content: '';
			display: block;
			background-color: $gray-200;
			margin: 16px auto 24px;
			width: 120px; height: 1px;
		}
	}
	h4 {
		color: $red;
		font-size: 16px;
		line-height: 1.6;
		margin-bottom: 16px;
	}
	ul {

		li {

			+ li {
				margin-top: 4px;
			}
		}
	}
	.btn {
		margin-top: 16px;
	}
}


// ===================================
// BRAND
// ===================================

// OUR STORY
#subpage-head.story-head {
	background-image: url(../img/home/our-founders-bg-mobile-new.jpg);
	background-position: center right;

	img {
		margin-bottom: -40vw;
		max-width: 95%;
	}
}
#story-intro, #story-products, #story-rewards, #story-quote, #story-team {
	text-align: center;
}
#story-rewards {
	background-color: $white;
	box-shadow: 0 0 16px rgba(#000, 0.07);
	border-radius: 4px 4px 0 0;
	padding: 32px 24px;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
}
#story-products {
	color: $white;
}
#story-quote {
	box-shadow: 0 0 12px rgba(#000, 0.2);
	border-radius: 0 0 4px 4px;
	padding: 32px;
	height: 300px;

	h1 {
		color: $white;
		font-weight: $light;
		margin: 0;
		position: relative;
		top: 50%;
		transform: translateY(-50%);
		text-shadow: 0 0 12px rgba(#000, 0.4);

		&:after {
			display: none;
		}
	}
}
#story-testimonials {

	.placeholder {
		background-color: $gray-200;
		border-radius: 20vw;
		margin: 0 auto 32px;
		width: 40vw; height: 40vw;
	}
	p {
		text-align: justify;

		&:last-of-type {
			margin-bottom: 0;
		}
	}
}


// OUR TEAM
.team-founders {

	.founders-img {
		border-radius: 4px;
		height: 300px;
		margin-bottom: 24px;
	}
	.founder-entry {

		h2 {
			color: $red;
			text-align: center;
		}
		h4 {
			color: $grayBlue;
			font-size: 16px;
			font-weight: $light;
			text-align: center;
		}
		+ .founder-entry {
			border-top: 1px solid $gray-200;
			margin-top: 32px;
			padding-top: 24px;
		}
	}
}
.team-list {
	margin-top: 48px;
	padding-left: 4px;
	padding-right: 4px;

	> div {
		padding-left: 4px;
		padding-right: 4px;
	}
}
.team-tile {
	margin-bottom: 24px;
	text-align: center;

	.team-img, .placeholder {
		background-position: top center;
		border-radius: 4px;
		height: 45vw;
	}
	.placeholder {
		background-color: $gray-200;

		h4 {
			color: $gray-400;
			font-weight: $regular;
			position: relative;
			top: 50%;
			transform: translateY(-50%);
		}
	}
	h2 {
		color: $red;
		font-size: 18px;
		margin-top: 8px;
		margin-bottom: 4px;
	}
	h4 {
		color: $grayBlue;
		font-size: 14px;
		font-weight: $light;
	}
}


// MISSION & VISION
#core-value-circles {
	margin-bottom: 64px;

	.core-value-circle {
		background-color: $red;
		border-radius: 50%;
		color: $white;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin: 12px;
		padding: 0 32px;
		text-align: center;
		width: 80vw; height: 80vw;

		h3, p {
			margin: 0;
		}
		h3 {
			font-family: $font-family-condensed;
			letter-spacing: 0.1em;
			text-transform: uppercase;
		}
		&:nth-of-type(2) {
			background-color: $gold;
		}
		&:nth-of-type(3) {
			background-color: $grayBlue;
		}
		&:nth-of-type(4) {
			background-color: $gold;
		}
	}
}
.mission-vision-quote {

	p {
		color: $grayBlue;
		font-size: 24px;
		font-weight: $bold;
	}
}


// INTERNATIONAL
#international-office-grid {

	.office-tile {
		margin-bottom: 32px;

		.office-img, .placeholder {
			margin-bottom: 16px;
			height: 300px;
		}
		.placeholder {
			background-color: $gray-200;
			text-align: center;

			h4 {
				color: $gray-400;
				font-weight: $regular;
				position: relative;
				top: 50%;
				transform: translateY(-50%);
			}
		}
		h3 {
			color: $red;
			text-align: center;
		}
		ul {
			color: $grayBlue;
		}
	}
}
#shipping-countries {

	h3 {
		color: $grayBlue;
		font-weight: $light;
		text-align: center;

		&:after {
			content: '';
			display: block;
			background-color: #e9ecef;
			margin: 16px auto 24px;
			width: 120px;
			height: 1px;
		}
	}
	ul {
		-webkit-columns: 2;
		-moz-columns: 2;
		columns: 2;
		list-style-type: none;
		padding: 0;

		li {
			color: $grayBlue;
			font-size: 14px;

			img {
				margin-right: 4px;
			}
			+ li {
				margin-top: 8px;
			}
		} 
	}
}


// ===================================
// REWARDS
// ===================================

// RECOGNITION
.ranking-row {
	text-align: center;

	h1 {
		color: $red;
		font-weight: $light;

		&:after {
			content: '';
			display: block;
			background-color: $gray-200;
			margin: 16px auto 24px;
			width: 60%; height: 1px;
		}
	}
	.ranking-badge {
		max-width: 60%;
	}
	.affiliate-listing {
		padding-left: 8px;
		padding-right: 8px;

		.affiliate-img, .placeholder {
			background-color: $gray-200;
			border-radius: 2px;
			overflow: hidden;
			height: 30vw;
		}
		h4 {
			color: $grayBlue;
			font-weight: $regular;
		}
	}
	&.royal-crown-diamond, &.crown-diamond {

		.affiliate-listing {
			margin-bottom: 16px;
			margin-left: auto;
			margin-right: auto;

			.affiliate-img, .placeholder {
				height: 80vw;
			}
			h4 {
				font-size: 20px;
				margin-top: 8px;
			}
		}
	}
	&.triple-diamond, &.double-diamond, &.diamond {

		.affiliate-listing {
			margin-bottom: 16px;

			.affiliate-img, .placeholder {
				height: 60vw;
			}
			h4 {
				font-size: 16px;
				margin-top: 8px;
			}
		}
	}
	&.emerald, &.ruby, &.sapphire, &.jade, &.pearl {

		.affiliate-listing {
			margin-bottom: 8px;

			.affiliate-img, .placeholder {
				height: 30vw;
			}
			h4 {
				font-size: 16px;
				margin-top: 8px;
			}
		}
	}
	&.platinum, &.gold, &.silver, &.bronze, &.affiliate {

		.affiliate-listing {

			h4 {
				font-size: 14px;
			}
		}
	}
}

// WAYS TO EARN
.ways-to-earn-intro {
	margin-bottom: 48px;
}
.way-to-earn {
	border-radius: 50%;
	color: $white;
	cursor: pointer;
	margin: 0 auto 48px;
	padding: 48px 24px;
	position: relative;
	text-align: center;
	width: 70vw; height: 70vw;

	h4 {
		background-color: $white;
		border-radius: 50%;
		box-shadow: 0 1px 8px rgba(#000, 0.1);
		color: $red;
		font-size: 48px;
		font-weight: $light;
		line-height: 70px;
		margin: 0;
		position: absolute;
		top: 50%; left: -30px;
		text-align: center;
		transform: translateY(-50%);
		width: 70px; height: 70px;
		z-index: 3;
	}
	h2, .btn {
		position: relative;
		z-index: 2;
	}
	h2 {
		color: $white;
		font-size: 20px;
		font-weight: $bold;
		letter-spacing: 0.1em;
		text-shadow: 0 0px 8px rgba(0,0,0,0.5);
		text-transform: uppercase;
	}
	.btn {
		@include transition(0.5s);
	}
	&:before {
		content: '';
		display: block;
		border-radius: 50%;
		background-color: rgba(#000, 0.2);
		position: absolute;
		top: 0; left: 0;
		@include transition(0.5s);
		width: 100%; height: 100%;
	}
	&:after {
		content: '';
		display: block;
		border-radius: 50%;
		border: 2px solid $white;
		position: absolute;
		top: 1%; left: 1%;
		width: 98%; height: 98%;
	}
	&:hover {

		&:before {
			background-color: rgba($red, 0.5);
		}
		.btn {
			background-color: $white;
			color: $red;
		}
	}
}
.modal-content {
	border-radius: 8px;
}
.modal-header {
	height: 200px;
	position: relative;

	h3 {
		color: $white;
		font-size: 20px;
		font-weight: $bold;
		letter-spacing: 0.1em;
		position: absolute;
		bottom: 12px; left: 0;
		margin: 0;
		text-shadow: 0 0px 8px rgba(0,0,0,0.5);
		text-transform: uppercase;
		text-align: center;
		width: 100%;
	}
	.close {
		opacity: 1;

		span {
			color: $white;
			text-shadow: 0 0px 12px rgba(0,0,0,0.4);
		}
	}
	&:before {
		content: '';
		display: block;
		background: rgb(0,0,0);
		background: linear-gradient(0deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 100%);
		position: absolute;
		bottom: 0; left: 0;
		width: 100%; height: 120px;
	}
}
.modal-body {

	p {
		text-align: justify;

		&:last-of-type {
			margin-bottom: 0;
		}

	}
}

// LIFESTYLE REWARDS
.lifestyle-reward {
	color: $grayBlue;

	.reward-image {
		height: 300px;
	}
	h1 {
		font-weight: $light;
		text-transform: uppercase;

		&:after {
			margin-left: 0;
			margin-right: 0;
		}
	}
	h4 {
		color: $grayBlue;
	}
	+.lifestyle-reward {
		border-top: 2px solid $gray-100;
		margin-top: 48px;
		padding-top: 48px;
	}
}

// MERCEDES
#mercedes-img {
	display: block;
	margin: 48px auto 64px;
	max-width: 90%;
}
#mercedes-qualifications {
	padding-left: 16px;
	padding-right: 16px;
	text-align: center;

	h3 {
		color: $red;
		margin-bottom: 16px;
	}
	ul {
		list-style-type: none;
		padding: 0;

		li + li {
			margin-top: 16px;
		}
	}
}
p.small {
	line-height: 1.2;
}



// PRESS
.press-entry {

	a {
		text-decoration: none !important;
	}
	.press-img {
		border-radius: 6px;
		height: 35vw;
		margin-right: -10px;
	}
	h2 {
		color: $red;
		font-size: 16px;
		font-weight: $bold;
		margin-bottom: 4px;
	}
	h4 {
		color: $grayBlue;
		font-size: 14px;
		font-weight: $regular;
		margin-bottom: 0;
	}

	+ .press-entry {
		border-top: 1px solid $gray-200;
		margin-top: 32px;
		padding-top: 32px;
	}
}



// HQ EVENTS
.hq-event-month {
	margin-bottom: 0;

	h1 {
		margin-bottom: 0;

		&:after {
			margin-bottom: 0;
		}
	}
}
.hq-event-block {
	margin-top: 32px;
	
	+ .hq-event-month {
		margin-top: 32px;
	}
	.btn.btn-primary {
		margin-top: 0;

		.fa-chevron-right {
			font-size: 14px;
			margin-left: 8px;
		}
	}
}