// 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
	
}

// 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;
		}
	}
	#home-products {
		padding-left: 55px;
		padding-right: 55px;

		#home-products-carousel .slick-track {
			padding-top: 36px;
			padding-bottom: 36px;
		}
		#home-products-next, #home-products-prev {
			bottom: auto;
			top: 50%;
		}
	}

	// 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 {
			width: 84px;

			li {

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


	// Footer


	// Home
	#home-slider .home-slider-slide .slide-text p {
		font-size: 16px;
		line-height: 24px;
	}
	#home-products {

		#home-products-carousel .slick-track {
			padding-top: 54px;
			padding-bottom: 54px;
		}
		#home-products-info {

			h2 {
				font-size: 32px;
			}
			p {
				font-size: 14px;
				line-height: 24px;
			}
		}
	}
	#home-gano img {
		margin-top: 120px;
	}

	.product-category-tile {
		border-radius: 6px;

		&.standalone-product img {
			padding-top: 0;
		}
	}

	// 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
	.mission-img {
		height: 600px;
	}

	// 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) and (orientation: landscape) {

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


	// Nav
	.navbar {
		height: 86px;
		padding-left: 15px;
		padding-right: 15px;
	}
	.navbar-toggler {
		display: none;
	}
	#navbar {
		background-color: transparent !important;
		display: flex;
		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 {
					font-size: 15px !important;
					padding-top: 11px !important;
					padding-bottom: 11px !important;
				}
			}
		}
		.nav-sep {
			@include transColor($white, 0.3);
			clear: both;
			float: left;
			margin: 0 8px;
			@include transition(0.6s);
			width: 1px; height: 64px;
		}
		#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: 0 0 4px 4px;
					@include transColor($red, 0.8);
					padding-top: 0;
					left: 0; top: 67px;
					text-align: left;
					transform: none !important;

					.dropdown-item {
						padding: 4px 16px;
						width: auto;
					}
				}
			}
		}
		#locale-select {
			padding: 12px 0;
			position: relative !important;
			left: auto;
			bottom: auto;
			height: 48px;

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

				i {
					top: 24px; right: 24px;
					transform: rotate(-180deg);
				}
			}
		}
		#nav-social li {
			position: static;
		}
		#head-login {
			margin-top: 11px;
			padding-left: 24px;
			padding-right: 24px;
			position: static;
			transform: none;
		}
	}
	.navbar.change {

		#navbar {

			ul {
				margin-top: 8px;
				margin-bottom: 8px;
			}
			.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;
					}
				}
			}
			#locale-select.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: 36px;

		.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-about-pre {

		h3 {
			font-size: 24px;
		}
	}
	#home-products {
		padding-top: 48px;
		padding-bottom: 32px;

		#home-products-info .slick-track {
			height: 430px;

			.product-slide {
				position: relative;
				top: 50% !important;
				transform: translateY(-50%);
				height: auto;
			}
		}
		#home-products-carousel .slick-track {
			padding-top: 60px;
			padding-bottom: 60px;
		}
	}
	#home-rewards {
		padding-top: 80px;
		padding-bottom: 80px;

		&:before {
			background: rgb(255,255,255);
			background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 80%, rgba(255,255,255,1) 100%);
			width: 90%; height: 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
	.mission-img {
		height: 640px;
	}
}

// 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 {

		ul {

			li {

				a {
					font-size: 18px !important;
				}
			}
		}
		#nav-primary {

			> li {

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

					li + li {
						margin-top: 4px;
					}
				}
			}
		}
		#head-login {
			font-size: 18px;
		}
		#locale-select {
			height: 49px;

			li.active-locale {
				font-size: 18px !important;
			}

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


	// Footer


	// Home
	#home-slider {

		.home-slider-slide .slide-text {

			h2 {
				font-size: 72px;
			}
			p {
				font-size: 18px;
				line-height: 32px;
			}
		}
	}
	#home-products #home-products-carousel .slick-track {
		padding-top: 112px;
		padding-bottom: 112px;
	}

	// 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%;
	}
}