/*
//
//		Filter Application Styles
//		Author: @millcitytheory
//
//		1. Filter Application Modal
//		2. User Settings Dropdown
//
*/


/*
//
//		Filter Application Modal Specific Styles
//
//		1. General Modal Styles
//		2. Modal Header Specific Styles
*/

		#HeadphoneFilterModal {
			padding: 0px;
			overflow: hidden;
			width: 800px;
			height: 600px;
			border: 2px solid #91db30;
			border-radius: 0px;
			display: none;
			/*margin-top: 300px !important;*/
			overflow-y: scroll;
		}

		#VideoModal {
			display: none;
			padding: 0px;
			overflow: hidden;
			width: 800px;
			border-radius: 0px;
			background-color: none;
			bottom: auto;
		}

		#VideoModal .modal-body {
			padding: 0px;
		}

		#VideoModal .embed-responsive {
			position: relative;
			display: block;
			height: 0;
			padding: 0;
			overflow: hidden
		}

		#VideoModal .embed-responsive-16by9 {
			padding-bottom: 56.25%
		}

		#VideoModal .embed-responsive iframe.embed-responsive-item {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 100%;
			border: 0
		}



		@media only screen and (min-width: 320px) and (max-width: 480px) {

			#HeadphoneFilterModal {
				overflow-y: scroll;
			}

			/*#HeadphoneFilterModal .modal-footer {
				position: static !important;
			}*/

			#HeadphoneFilterModal .modal-footer > .row > .col-md-6 > p {
				margin: 5px 0 0 5px !important;
			}
			#HeadphoneFilterModal .modal-footer > .row > .col-md-6 > p > a {
				text-decoration: none !important;
			}

			#HeadphoneFilterModal .modal-footer a.btn.btn-border {
				margin-top: 5px !important;
				margin-right: 10px !important;
			}

		  	#HeadphoneFilterModal.modal.current {
				width: 100% !important;
				height: 100% !important;
				top: 0px !important;
				left: 0px !important;
				right: 0px !important;
				bottom: 0px !important;
				margin-top: 0px !important;
				margin-left: 0px !important;
			}

			#HeadphoneFilterModal .modal-body {
				margin: 1em !important;
				padding: 0px;
				height: auto !important;
			}

			#HeadphoneFilterModal > .modal-body > .modal-body-results > .headphone-result > .col-md-12 > .panel > .panel-body > .row > .col-md-6:last-child {
				margin-top: 1em;
				background-position: 14px center;
				padding-left: 78px;
			}

			#HeadphoneFilterModal .modal-body .modal-body-results {
				margin-top: 10px !important;
				/*height: 80% !important;*/
			}

			#VideoModal {
				width: 100% !important;
			}

			#HeadphoneFilterModal .modal-body .modal-body.result {
				/*overflow-y:scroll;*/
			}

			#HeadphoneFilterModal .modal-footer {
				position: static !important;
			}

			#HeadphoneFilterModal.result .modal-body .modal-body-results {
				height: auto !important;
			}

			#HeadphoneFilterModal .modal-body ul.steps li {
				display: none !important;
				font-size: 14px !important;
			}

			#HeadphoneFilterModal .modal-body ul.steps li.active {
				display: block !important;
			}

			#HeadphoneFilterModal .modal-body a.startover.text {
				font-size: 14px !important;
				top: 5px;
			}

			#HeadphoneFilterModal .modal-footer a.btn.btn-border {
				margin-right: 5px;
			}

			#HeadphoneFilterModal .modal-body .modal-body-results .tile .info {
				width: 90%;
			}

		}

		/*@media screen and (device-aspect-ratio: 2/3) {
			 #HeadphoneFilterModal .modal-body .modal-body-results {
				height: 190px !important;
			}
		}

		@media screen and (device-aspect-ratio: 40/71) {
			#HeadphoneFilterModal .modal-body .modal-body-results {
				height: 280px !important;
			}
		}

		@media screen and (device-aspect-ratio: 375/667) {
			#HeadphoneFilterModal .modal-body .modal-body-results {
				height: 380px !important;
			}
		}

		@media screen and (device-aspect-ratio: 16/9) {}

		@media screen and (device-aspect-ratio: 3/4) {}*/

/*
//
//		Buttons
//
*/

		#HeadphoneFilterModal a.btn {
			background: white !important;
			border: 2px solid #93D940;
			color: #93D940;
			font-weight: bold;
			text-transform: uppercase;
		}

		#HeadphoneFilterModal a.btn:hover {
			background: #93D940 !important;
			color: white;
		}

