/*
 * Stockist
 */
 
.stockist-index-index .page-header {
    border-bottom: 0 none;
} 
 
.stockist-index-index,
body.cms-page-view,
body.contacts-index-index {
	
	.main-container {
		.hero {
			 .hero-text {
			 	top: 50%;
			 	left: 50%;
			 	transform: translateY(-50%) translateX(-50%);
			 	text-align: center;
			 	
	    	}
	    }
	    
	    
	    
	}


	h2 {
		font-family: $f-stack-serif;
		font-size: $f-size-xxl;
		padding-bottom: 16px;
	}
	
	.selection {
		padding: $trim*3 $trim*4;
		li {
			list-style: none;
			width:25%;
			position: relative;
			padding: 0 0 20px;
			margin: 0;
			
			a {
				text-transform: uppercase;
				font-size: $f-size-xs;
				color: $c-text;
				letter-spacing: 0.8px;
				&:hover {
					text-decoration: none;
				}
			}
			.s-wrapper {
				display:none;
				position: absolute;
				left: 100%;
				top:0;
				width: 100%;
				.select-wrapper {
					width: 220px;
				}
			}
			
			&.active {
				a {
					font-family: $f-stack-serif;
				&:before {
					display: inline-block;
				    border-top: 1px solid $c-text;
				    width: 20px;
				    position: relative;
				    margin-left: -10px;
				    content: "";
				    height: 5px;
				    margin-right: 5px;
				}
				}
				.s-wrapper {
					display:block;
				}
				
				
			}
		}

		#shoppingType.select-wrapper {
			display: none;
		}
		> .select-wrapper {
			display: none;
		}
		//li {
			select {
				padding: 10px 12px 10px 14px;
			}
		//}


		@include bp(max-width, $bp-medium) {
			padding: $trim $trim $trim;
		}

		@include bp(max-width, $bp-small) {

			> .select-wrapper {
				display: inline-block;
			}


			padding: $trim*2 $trim $trim;
			#shoppingType {
				display: inline-block;
			}

			.select-wrapper {
				width: 75%;
			}
			ul {
				padding-top: $trim/2;
				margin-bottom: 0;
			}
			li {
				width: 100%;
				padding-bottom: 0;
				a {
					display: none;
				}
				.s-wrapper {
					position: static;
					.select-wrapper {
						width: 75%;
					}

				}
			}

		}

		
	}
	
	#address_results {
		margin: -128px 0 128px 25%;
		padding: 0 0 0 60px;;
		position: relative;
		
		h3 {
			width: 100%;
			font-family: $f-stack-gt-extended-medium;
			font-size: $f-size-xs;
			letter-spacing: 0.8px;
		}
		
		ul {
			margin-bottom: 2em;
			li {
				width:33%;
				list-style: none;
				margin: 0;
				padding:0;
				float:left;
				padding-bottom: 20px;
				line-height: 1.5;
				letter-spacing: .3px;
				&:nth(3n) {
					clear: both;
				}
			}
			&:after {
				@include clearfix;
			}
			
			@include bp(max-width, ($bp-small + 100)) {
				li {
					width:49%;
				}
			}
			@include bp(max-width, ($bp-small)) {
				li {
					width:100%;
				}
			}
			
		}
		&.loading {
		 	@include loadingOverlay();
		 	min-height: 100px;
		}
		@include bp(max-width, $bp-medium) {

			margin: -70px 0 128px 20%;
			padding: 0 0 0 60px;
			
			ul {
				li {
					width: 50%;
				}
			}
			
		}

		@include bp(max-width, $bp-small) {
			margin: 0;
			padding: 0 $trim;
			
			h3 {
				padding-bottom: 20px;
			}
			ul {
				li {
					width: 100%;
				}
			}


		}

		
	}
	
}

body.cms-page-view:not(.stockist-index-index),
body.contacts-index-index:not(.stockist-index-index) {

	.main-container {

		@include bp(max-width, $bp-medium) {
			padding-top: 131px;
			
			.hero {
				img {
					display: none;
				}
				.hero-text {
				 	position: static;
				 	top: auto;
				 	left: auto;
				 	transform: none;
				}
			}
			
		}

	}
}


