/*
Theme Name: Boiler Theme
Theme URI: http://
Author: what2design
Author URI: http://what2design.com
Description: Boiler Theme
Version: 4.0
License: NA
License URI: NA
*/
/*
**********************************************************************************************
imports
**********************************************************************************************
*/
@import '/scss/grid.scss';
@import '/scss/animations.scss';
/*
**********************************************************************************************
* Variables
**********************************************************************************************
 */
// Colors
$color_primary:      #D66800;
$color_secondary:    #1fbfbf;;
$color_tertiary:	 #661C29;
$font_base:          "museo-sans", sans-serif;
$oswald:			'Oswald', sans-serif;
$noto:				'Karla', sans-serif;


$min-w: 	360px;
$max-w:		1900px;

/*********************************************************************************************
FLUID PROPERTIES
*********************************************************************************************
*/
@mixin interpolate($properties, $min-screen, $max-screen, $min-value, $max-value) {
	& {
		@each $property in $properties {
			#{$property}: $min-value;
		}

		@media screen and (min-width: $min-screen) {
			@each $property in $properties {
				#{$property}: calc-interpolation($min-screen, $min-value, $max-screen, $max-value); 
			}
		}

		@media screen and (min-width: $max-screen) {
			@each $property in $properties {
				#{$property}: $max-value;
			}
		}
	}
}

// Requires the calc-interpolation function which can also be used independently

@function calc-interpolation($min-screen, $min-value, $max-screen, $max-value) {
	$a: ($max-value - $min-value) / ($max-screen - $min-screen);
	$b: $min-value - $a * $min-screen; 

	$sign: "+";
	@if ($b < 0) {
		$sign: "-";
		$b: abs($b);
	}
	@return calc(#{$a*100}vw #{$sign} #{$b});
}

/*
**********************************************************************************************
* Mixins
**********************************************************************************************
 */
@mixin flex-size($flex-size:1){
	-webkit-flex: $lex-size;
  -ms-flex: $flex-size;
  flex: $flex-size;
}
@mixin flex{
	display: -webkit-box; 
    display: -moz-box; 
    display:-webkit-flex;
    display: -ms-flexbox;
    display:flex;
}
@mixin flex-wrap($wrap){
  -ms-flex-wrap: $wrap;
  -webkit-flex-wrap: $wrap;
  flex-wrap: $wrap;
}

// Display Order
// - applies to: flex items
// <integer>
@mixin flex-order($order: 0) {
  -webkit-order: $order;
      -ms-order: $order;
          order: $order;
}
@mixin transition-duration($time: 1s){
	-webkit-transition-duration: $time;
	-moz-transition-duration: $time;
	-ms-transition-duration: $time;
	-o-transition-duration: $time;
  	transition-duration: $time;
}
@mixin background-cover{
	-webkit-background-size: cover;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}
@mixin flex-center{
	@include flex;
    -webkit-box-pack: center;
	-moz-box-pack: center;
	 -moz-box-align: center;
    -webkit-box-align: center;
	-webkit-align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
	align-items: center;
}
@mixin custom-flex($hor-align, $vert-align, $wraps){
    @include flex;
    -webkit-box-pack: $hor-align;
	-moz-box-pack: $hor-align;
	 -moz-box-align: $vert-align;
    -webkit-box-align: $vert-align;
	-webkit-align-items: $vert-align;
	-webkit-justify-content: $hor-align;
	justify-content: $hor-align;
	align-items: $vert-align;
    flex-wrap: $wraps;
    
}
@mixin bef-aft-common{
	content: " ";
	width: 100%;
	height: 100%;
	position: absolute;
	display: block;
}
/* RESET */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	-webkit-text-size-adjust: 100%;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	line-height: 1.3em;
	border: none;
	outline: none;
	text-decoration: none;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, main {
	display: block;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
body {
	font-family: $oswald;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
	-webkit-font-smoothing: antialiased !important;
	-moz-osx-font-smoothing: grayscale;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	background-color: #F2F2F2;
}
#wrapper {
	overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
}
/*/////////////////////////////////////////////////////////////
COMMON
*//////////////////////////////////////////////////////////////
body.freeze{
	overflow:hidden;	
}
.container {
	max-width: 1200px;
	width:100%;
	margin:0 auto;
}
.fixed{
	position:fixed;	
}
.absolute{
	position:absolute;	
}
.scroll {
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}
.text-center{
	text-align:center;		
	justify-content: center;
}
.text-right{
	text-align:right;		
}
.text-left{
	text-align:left;
}
.pointer{
	cursor:pointer;	
}
.alignright {
	float:right;
	margin: 0 0 20px 20px;
}
.alignleft{
	float:left;
	margin:0 20px 20px 0;	
}
.aligncenter {
    display: block;
    margin: 0 auto !important;
}
form.aligncenter table{
	display:inline-block;
	margin:0 auto;
}
.clearfix:after {
	content: "";
	display: table;
	clear: both;
}
.flex-wrap, div.flex-wrap > .flex-container{
	@include flex-wrap(wrap);
}
.show-mobile{
	display:none;
}
.background-cover {
	background-size: cover;
	background-repeat: no-repeat;
}
.circle {
	border-radius: 50%;
}
.wpb_text_column {
	strong {
		font-weight: bold;
	}
	em {
		font-style: italic;
	}
	ul {
		padding: 20px 0 20px 20px;
		li {
			list-style: disc;
			margin-bottom: 10px;
		}
	}
	ol {
		padding: 20px 0 20px 20px;
		li {
			list-style: decimal;
			margin-bottom: 10px;
		}
	}
	a {
		color: $color_primary;
	}
}

/*/////////////////////////////////////////////////////////////
CONTAINER CLASSES
*//////////////////////////////////////////////////////////////
.content-max, .content-large, .content-medium, .content-small{
    width: 100%;
    margin: 0 auto !important;
}
.content-max{
	max-width: 1200px;
}
.content-large{
	max-width: 1000px;
}
.content-medium{
	max-width: 800px;
}
#content-wrap{
	.content-half, .content-small{
		max-width: 600px;
		&.left{
			margin: 0 0 0 auto;
		}
	}
}

