.dropdown {
	&.dropdown-full-width {
		position: initial;
		
		@include media-breakpoint-down(sm) {
			position: relative;
		}
		
		& .dropdown-menu {
			left: 0 !important;
			right: 0 !important;
			top: 100% !important;
			
			@include transform(none !important);
		}
	}
	& .dropdown-menu-container {
		display: table;
		width: 100%;
		min-width: rem(700px);
		padding: rem(25px) rem(10px);
		
		@include media-breakpoint-down(md) {
			display: block;
			min-width: inherit;
			padding: rem(15px);
		}
		
		& .title {
			font-weight: 600;
			margin: 0 0 rem(15px);
			font-size: rem(16px);
			
			@include media-breakpoint-down(md) {
				font-size: rem(14px);
			}
		}
	}
	& .dropdown-menu-sidebar {
		display: table-cell;
		width: rem(240px);
		min-width: rem(240px);
		vertical-align: top;
		padding: rem(5px) rem(20px);
		
		@include media-breakpoint-down(md) {
			display: block;
			width: auto;
			padding: 0;
		}
		
		& + .dropdown-menu-content {
			border-left: 1px solid $gray-300;
			padding-left: rem(30px);
			
			@include media-breakpoint-down(md) {
				border-left: none;
				border-top: 1px solid $gray-300;
				padding-top: rem(25px);
				padding-left: 0;
				margin-top: rem(25px);
			}
		}
	}
	& .dropdown-menu-content {
		display: table-cell;
		padding: rem(5px) rem(20px);
		vertical-align: top;
		
		@include media-breakpoint-down(md) {
			padding: 0;
			display: block;
			
			& .row {
				& > div {
					&:last-child {
						margin-bottom: rem(15px);
					}
				}
			}
		}
	}
	& .dropdown-menu-list {
		list-style-type: none;
		margin: 0 0 rem(25px);
		padding: 0;
		
		@include media-breakpoint-down(md) {
			margin-bottom: rem(10px);
		}
		
		& .dropdown-header {
			padding: rem(5px) 0;
			line-height: rem(20px);
			margin-bottom: rem(10px);
			border-bottom: 1px solid $gray-300;
		}
		& > li {
			@include media-breakpoint-down(md) {
				display: inline-block;
			}
		
			& + li {
				margin-top: rem(8px);
				
				@include media-breakpoint-down(md) {
					margin-top: 0;
					margin-left: rem(15px);
				}
			}
			& > a {
				display: block;
				line-height: rem(20px);
				color: $dark;
				font-size: rem(13px);
				
				&:hover,
				&:focus {
					text-decoration: none;
					color: $primary;
				}
			}
			&.active {
				& > a {
					&:hover,
					&:focus {
						opacity: 0.5;
						color: lighten($dark, 30%);
					}
				}
			}
		}
	}
	& .dropdown-brand-list {
		list-style-type: none;
		margin: 0 0 rem(15px);
		padding: 0;
		
		& > li {
			display: inline-block;
			padding: 0;
			margin-right: rem(5px);
			margin-bottom: rem(5px);
			
			& a {
				display: block;
				height: rem(60px);
				padding: rem(10px);
				min-width: rem(60px);
				max-width: rem(120px);
				text-align: center;
				border: 1px solid $gray-300;
				
				@include border-radius($border-radius-lg);
				@include display-flex();
				@include flex-align(center);
				
				&:hover,
				&:focus {
					border-color: $gray-600;
				}
			}
			& img {
				max-height: 100%;
				max-width: 100%;
				filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter ….3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
				filter: gray;
				-webkit-filter: grayscale(100%);
				opacity: 0.5;
				display: block;
				margin: 0 auto;
				
				@include transition(all .2s linear);
			}
			&:hover,
			&:focus {
				& img {
					filter: none;
					-webkit-filter: none;
					opacity: 1.0;
				}
			}
		}
	}
}