body.cms-page-view,
body.contacts-index-index {
	.main-container {
		.hero {
			.hero-text {
				p {
					text-transform: none;
					display: block;
					font-family: $f-stack-sans;
					letter-spacing: normal;
					font-size: 1.2vw;
					line-height: 2.5;
					
					@include bp(max-width, $bp-medium) {
						
						font-size: $f-size;
						line-height: 2;
						
						br {
							line-height: 4;
						}
						
					}

				}
			}
		}
		
		.cms-content {
			padding: $trim*2 $trim*4;
			background-color: #fff;
			
				.col-left {
					ul {
						list-style: none;
						margin: 0;
						padding: 0;
						li {
							margin: 0;
							padding: 0;
							text-transform: uppercase;
							line-height: 2.46;
							font-family: $f-stack-gt-extended-medium;
							letter-spacing: .8px;
							font-size: $f-size-xs;
						}
					}
					a {
						color: $c-text;
					}
					
				}
				
				.main {
					width: 75%;
					float: right;
					
					.sec {
						
						margin-bottom: $trim*2;
						h2 {
							text-transform: none;
							font-size: $f-size-xxl+2;
							font-family: $f-stack-gt-standard-medium;
							padding-bottom: 20px;
						}
						p {
							font-size: $f-size;
							line-height: 24px;
							letter-spacing: .3px;
						}
						
					}
					
				}
				
				&:after {
					@include clearfix;
				}

		@include bp(max-width, $bp-medium) {
			padding: $trim*2 $trim;
			&.col { 
				display: none; 
			}
			&.accordion {
				display: block;
			}
			
		}
		@include bp(min-width, $bp-medium+1) {
			&.accordion {
				display: none;
			}
			
		}

		}
		
	}
}

body.cms-customer-service,
body.contacts-index-index {
	.main-container {
		.hero {
			.hero-text {
				padding-top: $trim;
			 	@include bp(max-width, $bp-medium) {
				 	padding-top: 0;
				 	padding: $trim;
			 	}
				
				h1 {
					margin-bottom: 1.5vw;
					@include bp(max-width, $bp-medium) {
						margin-bottom: 22px;
					}
				}
				p {
					margin-bottom: 1vw;
					padding-bottom: 0;
					span {
						text-transform: uppercase;
						padding-right: 10px;
						font-size: .9vw;
						font-family: $f-stack-gt-extended-medium;
						letter-spacing: .7px;
						
					}
					
					@include bp(max-width, $bp-medium) {
						margin-bottom: $trim;
						span {
							font-size: $f-size-xs - 1;
							display: block;
						}
					}

					
				}
			}
		}
		
	}
	
}

body.cms-customer-service {
		.cms-content {
			
				.col-left {
					ul {
						li {
							&.active {
								a:before {
									display: inline-block;
								    border-top: 1px solid $c-text;
								    width: 20px;
								    position: relative;
								    margin-left: -10px;
								    content: "";
								    height: 5px;
								    margin-right: 5px;
								}
							}
						}
					}					
				}
				
				.main {		
					position: relative;			
					.sec {
						//display: none;
						position: absolute;
						top: 0;
						z-index: 1;
						opacity: 0;
						transition: $transition;
						&.active {
							//display: block;
							position: relative;
							z-index: 2;
							opacity: 1;
						}
						
						h2 {
							font-family: $f-stack-gt-extended-medium;
						}
						p {
							font-family: $f-stack-gt-standard-medium;
						}
						
					}
					
				}
		}
}