/*/////////////////////////////////////////////////////////////
HEADER
*//////////////////////////////////////////////////////////////
.page-template-default, .single, .page-template-albums, .archive {
	#header-wrap{
		position: absolute;
		bottom: 41.4%;
	}
}
.home{
	#header-wrap{
		position: absolute;
		bottom: 0;
	}
}
#wrapper logo img{
	height: 47px;
}
#header-wrap {
	width: 100%;
	height: 80px;
	z-index: 2;
	background-color: #F2F2F2;
	&.fixed{
		position: fixed;
		top: 0;
		background-color: #F2F2F2;
	}
	header {
        @include custom-flex(space-between, center, wrap);
		height: 100%;
		li {
			list-style: none;
		}
		#nav {
			@include flex-center;
			nav#primary {
				> ul {
					> li {
						display: inline-block;
						margin-left: 40px;
					}
				}
			}
		}
	}
}
#cart-contact, #cart-contact-mobile{
	@include custom-flex(flex-end, center, nowrap);
	div{
		display: inline-block;	
	}
	svg{
		height: 25px;
		margin: 0 30px;
		@include transition-duration;
		path{
			fill: $color_primary;
		}
		&:hover{
			transform: scale(1.5);
			path{
				fill: $color_primary;
			}
		}
	}
}
#cart-contact{
	margin-left: 40px;
}
nav {
	ul {
		position: relative;
		display: inline-table;
		&:after {
			content: ""; 
			clear: both; 
			display: block;
		}
		li {
			a {
				display:block;
				font-weight: 400;
				font-size: 20px;
				color: #000;
				letter-spacing: 1px;
				text-transform: lowercase;
				&:hover{
					color: $color_primary
				}
			}
			&.menu-item-has-children {
				position: relative;
				cursor: pointer;
					&.show {
					> a {
						&:after {
							-webkit-transform: rotate(90deg);
							transform: rotate(90deg);
						}
					}
					> ul {
						display: block;
					}
				}
			}
		}
		ul {
			display: none;
			position: absolute; 
			top: 100%;
			left: -20px;
			background-color: #fff;
			text-align: left;
			li {
				position: relative;
				display:block;
				margin-left: 0px;
				a {
					display: block;
				}
				&.menu-item-has-children {
					padding-right: 0;
				}
			}
			ul {
				display: none;
				position: absolute; 
				left: 100%; 
				top:0;
			}
		}
	}
}
.bgr{
	width: 10% !important;
	right: 0;
}
nav#mobile {
	display:none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	&.is-open {
		display:block;
	}
	#mobile-wrapper {
		padding: 90px 30px 30px 30px;
		ul {
			width:100%;
			text-align: center;
			margin-top: 30px;
			li {
				display: block;
				margin-bottom: 20px;
				ul {
					position: static;
					margin-left: 20px;
				}
			}
		}
	}
}
/*/////////////////////////////////////////////////////////////
MOBILE ICON
*//////////////////////////////////////////////////////////////
#mobile-icon {
	cursor: pointer;
	position: absolute;
	right:30px;
	top:20px;
	width: 43px;
    height: 43px;
	border: 3px solid $color_primary;
	z-index: 10;
	div.burger-stack {
		height: 3px;
		width: 19px;
		background-color: $color_tertiary;
		position: absolute;
		top: 18px;
    	left: 9px;
		border-radius: 5px;
		&:before {
			transform: translateY(-6px);
		}
		&:after {
			transform: translateY(6px);
		}
		&:before, &:after {
			border-radius: 5px;
			height: 3px;
			width: 100%;
			background-color: $color_tertiary;
			display: block;
			content: '';
			position: absolute;
			-webkit-transition: all 0.4s ease;
			transition: all 0.4s ease;
		}
	}
	&.is-open {
		div.burger-stack {
			background: none;
			&:before {
				-webkit-transform: rotate(-45deg);
				-ms-transform: rotate(-45deg);
				transform: rotate(-45deg);
			}
			&:after {
				-webkit-transform: rotate(45deg);
				-ms-transform: rotate(45deg);
				transform: rotate(45deg);
			}
		}
	}
}