/*
//
//		Modal header Specific Styles
//
*/

		#HeadphoneFilterModal .modal-header {
			background-color: #93D940;
			padding: 2em;
			position: relative;
		}

		#HeadphoneFilterModal .modal-header h1 {
			
			background-image: url('../images/configurator/title-icon.png');
			background-repeat: no-repeat;
			background-position: left center;
			line-height: 1.5em;
			color: white;
			text-transform: uppercase;
			padding: 0px;
			padding-left: 2em;
			margin: 0px;
		}


		#HeadphoneFilterModal .modal-header i.fa-close {
			position: absolute;
			top: 50%;
			right: 20px;
			margin-top: -14px;
			font-size: 28px;
			color: #5D981F;
		}

		#HeadphoneFilterModal .modal-header i.fa-close:hover {
			cursor: pointer;
		}

/*
//
//		Modal Body Sepcific Styles.
//
*/

		#HeadphoneFilterModal .modal-body {
			margin: 2em;
			overflow-y: scroll;
		}

		#HeadphoneFilterModal .modal-body .modal-body-results {
			margin-top: 3em;
			/*overflow-y: scroll;*/
			overflow-x: hidden;
			height: auto !important;
		}

		#HeadphoneFilterModal .modal-body .modal-body-results .tile.tile-manufacture {
			font-size: 14px;
			padding: 0.8em 1em;
		}

		#HeadphoneFilterModal .modal-body .modal-body-results .tile.tile-manufacture:hover {
			background-color: #E3F6CE;
			cursor: pointer;
		}

		#HeadphoneFilterModal .modal-body .modal-body-results .tile .panel {
			border: 1px solid white;
			text-align: left;
			padding: 1em 0em;
			height: 80px;
			box-shadow: none;
			-webkit-box-shadow: none;
		}

		#HeadphoneFilterModal .modal-body .modal-body-results .tile .panel:hover {
			cursor: pointer;
			border: 1px solid #93D940;
		}

		#HeadphoneFilterModal .modal-body .modal-body-results .tile img {
			width: 50px;
			display: inline-block;
		}

		#HeadphoneFilterModal .modal-body .modal-body-results .tile .info {
			display: inline-block;
			vertical-align: middle;
			text-align: left;
			margin-left: 0.8em;
			width: 60%;
		}

		#HeadphoneFilterModal .modal-body .modal-body-results .tile .info .manufacture {
			display: block;
			font-weight: bold;
			text-transform: uppercase;
		}

		#HeadphoneFilterModal .modal-body .modal-body-results .tile .info .model {
			display: block;
			font-weight: normal;
			text-transform: uppercase;
		}

		#HeadphoneFilterModal .modal-body ul.steps li {
			display: inline-block;
			line-height: 2em;
			font-size: 16px;
			padding-left: 2.4em;
			margin-right: 1em;
		}

		#HeadphoneFilterModal .modal-body ul.steps .one {
			background-image: url('../images/configurator/one-gray.png');
			background-repeat: no-repeat;
			background-position: left center;
		}

		#HeadphoneFilterModal .modal-body ul.steps .one.active {
			background-image: url('../images/configurator/one.png');
		}

		#HeadphoneFilterModal .modal-body ul.steps .two {
			background-image: url('../images/configurator/two-gray.png');
			background-repeat: no-repeat;
			background-position: left center;
		}

		#HeadphoneFilterModal .modal-body ul.steps .two.active {
			background-image: url('../images/configurator/two.png');
		}
		#HeadphoneFilterModal .modal-body ul.steps .three {
			background-image: url('../images/configurator/three-gray.png');
			background-repeat: no-repeat;
			background-position: left center;
		}

		#HeadphoneFilterModal .modal-body ul.steps .three.active {
			background-image: url('../images/configurator/three.png');
		}

		#HeadphoneFilterModal .modal-body .modal-body-product div.col-md-3:hover {
			cursor: pointer;
		}

