// Responsive styles

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575px) {

	// Global
	.main-section.white-bg {
		padding-left: 25px;
		padding-right: 25px;
	}


	// Nav


	// Footer
	footer {

		#footer-tagline {
			text-align: center;
		}
	}


	// Home
	#home-slider-next {
		right: 0;
		top: calc(100vh - 80px);
		border-radius: 4px 0 0 4px;
		background: #931a25;
		color: #fff;
		width: 36px;
	}

	#home-our-founders, #home-affiliate-opportunities {
		background-position: top center;
		background-size: contain;
		padding-top: calc(56vw + 48px);
		background-color: $red;
		background-repeat: no-repeat;
		background-size: contain !important;

		&:before {
			opacity: 0.3;
		}
	}
}

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) {

	// Global


	// Nav
	#navbar #nav-primary {
		top: 0;
		transform: translate(-50%, 10%);

		li a {
			font-size: 18px;
			padding-top: 4px;
			padding-bottom: 4px;
		}
	}

	// Footer
	footer {

		img {
			margin: 24px 0 8px;
			max-width: 70%;
		}
		#footer-tagline {
			font-size: 20px;
			margin-left: 6px;
		}
		#footer-social {
			margin-top: 36px;
			position: static;
		}
	}

	// Home
	#home-slider .home-slider-slide {

		.slide-text p {
			font-size: 14px;
			line-height: 20px;
		}	
		&#red-slide img {
			margin-bottom: 24px;
			width: 150px;
		}
	}

	// Ways to earn
	.way-to-earn {
		width: 200px; height: 200px;
	}
}

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) {

	// Global


	// Nav
	#navbar {

		#nav-primary {
			top: 50%;
			transform: translate(-50%, -60%);

			li a {
				font-size: 30px;
				padding-top: 8px;
				padding-bottom: 8px;
			}
			.dropdown-menu.show {
				transform: translate(calc(-50% + 35vw), -50%);
			}
			&.dropdown-shown {
				transform: translate(calc(-50% - 35vw), -60%);
			}
		}
		#nav-social {
			margin-right: 4px;
			width: 108px;

			li {

				a {
					font-size: 20px;
				}
			}
		}
	}


	// Footer
	footer svg {
		max-width: 160px;
	}


	// Home
	#home-slider {
		height: 45vh;
		min-height: 0;

		.home-slider-slide {

			.container-fluid>.row {
				align-content: normal !important;
			}
			.slide-img-wrapper, .slide-text {
				margin-top: 0;
				margin-bottom: 0;
				padding-bottom: 0;
				padding-top: 0;
			}
			.slide-text {
				padding: 48px 0 0 !important;
			}
		}
	}
	#home-about {

		.text-md-left h3:after {
			margin-left: 0;
		}
		.text-md-right h3:after {
			margin-right: 0;
		}
	}
	#home-products {

		#home-products-text {
			background-image: url(../img/home/products-home-bg-2022.jpg);
			padding-bottom: 168px;
		}
		#home-products-next, #home-products-prev {
			top: 16px;
			transform: none;
		}
		#home-products-boxes {
			margin-top: -148px;

			.product-group {
				display: flex;
				justify-content: space-around;

				.home-products-box {
					flex: 0 0 48%;
					flex-grow: 1;
					margin: 0;
					max-width: 48%;
				}
			}
		}
	}
	#home-our-founders, #subpage-head.story-head {
		background-image: url(../img/home/our-founders-bg-new.jpg);
		background-position: top right;
	}
	#subpage-head.story-head {
		height: 560px;
	}
	#home-affiliate-opportunities {
		background-image: url(../img/home/affiliate-bg-2022.jpg);
	}
	.home-block {
		padding-top: 80px;
		padding-bottom: 80px;
	}

	// SUBPAGE
	#subpage-head {
		height: 80vw;
	}

	// SINGLE PRODUCT
	#product-head {
		height: 560px;
		padding: 0 15px;

		.product-row {
			margin-top: 32px;
			position: relative;
			top: 50%;
			transform: translateY(-50%);
		}
		.product-intro h1 {
			text-align: left;
		}
	}
	#product-tabs {
		margin-left: 8.33333%;
		width: 83.33333%;
	}


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

	// RECOGNITION
	.ranking-row {

		h1 {
			margin-top: 48px;
			text-align: left;

			&:after {
				margin-left: 0;
				width: 40%;
			}
		}
		.ranking-badge {
			max-width: 80%;
		}
		.affiliate-listing {
			padding-left: 15px;
			padding-right: 15px;
		}
		&.royal-crown-diamond, &.crown-diamond {

			.affiliate-listing {

				.affiliate-img, .placeholder {
					height: 40vw;
				}
			}
		}
		&.triple-diamond, &.double-diamond, &.diamond {

			.affiliate-listing {

				.affiliate-img, .placeholder {
					height: 30vw;
				}
			}
		}
		&.emerald, &.ruby, &.sapphire, &.jade, &.pearl {

			.affiliate-listing {

				.affiliate-img, .placeholder {
					height: 20vw;
				}
			}
		}
	}

	// WAYS TO EARN
	.way-to-earn {
		width: 300px; height: 300px;
	}

	// MERCEDES
	#mercedes-img {
		margin-top: 112px;
	}
	#mercedes-qualifications {
		margin-top: 16px;
		padding-left: 15px;
		padding-right: 32px;
		text-align: justify;
	}


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

	// OUR STORY
	#subpage-head.story-head {
		text-align: left;

		#story-header-intro {
			margin-bottom: 96px;
		}
		#story-header-img {
			margin-top: 96px;
			margin-left: -8.33333%;

			img {
				margin-bottom: -240px;
			}
		}
	}
	#story-products img {
		margin-top: -48px;
	}
	#story-rewards {
		padding: 48px;
	}
	#story-testimonials {

		.placeholder {
			margin-bottom: 0;
			width: 150px; height: 150px;
		}
		.testimonial-body {
			margin-top: 16px;
		}
	}

	// OUR TEAM
	.team-founders {

		.founders-img {
			height: 400px;
		}
	}
	.team-tile {

		.team-img, .placeholder {
			height: 240px;
		}
	}

	// MISSION & VISION
	#core-value-circles {

		.core-value-circle {
			width: 300px; height: 300px;

			h3, p {
				margin: 0;
			}
			h3 {
				font-family: $font-family-condensed;
				letter-spacing: 0.1em;
				text-transform: uppercase;
			}
		}
	}

	// INTERNATIONAL
	#shipping-countries ul {
		-webkit-columns: 3;
		-moz-columns: 3;
		columns: 3;

		li {
			font-size: 16px;
		}
	}

	// PRESS
	.press-entry {

		.press-img {
			height: 160px;
			margin-right: 0;
		}
		h2 {
			font-size: 20px;
			margin-top: 16px;
		}
	}
}