body.cms-press {
	.main-container {
		padding-top: 100px;
		
		.col-main {
			position: relative;
			max-width: 947px;
			margin: auto;
			
			.page-title {
				h1 {
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					top: 100px;
					font-family: $f-stack-gt-compressed-bold;
					font-size: 60px;
					letter-spacing: normal;
					text-shadow: 0px 0px 10px rgba(255,255,255,.2);
					@include bp(max-width, $bp-small) {
						position: static;
						transform: none;
						text-align: center;
						font-size: 36px;
					}

				}
			}
			
			.col2-set {
				img {
					width: 100%;
				}
				h4 {
					text-align: center;
					margin: 18px auto;
					text-transform: none;
					font-family: $f-stack-gt-condensed-medium;
					font-size: $f-size;
				}
				
				@include bp(max-width, $bp-small) {
					.col-1,
					.col-2 {
					    float: none;
					    width: auto;
					    border: 0;
					    padding-right: 0;
					    padding-left: 0;
					}
				}
				
			}
			
			.pub-title {
				margin: 80px auto 0;
				text-align: center;
				h2 {
					font-size: $f-size-xs;
					margin: 0;
					padding: 0;
					@include bp(max-width, $bp-small) {
						font-size: $f-size;
					}

				}
			}
			
			.col4-set {
				> div {
					width: 20%;

				}
				margin-bottom:$trim*3;
				@include bp(max-width, $bp-small) {
					flex-wrap: wrap;
					> div {
						width: 50%;
						padding: $trim/2 $trim;
					}
				}
				
			}

			
		}
	}
}


body.lookbook {
	
	@include bp('max-width',$bp-xsmall) {
		.col-main {
			margin-left: 0;
			margin-right: 0;
		}
	}
	
	
	.main-container {
		padding-left: 0;
		padding-right: 0;
		max-width: 100%;


		.lookbook-description {
			
			> .col2-set {
				display: table;
				width:100%;
				> div {
					display: table-cell;
					float:none;
					vertical-align: middle;
					text-align: center;
				}
			}
			
			.page-title {
				h1 {
					font-family: $f-stack-gt-compressed-bold;
					font-size: 5vw;
					letter-spacing: 1.2px;
					border-bottom:0 none;
					padding-bottom: 5vw;
				}
				p {
					font-family: $f-stack-gt-extended-medium;
					font-size: 1vw;
					letter-spacing: 1.1px;
					border-bottom: 1px solid $c-text;
					display: inline-block;
					text-transform: uppercase;
					padding-bottom: .5vw;
				}
			}

		}

		.lookbook-description,
		.lookbook_row > div:not(.full) {
		    max-width: $max-container-width;
		    margin: 0 auto;
		}
		.lookbook_row {
			margin: 50px 0;
			div {
				text-align: center;
			}
			> div.full img {
				width: 100%;
			}
			&:first-child {
				margin-top: 27px;
			}
		}
		.product-title {
			font-size: $f-size-s;
			text-align: center;
			padding: 20px 0;
			a {
				color: $c-text;
			}
			span {
				text-transform: uppercase;
			}
		}

		img {
			max-width: 100%;
			display: inline-block;
		}
		
		.col2-set {
			padding: 10px;
			&.links {
				margin: 0;
				padding:0;
				> div {
					padding: 0;
					margin: 0;
				}
			}
		}
		
		
		
			
		@include bp(max-width, $bp-small) {

			//padding-top: 38px;

			.lookbook-description {
				padding-left: $trim*2;
				padding-right: $trim*2;

				> .col2-set {
					display: block;
					width:100%;
					> div {
						display: block;
						width: auto;
					}
					.col2-set {
						display: flex;
						justify-content: space-around;
					}
				}
				.page-title {
					h1 {
						font-size: 32px;
						padding-bottom: $trim/2;
						padding-top: $trim/2;
						margin-bottom: 0;
					}
					p {
						display: none;
					}
				}
			}
			
			.lookbook_row {
				margin: 0;
				.col2-set {
					padding: 0;
					> div {
						margin: 0 0 50px;
						padding: 0;
						display: block;
						width: 100%;
					}
				}
				
				.full {
					margin: 0 0 50px;
				}
			}		
			
			
			.lookbook-description,
			.lookbook_row > div:not(.full) {
				padding-left: $trim*2;
				padding-right: $trim*2;
			}

			.product-title {
				font-size: $f-size-xs - 1;
				padding: 9px 0 0;
			}

			img.small {
				max-width: 50%;
			}
			
		}



	}

	.ajax-product-container {
		margin: 80px;
		max-width: 1000px;
		padding: 0;
		.product-view {		
			.product-img-box {
				width: 45%;
				position: relative;
				#product_images {
/*
					li:not(:first-child) {
						display: none;
					}
*/
					ul {
						display: none;
						&.active {
							display: block;
						}
					}
					
					li/* :first-child */ {
						float: none;
						width: 100%;
						margin-bottom: 0;
						img {
							width: 100%;
							max-width: 100%;
						}
					}
					#next {
						-webkit-transform: rotate(45deg);
					    -moz-transform: rotate(45deg);
					    -o-transform: rotate(45deg);
					    -ms-transform: rotate(45deg);
					    transform: rotate(45deg);
					    display: block;
					    height: 20px;
					    width: 20px;
					    border-top: 1px solid $c-text;
					    border-right: 1px solid $c-text;
					    overflow: hidden;
					    text-indent: -5000px;
					    position: absolute;
					    right: 10px;
					    top: 50%;
					    margin-top: -13px;
					    z-index: 99999;
					}
					#prev {
						-webkit-transform: rotate(45deg);
					    -moz-transform: rotate(45deg);
					    -o-transform: rotate(45deg);
					    -ms-transform: rotate(45deg);
					    transform: rotate(45deg);
					    display: block;
					    height: 20px;
					    width: 20px;
					    border-bottom: 1px solid $c-text;
					    border-left: 1px solid $c-text;
					    overflow: hidden;
					    text-indent: -5000px;
					    position: absolute;
					    left: 10px;
					    top: 50%;
					    margin-top: -13px;
					    z-index: 99999;
			
					}


				}
				
			}
			.product-shop {
				width: 51%;
				padding: 65px 70px 0 0;
 			}
		}
	}
	
	.fancybox-close-small {
		background: transparent;
	    color: #000000;
	    width: 76px;
	    height: 60px;
	    
	    &:before, 
	    &:after {
		    content: '';
    pointer-events: none;
    position: absolute;
    border-color: #fff;
    background-color: currentColor;
    color: currentColor;
    opacity: 0.9;
    box-sizing: border-box;
    display: inline-block;
		    
		    content: '';
		    display: inline-block;
		    position: absolute;
		    height: 2px;
		    width: 29px;
		    top: calc(50% - 1px);
		    left: calc(50% - 8px);
	    }
	    &:before {
		    transform: rotate(45deg);
	    }
	    &:after {
		    transform: rotate(-45deg);
	    }
/*
		&:after {
			top: 15px;
		    right: 17px;
		    font: 45px/30px Arial,"Helvetica Neue",Helvetica,sans-serif;
		    color: $c-text;
	    }
*/
	    &:hover:after {
		    color: $c-text;
			background-color: currentColor;
	    }
	    
	    &:focus:after {
		    outline: 0 none;
		}
	    
	}	
	
	
	.loading {
		@include loadingOverlay();
		min-height: 100px;
		display: block;
	}
	
	
}