/*
//
//		Modal Footer
//
*/

		#HeadphoneFilterModal .modal-footer {
			position: static;
			bottom: 0px;
			left: 0px;
			right: 0px;
			background-color: #ebebeb;
			color: #333333;
			text-align: left;
			padding: 0.8em;
		}

		#HeadphoneFilterModal .modal-footer a {
			text-decoration: underline;
		}

		#HeadphoneFilterModal .modal-footer a.btn.btn-border {
			margin-right: 35px;
			border: 1px solid #C3C3C3;
			color: #C3C3C3;
			background: #ebebeb !important;
			float: right;
			text-decoration: none;
		}

		#HeadphoneFilterModal .modal-footer > .row > .col-md-6 > p {
			margin: 10px 0 0 35px;
		}

/*
//
//		Type Ahead
//
*/
		#HeadphoneFilterModal .modal-body .twitter-typeahead {
			width: 100%;
		}

		#HeadphoneFilterModal .modal-body input.typeahead {
			width: 100%;
			background-color: white;
			background-image: url('../images/configurator/mag.png');
			background-repeat: no-repeat;
			background-position: 98% center;
			box-shadow: none !important;
			-webkit-box-shadow: none !important;
			-moz-box-shadow: none !important;
			border-radius: 0px;
			font-size: 16px;
			color: #333333;
			text-transform: uppercase;
			font-weight: 600;
			padding: 0 1.4em;
		}

		#HeadphoneFilterModal .modal-body input.typeahead::after {
			font-family: "FontAwesome";
			content: '\f002';
		}

		.tt-menu {
			width: 100%;
			background-color: white;
			border: 1px solid #cccccc;
			padding: 0.4em;
			-webkit-box-shadow: 0px 4px 5px -1px rgba(0,0,0,0.37);
			-moz-box-shadow: 0px 4px 5px -1px rgba(0,0,0,0.37);
			box-shadow: 0px 4px 5px -1px rgba(0,0,0,0.37);
		}



		.tt-suggestion {
			font-size: 18px;
			text-transform: uppercase;
			padding: 0.5em;
		}

		.tt-

		.tt-suggestion.tt-selectable:hover {
			background-color: #E3F6CE;
			cursor: pointer;
		}

		.tt-suggestion.tt-cursor {
			background-color: #E3F6CE;
		}

/*
//
//		Modal Results Page
//
*/

		#HeadphoneFilterModal .modal-body .headphone-result .col-md-6:first-child img {
			width: 44px;
			display: inline-block;
			margin-right: 1em;
			margin-left: 1em;
		}

		#HeadphoneFilterModal .modal-body .headphone-result .col-md-6:first-child div.titles {
			display: inline-block;
			width: 50%;
			vertical-align: middle;
		}

		#HeadphoneFilterModal .modal-body .headphone-result .col-md-6:first-child span {
			text-transform: uppercase;
			font-weight: bold;
			display: block;
			color: #333333;
			font-size: 12px;
			line-height: 1.4em;
		}

		#HeadphoneFilterModal .modal-body .headphone-result .col-md-6.fits {
			background: url('../images/configurator/modal-fits.png') no-repeat left center;
			padding-left: 42px;
			height: 40px;

		}

		#HeadphoneFilterModal .modal-body .modal-body-products .col-md-3 img {
			margin: 0 auto;
			display:block;
		}

		#HeadphoneFilterModal .modal-body .modal-body-products .col-md-3 img:hover {
			cursor: pointer;
		}


/*
//
//		Compatible Products
//
*/

		.static-product {
			margin-top: 4em;
		}

		.static-product .col-md-4:hover {
			cursor: pointer;
		}

		.static-product .compatible .compatible-icon {
			background: url('../images/configurator/compatible.png') no-repeat center center;
			width: 29px;
			height: 34px;
			position: absolute;
			z-index: 10;
			top: 40px;
			left: 40px;
		}

/*
//
//		Navigation Dropdown
//
*/

		#MainMenu > li {
			padding: 0;
		}

		#MainMenu > li > a {
			display: block;
			color: white;
			line-height: 1.8em;
			text-transform: uppercase;
			font-weight: bold;
			padding: 1.4em;
		}

		#MainMenu li ul.dropdown-menu {
			margin-top: 54px;
			border-top-right-radius: 0px;
			border-top-left-radius: 0px; 
		}

		#MainMenu li.active, #MainMenu li.over {
			background-color: white;
		}
		#MainMenu > li:first-child.over {
			background-color: #ea3b02;
		}

		#MainMenu li.active a, #MainMenu li.over a {
			color: #2B2B30;
		}

		#MainMenu li.active ul.dropdown-menu, #MainMenu li.over ul.dropdown-menu {
			display: block;
		}
		#MainMenu li ul.dropdown-menu, #MainMenu li ul.dropdown-menu {
			display: none;
			visibility: visible;
		}