/*/////////////////////////////////////////////////////////////
CLASSES
*//////////////////////////////////////////////////////////////
#content-wrap{
	.scene-padding-large{
		@include interpolate((padding-top, padding-bottom), $min-w, $max-w, 60px, 200px);
	}
	.scene{
		@include interpolate((padding-top, padding-bottom), $min-w, $max-w, 60px, 100px);
		&.no-bottom{
			padding-bottom: 0;
		}
	}
	.overlay{
		position: relative;
		&::before{
			@include bef-aft-common;
			background-color: #000;
			opacity: 0.35;
			top: 0;
		}
	}
	.flexed{
		@include custom-flex(center, center, nowrap);
	}
	.bg-cover .vc_column-inner{
		@include background-cover;
		height: 100%;
	}
	.flex-center{
		@include flex-center;
	}
	.full-height .vc_column-inner{
		height: 100%;
		@include custom-flex(flex-start, flex-start, wrap);
	}
	.bg-black{
		background-color: #1A1A1A;
	}
	.bg-red{
		position: relative;
		&::before{
			content: "";
			position: absolute;
			height: 100%;
			width: 69.45%;
			background-color: $color-tertiary;
			right: 0;
		}
		&.pattern{
			&:before{
				background-image: url("https://anthonydavidsound.com/wp-content/uploads/2020/07/pattern-red.svg");
				background-repeat: repeat;	
				background-size: 265px;
			}
			
		}
	}
	.pad-around{
		@include interpolate((padding-left, padding-right), 767px, $max-w, 0, 15px);
	}
	.pad-left{
		padding-left: 40px;
	}
	.pad-right{
		padding-right: 40px;
	}
	.mar-right{
		margin-right: 30px;
	}
	.left-padding{
		padding-left: 30px;
	}
	.right-padding{
		padding-right: 30px;
	}
	.title-pattern{
		padding-top: 100px;
		@include interpolate(padding-top, $min-w, $max-w, 60px, 100px);
		@include interpolate(padding-bottom, $min-w, $max-w, 15px, 140px);
	}
	.overlapping-row{
		position: relative;
		@include interpolate(bottom, $min-w, $max-w, 40px, 115px);
	}
	.mtop-bigger{
		@include interpolate(margin-top, $min-w, $max-w, 30px, 90px);
	}
	.mtop-big{
		@include interpolate(margin-top, $min-w, $max-w, 27px, 40px);
	}
	.mtop-small{
		@include interpolate(margin-top, $min-w, $max-w, 15px, 30px);
	}
	.banner{
		overflow: hidden;
		@include background-cover;
	}
}

