
/* -------------------------------------------------------------------------------------------------  GLOBAL VARIABLES ---*/
:root {

	--primary_bright: 48, 106, 153;
	--dandy_red: 228, 1, 6;
	--primary_scale: 228, 1, 6;

	--secondary_bright: 191, 58, 52;
	--secondary_dark: 68, 22, 20;
	--secondary_scale: 163, 52, 46;

	--background_light: 233, 193, 124;
	--background_dark: 229, 220, 202;

}

/* --------------------------------------------------------------------------------------------------------  DEFAULTS ---*/
html, body {
    height: 100%;
    margin: 0px;
    padding: 0px;
	background-repeat: no-repeat;
	background-position: center top; 
}



.home_body{
	background-image: url("../images/dandy_bkgrnd_web.jpg");
	background-color: rgb(var(--background_light));
	font:17px futura, sans-serif;
	padding:0px;
	color: rgb(var(--dandy_red));
}


@media screen and (min-width: 768px) and (max-width: 991px){
    .home_body{ 
    	background-image: url("../images/dandy_bkgrnd_tablet.jpg");
    	font:18px futura, sans-serif;
    	line-height: 1.3
    }
}

@media screen and (max-width: 767px){
    .home_body {
    	background-image: url("../images/dandy_bkgrnd_mobile.jpg");
  		font:16px futura, sans-serif;
    	line-height: 1.3
    }
}




.page_body{
	background-image: url("../images/dandy_bkgrnd_basic.jpg");
	background-color: rgb(var(--background_light));
	font:17px futura, sans-serif;
	padding:0px;
	color: rgb(var(--dandy_red));
}


@media screen and (min-width: 768px) and (max-width: 991px){
    .page_body{ 
    	background-image: url("../images/dandy_bkgrnd_basic.jpg");
    	font:18px futura, sans-serif;
    	line-height: 1.3
    }
}

@media screen and (max-width: 767px){
    .page_body {
    	background-image: url("../images/dandy_bkgrnd_basic.jpg");
  		font:16px futura, sans-serif;
    	line-height: 1.3
    }
}


h1{
	font:20px futura, sans-serif;
	color: rgba(var(--primary_scale),1);
	font-weight:600;
	padding: 0px;
	padding-bottom: 7px;
    margin: 0px;
}

h2{
	font:17px futura, sans-serif;
	color: rgba(var(--primary_scale),1);
	font-weight:600;
	padding: 0px;
    margin: 0px;
    margin-bottom:5px;
    display:inline;

}

h3{
	font:35px futura, sans-serif;
	color: rgba(var(--primary_scale),0.95);
	font-weight:600;
	padding-top:-10px;
	padding: 0px;
    margin: 0px;
    display:inline;
	
}
@media screen and (max-width: 767px) {
    h3{ 
  		font:26px futura, sans-serif;
  		color: rgba(var(--primary_scale),0.95);
  		font-weight:600;
  		padding-top:-8px;
    	padding: 0px;
    	margin: 0px;
    	display:inline;
    }
}
h4{
	font:20px futura, sans-serif;
	color: rgba(var(--primary_scale));
	padding: 0px;
    margin: 0px;
    margin-bottom:5px;
    display:inline;
}
@media screen and (max-width: 767px) {
    h4{ 
  		font:16px futura, sans-serif;
  		color: rgba(var(--primary_scale));
    	padding: 0px;
    	margin: 0px;
    	margin-bottom:5px;
    	display:inline;
    }
}
h5{
	font:24px futura, sans-serif;
	color: rgba(var(--primary_scale),1);
	padding: 0px;
    margin: 0px;
    margin-bottom:10px;
    display:inline;

}
@media screen and (max-width: 767px) {
    h5{ 
  		font:20px futura, sans-serif;
  		color: rgba(var(--primary_scale),1);
    	padding: 0px;
    	margin: 0px;
    	margin-bottom:10px;
    	display:inline;
    }
}
h6{
	font:35px futura, sans-serif;
	color: rgba(var(--primary_scale),.95);
	padding-top:-10px;
	padding: 0px;
    margin: 0px;
    display:inline;
	
}
@media screen and (max-width: 767px) {
    h6{ 
  		font:26px futura, sans-serif;
  		color: rgba(var(--primary_scale),0.95);
  		padding-top:-8px;
    	padding: 0px;
    	margin: 0px;
    	display:inline;
    }
}

a{
	white-space: nowrap;
	color: rgb(var(--secondary_bright));
	font-weight:600;
	text-decoration:none;
}
a:link {
	color: rgb(var(--secondary_bright));
}
a:active {
	color: rgb(var(--secondary_bright));
}
a:visited {
	color: rgb(var(--secondary_bright));
}
a:hover {
	color: rgb(var(--primary_bright));
}


/* --------------------------------------------------------------------------------------  HEADER + NAVIGATION ---*/
.header_contain{
	margin: 0 auto;
	position: absolute;
	}

.headNav_contain{
	/*background-color: rgba(0, 255, 0, 0.2);*/
	margin: 0 auto;
   	padding: 22px;
   	position:relative;
	}

.headNavMobile_contain{
	margin: 0 auto;
    position: absolute;
	}


.nav_contain{
	/*background-color: rgba(var(--primary_scale));*/
	background-image: url("../images/dandy_bar_texture.png");
	border:none;
	border-radius: 0px;
}

.sub_nav_contain{
	background-image: url("../images/dandy_bar_texture.png");
	background-size: auto;
  	background-repeat: repeat;
	border: 0px;
	
}
.sub_nav_contain_mobile{
	background-image: url("../images/dandy_bar_texture.png");
	background-size: auto;
  	background-repeat: repeat;
	border: 0px;
	border-top:none;
	width:100%;
}