/*
//
//		User Settings
//
*/
		
		#UserSettings {
			position: relative;
		}

		#UserSettings button {
			text-shadow: none;
			padding-top: 1em;
			padding-bottom: 0.8em;
			padding-left: 3.4em;
			font-size: 12px;
			background: #242428;
			/* Old browsers */
			background: -moz-linear-gradient(top, #242428 10%, #38383e 44%, #38383e 100%);
			/* FF3.6+ */
			background: -webkit-gradient(linear, left top, left bottom, color-stop(10%, #242428), color-stop(44%, #38383e), color-stop(100%, #38383e));
			/* Chrome,Safari4+ */
			background: -webkit-linear-gradient(top, #242428 10%, #38383e 44%, #38383e 100%);
			/* Chrome10+,Safari5.1+ */
			background: -o-linear-gradient(top, #242428 10%, #38383e 44%, #38383e 100%);
			/* Opera 11.10+ */
			background: -ms-linear-gradient(top, #242428 10%, #38383e 44%, #38383e 100%);
			/* IE10+ */
			background: linear-gradient(to bottom, #242428 10%, #38383e 44%, #38383e 100%);
			/* W3C */
			filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#242428', endColorstr='#38383e', GradientType=0 );
			background: url('../images/configurator/usersettings.png') no-repeat 10px center;
		}

		#UserSettings button i {
			margin-left: 1em;
		}

		#UserSettings button.active {
			background-color: #93D940;
			background-image: url('../images/configurator/usersettings-w.png');
			background-repeat: no-repeat;
			background-position: 10px center;
		}

		#UserSettings .dropdown-menu {
			position: absolute;
			width: 100%;
			right: 0px;
			top: 0px;
			display: none;
			margin-top: 56px;
			border: 2px solid #93D940;
			border-top-left-radius: 0;
			border-top-right-radius: 0;
		}

		#UserSettings .dropdown-menu li.menu-item {
			display: block;
			border-bottom: 1px solid #dfdfdf;
		}

		#UserSettings .dropdown-menu.active {
			display: block;
		}

		#UserSettings .dropdown-menu li {
			padding: 1em 0.4em;
			border-right: none;
			overflow: hidden;
		}

		#UserSettings .dropdown-menu li.menu-item.active {
			border-left: 3px solid #93D940;
			background: url('../images/configurator/carrot.png') no-repeat left center;
		}

		#UserSettings .dropdown-menu li.menu-item img {
			width: 44px;
			display: inline-block;
			margin-right: 1em;
			margin-left: 1em;
		}

		#UserSettings .dropdown-menu li.menu-item div.titles {
			display: inline-block;
			width: 50%;
			vertical-align: middle;
		}

		#UserSettings .dropdown-menu li.menu-item .titles span {
			text-transform: uppercase;
			font-weight: bold;
			display: block;
			color: #333333;
			font-size: 12px;
			line-height: 1.4em;
		}

		#UserSettings .dropdown-menu li.menu-item span.delete {
			background: url('../images/configurator/delete.png') no-repeat center center;
			position: absolute;
			right: 10px;
			top: 50%;
			width: 17px;
			height: 17px;
			margin-top: -8px;
			z-index: 20;
		}

		#UserSettings .dropdown-meny li.menu-item span.delete:hover {
			cursor: pointer;
		}

		#UserSettings .dropdown-menu li.filter-app-init {
			text-align: right;
			color: #93D940;
			font-size: 12px;
			font-weight: bold;
			text-transform: uppercase;
			display: block;
		}

		#UserSettings .dropdown-menu li.filter-app-init::after {
			font-family: "FontAwesome";
			font-size: 14px;
			content: "\f055";
			margin-left: 1em;
		}

		#UserSettings .dropdown-menu li.filter-app-init:hover {
			cursor: pointer;
		}

		div.filter-app-init, div.video-modal-init{
			cursor: pointer;
		}

		section.container {
			margin-top: 3em;
		}

		#BrandCarousel {
			margin-top: 4em;
		}

		#HeadphoneFilterModal .startover.text {
			background-image: url('../images/configurator/startover.png');
			background-position: center right;
			background-repeat: no-repeat;
			position: absolute;
			right: 10px;
			top: 20px;
			font-size: 16px;
			padding-right: 20px;
		}