/*
 * CSM accoridian
 */
.cms-page-view { 
.customer-service {
	//@include pdptabs;
    @include pdp_accordion;
    @include pdp_accordionCollapse;
    
    dl {
	    > dt {
/*
		    font-family: $f-stack-serif;
		    font-size: $f-size-xxl;
		    letter-spacing: 2px;
		    border-top: 0 none;
*/
		    border-bottom: 2px solid #000000;
		    &:after {
			    @include arrow(down, 4px, 2px, $c-black);
			    top: 20px;
		    }
		    &.current:after {
/*
                @include triangle(up, 10px, $c-black);
                right: 0;
                top: 50%;
                margin-top: -3px;
*/
		    }
	    }
	    > dd {
		    //border-bottom: 1px solid #000000;
		    padding-left:0;
		    paddding-right:0;
		    h2 {
			    display: block;
			    //font-family: $f-stack-gt-extended-medium;
			    font-size: 20px;
			    text-transform: none;
			}
		    h3 {
			    font-size: $f-size;
				font-family: $f-stack-serif;
				span {
					font-size: $f-size !important;
				}
		    }
		    p {
			    font-family: $f-stack-gt-standard-medium;
			    font-size: $f-size;
			    line-height: 1.5;
		    }
	    }
    }
    &.accordion-open > dl > dt.current:after {
    	@include arrow(up, 4px, 2px, $c-black);
    }
}
}