/*/////////////////////////////////////////////////////////////
TYPOGRAPHY
*//////////////////////////////////////////////////////////////
#content-wrap{
	#hero{
		h1{
			@include interpolate(font-size, $min-w, $max-w, 24px, 48px);
			@include interpolate(line-height, $min-w, $max-w, 32px, 57px);
			@include interpolate(margin-bottom, $min-w, $max-w, 30px, 60px);
			font-family: $oswald;
			font-weight: 500;
			max-width: 566px;
			letter-spacing: 1px;
			margin: 0 auto;
			color: #fff;
		}
	}
	.sub-hero{
		h1{
			@include interpolate(font-size, $min-w, $max-w, 35px, 90px);
			color: #fff;
			font-family: $oswald;
			letter-spacing: 1px;
		}
	}
	h2, h3, p{
		color: #fff;
	}
	h2{
		font-family: $oswald;
		font-weight: 500;
		letter-spacing: 1px;
		text-transform: lowercase;
		@include interpolate(font-size, $min-w, $max-w, 25px, 60px);
		@include interpolate(line-height, $min-w, $max-w, 30px, 65px);
		@include interpolate(margin-bottom, $min-w, $max-w, 30px, 45px);
	}
	h3{
		font-family: $oswald;
		font-weight: 500;
		letter-spacing: .50px;
		@include interpolate(font-size, $min-w, $max-w, 18px, 26px);
		@include interpolate(line-height, $min-w, $max-w, 22px, 32px);
		@include interpolate(margin-bottom, $min-w, $max-w, 15px, 45px);
	}
	h4{
		font-family: $oswald;
		font-weight: 400;
		letter-spacing: .50px;
		@include interpolate(font-size, $min-w, $max-w, 17px, 20px);
		@include interpolate(margin-bottom, $min-w, $max-w, 15px, 30px);
	}
	p, h3 span{
		font-family: $noto;
		font-weight: 400;
		@include interpolate(font-size, $min-w, $max-w, 13px, 17px);
		@include interpolate(line-height, $min-w, $max-w, 21px, 27px);
		letter-spacing: 0.5px;
	}
}

/*/////////////////////////////////////////////////////////////
HOMEPAGE
*//////////////////////////////////////////////////////////////
#content-wrap{
	#hero{
		height: 91.45vh;
		position: relative;
		margin-bottom: 60px;
		.hero-background .vc_column-inner{
			height: 91.45vh;
			width: 100%;
			@include background-cover;
		}
		#content-row{
			position: absolute;
			top: 38%;
			left: 0;
			right: 0;
			margin: auto;
		}
		#social-media{
			max-width: 52px;
			display: flex;
			text-align: center;
			position: absolute;
			right: 0;
			top: -30px;
			ul li{
				background-color: #661C29;
				padding: 11px;
				position: relative;
				span{
					visibility: hidden;
					position: absolute;
					background-color: $color_tertiary;
					color: #fff;
					padding: 10px;
					right: 65px;
					top: 5px;
				}
			}
			ul{
				li{
					list-style: none;
					transition-duration: 400ms;
					&:hover{
						svg{
							transform: scale(1.5);
							path{
								fill: $color_secondary;
							}
						}
						span{
							visibility: visible;
						}
					}
				}
			}
			svg{transition-duration: 1s;}
			#spotify, #instagram, #reverbnation{
				svg{@include interpolate(height, $min-w, $max-w, 19px, 29px);}
			}
			#youtube{
				svg{@include interpolate(height, $min-w, $max-w, 14px, 21px);}
			}
			#facebook{
				svg{@include interpolate(height, $min-w, $max-w, 21px, 31px);}
			}
		}
	}
	.video-slider{
		@include interpolate(padding-bottom, $min-w, $max-w, 60px, 100px);
		h2{
			@include interpolate(padding-top, $min-w, $max-w, 60px, 100px);
		}
	}
}
/*/////////////////////////////////////////////////////////////
SUBPAGE THE ARTIST
*//////////////////////////////////////////////////////////////
#content-wrap{
	.sub-hero{
		height: 50vh;
		margin-bottom: 80px;
		position: relative;
		.sub-hero-background .vc_column-inner{
			height: 50vh;
			@include background-cover;
		}
		.content-row{
			position: absolute;
			top: 25%;
			left: 0;
			right: 0;
		}
	}
	#timeline{
		.section{
			display: flex;
			align-items: center;
			position: relative;
			&::before{
				@include bef-aft-common;
				width: 3px;
				background-color: $color_primary;
				left: 0;
				right: 0;
				top: 0;
				margin: auto;
			}
			&.w-padding-both{
				@include interpolate((padding-bottom, padding-top), $min-w, $max-w, 50px, 60px);
			}
			&.w-padding{
				@include interpolate(padding-bottom, $min-w, $max-w, 50px, 60px);
			}
			a.button{
				@include interpolate(margin-top, $min-w, $max-w, 15px, 30px);
			}
		}
		.last{
				@include interpolate(padding-bottom, $min-w, $max-w, 60px, 100px);
			}
		.year{
			p{
				color: $color_secondary;
				position: relative;
				font-family: $oswald;
				font-size: 20px;
				&::before{
					content: ' \25CF';
					display: block;
					color: $color_secondary;
					position: absolute;
					top: -4px;
					font-size: 40px;
				}
			}
			&.right p{
				padding-left: 5px;
				&::before{
					left: -12px;
				}
			}
			&.left p{
				padding-right: 5px;
				&::before{
					right: -12px;
				}
			}
			&.circle{
				p{
					font-size: 20px;
					padding: 30px 22px;
					border: solid 3px $color_primary;
					border-radius: 50%;
					width: fit-content;
					margin: 0 auto;	
					background-color: #1A1A1A;
					&::before{
						display: none;
					}
				}
			}
		}
	}
}