.nav_logo_block{
	width:433px;
	height:150px;	
}
.nav_link {
	font:18px futura, sans-serif;
	text-decoration:none;
	white-space: nowrap;
	font-weight:200;
}


@media screen and (min-width: 768px) and (max-width: 991px){
    .nav_link { font:18px futura, sans-serif; }
}

@media screen and (max-width: 767px){
    .nav_link { font:16px futura, sans-serif; }
}

.nav_link:link {
	color: rgb (var(--background_light));
}
.nav_link:active {
	color: rgb (var(--background_light));
}
.nav_link:visited {
	color: rgb (var(--background_light));
}
.nav_link:hover {
	color: rgb(255,255,255)
}
.sub_nav_link {
	font:16px futura, sans-serif;
	font-weight:0;
	text-decoration:none;
	white-space: nowrap;

}
.sub_nav_link:link {
	color: rgb(var(--background_light));
}
.sub_nav_link:active {
	color: rgb(var(--background_light));
}
.sub_nav_link:visited {
	color: rgb(var(--background_light));
}
.sub_nav_link:hover {
	color: rgb(255,255,255);
}


/* ----------------------------------------------------------------------------------------  CONTENT CONTAINER ---*/
.content_shell{
}

.content_contain{
	max-width: 1000px;
	padding: 0px;
	padding-top: 245px;
}


@media screen and (min-width: 768px) and (max-width: 991px){
    .content_contain { 
    	padding-top: 240px;
    	max-width: 740px;
    }
}

@media screen and (max-width: 767px){
    .content_contain {
    	padding-top: 220px;
    	max-width: 90%;
    }
}


.headline_text {
	font-size: 22px; 
	margin-top: 20px;
	color rgb(var(--dandy_red));
}
@media screen and (max-width: 767px) {
    .headline_text { 
    	color rgb(var(--dandy_red));
    	font-size:19px;
    }
}


/* --------------------------------------------------------------------------------------------- MISSION STATEMENT */

.its_the_sound{
  display: block;
  width:70%;
  margin-left: auto;
  margin-right: auto;
}



/*////////////////////////////////////////////////////////////////////////////////// HOME PAGE IMAGE ROLLOVERS */ 
.product_image{
  border-style: solid;
  border-color: rgba(var(--dandy_red));
  border-width: 2px;
}

@media screen and (min-width: 992px) {
	.homeImageVert{
		width:492px;
		height:984px;
	}

}
@media screen and (min-width: 768px) and (max-width: 991px){
	.homeImageVert{
		width:362px;
		height:724px;
	}
}

@media screen and (min-width: 992px) {
	.homeImageSquare{
		width:490px;
		height:490px;
	}
}
@media screen and (min-width: 768px) and (max-width: 991px){
	.homeImageSquare{
		width:360px;
		height:360px;
	}
}



a img.hover {
    display: none;
}
a img.default {
    display: inherit;
}
a:hover img.hover {
    display: inherit;
}
a:hover img.default {
    display: none;
}


/* ----------------------------------------------------------------------------------------------- MISSION STATEMENT */

.mission_text {
	font-size:34px;
	font-weight: 100;
	color: rgba(var(--dandy_red),0.8);
	text-align: left;
	/*line-height: 3.4vw;*/
}

@media screen and (min-width: 768px) and (max-width: 991px){
    .mission_text {
    	font-size: 27px;
    	/*line-height: 1.20;*/
    }
}

@media screen and (max-width: 767px) {
    .mission_text { 
    	font-size:20px;
    	line-height: 1.3;
    }
}


/* ----------------------------------------------------------------------------------------------- MISC TYPE STYLES */


.body_bold{
	font:18px futura, sans-serif;
	color: rgba(var(--dandy_red));
	font-weight:600;
}
.fine_print{
	font:16px futura, sans-serif;
	color: rgba(var(--dandy_red));
}


.test_image {
	background-image: url("../images/dandy_bar_texture.png");
	background-size: auto;
  	background-repeat: repeat;
  	position: relative;
  	bottom: 0;
  	left: 0;
  	width:1000px;
  	height:1000px;
}

/*-----------------------------------------------------------------------------------------------------------FOOTER*/
.footer_contain {
	background-image: url("../images/dandy_bar_texture.png");
	background-size: auto;
  	background-repeat: repeat;
  	position: relative;
  	bottom: 0;
  	left: 0;
  	height:230px;
}
@media (min-width: 990px) {
	.footer_contain {
		height:230px;

	}
}
@media screen and (min-width: 768px) and (max-width: 991px){
	.footer_contain {
		height:230px;
    }
}
@media (max-width: 767px) {
	.footer_contain {
		height:230px;
    }
}


.footer_list {
	list-style-type: none;
	font-size:17px;
	font-weight:normal;
	color:rgba(var(--background_dark),.4);
}

.nav_link {
	color:rgba(var(--background_light));
	text-decoration: none;
}
.nav_link:link {
	color:rgba(var(--background_light));
}
.nav_link:active {
	color:rgba(var(--background_dark));
}
.nav_link:visited {
	color:rgba(var(--background_light));
}
.nav_link:hover {
	color: rgb(255,255,255);
}

iframe {
    aspect-ratio: 16 / 9;
    height: auto;
    width: 100%;
}

.mosaic_rule_1 {
	border-style: solid;
  	border-color: rgba(var(--dandy_red));
  	border-width: 2px;
  	

}