// Large devices (desktops, 992px and up)
@media (min-width: 992px) {
	body {
		padding-top: 82px;
	}

	// Global
	p {
		font-size: 16px;
		line-height: 28px;
	}


	// Nav
	.navbar {
		padding-left: 15px;
		padding-right: 15px;
	}
	.navbar-toggler {
		display: none;
	}
	#navbar {
		background-color: transparent !important;
		display: flex;
		align-items: center;
		height: auto;
		opacity: 1;
		position: static;
		transform: none;

		> ul {
			margin-top: 8px;
			margin-bottom: 8px;
			position: static !important;
			-webkit-box-orient: horizontal !important;
			flex-direction: row !important;

			li {

				a {
					color: $gray-600 !important;
					font-size: 15px !important;
					padding-top: 11px !important;
					padding-bottom: 11px !important;
				}
			}
		}
		.nav-sep {
			@include transColor($black, 0.1);
			clear: both;
			float: left;
			margin: 0 8px;
			@include transition(0.6s);
			width: 2px; height: 40px;
		}
		#nav-primary {
			top: auto; left: auto;
			transform: none !important;

			> li {

				a {
					opacity: 1 !important;
				}
				+ li {
					margin-left: 10px;
				}
				&.nav-has-dropdown {
					position: relative;
					padding-right: 0;
				}
				.dropdown-menu {
					border-radius: 3px;
					@include transColor($white, 0.95);
					padding-top: 0;
					left: 0; top: 44px;
					text-align: left;
					transform: none !important;

					.dropdown-item {
						padding: 4px 16px;
						width: auto;

						a {
							color: $gray-500 !important;
							display: block;
							padding: 0 !important;
						}
					}
				}
			}
		}
		#locale-select {
			padding: 12px 0;
			position: relative !important;
			left: auto;
			bottom: auto;
			height: 48px;

			i {
				color: $gray-600 !important;
				top: 16px;
				transform: none;
			}
			li.active-locale {
				color: $gray-600 !important;
				font-size: 15px !important;
			}
			&.open {
				background-color: $white;
				height: 144px;
				margin: 0 -16px -80px;
				padding: 20px 16px 12px;

				i {
					top: 24px; right: 24px;
					transform: rotate(-180deg);
				}
			}
		}
		#nav-social {
			width: 120px;

			li {
				position: static;

				a i {
					color: $gray-600 !important;
					font-size: 20px;
				}
				+ li {
					margin-left: 8px;
				}
			}
		}
		#head-login {
			background-color: transparent;
			border: 2px solid $red;
			border-radius: 3px;
			color: $red;
			padding: 8px 12px;
			position: static;
			transform: none;
		}
	}
	.navbar.change {

		#navbar {

			ul {
				margin-top: 8px;
				margin-bottom: 8px;

				li a {
					color: $gray-500 !important;
				}
			}
			.nav-sep {
				@include transColor($black, 0.1);
			}
			#nav-primary {

				.dropdown-menu {
					background-color: $white;
					box-shadow: 0 0 16px rgba(#000, 0.1);

					&:before {
						content: '';
						display: block;
						background-color: $white;
						position: absolute;
						top: -16px; left: 0;
						width: 100%; height: 16px;
					}
				}
			}
			#nav-social li i {
				color: $gray-500 !important;
			}
			#locale-select {

				li.active-locale, i {
					color: $gray-500 !important;
				}
				&.open {
					background-color: $white;
					box-shadow: 0 0 16px rgba(#000, 0.1);
				}
			}
		}
	}

	// Member bar
	#member-bar {
		padding: 6px 30px;

		.member-bar-info {

			p {
				display: inline-block;

				+ p {
					margin-left: 6px;

					&:before {
						content: '-';
						margin-right: 7px;
					}
				}
			}
		}
		.btn {
			margin-top: 0;
			padding: 6px 12px;
		}
	}


	// Member bar conditionals
	.member-site {
		padding-top: 118px;

		.navbar {
	    	top: 36px;

	    	#navbar {
	    		height: auto;
	    	}
	    }
	}


	// Footer
	footer {
		padding-top: 60px;

		img {
			margin: 24px auto 8px;
		}
		#footer-tagline {
			text-align: center;
		}
		h4 {
			margin-top: 0;
		}
		#footer-social {
			margin-top: 48px;
		}
	}


	// ===================================
	// HOME
	// ===================================
	#home-slider {
		height: 80vh;
		min-height: 640px;

		.home-slider-slide {

			.slide-img-wrapper .slide-img .slide-img-circ {
				filter: blur(10vw);
				margin-top: -22.5vw;
				margin-left: -22.5vw;
				width: 45vw; height: 45vw;
			}
			.slider-bg-image {
				width: 100%; height: auto;
			}
			.slide-text {

				p {
					font-size: 16px;
					line-height: 28px;
				}
			}
		}
	}
	#home-about-pre {

		h3 {
			font-size: 24px;
		}
	}
	#home-products {

		#home-products-text {
			padding-bottom: 220px;
		}
		#home-products-boxes {
			margin-top: -200px;

			.home-products-box {
				height: 400px;

				h2 {
					font-size: 20px;
				}
			}
		}
	}
	.home-block {
		display: flex;
		align-items: center;
		min-height: 480px;
		padding-left: 48px;
		padding-right: 48px;

		> .row {
			width: 100%;
		}
	}


	// ===================================
	// SUBPAGE
	// ===================================
	#subpage-head, #product-head {
		height: 600px;
	}
	.main-section {
		padding-top: 64px;
		padding-bottom: 64px;
	}


	// ===================================
	// PRODUCTS
	// ===================================

	// LISTING PAGE
	.product-category-row + .product-category-row {
		border-top: 2px solid $gray-100;
		padding-top: 36px;
	}
	.product-category-tile, .product-tile {
		height: 580px;
	}
	.product-category-tile {
		margin-left: 0;
		margin-right: 0;
		text-align: left;

		&.standalone-product {
			height: 480px;

			> .row, > .row > .div {
				height: 100%;
			}
			> .row > .div {
				position: relative;
			}
			.standalone-product-text {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
			}
			img {
				position: absolute;
				top: 50%; left: 50%;
				transform: scale(1.4) translate(-50%, -50%);
				transform-origin: top left;
			}
			h2 {
				font-size: 48px;
			}
		}
	}
	.product-tile {
		margin-top: 0;
	}

	// SINGLE PRODUCT
	#product-head {
	}


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

	// RECOGNITION
	.ranking-row {

		h1 {
			font-size: 56px;
			margin-top: 64px;
		}
		&.royal-crown-diamond, &.crown-diamond {

			.affiliate-listing {

				.affiliate-img, .placeholder {
					height: 480px;
				}
			}
		}
		&.triple-diamond, &.double-diamond, &.diamond {

			.affiliate-listing {

				.affiliate-img, .placeholder {
					height: 360px;
				}
			}
		}
		&.emerald, &.ruby, &.sapphire, &.jade, &.pearl {

			.affiliate-listing {

				.affiliate-img, .placeholder {
					height: 240px;
				}
			}
		}
	}

	// WAYS TO EARN
	.way-to-earn {
		width: 260px; height: 260px;
		padding: 48px;
	}
	#mercedes-img {
		margin-top: 64px;
	}


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

	// OUR STORY
	#subpage-head.story-head {

		#story-header-intro {
			margin-bottom: 0;
		}
		#story-header-img {
			margin-top: 0;
			margin-left: 8.33333%;

			img {
				margin-bottom: -240px;
			}
		}
	}
	#story-products {
		text-align: left;

		img {
			margin-bottom: -48px;
		}
	}
	#story-rewards, #story-quote {
		border-radius: 4px;
	}
	#story-rewards p {
		text-align: justify;
	}
	#story-quote {
		margin-left: -200px;
		padding: 80px 32px 80px 200px;
		height: 540px;

		h1 {
			font-size: 48px;
		}
	}

	// OUR TEAM
	.team-tile {
		
		.team-img, .placeholder {
			height: 300px;
		}
	}

	// MISSION & VISION
	#core-value-circles {

		.core-value-circle {
			width: 300px; height: 300px;

			h3, p {
				margin: 0;
			}
			h3 {
				font-family: $font-family-condensed;
				letter-spacing: 0.1em;
				text-transform: uppercase;
			}
		}
	}
}

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) {

	// Global
	.main-section {
		padding-top: 100px;
		padding-bottom: 100px;
		padding-left: 15px;
		padding-right: 15px;
	}
	#covid-banner {
		max-width: 1280px;

		p {
			font-size: 15px;
		}
	}


	// Nav
	#navbar {

		#nav-primary {

			> li {

				+ li {
					margin-left: 20px;
				}
				&.nav-has-dropdown {
					padding-right: 12px;
				}
				.dropdown-menu {
					top: calc(100% + 18px);

					li + li {
						margin-top: 4px;
					}
				}
			}
		}
		#locale-select {
			height: 49px;

			&.open {
				height: 144px;
			}
		}
	}


	// Footer


	// Home
	#home-slider {
		height: 48vw;

		.home-slider-slide {

			.slide-img-wrapper {
				margin-bottom: 0;
			}
			.slide-text {

				h1 {
					font-size: 32px;
				}
				p {
					font-size: 18px;
					line-height: 32px;
				}
			}
		}
	}
	#home-products {

		#home-products-prev {
			left: 64px;
		}
		#home-products-next {
			right: 64px;
		}
		#home-products-boxes {
			margin-left: auto;
			margin-right: auto;
			max-width: 1300px;

			.home-products-box {
				height: 480px;

				h2 {
					font-size: 24px;
				}
			}
		}
	}
	.home-block {
		min-height: 540px;
		padding-left: 64px;
		padding-right: 64px;

		h1 {
			font-size: 48px;
		}
	}

	// SUBPAGE
	#subpage-head {
		height: 600px;
	} 
	#product-head {
		height: 720px;
	}

	// LOGIN
	#login-wrapper {

		form svg {
			max-width: 40%;
		}
	}

	// PRODUCTS
	.product-tile img {
		max-height: 346px;
	}

	// SINGLE PRODUCT
	#product-head {

		img {
			max-height: 635px;
		}
		.product-intro {
			margin-top: 48px;
		}
	}


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

	// MISSION & VISION
	.mission-img {
		height: 780px;
	}

	.team-tile {

		.team-img, .placeholder {
			height: 360px;
		}
	}
	#story-quote h1 {
		font-size: 56px;
	}
	

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

	// RECOGNITION
	.ranking-row {

		h1 {
			margin-top: 88px;
		}
	}

	// WAYS TO EARN
	.way-to-earn {
		width: 300px; height: 300px;
	}

	// MERCEDES
	#mercedes-img {
		margin-top: 64px;
		max-width: 80%;
	}
}