/*/////////////////////////////////////////////////////////////
ALBUMS
*//////////////////////////////////////////////////////////////
#content-wrap{
	.black-pattern{
		position: relative;
		&::before{
			content: " ";
			position: absolute;
			display: block;
			height: 65%;
			width: 69.45%;
			background-color: #1A1A1A;
			display: block;
			right: 0;
			z-index: -1;
		}
		&.pattern{
			&::before{
				background-image: url("https://www.anthonydavidsound.com/wp-content/uploads/2020/07/black-pattern.svg");
				background-repeat: repeat;	
				background-size: 265px;
			}
			
		}
	}	
	.album-thumb{
		@include background-cover;
		@include interpolate(min-height, $min-w, $max-w, 278px, 522px);
		margin-top: 100px;
	}
	article{
		@include interpolate(margin-bottom, $min-w, $max-w, 60px, 100px);
	}
	.mtop{
		margin-top: 20px;
	}
	.top-big{
		position: absolute;
		bottom: 85px;
	}
	.sub-hero-background{
		@include background-cover;
		&.albums-left{
			background-image: url("https://www.anthonydavidsound.com/wp-content/uploads/2020/07/antohnydavid-microphone-image.jpg");
		}
		&.albums-right{
			background-image: url("https://www.anthonydavidsound.com/wp-content/uploads/2020/07/anthonydavid-turntable-image.jpg");
		}
	}
}

/*PAGINATION*/
#content-wrap{
	.pages{
		@include interpolate(margin-bottom, $min-w, $max-w, 60px, 100px);
		span, a{
			@include interpolate(font-size, $min-w, $max-w, 20px, 30px);
			padding: 5px 10px;
			@include interpolate(line-height, $min-w, $max-w, 35px, 45px);
			line-height: 45px;
			margin: 0 10px;
		}
		span{
			border: 2px solid $color_tertiary;
		}
	}	
}

/*/////////////////////////////////////////////////////////////
SINGLE ALBUM
*//////////////////////////////////////////////////////////////
#content-wrap{
	.sub-hero{
		h3{
			margin-bottom: 0;
		}
	}
	.img-square .vc_column-inner, .playlist-square .vc_column-inner{
		height: 100%;
		min-height: 80vh;
	}
	.img-square .vc_column-inner{
		@include background-cover;
	}
	.playlist-square{
		iframe{
			width: 100%;
			height: 80vh;
			color: red;
		}
	}
	.album-info{
		h2, h3, p{
			color: #000;
		}
		h3 em{
			font-style: normal;
			font-size: 18px;
			font-family: $noto;
			font-weight: 700;
			letter-spacing: .50px;
		}
		h3 a{
			text-decoration: underline;
			&:hover{
				color: $color_tertiary;
			}
		}
	}
}
/*/////////////////////////////////////////////////////////////
FOOTER
*//////////////////////////////////////////////////////////////
#cookies{
	letter-spacing: 1px;
}
.bottom-cta{
	background-image: url("https://www.anthonydavidsound.com/wp-content/uploads/2020/07/anthonydavid-bottom-cta.jpg");
	@include background-cover;
}
#footer-container {
	text-align: center;
	@include interpolate(margin-top, $min-w, $max-w, 60px, 100px);
	.menu-footer-menu-container{
		margin-bottom: 50px;
		ul li{
			display: inline-block;
		}
	}
	img{
		margin-bottom: 20px;
	}
	#footer-social-media{
		@include interpolate(margin-top, $min-w, $max-w, 30px, 60px);
		ul li{
			display: inline-block;
			svg{
				margin: 0 10px;
				@include transition-duration;
				path{
					fill: $color_tertiary;
				}
				&:hover{
					transform: scale(1.5);
					path{
						fill: $color_secondary;
					}
				}
			}
		}
		#spotify, #instagram, #reverbnation{
			svg{height: 23px;}
		}
		#youtube{
			svg{height: 22px;}
		}
		#facebook{
			svg{height: 24px;}
		}
	}
	.menu-footer-menu-container{
		ul li{
			margin: 0 20px;
			a{
				font-weight: 400;
				font-size: 20px;
				color: #000;
				letter-spacing: 1px;
				text-transform: lowercase;
			}
		}
	}
}
#site-credit{
	text-align: center;
	padding: 20px;
	max-width: 1200px;
	margin: 35px auto 0;
	border-top: 1px solid #DADADA;
	p{ 
		color: #666666;
		font-family: $noto;
		font-size: 14px;
		letter-spacing: .50px;
		font-weight: 400;
	}
}

/*/////////////////////////////////////////////////////////////
SUBPAGE SHOWS
*//////////////////////////////////////////////////////////////
#content-wrap{
	.show-container{
		.header .profile{
			color: #fff !important;
		}
	}
}

/*/////////////////////////////////////////////////////////////
SLIDER
*//////////////////////////////////////////////////////////////

/*/////////////////////////////////////////////////////////////
BUTTONS
*//////////////////////////////////////////////////////////////
a.button, input[type="submit"] {
	@include transition-duration;
	@include interpolate(font-size, $min-w, $max-w, 12px, 20px);
	@include interpolate(padding-top,$min-w, $max-w, 4px, 9px);
	@include interpolate(padding-bottom, $min-w, $max-w, 8px, 13px);
	@include interpolate((padding-left, padding-right), $min-w, $max-w, 20px, 40px);
	@include interpolate(line-height, $min-w, $max-w, 14px, 24px);
	font-family: $oswald;
	font-weight: 400;
	color: #000;
	text-transform: lowercase;
	background-color: $color_primary;
	display: inline-block;
	letter-spacing: 1px;
	text-align: center;
	&:hover {
		background-color: $color_secondary;
	}
	&.secondary{
		background-color: $color_secondary;
		&:hover{
			background-color: $color_tertiary;
			color: #fff;
		}
	}
	&.tertiary{
		background-color: $color_tertiary;
		color: #fff;
		&:hover{
			background-color: $color_primary;
			color: #000;
		}
	}
	&.pair{
		@include interpolate(min-width, $min-w, $max-w, 100px, 180px);
	}
}
/*/////////////////////////////////////////////////////////////
FORMS
*//////////////////////////////////////////////////////////////
input, input[type="text"], input[type="email"], input[type="textarea"], input[type="submit"], input[type="checkbox"], textarea, select, button {
	border-radius: 0;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
.grecaptcha-badge {
	visibility: collapse !important;
}
/*/////////////////////////////////////////////////////////////
WPBAKERY OVERRIDES
*//////////////////////////////////////////////////////////////
#content-wrap {
	.vc_column_container {
		> .vc_column-inner {
			padding-left: 0;
			padding-right: 0;
		}
	}
	.vc_row {
		margin-left: 0;
		margin-right:0;
		&.container {
			margin-left: auto;
			margin-right: auto;
		}
	}
	.vc_col-has-fill>.vc_column-inner, .vc_row-has-fill+.vc_row-full-width+.vc_row>.vc_column_container>.vc_column-inner, .vc_row-has-fill+.vc_row>.vc_column_container>.vc_column-inner, .vc_row-has-fill>.vc_column_container>.vc_column-inner {
		padding-top:0;
	}
	.wpb_button, .wpb_content_element, ul.wpb_thumbnails-fluid>li {
		margin-bottom: 0;
	}
}
#cart-contact-mobile{
	display: none;
}
/*/////////////////////////////////////////////////////////////
MEDIA QUERIES
*//////////////////////////////////////////////////////////////
@media screen and (max-width: 1350px){
	#wrapper .bg-red.pattern{
		background-color: #1A1A1A;
	}
}
@media screen and (max-width: 1200px) {
	#wrapper{
		.container, .content-max, .content-large, .content-medium, .content-small {
			padding-left:30px;
			padding-right:30px;
			&.vc_column_container {
				padding-left:30px;
				padding-right:30px;
			}
		}
	}
}
@media screen and (min-width: 987px) {
	/* Mobile Menu Fix */
	nav#mobile {
		&.is-open {
			display: none;
		}
	}
	.show-mobile {
		display: none;
	}
}
@media screen and (max-width: 986px) {
	.show-mobile {
		display:block;
	}
	.hide-mobile {
		display: none;
	}
	nav#mobile {
		.menu-primary-menu-container {
			position: absolute;
			width: 100%;
			height: 100%;
			overflow-y: auto;
			-webkit-overflow-scrolling: touch;
			background-color: #F2F2F2;
		}
	}
	#wrapper{
		#cart-contact{
			margin-right: 70px;
		}
	}
}
.show-small{
	display: none;
}
@media screen and (max-width: 767px) {
    /* WPBAKERY Breakpoint Media Query */
	/******************
	CLASSES
	*******************/
	.small-reverse{
		flex-direction: column-reverse;
	}
	.small-column{
		flex-direction: column;
	}
	.small-center{
		text-align: center;
	}
	.show-small{
		display: block;
	}
	#wrapper{
		.hide-small{
			display: none !important;
		}	
	}
	#content-wrap{
		.pad-left, .pad-right{
			padding-left: 30px;
			padding-right: 30px;
		}
	}
	.page-template-default, .single, .page-template-albums, .archive{
		#header-wrap{
			bottom: 60%;
		}
	}
	.home {
		#header-wrap{
			position: absolute;
			bottom: 30%;
			&.fixed{
				position: fixed;
			}
		}
	}
	/*HOMEPAGE*/
	#content-wrap{
		#hero{
			height: 60vh;
			h1{
				padding: 0 40px;
			}
			#social-media{
				top: -30vh;
			}
			.hero-background .vc_column-inner{
				height: 60vh;
			}
		}
		.bg-red::before{
			width: 100%;
		}
		.overlay .vc_column-inner, .bg-black .vc_column-inner{
			@include flex-center;
		}
	}
	/*Sub-Page TIMELINE*/
	#content-wrap{
		.sub-hero{
			height: 28vh;
			.sub-hero-background .vc_column-inner{
				height: 28vh;
			}
		}
		#timeline{
			.section::before{
				right: auto;
				left: 27px;
			}
			p{
				text-align: left !important;
			}
			a.button{
				margin-bottom: 10px;
			}
			.year.circle{
				position: relative;
				@mixin year-pseudo{
					content: "";
					display: block;
					position: absolute;
					background-color: $color_primary;
				}
				&::before{
					@include year-pseudo;
					width: 40.5%;
					height: 3px;
					top: 50%;
					left: 27px
				}
				&::after{
					@include year-pseudo;
					height: 100%;
					width: 3px;
					top: 0;
					left: 27px;
				}
				&.first{
					&::after{
						@include year-pseudo;
						height: 50%;
						width: 3px;
						top: auto;
						bottom: 0;
						left: 27px;
					}
				}
				&.lasty{
					&::after{
						@include year-pseudo;
						height: 50%;
						width: 3px;
						top: 0;
						left: 27px;						
					}
				}
			}
		}
		#timeline .year.right p::before {
			left: -14px;
		}
		/*ALBUMS PAGE*/
		.black-pattern.pattern::before{
			width: 100%;
			height: 50%;
		}
		.album-thumb{
			margin-top: 0;
		}
	}
} 

@media screen and (max-width: 572px){
	#wrapper{
		#cart-contact{
			display: none;
		}
		#cart-contact-mobile{
			display: flex;
			flex-direction: column;
			a.button{
				margin-top: 25px;
			}
		}
	}
}